feat: redesign frontend UI with modern styling
Co-authored-by: aider (openrouter/thinkingmachines/inkling-small:free) <aider@aider.chat>
This commit is contained in:
Jiří Stachandaider committed
1 parent
05f6b6386d
commit
1d548b434b
1 file changed
+301
-38
+301
-38
@@ -2,65 +2,328 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Golf Prototype</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Golf Score Card — Prototype</title>
|
||||
<style>
|
||||
body { font-family: system-ui, sans-serif; max-width: 720px; margin: 2rem auto; padding: 0 1rem; color: #222; }
|
||||
section { margin-bottom: 1.5rem; padding: 1rem; border: 1px solid #ddd; border-radius: 8px; background: #fafafa; }
|
||||
h1 { font-size: 1.5rem; }
|
||||
label { display: inline-block; margin: 0.25rem 0; }
|
||||
input, select { padding: 0.25rem; }
|
||||
button { padding: 0.4rem 0.8rem; margin-right: 0.5rem; cursor: pointer; }
|
||||
#stats-display p { margin: 0.2rem 0; }
|
||||
#hole-info { font-size: 0.95rem; color: #555; margin-bottom: 0.5rem; }
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Playfair+Display:wght@700&display=swap');
|
||||
|
||||
:root {
|
||||
--bg: #f4f6f0;
|
||||
--surface: #ffffff;
|
||||
--ink: #1a2e1a;
|
||||
--ink-secondary: #556b55;
|
||||
--accent: #2d6a4f;
|
||||
--accent-light: #d8e8dc;
|
||||
--accent-dark: #1b4332;
|
||||
--border: #dde5d8;
|
||||
--shadow: 0 10px 30px rgba(26,46,26,0.08);
|
||||
--radius: 16px;
|
||||
}
|
||||
|
||||
* { 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.45;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-family: 'Playfair Display', Georgia, serif;
|
||||
font-size: 2.6rem;
|
||||
margin: 0 0 0.25rem;
|
||||
color: var(--accent-dark);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
header p {
|
||||
margin: 0;
|
||||
color: var(--ink-secondary);
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 1.5rem 1.75rem;
|
||||
margin-bottom: 1.25rem;
|
||||
box-shadow: var(--shadow);
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.card:hover { box-shadow: 0 14px 40px rgba(26,46,26,0.12); }
|
||||
|
||||
h2 {
|
||||
font-size: 1.15rem;
|
||||
margin: 0 0 1rem;
|
||||
color: var(--accent-dark);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
margin: 0.75rem 0 0.35rem;
|
||||
color: var(--ink-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 0.65rem 0.75rem;
|
||||
border: 1.5px solid var(--border);
|
||||
border-radius: 10px;
|
||||
font-size: 1rem;
|
||||
background: #fafcf8;
|
||||
color: var(--ink);
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
input:focus, select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px rgba(45,106,79,0.12);
|
||||
}
|
||||
|
||||
button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.65rem 1.1rem;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, transform 0.1s;
|
||||
}
|
||||
|
||||
button:active { transform: translateY(1px); }
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-primary:hover { background: var(--accent-dark); }
|
||||
|
||||
.btn-secondary {
|
||||
background: #e8ede8;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.btn-secondary:hover { background: #dde5d8; }
|
||||
|
||||
.btn-danger {
|
||||
background: #c0392b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-danger:hover { background: #922b21; }
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.row > * { flex: 1 1 auto; }
|
||||
|
||||
.hole-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.hole-nav strong {
|
||||
font-family: 'Playfair Display', Georgia, serif;
|
||||
font-size: 1.3rem;
|
||||
color: var(--accent-dark);
|
||||
min-width: 6rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hole-info {
|
||||
background: var(--accent-light);
|
||||
color: var(--accent-dark);
|
||||
padding: 0.6rem 0.9rem;
|
||||
border-radius: 10px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.form-grid label { margin-top: 0.25rem; }
|
||||
|
||||
.form-grid input[type="number"] { width: 100%; }
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-card .label {
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--ink-secondary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stat-card .value {
|
||||
font-family: 'Playfair Display', Georgia, serif;
|
||||
font-size: 1.6rem;
|
||||
color: var(--accent-dark);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.gir-badge {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.6rem;
|
||||
border-radius: 999px;
|
||||
font-weight: 700;
|
||||
font-size: 0.85rem;
|
||||
background: var(--accent-light);
|
||||
color: var(--accent-dark);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.form-grid { grid-template-columns: 1fr; }
|
||||
header h1 { font-size: 2rem; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Golf Score Card — Prototype</h1>
|
||||
<div class="container">
|
||||
|
||||
<section id="signup-section">
|
||||
<header>
|
||||
<h1>Golf Score Card</h1>
|
||||
<p>Track your round with precision</p>
|
||||
</header>
|
||||
|
||||
<section id="signup-section" class="card">
|
||||
<h2>Sign Up</h2>
|
||||
<label>Name: <input id="name" type="text" placeholder="Your name" /></label><br>
|
||||
<label>Handicap: <input id="hcp" type="number" value="0" /></label><br>
|
||||
<button onclick="signup()">Sign Up</button>
|
||||
<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="btn-primary" onclick="signup()">Sign Up</button>
|
||||
</section>
|
||||
|
||||
<section id="start-section" style="display:none;">
|
||||
<h2>Course</h2>
|
||||
<p id="course-info"></p>
|
||||
<label>Tee: <select id="tee-select"><option>White</option><option>Yellow</option><option>Blue</option><option>Red</option></select></label><br>
|
||||
<button onclick="startRound()">Start Round</button>
|
||||
<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="btn-primary" onclick="startRound()" style="margin-top:1rem;">Start Round</button>
|
||||
</section>
|
||||
|
||||
<section id="round-section" style="display:none;">
|
||||
<section id="round-section" class="card" style="display:none;">
|
||||
<h2>Round</h2>
|
||||
<div>
|
||||
<button id="prev-btn" onclick="prevHole()">Prev</button>
|
||||
<div class="hole-nav">
|
||||
<button class="btn-secondary" id="prev-btn" onclick="prevHole()">Prev</button>
|
||||
<strong id="hole-label">Hole 1</strong>
|
||||
<button id="next-btn" onclick="nextHole()">Next</button>
|
||||
<button onclick="skipHole()">Skip</button>
|
||||
<button class="btn-secondary" id="next-btn" onclick="nextHole()">Next</button>
|
||||
<button class="btn-danger" onclick="skipHole()">Skip</button>
|
||||
</div>
|
||||
<div id="hole-info"></div>
|
||||
<div id="hole-info" class="hole-info"></div>
|
||||
<form id="hole-form" onsubmit="event.preventDefault();">
|
||||
<input type="hidden" id="hole-score-id" />
|
||||
<label>Strokes (1+): <input id="strokes" type="number" value="1" min="1" oninput="saveDraft()" /></label><br>
|
||||
<label>Unfinished (X): <input id="unfinished" type="checkbox" oninput="saveDraft()" /></label><br>
|
||||
<label>Fairway Hit: <input id="fairway" type="checkbox" oninput="saveDraft()" /></label><br>
|
||||
<label>Putts on Green: <input id="putts-green" type="number" value="0" min="0" oninput="saveDraft()" /></label><br>
|
||||
<label>Putts Off Green: <input id="putts-off-green" type="number" value="0" min="0" oninput="saveDraft()" /></label><br>
|
||||
<label>Penalty - Water: <input id="pen-water" type="checkbox" oninput="saveDraft()" /></label><br>
|
||||
<label>Penalty - OB: <input id="pen-ob" type="checkbox" oninput="saveDraft()" /></label><br>
|
||||
<label>Penalty - Lost Ball: <input id="pen-lost" type="checkbox" oninput="saveDraft()" /></label><br>
|
||||
<label>Bunker - Greenside: <input id="bunker-greenside" type="checkbox" oninput="saveDraft()" /></label><br>
|
||||
<label>Bunker - Fairway: <input id="bunker-fairway" type="checkbox" oninput="saveDraft()" /></label><br>
|
||||
<div class="form-grid">
|
||||
<div>
|
||||
<label for="strokes">Strokes (1+)</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 Hit</label>
|
||||
<input id="fairway" type="checkbox" oninput="saveDraft()" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="putts-green">Putts on Green</label>
|
||||
<input id="putts-green" type="number" value="0" min="0" oninput="saveDraft()" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="putts-off-green">Putts Off Green</label>
|
||||
<input id="putts-off-green" type="number" value="0" min="0" oninput="saveDraft()" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="pen-water">Penalty — Water</label>
|
||||
<input id="pen-water" type="checkbox" oninput="saveDraft()" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="pen-ob">Penalty — OB</label>
|
||||
<input id="pen-ob" type="checkbox" oninput="saveDraft()" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="pen-lost">Penalty — Lost Ball</label>
|
||||
<input id="pen-lost" type="checkbox" oninput="saveDraft()" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="bunker-greenside">Bunker — Greenside</label>
|
||||
<input id="bunker-greenside" type="checkbox" oninput="saveDraft()" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="bunker-fairway">Bunker — Fairway</label>
|
||||
<input id="bunker-fairway" type="checkbox" oninput="saveDraft()" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<p>GIR: <strong id="gir-display">No</strong></p>
|
||||
<div style="margin-top:1rem;">
|
||||
<span class="gir-badge">GIR: <strong id="gir-display">No</strong></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="stats-section" style="display:none;">
|
||||
<section id="stats-section" class="card" style="display:none;">
|
||||
<h2>Basic Stats</h2>
|
||||
<div id="stats-display"></div>
|
||||
<div id="stats-display" class="stats-grid"></div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user