← back to Model Arena
data/artifacts/1cc50031c12f/claude-code.html
648 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Designer Wallcoverings — Grandmillennial Lookbook</title>
<style>
:root{
--bg:#faf8f4;
--surface:#ffffff;
--ink:#1c1a17;
--text:#1c1a17;
--muted:#9b948a;
--accent:#b0472e;
--accent-2:#2f4c39;
--line:rgba(28,26,23,.12);
--hair:rgba(28,26,23,.18);
--shadow:0 8px 24px rgba(28,26,23,.10);
--shadow-hover:0 16px 48px rgba(28,26,23,.16);
--ease:cubic-bezier(.22,1,.36,1);
--serif:'Cormorant Garamond','Playfair Display','EB Garamond',Didot,'Bodoni MT',Georgia,serif;
--sans:-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
background:
radial-gradient(1200px 600px at 15% -10%, rgba(176,71,46,.05), transparent 60%),
radial-gradient(1000px 700px at 100% 110%, rgba(47,76,57,.05), transparent 55%),
var(--bg);
color:var(--text);
font-family:var(--sans);
min-height:100%;
-webkit-font-smoothing:antialiased;
display:flex;
flex-direction:column;
}
/* ===== TOP BAR / WORDMARK LOCKUP ===== */
header.topbar{
position:sticky;top:0;z-index:50;
display:flex;align-items:center;justify-content:space-between;
gap:16px;
padding:20px 28px;
background:rgba(250,248,244,.82);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
border-bottom:1px solid var(--line);
}
.wordmark{
display:flex;flex-direction:column;line-height:.92;
text-decoration:none;
}
.wordmark .mark{
font-family:var(--serif);
color:var(--text); /* darkest ink, never surface */
font-weight:600;
font-size:44px;
letter-spacing:.18em;
text-transform:uppercase;
white-space:nowrap;
}
.wordmark .sub{
font-family:var(--sans);
color:var(--muted);
font-size:10px;
letter-spacing:.34em;
text-transform:uppercase;
margin-top:7px;
padding-left:.18em;
}
.header-tag{
font-family:var(--sans);
font-size:11px;letter-spacing:.15em;text-transform:uppercase;
color:var(--muted);
border:1px solid var(--hair);
padding:8px 14px;border-radius:999px;
white-space:nowrap;
}
.header-tag b{color:var(--accent);font-weight:600}
/* ===== STAGE ===== */
main{
flex:1;
display:flex;flex-direction:column;align-items:center;
padding:40px 20px 28px;
}
.frame{
width:100%;max-width:440px;
}
.editor{
display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;
margin-bottom:22px;
}
.editor .fld{
display:flex;align-items:center;gap:8px;
background:var(--surface);
border:1px solid var(--line);
border-radius:999px;
padding:8px 14px;
box-shadow:var(--shadow);
}
.editor label{
font-family:var(--sans);
font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
}
.editor input[type=text]{
font-family:var(--serif);
font-size:16px;color:var(--text);
border:none;background:transparent;outline:none;
width:150px;font-weight:600;letter-spacing:.02em;
}
.editor input[type=color]{
-webkit-appearance:none;appearance:none;
width:26px;height:26px;border:none;border-radius:50%;
background:transparent;cursor:pointer;padding:0;
}
.editor input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.editor input[type=color]::-webkit-color-swatch{border:1px solid var(--hair);border-radius:50%}
.editor input[type=color]::-moz-color-swatch{border:1px solid var(--hair);border-radius:50%}
/* ===== CAROUSEL ===== */
.carousel{
position:relative;
aspect-ratio:4/5;
border-radius:14px;
overflow:hidden;
background:var(--surface);
box-shadow:var(--shadow-hover);
border:1px solid var(--line);
}
.track{
display:flex;height:100%;
transition:transform .7s var(--ease);
will-change:transform;
}
.slide{
min-width:100%;height:100%;
position:relative;
display:flex;flex-direction:column;
padding:34px 30px;
overflow:hidden;
}
/* entrance animation for active slide content */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.slide.active .anim{animation:fadeUp .7s var(--ease) both}
.slide.active .anim.d1{animation-delay:.06s}
.slide.active .anim.d2{animation-delay:.15s}
.slide.active .anim.d3{animation-delay:.24s}
.slide.active .anim.d4{animation-delay:.33s}
.kicker{
font-family:var(--sans);
font-size:11px;letter-spacing:.28em;text-transform:uppercase;
color:var(--muted);
}
.kicker b{color:var(--accent)}
/* ---- Cover slide ---- */
.cover{justify-content:space-between}
.cover .top{display:flex;justify-content:space-between;align-items:flex-start}
.cover .no{
font-family:var(--sans);font-size:11px;letter-spacing:.2em;color:var(--muted);
}
.cover .center{display:flex;flex-direction:column;gap:14px}
.cover .eyebrow{
font-family:var(--sans);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);
}
.cover h1{
font-family:var(--serif);
font-weight:600;
font-size:58px;line-height:.98;
letter-spacing:.005em;
color:var(--text);
}
.cover .lede{
font-family:var(--serif);
font-style:italic;
font-size:21px;color:var(--muted);
max-width:30ch;
}
.cover .palette-row{display:flex;gap:10px;align-items:center}
.cover .dot{width:26px;height:26px;border-radius:50%;border:1px solid var(--hair);box-shadow:var(--shadow)}
.cover .foot{
display:flex;justify-content:space-between;align-items:flex-end;
}
.cover .foot span{font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.cover .rule{height:1px;background:var(--hair);margin:0}
/* ---- Style slides layout ---- */
.style .head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.style h2{
font-family:var(--serif);font-weight:600;font-size:30px;line-height:1.02;color:var(--text);
}
.style .idx{font-family:var(--sans);font-size:11px;letter-spacing:.2em;color:var(--muted)}
.duo{flex:1;display:grid;grid-template-rows:1fr 1fr;gap:16px;min-height:0}
.swatch{
border-radius:12px;overflow:hidden;position:relative;
border:1px solid var(--line);
box-shadow:var(--shadow);
}
.vignette{
border-radius:12px;position:relative;overflow:hidden;
border:1px solid var(--line);
box-shadow:var(--shadow);
display:flex;align-items:flex-end;
}
.vignette .room{position:absolute;inset:0}
.vignette .note{
position:relative;z-index:2;
margin:14px;padding:12px 15px;
background:rgba(255,255,255,.90);
backdrop-filter:blur(4px);
border:1px solid var(--line);
border-radius:10px;
box-shadow:var(--shadow);
max-width:82%;
}
.vignette .note .lab{
font-family:var(--sans);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
display:block;margin-bottom:4px;
}
.vignette .note p{
font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.28;color:var(--text);
}
/* ---- CTA slide ---- */
.cta{justify-content:space-between;align-items:stretch;text-align:left}
.cta .center{display:flex;flex-direction:column;gap:16px;justify-content:center;flex:1}
.cta h2{
font-family:var(--serif);font-weight:600;font-size:44px;line-height:1.0;color:var(--text);
}
.cta p{
font-family:var(--serif);font-style:italic;font-size:20px;color:var(--muted);max-width:28ch;
}
.cta .palette-row{display:flex;gap:9px;align-items:center;margin-top:2px}
.cta .dot{width:24px;height:24px;border-radius:50%;border:1px solid var(--hair);box-shadow:var(--shadow)}
.cta .btn{
align-self:flex-start;
font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
color:var(--surface);background:var(--accent);
padding:15px 30px;border-radius:999px;border:none;cursor:pointer;
box-shadow:var(--shadow);
transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
.cta .btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);background:#9a3d27}
.cta .foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--hair);padding-top:16px}
.cta .foot span{font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
/* ===== NAV: arrows + dots ===== */
.controls{
display:flex;align-items:center;justify-content:center;gap:20px;
margin-top:22px;
}
.nav-btn{
width:44px;height:44px;border-radius:50%;
border:1px solid var(--hair);background:var(--surface);
color:var(--text);cursor:pointer;
display:flex;align-items:center;justify-content:center;
box-shadow:var(--shadow);
transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.nav-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:var(--accent)}
.nav-btn:disabled{opacity:.32;cursor:default;transform:none;box-shadow:var(--shadow)}
.nav-btn svg{width:16px;height:16px}
.dots{display:flex;gap:9px;align-items:center}
.dots button{
width:8px;height:8px;border-radius:50%;padding:0;border:none;cursor:pointer;
background:var(--hair);
transition:width .3s var(--ease),background .3s var(--ease);
}
.dots button.on{width:26px;border-radius:999px;background:var(--accent)}
.hint{
margin-top:16px;text-align:center;
font-family:var(--sans);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
@media(max-width:520px){
.wordmark .mark{font-size:40px;letter-spacing:.14em;white-space:normal}
header.topbar{padding:16px 18px}
.header-tag{display:none}
.cover h1{font-size:50px}
}
</style>
</head>
<body>
<header class="topbar">
<a class="wordmark" href="#" onclick="return false">
<span class="mark">Designer Wallcoverings</span>
<span class="sub">Editorial Lookbook · Est. Interiors</span>
</a>
<div class="header-tag">The Carousel · <b>Style Study</b></div>
</header>
<main>
<div class="frame">
<div class="editor">
<div class="fld">
<label for="styleName">Style</label>
<input id="styleName" type="text" value="Grandmillennial" maxlength="22" spellcheck="false">
</div>
<div class="fld">
<label>Palette</label>
<input id="c1" type="color" value="#b0472e" title="Accent one">
<input id="c2" type="color" value="#2f4c39" title="Accent two">
<input id="c3" type="color" value="#d9c7a3" title="Neutral">
</div>
</div>
<div class="carousel" id="carousel">
<div class="track" id="track">
<!-- SLIDE 0 — COVER -->
<section class="slide cover active" data-i="0">
<div class="top anim d1">
<span class="no">Lookbook № 01</span>
<span class="no" id="coverStyleTag">Grandmillennial</span>
</div>
<div class="center">
<div class="eyebrow anim d1">A Designer Wallcoverings Study In</div>
<h1 class="anim d2" id="coverTitle">Grandmillennial</h1>
<div class="lede anim d3">Heirloom prints, ruffled edges, and a fearless love of pattern-on-pattern.</div>
<div class="palette-row anim d4">
<span class="dot pdot" data-c="1"></span>
<span class="dot pdot" data-c="2"></span>
<span class="dot pdot" data-c="3"></span>
<span class="no" style="letter-spacing:.16em;">The Palette</span>
</div>
</div>
<div class="anim d4">
<div class="rule" style="margin-bottom:14px;"></div>
<div class="foot">
<span>Swipe to explore →</span>
<span>03 Rooms · 01 Invitation</span>
</div>
</div>
</section>
<!-- SLIDE 1 — STYLE ONE -->
<section class="slide style" data-i="1">
<div class="head anim d1">
<h2>Chintz & Chinoiserie</h2>
<span class="idx">01 / 03</span>
</div>
<div class="duo">
<div class="swatch anim d2" id="sw1"></div>
<div class="vignette anim d3">
<div class="room" id="room1"></div>
<div class="note">
<span class="lab">Styling Note</span>
<p>Layer a blousy floral above the rail, then ground it with a skirted table in a tonal check.</p>
</div>
</div>
</div>
</section>
<!-- SLIDE 2 — STYLE TWO -->
<section class="slide style" data-i="2">
<div class="head anim d1">
<h2>Trellis & Bamboo</h2>
<span class="idx">02 / 03</span>
</div>
<div class="duo">
<div class="swatch anim d2" id="sw2"></div>
<div class="vignette anim d3">
<div class="room" id="room2"></div>
<div class="note">
<span class="lab">Styling Note</span>
<p>Run a garden lattice up the walls and echo it in faux-bamboo mirrors for a conservatory glow.</p>
</div>
</div>
</div>
</section>
<!-- SLIDE 3 — STYLE THREE -->
<section class="slide style" data-i="3">
<div class="head anim d1">
<h2>Scallop & Stripe</h2>
<span class="idx">03 / 03</span>
</div>
<div class="duo">
<div class="swatch anim d2" id="sw3"></div>
<div class="vignette anim d3">
<div class="room" id="room3"></div>
<div class="note">
<span class="lab">Styling Note</span>
<p>Frame a scalloped headboard against a crisp ticking stripe; trim the shade to match, edge to edge.</p>
</div>
</div>
</div>
</section>
<!-- SLIDE 4 — CTA -->
<section class="slide cta" data-i="4">
<div class="top anim d1" style="display:flex;justify-content:space-between;">
<span class="kicker"><b>Designer Wallcoverings</b></span>
<span class="kicker">№ 05</span>
</div>
<div class="center">
<h2 class="anim d2" id="ctaTitle">Bring<br>Grandmillennial<br>Home.</h2>
<p class="anim d3">Book a swatch box and let our stylists build your pattern story, room by room.</p>
<div class="palette-row anim d3">
<span class="dot pdot" data-c="1"></span>
<span class="dot pdot" data-c="2"></span>
<span class="dot pdot" data-c="3"></span>
</div>
<button class="btn anim d4" id="ctaBtn">Request Your Swatch Box</button>
</div>
<div class="foot anim d4">
<span>designerwallcoverings.com</span>
<span>@designerwallcoverings</span>
</div>
</section>
</div>
</div>
<div class="controls">
<button class="nav-btn" id="prev" aria-label="Previous">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
</button>
<div class="dots" id="dots"></div>
<button class="nav-btn" id="next" aria-label="Next">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg>
</button>
</div>
<div class="hint">Swipe · Arrow keys · Dots to navigate</div>
</div>
</main>
<!-- Success overlay (no alert/confirm) -->
<div id="overlay" style="position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
background:rgba(28,26,23,.42);backdrop-filter:blur(6px);padding:24px;">
<div style="background:var(--surface);border:1px solid var(--line);border-radius:14px;max-width:380px;width:100%;
padding:38px 34px;text-align:center;box-shadow:var(--shadow-hover);">
<div style="font-family:var(--sans);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;">
Request Received</div>
<div style="font-family:var(--serif);font-size:32px;font-weight:600;color:var(--text);line-height:1.05;margin-bottom:12px;" id="ovTitle">
Your swatch box is on its way.</div>
<p style="font-family:var(--serif);font-style:italic;font-size:18px;color:var(--muted);margin-bottom:26px;">
A stylist will curate your palette and follow up within one business day.</p>
<button id="ovClose" style="font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
color:var(--surface);background:var(--accent);padding:13px 28px;border-radius:999px;border:none;cursor:pointer;box-shadow:var(--shadow);">
Continue</button>
</div>
</div>
<script>
(function(){
var track=document.getElementById('track');
var slides=Array.prototype.slice.call(track.querySelectorAll('.slide'));
var dotsWrap=document.getElementById('dots');
var prev=document.getElementById('prev');
var next=document.getElementById('next');
var n=slides.length, cur=0;
// build dots
slides.forEach(function(_,i){
var b=document.createElement('button');
b.setAttribute('aria-label','Slide '+(i+1));
b.addEventListener('click',function(){go(i)});
dotsWrap.appendChild(b);
});
var dots=Array.prototype.slice.call(dotsWrap.children);
function render(){
track.style.transform='translateX(-'+(cur*100)+'%)';
slides.forEach(function(s,i){s.classList.toggle('active',i===cur)});
dots.forEach(function(d,i){d.classList.toggle('on',i===cur)});
prev.disabled=(cur===0);
next.disabled=(cur===n-1);
// re-trigger entrance animation on active slide
var a=slides[cur].querySelectorAll('.anim');
a.forEach(function(el){el.style.animation='none';el.offsetHeight;el.style.animation=''});
}
function go(i){cur=Math.max(0,Math.min(n-1,i));render()}
prev.addEventListener('click',function(){go(cur-1)});
next.addEventListener('click',function(){go(cur+1)});
document.addEventListener('keydown',function(e){
if(e.key==='ArrowLeft')go(cur-1);
if(e.key==='ArrowRight')go(cur+1);
});
// touch swipe
var x0=null;
var car=document.getElementById('carousel');
car.addEventListener('touchstart',function(e){x0=e.touches[0].clientX},{passive:true});
car.addEventListener('touchend',function(e){
if(x0===null)return;
var dx=e.changedTouches[0].clientX-x0;
if(Math.abs(dx)>44){dx<0?go(cur+1):go(cur-1)}
x0=null;
},{passive:true});
/* ===== palette + patterns ===== */
var C={1:'#b0472e',2:'#2f4c39',3:'#d9c7a3'};
function hexToRgb(h){h=h.replace('#','');return[parseInt(h.substr(0,2),16),parseInt(h.substr(2,2),16),parseInt(h.substr(4,2),16)]}
function mix(a,b,t){var A=hexToRgb(a),B=hexToRgb(b);return'rgb('+Math.round(A[0]+(B[0]-A[0])*t)+','+Math.round(A[1]+(B[1]-A[1])*t)+','+Math.round(A[2]+(B[2]-A[2])*t)+')'}
function tint(h,t){return mix(h,'#ffffff',t)}
function shade(h,t){return mix(h,'#1c1a17',t)}
function ivory(){return '#faf5ec'}
// Pattern 1: floral chintz (SVG damask-ish bloom scatter)
function pattern1(){
var a=C[1],b=C[2],g=C[3];
var bg=tint(g,.45);
var svg=
'<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">'+
'<rect width="120" height="120" fill="'+bg+'"/>'+
'<g stroke="'+shade(b,.15)+'" stroke-width="2" fill="none" opacity=".55">'+
'<path d="M0 60 Q30 40 60 60 T120 60"/>'+
'<path d="M60 0 Q40 30 60 60 T60 120"/>'+
'</g>'+
flower(30,30,a,b)+flower(90,90,a,b)+flower(90,30,b,a)+flower(30,90,b,a)+
leaf(60,60,g)+
'</svg>';
return svgUrl(svg);
}
function flower(cx,cy,pet,ctr){
var p='';
for(var i=0;i<6;i++){var ang=i*60*Math.PI/180;var x=cx+Math.cos(ang)*11;var y=cy+Math.sin(ang)*11;
p+='<circle cx="'+x.toFixed(1)+'" cy="'+y.toFixed(1)+'" r="7" fill="'+pet+'" opacity=".85"/>';}
p+='<circle cx="'+cx+'" cy="'+cy+'" r="6" fill="'+ctr+'"/>';
return '<g>'+p+'</g>';
}
function leaf(cx,cy,col){return '<g fill="'+col+'" opacity=".7"><ellipse cx="'+cx+'" cy="'+cy+'" rx="6" ry="14" transform="rotate(35 '+cx+' '+cy+')"/></g>'}
// Pattern 2: trellis / bamboo lattice
function pattern2(){
var a=C[2],g=C[3];
var bg=tint(g,.55);
var svg=
'<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80">'+
'<rect width="80" height="80" fill="'+bg+'"/>'+
'<g stroke="'+a+'" stroke-width="4" fill="none" stroke-linecap="round" opacity=".8">'+
'<path d="M0 40 L40 0 L80 40 L40 80 Z"/>'+
'<path d="M40 0 L40 80 M0 40 L80 40"/>'+
'</g>'+
'<g fill="'+shade(a,.2)+'">'+
'<circle cx="40" cy="0" r="3.5"/><circle cx="40" cy="80" r="3.5"/>'+
'<circle cx="0" cy="40" r="3.5"/><circle cx="80" cy="40" r="3.5"/>'+
'<circle cx="40" cy="40" r="4"/>'+
'</g>'+
'</svg>';
return svgUrl(svg);
}
// Pattern 3: scallop + stripe
function pattern3(){
var a=C[1],g=C[3];
var bg=ivory();
var stripe=tint(a,.35);
var svg=
'<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60">'+
'<rect width="60" height="60" fill="'+bg+'"/>'+
'<g fill="'+stripe+'" opacity=".9">'+
'<rect x="0" y="0" width="10" height="60"/>'+
'<rect x="20" y="0" width="10" height="60"/>'+
'<rect x="40" y="0" width="10" height="60"/>'+
'</g>'+
'<g fill="none" stroke="'+shade(a,.15)+'" stroke-width="3">'+
'<path d="M0 30 a15 15 0 0 0 30 0 a15 15 0 0 0 30 0"/>'+
'<path d="M0 15 a15 15 0 0 0 30 0 a15 15 0 0 0 30 0"/>'+
'<path d="M0 45 a15 15 0 0 0 30 0 a15 15 0 0 0 30 0"/>'+
'</g>'+
'</svg>';
return svgUrl(svg);
}
function svgUrl(s){return "url(\"data:image/svg+xml;utf8,"+encodeURIComponent(s)+"\")"}
// Room vignettes drawn with CSS gradients (walls papered, floor, furniture silhouette)
function room(el,wallPattern,accent){
var floor=shade(C[3],.35);
var wallShadow='linear-gradient(180deg, rgba(28,26,23,.04), rgba(28,26,23,.16))';
el.style.background=
/* soft window light */
'radial-gradient(120% 90% at 78% 8%, rgba(255,255,255,.45), transparent 46%),'+
wallShadow+','+
wallPattern;
el.style.backgroundSize='auto,auto,64px 64px';
// add furniture layer
el.innerHTML=
'<div style="position:absolute;left:0;right:0;bottom:0;height:32%;background:'+floor+';'+
'box-shadow:inset 0 8px 18px rgba(28,26,23,.18);"></div>'+
/* a framed art + a lampshade silhouette */
'<div style="position:absolute;left:14%;bottom:32%;width:34%;height:30%;background:'+tint(accent,.15)+';'+
'border:3px solid '+ivory()+';box-shadow:0 6px 18px rgba(28,26,23,.22);border-radius:3px;"></div>'+
'<div style="position:absolute;right:16%;bottom:31%;width:20%;height:15%;background:'+ivory()+';'+
'clip-path:polygon(22% 0,78% 0,100% 100%,0 100%);box-shadow:0 4px 12px rgba(28,26,23,.20);"></div>'+
'<div style="position:absolute;right:24%;bottom:20%;width:4%;height:12%;background:'+shade(accent,.25)+';"></div>'+
/* skirted table / chair */
'<div style="position:absolute;left:18%;bottom:6%;width:30%;height:22%;background:'+accent+';'+
'border-radius:60px 60px 8px 8px;box-shadow:0 8px 20px rgba(28,26,23,.24);opacity:.92;"></div>';
}
function applyPatterns(){
var p1=pattern1(),p2=pattern2(),p3=pattern3();
document.getElementById('sw1').style.cssText+='background:'+p1+';background-size:96px 96px;';
document.getElementById('sw2').style.cssText+='background:'+p2+';background-size:70px 70px;';
document.getElementById('sw3').style.cssText+='background:'+p3+';background-size:56px 56px;';
room(document.getElementById('room1'),p1,C[1]);
room(document.getElementById('room2'),p2,C[2]);
room(document.getElementById('room3'),p3,C[1]);
}
function applyPaletteDots(){
Array.prototype.slice.call(document.querySelectorAll('.pdot')).forEach(function(d){
d.style.background=C[d.getAttribute('data-c')];
});
}
/* ===== editable style name ===== */
var styleInput=document.getElementById('styleName');
function applyName(){
var v=(styleInput.value||'').trim()||'Your Style';
document.getElementById('coverTitle').textContent=v;
document.getElementById('coverStyleTag').textContent=v;
document.getElementById('ctaTitle').innerHTML='Bring<br>'+escapeHtml(v)+'<br>Home.';
document.getElementById('ovTitle').textContent='Your '+v+' swatch box is on its way.';
}
function escapeHtml(s){return s.replace(/[&<>"]/g,function(c){return{'&':'&','<':'<','>':'>','"':'"'}[c]})}
styleInput.addEventListener('input',applyName);
['c1','c2','c3'].forEach(function(id,i){
document.getElementById(id).addEventListener('input',function(){
C[i+1]=this.value;applyPatterns();applyPaletteDots();
});
});
/* ===== CTA overlay ===== */
var overlay=document.getElementById('overlay');
document.getElementById('ctaBtn').addEventListener('click',function(){overlay.style.display='flex'});
document.getElementById('ovClose').addEventListener('click',function(){overlay.style.display='none'});
overlay.addEventListener('click',function(e){if(e.target===overlay)overlay.style.display='none'});
// init
applyName();applyPatterns();applyPaletteDots();render();
})();
</script>
</body>
</html>