← back to Model Arena
data/artifacts/18bd2744dce2/gpt.html
942 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Designer Wallcoverings — Seasonal Color Story</title>
<style>
:root {
/* Design tokens */
--bg: #0d0d0f;
--surface: #17171c;
--ink: #f5f2ea;
--muted: #8a8578;
--accent: #c9a961; /* metallic gold */
--accent-deep: #7d6a45;
--line: rgba(201, 169, 97, 0.35);
--shadow-soft: 0 22px 45px rgba(3, 3, 4, 0.8);
--font-display: "Playfair Display", "Didot", "Bodoni MT", Georgia, serif;
--font-sans: "Avenir Next", "Century Gothic", "Segoe UI", -apple-system, "Helvetica Neue", sans-serif;
--fs-caption: 12px;
--fs-body: 16px;
--fs-lead: 21px;
--fs-h3: 28px;
--fs-h2: 38px;
--fs-h1: 50px;
--radius-lg: 18px;
--radius-pill: 999px;
--ease-swift: cubic-bezier(.22,.9,.24,1);
--ease-hero: cubic-bezier(.22,1,.36,1);
--carousel-size: 1080px;
/* Palette-specific tokens (easy to edit) */
--story-name: "Terracotta & Sage";
--swatch-oatmeal: #e5ddcf;
--swatch-oatmeal-deep: #c0b39a;
--swatch-celadon: #c6d9c7;
--swatch-celadon-deep: #8fa78f;
--swatch-terracotta: #b96446;
--swatch-terracotta-deep: #8a4931;
}
/* Basic reset */
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-sans);
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
/* Frame container to mimic Instagram square */
.app-frame {
width: min(100vw, var(--carousel-size));
height: min(100vw, var(--carousel-size));
background: radial-gradient(circle at top, #1e1e25 0, var(--bg) 52%);
padding: 24px;
display: flex;
align-items: center;
justify-content: center;
}
/* Main card */
.card {
position: relative;
width: 100%;
height: 100%;
background: radial-gradient(circle at 0 0, #24232b 0, var(--surface) 40%, #121217 100%);
border-radius: 26px;
box-shadow: var(--shadow-soft);
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Fixed header */
.header {
position: relative;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 26px 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}
.wordmark-lockup {
max-width: 220px;
display: inline-flex;
flex-direction: column;
gap: 2px;
}
.wordmark-main {
font-family: var(--font-display);
font-size: 15px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink);
white-space: nowrap;
}
.wordmark-tagline {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
.header-meta {
display: flex;
align-items: center;
gap: 18px;
font-family: var(--font-sans);
}
.meta-pill {
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
padding: 6px 12px;
border-radius: var(--radius-pill);
border: 1px solid rgba(255, 255, 255, 0.08);
background: linear-gradient(120deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0));
}
.meta-indicator {
width: 8px;
height: 8px;
border-radius: 50%;
background: radial-gradient(circle at 30% 0%, #fff, var(--accent) 55%, var(--accent-deep) 100%);
box-shadow: 0 0 0 1px rgba(201, 169, 97, 0.35);
}
/* Carousel */
.carousel {
position: relative;
flex: 1;
padding: 20px 26px 26px;
display: flex;
flex-direction: column;
}
/* Slides viewport */
.carousel-viewport {
position: relative;
flex: 1;
overflow: hidden;
border-radius: 22px;
border: 1px solid var(--line);
background:
radial-gradient(circle at top, rgba(255, 255, 255, 0.04), transparent 55%),
radial-gradient(circle at bottom, rgba(0, 0, 0, 0.8), transparent 60%);
}
/* Slides track */
.carousel-track {
display: flex;
width: 500%; /* 5 slides */
height: 100%;
transition: transform 520ms var(--ease-swift);
}
/* Individual slide */
.slide {
width: 20%;
height: 100%;
padding: 38px 46px;
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr);
column-gap: 50px;
row-gap: 28px;
align-items: center;
color: var(--ink);
}
/* Layout adjustments per slide */
.slide.is-cover {
grid-template-columns: 1.3fr 1.3fr;
}
.slide-left,
.slide-right {
min-width: 0;
}
/* Text blocks */
.kicker {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 10px;
}
.story-name {
font-family: var(--font-display);
font-size: var(--fs-h1);
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1.1;
margin-bottom: 18px;
}
.story-subtitle {
font-family: var(--font-sans);
font-size: var(--fs-lead);
color: rgba(245, 242, 234, 0.82);
max-width: 26ch;
line-height: 1.5;
}
.slide-heading {
font-family: var(--font-display);
font-size: var(--fs-h2);
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1.08;
margin-bottom: 12px;
}
.slide-descriptor {
font-family: var(--font-sans);
font-size: var(--fs-body);
color: rgba(245, 242, 234, 0.78);
line-height: 1.6;
max-width: 34ch;
}
.slide-meta-label {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
margin-top: 30px;
}
.slide-meta-value {
font-family: var(--font-sans);
font-size: 13px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
}
/* Swatch blocks */
.swatch-panel {
position: relative;
border-radius: 18px;
padding: 22px;
background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.04), transparent 60%),
radial-gradient(circle at 110% 100%, rgba(0, 0, 0, 0.85), transparent 65%);
border: 1px solid rgba(255, 255, 255, 0.06);
box-shadow:
0 28px 80px rgba(0, 0, 0, 0.85),
0 0 0 1px rgba(0, 0, 0, 0.7);
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
row-gap: 18px;
}
.swatch-grid {
position: relative;
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.06);
}
/* Oatmeal composition */
.swatch-oatmeal .swatch-grid {
background: conic-gradient(from 140deg,
var(--swatch-oatmeal) 0 42%,
var(--swatch-oatmeal-deep) 42% 68%,
var(--surface) 68% 100%);
}
.swatch-oatmeal .swatch-layer-1,
.swatch-oatmeal .swatch-layer-2 {
position: absolute;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.24);
}
.swatch-oatmeal .swatch-layer-1 {
inset: 14% 36% 38% 8%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.02));
}
.swatch-oatmeal .swatch-layer-2 {
inset: 52% 10% 10% 40%;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.2));
}
/* Celadon composition */
.swatch-celadon .swatch-grid {
background: radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.32), transparent 52%),
radial-gradient(circle at 80% 90%, rgba(0, 0, 0, 0.85), transparent 65%),
linear-gradient(135deg, var(--swatch-celadon), var(--swatch-celadon-deep));
}
.swatch-celadon .swatch-band {
position: absolute;
inset: 26% 6% 54% 6%;
border-radius: 999px;
border: 1px solid rgba(245, 242, 234, 0.35);
background: linear-gradient(90deg, rgba(19, 23, 21, 0.9), rgba(33, 48, 36, 0.1));
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.7);
}
.swatch-celadon .swatch-tile {
position: absolute;
inset: 50% 54% 10% 10%;
border-radius: 16px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.38);
}
/* Terracotta composition */
.swatch-terracotta .swatch-grid {
background:
linear-gradient(160deg, var(--swatch-terracotta-deep) 0, var(--swatch-terracotta) 45%, #f4e2c3 90%);
}
.swatch-terracotta .swatch-arch {
position: absolute;
left: 16%;
right: 36%;
bottom: -6%;
top: 24%;
border-radius: 999px 999px 0 0;
background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.55), transparent 65%),
linear-gradient(180deg, rgba(64, 32, 18, 0.9), rgba(34, 12, 6, 0.8));
box-shadow: 0 24px 50px rgba(32, 10, 4, 0.8);
border: 1px solid rgba(255, 255, 255, 0.09);
}
.swatch-terracotta .swatch-sun {
position: absolute;
width: 92px;
height: 92px;
border-radius: 50%;
right: 14%;
top: 14%;
background: radial-gradient(circle at 32% 20%, #fff7e6, #f1c88b 55%, #c7854f 100%);
box-shadow: 0 0 0 1px rgba(255, 248, 232, 0.4), 0 18px 40px rgba(124, 54, 24, 0.7);
}
/* Swatch caption */
.swatch-caption-top {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(245, 242, 234, 0.64);
}
.swatch-caption-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.swatch-name {
font-family: var(--font-display);
font-size: 17px;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.swatch-designer {
font-family: var(--font-sans);
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
/* CTA Slide */
.cta-panel {
position: relative;
border-radius: 18px;
padding: 26px 26px 24px;
background:
radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.18), transparent 52%),
radial-gradient(circle at 110% 100%, rgba(0, 0, 0, 0.9), transparent 60%),
linear-gradient(135deg, #15151b, #0b0b0d);
border: 1px solid rgba(255, 255, 255, 0.06);
box-shadow: 0 32px 90px rgba(0, 0, 0, 0.85);
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr);
column-gap: 40px;
row-gap: 24px;
align-items: center;
}
.cta-headline {
font-family: var(--font-display);
font-size: var(--fs-h2);
letter-spacing: 0.16em;
text-transform: uppercase;
line-height: 1.1;
margin-bottom: 14px;
}
.cta-copy {
font-family: var(--font-sans);
font-size: var(--fs-body);
color: rgba(245, 242, 234, 0.8);
line-height: 1.6;
max-width: 34ch;
}
.cta-footnote {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
margin-top: 18px;
}
.cta-button-group {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 16px;
}
.cta-button-main {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: var(--font-sans);
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
padding: 11px 24px;
border-radius: var(--radius-pill);
border: 1px solid rgba(255, 248, 232, 0.6);
color: #1a1409;
background: linear-gradient(135deg, #f7e6bf, #cfa460);
box-shadow:
0 14px 40px rgba(0, 0, 0, 0.8),
0 0 0 1px rgba(76, 58, 24, 0.35);
cursor: pointer;
transition:
transform 320ms var(--ease-swift),
box-shadow 320ms var(--ease-swift),
background 280ms var(--ease-swift);
}
.cta-button-main:hover {
transform: translateY(-2px);
box-shadow:
0 18px 50px rgba(0, 0, 0, 0.9),
0 0 0 1px rgba(93, 71, 33, 0.5);
background: linear-gradient(135deg, #ffefc9, #d9af69);
}
.cta-button-main:active {
transform: translateY(0);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.75),
0 0 0 1px rgba(93, 71, 33, 0.6);
}
.cta-button-secondary {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
}
/* CTA visual stack */
.cta-swatch-stack {
position: relative;
height: 220px;
}
.cta-tile {
position: absolute;
inset: 16% 18% 10% 10%;
border-radius: 18px;
background: linear-gradient(140deg, var(--swatch-oatmeal), #f9f1e4);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 26px 60px rgba(0, 0, 0, 0.85);
}
.cta-tile::before,
.cta-tile::after {
content: "";
position: absolute;
border-radius: inherit;
border: 1px solid rgba(255, 255, 255, 0.16);
}
.cta-tile::before {
inset: 12px 60px 62px 12px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.04));
}
.cta-tile::after {
inset: 54px 12px 12px 120px;
background: radial-gradient(circle at 40% 10%, rgba(255, 255, 255, 0.75), transparent 60%);
}
.cta-swatch-pill-1,
.cta-swatch-pill-2 {
position: absolute;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.12);
}
.cta-swatch-pill-1 {
inset: 8% 48% 60% 4%;
background: linear-gradient(120deg, var(--swatch-celadon), var(--swatch-celadon-deep));
}
.cta-swatch-pill-2 {
inset: 32% 6% 20% 52%;
background: linear-gradient(140deg, var(--swatch-terracotta), var(--swatch-terracotta-deep));
}
/* Carousel controls */
.carousel-controls {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 4px 0;
}
.dots {
display: flex;
align-items: center;
gap: 10px;
}
.dot {
width: 9px;
height: 9px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.3);
background: transparent;
position: relative;
overflow: hidden;
cursor: pointer;
transition:
border-color 260ms var(--ease-swift),
transform 260ms var(--ease-swift),
box-shadow 260ms var(--ease-swift);
}
.dot::before {
content: "";
position: absolute;
inset: 1px;
border-radius: inherit;
background: radial-gradient(circle at 30% 0%, var(--accent), transparent 65%);
opacity: 0;
transition: opacity 260ms var(--ease-swift);
}
.dot.is-active {
transform: translateY(-1px);
border-color: rgba(255, 255, 255, 0.6);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
}
.dot.is-active::before {
opacity: 1;
}
.dot:focus-visible {
outline: 1px solid var(--accent);
outline-offset: 2px;
}
.slide-index-label {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
}
/* Navigation arrows */
.nav-arrows {
display: flex;
align-items: center;
gap: 8px;
}
.nav-button {
width: 30px;
height: 30px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.28);
background: radial-gradient(circle at 30% 0%, rgba(255, 255, 255, 0.22), transparent 70%);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--ink);
transition:
background 260ms var(--ease-swift),
transform 260ms var(--ease-swift),
box-shadow 260ms var(--ease-swift),
border-color 260ms var(--ease-swift);
}
.nav-button svg {
width: 11px;
height: 11px;
display: block;
}
.nav-button:hover {
transform: translateY(-1px);
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.78);
border-color: rgba(255, 255, 255, 0.45);
}
.nav-button:active {
transform: translateY(0);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
}
.nav-button:focus-visible {
outline: 1px solid var(--accent);
outline-offset: 2px;
}
/* Responsive tweaks */
@media (max-width: 900px) {
.slide,
.cta-panel {
grid-template-columns: minmax(0, 1.2fr);
}
.slide {
padding: 30px 26px;
}
.cta-panel {
padding: 22px 20px 20px;
}
.cta-button-group {
align-items: flex-start;
}
}
@media (max-width: 640px) {
.app-frame {
padding: 14px;
}
.header {
padding: 16px 18px 12px;
}
.wordmark-main {
font-size: 13px;
}
.story-name {
font-size: 38px;
}
.slide-heading,
.cta-headline {
font-size: 30px;
}
.slide {
padding: 26px 20px;
}
}
</style>
</head>
<body>
<div class="app-frame">
<div class="card">
<header class="header">
<div class="wordmark-lockup">
<div class="wordmark-main">DESIGNER WALLCOVERINGS</div>
<div class="wordmark-tagline">Seasonal Color Story</div>
</div>
<div class="header-meta">
<span class="meta-pill">Autumn / Winter Edit</span>
<span class="meta-indicator" aria-hidden="true"></span>
</div>
</header>
<main class="carousel" aria-label="Seasonal wallcovering color story">
<div class="carousel-viewport">
<div class="carousel-track" id="carouselTrack">
<!-- Slide 1: Cover -->
<section class="slide is-cover" aria-roledescription="slide" aria-label="Cover — Color Story Overview">
<div class="slide-left">
<div class="kicker">Color Story</div>
<div class="story-name">Terracotta & Sage</div>
<div class="story-subtitle">
A grounded palette of sun-baked terracotta, quiet celadon, and oat-silk neutrals for rooms that feel calm yet composed.
</div>
<div class="slide-meta-label">For</div>
<div class="slide-meta-value">Entryways · Dining · Reading Corners</div>
</div>
<div class="slide-right">
<div class="swatch-panel swatch-oatmeal" aria-hidden="true">
<div class="swatch-caption-top">The palette at a glance</div>
<div class="swatch-grid">
<div class="swatch-layer-1"></div>
<div class="swatch-layer-2"></div>
</div>
<div class="swatch-caption-bottom">
<div class="swatch-name">Oatmeal · Celadon · Terracotta</div>
<div class="swatch-designer">Muted, sunlit, tactile</div>
</div>
</div>
</div>
</section>
<!-- Slide 2: Oatmeal -->
<section class="slide" aria-roledescription="slide" aria-label="Oatmeal hue">
<div class="slide-left">
<div class="kicker">Hue I</div>
<div class="slide-heading">Oatmeal</div>
<p class="slide-descriptor">
A dry, woven neutral that softens light without dulling it. Use as a continuous wallcovering to quiet bold architecture and let art breathe.
</p>
<div class="slide-meta-label">Room-use tip</div>
<div class="slide-meta-value">Layer with linen & warm metals in open-plan living.</div>
</div>
<div class="slide-right">
<div class="swatch-panel swatch-oatmeal">
<div class="swatch-caption-top">Textured neutral field</div>
<div class="swatch-grid">
<div class="swatch-layer-1"></div>
<div class="swatch-layer-2"></div>
</div>
<div class="swatch-caption-bottom">
<div class="swatch-name">Oatmeal</div>
<div class="swatch-designer">Spec’d by atelier No. 03</div>
</div>
</div>
</div>
</section>
<!-- Slide 3: Celadon -->
<section class="slide" aria-roledescription="slide" aria-label="Celadon hue">
<div class="slide-left">
<div class="kicker">Hue II</div>
<div class="slide-heading">Celadon</div>
<p class="slide-descriptor">
A whisper of sage with porcelain clarity. Ideal on a single architectural wall or library niche to bring an interior garden mood indoors.
</p>
<div class="slide-meta-label">Room-use tip</div>
<div class="slide-meta-value">Wrap windowless studies to invite a soft, northern light.</div>
</div>
<div class="slide-right">
<div class="swatch-panel swatch-celadon">
<div class="swatch-caption-top">Cool, quiet green</div>
<div class="swatch-grid">
<div class="swatch-band"></div>
<div class="swatch-tile"></div>
</div>
<div class="swatch-caption-bottom">
<div class="swatch-name">Celadon</div>
<div class="swatch-designer">Drawn for Studio Sage</div>
</div>
</div>
</div>
</section>
<!-- Slide 4: Terracotta -->
<section class="slide" aria-roledescription="slide" aria-label="Terracotta hue">
<div class="slide-left">
<div class="kicker">Hue III</div>
<div class="slide-heading">Terracotta</div>
<p class="slide-descriptor">
A kiln-fired clay that reads architectural, not rustic. Anchor a dining room or headboard wall, then temper with pale neutrals and smoked glass.
</p>
<div class="slide-meta-label">Room-use tip</div>
<div class="slide-meta-value">Frame passageways or arches for a sculpted, gallery feel.</div>
</div>
<div class="slide-right">
<div class="swatch-panel swatch-terracotta">
<div class="swatch-caption-top">Sun-warmed clay</div>
<div class="swatch-grid">
<div class="swatch-arch"></div>
<div class="swatch-sun"></div>
</div>
<div class="swatch-caption-bottom">
<div class="swatch-name">Terracotta</div>
<div class="swatch-designer">Mixed in Casa Atelier</div>
</div>
</div>
</div>
</section>
<!-- Slide 5: CTA -->
<section class="slide" aria-roledescription="slide" aria-label="Call to action">
<div class="slide-left">
<div class="cta-panel">
<div>
<div class="kicker">Slide 5 · Edit this palette</div>
<div class="cta-headline">Specify Your Own Story</div>
<p class="cta-copy">
Swap in your studio’s hues — adjust the tokens, export, and test as a carousel-ready moodboard before a single sample is ordered.
</p>
<div class="cta-footnote">Tokens · Swatches · Room notes</div>
</div>
<div class="cta-button-group">
<button class="cta-button-main" type="button">
Curate This Story
<span aria-hidden="true">
<svg viewBox="0 0 16 16">
<path fill="none" stroke="#3b2a12" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" d="M4 3h8M8 3l4 4M12 3v8"/>
</svg>
</span>
</button>
<div class="cta-button-secondary">Edit :root hues to refresh the carousel</div>
</div>
</div>
</div>
<div class="slide-right">
<div class="cta-swatch-stack" aria-hidden="true">
<div class="cta-tile"></div>
<div class="cta-swatch-pill-1"></div>
<div class="cta-swatch-pill-2"></div>
</div>
</div>
</section>
</div>
</div>
<div class="carousel-controls">
<div class="dots" role="tablist" aria-label="Select slide">
<button class="dot is-active" data-index="0" role="tab" aria-selected="true" aria-label="Slide 1"></button>
<button class="dot" data-index="1" role="tab" aria-selected="false" aria-label="Slide 2"></button>
<button class="dot" data-index="2" role="tab" aria-selected="false" aria-label="Slide 3"></button>
<button class="dot" data-index="3" role="tab" aria-selected="false" aria-label="Slide 4"></button>
<button class="dot" data-index="4" role="tab" aria-selected="false" aria-label="Slide 5"></button>
</div>
<div class="slide-index-label" id="slideLabel">01 / 05 · Terracotta & Sage</div>
<div class="nav-arrows" aria-hidden="true">
<button class="nav-button" type="button" data-direction="-1">
<svg viewBox="0 0 16 16">
<path d="M10.2 3.5L5.8 8l4.4 4.5" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<button class="nav-button" type="button" data-direction="1">
<svg viewBox="0 0 16 16">
<path d="M5.8 3.5L10.2 8 5.8 12.5" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
</div>
</main>
</div>
</div>
<script>
(function () {
const track = document.getElementById("carouselTrack");
const dots = Array.from(document.querySelectorAll(".dot"));
const slideLabel = document.getElementById("slideLabel");
const navButtons = Array.from(document.querySelectorAll(".nav-button"));
const totalSlides = 5;
let currentIndex = 0;
const slideTitles = [
"Terracotta & Sage",
"Oatmeal",
"Celadon",
"Terracotta",
"Specify Your Own Story"
];
function updateCarousel(index) {
currentIndex = (index + totalSlides) % totalSlides;
const offset = -currentIndex * 100 / totalSlides * totalSlides; // simplifies to -currentIndex*100
track.style.transform = "translateX(" + (-currentIndex * 100) + "%)";
dots.forEach((dot, i) => {
const active = i === currentIndex;
dot.classList.toggle("is-active", active);
dot.setAttribute("aria-selected", active ? "true" : "false");
dot.setAttribute("tabindex", active ? "0" : "-1");
});
const labelIndex = (currentIndex + 1).toString().padStart(2, "0");
const labelTotal = totalSlides.toString().padStart(2, "0");
slideLabel.textContent = labelIndex + " / " + labelTotal + " · " + slideTitles[currentIndex];
}
dots.forEach(dot => {
dot.addEventListener("click", () => {
const index = parseInt(dot.getAttribute("data-index"), 10);
updateCarousel(index);
});
});
navButtons.forEach(btn => {
btn.addEventListener("click", () => {
const dir = parseInt(btn.getAttribute("data-direction"), 10);
updateCarousel(currentIndex + dir);
});
});
// Keyboard navigation: left/right arrows
document.addEventListener("keydown", (event) => {
if (event.key === "ArrowRight") {
updateCarousel(currentIndex + 1);
} else if (event.key === "ArrowLeft") {
updateCarousel(currentIndex - 1);
}
});
// Initialize ARIA tabindex
updateCarousel(0);
})();
</script>
</body>
</html>