<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>$SHITDAD – The Coin That Will Stick Around Longer Than Him</title>
  <!-- GSAP for animations -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

    html, body {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    * {
      margin: 0; 
      padding: 0; 
      box-sizing: border-box;
    }
    body {
      font-family: 'Press Start 2P', cursive;
      background: #1a1a1a;
      color: #fff;
      line-height: 1.6;
      overflow-x: hidden;
    }

    /* ---------------- HERO SECTION ---------------- */
    .hero {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 3rem 2rem;
      background: linear-gradient(135deg, #303030, #1a1a1a);
      position: relative;
    }

    .logo {
      font-size: 5rem;
      color: #ffd700;
      text-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
      margin-bottom: 1rem;
      z-index: 2;
    }

    .tagline {
      font-size: 1.8rem;
      margin-bottom: 2rem;
      color: #aaa;
      max-width: 700px;
      z-index: 2;
    }

    .cta-button {
      font-size: 1.2rem;
      padding: 1rem 2.5rem;
      background: linear-gradient(45deg, #ffd700, #ff8c00);
      color: #111;
      border: none;
      border-radius: 50px;
      cursor: pointer;
      text-decoration: none;
      box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      z-index: 2;
      margin-bottom: 2rem;
    }

    .cta-button:hover {
      transform: translateY(-5px);
      box-shadow: 0 0 50px rgba(255, 215, 0, 0.6);
    }

    /* Dad story container below the Buy button */
    .dad-story {
      position: relative;
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
      overflow: hidden;
      min-height: 100px;
    }

    .dad-figure {
      font-size: 80px;
      text-align: center;
      opacity: 0; /* hidden initially */
    }

    .dad-line {
      font-size: 1rem;
      color: #ffd700;
      margin: 0.5rem 0 1rem;
      min-height: 20px;
      transition: opacity 0.2s;
      opacity: 0; /* hidden initially */
    }

    .narrator-text {
      font-size: 1rem;
      color: #ff8c00;
      margin: 0.5rem 0 0;
      opacity: 0;
      transition: opacity 0.2s;
      text-align: center;
    }

    /* ---------------- FEATURES SECTION ---------------- */
    .features {
      display: flex;
      justify-content: center;
      gap: 2rem;
      flex-wrap: wrap;
      padding: 5rem 2rem;
      position: relative;
      overflow: hidden;
    }

    .feature-card {
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(4px) saturate(150%);
      -webkit-backdrop-filter: blur(4px) saturate(150%);
      padding: 2rem;
      border-radius: 15px;
      max-width: 350px;
      text-align: center;
      border: 2px solid rgba(255, 215, 0, 0.2);
      transition: transform 0.3s ease, border-color 0.3s ease;
      z-index: 2;
    }

    .feature-card:hover {
      transform: translateY(-8px);
      border-color: #ffd700;
    }

    .feature-card h3 {
      color: #ffd700;
      margin-bottom: 1rem;
    }

    /* ---------------- ROADMAP SECTION ---------------- */
    .roadmap {
      background: #2a2a2a;
      padding: 5rem 2rem;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .roadmap-title {
      font-size: 2.8rem;
      color: #ffd700;
      margin-bottom: 4rem;
      position: relative;
      z-index: 2;
      text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
    }

    .roadmap-timeline {
      display: flex;
      flex-direction: column;
      gap: 3rem;
      align-items: center;
      z-index: 2;
    }

    .roadmap-stage {
      max-width: 700px;
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(4px) saturate(150%);
      -webkit-backdrop-filter: blur(4px) saturate(150%);
      padding: 2.5rem;
      border-radius: 15px;
      border: 2px solid rgba(255, 215, 0, 0.1);
      transition: all 0.3s ease;
      position: relative;
      cursor: pointer;
      overflow: hidden;
    }

    .roadmap-stage::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: rgba(255, 215, 0, 0.1);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s ease;
    }

    .roadmap-stage:hover::before {
      transform: scaleX(1);
    }

    .roadmap-stage:hover {
      border-color: #ffd700;
      box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
    }

    .roadmap-stage h3, .roadmap-stage p {
      position: relative;
      z-index: 2;
    }

    /* ---------------- QUOTE GENERATOR ---------------- */
    .quote-generator {
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(4px) saturate(150%);
      -webkit-backdrop-filter: blur(4px) saturate(150%);
      border: 2px solid rgba(255, 215, 0, 0.2);
      border-radius: 15px;
      max-width: 600px;
      margin: 3rem auto;
      padding: 2rem;
      text-align: center;
      position: relative;
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .quote-generator:hover {
      transform: translateY(-5px);
      box-shadow: 0 0 20px rgba(255, 215, 0, 0.1);
    }

    .quote-generator h2 {
      color: #ffd700;
      margin-bottom: 1.5rem;
    }

    .quote-display {
      min-height: 60px;
      margin-bottom: 1rem;
      font-size: 1rem;
      color: #fff;
      line-height: 1.6;
      transition: opacity 0.3s ease;
    }

    .generate-btn {
      background: rgba(255, 215, 0, 0.2);
      color: #ffd700;
      border: 2px solid #ffd700;
      border-radius: 50px;
      cursor: pointer;
      padding: 0.8rem 1.5rem;
      font-size: 0.8rem;
      font-family: 'Press Start 2P', cursive;
      transition: all 0.3s ease;
    }

    .generate-btn:hover {
      background: rgba(255, 215, 0, 0.3);
      transform: scale(1.05);
      box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
    }

    .loading {
      color: #ffd700;
      font-size: 1rem;
      margin-bottom: 1rem;
      display: none; 
    }

    /* ---------------- FOOTER ---------------- */
    footer {
      text-align: center;
      padding: 2rem 0;
      background: #111;
      color: #aaa;
    }
  </style>
</head>
<body>

<!-- HERO SECTION -->
<div class="hero">
    <div class="logo">$SHITDAD</div>
    <div class="tagline">The coin that will stick around longer than him.</div>

    <a href="#" class="cta-button">Buy $SHITDAD</a>

    <!-- Dad story container -->
    <div class="dad-story" id="dad-story">
      <div class="dad-figure" id="dad-figure">👨</div>
      <div class="dad-line" id="dad-line"></div>
      <div class="narrator-text" id="narrator-text"></div>
    </div>
</div>

<!-- FEATURES SECTION -->
<section class="features">
    <div class="feature-card">
        <h3>🚀 LAUNCH</h3>
        <p>Unlike Dad, we showed up. Token launched, and we’re still here. Already winning.</p>
    </div>
    <div class="feature-card">
        <h3>💎 COMMUNITY</h3>
        <p>Built by kids with questionable dads. Stronger together – we hodl the emotional baggage.</p>
    </div>
    <div class="feature-card">
        <h3>🔥 MEMES</h3>
        <p>The memes will last forever, just like the disappointment. But hey, at least we’re laughing.</p>
    </div>
</section>

<!-- ROADMAP -->
<section class="roadmap">
    <h2 class="roadmap-title">The $SHITDAD Roadmap</h2>
    <div class="roadmap-timeline">

        <div class="roadmap-stage">
            <h3>🥩 PHASE 1: "He Said He’d Be Back… Yeah, Right"</h3>
            <p>Token launched. Dad dipped, but we stayed. First mission? Build the greatest meme community this side of abandonment.</p>
        </div>

        <div class="roadmap-stage">
            <h3>📣 PHASE 2: "Viral Tweets, Emotional Damage"</h3>
            <p>We’re dropping memes faster than Dad dropped his responsibilities.  
            Twitter’s on fire, and Telegram’s growing faster than he moved onto his next relationship.  
            The community’s thriving – <strong>because unlike him, we didn’t bail when things got tough.</strong>  
            We’re rising – <strong>he ran from responsibility, we’re running the project.</strong></p>
        </div>

        <div class="roadmap-stage">
            <h3>🛠️ PHASE 4: "Dad’s Back to ‘Help’... After We Got Rich"</h3>
            <p>Project moons, Dad reappears dropping fire emojis. <strong>No admin keys. No loans.</strong> Watch from the sidelines, prick.</p>
        </div>

    </div>
</section>

<!-- QUOTE GENERATOR -->
<section class="quote-generator">
    <h2>Shit Dad Quote Generator</h2>
    <!-- The loading indicator will replace the quote text during load. -->
    <div class="loading">Loading...</div>
    <div class="quote-display">Click generate to see a classic Shit Dad quote!</div>
    <button class="generate-btn">Generate Quote</button>
</section>

<!-- FOOTER -->
<footer>
    <p>&copy; 2024 $SHITDAD – Still here. Unlike him.</p>
</footer>

<script>
  /* ------------------ 1) DAD SCENES FROM leaving.txt  ------------------ */
  let SCENES = [];

  fetch('leaving.txt')
    .then(resp => resp.text())
    .then(text => {
      SCENES = parseLeavingScenes(text);
      startDadScene();
    })
    .catch(err => {
      console.error("Error reading leaving.txt:", err);
      // fallback single scene
      SCENES = [{
        line1: "Fallback line 1",
        line2: "Fallback line 2"
      }];
      startDadScene();
    });

  function parseLeavingScenes(fileText) {
    // Each scene is 2 lines, separated by a blank line
    const rawScenes = fileText.trim().split(/\n\s*\n/);
    const scenes = [];

    rawScenes.forEach(sceneBlock => {
      const lines = sceneBlock.split('\n').map(l => l.trim()).filter(Boolean);
      if (lines.length >= 2) {
        scenes.push({ line1: lines[0], line2: lines[1] });
      }
    });
    return scenes;
  }

  const dadStoryEl  = document.getElementById('dad-story');
  const dadFigureEl = document.getElementById('dad-figure');
  const dadLineEl   = document.getElementById('dad-line');
  const narratorEl  = document.getElementById('narrator-text');

  function startDadScene() {
    if (!SCENES.length) {
      SCENES.push({ line1: "Hold down the fort. I believe in you.", line2: "I’m chasing my dreams. You wouldn’t get it." });
    }

    const scene = SCENES[Math.floor(Math.random() * SCENES.length)];
    const firstLine = scene.line1;
    const secondLine = scene.line2;

    const tl = gsap.timeline();

    // Dad slides in from left
    tl.fromTo(dadFigureEl, { x: -200, opacity: 0 }, { x: 0, opacity: 1, duration: 1.5 });

    // Show line1
    tl.to(dadLineEl, { 
      opacity: 1,
      duration: 1,
      onStart: () => dadLineEl.textContent = firstLine
    });

    // Wait 2.5s
    tl.to({}, { duration: 2.5 });

    // Switch to second line
    tl.to(dadLineEl, {
      opacity: 0,
      duration: 0.8,
      onComplete: () => {
        dadLineEl.textContent = secondLine;
      }
    });
    tl.to(dadLineEl, { opacity: 1, duration: 1 });

    // Dad leaves to the right
    tl.to(dadFigureEl, { x: 200, duration: 1.5, ease: "power1.inOut" });
    tl.to(dadFigureEl, { opacity: 0, duration: 0.8 }, "<");

    // Narrator "He’s not coming back."
    tl.to(dadLineEl, { opacity: 0, duration: 0.5 });
    tl.to(narratorEl, {
      opacity: 1,
      duration: 1,
      onStart: () => {
        narratorEl.textContent = "Narrator: He’s not coming back.";
      }
    });

    tl.to({}, { duration: 2 });

    // Instead of removing from DOM, just collapse
    tl.to(narratorEl, { opacity: 0, duration: 0.8 });
    tl.to(dadStoryEl, {
      height: 0,
      duration: 1,
      marginBottom: 0,
      overflow: 'hidden'
    });
  }

  /* ------------------ 2) QUOTES FROM quotes.txt  ------------------ */
  let ALL_QUOTES = [];

  fetch('quotes.txt')
    .then(resp => resp.text())
    .then(txt => {
      // parse each line as a separate quote
      ALL_QUOTES = txt.split('\n').map(line => line.trim()).filter(Boolean);

      // If there are no quotes, we set an error message instead
      if (!ALL_QUOTES.length) {
        ALL_QUOTES = [];
      }
    })
    .catch(err => {
      console.error("Error reading quotes.txt:", err);
      ALL_QUOTES = [];
    });

  const loadingIndicator = document.querySelector('.loading');
  const quoteDisplay = document.querySelector('.quote-display');
  const generateBtn = document.querySelector('.generate-btn');

  generateBtn.addEventListener('click', () => {
    // if no quotes loaded or file missing, show error
    if (!ALL_QUOTES.length) {
      quoteDisplay.textContent = "Uh oh... looks like Dad sold the server for a pack of smokes 🚬";
      return;
    }

    // Hide the existing quote text
    quoteDisplay.style.display = 'none';
    // Show the loading indicator in its place
    loadingIndicator.style.display = 'block';

    // Wait 800ms
    setTimeout(() => {
      // Hide loading indicator
      loadingIndicator.style.display = 'none';
      // Show the new quote
      const randomIndex = Math.floor(Math.random() * ALL_QUOTES.length);
      quoteDisplay.textContent = ALL_QUOTES[randomIndex];
      // Bring back the quote display
      quoteDisplay.style.display = 'block';
    }, 800);
  });
</script>
</body>
</html>
