`data/artifacts/0a809ac3ac48/hermes3-8b.html`

161 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color of the Season</title>
<style>
:root {
  --bg: #0d0d0f;
  --surface: #17171c;
  --text: #f5f2ea;
  --muted: #8a8578;
  --accent: #c9a961;
  --line: 1px solid var(--accent);
  --shadow: 0 8px 24px rgba(0,0,0,.12);
  --ease: cubic-bezier(.22,1,.36,1);
}
body {
  background-color: var(--bg);
  color: var(--text);
  font-family: 'EB Garamond', serif;
  font-size: calc(16px + (67px - 16px) * ((100vw - 320px) / (1600 - 320)));
}
h1, h2 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif; 
  letter-spacing: .18em;
}
h1 {
  font-size: calc(50px + (67px - 50px) * ((100vw - 320px) / (1600 - 320)));
  text-align: left;
}
h2 {
  font-size: calc(38px + (67px - 38px) * ((100vw - 320px) / (1600 - 320)));
  color: var(--muted);
}
p, button {
  margin: 12px 0;
  font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; 
}
section {  
  padding: 96px;
  background-color: var(--surface); 
  box-shadow: var(--shadow);
  border-radius: 14px;
  margin: 48px 0;
}
img {
  max-width: 100%;
  display: block;
  shadow: 0 8px 40px rgba(0,0,0,.1);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  margin: -16px 0 24px;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up {
  animation: fadeUp .7s both;
  animation-delay: calc(var(--i) * 90ms);
  animation-fill-mode: forwards;
  opacity: 0;
  transform: translateY(28px);
}
@keyframes bgGradient {
  from { background-color: var(--bg); }
  to { background-color: hsl(hue-var(15), lum-var(10%)); }
}
.ambient-bg {
  animation: bgGradient 18s infinite linear both;
}
</style>
<body>
<header class="brand-header">
<span style="--text-color:#1c1a17; --font-size:40px;">DESIGNER WALLCOVERINGS</span>
</header>

<section class="reel" style="--interval:5s">
<div class="reel-bg">
<div class="ambient-bg"></div>
  <h2>This season it's all about...</h2>
  <p id="hue">Celadon</p>
  <div class="pattern-swatch fade-up" style="--i:0">
    <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='50'%3E%3Cpath%20fill='%23fff1f8'%20d='M0 0h100v50H0z'/%3E%3Cpath%20fill='%23c5ccd6'%20d='M0 0h100v30H0V0z'/%3E%3Cpath%20fill='%23f1e8ff'%20d='M0 0h100v20H0V0z'/%3E%3Cpath%20fill='%23c5ccd6'%20d='M0 0h100v10H0V0z'/%3E%3Cpath%20fill='%23fff1f8'%20d='M0 0h100v0H0V0z'/%3E%3C/path%3E%3C/svg%3E" alt="">
  </div>
  <div class="pattern-swatch fade-up" style="--i:1">
    <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='50'%3E%3Cpath%20fill='%23f2e5d8'%20d='M0 0h100v50H0z'/%3E%3Cpath%20fill='%23c1b6a7'%20d='M0 0h100v30H0V0z'/%3E%3Cpath%20fill='%23f2e5d8'%20d='M0 0h100v10H0V0z'/%3E%3Cpath%20fill='%23c1b6a7'%20d='M0 0h100v0H0V0z'/%3E%3C/path%3E%3C/svg%3E" alt="">
  </div>
  <div class="pattern-swatch fade-up" style="--i:2">
    <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='50'%3E%3Cpath%20fill='%23f1e5d8'%20d='M0 0h100v50H0z'/%3E%3Cpath%20fill='%23c2b6a7'%20d='M0 0h100v30H0V0z'/%3E%3Cpath%20fill='%23f1e5d8'%20d='M0 0h100v10H0V0z'/%3E%3Cpath%20fill='%23c2b6a7'%20d='M0 0h100v0H0V0z'/%3E%3C/path%3E%3C/svg%3E" alt="">
  </div>
</div>
<div class="reel-container">
  <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='260'%20height='130'%3E%3Crect%20x='15'%20y='10'%20width='230'%20height='110'/%3E%3Cpath%20fill='%23fff1f8'%20d='M0 0h260v65H0V0z'/%3E%3C/path%3E%3C/svg%3E" alt="" class="pattern-bg">
<div class="reel-content">
  <h2>Celadon</h2>
  <p>Styling tip: Pair with warm brass accents for a luxe touch.</p>
  <button>Shop this look</button>
</div>
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='50'%3E%3Cpath%20fill='%23c9a961'%20d='M0 0h100v50H0z'/%3E%3Cpath%20fill='%23ffcc99'%20d='M0 0h100v30H0V0z'/%3E%3C/path%3E%3C/svg%3E" alt="" class="accent-sw">
</div>
</div>
</section>

<div class="progress-bar-container">
  <div class="progress-bar"></div>
  <button id="play">Play</button>
  <button id="pause">Pause</button>
</div>

<script>
const reel = document.querySelector('.reel');
const hue = document.getElementById('hue');

let isPlaying = false;
const interval = 5 * 1000; // 5 seconds

function playReel() {
  if (!isPlaying) {
    isPlaying = true;
    let i = 0;
    const patternSwatches = reel.querySelectorAll('.pattern-swatch');
    
    function changePattern() {
      patternSwatches[i].style.setProperty('--i', i);
      hue.textContent = ["Celadon", "Mustard", "Mint"][i];
      i = (i + 1) % 3;
    }
    
    const intervalId = setInterval(changePattern, interval / 3); // change every 1.67s
    document.querySelector('.reel-bg').animate([
      { backgroundColor: getComputedStyle(document.documentElement).getPropertyValue('--bg') },
      { backgroundColor: "#fff1f8" }
    ], {
      duration: interval,
      fill: "forwards"
    });
    
    reel.addEventListener('mouseenter', () => clearInterval(intervalId));
    reel.addEventListener('mouseleave', () => {
      isPlaying && setInterval(changePattern, interval / 3);
    });
  }
}

playReel();

const playBtn = document.getElementById("play");
const pauseBtn = document.getElementById("pause");

playBtn.addEventListener("click", () => {
  playReel();
});

pauseBtn.addEventListener("click", () => {
  clearInterval(playReel());
});
</script>
</body>
</html>