snxraven/ravenscott-rocks
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changes to track.ejs

Browse Source
This commit is contained in:
snxraven
2025-06-22 05:28:53 -04:00
parent 3cbd2a7c6a
commit 343c9fc812
1 changed files with 32 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
views/track.ejs
View File

@ -59,6 +59,23 @@
scrollbar-color: #4a4a4a #1e1e1e;
}
/* Header styling */
.site-header {
color: #ff5500;
font-size: 2.5rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 3px;
text-align: center;
margin-bottom: 20px;
text-shadow: 0 0 10px rgba(255, 85, 0, 0.5);
transition: color 0.3s ease;
}
.site-header:hover {
color: #ff3300;
}
/* Search box styling */
.search-container {
position: relative;
@ -128,8 +145,9 @@
<body>
<div class="container mt-5">
<h1 class="site-header">Raven Scott Music</h1>
<div class="search-container">
<input type="text" class="search-input" placeholder="Search tracks or lyrics..." aria-label="Search tracks">
<input type="text" class="search-input" placeholder="Search tracks..." aria-label="Search tracks">
<div class="search-results" id="search-results"></div>
</div>
<div class="card text-center">
@ -144,7 +162,7 @@
<%- (track.description && track.description.trim()) ? track.description.replace(/\n/g, '<br>' )
: 'No description available for this track.' %>
<br>
<a href="/" class="btn btn-primary mt-3">Back</a>
<a id="back-button" class="btn btn-primary mt-3">Back</a>
</p>
</div>
</div>
@ -154,6 +172,18 @@
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
// Set back button href based on URL genre
const backButton = document.getElementById('back-button');
const pathSegments = window.location.pathname.split('/').filter(segment => segment);
const genre = pathSegments[0]; // URL is /:genre/track/:slug, so first segment is genre
if (genre) {
backButton.href = `/${genre}`;
console.log(`Set back button href to /${genre}`);
} else {
backButton.href = '/'; // Fallback to home page
console.warn('Genre not detected in URL, falling back to /');
}
// Search functionality
const searchInput = document.querySelector('.search-input');
const searchResults = document.getElementById('search-results');