1---
2// The sandbox a listener's song plays in (src/jev/sandbox.mjs has the why,
3// src/jev/sandbox/player.mjs the player). The page frames it with
4// sandbox="allow-scripts", so it has an opaque origin; the deploy also
5// serves it with the policy below as a header, with `sandbox` itself
6// (src/jev/sandboxPolicy.mjs).
7import { sandboxCsp } from '../../jev/sandboxPolicy.mjs';
8---
9
10<html lang="en">
11  <head>
12    <meta charset="utf-8" />
13    <!-- songs load samples from a root-relative URL (samples('jev-samples/
14         strudel.json')); this page is at /jev/sandbox/, so a base of / makes
15         that resolve to the site root, as it does on the main page. -->
16    <base href="/" />
17    <meta http-equiv="Content-Security-Policy" content={sandboxCsp({ meta: true })} />
18    <meta name="referrer" content="no-referrer" />
19    <meta name="robots" content="noindex" />
20    <title>jevstrudel sandbox</title>
21    <style is:inline>
22      html,
23      body {
24        margin: 0;
25        height: 100%;
26        background: #222;
27        color: #eee;
28        font: 14px system-ui, sans-serif;
29      }
30      body {
31        display: flex;
32        align-items: center;
33        justify-content: center;
34      }
35      button {
36        font: inherit;
37        padding: 8px 12px;
38        border-radius: 6px;
39        border: 1px solid #eee;
40        background: transparent;
41        color: inherit;
42        cursor: pointer;
43      }
44    </style>
45  </head>
46  <body>
47    <button id="start" type="button" hidden>▶ start this listener's song</button>
48    <script>
49      import '../../jev/sandbox/player.mjs';
50    </script>
51  </body>
52</html>