41 lines
1.7 KiB
Plaintext
41 lines
1.7 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title><%= genre.charAt(0).toUpperCase() + genre.slice(1) %> Tracks - Raven Scott Music</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background: #f4f4f4; }
|
|
h1 { text-align: center; }
|
|
.track { margin: 10px 0; }
|
|
.track-player { width: 100%; max-width: 600px; }
|
|
.track-player img { width: 100%; height: 166px; object-fit: cover; }
|
|
.back-link { display: block; text-align: center; margin: 10px 0; color: #007bff; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1><%= genre.charAt(0).toUpperCase() + genre.slice(1) %> Tracks</h1>
|
|
<% tracks.forEach(track => { %>
|
|
<div class="track">
|
|
<h3><%= track.title %></h3>
|
|
<div class="track-player" data-url="<%= track.url %>">
|
|
<img src="/placeholder.jpg" alt="<%= track.title %>">
|
|
</div>
|
|
</div>
|
|
<% }); %>
|
|
<a class="back-link" href="/">Back to Home</a>
|
|
<script>
|
|
const observer = new IntersectionObserver((entries, observer) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const container = entry.target;
|
|
const url = container.dataset.url;
|
|
container.innerHTML = `<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=${encodeURIComponent(url)}&show_comments=false&show_teaser=false&visual=false"></iframe>`;
|
|
observer.unobserve(container);
|
|
}
|
|
});
|
|
}, { rootMargin: '100px' });
|
|
document.querySelectorAll('.track-player').forEach(player => observer.observe(player));
|
|
</script>
|
|
</body>
|
|
</html> |