Melani-AI/Binder.html at main · xtofuub/Melani-AI · 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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Melani — From bytes to clarity</title>

  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=Geist+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>

  <style>
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    html, body { margin: 0; padding: 0; background: #f8f5ec; }
    body {
      font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
      font-feature-settings: 'ss01', 'cv11';
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      letter-spacing: -0.011em;
    }
    h1, h2, h3 { letter-spacing: -0.04em; font-weight: 600; }
    code, pre, kbd { font-family: 'Geist Mono', 'JetBrains Mono', 'SF Mono', monospace; font-feature-settings: 'ss01', 'ss02'; }
    em { font-style: italic; }
    a { color: inherit; }

    /* Dark mode — toggled via .binder-dark on #root */
    #root.binder-dark { background: #141211 !important; color: #ece9e0; }
    #root.binder-dark [data-bd-paper]   { background: #1c1a18 !important; border-color: #2a2723 !important; }
    #root.binder-dark [data-bd-bg]      { background: #141211 !important; }
    #root.binder-dark [data-bd-ink]     { color: #ece9e0 !important; }
    #root.binder-dark [data-bd-inksoft] { color: #c7c1b2 !important; }
    #root.binder-dark [data-bd-muted]   { color: #8a857a !important; }
    #root.binder-dark [data-bd-rule]    { border-color: #2a2723 !important; background-color: #2a2723 !important; }
    #root.binder-dark [data-bd-cream]   { background: #23201d !important; }
  </style>
</head>
<body>
  <div id="root"></div>

  <script>
    window.__BINDER_TWEAKS__ = { dark: true, showStrips: true };
    window.__applyBinderTweaks = function() {
      const dark = window.__BINDER_TWEAKS__.dark;
      document.getElementById('root').classList.toggle('binder-dark', !!dark);
      document.body.style.background = dark ? '#141211' : '#f8f5ec';
    };
  </script>

  <script type="text/babel" src="shared.jsx"></script>
  <script type="text/babel" src="effects.jsx"></script>
  <script type="text/babel" src="variation-a-part1.jsx"></script>
  <script type="text/babel" src="variation-a-part2.jsx"></script>

  <script type="text/babel" data-presets="react">
    function App() {
      React.useEffect(() => {
        window.__applyBinderTweaks && window.__applyBinderTweaks();
      }, []);
      return <VariationA />;
    }
    ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  </script>
</body>
</html>