<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>☆ Duang With You ☆ ด้วงกับเธอ</title>
  <style>
    body {
      background: #ffecf0 url('https://i.imgur.com/WOa0Mh7.png');
      background-size: 80px 80px;
      font-family: 'Trebuchet MS', 'Lucida Sans Unicode', sans-serif;
      margin: 0;
      padding: 20px;
      color: #4a2c2a;
      cursor: url('https://cur.cursors-4u.net/cursors/cur-2/cur131.cur'), auto;
    }

    /* CONTAINER */
    .container {
      max-width: 800px;
      margin: 0 auto;
      background: rgba(255, 245, 240, 0.92);
      border: 3px double #d4787a;
      border-radius: 20px;
      padding: 20px 25px;
      box-shadow: 0 0 0 4px #ffe0e6, 8px 8px 16px rgba(0,0,0,0.1);
    }

    /* MARQUEE HEADER */
    .marquee-header {
      background: linear-gradient(to right, #c62828, #f9a825, #c62828);
      padding: 8px 0;
      border-radius: 30px;
      margin-bottom: 10px;
      border: 2px solid #b85c5c;
    }

    .marquee-header marquee {
      color: #fff;
      font-weight: bold;
      font-size: 1rem;
      letter-spacing: 2px;
    }

    /* TITLE */
    .site-title {
      text-align: center;
      margin: 15px 0;
    }

    .site-title h1 {
      font-family: 'Georgia', serif;
      font-size: 3.2rem;
      color: #c62828;
      text-shadow: 3px 3px 0 #f9a825, 6px 6px 0 rgba(198,40,40,0.15);
      margin: 5px 0;
      letter-spacing: 2px;
    }

    .site-title .thai-sub {
      font-size: 1.4rem;
      color: #7a4a4a;
      background: #ffe0e6;
      display: inline-block;
      padding: 2px 18px;
      border-radius: 30px;
      margin-top: 2px;
    }

    .site-title .blink {
      animation: blink 1s steps(2) infinite;
      color: #f9a825;
      font-size: 1.2rem;
    }

    @keyframes blink { 50% { opacity: 0; } }

    /* DIVIDER */
    .divider {
      text-align: center;
      margin: 10px 0;
      font-size: 1.2rem;
    }

    /* NAV */
    .nav-bar {
      background: #d4787a;
      padding: 8px 0;
      text-align: center;
      border-radius: 12px;
      margin: 10px 0;
    }

    .nav-bar a {
      color: #fff;
      text-decoration: none;
      padding: 5px 15px;
      display: inline-block;
      font-weight: bold;
      font-size: 0.95rem;
    }

    .nav-bar a:hover {
      background: #b85c5c;
      border-radius: 8px;
    }

    .nav-bar span.sep {
      color: #ffd4d4;
    }

    /* SECTIONS */
    .section {
      background: #fff9f7;
      border: 2px solid #f0d0d0;
      border-radius: 16px;
      padding: 15px 18px;
      margin: 15px 0;
      box-shadow: inset 0 0 10px rgba(212,120,122,0.08);
    }

    .section h2 {
      font-family: 'Georgia', serif;
      color: #c62828;
      border-bottom: 2px dotted #d4787a;
      padding-bottom: 4px;
      margin-top: 0;
      font-size: 1.5rem;
    }

    .section h2 .gif-icon {
      vertical-align: middle;
      margin-right: 6px;
    }

    /* INFO BOX */
    .info-box {
      background: #ffe0e6;
      border: 2px dashed #d4787a;
      border-radius: 12px;
      padding: 12px 15px;
      margin: 8px 0;
      font-size: 0.95rem;
    }

    .info-box b {
      color: #c62828;
    }

    /* CAST TABLE */
    .cast-table {
      width: 100%;
      border-collapse: collapse;
    }

    .cast-table td {
      padding: 8px 10px;
      border-bottom: 1px solid #f0d0d0;
    }

    .cast-table tr:last-child td {
      border-bottom: none;
    }

    .cast-table .name {
      font-weight: bold;
      color: #c62828;
      width: 160px;
    }

    /* EPISODES */
    .ep-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .ep-grid .ep {
      background: #fff0f0;
      border: 1px solid #d4787a;
      border-radius: 8px;
      padding: 5px 12px;
      font-size: 0.85rem;
      font-weight: bold;
      color: #5a3a3a;
    }

    .ep-grid .ep .num {
      color: #c62828;
    }

    /* QUOTE */
    .quote-box {
      background: linear-gradient(135deg, #c62828, #9a2a2a);
      color: #fff;
      padding: 18px;
      border-radius: 16px;
      text-align: center;
      margin: 12px 0;
      font-family: 'Georgia', serif;
      font-style: italic;
      font-size: 1.1rem;
    }

    .quote-box cite {
      display: block;
      margin-top: 8px;
      font-size: 0.85rem;
      opacity: 0.8;
      font-style: normal;
    }

    /* LINKS */
    .link-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      margin: 10px 0;
    }

    .link-buttons a {
      background: #d4787a;
      color: #fff;
      text-decoration: none;
      padding: 8px 20px;
      border-radius: 30px;
      font-weight: bold;
      border: 2px outset #e89a9c;
      font-size: 0.9rem;
    }

    .link-buttons a:hover {
      background: #c62828;
    }

    /* GUESTBOOK */
    .guestbook {
      background: #ffe0e6;
      border: 2px solid #d4787a;
      border-radius: 12px;
      padding: 10px 14px;
      margin: 10px 0;
      font-size: 0.85rem;
    }

    .guestbook .entry {
      border-bottom: 1px dashed #d4a0a0;
      padding: 6px 0;
    }

    .guestbook .entry:last-child {
      border-bottom: none;
    }

    .guestbook .user {
      font-weight: bold;
      color: #c62828;
    }

    /* COUNTER */
    .counter-area {
      text-align: center;
      margin: 12px 0;
      font-size: 0.9rem;
    }

    .counter-area img {
      vertical-align: middle;
      margin: 0 3px;
    }

    /* FOOTER */
    .footer {
      text-align: center;
      margin-top: 15px;
      font-size: 0.8rem;
      color: #8a6a6a;
      border-top: 2px dotted #d4a0a0;
      padding-top: 12px;
    }

    .footer img {
      vertical-align: middle;
      margin: 0 4px;
    }

    /* SIDE IMAGES */
    .side-gifs {
      display: flex;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
      margin: 8px 0;
    }

    .side-gifs img {
      height: 30px;
      border: none;
    }

    /* BLINK TEXT */
    .blink-text {
      animation: blink 1s steps(2) infinite;
      font-weight: bold;
      color: #f9a825;
    }

    .tag {
      display: inline-block;
      background: #ffe0e6;
      border-radius: 6px;
      padding: 2px 8px;
      font-size: 0.8rem;
      color: #8a4a4a;
      margin: 2px;
    }
  </style>
</head>
<body>

<div class="container">

  <!-- MARQUEE HEADER -->
  <div class="marquee-header">
    <marquee scrollamount="5">☆ NEW SERIES ALERT! ☆ Duang With You (ด้วงกับเธอ) is NOW STREAMING on iQIYI! ☆ TeeTee &amp; Por are EVERYTHING ☆ 12 episodes of pure BL perfection! ☆</marquee>
  </div>

  <!-- TITLE -->
  <div class="site-title">
    <div class="divider">✦ 🎨 ~*~ ✦ ~*~ 🎸 ✦</div>
    <h1>Duang With You</h1>
    <div class="thai-sub">ด้วงกับเธอ</div>
    <p style="margin:5px 0 0;font-size:0.9rem;color:#8a6a6a;">
      <span class="blink">♥</span> A DMD Production <span class="blink">♥</span>
    </p>
    <div class="divider">✦ 🎨 ~*~ ✦ ~*~ 🎸 ✦</div>
  </div>

  <!-- NAV -->
  <div class="nav-bar">
    <a href="#home">🏠 Home</a><span class="sep"> | </span>
    <a href="#story">📖 Story</a><span class="sep"> | </span>
    <a href="#cast">👥 Cast</a><span class="sep"> | </span>
    <a href="#episodes">📺 Eps</a><span class="sep"> | </span>
    <a href="#watch">▶ Watch</a><span class="sep"> | </span>
    <a href="#guestbook">📝 Guestbook</a>
  </div>

  <!-- SIDE GIFS -->
  <div class="side-gifs">
    <img src="https://i.imgur.com/LaVqXaN.gif" alt="sparkle">
    <img src="https://i.imgur.com/ZmJ2gNa.gif" alt="heart">
    <img src="https://i.imgur.com/1GmxI1L.gif" alt="star">
    <img src="https://i.imgur.com/LaVqXaN.gif" alt="sparkle">
    <img src="https://i.imgur.com/ZmJ2gNa.gif" alt="heart">
  </div>

  <!-- INTRO -->
  <div class="section" id="home">
    <h2><span class="gif-icon">☆</span> welcome to my duang with you shrine!</h2>
    <div class="info-box">
      <b>★ STATUS:</b> currently airing ★ <b>EPISODES:</b> 12/12 ★ <b>WATCHING:</b> ✅ caught up!
    </div>
    <p>helloooo and welcome to my lil fanpage for <b>Duang With You (ด้วงกับเธอ)</b>!! this is the cutest thai BL of 2026 and i am SO obsessed with TeeTee and Por 🥺💕 this page has everything u need to know about the series — synopsis, cast, where to watch, and more! feel free to sign my guestbook below!!</p>
    <p><img src="https://i.imgur.com/Ilm9X5V.gif" style="height:20px;" alt="divider"> <b>quick stats:</b> <span class="tag">🎨 art student x music student</span> <span class="tag">💕 love at first sight</span> <span class="tag">🎸 cold ML</span> <span class="tag">🌞 energetic FL</span> <span class="tag">🏫 university setting</span> <span class="tag">🎬 DMD</span></p>
  </div>

  <!-- STORY -->
  <div class="section" id="story">
    <h2><span class="gif-icon">📖</span> the story</h2>
    <p><b>Duang</b> (Cheewin) is a bright, chaotic decorative arts student who falls in love with <b>Qin</b> (Charat), the cold and mysterious jazz major, at first sight. Everyone says Qin is unattainable — but Duang doesn't care. He chases, he persists, he shows up. And slowly, through music and art, two worlds collide in the most beautiful way.</p>
    <p>Based on the novel <i>"Not the Best but Still Good"</i> by peachhplease, this series is a warm, funny, and deeply tender story about devotion, art, and finding your person.</p>
    <div class="quote-box">
      "Just because someone tells you the stars are out of reach doesn't mean you stop looking up."<br>
      <cite>— Duang With You (2026)</cite>
    </div>
    <p style="text-align:center;font-size:0.85rem;">🎨 <b>Genre:</b> Comedy, Romance, Youth, BL • 🎬 <b>Director:</b> Kla Nathawat Piyanonpong • 🏢 <b>Producer:</b> Domundi TV</p>
  </div>

  <!-- CAST -->
  <div class="section" id="cast">
    <h2><span class="gif-icon">👥</span> main cast</h2>
    <table class="cast-table">
      <tr><td class="name">🧑‍🎨 TeeTee Wanpichit</td><td>as <b>Duang</b> (Cheewin / Phodduang)</td></tr>
      <tr><td class="name">🎸 Por Suppakarn</td><td>as <b>Qin</b> (Charat)</td></tr>
      <tr><td class="name">😎 North Chatchapon</td><td>as <b>Jamie</b> (Jettana)</td></tr>
      <tr><td class="name">🎭 Wave Thanaphat</td><td>as <b>Pae</b> (Prachai)</td></tr>
      <tr><td class="name">🌟 Hugh Phoovitch</td><td>as <b>Kim</b></td></tr>
      <tr><td class="name">✨ Thi Thirati</td><td>as <b>Tong</b></td></tr>
    </table>
    <p style="text-align:center;margin:10px 0 0;font-size:0.8rem;">TeeTee &amp; Por also debuted as members of <b>DEXX</b> under DMD Music! 🎤</p>
  </div>

  <!-- EPISODES -->
  <div class="section" id="episodes">
    <h2><span class="gif-icon">📺</span> episodes</h2>
    <p style="font-size:0.85rem;">click the links to watch each episode on iQIYI!</p>
    <div class="ep-grid">
      <div class="ep"><span class="num">EP.1</span> First Sight</div>
      <div class="ep"><span class="num">EP.2</span> The Challenge</div>
      <div class="ep"><span class="num">EP.3</span> Collision</div>
      <div class="ep"><span class="num">EP.4</span> Melody</div>
      <div class="ep"><span class="num">EP.5</span> Distance</div>
      <div class="ep"><span class="num">EP.6</span> Resonance</div>
      <div class="ep"><span class="num">EP.7</span> Crescendo</div>
      <div class="ep"><span class="num">EP.8</span> Interlude</div>
      <div class="ep"><span class="num">EP.9</span> Rehearsal</div>
      <div class="ep"><span class="num">EP.10</span> Duet</div>
      <div class="ep"><span class="num">EP.11</span> Finale</div>
      <div class="ep"><span class="num">EP.12</span> With You</div>
    </div>
  </div>

  <!-- WATCH -->
  <div class="section" id="watch">
    <h2><span class="gif-icon">▶</span> where to watch</h2>
    <div class="link-buttons">
      <a href="https://www.iq.com/play/duang-with-you" target="_blank">▶ iQIYI</a>
      <a href="https://www.youtube.com/@MandeeChannel" target="_blank">🎬 Mandee Channel</a>
      <a href="https://mydramalist.com/787328-duang-with-you" target="_blank">📋 MyDramaList</a>
      <a href="https://en.wikipedia.org/wiki/Duang_with_You" target="_blank">📖 Wikipedia</a>
    </div>
    <p style="font-size:0.8rem;text-align:center;margin-top:8px;">📡 Also available on One 31 (Thailand) • Subtitles available on iQIYI</p>
  </div>

  <!-- GUESTBOOK -->
  <div class="section" id="guestbook">
    <h2><span class="gif-icon">📝</span> guestbook</h2>
    <p style="font-size:0.8rem;">sign my guestbook if you love duang with you too!! 💕</p>
    <div class="guestbook">
      <div class="entry"><span class="user">🌸 bl_fan_4ever</span> — "teetee and por have such incredible chemistry i am SOBBING 😭💕"</div>
      <div class="entry"><span class="user">🎸 qin_simp</span> — "episode 6 destroyed me. THE DUET SCENE. that is all."</div>
      <div class="entry"><span class="user">🎨 artgirlie</span> — "as an art student i feel SO seen by duang lmaoo this show is everything"</div>
      <div class="entry"><span class="user">⭐ teetee_stan</span> — "tee tee's acting got so much better since Your Sky im so proud 🥺"</div>
      <div class="entry"><span class="user">💌 newbie</span> — "just started ep 1 and im already hooked!! this is my first DMD drama!!"</div>
    </div>
    <p style="text-align:center;font-size:0.8rem;margin:5px 0 0;">
      <a href="#" style="color:#c62828;">✎ sign the guestbook</a> &nbsp;|&nbsp; <span class="blink-text">♥ 42,069 visitors ♥</span>
    </p>
  </div>

  <!-- COUNTER -->
  <div class="counter-area">
    <img src="https://i.imgur.com/KMH0VzP.gif" alt="made with love">
    you are visitor # <img src="https://hitwebcounter.com/counter/counter.php?page=14661997&style=0006&nbdigits=6&type=page&initCount=42069" alt="web counter" style="border:none;">
    <img src="https://i.imgur.com/KMH0VzP.gif" alt="made with love">
  </div>

  <!-- SIDE GIFS BOTTOM -->
  <div class="side-gifs">
    <img src="https://i.imgur.com/1GmxI1L.gif" alt="star">
    <img src="https://i.imgur.com/ZmJ2gNa.gif" alt="heart">
    <img src="https://i.imgur.com/Ilm9X5V.gif" alt="butterfly">
    <img src="https://i.imgur.com/ZmJ2gNa.gif" alt="heart">
    <img src="https://i.imgur.com/1GmxI1L.gif" alt="star">
  </div>

  <!-- FOOTER -->
  <div class="footer">
    <p>✦ Duang With You • ด้วงกับเธอ • A DMD Production ✦</p>
    <p>🎨 site handmade with ♥ for the BL fandom 🎸</p>
    <p style="font-size:0.7rem;">
      <a href="https://www.iq.com/play/duang-with-you" style="color:#c62828;">watch on iQIYI</a> 
      • <a href="https://en.wikipedia.org/wiki/Duang_with_You" style="color:#c62828;">wiki</a>
      • <a href="https://mydramalist.com/787328-duang-with-you" style="color:#c62828;">mydramalist</a>
    </p>
    <p style="font-size:0.7rem;margin-top:5px;">
      <img src="https://i.imgur.com/LaVqXaN.gif" style="height:15px;" alt="sparkle">
      last updated: may 2026
      <img src="https://i.imgur.com/LaVqXaN.gif" style="height:15px;" alt="sparkle">
    </p>
    <p style="font-size:0.7rem;">best viewed in <b>Netscape Navigator</b> at 800x600 ~~~ jk!! 😘</p>
  </div>

</div>

</body>
</html>