From 2a3da0778f5289d4ca51c34835991099bf3f8a6d Mon Sep 17 00:00:00 2001
From: grabowski <berwn@buildfor.life>
Date: Wed, 14 Oct 2026 19:33:36 +0700
Subject: [PATCH] Artist ordering demo: mock-up drawn to scale for 12", 10" and
 7"

The record and jacket in the mock-up (sidebar and fan campaign page) now
scale with the chosen format: record diameters 302 / 250 / 175 mm
(IEC 60098), jackets 314 / 260 / 184 mm, labels 100 / 100 / 90 mm, so a
7" label is relatively larger as on the real disc. Smaller formats show
a dashed 12" jacket outline for scale and a caption with the sizes.
---
 docs/artist-order.html | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/docs/artist-order.html b/docs/artist-order.html
index df3f344..79845b4 100644
--- a/docs/artist-order.html
+++ b/docs/artist-order.html
@@ -590,24 +590,29 @@ function checkList(){
 
 /* ---- mock-up ---- */
 function rnd(seed){return function(){seed|=0;seed=seed+0x6D2B79F5|0;let t=Math.imul(seed^seed>>>15,1|seed);t=t+Math.imul(t^t>>>7,61|t)^t;return ((t^t>>>14)>>>0)/4294967296;};}
+/* real sizes, mm: record diameter (IEC 60098: 301.6 / 250.8 / 174.6), jacket (12.375" / 10.25" / 7.25"), label */
+const SIZE_MM={"12":{rec:302,jk:314,lab:100,name:"12\" LP"},"10":{rec:250,jk:260,lab:100,name:"10\""},"7":{rec:175,jk:184,lab:90,name:"7\" single"}};
 function mockSVG(id){
   const dark=S.colour==="black",base=dark?"#161616":S.c1,groove=dark?"rgba(255,255,255,0.07)":"rgba(0,0,0,0.10)";
-  let defs=`<clipPath id="${id}c"><circle r="105"/></clipPath><clipPath id="${id}l"><circle r="34"/></clipPath>`+
+  const Z=SIZE_MM[S.size],k=Z.rec/SIZE_MM["12"].rec,kj=Z.jk/SIZE_MM["12"].jk,rl=105*Z.lab/Z.rec,fs=rl/34.8;
+  const JW=212*kj,JX=8,JY=228-JW,cy=JY+JW/2,cx=JX+JW+rl*k+6;
+  let defs=`<clipPath id="${id}c"><circle r="105"/></clipPath><clipPath id="${id}l"><circle r="${rl.toFixed(1)}"/></clipPath>`+
     `<radialGradient id="${id}sh" cx="0.35" cy="0.3" r="0.9"><stop offset="0" stop-color="#fff" stop-opacity="0.13"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></radialGradient>`+
     `<filter id="${id}m" x="-10%" y="-10%" width="120%" height="120%"><feTurbulence type="fractalNoise" baseFrequency="0.008 0.03" numOctaves="3" seed="4" result="n"/><feColorMatrix in="n" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  7 0 0 0 -3.3" result="m"/><feFlood flood-color="${S.c2}" result="f"/><feComposite in="f" in2="m" operator="in"/></filter>`+
     `<linearGradient id="${id}g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="${dark?"#3a4d70":S.c1}"/><stop offset="1" stop-color="#0d1322"/></linearGradient>`;
-  function disc(cx){
-    let g=`<g transform="translate(${cx} 122)"><circle r="105" fill="${base}"/>`;
+  function disc(x){
+    let g=`<g transform="translate(${x.toFixed(1)} ${cy.toFixed(1)}) scale(${k.toFixed(3)})"><circle r="105" fill="${base}"/>`;
     if(S.colour==="marbled")g+=`<rect x="-105" y="-105" width="210" height="210" fill="${S.c2}" filter="url(#${id}m)" clip-path="url(#${id}c)"/>`;
     if(S.colour==="splatter"){const r=rnd(7);let dots="";for(let i=0;i<80;i++){const a=r()*6.283,d=Math.sqrt(r())*100,s=1+r()*5;dots+=`<circle cx="${(Math.cos(a)*d).toFixed(1)}" cy="${(Math.sin(a)*d).toFixed(1)}" r="${s.toFixed(1)}" fill="${r()<0.8?S.c2:"#ffffff"}"/>`;}g+=`<g clip-path="url(#${id}c)">${dots}</g>`;}
-    for(let r=100;r>=40;r-=4)g+=`<circle r="${r}" fill="none" stroke="${groove}" stroke-width="0.6"/>`;
+    for(let r=100;r>=rl+5;r-=4)g+=`<circle r="${r}" fill="none" stroke="${groove}" stroke-width="${(0.6/k).toFixed(2)}"/>`;
     g+=`<circle r="105" fill="url(#${id}sh)"/>`;
-    if(S.art.label&&S.art.label.url)g+=`<image href="${S.art.label.url}" x="-34" y="-34" width="68" height="68" preserveAspectRatio="xMidYMid slice" clip-path="url(#${id}l)"/>`;
-    else g+=`<circle r="34" fill="#efe6d2"/><text y="-6" text-anchor="middle" font-size="7" font-weight="700" fill="#2a2a2a">${esc(S.artist.slice(0,20))}</text><text y="14" text-anchor="middle" font-size="6" fill="#444">${esc(S.title.slice(0,24))}</text>`;
-    return g+`<circle r="2.6" style="fill:var(--panel)"/></g>`;
+    const L=rl.toFixed(1);
+    if(S.art.label&&S.art.label.url)g+=`<image href="${S.art.label.url}" x="-${L}" y="-${L}" width="${(2*rl).toFixed(1)}" height="${(2*rl).toFixed(1)}" preserveAspectRatio="xMidYMid slice" clip-path="url(#${id}l)"/>`;
+    else g+=`<circle r="${L}" fill="#efe6d2"/><text y="${(-6*fs).toFixed(1)}" text-anchor="middle" font-size="${(7*fs).toFixed(1)}" font-weight="700" fill="#2a2a2a">${esc(S.artist.slice(0,20))}</text><text y="${(14*fs).toFixed(1)}" text-anchor="middle" font-size="${(6*fs).toFixed(1)}" fill="#444">${esc(S.title.slice(0,24))}</text>`;
+    return g+`<circle r="${(2.6/k).toFixed(2)}" style="fill:var(--panel)"/></g>`;
   }
-  let recs=(S.discs>1?disc(292):"")+disc(260),jk="";
-  const J={x:8,y:16,w:212};
+  const recs=(S.discs>1?disc(cx+32*k):"")+disc(cx);
+  let jk="";const J={x:0,y:0,w:212};
   if(S.jacket==="gatefold")jk+=`<rect x="${J.x-4}" y="${J.y-4}" width="${J.w}" height="${J.w}" fill="#0b101c" stroke="#30405e"/>`;
   if(S.jacket==="none")jk+=`<rect x="${J.x}" y="${J.y}" width="${J.w}" height="${J.w}" fill="none" style="stroke:var(--mute)" stroke-dasharray="6 5"/><text x="${J.x+J.w/2}" y="${J.y+J.w/2}" text-anchor="middle" font-size="13" style="fill:var(--mute)">your own jacket</text>`;
   else if(S.art.jacket&&S.art.jacket.url&&S.jacket!=="plain")jk+=`<image href="${S.art.jacket.url}" x="${J.x}" y="${J.y}" width="${J.w}" height="${J.w}" preserveAspectRatio="xMidYMid slice"/>`;
@@ -618,7 +623,10 @@ function mockSVG(id){
     if(S.sticker)jk+=`<circle cx="${J.x+J.w-30}" cy="${J.y+28}" r="19" fill="#ffd23f"/><text x="${J.x+J.w-30}" y="${J.y+32}" text-anchor="middle" font-size="10" font-weight="700" fill="#222">NEW</text>`;
     if(S.numbered)jk+=`<text x="${J.x+J.w-8}" y="${J.y+J.w-8}" text-anchor="end" font-size="9" fill="#fff" opacity="0.85">No. 001</text>`;
   }
-  return `<svg viewBox="0 0 402 246" role="img" aria-label="Mock-up of the record"><defs>${defs}</defs>${recs}${jk}</svg>`;
+  /* a 12" jacket outline for scale when a smaller format is chosen */
+  const ghost=S.size==="12"?"":`<rect x="8" y="16" width="212" height="212" fill="none" style="stroke:var(--stroke)" stroke-dasharray="5 5"/><text x="14" y="30" font-size="10" style="fill:var(--mute)">12" jacket, for scale</text>`;
+  const cap=`<text x="398" y="243" text-anchor="end" font-size="10" style="fill:var(--mute)">${Z.name}: record ${Z.rec} mm, jacket ${Z.jk} mm</text>`;
+  return `<svg viewBox="0 0 402 248" role="img" aria-label="Mock-up of the ${esc(Z.name)} record"><defs>${defs}</defs>${ghost}${recs}<g transform="translate(${JX} ${JY.toFixed(1)}) scale(${kj.toFixed(3)})">${jk}</g>${cap}</svg>`;
 }
 
 /* ---- price curve ---- */