grabowski
6df1301fb9
Deploy test site / deploy (push) Successful in 36s
User, October 2026: add bright/dark mode to the site for both tools. - Each page sets data-theme on <html> before first paint: the saved choice (localStorage "cnx-theme", shared by all cnxvinyl.lol pages) or, without one, the system setting (prefers-color-scheme), which it keeps following until the user picks a mode. Toggle: header button (sun / moon). - Plant overview: light overrides for every SVG class; pipe colours are now CSS variables (--p-*), used by the pipes and the legend, darkened in light mode where the dark-mode tints were too pale (DI water, granulate, stamper sets, cooling return); press state text and the VEX zone fills use variables instead of inline hex, so they flip with the theme. - Fleet calculator and landing page: light palettes; input, flag, badge and ladder-highlight colours moved to variables. Checked headless in Edge: both system schemes pick the right mode, the toggle persists across pages, computed colours flip (press text, zones, pipes, legend), no text overflow in either mode, no JS errors.
113 lines
4.7 KiB
HTML
113 lines
4.7 KiB
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>
|
|
</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>
|