← back to Model Arena
data/artifacts/145b5d1ed01f/kimi.html
700 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 {
/* Luxury Palette: luxe-noir */
--bg: #0d0d0f;
--surface: #17171c;
--text: #f5f2ea;
--muted: #8a8578;
--accent: #c9a961;
--accent2: #7d6a45;
/* Typography Scale (ratio 1.333) */
--ratio: 1.333;
--size-caption: 12px;
--size-body: 16px;
--size-lead: 21px;
--size-h3: 28px;
--size-h2: 38px;
--size-h1: 50px;
--size-display: 67px;
/* Font Stacks */
--font-display: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
--font-body: 'Avenir Next', 'Century Gothic', Futura, 'Segoe UI', sans-serif;
/* Motion */
--ease-swift: cubic-bezier(.22,.9,.24,1);
--ease-power: cubic-bezier(.77,0,.18,1);
/* Carousel dimensions (Instagram 4:5) */
--carousel-w: 400px;
--carousel-h: 500px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-body);
background: var(--bg);
color: var(--text);
line-height: 1.6;
min-height: 100vh;
padding-top: 80px;
-webkit-font-smoothing: antialiased;
}
/* Fixed Top Bar */
.top-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
background: rgba(13, 13, 15, 0.95);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(245, 242, 234, 0.08);
display: flex;
align-items: center;
padding: 0 40px;
z-index: 1000;
}
.wordmark {
font-family: var(--font-display);
font-size: var(--size-lead);
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--text);
font-weight: 400;
}
/* Main Layout */
.container {
max-width: 600px;
margin: 0 auto;
padding: 40px 20px;
}
/* Editable Header */
.edit-header {
text-align: center;
margin-bottom: 40px;
}
.style-input {
font-family: var(--font-display);
font-size: var(--size-h1);
color: var(--text);
background: transparent;
border: none;
border-bottom: 1px solid var(--muted);
text-align: center;
width: 100%;
max-width: 400px;
padding: 12px;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.12em;
transition: border-color 0.3s var(--ease-swift);
}
.style-input:focus {
outline: none;
border-color: var(--accent);
}
.edit-label {
font-size: var(--size-caption);
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--muted);
}
/* Carousel Container */
.carousel-wrapper {
position: relative;
width: var(--carousel-w);
margin: 0 auto;
}
.carousel {
width: var(--carousel-w);
height: var(--carousel-h);
background: var(--surface);
position: relative;
overflow: hidden;
border-radius: 2px;
box-shadow: 0 25px 80px rgba(0,0,0,0.6), 0 10px 20px rgba(0,0,0,0.4);
}
.slides-container {
display: flex;
height: 100%;
transition: transform 0.6s var(--ease-power);
}
.slide {
min-width: var(--carousel-w);
height: 100%;
padding: 35px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
/* Slide 1: Cover */
.cover-slide {
background: linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%);
text-align: center;
}
.cover-label {
font-size: var(--size-caption);
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--accent);
margin-bottom: 20px;
}
.cover-title {
font-family: var(--font-display);
font-size: var(--size-h1);
line-height: 1.1;
margin-bottom: 16px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.cover-subtitle {
font-size: var(--size-body);
color: var(--muted);
font-style: italic;
}
.ornament {
width: 40px;
height: 1px;
background: var(--accent);
margin: 30px auto;
}
/* Pattern Slides */
.pattern-slide {
background: var(--surface);
}
.slide-number {
position: absolute;
top: 20px;
left: 20px;
font-size: var(--size-caption);
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.15em;
}
.pattern-preview {
width: 180px;
height: 180px;
border-radius: 2px;
margin-bottom: 25px;
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
border: 1px solid rgba(245, 242, 234, 0.06);
}
/* Grandmillennial Patterns */
.pattern-chintz {
background-color: #f5f2ea;
background-image:
radial-gradient(circle at 20% 30%, rgba(201, 169, 97, 0.4) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(139, 90, 90, 0.3) 0%, transparent 45%),
radial-gradient(circle at 50% 50%, rgba(139, 119, 101, 0.2) 0%, transparent 60%);
background-size: 60px 60px, 80px 80px, 100px 100px;
}
.pattern-gingham {
background-color: #f5f2ea;
background-image:
repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(201, 169, 97, 0.3) 10px, rgba(201, 169, 97, 0.3) 20px),
repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(201, 169, 97, 0.3) 10px, rgba(201, 169, 97, 0.3) 20px);
}
.pattern-scallop {
background-color: #f5f2ea;
background-image:
radial-gradient(circle at 50% 100%, rgba(201, 169, 97, 0.5) 0%, rgba(201, 169, 97, 0.5) 35%, transparent 35%),
radial-gradient(circle at 50% 0%, rgba(201, 169, 97, 0.5) 0%, rgba(201, 169, 97, 0.5) 35%, transparent 35%);
background-size: 40px 40px;
}
.vignette {
width: 100%;
height: 120px;
background: linear-gradient(to bottom, rgba(13,13,15,0.6), rgba(13,13,15,0.95));
border-radius: 2px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(245, 242, 234, 0.06);
position: relative;
overflow: hidden;
}
.vignette::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.4;
}
.vignette-chintz::before {
background: radial-gradient(ellipse at center, rgba(201, 169, 97, 0.3) 0%, transparent 70%);
}
.vignette-gingham::before {
background: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(201, 169, 97, 0.2) 5px, rgba(201, 169, 97, 0.2) 10px);
}
.vignette-scallop::before {
background: radial-gradient(circle at 30% 50%, rgba(201, 169, 97, 0.3) 0%, transparent 50%),
radial-gradient(circle at 70% 50%, rgba(139, 90, 90, 0.2) 0%, transparent 40%);
}
.vignette-text {
font-family: var(--font-display);
font-size: var(--size-h3);
color: var(--text);
position: relative;
z-index: 1;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.style-note {
font-size: var(--size-caption);
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.12em;
text-align: center;
line-height: 1.8;
max-width: 280px;
}
.accent-line {
width: 30px;
height: 1px;
background: var(--accent);
margin: 15px auto;
}
/* CTA Slide */
.cta-slide {
background: var(--bg);
text-align: center;
}
.cta-title {
font-family: var(--font-display);
font-size: var(--size-h2);
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.cta-text {
font-size: var(--size-body);
color: var(--muted);
margin-bottom: 30px;
line-height: 1.8;
}
.cta-button {
display: inline-block;
padding: 16px 40px;
border: 1px solid var(--accent);
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.15em;
font-size: var(--size-caption);
text-decoration: none;
transition: all 0.4s var(--ease-swift);
background: transparent;
}
.cta-button:hover {
background: var(--accent);
color: var(--bg);
}
/* Navigation */
.nav-dots {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 25px;
}
.dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(245, 242, 234, 0.2);
cursor: pointer;
transition: all 0.3s var(--ease-swift);
}
.dot.active {
background: var(--accent);
transform: scale(1.2);
}
.swipe-hint {
text-align: center;
margin-top: 15px;
font-size: var(--size-caption);
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.15em;
}
/* Palette Editor */
.palette-editor {
margin-top: 50px;
padding: 30px;
background: var(--surface);
border-radius: 2px;
border: 1px solid rgba(245, 242, 234, 0.06);
}
.palette-title {
font-family: var(--font-display);
font-size: var(--size-lead);
margin-bottom: 25px;
text-transform: uppercase;
letter-spacing: 0.1em;
text-align: center;
}
.color-row {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}
.color-swatch {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.swatch {
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid rgba(245, 242, 234, 0.1);
cursor: pointer;
transition: transform 0.3s var(--ease-swift);
}
.swatch:hover {
transform: scale(1.1);
}
.swatch-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
}
input[type="color"] {
width: 50px;
height: 50px;
border: none;
border-radius: 50%;
cursor: pointer;
background: none;
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type="color"]::-webkit-color-swatch {
border: 1px solid rgba(245, 242, 234, 0.1);
border-radius: 50%;
}
/* Touch handling */
.carousel {
touch-action: pan-y;
user-select: none;
}
/* Responsive */
@media (max-width: 480px) {
:root {
--carousel-w: 320px;
--carousel-h: 400px;
}
.top-bar {
padding: 0 20px;
}
.wordmark {
font-size: var(--size-body);
}
.style-input {
font-size: var(--size-h2);
}
.slide {
padding: 25px;
}
}
</style>
</head>
<body>
<header class="top-bar">
<div class="wordmark">Designer Wallcoverings</div>
</header>
<div class="container">
<div class="edit-header">
<input type="text" class="style-input" value="Grandmillennial" id="styleName">
<div class="edit-label">Edit Style Name</div>
</div>
<div class="carousel-wrapper">
<div class="carousel" id="carousel">
<div class="slides-container" id="slidesContainer">
<!-- Slide 1: Cover -->
<div class="slide cover-slide">
<div class="cover-label">Lookbook</div>
<h1 class="cover-title" id="coverTitle">Grand<br>millennial</h1>
<div class="ornament"></div>
<p class="cover-subtitle">Where granny chic meets modern luxury</p>
</div>
<!-- Slide 2: Chintz Pattern -->
<div class="slide pattern-slide">
<div class="slide-number">01</div>
<div class="pattern-preview pattern-chintz"></div>
<div class="vignette vignette-chintz">
<span class="vignette-text">Sitting Room</span>
</div>
<div class="accent-line"></div>
<p class="style-note">Layer vintage florals with modern silhouettes for fresh grandmotherly charm</p>
</div>
<!-- Slide 3: Gingham Pattern -->
<div class="slide pattern-slide">
<div class="slide-number">02</div>
<div class="pattern-preview pattern-gingham"></div>
<div class="vignette vignette-gingham">
<span class="vignette-text">Breakfast Nook</span>
</div>
<div class="accent-line"></div>
<p class="style-note">Classic checks in warm neutrals bridge traditional comfort with contemporary crispness</p>
</div>
<!-- Slide 4: Scallop Pattern -->
<div class="slide pattern-slide">
<div class="slide-number">03</div>
<div class="pattern-preview pattern-scallop"></div>
<div class="vignette vignette-scallop">
<span class="vignette-text">Powder Room</span>
</div>
<div class="accent-line"></div>
<p class="style-note">Geometric scallops add architectural whimsy to small, impactful spaces</p>
</div>
<!-- Slide 5: CTA -->
<div class="slide cta-slide">
<h2 class="cta-title">Curated For<br>You</h2>
<p class="cta-text">Explore bespoke wallcoverings<br>in the Grandmillennial spirit</p>
<a href="#" class="cta-button" onclick="event.preventDefault(); alert('Collection coming soon');">View Collection</a>
<div class="ornament" style="margin-top: 40px;"></div>
<p style="font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.15em; margin-top: 20px;">Designer Wallcoverings</p>
</div>
</div>
</div>
<div class="nav-dots" id="navDots">
<div class="dot active" data-slide="0"></div>
<div class="dot" data-slide="1"></div>
<div class="dot" data-slide="2"></div>
<div class="dot" data-slide="3"></div>
<div class="dot" data-slide="4"></div>
</div>
<p class="swipe-hint">← Swipe or click dots →</p>
</div>
<div class="palette-editor">
<h3 class="palette-title">Edit Palette</h3>
<div class="color-row">
<div class="color-swatch">
<input type="color" id="bgColor" value="#0d0d0f">
<span class="swatch-label">Ground</span>
</div>
<div class="color-swatch">
<input type="color" id="surfaceColor" value="#17171c">
<span class="swatch-label">Surface</span>
</div>
<div class="color-swatch">
<input type="color" id="textColor" value="#f5f2ea">
<span class="swatch-label">Text</span>
</div>
<div class="color-swatch">
<input type="color" id="accentColor" value="#c9a961">
<span class="swatch-label">Accent</span>
</div>
</div>
</div>
</div>
<script>
// Carousel functionality
const carousel = document.getElementById('carousel');
const slidesContainer = document.getElementById('slidesContainer');
const dots = document.querySelectorAll('.dot');
const styleInput = document.getElementById('styleName');
const coverTitle = document.getElementById('coverTitle');
let currentSlide = 0;
const totalSlides = 5;
let startX = 0;
let currentX = 0;
let isDragging = false;
function goToSlide(index) {
if (index < 0) index = 0;
if (index >= totalSlides) index = totalSlides - 1;
currentSlide = index;
slidesContainer.style.transform = `translateX(-${currentSlide * 100}%)`;
dots.forEach((dot, i) => {
dot.classList.toggle('active', i === currentSlide);
});
}
// Dot navigation
dots.forEach((dot, index) => {
dot.addEventListener('click', () => goToSlide(index));
});
// Touch/swipe handling
carousel.addEventListener('touchstart', (e) => {
startX = e.touches[0].clientX;
isDragging = true;
}, { passive: true });
carousel.addEventListener('touchmove', (e) => {
if (!isDragging) return;
currentX = e.touches[0].clientX;
}, { passive: true });
carousel.addEventListener('touchend', () => {
if (!isDragging) return;
isDragging = false;
const diff = startX - currentX;
if (Math.abs(diff) > 50) {
if (diff > 0) {
goToSlide(currentSlide + 1);
} else {
goToSlide(currentSlide - 1);
}
}
});
// Mouse drag handling
carousel.addEventListener('mousedown', (e) => {
startX = e.clientX;
isDragging = true;
carousel.style.cursor = 'grabbing';
});
carousel.addEventListener('mousemove', (e) => {
if (!isDragging) return;
currentX = e.clientX;
});
carousel.addEventListener('mouseup', () => {
if (!isDragging) return;
isDragging = false;
carousel.style.cursor = 'grab';
const diff = startX - currentX;
if (Math.abs(diff) > 50) {
if (diff > 0) {
goToSlide(currentSlide + 1);
} else {
goToSlide(currentSlide - 1);
}
}
});
carousel.addEventListener('mouseleave', () => {
isDragging = false;
carousel.style.cursor = 'grab';
});
// Style name editing
styleInput.addEventListener('input', (e) => {
const value = e.target.value;
coverTitle.innerHTML = value.length > 8 ? value.slice(0, 8) + '<br>' + value.slice(8) : value;
});
// Palette editing
const root = document.documentElement;
document.getElementById('bgColor').addEventListener('input', (e) => {
root.style.setProperty('--bg', e.target.value);
});
document.getElementById('surfaceColor').addEventListener('input', (e) => {
root.style.setProperty('--surface', e.target.value);
});
document.getElementById('textColor').addEventListener('input', (e) => {
root.style.setProperty('--text', e.target.value);
});
document.getElementById('accentColor').addEventListener('input', (e) => {
root.style.setProperty('--accent', e.target.value);
});
// Keyboard navigation
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') goToSlide(currentSlide - 1);
if (e.key === 'ArrowRight') goToSlide(currentSlide + 1);
});
// Initialize cursor
carousel.style.cursor = 'grab';
</script>
</body>
</html>