golf-score/frontend/theme-minimal.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 — Minimal</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&display=swap');
:root{--bg:#faf9f6;--ink:#111;--line:#ddd;--accent:#bfa15f;}
*{box-sizing:border-box;}
body{font-family:'Space Grotesk',system-ui,sans-serif;background:var(--bg);color:var(--ink);margin:0;padding:3rem 1rem;line-height:1.35;}
.container{max-width:640px;margin:0 auto;}
h1{font-size:2.2rem;font-weight:700;letter-spacing:-.03em;margin:0 0 .25rem;}
.subtitle{color:#777;font-size:.95rem;margin-bottom:2.5rem;}
.card{border-top:1px solid var(--line);padding:1.5rem 0;margin-bottom:1.5rem;}
h2{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:#777;font-weight:700;margin:0 0 1rem;}
label{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#777;margin:1rem 0 .25rem;font-weight:500;}
input,select{width:100%;padding:.6rem .5rem;border:none;border-bottom:1.5px solid var(--line);background:transparent;font-family:inherit;font-size:1rem;color:var(--ink);outline:none;}
input:focus,select:focus{border-bottom-color:var(--accent);}
button{padding:.55rem 1rem;border:1px solid var(--ink);background:var(--ink);color:#fff;font-family:inherit;font-weight:500;font-size:.85rem;border-radius:0;cursor:pointer;transition:background .2s;}
button:hover{background:#333;}
button.secondary{background:#fff;color:var(--ink);border-color:var(--line);}
button.danger{background:#fff;color:#c0392b;border-color:#c0392b;}
.hole-nav{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;}
.hole-nav strong{font-size:1.1rem;font-weight:700;}
.hole-info{font-size:.85rem;color:#555;margin-bottom:1rem;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1rem;}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}
.stat{border-top:1px solid var(--line);padding-top:.75rem;}
.stat .label{font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;color:#777;}
.stat .value{font-size:1.4rem;font-weight:700;}
.gir{font-size:.85rem;color:var(--accent);font-weight:700;}
.theme-switch{display:flex;gap:.5rem;margin-top:2rem;}
.theme-switch a{font-size:.75rem;color:#777;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:.1rem;}
@media(max-width:640px){.form-grid{grid-template-columns:1fr;}.stats{grid-template-columns:repeat(2,1fr);}}
</style>
</head>
<body>
<div class="container">
<h1>Score Card</h1>
<p class="subtitle">Minimal tracking</p>

<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 onclick="signup()">Continue</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:#777;"></p>
  <label for="tee-select">Tee</label>
  <select id="tee-select"><option>White</option><option>Yellow</option><option>Blue</option><option>Red</option></select>
  <button onclick="startRound()" style="margin-top:1rem;">Start</button>
</section>

<section id="round-section" class="card" style="display:none;">
  <h2>Round</h2>
  <div class="hole-nav">
    <button class="secondary" onclick="prevHole()">Back</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 class="gir" style="margin-top:.75rem;">GIR: <strong id="gir-display">No</strong></div>
</section>

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

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

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