Oro/index.html at main · ChaseHendrick/Oro · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!doctype html>
<html lang="en" data-theme="dark">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <title>Oro</title>
  <meta name="description" content="Oro is a 3D wave terrain synthesizer: place a dot anywhere on a landscape, twist knobs, and play the sound of the land under a moving orbit.">
  <meta name="theme-color" content="#070a12" media="(prefers-color-scheme: dark)">
  <meta name="theme-color" content="#f4eee2" media="(prefers-color-scheme: light)">
  <meta name="color-scheme" content="dark light">
  <link rel="icon" href="./favicon.svg" type="image/svg+xml">
  <link rel="manifest" href="./manifest.webmanifest">
  <link rel="apple-touch-icon" href="./apple-touch-icon.png">
  <script>
    // Resolve the theme before first paint so the page never flashes the wrong colours.
    (function () {
      var pref = 'system';
      // Follows the hosting site's Appearance setting until the player picks a theme in Oro.
      try { pref = localStorage.getItem('orograph.theme') || localStorage.getItem('hendrick-appearance') || 'system'; } catch (e) { /* storage blocked */ }
      if (pref !== 'dark' && pref !== 'light') pref = 'system';
      var dark = true;
      try { dark = window.matchMedia('(prefers-color-scheme: dark)').matches; } catch (e) { /* old browser */ }
      var theme = pref === 'system' ? (dark ? 'dark' : 'light') : pref;
      var root = document.documentElement;
      root.dataset.theme = theme;
      root.dataset.themePref = pref;
      root.style.colorScheme = theme;
      // The hidden Phosphor theme (src/ui/eggs.js applySkin), also before first paint.
      var skin = false;
      try { var fun = JSON.parse(localStorage.getItem('oro.fun.v1') || 'null'); skin = !!(fun && fun.data && fun.data.skin === 'phosphor' && fun.secret && fun.secret['logo-seven']); } catch (e) { /* storage blocked or unreadable */ }
      if (skin) root.dataset.skin = 'phosphor';
      root.style.background = skin ? (theme === 'light' ? '#f1eedf' : '#040805') : (theme === 'light' ? '#efe7d8' : '#070a12');
    })();
  </script>
</head>
<body>
  <div id="app" class="app">
    <header class="topbar" data-region="topbar"></header>
    <main class="stage" data-region="stage" aria-label="3D map">
      <div class="viewport" data-viewport></div>
    </main>
    <nav class="mobile-tabs" data-region="mtabs"></nav>
    <aside class="mappanel" data-region="map"></aside>
    <section class="dock" data-region="dock"></section>
    <section class="keys" data-region="keys"></section>
  </div>
  <noscript>
    <div class="noscript" style="position:fixed;inset:0;display:grid;place-items:center;padding:24px;text-align:center;font:16px/1.5 system-ui,sans-serif">
      Oro is an instrument that runs in your browser, so it needs JavaScript. Please turn JavaScript on and reload the page.
    </div>
  </noscript>
  <script type="module" src="./src/main.js"></script>
</body>
</html>