Samuel Enocsson
371a398446
- 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
71 lines
3.4 KiB
Plaintext
71 lines
3.4 KiB
Plaintext
<% if (layouts.length === 0) { %>
|
|
<div class="no-layouts">No layouts found. Click the refresh icon to scrape layouts.</div>
|
|
<% } else {
|
|
var oneYearAgo = new Date();
|
|
oneYearAgo.setDate(oneYearAgo.getDate() - 365);
|
|
|
|
var activeLayouts = [];
|
|
var inactiveLayouts = [];
|
|
|
|
layouts.forEach(function(layout) {
|
|
if (layout.last_played) {
|
|
var lastPlayedDate = new Date(layout.last_played);
|
|
if (lastPlayedDate >= oneYearAgo) {
|
|
activeLayouts.push(layout);
|
|
} else {
|
|
inactiveLayouts.push(layout);
|
|
}
|
|
} else {
|
|
inactiveLayouts.push(layout);
|
|
}
|
|
});
|
|
%>
|
|
<h4>Layouts:</h4>
|
|
|
|
<% if (activeLayouts.length > 0) { %>
|
|
<% activeLayouts.forEach(function(layout) {
|
|
var ratingDisplay = layout.mean_rating ?
|
|
'<span style="color: var(--green); font-weight: 700; margin-left: 10px;">Rating: ' + layout.mean_rating + '</span>' : '';
|
|
var dateDisplay = layout.last_played ?
|
|
'<span style="color: var(--text-muted); font-size: 12px; margin-left: 10px;">Last played: ' + new Date(layout.last_played).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) + '</span>' : '';
|
|
%>
|
|
<div class="layout-item">
|
|
<div>
|
|
<span class="layout-name"><%= layout.name %></span>
|
|
<%- dateDisplay %>
|
|
</div>
|
|
<span class="layout-par">Par <%= layout.par %><%- ratingDisplay %></span>
|
|
</div>
|
|
<% }); %>
|
|
<% } %>
|
|
|
|
<% if (inactiveLayouts.length > 0) { %>
|
|
<div class="inactive-layouts-accordion">
|
|
<div class="accordion-header" onclick="toggleAccordion('accordion-<%= courseId %>')">
|
|
<span class="accordion-header-text">Inactive Layouts (<%= inactiveLayouts.length %>) - Not played in last year</span>
|
|
<span class="accordion-icon" id="accordion-<%= courseId %>-icon">▼</span>
|
|
</div>
|
|
<div class="accordion-content" id="accordion-<%= courseId %>">
|
|
<% inactiveLayouts.forEach(function(layout) {
|
|
var ratingDisplay = layout.mean_rating ?
|
|
'<span style="color: var(--green); font-weight: 700; margin-left: 10px;">Rating: ' + layout.mean_rating + '</span>' : '';
|
|
var dateDisplay = layout.last_played ?
|
|
'<span style="color: var(--text-muted); font-size: 12px; margin-left: 10px;">Last played: ' + new Date(layout.last_played).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) + '</span>' :
|
|
'<span style="color: var(--red); font-size: 12px; margin-left: 10px;">Never played</span>';
|
|
%>
|
|
<div class="layout-item inactive">
|
|
<div>
|
|
<span class="layout-name"><%= layout.name %></span>
|
|
<%- dateDisplay %>
|
|
</div>
|
|
<span class="layout-par">Par <%= layout.par %><%- ratingDisplay %></span>
|
|
</div>
|
|
<% }); %>
|
|
</div>
|
|
</div>
|
|
<% } %>
|
|
|
|
<% if (activeLayouts.length === 0 && inactiveLayouts.length === 0) { %>
|
|
<div class="no-layouts">No layouts found. Click the refresh icon to scrape layouts.</div>
|
|
<% } %>
|
|
<% } %> |