cnx_vinyl/site/public/index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow">
<title>CNX Vinyl · internal test site</title>
<script>
(function(){var t=null;try{t=localStorage.getItem("cnx-theme")}catch(e){}
if(t!=="light"&&t!=="dark")t=window.matchMedia&&matchMedia("(prefers-color-scheme: light)").matches?"light":"dark";
document.documentElement.setAttribute("data-theme",t);})();
</script>
<style>
  :root {
    --bg: #0a0f1a; --panel: #0f1626; --stroke: #2a3a56;
    --fg: #d6deeb; --mute: #8a97b0; --accent: #3ddc84;
  }
  :root { color-scheme: dark; }
  html[data-theme=light] {
    color-scheme: light;
    --bg: #f4f6fa; --panel: #ffffff; --stroke: #cfd8e6;
    --fg: #1b2533; --mute: #5b6880; --accent: #0e8f4f;
  }
  main { position: relative; }
  .themebtn {
    position: absolute; top: 48px; right: 20px; background: var(--panel); color: var(--fg);
    border: 1px solid var(--stroke); border-radius: 5px; padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer;
  }
  .themebtn:hover { border-color: var(--accent); }
  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--bg); color: var(--fg);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }
  main { max-width: 760px; margin: 0 auto; padding: 48px 20px; }
  h1 { margin: 0; font-size: 28px; letter-spacing: 0.02em; }
  .tag {
    display: inline-block; margin-top: 6px; padding: 2px 8px;
    border: 1px solid var(--stroke); border-radius: 4px;
    color: var(--mute); font-size: 13px;
  }
  p.lead { color: var(--mute); margin: 18px 0 32px; }
  h2 {
    font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--mute); margin: 32px 0 12px;
  }
  ul { list-style: none; margin: 0; padding: 0; }
  li a {
    display: block; padding: 14px 16px; margin-bottom: 10px;
    background: var(--panel); border: 1px solid var(--stroke); border-radius: 6px;
    color: var(--fg); text-decoration: none;
  }
  li a:hover, li a:focus-visible { border-color: var(--accent); }
  li strong { display: block; color: var(--accent); font-weight: 600; }
  li span { color: var(--mute); font-size: 14px; }
  footer { margin-top: 40px; color: var(--mute); font-size: 13px; }
</style>
</head>
<body>
<main>
  <button class="themebtn" id="themeBtn" type="button">Light mode</button>
  <h1>CNX Vinyl</h1>
  <span class="tag">internal test site</span>
  <p class="lead">
    Demos and static pages from the CNX Vinyl planning repository, a vinyl
    pressing plant planned near Chiang Mai. Shared by link only and not
    indexed. Figures in the demos are planning estimates.
  </p>

  <h2>Demos</h2>
  <ul>
    <li>
      <a href="demos/plant-operation/">
        <strong>Plant overview (simulated SCADA)</strong>
        <span>The mature plant animated at real cycle times: Newbilt Duplex
        and Classic presses, Pheenix Alpha electroforming and Sibert stamper
        prep, from PVC intake and the material lab through pressing,
        inspection, packaging and fulfillment, with the artist gates,
        utilities and energy alongside. Real time up to a day in 24 s;
        every station is clickable; on a phone, turn it sideways and pinch
        to zoom.</span>
      </a>
    </li>
    <li>
      <a href="demos/fleet-calculator/">
        <strong>Press fleet calculator</strong>
        <span>Set the records a year and the share of splatter and specials;
        it sizes the mix of Newbilt Duplex systems and Classic automatic
        presses and lists what that fleet needs: people, power, central
        hydraulics, steam, cooling, compressed air, floor, compound and
        stampers, from the start fleet to a fully equipped press hall.
        Every assumption is editable and a scenario can be shared by
        link.</span>
      </a>
    </li>
    <li>
      <a href="demos/steam-cooling/">
        <strong>Steam and cooling plant</strong>
        <span>The utilities for the five-press fleet as a clickable process
        diagram: boiler bank, steam header and condensate return, chiller
        bank, plate heat exchanger and a branch to every press. Switch
        between the launch press, the full fleet and one module down to see
        demand against installed capacity.</span>
      </a>
    </li>
  </ul>

  <footer>Built from <code>site/</code> in the cnx_vinyl repository.</footer>
</main>
<script>
(function(){
  var b=document.getElementById("themeBtn"),de=document.documentElement;
  function set(t,save){de.setAttribute("data-theme",t);if(save){try{localStorage.setItem("cnx-theme",t)}catch(e){}}
    b.textContent=t==="light"?"☾ Dark mode":"☀ Light mode";b.title="Switch to "+(t==="light"?"dark":"light")+" mode";}
  set(de.getAttribute("data-theme")||"dark",false);
  b.addEventListener("click",function(){set(de.getAttribute("data-theme")==="light"?"dark":"light",true);b.blur();});
  var mq=window.matchMedia&&matchMedia("(prefers-color-scheme: light)");
  if(mq&&mq.addEventListener)mq.addEventListener("change",function(e){var s=null;try{s=localStorage.getItem("cnx-theme")}catch(_){}if(!s)set(e.matches?"light":"dark",false);});
})();
</script>
</body>
</html>