Ampandheaust
d34722d66d
Amp-Thread-ID: https://ampcode.com/threads/T-01a01380-b478-77d0-84a0-102880a5c5ae Co-authored-by: Heaust Azure <heaust.azure@gmail.com>
39 lines
1.5 KiB
HTML
39 lines
1.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<meta name="description" content="Edit and run Yawn render graph examples." />
|
|
<title>Yawn Playground</title>
|
|
<link rel="stylesheet" href="./styles.css" />
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<a class="brand" href="/docs/">YAWN<span>.</span></a>
|
|
<div class="recipe-meta">
|
|
<strong id="recipe-title">Playground</strong>
|
|
<span id="recipe-package"></span>
|
|
</div>
|
|
<label>
|
|
<span>Example</span>
|
|
<select id="recipe-select" aria-label="Playground example"></select>
|
|
</label>
|
|
<button id="run" class="primary" type="button">▶ Run</button>
|
|
<button id="reset" type="button">Reset</button>
|
|
<button id="copy" type="button">Copy link</button>
|
|
<a id="docs-link" class="button" href="/docs/">Docs ↗</a>
|
|
</header>
|
|
<main>
|
|
<section class="code-pane" aria-label="Code editor">
|
|
<div class="pane-title"><span>JavaScript</span><kbd>Ctrl</kbd> + <kbd>Enter</kbd> to run</div>
|
|
<textarea id="editor" spellcheck="false" aria-label="Playground code"></textarea>
|
|
</section>
|
|
<section class="preview-pane" aria-label="Live preview">
|
|
<iframe id="preview" title="Yawn playground preview"></iframe>
|
|
<output id="status" aria-live="polite">Preparing playground…</output>
|
|
</section>
|
|
</main>
|
|
<script type="module" src="./index.js"></script>
|
|
</body>
|
|
</html>
|