stardew-tracker/static/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#132720">
    <meta name="description" content="A shared two-year Stardew Valley Community Center planner.">
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
    <link rel="stylesheet" href="/styles.css">
    <title>Valley Yearbook</title>
  </head>
  <body>
    <div class="app-shell">
      <header class="topbar">
        <a class="brand" href="#today" aria-label="Valley Yearbook home">
          <span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i><i></i></span>
          <span><strong>Valley Yearbook</strong><small>Two years, one shared plan</small></span>
        </a>
        <div class="sync-status" id="sync-status" role="status" aria-live="polite">
          <span class="sync-dot"></span><span>Connecting…</span>
        </div>
      </header>

      <main>
        <section class="date-deck" aria-labelledby="date-title">
          <div class="date-heading">
            <div>
              <p class="eyebrow">Farm calendar</p>
              <h1 id="date-title"><span id="season-title">Spring</span> <span id="day-title">1</span></h1>
              <p id="weekday-title">Monday · Year 1</p>
            </div>
            <div class="date-arrows" aria-label="Change day">
              <button id="previous-day" type="button" aria-label="Previous day">−</button>
              <button id="next-day" type="button" aria-label="Next day">+</button>
            </div>
          </div>

          <div class="year-switch" role="group" aria-label="Year">
            <button type="button" data-year="1" aria-pressed="true">Year one</button>
            <button type="button" data-year="2" aria-pressed="false">Year two</button>
          </div>

          <div class="season-tabs" role="tablist" aria-label="Season">
            <button type="button" role="tab" data-season="spring" aria-selected="true"><span>✿</span>Spring</button>
            <button type="button" role="tab" data-season="summer" aria-selected="false"><span>☀</span>Summer</button>
            <button type="button" role="tab" data-season="fall" aria-selected="false"><span>◆</span>Fall</button>
            <button type="button" role="tab" data-season="winter" aria-selected="false"><span>✦</span>Winter</button>
          </div>

          <div class="day-grid" id="day-grid" aria-label="Day of season"></div>
        </section>

        <nav class="section-nav" aria-label="Planner sections">
          <a href="#today" class="active">Today</a>
          <a href="#crops">Planting plan</a>
          <a href="#bundles">Community Center</a>
        </nav>

        <section id="today" class="content-section today-section" aria-labelledby="today-heading">
          <div class="section-heading">
            <div><p class="eyebrow">At a glance</p><h2 id="today-heading">Today in the valley</h2></div>
            <p id="today-summary"></p>
          </div>
          <div id="today-cards" class="today-grid"></div>
        </section>

        <section id="crops" class="content-section" aria-labelledby="crops-heading">
          <div class="section-heading">
            <div><p class="eyebrow">No Speed-Gro assumed</p><h2 id="crops-heading">Planting plan</h2></div>
            <p>Last safe dates assume the crop is watered on planting day.</p>
          </div>
          <div id="crop-list" class="crop-list"></div>
        </section>

        <section id="bundles" class="content-section" aria-labelledby="bundles-heading">
          <div class="section-heading bundle-heading">
            <div><p class="eyebrow">Standard bundles</p><h2 id="bundles-heading">Community Center</h2></div>
            <div class="progress-cluster">
              <span id="progress-label">0 of 0 essentials</span>
              <div class="progress-track" aria-hidden="true"><i id="progress-bar"></i></div>
            </div>
          </div>
          <div class="bundle-toolbar" role="group" aria-label="Bundle filter">
            <button type="button" data-filter="all" aria-pressed="true">All rooms</button>
            <button type="button" data-filter="season" aria-pressed="false">Available this season</button>
            <button type="button" data-filter="open" aria-pressed="false">Still needed</button>
          </div>
          <div id="bundle-list" class="bundle-list"></div>
        </section>
      </main>

      <footer>
        <p>Unofficial fan-made planner for Stardew Valley 1.6. Calendar and standard-bundle details are based on the <a href="https://stardewvalleywiki.com/Calendar" rel="noreferrer">Stardew Valley Wiki</a>.</p>
      </footer>
    </div>
    <div id="toast" class="toast" role="alert" aria-live="assertive"></div>
    <script src="/data.js"></script>
    <script src="/app.js"></script>
  </body>
</html>