grabowski
e23be20b13
Deploy test site / deploy (push) Successful in 37s
The header no longer forces a 1,600 px layout: it wraps on tablets and narrow desktops (all nine KPIs now fit at 1,600 px, one was clipped before), and on short screens (max-height 560 px, i.e. phones in landscape) it collapses to one row with a scrolling KPI strip. There the detail, event log and legend move into a side sheet (Info button, opens by itself when a station is tapped), so the drawing gets the full height. The drawing pans and zooms by viewBox, so the sim coordinates are untouched: pinch and drag on touch, wheel and drag with a mouse, plus zoom buttons and +/-/0 keys. A drag or pinch never selects the station under the finger. Uses 100dvh and disables iOS landscape text inflation. Upright phones get a hint to turn sideways. Checked in Chrome device emulation at 667x375, 740x360, 844x390, 932x430, 1024x768, 1180x820, 1366x1024, 1258x800, 1600x900, 1920x1080 (no horizontal overflow, zoom controls clear of every station) with real touch input (tap, tab switching, pinch, drag) and a 10x sim run without errors.
70 lines
2.4 KiB
HTML
70 lines
2.4 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>
|
|
<style>
|
|
:root {
|
|
--bg: #0a0f1a; --panel: #0f1626; --stroke: #2a3a56;
|
|
--fg: #d6deeb; --mute: #8a97b0; --accent: #3ddc84;
|
|
}
|
|
* { 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>
|
|
<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 whole plant animated, from PVC intake and the material lab
|
|
through extruder, press, trim, optical inspection, finishing,
|
|
packaging and fulfillment, with the metal path, utilities and energy
|
|
alongside. Every station is clickable; on a phone, turn it sideways
|
|
and pinch to zoom.</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<footer>Built from <code>site/</code> in the cnx_vinyl repository.</footer>
|
|
</main>
|
|
</body>
|
|
</html>
|