← back to Model Arena
data/artifacts/15bc10e7ee25/qwen3-14b.html
344 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</title>
<style>
:root {
--bg: #faf8f4;
--surface: #ffffff;
--text: #1c1a17;
--muted: #9b948a;
--accent: #b0472e;
--accent-alt: #2f4c39;
--display-font: 'Playfair Display', Georgia, serif;
--body-font: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
--caption: 12px;
--body: 16px;
--lead: 21px;
--h3: 28px;
--h2: 38px;
--h1: 50px;
--display: 67px;
--spacing-4: 4px;
--spacing-8: 8px;
--spacing-12: 12px;
--spacing-16: 16px;
--spacing-24: 24px;
--spacing-32: 32px;
--spacing-48: 48px;
--spacing-64: 64px;
--spacing-96: 96px;
--card-radius: 14px;
--card-grid: repeat(auto-fit, minmax(260px, 1fr));
--card-gap: 24px;
--section-padding: 96px;
--shadow-card: 0 8px 24px rgba(0, 0, 0, 0.12);
--shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.18);
--glow: 0 0 24px rgba(176, 71, 47, 0.35);
--motion-time: 0.7s;
--motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
--transition-time: 150ms;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: linear-gradient(135deg, #f8f4f0 0%, #e9e3db 100%);
background-size: 400% 400%;
animation: drift 18s ease-in-out infinite;
font-family: var(--body-font);
color: var(--text);
overflow-x: hidden;
scroll-behavior: smooth;
}
@keyframes drift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: var(--spacing-24) var(--spacing-32);
background-color: var(--surface);
font-family: var(--display-font);
font-size: var(--display);
color: var(--text);
letter-spacing: 0.15em;
text-transform: uppercase;
z-index: 1000;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.carousel {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.carousel-inner {
display: flex;
width: 100%;
height: 100%;
transition: transform var(--motion-time) var(--motion-ease);
}
.slide {
flex: 0 0 100%;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: relative;
background-color: var(--surface);
box-shadow: var(--shadow-card);
animation: fadeUp var(--motion-time) var(--motion-ease) both;
}
.slide.active {
animation: fadeUp var(--motion-time) var(--motion-ease) both;
}
.slide:nth-child(1) {
background: linear-gradient(135deg, #f8f4f0 0%, #e9e3db 100%);
}
.slide:nth-child(2) {
background: linear-gradient(135deg, #f2e8e0 0%, #e0c5c0 100%);
}
.slide:nth-child(3) {
background: linear-gradient(135deg, #f9f2e8 0%, #e8d9c8 100%);
}
.slide:nth-child(4) {
background: linear-gradient(135deg, #f5f3f0 0%, #e4e0d8 100%);
}
.slide:nth-child(5) {
background: linear-gradient(135deg, #f6f3f2 0%, #e8e3dd 100%);
}
.pattern {
width: 300px;
height: 200px;
margin: var(--spacing-24) auto;
background: repeating-linear-gradient(
45deg,
var(--accent),
var(--accent) 10px,
var(--muted) 10px,
var(--muted) 20px
);
border-radius: var(--card-radius);
box-shadow: var(--glow);
}
.room {
width: 100%;
height: 300px;
background: repeating-linear-gradient(
45deg,
#ffffff,
#ffffff 10px,
#f8f4f0 10px,
#f8f4f0 20px
);
border-radius: var(--card-radius);
box-shadow: var(--shadow-card);
margin: var(--spacing-24) auto;
overflow: hidden;
}
.room svg {
width: 100%;
height: 100%;
}
.card {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
padding: var(--spacing-24);
text-align: center;
}
.card h2 {
font-size: var(--h2);
font-family: var(--display-font);
margin-bottom: var(--spacing-12);
color: var(--text);
}
.card p {
font-size: var(--body);
color: var(--muted);
margin-bottom: var(--spacing-16);
}
.dots {
position: absolute;
bottom: var(--spacing-24);
left: 50%;
transform: translateX(-50%);
display: flex;
gap: var(--spacing-12);
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--muted);
transition: background-color var(--transition-time);
}
.dot.active {
background-color: var(--accent);
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(28px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>
<body>
<header>DESIGNER WALLCOVERINGS</header>
<div class="carousel">
<div class="carousel-inner" id="carousel">
<div class="slide active">
<div class="card">
<h2>GRANDMILLENNIAL</h2>
<p>Timeless elegance meets modern refinement.</p>
</div>
</div>
<div class="slide">
<div class="card">
<div class="pattern"></div>
<div class="room">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100" height="100" fill="#ffffff" />
<rect x="10" y="10" width="20" height="20" fill="#f8f4f0" />
<rect x="40" y="40" width="20" height="20" fill="#f8f4f0" />
<rect x="70" y="70" width="20" height="20" fill="#f8f4f0" />
</svg>
</div>
<h2>Pattern 1</h2>
<p>Classic floral with soft pastel tones.</p>
</div>
</div>
<div class="slide">
<div class="card">
<div class="pattern"></div>
<div class="room">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100" height="100" fill="#ffffff" />
<rect x="10" y="10" width="20" height="20" fill="#e0c5c0" />
<rect x="40" y="40" width="20" height="20" fill="#e0c5c0" />
<rect x="70" y="70" width="20" height="20" fill="#e0c5c0" />
</svg>
</div>
<h2>Pattern 2</h2>
<p>Geometric shapes in warm neutrals.</p>
</div>
</div>
<div class="slide">
<div class="card">
<div class="pattern"></div>
<div class="room">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100" height="100" fill="#ffffff" />
<rect x="10" y="10" width="20" height="20" fill="#e8d9c8" />
<rect x="40" y="40" width="20" height="20" fill="#e8d9c8" />
<rect x="70" y="70" width="20" height="20" fill="#e8d9c8" />
</svg>
</div>
<h2>Pattern 3</h2>
<p>Art deco-inspired metallic sheen.</p>
</div>
</div>
<div class="slide">
<div class="card">
<h2>Shop Now</h2>
<p>Explore curated collections for your space.</p>
</div>
</div>
</div>
<div class="dots" id="dots">
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<script>
const carousel = document.getElementById('carousel');
const dots = document.getElementById('dots');
const slides = document.querySelectorAll('.slide');
const totalSlides = slides.length;
let currentSlide = 0;
function updateCarousel(index) {
const offset = -index * 100;
carousel.style.transform = `translateX(${offset}%)`;
updateDots(index);
}
function updateDots(index) {
document.querySelectorAll('.dot').forEach((dot, i) => {
dot.classList.toggle('active', i === index);
});
}
function nextSlide() {
currentSlide = (currentSlide + 1) % totalSlides;
updateCarousel(currentSlide);
}
function prevSlide() {
currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
updateCarousel(currentSlide);
}
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight') nextSlide();
if (e.key === 'ArrowLeft') prevSlide();
});
dots.addEventListener('click', (e) => {
const clickedDot = e.target;
if (clickedDot.classList.contains('dot')) {
const index = Array.from(dots.children).indexOf(clickedDot);
currentSlide = index;
updateCarousel(index);
}
});
setInterval(nextSlide, 5000);
</script>
</body>
</html>