dining.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Disney Parks Tips: Dining</title>
  <meta name="description" content="Restaurant, snack, and reservation tips for Disney dining.">

  <!-- Open Graph (Facebook, iMessage, Slack, LinkedIn) -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://disney.bound.tips/dining.html">
  <meta property="og:title" content="Disney Parks Tips: Dining">
  <meta property="og:description" content="Restaurant, snack, and reservation tips for Disney dining.">
  <meta property="og:image" content="https://disney.bound.tips/og-image.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Disney Parks Tips: Dining">
  <meta name="twitter:description" content="Restaurant, snack, and reservation tips for Disney dining.">
  <meta name="twitter:image" content="https://disney.bound.tips/og-image.png">
  <link rel="canonical" href="https://disney.bound.tips/dining.html">
  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "CollectionPage",
      "name": "Disney Parks Tips: Dining",
      "url": "https://disney.bound.tips/dining.html",
      "description": "Restaurant, snack, and reservation tips for Disney dining."
    }
  </script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Fraunces:wght@700;800&family=Nunito+Sans:wght@400;700;800;900&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="/src/styles.css">
</head>

<body class="category-page category-dining">
  <nav class="landing-nav" aria-label="Primary">
    <a class="landing-brand" href="/" aria-label="Disney Decision Desk home">
      <span class="castle-emoji" aria-hidden="true">
        <svg viewBox="0 0 24 24" focusable="false">
          <path class="castle-body" d="M4 21V10h3V5h3v5h4V5h3v5h3v11H4Z" />
          <path class="castle-door" d="M10 21v-4a2 2 0 0 1 4 0v4Z" />
          <path class="castle-lines" d="M4 13h16M8.5 10V7M15.5 10V7" />
        </svg>
      </span>Disney decision desk</a>
    <div class="landing-nav-links">
      <a href="plan.html">Decision plan</a>
      <a href="tips.html">Tips</a>
      <a href="about.html">How it works</a>
    </div>
  </nav>

  <main>
  <div class="hero category-page-hero">
    <div class="hero-content">
      <p class="section-kicker">Dining</p>
      <h1>Disney dining tips.</h1>
      <p class="subtitle">Reservation timing, snacks, mobile order, and meals worth protecting.</p>
      <div class="stats">
        <span id="tip-count">Loading...</span>
        <span id="last-updated"></span>
        <span id="next-update"></span>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="search-hero category-search">
      <input type="text" class="search-box" id="search" placeholder="Search the collection..." autocomplete="off">
      <button id="random-tip-btn" class="shuffle-btn" title="Random tip">&#x21bb;</button>
    </div>

    <div class="filter-bar" id="filter-bar">
      <div class="filter-scroll" id="filter-scroll" aria-label="Tip filters"></div>
    </div>

    <div class="results-count" id="results-count"></div>

    <div class="tips-grid" id="tips-container">
      <!-- Skeletons will be injected here by JS -->
      <div class="skeleton-card skeleton"></div>
      <div class="skeleton-card skeleton"></div>
      <div class="skeleton-card skeleton"></div>
      <div class="skeleton-card skeleton"></div>
      <div class="skeleton-card skeleton"></div>
      <div class="skeleton-card skeleton"></div>
    </div>

    <div id="pagination" class="pagination"></div>
  </div>

  <div id="toast" class="toast">Copied to clipboard</div>
  </main>

  <footer>
    <div class="footer-links">
      <a href="/">Home</a>
      <span class="separator">|</span>
      <a href="plan.html">Decision plan</a>
      <span class="separator">|</span>
      <a href="tips.html">Tips</a>
      <span class="separator">|</span>
      <a href="about.html">How it works</a>
      <span class="separator">|</span>
      <a href="parks.html">Parks</a>
      <span class="separator">|</span>
      <a href="dining.html">Dining</a>
      <span class="separator">|</span>
      <a href="hotels.html">Hotels</a>
      <span class="separator">|</span>
      <a href="budget.html">Budget</a>
      <span class="separator">|</span>
      <a href="planning.html">Planning</a>
      <span class="separator">|</span>
      <a href="transportation.html">Transportation</a>
    </div>
    <div class="footer-meta">
      <span id="footer-updated" class="footer-updated"></span>
      <span class="separator">|</span>
      <a href="https://scty.org/" target="_blank" rel="noopener">SCTY, Inc 2026</a>
    </div>
  </footer>

  <script>
    const params = new URLSearchParams(window.location.search);
    if (!params.get('category')) {
      params.set('category', 'dining');
      window.history.replaceState({}, '', `${window.location.pathname}?${params.toString()}`);
    }
  </script>
  <script type="module" src="/src/main.ts"></script>
</body>

</html>