<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tsrun Playground</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header>
<div class="header-content">
<div class="header-left">
<h1>tsrun Playground</h1>
<p class="subtitle">TypeScript interpreter in WebAssembly</p>
</div>
<div class="header-right">
<a href="https://github.com/AuroraFN/tsrun" target="_blank" class="github-link">
<svg height="20" width="20" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
</svg>
GitHub
</a>
</div>
</div>
</header>
<main class="playground">
<div class="editor-section">
<div class="section-header">
<div class="section-title">
<span>Code</span>
<select id="examples" class="examples-select">
<option value="">-- Select Example --</option>
</select>
</div>
<div class="controls">
<span class="keyboard-hint">Ctrl+Enter to run</span>
<button id="run-btn" class="btn btn-primary">
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<path d="M8 5v14l11-7z"/>
</svg>
Run
</button>
<button id="clear-btn" class="btn btn-secondary">Clear</button>
</div>
</div>
<textarea id="code" spellcheck="false" placeholder="Enter your TypeScript/JavaScript code here..."></textarea>
</div>
<div class="output-section">
<div class="section-header">
<span>Output</span>
<span id="status" class="status"></span>
</div>
<div id="output" class="output-content"></div>
</div>
</main>
<footer>
<div class="footer-content">
<p>
Powered by <strong>tsrun</strong> - A TypeScript interpreter written in Rust, compiled to WebAssembly
</p>
<p class="footer-features">
Supports: ES6+ syntax, TypeScript types, classes, async/generators, Map/Set, Proxy, RegExp, and more
</p>
</div>
</footer>
</div>
<script type="module" src="main.js"></script>
</body>
</html>