`data/artifacts/0a0a9e11af9d/qwen3-14b.html`

380 lines
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Cinematic Scrollytelling: Journey to the Future</title>
  <style>
    :root {
      --primary: #0066cc;
      --secondary: #f0f0f0;
      --text: #333;
      --accent: #ff6600;
      --bg: #fff;
      --transition-speed: 0.3s;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: var(--bg);
      color: var(--text);
      overflow-x: hidden;
      scroll-behavior: smooth;
    }

    header {
      position: fixed;
      top: 0;
      width: 100%;
      background-color: var(--bg);
      z-index: 1000;
      padding: 10px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    header h1 {
      margin: 0;
      font-size: 1.5rem;
      color: var(--primary);
    }

    nav {
      display: flex;
      gap: 15px;
    }

    nav a {
      text-decoration: none;
      color: var(--primary);
      font-weight: bold;
      transition: color var(--transition-speed);
    }

    nav a:hover,
    nav a:focus {
      color: var(--accent);
    }

    main {
      padding-top: 80px;
      padding-bottom: 100px;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      gap: 60px;
    }

    section {
      padding: 40px 20px;
      max-width: 1000px;
      margin: 0 auto;
      position: relative;
    }

    section::after {
      content: '';
      position: absolute;
      bottom: -20px;
      left: 50%;
      transform: translateX(-50%);
      width: 100px;
      height: 4px;
      background-color: var(--primary);
      opacity: 0.6;
      transition: opacity var(--transition-speed);
    }

    section.active::after {
      opacity: 1;
    }

    h2 {
      margin-top: 0;
      font-size: 2rem;
      color: var(--primary);
      margin-bottom: 10px;
    }

    p {
      font-size: 1rem;
      line-height: 1.6;
    }

    .chapter-nav {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 20px;
      background-color: var(--bg);
      padding: 10px 20px;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      z-index: 999;
    }

    .chapter-nav button {
      background: none;
      border: 2px solid var(--primary);
      color: var(--primary);
      padding: 8px 12px;
      border-radius: 5px;
      cursor: pointer;
      transition: background var(--transition-speed), color var(--transition-speed);
      font-size: 0.9rem;
    }

    .chapter-nav button:hover,
    .chapter-nav button:focus {
      background-color: var(--primary);
      color: var(--bg);
    }

    .chapter-nav button:active {
      transform: scale(0.98);
    }

    .interactive {
      margin-top: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;
    }

    .interactive button {
      background-color: var(--accent);
      color: var(--bg);
      padding: 12px 24px;
      border: none;
      border-radius: 5px;
      font-size: 1rem;
      cursor: pointer;
      transition: background var(--transition-speed);
    }

    .interactive button:hover {
      background-color: #e65c00;
    }

    .empty-state {
      color: #888;
      font-style: italic;
    }

    .error-state {
      color: red;
      font-weight: bold;
    }

    .completed-state {
      color: green;
      font-weight: bold;
    }

    @media (max-width: 768px) {
      header h1 {
        font-size: 1.2rem;
      }

      nav a {
        font-size: 0.9rem;
      }

      .chapter-nav {
        flex-direction: column;
        gap: 10px;
      }

      .chapter-nav button {
        width: 100%;
      }

      .interactive button {
        font-size: 0.9rem;
        padding: 10px 16px;
      }
    }

    @media (prefers-reduced-motion: no-preference) {
      section::after {
        animation: slideIn 0.5s ease-out forwards;
      }

      @keyframes slideIn {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
    }

    .focus-ring {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }
  </style>
</head>
<body>
  <header>
    <h1>Journey to the Future</h1>
    <nav>
      <a href="#chapter1">Chapter 1</a>
      <a href="#chapter2">Chapter 2</a>
      <a href="#chapter3">Chapter 3</a>
      <a href="#chapter4">Chapter 4</a>
    </nav>
  </header>

  <main>
    <section id="chapter1" class="active">
      <h2>Chapter 1: The Vision</h2>
      <p>Imagine a world where technology and humanity thrive in perfect harmony. This journey explores how we can build that future, step by step.</p>
      <div class="interactive">
        <button id="startJourney" class="focus-ring">Start Your Journey</button>
      </div>
    </section>

    <section id="chapter2">
      <h2>Chapter 2: The Challenge</h2>
      <p>Every great vision begins with understanding the obstacles. From climate change to inequality, we face complex global challenges that require innovation and collaboration.</p>
      <div class="interactive">
        <button id="selectChallenge" class="focus-ring">Select a Challenge</button>
      </div>
    </section>

    <section id="chapter3">
      <h2>Chapter 3: The Solution</h2>
      <p>Technology is not the end goal, but a tool. We're exploring solutions that are sustainable, inclusive, and scalable. Every action matters.</p>
      <div class="interactive">
        <button id="chooseSolution" class="focus-ring">Choose a Solution</button>
      </div>
    </section>

    <section id="chapter4">
      <h2>Chapter 4: The Outcome</h2>
      <p>Together, we can shape the future. This journey has shown you the path, and now it's time to act. Every small step leads to a better world.</p>
      <div class="interactive">
        <button id="completeJourney" class="focus-ring">Complete Your Journey</button>
      </div>
    </section>
  </main>

  <div class="chapter-nav">
    <button id="nav1" class="focus-ring">Chapter 1</button>
    <button id="nav2" class="focus-ring">Chapter 2</button>
    <button id="nav3" class="focus-ring">Chapter 3</button>
    <button id="nav4" class="focus-ring">Chapter 4</button>
  </div>

  <script>
    const sections = document.querySelectorAll('section');
    const navButtons = document.querySelectorAll('.chapter-nav button');
    const chapterLinks = document.querySelectorAll('nav a');
    const startBtn = document.getElementById('startJourney');
    const selectBtn = document.getElementById('selectChallenge');
    const chooseBtn = document.getElementById('chooseSolution');
    const completeBtn = document.getElementById('completeJourney');

    let currentChapter = 1;

    function scrollToChapter(chapter) {
      sections.forEach((section, index) => {
        if (index + 1 === chapter) {
          section.classList.add('active');
          window.scrollTo({
            top: section.offsetTop - 80,
            behavior: 'smooth'
          });
        } else {
          section.classList.remove('active');
        }
      });
    }

    function updateNavButtons() {
      navButtons.forEach((btn, index) => {
        if (index + 1 === currentChapter) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      });
    }

    function handleButtonPress(btn, chapterNum, text, state) {
      if (btn.textContent === text) {
        if (state === 'empty') {
          btn.textContent = 'No selection made';
          btn.classList.add('empty-state');
        } else if (state === 'error') {
          btn.textContent = 'Invalid selection';
          btn.classList.add('error-state');
        } else if (state === 'completed') {
          btn.textContent = 'Action completed';
          btn.classList.add('completed-state');
        }
        setTimeout(() => {
          btn.textContent = text;
          btn.classList.remove('empty-state', 'error-state', 'completed-state');
        }, 2000);
      }
    }

    function setupNavigation() {
      chapterLinks.forEach(link => {
        link.addEventListener('click', (e) => {
          e.preventDefault();
          const chapter = parseInt(link.getAttribute('href').replace('#', ''));
          currentChapter = chapter;
          scrollToChapter(chapter);
          updateNavButtons();
        });
      });

      navButtons.forEach((btn, index) => {
        btn.addEventListener('click', () => {
          currentChapter = index + 1;
          scrollToChapter(currentChapter);
          updateNavButtons();
        });
      });
    }

    function setupInteractions() {
      startBtn.addEventListener('click', () => {
        handleButtonPress(startBtn, 'Start Your Journey', 'Start Your Journey', 'empty');
      });

      selectBtn.addEventListener('click', () => {
        handleButtonPress(selectBtn, 'Select a Challenge', 'Select a Challenge', 'empty');
      });

      chooseBtn.addEventListener('click', () => {
        handleButtonPress(chooseBtn, 'Choose a Solution', 'Choose a Solution', 'empty');
      });

      completeBtn.addEventListener('click', () => {
        handleButtonPress(completeBtn, 'Complete Your Journey', 'Complete Your Journey', 'completed');
      });
    }

    setupNavigation();
    setupInteractions();
  </script>
</body>
</html>