index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>秋のハーフマラソンMAP — Japan Half Marathon Map (Oct–Nov 2026)</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
</head>
<body>
<header>
  <h1>🗺️ 秋のハーフマラソンMAP — Japan Half Marathon Map</h1>
  <div class="sub">October–November 2026 半マラソン（21.0975km）の全国分布と登録状況</div>
  <div class="meta">Data compiled from RUNNET on 2026-07-24 · 30 races · every race labelled <b>open</b> / <b>closing soon</b> / <b>full 満員</b> / <b>closed</b> · course profile &amp; expected climate included</div>
</header>

<div class="layout">
  <aside class="sidebar">
    <div class="stats" id="stats"></div>

    <div class="section">
      <h2>Search</h2>
      <input class="search" id="search" type="text" placeholder="大会名・都道府県・地域で検索…">
    </div>

    <div class="section">
      <h2>Can I still enter?</h2>
      <div class="chips" id="statusFilters"></div>
    </div>

    <div class="section">
      <h2>Month</h2>
      <select class="monthsel" id="monthFilter">
        <option value="all">All months</option>
        <option value="10">October 2026</option>
        <option value="11">November 2026</option>
      </select>
    </div>

    <div class="section">
      <h2>Region</h2>
      <div class="chips" id="regionFilters"></div>
    </div>

    <div class="section">
      <h2>Course profile</h2>
      <div class="chips" id="diffFilters"></div>
    </div>

    <div class="section">
      <h2>Options</h2>
      <div class="opts">
        <label class="opt"><input type="checkbox" id="enterableOnly"> Only races I can still enter</label>
        <label class="opt"><input type="checkbox" id="hideSoldOut"> Hide full (満員) races</label>
        <label class="opt"><input type="checkbox" id="lotteryOnly"> Lottery (抽選) only</label>
      </div>
    </div>

    <div class="footnote">
      ⚠️ Two different kinds of “you can’t enter”:<br>
      <b style="color:#9ca3af">Full 満員</b> = capacity was reached and entry was cut off early (sold out).<br>
      <b style="color:#ef4444">Closed (deadline)</b> = the entry window simply ended; the race was not flagged as
      sold out, so whether it actually filled is unknown.<br>
      Sold-out flags come from RUNNET as of 2026‑07‑24 and only cover races that had filled by then —
      always confirm on the official page before registering.
    </div>
  </aside>

  <main>
    <div class="mapwrap">
      <div id="map"></div>
      <div class="legend" id="legend"></div>
    </div>
  </main>
</div>

<div class="listwrap">
  <div class="listhead">
    <h2>Races <span class="count" id="count"></span></h2>
    <div style="display:flex;gap:6px">
      <button class="chip" id="sortDate">Sort: Date ↑</button>
    </div>
  </div>
  <div class="cards" id="cards"></div>
  <div class="empty" id="empty" style="display:none">No races match your filters.</div>
</div>

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="data.js"></script>
<script src="app.js"></script>
</body>
</html>