← back to Model Arena
data/artifacts/15bc10e7ee25/claude-code.html
649 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grandmillennial — A Designer Wallcoverings Lookbook</title>
<style>
:root{
/* ivory-gallery palette */
--bg:#faf8f4;
--surface:#ffffff;
--ink:#1c1a17;
--muted:#9b948a;
--accent:#b0472e;
--accent-2:#2f4c39;
--line:rgba(28,26,23,.12);
--cream:#f3ede2;
--display:'Didot','Bodoni MT','Playfair Display',Georgia,serif;
--body:-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
--cap:12px; --body-sz:16px; --lead:21px;
--h3:28px; --h2:34px; --h1:50px;
--s4:4px; --s8:8px; --s12:12px; --s16:16px; --s24:24px;
--s32:32px; --s48:48px; --s64:64px;
--radius:14px;
--shadow:0 8px 24px rgba(0,0,0,.12);
--shadow-hover:0 16px 48px rgba(0,0,0,.18);
--ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
background:var(--bg);
color:var(--ink);
font-family:var(--body);
font-size:var(--body-sz);
line-height:1.5;
-webkit-font-smoothing:antialiased;
display:flex;
flex-direction:column;
min-height:100vh;
overflow-x:hidden;
}
/* ---------- Header / wordmark ---------- */
header.site-head{
text-align:center;
padding:var(--s24) var(--s16) var(--s16);
background:var(--bg);
border-bottom:1px solid var(--line);
flex:0 0 auto;
}
.wordmark{
font-family:var(--display);
color:var(--ink);
font-size:clamp(20px,4.5vw,30px);
letter-spacing:.18em;
font-weight:400;
text-transform:uppercase;
line-height:1.1;
}
.wordmark .amp{color:var(--accent);}
.head-sub{
font-family:var(--body);
font-size:var(--cap);
letter-spacing:.28em;
text-transform:uppercase;
color:var(--muted);
margin-top:var(--s8);
}
/* ---------- Carousel frame ---------- */
.stage{
flex:1 1 auto;
display:flex;
align-items:center;
justify-content:center;
padding:var(--s24) var(--s16);
position:relative;
}
.carousel{
width:100%;
max-width:440px;
position:relative;
}
.viewport{
position:relative;
border-radius:var(--radius);
overflow:hidden;
box-shadow:var(--shadow);
background:var(--surface);
aspect-ratio:4/5;
}
.track{
display:flex;
height:100%;
transition:transform .6s var(--ease);
will-change:transform;
}
.slide{
min-width:100%;
height:100%;
position:relative;
display:flex;
flex-direction:column;
}
/* ---------- Slide chrome ---------- */
.slide-inner{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
padding:var(--s24);
}
.kicker{
font-size:var(--cap);
letter-spacing:.2em;
text-transform:uppercase;
color:var(--muted);
}
/* ===== COVER SLIDE ===== */
.cover{
background:
radial-gradient(circle at 22% 18%, rgba(176,71,46,.10), transparent 42%),
radial-gradient(circle at 82% 88%, rgba(47,76,57,.12), transparent 46%),
var(--cream);
justify-content:space-between;
}
.cover-pattern{
position:absolute;
inset:0;
opacity:.5;
}
.cover-top{position:relative;z-index:2;}
.cover-mid{position:relative;z-index:2;margin:auto 0;}
.cover-style{
font-family:var(--display);
font-size:clamp(40px,11vw,60px);
line-height:.98;
letter-spacing:.01em;
color:var(--ink);
}
.cover-style em{
display:block;
font-style:italic;
color:var(--accent);
font-size:.62em;
letter-spacing:.02em;
margin-top:var(--s8);
}
.cover-rule{
width:54px;height:2px;background:var(--accent);
margin:var(--s24) 0;
}
.cover-desc{
font-size:var(--lead);
line-height:1.45;
max-width:30ch;
color:#463f38;
position:relative;z-index:2;
}
.cover-foot{
position:relative;z-index:2;
font-size:var(--cap);
letter-spacing:.2em;
text-transform:uppercase;
color:var(--muted);
}
/* ===== PATTERN + ROOM SLIDES ===== */
.look{background:var(--surface);}
.look .swatch{
height:44%;
position:relative;
overflow:hidden;
border-bottom:1px solid var(--line);
}
.swatch-tag{
position:absolute;
left:var(--s16);top:var(--s16);
background:rgba(255,255,255,.85);
backdrop-filter:blur(4px);
padding:6px 12px;
border-radius:100px;
font-size:var(--cap);
letter-spacing:.16em;
text-transform:uppercase;
color:var(--ink);
z-index:3;
}
.look .body{
flex:1 1 auto;
display:flex;
flex-direction:row;
min-height:0;
}
.room{
width:46%;
position:relative;
overflow:hidden;
border-right:1px solid var(--line);
flex:0 0 auto;
}
/* text column — flex column keeps h2+p inside the card */
.copy{
flex:1 1 auto;
min-width:0;
display:flex;
flex-direction:column;
justify-content:center;
gap:var(--s12);
padding:var(--s24) var(--s16);
}
.copy .idx{
font-family:var(--display);
font-size:var(--h3);
color:var(--accent);
line-height:1;
}
.copy h2{
font-family:var(--display);
font-size:clamp(22px,5.4vw,28px);
font-weight:400;
line-height:1.08;
color:var(--ink);
}
.copy p{
font-size:var(--body-sz);
line-height:1.5;
color:#524b43;
}
.copy .note-lead{
font-size:var(--cap);
letter-spacing:.18em;
text-transform:uppercase;
color:var(--muted);
}
/* ===== CTA SLIDE ===== */
.cta{
background:
radial-gradient(circle at 80% 15%, rgba(47,76,57,.14), transparent 45%),
linear-gradient(160deg,#1c1a17,#2a2620);
color:var(--bg);
justify-content:center;
align-items:center;
text-align:center;
gap:var(--s16);
}
.cta .kicker{color:rgba(243,237,226,.6);}
.cta h2{
font-family:var(--display);
font-size:clamp(30px,8vw,44px);
font-weight:400;
line-height:1.04;
color:var(--bg);
}
.cta h2 em{font-style:italic;color:#d98b6f;display:block;}
.cta p{
font-size:var(--lead);
max-width:28ch;
color:rgba(243,237,226,.8);
line-height:1.45;
}
.cta .pill{
margin-top:var(--s8);
display:inline-block;
padding:14px 30px;
border:1px solid rgba(243,237,226,.5);
border-radius:100px;
font-size:var(--cap);
letter-spacing:.22em;
text-transform:uppercase;
color:var(--bg);
}
.cta .foot{
font-size:var(--cap);
letter-spacing:.2em;
text-transform:uppercase;
color:rgba(243,237,226,.5);
margin-top:var(--s8);
}
/* ---------- Controls ---------- */
.arrows{
position:absolute;
inset:0;
pointer-events:none;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 var(--s8);
}
.arrow{
pointer-events:auto;
width:44px;height:44px;
border-radius:50%;
border:none;
background:rgba(255,255,255,.82);
backdrop-filter:blur(6px);
box-shadow:0 4px 14px rgba(0,0,0,.16);
cursor:pointer;
display:flex;align-items:center;justify-content:center;
color:var(--ink);
transition:transform .18s var(--ease),background .18s var(--ease);
}
.arrow:hover{transform:scale(1.08);background:#fff;}
.arrow:active{transform:scale(.96);}
.arrow svg{width:18px;height:18px;}
.arrow[disabled]{opacity:.28;cursor:default;transform:none;}
.dots{
display:flex;
justify-content:center;
gap:var(--s8);
margin-top:var(--s24);
}
.dot{
width:8px;height:8px;
border-radius:50%;
border:none;
background:var(--line);
cursor:pointer;
padding:0;
transition:width .3s var(--ease),background .3s var(--ease);
}
.dot.active{
width:26px;
border-radius:100px;
background:var(--accent);
}
.hint{
text-align:center;
font-size:var(--cap);
letter-spacing:.2em;
text-transform:uppercase;
color:var(--muted);
margin-top:var(--s16);
}
footer.site-foot{
flex:0 0 auto;
text-align:center;
padding:var(--s16);
font-size:var(--cap);
letter-spacing:.18em;
text-transform:uppercase;
color:var(--muted);
border-top:1px solid var(--line);
}
@keyframes fadeUp{
from{opacity:0;transform:translateY(28px);}
to{opacity:1;transform:none;}
}
.slide.is-active .anim{
animation:fadeUp .7s var(--ease) both;
}
.slide.is-active .anim:nth-child(2){animation-delay:.09s;}
.slide.is-active .anim:nth-child(3){animation-delay:.18s;}
.slide.is-active .anim:nth-child(4){animation-delay:.27s;}
@media (max-width:380px){
.look .body{flex-direction:column;}
.room{width:100%;height:38%;border-right:none;border-bottom:1px solid var(--line);}
.look .swatch{height:30%;}
}
</style>
</head>
<body>
<header class="site-head">
<div class="wordmark">Designer <span class="amp">Wallcoverings</span></div>
<div class="head-sub">The Style Lookbook</div>
</header>
<main class="stage">
<div class="carousel">
<div class="viewport">
<div class="track" id="track">
<!-- ===== SLIDE 1 — COVER ===== -->
<section class="slide" data-label="Cover">
<div class="slide-inner cover">
<svg class="cover-pattern" viewBox="0 0 200 250" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<defs>
<pattern id="chintz" width="50" height="60" patternUnits="userSpaceOnUse">
<g fill="none" stroke="#b0472e" stroke-width="1.4" opacity=".55">
<circle cx="25" cy="20" r="9"/>
<circle cx="25" cy="20" r="4" fill="#b0472e" stroke="none"/>
<path d="M25 29 q-10 10 -16 4 M25 29 q10 10 16 4"/>
<path d="M0 50 q12 -8 25 0 q13 8 25 0" stroke="#2f4c39"/>
<circle cx="0" cy="50" r="3" fill="#2f4c39" stroke="none"/>
<circle cx="50" cy="50" r="3" fill="#2f4c39" stroke="none"/>
</g>
</pattern>
</defs>
<rect width="200" height="250" fill="url(#chintz)"/>
</svg>
<div class="cover-top anim">
<span class="kicker">Designer Wallcoverings · Style Edit №1</span>
</div>
<div class="cover-mid">
<h1 class="cover-style anim">Grand<em>millennial</em></h1>
<div class="cover-rule anim"></div>
<p class="cover-desc anim">Chintz, scallops & heritage blue — the granny-chic revival, styled for the modern room.</p>
</div>
<div class="cover-foot anim">Swipe to explore the look →</div>
</div>
</section>
<!-- ===== SLIDE 2 — LOOK 1 ===== -->
<section class="slide" data-label="Chintz">
<div class="slide-inner look" style="padding:0;">
<div class="swatch">
<span class="swatch-tag">Blooming Chintz</span>
<svg width="100%" height="100%" viewBox="0 0 200 120" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<rect width="200" height="120" fill="#f3ede2"/>
<defs>
<pattern id="p1" width="52" height="52" patternUnits="userSpaceOnUse" patternTransform="rotate(6)">
<g stroke-width="1.6" fill="none">
<path d="M26 8 q-14 8 -8 20 q10 12 8 -2 q-2 -14 0 -18" fill="#c66a54" stroke="#a13d28"/>
<circle cx="26" cy="26" r="6" fill="#e7b7a3" stroke="#a13d28"/>
<path d="M6 44 q10 -6 20 0 M46 44 q-10 -6 -20 0" stroke="#2f4c39"/>
<circle cx="6" cy="44" r="3.4" fill="#3c6349" stroke="none"/>
<circle cx="46" cy="44" r="3.4" fill="#3c6349" stroke="none"/>
</g>
</pattern>
</defs>
<rect width="200" height="120" fill="url(#p1)"/>
</svg>
</div>
<div class="body">
<div class="room" aria-hidden="true">
<svg width="100%" height="100%" viewBox="0 0 100 150" preserveAspectRatio="xMidYMid slice">
<rect width="100" height="150" fill="#eadfce"/>
<rect y="112" width="100" height="38" fill="#d8c7ad"/>
<!-- skirted sofa -->
<rect x="16" y="70" width="68" height="42" rx="5" fill="#c66a54"/>
<rect x="16" y="58" width="68" height="20" rx="9" fill="#d67d67"/>
<rect x="22" y="60" width="22" height="18" rx="5" fill="#f0d9cf"/>
<rect x="56" y="60" width="22" height="18" rx="5" fill="#3c6349"/>
<!-- lamp -->
<rect x="80" y="52" width="14" height="12" fill="#e7d7bf"/>
<rect x="85" y="64" width="4" height="24" fill="#8a7a5f"/>
<!-- framed art -->
<rect x="30" y="24" width="40" height="26" fill="#faf8f4" stroke="#b09a72" stroke-width="2"/>
<path d="M38 44 q8 -14 16 0" stroke="#2f4c39" fill="none" stroke-width="1.5"/>
</svg>
</div>
<div class="copy">
<span class="idx anim">01</span>
<span class="note-lead anim">Styling Note</span>
<h2 class="copy-h2 anim">Layer chintz on a skirted sofa</h2>
<p class="anim">Pull one bloom-hue into a velvet pillow; let the pattern do the talking.</p>
</div>
</div>
</div>
</section>
<!-- ===== SLIDE 3 — LOOK 2 ===== -->
<section class="slide" data-label="Trellis">
<div class="slide-inner look" style="padding:0;">
<div class="swatch">
<span class="swatch-tag">Garden Trellis</span>
<svg width="100%" height="100%" viewBox="0 0 200 120" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<rect width="200" height="120" fill="#eef1ea"/>
<defs>
<pattern id="p2" width="40" height="40" patternUnits="userSpaceOnUse">
<g stroke="#2f4c39" stroke-width="2" fill="none" opacity=".85">
<path d="M0 20 Q20 0 40 20 Q20 40 0 20 Z"/>
<path d="M20 0 Q40 20 20 40 Q0 20 20 0 Z"/>
<circle cx="20" cy="20" r="2.4" fill="#b0472e" stroke="none"/>
</g>
</pattern>
</defs>
<rect width="200" height="120" fill="url(#p2)"/>
</svg>
</div>
<div class="body">
<div class="room" aria-hidden="true">
<svg width="100%" height="100%" viewBox="0 0 100 150" preserveAspectRatio="xMidYMid slice">
<rect width="100" height="150" fill="#e4ead f"/>
<rect width="100" height="150" fill="#e5ebe0"/>
<rect y="116" width="100" height="34" fill="#cdd6c4"/>
<!-- rattan headboard -->
<rect x="18" y="40" width="64" height="46" rx="8" fill="#d8c199"/>
<path d="M26 46 v34 M38 46 v34 M50 46 v34 M62 46 v34 M74 46 v34" stroke="#b89b6a" stroke-width="2"/>
<!-- bedding -->
<rect x="12" y="82" width="76" height="34" rx="6" fill="#fbfaf6"/>
<rect x="22" y="72" width="24" height="18" rx="5" fill="#2f4c39"/>
<rect x="52" y="72" width="24" height="18" rx="5" fill="#a9c3b0"/>
<!-- sconce -->
<circle cx="90" cy="54" r="5" fill="#e7d7bf"/>
</svg>
</div>
<div class="copy">
<span class="idx anim">02</span>
<span class="note-lead anim">Styling Note</span>
<h2 class="copy-h2 anim">Trellis behind a rattan bed</h2>
<p class="anim">Green lattice + natural cane reads fresh, not fussy — a garden-room hush.</p>
</div>
</div>
</div>
</section>
<!-- ===== SLIDE 4 — LOOK 3 ===== -->
<section class="slide" data-label="Stripe">
<div class="slide-inner look" style="padding:0;">
<div class="swatch">
<span class="swatch-tag">Ticking Stripe</span>
<svg width="100%" height="100%" viewBox="0 0 200 120" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<rect width="200" height="120" fill="#f5f1e8"/>
<defs>
<pattern id="p3" width="26" height="10" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="7" height="10" fill="#31506b"/>
<rect x="13" y="0" width="2.4" height="10" fill="#b0472e"/>
</pattern>
</defs>
<rect width="200" height="120" fill="url(#p3)" opacity=".9"/>
</svg>
</div>
<div class="body">
<div class="room" aria-hidden="true">
<svg width="100%" height="100%" viewBox="0 0 100 150" preserveAspectRatio="xMidYMid slice">
<rect width="100" height="150" fill="#eee9dc"/>
<rect y="118" width="100" height="32" fill="#ddd3bd"/>
<!-- wainscot line -->
<rect y="86" width="100" height="4" fill="#cabf a4"/>
<rect y="86" width="100" height="3" fill="#c9bea3"/>
<!-- console -->
<rect x="24" y="92" width="52" height="26" fill="#31506b"/>
<rect x="28" y="118" width="6" height="20" fill="#26405a"/>
<rect x="66" y="118" width="6" height="20" fill="#26405a"/>
<!-- ginger jar -->
<ellipse cx="42" cy="82" rx="9" ry="11" fill="#f7f4ec" stroke="#31506b" stroke-width="1.6"/>
<path d="M42 74 q-5 8 0 8 q5 0 0 -8" fill="#31506b"/>
<!-- mirror -->
<circle cx="66" cy="60" r="15" fill="#eae3d3" stroke="#b8a271" stroke-width="3"/>
</svg>
</div>
<div class="copy">
<span class="idx anim">03</span>
<span class="note-lead anim">Styling Note</span>
<h2 class="copy-h2 anim">Ticking stripe + blue & white</h2>
<p class="anim">Ground the flounce with a tailored stripe and a row of ginger jars.</p>
</div>
</div>
</div>
</section>
<!-- ===== SLIDE 5 — CTA ===== -->
<section class="slide" data-label="Shop">
<div class="slide-inner cta">
<span class="kicker anim">Designer Wallcoverings</span>
<h2 class="anim">Bring the look home<em>Grandmillennial, curated.</em></h2>
<p class="anim">Explore chintz, trellis & stripe wallpapers — order swatches, style your room.</p>
<span class="pill anim">Shop the Collection</span>
<span class="foot anim">designerwallcoverings.com</span>
</div>
</section>
</div><!-- /track -->
<div class="arrows">
<button class="arrow" id="prev" aria-label="Previous slide">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
</button>
<button class="arrow" id="next" aria-label="Next slide">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
</button>
</div>
</div><!-- /viewport -->
<div class="dots" id="dots"></div>
<div class="hint">Swipe · or use ← →</div>
</div>
</main>
<footer class="site-foot">Designer Wallcoverings — Est. Interiors</footer>
<script>
(function(){
var track = document.getElementById('track');
var slides = Array.prototype.slice.call(track.children);
var dotsWrap = document.getElementById('dots');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var i = 0, n = slides.length;
// build dots
slides.forEach(function(s, idx){
var b = document.createElement('button');
b.className = 'dot';
b.setAttribute('aria-label','Go to slide ' + (idx+1));
b.addEventListener('click', function(){ go(idx); });
dotsWrap.appendChild(b);
});
var dots = Array.prototype.slice.call(dotsWrap.children);
function render(){
track.style.transform = 'translateX(' + (-i*100) + '%)';
dots.forEach(function(d,idx){ d.classList.toggle('active', idx===i); });
slides.forEach(function(s,idx){ s.classList.toggle('is-active', idx===i); });
prev.disabled = (i===0);
next.disabled = (i===n-1);
}
function go(t){
i = Math.max(0, Math.min(n-1, t));
render();
}
function step(d){ go(i+d); }
prev.addEventListener('click', function(){ step(-1); });
next.addEventListener('click', function(){ step(1); });
document.addEventListener('keydown', function(e){
if(e.key === 'ArrowLeft') step(-1);
else if(e.key === 'ArrowRight') step(1);
});
// touch / swipe
var x0 = null;
var vp = track.parentNode;
vp.addEventListener('touchstart', function(e){ x0 = e.touches[0].clientX; }, {passive:true});
vp.addEventListener('touchend', function(e){
if(x0 === null) return;
var dx = e.changedTouches[0].clientX - x0;
if(Math.abs(dx) > 40){ step(dx < 0 ? 1 : -1); }
x0 = null;
}, {passive:true});
render();
})();
</script>
</body>
</html>