`data/artifacts/0219528ac7d7/hermes3-8b.html`

385 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Which Design Era?</title>
<style>
:root {
  --bg: #f7efe6;
  --surface: #fff9f1;
  --text: #3a2c22;
  --muted: #a08c7a;
  --accent-base: #c65f38; 
  --accent-hl: #e0a458;
  --line: 1px solid var(--surface);
  --shadow-card: 0 8px 24px rgba(0,0,0,.12);  
  --shadow-hover: 0 16px 48px rgba(0,0,0,.18);
  --ease-in-out-quart: cubic-bezier(.22,1,.36,1);
  --ease-drift: linear;
}
body {
  background-color: var(--bg);
  color: var(--text);
  font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  padding: 32px;
  box-sizing: border-box;
}
.display { 
  font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif; 
  letter-spacing: .15em;
  color: var(--text);
  text-transform: uppercase;
  font-size: 12px;
  margin-bottom: 24px;
}
.display::after {
  content: "luxury, editorial, high-end product";
  display: block;
  color: var(--muted);
  opacity: .5;
}
.card {
  background-color: var(--surface);  
  padding: 48px;
  border-radius: 14px; 
  box-shadow: var(--shadow-card);
  margin-bottom: 32px;
  transition: all .7s var(--ease-in-out-quart);
}
.card:hover { 
  box-shadow: var(--shadow-hover);
}
button {
  background-color: var(--accent-base); 
  border: none;
  color: var(--surface);
  font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;  
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 12px 24px;
  margin-right: 8px;
  cursor: pointer;
  transition: background-color .3s;
}
button:hover { 
  background-color: var(--accent-hl);
}
.scoreboard {
  color: var(--muted);
  font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;  
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: .5;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
.fadeIn {
  animation: fadeUp .7s var(--ease-in-out-quart) forwards;
}
.staggerChild {
  animation-delay: .9s;
  animation-fill-mode: forwards;
}
@keyframes driftBackground {
  from { background-color: var(--bg); } 
  to { background-color: lighten(var(--bg), 2%); }
}
body, html {
  width: 100%;
  height: 100%;
  margin: 0; padding: 0;
}
.header {
  position: fixed;
  top: 32px;
  left: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  background-color: var(--surface);
  color: var(--text); 
  padding-left: 48px;
  box-shadow: var(--line) top;
}
.header-logo {
  font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif; 
  font-size: 40px;
  letter-spacing: .18em;
  color: var(--text);
  text-transform: uppercase;
  margin-right: 16px;
}
.header-buttons {
  display: flex;
  align-items: center;
  padding-left: 16px;
}
.button {
  background-color: var(--surface); 
  border: var(--line);
  color: var(--muted);
  font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;  
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 8px 16px;
  margin-right: 8px;
  cursor: pointer;
}
.button:hover {
  background-color: var(--muted);
  color: var(--surface);
}
.button-group {
  display: flex;
  align-items: center;
}
button, .button { touch-action: none; }
@media (hover: hover) {
  .card:hover ~ .card { box-shadow: none; }
}
</style>
<body>

<div class="header">
  <div class="header-logo">DESIGNER WALLCOVERINGS</div>
  <div class="header-buttons">
    <button class="button" disabled>Score</button>
    <button class="button">Restart</button>
  </div>
</div>

<div class="display">Which Design Era?</div>
<div class="card fadeIn">
  <h1>Victorian</h1>
  <p>A time of elegance and opulence. Intricate details, heavy textures, and a focus on craftsmanship define this era.</p>
  <button>Guess Victorian</button>
  <button>Next Era</button>
</div>

<div class="card fadeIn staggerChild">
  <h1>Art Deco</h1>
  <p>A bold departure from the old. Sleek lines, luxurious materials, and geometric motifs characterize this period.</p>
  <button>Guess Art Deco</button>
  <button>Next Era</button>
</div>

<div class="card fadeIn staggerChild">
  <h1>Mid-Century Modern</h1>
  <p>A celebration of simplicity. Organic shapes, clean lines, and a focus on function define this era.</p>
  <button>Guess Mid-Century Modern</button>
  <button>Next Era</button>
</div>

<div class="card fadeIn staggerChild">
  <h1>Grandmillennial</h1>
  <p>A nod to the old with a modern twist. Floral patterns, antique finishes, and a focus on comfort define this era.</p>
  <button>Guess Grandmillennial</button>
  <button>Next Era</button>
</div>

<div class="scoreboard">Your Score: 0/4</div>

<style>
  :root {
    --bg: #f7efe6;
    --surface: #fff9f1;
    --text: #3a2c22;
    --muted: #a08c7a; 
    --accent-base: #c65f38;
    --accent-hl: #e0a458;
    --line: 1px solid var(--surface);
    --shadow-card: 0 8px 24px rgba(0,0,0,.12);
    --shadow-hover: 0 16px 48px rgba(0,0,0,.18); 
    --ease-in-out-quart: cubic-bezier(.22,1,.36,1);
    --ease-drift: linear;
  }
  body {
    background-color: var(--bg);
    color: var(--text);
    font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    padding: 32px;
    box-sizing: border-box;
  }
  .display { 
    font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif; 
    letter-spacing: .15em;
    color: var(--text);
    text-transform: uppercase;
    font-size: 12px;
    margin-bottom: 24px;
  }
  .display::after {
    content: "luxury, editorial, high-end product";
    display: block;
    color: var(--muted);
    opacity: .5;
  }
  .card {
    background-color: var(--surface);  
    padding: 48px;
    border-radius: 14px; 
    box-shadow: var(--shadow-card);
    margin-bottom: 32px;
    transition: all .7s var(--ease-in-out-quart);
  }
  .card:hover { 
    box-shadow: var(--shadow-hover);
  }
  button {
    background-color: var(--accent-base); 
    border: none;
    color: var(--surface);
    font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;  
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 12px 24px;
    margin-right: 8px;
    cursor: pointer;
    transition: background-color .3s;
  }
  button:hover { 
    background-color: var(--accent-hl);
  }
  .scoreboard {
    color: var(--muted);
    font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;  
    text-transform: uppercase;
    letter-spacing: .1em;
    opacity: .5;
  }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .fadeIn {
    animation: fadeUp .7s var(--ease-in-out-quart) forwards;
  }
  .staggerChild {
    animation-delay: .9s;
    animation-fill-mode: forwards;
  }
  @keyframes driftBackground {
    from { background-color: var(--bg); } 
    to { background-color: lighten(var(--bg), 2%); }
  }
  body, html {
    width: 100%;
    height: 100%;
    margin: 0; padding: 0;
  }
  .header {
    position: fixed;
    top: 32px;
    left: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    background-color: var(--surface);
    color: var(--text); 
    padding-left: 48px;
    box-shadow: var(--line) top;
  }
  .header-logo {
    font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif; 
    font-size: 40px;
    letter-spacing: .18em;
    color: var(--text);
    text-transform: uppercase;
    margin-right: 16px;
  }
  .header-buttons {
    display: flex;
    align-items: center;
    padding-left: 16px;
  }
  .button {
    background-color: var(--surface); 
    border: var(--line);
    color: var(--muted);
    font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;  
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 8px 16px;
    margin-right: 8px;
    cursor: pointer;
  }
  .button:hover {
    background-color: var(--muted);
    color: var(--surface);
  }
  .button-group {
    display: flex;
    align-items: center;
  }
  button, .button { touch-action: none; }
  @media (hover: hover) {
    .card:hover ~ .card { box-shadow: none; }
  }
</style>
<script>
// JavaScript goes here
let eraButtons = document.querySelectorAll('button');

let score = 0;

function nextEra() {
  let currentCard = document.querySelector('.card');
  
  if (currentCard) {
    currentCard.classList.remove('fadeIn');
    
    setTimeout(() => {
      currentCard.style.display = 'none';
      
      // Change background color
      document.body.style.backgroundColor = `lighten(var(--bg), ${Math.random() * 10}%)`;
    }, 700);
  }
  
  let nextCards = document.querySelectorAll('.card:hidden');
  
  if (nextCards.length) {
    nextCards[0].style.display = 'block';
    nextCards[0].classList.add('fadeIn');
    nextCards[0].querySelector('button').focus();
  } else {
    eraButtons.forEach(button => button.disabled = false);
    document.querySelector('.scoreboard').textContent = `Your Score: ${score}/4`;
  }
}

function checkGuess(e) {
  let guess = e.target.textContent.toLowerCase();

  if (document.querySelector(`.${guess}`)) {
    score++;
    
    e.target.style.backgroundColor = 'gold';
    e.target.disabled = true;
    
    setTimeout(() => {
      e.target.classList.remove('fadeIn');
      e.target.style.opacity = '0';
    }, 700);
  } else {
    alert(`${guess} is NOT the correct era!`);
  }
  
  if (score === 4) {
    alert(`Congratulations, you guessed all four eras correctly!\nYour final score was ${score}/4.`);
    nextEra();
  } else {
    e.target.blur();
    nextEra();
  }
}

eraButtons.forEach(button => button.addEventListener('click', checkGuess));
</script>
</body>
</html>