grabowski
607f6631a7
Deploy test site / deploy (push) Successful in 53s
New static page docs/make-a-record.html (test site /demos/make-a-record/): the artist platform as a customer would see it, polished for presenting. - five steps (design, music and art, price, fan funding, track) with a sticky stage: to-scale mock-up (record spins at 33 1/3 or 45 rpm on hover), spec chips, price per copy, ship month and the next action - design as option cards and swatches; options that do not apply stay visible and disabled (weight and gatefold off 12", colour pickers for black vinyl) - masters and artwork read in the browser as in the detailed demo, side bars per side, checks in plain words, approval 1 of 3 - price with the curve, itemised lines folded under one summary, lead time as two bars (approvals, then the 7 to 9 week quote) - fan funding: goal, break-even and what the artist keeps, money rules; the campaign on a phone with a pre-order ticker, funded or missed ends, production timeline with the artist's approvals, updates feed - record passport for one delivered copy (stamper, press, cycle time and side; stage dates; optical inspection and sampled audio), per traceability.md and quality-automation.md, IDs simulated; repress card - "Investor notes" switch with the business case per step (market research, vault, short-run economics and the Thai price gap, plant-owned vs broker and the Qrates lesson, traceability and represses); guided tour of about a minute (#tour, #notes in the URL) - light/dark theme shared with the other pages; phone layout with a bottom bar Same price list (demo-0.1) and stage table as artist-order.html, so the defaults reproduce the artist platform example: 37,836 THB per title, 232 THB per copy at 100, break-even 41, goal 100, 548 THB kept a copy. artist-platform.md: investor demo paragraph. traceability.md: the record passport as the per-copy customer view. README bullet and layout line, site DEMOS line and landing-page entry.
145 lines
6.2 KiB
HTML
145 lines
6.2 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>
|
|
<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>
|
|
<li>
|
|
<a href="demos/make-a-record/">
|
|
<strong>Make a record (investor demo)</strong>
|
|
<span>The artist platform as a customer sees it: design a record
|
|
against a to-scale mock-up, check the music and artwork, see one
|
|
clear price, let fans fund the pressing, follow production through
|
|
the artist approvals and open the record passport of one delivered
|
|
copy. Switch on investor notes for the business case behind each
|
|
step, or press Tour for a one-minute walk-through.</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="demos/artist-order/">
|
|
<strong>Artist ordering and fan funding</strong>
|
|
<span>Configure a record, type the track list or drop the master
|
|
files and artwork (checked in the browser, nothing is uploaded), get
|
|
an itemised offer with the price per copy against quantity and the
|
|
lead time, then order directly or run a fan-funded campaign to a
|
|
funded or missed end and follow the production through the artist
|
|
approvals. Indicative demo prices.</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>
|