<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>About • Flo's Cute Page</title>
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
  <style>
    :root{
      --bg:#fff7fb;
      --card:#ffffff;
      --accent:#ff99cc;
      --muted:#8b8b9a;
      --shadow: 0 6px 18px rgba(20,10,40,0.08);
    }
    *{box-sizing:border-box}
    html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial}
    body{background:linear-gradient(180deg,#fffafc 0%,var(--bg) 100%);display:flex;align-items:center;justify-content:center;padding:36px}

    /* Card container */
    .book{
      width:880px;max-width:96vw;background:transparent;display:flex;gap:20px;align-items:center;justify-content:center;position:relative
    }

    .page{
      width:420px;height:560px;background:var(--card);border-radius:18px;padding:28px;box-shadow:var(--shadow);overflow:hidden;position:relative;display:flex;flex-direction:column;transition:transform .45s cubic-bezier(.2,.9,.3,1);
    }

    /* cute header */
    .badge{display:inline-flex;align-items:center;gap:10px;padding:6px 10px;border-radius:999px;background:linear-gradient(90deg,#ffd6e8,#ffeedd);font-family:'Patrick Hand',cursive;font-weight:600}
    .badge img{width:40px;height:40px;border-radius:999px;object-fit:cover;border:3px solid #fff}

    h1{font-family:'Patrick Hand',cursive;font-size:28px;margin:14px 0 6px}
    h2{margin:6px 0;color:var(--muted);font-weight:600}
    p{color:#333;line-height:1.45;margin:10px 0}

    /* page image */
    .hero{height:160px;border-radius:12px;overflow:hidden;margin:8px 0 14px}
    .hero img{width:100%;height:100%;object-fit:cover;display:block}

    /* little decorations */
    .row{display:flex;gap:10px;align-items:center}
    .chip{background:#fff4fb;padding:8px 12px;border-radius:999px;border:1px solid rgba(0,0,0,0.03);font-weight:600}

    /* nav */
    .nav{position:absolute;left:50%;transform:translateX(-50%);bottom:-28px;display:flex;gap:12px}
    .btn{background:var(--accent);border:none;color:white;padding:10px 14px;border-radius:12px;cursor:pointer;box-shadow:0 6px 14px rgba(255,153,204,0.18);font-weight:700}
    .btn:active{transform:translateY(1px)}

    /* pagination dots */
    .dots{display:flex;gap:8px;align-items:center}
    .dot{width:10px;height:10px;border-radius:999px;background:#ffeefe;opacity:.6}
    .dot.active{background:var(--accent);opacity:1}

    /* quote */
    blockquote{font-family:'Patrick Hand',cursive;margin:12px 0;padding-left:12px;border-left:4px solid #ffd1e6;color:#663154}

    /* responsive */
    @media(max-width:920px){
      .book{flex-direction:column;align-items:center}
      .page{width:92vw;height:auto}
      .nav{bottom:-42px}
    }
  </style>
</head>
<body>
  <main class="book" id="book">

    <!-- PAGE 1 -->
    <article class="page" data-index="0">
      <div class="row">
        <div class="badge">
          <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=400&auto=format&fit=crop" alt="avatar">
          <div>
            <div style="font-size:12px;color:#b44b7a">✨ Hi, I'm</div>
            <div style="font-weight:800;letter-spacing:0.4px">Flo 🌸</div>
          </div>
        </div>
        <div style="margin-left:auto;text-align:right">
          <div style="font-size:12px;color:var(--muted)">Location</div>
          <div style="font-weight:700">Budapest • Hungary</div>
        </div>
      </div>

      <h1>About me</h1>
      <h2>ENFP • dancer • dreamer</h2>

      <div class="hero">
        <!-- Replace the URL below with your own image uploaded to Neocities or an image host -->
        <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?q=80&w=1200&auto=format&fit=crop" alt="cute-hero">
      </div>

      <p>Heya! I'm a 19-year-old who loves bubble tea, soft plushies and K-pop. I write little songs in my spare time and bounce around dance studios like it's a playground. 🌷</p>

      <blockquote>"dance like nobody's watching — but bring a cute outfit, just in case."</blockquote>

      <div style="margin-top:auto;display:flex;gap:10px;align-items:center;justify-content:space-between">
        <div class="chip">Fav groups: ENHYPEN, TXT, ITZY, BTS</div>
        <div style="text-align:right;color:var(--muted)">Updated: Sep 2025</div>
      </div>
    </article>

    <!-- PAGE 2 -->
    <article class="page" data-index="1" style="transform:translateX(24px);opacity:0.98">
      <div class="row" style="justify-content:space-between">
        <div class="badge" style="background:linear-gradient(90deg,#ffefea,#fff6ff)">
          <div style="font-size:18px">✨</div>
          <div style="font-size:14px;font-weight:800">Hobbies</div>
        </div>
        <div style="font-size:12px;color:var(--muted);text-align:right">Contact: <strong>yourname@neocities.org</strong></div>
      </div>

      <h1>Passions & Hobbies</h1>

      <div class="hero">
        <img src="https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?q=80&w=1200&auto=format&fit=crop" alt="hobby-hero">
      </div>

      <p>I love:<br>
      • Dancing (ofc) — contemporary & heels<br>
      • Writing cute (and sometimes dramatic) lyrics<br>
      • Bubble tea dates, long walks and cozy nights in
      </p>

      <p style="font-size:13px;color:var(--muted)">Fun fact: I once fell asleep in the practice room and woke up with glitter in my hair. ✨</p>

      <div style="display:flex;gap:8px;margin-top:auto;align-items:center">
        <div class="chip">Piano</div>
        <div class="chip">Plushies</div>
        <div class="chip">K-dramas</div>
      </div>
    </article>

    <!-- PAGE 3 -->
    <article class="page" data-index="2" style="transform:translateX(48px);opacity:0.95">
      <div class="row" style="justify-content:space-between;align-items:flex-start">
        <div>
          <div style="font-size:10px;color:var(--muted)">Favorites</div>
          <h1 style="margin:4px 0">Music & Mood</h1>
        </div>
        <img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?q=80&w=400&auto=format&fit=crop" alt="mini" style="width:64px;height:64px;border-radius:12px;object-fit:cover">
      </div>

      <p>I adore K-pop groups — my current replay list: ENHYPEN, TXT, ITZY, LE SSERAFIM, & ST. I collect concert tickets and sticky notes with lyrics on them.</p>

      <div style="margin-top:10px">
        <strong>Currently listening:</strong>
        <ul>
          <li>ENHYPEN — good boy gone bad (again)</li>
          <li>TXT — a slow sunday b-side</li>
          <li>ITZY — dance anthem</li>
        </ul>
      </div>

      <blockquote>"If music is the language of the soul, call me fluent." 🎧</blockquote>

      <div style="margin-top:auto;display:flex;justify-content:space-between;align-items:center">
        <div style="font-size:12px;color:var(--muted)">Mood: pastel & cozy</div>
        <div class="chip">Playlists → replace link</div>
      </div>
    </article>

    <!-- PAGE 4 (contact + extras) -->
    <article class="page" data-index="3" style="transform:translateX(72px);opacity:0.9">
      <div class="row" style="justify-content:space-between">
        <div class="badge" style="background:linear-gradient(90deg,#e9fff8,#fff4ff)">
          <div style="font-size:14px">💌</div>
          <div style="font-size:14px;font-weight:800">Say hi</div>
        </div>
        <div style="font-size:12px;color:var(--muted)">Neocities • index-friendly</div>
      </div>

      <h1>Contact & Links</h1>

      <p>Want to collab, trade layouts or just chat about k-pop? I'm usually online — drop a message:</p>
      <ul>
        <li>Email: <strong>yourname@neocities.org</strong></li>
        <li>Twitter/X: <strong>@yourhandle</strong></li>
        <li>Discord: <strong>Flo#1234</strong></li>
      </ul>

      <div style="margin-top:12px">
        <strong>Helpful notes for Neocities:</strong>
        <ol style="color:var(--muted)">
          <li>Upload your images to the Neocities file manager and replace the <code>src</code> links above with <code>/files/your-image.jpg</code></li>
          <li>To change colors, edit the <code>:root</code> vars at the top of the CSS.</li>
          <li>Want more pages? Duplicate a &lt;article class="page"&gt; and update <code>data-index</code>.</li>
        </ol>
      </div>

      <div style="margin-top:auto;display:flex;justify-content:space-between;align-items:center">
        <div style="font-size:12px;color:var(--muted)">Made with ♥ and a lot of bubble tea</div>
        <div style="font-size:12px;color:var(--muted)">v1 • 2025</div>
      </div>
    </article>

    <!-- navigation (central) -->
    <div class="nav" aria-hidden="true">
      <button class="btn" id="prev">◀ Prev</button>
      <div class="dots" id="dots"></div>
      <button class="btn" id="next">Next ▶</button>
    </div>

  </main>

  <script>
    // Simple paged layout controller
    (function(){
      const pages = Array.from(document.querySelectorAll('.page'));
      const dotsWrap = document.getElementById('dots');
      let idx = 0;

      function render(){
        pages.forEach((p,i)=>{
          const offset = (i - idx) * 24;
          const z = 100 - Math.abs(i-idx);
          p.style.transform = `translateX(${offset}px) scale(${1 - Math.abs(i-idx)*0.03})`;
          p.style.opacity = `${1 - Math.abs(i-idx)*0.08}`;
          p.style.zIndex = z;
        });
        // dots
        dotsWrap.innerHTML = '';
        pages.forEach((p,i)=>{
          const d = document.createElement('div');
          d.className = 'dot'+(i===idx? ' active':'');
          d.addEventListener('click',()=>{ idx = i; render(); });
          dotsWrap.appendChild(d);
        });
      }

      document.getElementById('prev').addEventListener('click',()=>{ idx = Math.max(0, idx-1); render(); });
      document.getElementById('next').addEventListener('click',()=>{ idx = Math.min(pages.length-1, idx+1); render(); });

      // keyboard
      document.addEventListener('keydown', (e)=>{
        if(e.key === 'ArrowLeft') idx = Math.max(0, idx-1);
        if(e.key === 'ArrowRight') idx = Math.min(pages.length-1, idx+1);
        render();
      });

      // initial
      render();

      // small helper: allow clicking page to go next
      pages.forEach(p=>p.addEventListener('click',()=>{ idx = Math.min(pages.length-1, idx+1); render(); }));
    })();
  </script>
</body>
</html>
