shcizo/pdga-rating
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Modernize UI design with new color system, typography and layout

Browse Source 
- Add sticky dark header with nav replacing inline text links
- Introduce CSS custom properties design system (colors, spacing, shadows)
- Use DM Sans + JetBrains Mono fonts replacing Arial
- Modernize tables with uppercase headers and subtle hover states
- Add gradient fill and rounded line to rating chart
- Unify card sections across players and courses pages
- Add backdrop blur to modals
- Clean up inline styles to use CSS variables
This commit is contained in:
Samuel Enocsson
2026-02-19 09:11:52 +01:00
parent 2f73dddbd8
commit 371a398446
10 changed files with 777 additions and 489 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/pages/courses.ejs
+19 -18
View File
@@ -1,21 +1,22 @@
<% var body = `
<div class="search-container">
<input
type="text"
class="search-input"
id="course-search"
name="q"
placeholder="Search courses by name or city..."
hx-get="/partials/course-table"
hx-trigger="input changed delay:300ms, search"
hx-target="#courses-table"
/>
</div>
<div class="controls">
<button class="btn" onclick="scrapeCourses()" id="scrape-courses-btn">
<i class="fas fa-sync-alt"></i> Scrape Courses
</button>
<div class="card-section">
<h3>Find Courses</h3>
<div class="card-section-form">
<input
type="text"
class="input"
id="course-search"
name="q"
placeholder="Search courses by name or city..."
hx-get="/partials/course-table"
hx-trigger="input changed delay:300ms, search"
hx-target="#courses-table"
style="width: 340px;"
/>
<button class="btn" onclick="scrapeCourses()" id="scrape-courses-btn">
<i class="fas fa-sync-alt"></i> Scrape Courses
</button>
</div>
</div>
<div id="loading" class="loading" style="display: none;">Loading courses...</div>
@@ -29,4 +30,4 @@
cssFiles: ['courses.css'],
jsFiles: ['courses.js'],
body: body
}) %>
}) %>
views/pages/index.ejs
+7 -6
View File
@@ -1,23 +1,24 @@
<% var body = `
<!-- Add Player Section -->
<div class="add-player-section">
<div class="card-section">
<h3>Add Yourself to Tracked Players</h3>
<div class="add-player-form">
<div class="card-section-form">
<input
type="number"
id="pdga-number-input"
class="pdga-input"
class="input"
placeholder="Enter your PDGA number"
min="1"
style="width: 240px;"
/>
<button class="btn btn-add" onclick="searchAndAddPlayer()">
<i class="fas fa-user-plus"></i> Add Player
</button>
</div>
</div>
<div style="position: absolute; top: 10px; right: 15px;">
<a href="#" onclick="loadAllPlayers(); return false;" style="color: #007bff; font-size: 11px; text-decoration: none; margin-right: 10px;" title="Load all player data" id="load-all-btn">Load All</a>
<a href="#" onclick="clearCache(); return false;" style="color: #ccc; font-size: 12px; text-decoration: none; opacity: 0.3;" title="Clear cache"><i class="fas fa-cog"></i></a>
<div style="display: flex; justify-content: flex-end; gap: 12px; margin-bottom: 16px;">
<a href="#" onclick="loadAllPlayers(); return false;" style="color: var(--accent); font-size: 12px; text-decoration: none;" title="Load all player data" id="load-all-btn">Load All</a>
<a href="#" onclick="clearCache(); return false;" style="color: var(--text-muted); font-size: 12px; text-decoration: none; opacity: 0.4;" title="Clear cache"><i class="fas fa-cog"></i></a>
</div>
<div id="loading" class="loading" style="display: none;">Loading ratings...</div>
<div id="progress-section" style="display: none;">