← back to Model Arena
data/artifacts/18bd2744dce2/kimi.html
601 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 — Color Story</title>
<style>
/* =========================================================
DESIGN TOKENS — Luxury Wallcovering System
========================================================= */
:root {
/* Color Palette: luxe-noir */
--bg: #0d0d0f;
--surface: #17171c;
--ink: #f5f2ea;
--muted: #8a8578;
--accent: #c9a961;
--accent-alpha: rgba(201, 169, 97, 0.12);
--line: rgba(245, 242, 234, 0.08);
--shadow: rgba(0, 0, 0, 0.4);
/* Typography */
--font-display: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
--font-body: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
/* Spacing */
--space-xs: 8px;
--space-sm: 16px;
--space-md: 32px;
--space-lg: 64px;
/* Motion */
--ease-swift: cubic-bezier(.22,.9,.24,1);
--ease-power: cubic-bezier(.77,0,.18,1);
--duration: 600ms;
/* Dimensions */
--carousel-size: 1080px;
--header-height: 72px;
}
/* =========================================================
RESET & BASE
========================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
width: 100%;
height: 100%;
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
overflow: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* =========================================================
FIXED HEADER — Compact Lockup
========================================================= */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--header-height);
background: rgba(13, 13, 15, 0.96);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--line);
z-index: 1000;
display: flex;
align-items: center;
padding: 0 var(--space-md);
}
.wordmark {
font-family: var(--font-display);
font-size: 14px;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink);
max-width: 220px;
line-height: 1;
}
/* =========================================================
CAROUSEL CONTAINER — 1080x1080
========================================================= */
.carousel-wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: var(--carousel-size);
height: var(--carousel-size);
background: var(--surface);
overflow: hidden;
box-shadow: 0 40px 120px var(--shadow);
}
.carousel-track {
display: flex;
height: 100%;
transition: transform var(--duration) var(--ease-power);
will-change: transform;
}
.slide {
min-width: var(--carousel-size);
height: 100%;
position: relative;
display: flex;
flex-direction: column;
padding: calc(var(--header-height) + var(--space-md)) var(--space-lg) var(--space-lg);
}
/* =========================================================
SLIDE 1 — COVER
========================================================= */
.cover-slide {
justify-content: center;
align-items: center;
text-align: center;
background: linear-gradient(135deg, var(--surface) 0%, #1a1a1e 100%);
}
.season-label {
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: var(--space-sm);
font-weight: 500;
}
.palette-title {
font-family: var(--font-display);
font-size: 67px;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: var(--space-md);
}
.palette-subtitle {
font-size: 14px;
color: var(--muted);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.color-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 8px;
display: flex;
}
.color-bar span {
flex: 1;
height: 100%;
}
.color-bar span:nth-child(1) { background: #e8dfd0; }
.color-bar span:nth-child(2) { background: #b8c4b8; }
.color-bar span:nth-child(3) { background: #c67c5c; }
/* =========================================================
SLIDES 2-4 — COLOR SWATCHES
========================================================= */
.hue-slide {
justify-content: space-between;
}
.slide-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: var(--space-md);
}
.hue-number {
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
font-weight: 500;
}
.hue-name {
font-family: var(--font-display);
font-size: 50px;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ink);
margin-top: var(--space-xs);
}
.swatch-container {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.swatch {
width: 400px;
height: 400px;
border-radius: 2px;
position: relative;
box-shadow:
0 20px 60px rgba(0,0,0,0.3),
inset 0 1px 0 rgba(255,255,255,0.05);
overflow: hidden;
}
.swatch::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(0,0,0,0.1) 100%);
pointer-events: none;
}
/* Individual Swatch Colors */
.swatch-oatmeal { background: #e8dfd0; }
.swatch-celadon { background: #b8c4b8; }
.swatch-terracotta { background: #c67c5c; }
.slide-footer {
border-top: 1px solid var(--line);
padding-top: var(--space-md);
margin-top: auto;
}
.tip-label {
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: var(--space-xs);
font-weight: 500;
}
.tip-text {
font-size: 18px;
line-height: 1.6;
color: var(--ink);
max-width: 50ch;
}
/* =========================================================
SLIDE 5 — CTA
========================================================= */
.cta-slide {
justify-content: center;
align-items: center;
text-align: center;
background: var(--surface);
}
.cta-title {
font-family: var(--font-display);
font-size: 38px;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: var(--space-md);
}
.cta-line {
width: 60px;
height: 1px;
background: var(--accent);
margin: 0 auto var(--space-md);
}
.cta-body {
font-size: 16px;
line-height: 1.7;
color: var(--muted);
max-width: 40ch;
margin-bottom: var(--space-lg);
}
.cta-button {
display: inline-block;
padding: 18px 48px;
border: 1px solid var(--accent);
color: var(--accent);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
text-decoration: none;
transition: all 300ms var(--ease-swift);
background: transparent;
cursor: pointer;
}
.cta-button:hover {
background: var(--accent);
color: var(--bg);
}
/* =========================================================
NAVIGATION — DOTS
========================================================= */
.nav-dots {
position: absolute;
bottom: var(--space-md);
left: 50%;
transform: translateX(-50%);
display: flex;
gap: var(--space-sm);
z-index: 100;
}
.dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--line);
cursor: pointer;
transition: all 300ms var(--ease-swift);
border: none;
padding: 0;
}
.dot.active {
background: var(--accent);
transform: scale(1.2);
}
/* =========================================================
SWIPE HINT
========================================================= */
.swipe-hint {
position: absolute;
bottom: var(--space-lg);
left: 50%;
transform: translateX(-50%);
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted);
opacity: 0.6;
animation: pulse 3s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.8; }
}
/* =========================================================
TRANSITION STATES
========================================================= */
.slide {
opacity: 0;
transition: opacity var(--duration) var(--ease-swift);
}
.slide.active {
opacity: 1;
}
/* =========================================================
RESPONSIVE SCALING
========================================================= */
@media (max-width: 1120px) {
.carousel-wrapper {
transform: translate(-50%, -50%) scale(0.85);
}
}
@media (max-width: 920px) {
.carousel-wrapper {
transform: translate(-50%, -50%) scale(0.7);
}
}
@media (max-width: 768px) {
.carousel-wrapper {
transform: translate(-50%, -50%) scale(0.5);
}
}
</style>
</head>
<body>
<!-- Fixed Header -->
<header class="header">
<div class="wordmark">Designer Wallcoverings</div>
</header>
<!-- Carousel -->
<div class="carousel-wrapper" id="carousel">
<div class="carousel-track" id="track">
<!-- Slide 1: Cover -->
<div class="slide cover-slide active" data-index="0">
<div class="season-label">Spring 2025</div>
<h1 class="palette-title">Terracotta<br>& Sage</h1>
<p class="palette-subtitle">A Color Story in Three Hues</p>
<div class="color-bar">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- Slide 2: Oatmeal -->
<div class="slide hue-slide" data-index="1">
<div class="slide-header">
<div>
<div class="hue-number">01 / Three</div>
<h2 class="hue-name">Oatmeal</h2>
</div>
</div>
<div class="swatch-container">
<div class="swatch swatch-oatmeal"></div>
</div>
<div class="slide-footer">
<div class="tip-label">Room Tip</div>
<p class="tip-text">Use in north-facing rooms to amplify natural light. Pairs with raw linen and aged brass fixtures.</p>
</div>
</div>
<!-- Slide 3: Celadon -->
<div class="slide hue-slide" data-index="2">
<div class="slide-header">
<div>
<div class="hue-number">02 / Three</div>
<h2 class="hue-name">Celadon</h2>
</div>
</div>
<div class="swatch-container">
<div class="swatch swatch-celadon"></div>
</div>
<div class="slide-footer">
<div class="tip-label">Room Tip</div>
<p class="tip-text">Ideal for bedrooms and studies. Softens architectural lines and promotes visual rest.</p>
</div>
</div>
<!-- Slide 4: Terracotta -->
<div class="slide hue-slide" data-index="3">
<div class="slide-header">
<div>
<div class="hue-number">03 / Three</div>
<h2 class="hue-name">Terracotta</h2>
</div>
</div>
<div class="swatch-container">
<div class="swatch swatch-terracotta"></div>
</div>
<div class="slide-footer">
<div class="tip-label">Room Tip</div>
<p class="tip-text">Anchor dining spaces with this grounding hue. Complements walnut wood and hand-thrown ceramics.</p>
</div>
</div>
<!-- Slide 5: CTA -->
<div class="slide cta-slide" data-index="4">
<h2 class="cta-title">Begin Your<br>Project</h2>
<div class="cta-line"></div>
<p class="cta-body">Request a sample kit featuring all three hues, curated for residential and commercial environments.</p>
<a href="#" class="cta-button" onclick="event.preventDefault(); alert('Sample kit request initiated');">Request Samples</a>
</div>
</div>
<!-- Navigation Dots -->
<div class="nav-dots" id="dots">
<button class="dot active" data-index="0" aria-label="Slide 1"></button>
<button class="dot" data-index="1" aria-label="Slide 2"></button>
<button class="dot" data-index="2" aria-label="Slide 3"></button>
<button class="dot" data-index="3" aria-label="Slide 4"></button>
<button class="dot" data-index="4" aria-label="Slide 5"></button>
</div>
<!-- Swipe Hint -->
<div class="swipe-hint">Swipe to explore</div>
</div>
<script>
(function() {
const carousel = document.getElementById('carousel');
const track = document.getElementById('track');
const dots = document.querySelectorAll('.dot');
const slides = document.querySelectorAll('.slide');
let currentIndex = 0;
const totalSlides = slides.length;
let startX = 0;
let isDragging = false;
function goToSlide(index) {
if (index < 0) index = totalSlides - 1;
if (index >= totalSlides) index = 0;
currentIndex = index;
track.style.transform = `translateX(-${currentIndex * 1080}px)`;
// Update dots
dots.forEach((dot, i) => {
dot.classList.toggle('active', i === currentIndex);
});
// Update slide opacity
slides.forEach((slide, i) => {
slide.classList.toggle('active', i === currentIndex);
});
}
// Dot navigation
dots.forEach(dot => {
dot.addEventListener('click', () => {
goToSlide(parseInt(dot.dataset.index));
});
});
// Touch/Swipe handling
carousel.addEventListener('touchstart', (e) => {
startX = e.touches[0].clientX;
isDragging = true;
}, { passive: true });
carousel.addEventListener('touchmove', (e) => {
if (!isDragging) return;
}, { passive: true });
carousel.addEventListener('touchend', (e) => {
if (!isDragging) return;
isDragging = false;
const endX = e.changedTouches[0].clientX;
const diff = startX - endX;
if (Math.abs(diff) > 50) {
if (diff > 0) {
goToSlide(currentIndex + 1);
} else {
goToSlide(currentIndex - 1);
}
}
});
// Mouse drag handling
carousel.addEventListener('mousedown', (e) => {
startX = e.clientX;
isDragging = true;
carousel.style.cursor = 'grabbing';
});
carousel.addEventListener('mousemove', (e) => {
if (!isDragging) return;
});
carousel.addEventListener('mouseup', (e) => {
if (!isDragging) return;
isDragging = false;
carousel.style.cursor = 'default';
const endX = e.clientX;
const diff = startX - endX;
if (Math.abs(diff) > 50) {
if (diff > 0) {
goToSlide(currentIndex + 1);
} else {
goToSlide(currentIndex - 1);
}
}
});
carousel.addEventListener('mouseleave', () => {
isDragging = false;
carousel.style.cursor = 'default';
});
// Keyboard navigation
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight') goToSlide(currentIndex + 1);
if (e.key === 'ArrowLeft') goToSlide(currentIndex - 1);
});
// Initialize
goToSlide(0);
})();
</script>
</body>
</html>