← back to Model Arena
data/artifacts/145b5d1ed01f/gemma3-12b.html
307 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grandmillennial Lookbook</title>
<style>
:root {
--bg-color: #faf8f4;
--surface-color: #ffffff;
--text-color: #1c1a17;
--muted-color: #9b948a;
--accent-color-1: #b0472e;
--accent-color-2: #2f4c39;
--display-font: 'Didot', serif;
--body-font: '-apple-system', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
--scale-caption: 12px;
--scale-body: 16px;
--scale-lead: 21px;
--scale-h3: 28px;
--scale-h2: 38px;
--scale-h1: 50px;
--scale-display: 67px;
--spacing-scale: 4/8/12/16/24/32/48/64/96/128px;
--card-radius: 14px;
--section-padding: 96px;
}
body {
font-family: var(--body-font);
background-color: var(--bg-color);
color: var(--text-color);
margin: 0;
overflow-x: hidden; /* Prevent horizontal scroll */
}
.top-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: var(--surface-color);
padding: 24px;
text-align: left;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
z-index: 100;
}
.wordmark {
font-family: 'Cormorant Garamond', serif;
font-size: var(--scale-display);
letter-spacing: .18em;
text-transform: uppercase;
margin: 0;
}
.carousel-container {
padding: var(--section-padding);
position: relative; /* For absolute positioning of dots */
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-touch-callout: none; /* iOS Safari added: prevent callout on touch drag gesture. */
-ms-touch-action: pan-y; /* Windows Phone browsers */
touch-action: pan-y;
}
.carousel {
width: 100%;
display: flex;
padding: 24px 0;
}
.slide {
flex: 0 0 100%; /* Each slide takes full width */
width: 100%;
height: auto;
scroll-snap-align: start;
display: flex;
padding: 32px;
background-color: var(--surface-color);
border-radius: var(--card-radius);
box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
transition: transform .3s ease-in-out;
}
.slide:hover {
transform: translateY(-5px);
box-shadow: 0 16px 48px rgba(0, 0, 0, .18);
}
.slide-content {
display: flex;
flex-direction: column; /* Stack swatch and vignette */
gap: 24px;
}
.swatch {
width: 200px;
height: 200px;
background-color: var(--accent-color-1);
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
}
.vignette {
width: calc(100% - 250px); /* Adjust for swatch width */
height: auto;
border-radius: 8px;
overflow: hidden; /* Ensure vignette doesn't overflow */
}
.vignette img {
width: 100%;
height: auto;
display: block;
}
.styling-note {
font-size: var(--scale-lead);
color: var(--muted-color);
}
.carousel-dots {
position: absolute;
bottom: -24px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
padding: 8px;
}
.carousel-dot {
width: 12px;
height: 12px;
background-color: var(--muted-color);
border-radius: 50%;
cursor: pointer;
}
.carousel-dot.active {
background-color: var(--accent-color-1);
}
/* CTA Slide */
.cta-slide {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 32px;
background-color: var(--surface-color);
border-radius: var(--card-radius);
box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.cta-button {
padding: 16px 32px;
background-color: var(--accent-color-1);
color: white;
border: none;
border-radius: 8px;
font-size: var(--scale-body);
cursor: pointer;
}
/* Animations */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(28px) }
to { opacity: 1; transform: none }
}
</style>
</head>
<body>
<div class="top-bar">
<div style="text-align: left;">
<span class="wordmark">DESIGNER WALLCOVERINGS</span>
</div>
</div>
<div class="carousel-container">
<div class="carousel">
<!-- Slide 1 -->
<div class="slide" id="slide1">
<div class="slide-content">
<h2>Grandmillennial Lookbook</h2>
<div class="swatch"></div>
<img src="https://images.unsplash.com/photo-1627409853783-b1f3c4d98ecf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Grandmillennial Room 1">
<p class="styling-note">Layered textiles and floral prints create a cozy, nostalgic atmosphere.</p>
</div>
</div>
<!-- Slide 2 -->
<div class="slide" id="slide2">
<div class="slide-content">
<h2>Classic Comfort</h2>
<div class="swatch" style="background-color: #f0e68c;"></div>
<img src="https://images.unsplash.com/photo-1572249139-5b98d5e09c3a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Grandmillennial Room 2">
<p class="styling-note">Rich wood tones and antique accents add warmth and character.</p>
</div>
</div>
<!-- Slide 3 -->
<div class="slide" id="slide3">
<div class="slide-content">
<h2>Timeless Elegance</h2>
<div class="swatch" style="background-color: #a78bfa;"></div>
<img src="https://images.unsplash.com/photo-1546923024-d77e5f3aebdd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Grandmillennial Room 3">
<p class="styling-note">Subtle patterns and muted colors create a sense of serenity and sophistication.</p>
</div>
</div>
<!-- CTA Slide -->
<div class="slide" id="ctaSlide">
<div class="cta-slide">
<h2>Explore the Collection</h2>
<a href="#" class="cta-button">Shop Now</a>
</div>
</div>
</div>
</div>
<div class="carousel-dots">
<span class="carousel-dot active" data-slide="1"></span>
<span class="carousel-dot" data-slide="2"></span>
<span class="carousel-dot" data-slide="3"></span>
<span class="carousel-dot" data-slide="4"></span>
</div>
<script>
const carousel = document.querySelector('.carousel');
const slides = document.querySelectorAll('.slide');
const dotsContainer = document.querySelector('.carousel-dots');
const dots = document.querySelectorAll('.carousel-dot');
let currentSlide = 1;
function updateDots() {
dots.forEach((dot, index) => {
if (index === currentSlide - 1) {
dot.classList.add('active');
} else {
dot.classList.remove('active');
}
});
}
function goToSlide(slideNumber) {
currentSlide = slideNumber;
updateDots();
}
dots.forEach((dot) => {
dot.addEventListener('click', () => {
goToSlide(parseInt(dot.dataset.slide));
});
});
function handleSwipe() {
let startX = 0;
let currentPosition = 0;
carousel.addEventListener('touchstart', (e) => {
startX = e.touches[0].clientX;
currentPosition = carousel.scrollLeft;
});
carousel.addEventListener('touchmove', (e) => {
const newX = e.touches[0].clientX;
const distance = newX - startX;
currentPosition += distance;
// Limit scroll to the width of the slides
const maxScroll = slides[slides.length-1].offsetLeft + slides[slides.length-1].offsetWidth;
currentPosition = Math.max(0, Math.min(currentPosition, maxScroll));
carousel.scrollLeft = currentPosition;
});
carousel.addEventListener('touchend', () => {
const threshold = 50; // Adjust for swipe sensitivity
if (startX < currentPosition && currentSlide > 1) {
goToSlide(currentSlide - 1);
} else if (startX > currentPosition && currentSlide < slides.length){
goToSlide(currentSlide + 1);
}
});
}
handleSwipe(); // initialize swipe events
</script>
</body>
</html>