golf-score/frontend/theme-dark.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Golf Score Card — Dark</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;500&family=Inter:wght@300;600&display=swap');
:root{--bg:#0b0f14;--surface:#121620;--ink:#e8e8e8;--ink-secondary:#8892a0;--accent:#c8f560;--accent-dark:#a3c44a;--border:#1f2530;--shadow:0 10px 30px rgba(0,0,0,0.4);}
*{box-sizing:border-box;}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--ink);margin:0;padding:2rem 1rem;line-height:1.4;}
.container{max-width:720px;margin:0 auto;}
header{text-align:center;margin-bottom:2.5rem;}
header h1{font-family:'JetBrains Mono',monospace;font-size:2.2rem;font-weight:300;color:var(--accent);letter-spacing:-.03em;margin:0 0 .25rem;}
header p{margin:0;color:var(--ink-secondary);font-size:.95rem;}
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.5rem 1.75rem;margin-bottom:1.25rem;box-shadow:var(--shadow);}
h2{font-size:.9rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-weight:600;margin:0 0 1rem;}
label{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-secondary);margin:.75rem 0 .25rem;font-weight:500;}
input,select{width:100%;padding:.65rem .75rem;border:1px solid var(--border);border-radius:8px;background:#0f1318;color:var(--ink);font-family:inherit;font-size:.95rem;outline:none;}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(200,245,96,0.15);}
button{display:inline-flex;align-items:center;gap:.35rem;padding:.6rem 1rem;border:1px solid var(--border);background:#1a1f2a;color:var(--ink);font-family:inherit;font-weight:600;font-size:.85rem;border-radius:8px;cursor:pointer;transition:background .2s;}
button:hover{background:#22283a;}
button.accent{background:var(--accent);color:#0b0f14;border-color:var(--accent);font-weight:700;}
button.accent:hover{background:var(--accent-dark);}
button.danger{border-color:#ff6b6b;color:#ff6b6b;}
button.danger:hover{background:#ff6b6b;color:#0b0f14;}
.hole-nav{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;}
.hole-nav strong{font-family:'JetBrains Mono',monospace;font-size:1.2rem;color:var(--accent);min-width:6rem;text-align:center;}
.hole-info{font-family:'JetBrains Mono',monospace;font-size:.85rem;color:var(--ink-secondary);margin-bottom:1rem;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem 1rem;}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem;}
.stat-card{background:#0f1318;border:1px solid var(--border);border-radius:10px;padding:1rem;text-align:center;}
.stat-card .label{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-secondary);font-weight:600;}
.stat-card .value{font-family:'JetBrains Mono',monospace;font-size:1.5rem;color:var(--accent);margin-top:.25rem;}
.gir-badge{display:inline-block;padding:.25rem .6rem;border-radius:999px;font-weight:700;font-size:.8rem;background:#1a1f2a;color:var(--accent);border:1px solid var(--border);}
.theme-switch{display:flex;gap:.5rem;justify-content:center;margin-top:1rem;}
.theme-switch a{padding:.35rem .7rem;border-radius:8px;background:#1a1f2a;color:var(--ink-secondary);text-decoration:none;font-weight:600;font-size:.85rem;border:1px solid var(--border);}
.theme-switch a:hover{color:var(--ink);border-color:var(--accent);}
@media(max-width:640px){.form-grid{grid-template-columns:1fr;}}
</style>
</head>
<body>
<div class="container">
<header>
  <h1>GOLF // SCORE</h1>
  <p>Dark mode tracking</p>
</header>

<section id="signup-section" class="card">
  <h2>Sign Up</h2>
  <label for="name">Name</label>
  <input id="name" type="text" placeholder="Your name" />
  <label for="hcp">Handicap</label>
  <input id="hcp" type="number" value="0" />
  <button class="accent" onclick="signup()">Enter</button>
</section>

<section id="start-section" class="card" style="display:none;">
  <h2>Start Round</h2>
  <p id="course-info" style="margin:0 0 1rem; color: var(--ink-secondary);"></p>
  <label for="tee-select">Tee Box</label>
  <select id="tee-select"><option>White</option><option>Yellow</option><option>Blue</option><option>Red</option></select>
  <button class="accent" onclick="startRound()" style="margin-top:1rem;">Launch</button>
</section>

<section id="round-section" class="card" style="display:none;">
  <h2>Round</h2>
  <div class="hole-nav">
    <button onclick="prevHole()">Prev</button>
    <strong id="hole-label">Hole 1</strong>
    <button onclick="nextHole()">Next</button>
    <button class="danger" onclick="skipHole()">Skip</button>
  </div>
  <div id="hole-info" class="hole-info"></div>
  <form id="hole-form" onsubmit="event.preventDefault();">
    <input type="hidden" id="hole-score-id" />
    <div class="form-grid">
      <div>
        <label for="strokes">Strokes</label>
        <input id="strokes" type="number" value="1" min="1" oninput="saveDraft()" />
      </div>
      <div>
        <label for="unfinished">Unfinished (X)</label>
        <input id="unfinished" type="checkbox" oninput="saveDraft()" />
      </div>
      <div>
        <label for="fairway">Fairway</label>
        <input id="fairway" type="checkbox" oninput="saveDraft()" />
      </div>
      <div>
        <label for="putts-green">Putts Green</label>
        <input id="putts-green" type="number" value="0" min="0" oninput="saveDraft()" />
      </div>
      <div>
        <label for="putts-off-green">Putts Off</label>
        <input id="putts-off-green" type="number" value="0" min="0" oninput="saveDraft()" />
      </div>
      <div>
        <label for="pen-water">Water</label>
        <input id="pen-water" type="checkbox" oninput="saveDraft()" />
      </div>
      <div>
        <label for="pen-ob">OB</label>
        <input id="pen-ob" type="checkbox" oninput="saveDraft()" />
      </div>
      <div>
        <label for="pen-lost">Lost</label>
        <input id="pen-lost" type="checkbox" oninput="saveDraft()" />
      </div>
      <div>
        <label for="bunker-greenside">Greenside</label>
        <input id="bunker-greenside" type="checkbox" oninput="saveDraft()" />
      </div>
      <div>
        <label for="bunker-fairway">Fairway Bunker</label>
        <input id="bunker-fairway" type="checkbox" oninput="saveDraft()" />
      </div>
    </div>
  </form>
  <div style="margin-top:1rem;">
    <span class="gir-badge">GIR: <strong id="gir-display">No</strong></span>
  </div>
</section>

<section id="stats-section" class="card" style="display:none;">
  <h2>Stats</h2>
  <div id="stats-display" class="stats-grid"></div>
</section>

<div class="theme-switch">
  <a href="index.html">Forest</a>
  <a href="theme-minimal.html">Minimal</a>
  <a href="theme-editorial.html">Editorial</a>
</div>

</div>
<script src="app.js"></script>
</body>
</html>