diff --git a/views/index.ejs b/views/index.ejs index f0f271d..d453f50 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -133,7 +133,8 @@ /* Page container styling */ .page-container { display: none; - width: 100%; /* Ensure full width for grid */ + width: 100%; + /* Ensure full width for grid */ } .page-container.active { @@ -156,13 +157,54 @@ margin-right: -15px; margin-left: -15px; } + + .pagination-btn { + margin: 0 10px; + color: white; + /* Ensure text is white for consistency */ + font-weight: bold; + /* Match the bold style of other UI elements */ + } + + /* Hover state (already defined for btn-primary, but reinforcing for clarity) */ + .pagination-btn.btn-primary:hover { + background-color: #ff3300; + border-color: #ff3300; + } + + /* Disabled state */ + .pagination-btn.btn-primary:disabled, + .pagination-btn.btn-primary[disabled] { + background-color: #444; + /* Darker, muted gray to indicate inactivity */ + border-color: #444; + color: #888; + /* Lighter gray text for readability */ + opacity: 1; + /* Override Bootstrap's default opacity */ + cursor: not-allowed; + /* Clear visual cue for disabled state */ + } + + /* Active state (when button is clicked, if applicable) */ + .pagination-btn.btn-primary:active, + .pagination-btn.btn-primary:focus { + background-color: #cc4400; + /* Slightly darker orange for feedback */ + border-color: #cc4400; + box-shadow: 0 0 8px rgba(255, 85, 0, 0.5); + /* Subtle glow to match theme */ + outline: none; + /* Remove default focus outline */ + } @@ -185,9 +227,10 @@ <%= genre.charAt(0).toUpperCase() + genre.slice(1) %> Tracks
-
+
- <% genreTracks[genre].tracks.forEach(track => { %> + <% genreTracks[genre].tracks.forEach(track=> { %>
@@ -195,25 +238,31 @@ <%= track.title %>

- - More Details + More Details
- <% }) %> + <% }) %>
- + Page <%= genreTracks[genre].page %> of <%= genreTracks[genre].totalPages %> - +
- <% } %> + <% } %>