From 4f6779e9689f5b0af18500a9572f42b10b56bed7 Mon Sep 17 00:00:00 2001 From: sakrecoer Date: Sun, 16 Aug 2026 23:09:07 +0200 Subject: [PATCH] add playlist concept --- themes/one-pager/assets/css/style.css | 129 ++++--- themes/one-pager/layouts/playlists/list.html | 76 +++- .../one-pager/layouts/playlists/single.html | 341 +++++++++++------- 3 files changed, 363 insertions(+), 183 deletions(-) diff --git a/themes/one-pager/assets/css/style.css b/themes/one-pager/assets/css/style.css index 964c708..6c0eca3 100644 --- a/themes/one-pager/assets/css/style.css +++ b/themes/one-pager/assets/css/style.css @@ -121,25 +121,6 @@ body { opacity: 0.6; } -[data-theme="dark"] .main-header::before { - background: - /* Darker overlay for dark mode */ - linear-gradient( - to bottom, - rgba(0, 0, 0, 0.7) 0%, - rgba(0, 0, 0, 0.4) 40%, - rgba(0, 0, 0, 0.4) 60%, - rgba(0, 0, 0, 0.7) 100% - ), - repeating-linear-gradient( - 33deg, - transparent, - transparent 50px, - var(--accent-yellow) 50px, - var(--accent-yellow) 51px - ); - opacity: 0.7; -} /* Decorative '>' character */ .main-header::after { @@ -156,6 +137,59 @@ body { pointer-events: none; } +/* */ +/* */ +/* */ + +.playlist-header::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 0; + pointer-events: none; + background: + /* Dark overlay for readability */ + linear-gradient( + to bottom, + rgba(0, 0, 0, 0.5) 0%, + rgba(0, 0, 0, 0.25) 40%, + rgba(0, 0, 0, 0.25) 60%, + rgba(0, 0, 0, 0.5) 100% + ), + /* Cyberpunk pattern */ + repeating-linear-gradient( + 33deg, + transparent, + transparent 50px, + var(--accent-yellow) 50px, + var(--accent-yellow) 51px + ); + opacity: 0.6; +} + +/* Decorative '>' character */ +.playlist-header::after { + content: '>'; + position: absolute; + bottom: 40px; + right: 40px; + z-index: 1; + font-family: 'Poppins', sans-serif; + font-weight: 900; + font-size: 4rem; + color: var(--accent-y); + opacity: 0.15; + pointer-events: none; +} + + +/* */ + + + #bannerino { filter: grayscale(50%); position:absolute; @@ -2115,7 +2149,7 @@ button { .playlist-card:hover { transform: skewX(0deg) translate(-4px, -4px); - box-shadow: 12px 12px 0 var(--accent-yellow); + box-shadow: 12px 12px 0 var(--accent-grey); } .playlist-image { @@ -2149,7 +2183,7 @@ button { .playlist-track-count { display: inline-block; - background: var(--accent-yellow); + background: var(--accent-grey); color: var(--accent-black); padding: 0.2rem 0.8rem; font-size: 0.7rem; @@ -2308,7 +2342,7 @@ button { .playlist-card:hover { transform: skewX(0deg) translate(-4px, -4px); - box-shadow: 12px 12px 0 var(--accent-yellow); + box-shadow: 12px 12px 0 var(--accent-grey); } .playlist-link { @@ -2351,8 +2385,8 @@ button { .playlist-track-count { display: inline-block; - background: var(--accent-yellow); - color: var(--accent-black); + background: var(--accent-grey); + color: var(--bg-primary); padding: 0.2rem 0.8rem; font-size: 0.7rem; font-weight: 700; @@ -2372,7 +2406,7 @@ button { background: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 0.3s ease; - backdrop-filter: blur(4px); + backdrop-filter: blur(20px); } .playlist-card:hover .playlist-hover-overlay { @@ -2382,22 +2416,22 @@ button { .playlist-view-btn { padding: 0.8rem 2rem; background: var(--accent-yellow); - color: var(--accent-black); + color: var(--bg-primary); font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; - border: 2px solid var(--accent-grey); - transform: skewX(-33deg); + border-radius: 7px; transition: all 0.3s ease; + filter: drop-shadow(0 0 20px var(--accent-yellow)); } .playlist-view-btn:hover { - transform: skewX(-33deg) scale(1.1); - background: var(--accent-black); - color: var(--accent-yellow); - border-color: var(--accent-yellow); + background: var(--accent-yellow); + color: var(--bg-primary); + transition: all .3s ease; + filter: drop-shadow(0 0 20px var(--accent-yellow)); } /* ============================================ @@ -2458,7 +2492,7 @@ button { .playlist-meta span { font-size: 0.85rem; - color: var(--accent-grey); + color: var(--bg-primary); letter-spacing: 1px; } @@ -2484,7 +2518,7 @@ button { .playlist-track-item:hover { transform: skewX(0deg) translate(-2px, -2px); - box-shadow: 6px 6px 0 var(--accent-yellow); + box-shadow: 6px 6px 0 var(--accent-grey); } .track-number { @@ -2553,7 +2587,7 @@ button { } .track-player { - width: 150px; + width: 100%; border: 1px solid var(--accent-grey); border-radius: 4px; } @@ -2582,27 +2616,26 @@ button { } .playlist-play-all { - background: var(--accent-yellow); - color: var(--accent-black); - border: 2px solid var(--accent-grey); - padding: 1rem 3rem; - font-family: 'Poppins', sans-serif; + background: var(--bg-primary); + color: var(--accent-yellow) !important; + border: 2px solid var(--accent-yellow); + padding: .5rem 1.5rem; + font-family: poppins,sans-serif; font-weight: 700; - font-size: 1rem; + font-size: .7rem; letter-spacing: 3px; text-transform: uppercase; cursor: pointer; - transition: all 0.3s ease; - transform: skewX(-33deg); - box-shadow: 6px 6px 0 var(--accent-grey); + transition: all .3s ease; + filter: drop-shadow(0 0 20px var(--accent-yellow)); + animation: glow 3s infinite alternate; } .playlist-play-all:hover { - transform: skewX(-33deg) scale(1.05); - background: var(--accent-black); - color: var(--accent-yellow); + transform: scale(1.05); + background: var(--accent-yellow); + color: var(--bg-primary) !important; border-color: var(--accent-yellow); - box-shadow: 8px 8px 0 var(--accent-yellow); } /* Back link */ diff --git a/themes/one-pager/layouts/playlists/list.html b/themes/one-pager/layouts/playlists/list.html index 5394a76..ad285b8 100644 --- a/themes/one-pager/layouts/playlists/list.html +++ b/themes/one-pager/layouts/playlists/list.html @@ -1,6 +1,76 @@ +{{ define "header" }} + {{ $displayName := "" }} + {{ $name := "" }} + {{ $picture := "" }} + {{ $banner := "" }} + {{ $about := "" }} + {{ $website := "" }} + {{ $nip05 := "" }} + {{ $lud16 := "" }} + + {{ range hugo.Data.profile }} + {{ range . }} + {{ range .tags }} + {{ if eq (index . 0) "display_name" }} + {{ $displayName = index . 1 }} + {{ else if eq (index . 0) "name" }} + {{ $name = index . 1 }} + {{ else if eq (index . 0) "picture" }} + {{ $picture = index . 1 }} + {{ else if eq (index . 0) "banner" }} + {{ $banner = index . 1 }} + {{ else if eq (index . 0) "about" }} + {{ $about = index . 1 }} + {{ else if eq (index . 0) "website" }} + {{ $website = index . 1 }} + {{ else if eq (index . 0) "nip05" }} + {{ $nip05 = index . 1 }} + {{ else if eq (index . 0) "lud16" }} + {{ $lud16 = index . 1 }} + {{ end }} + {{ end }} + {{ end }} + {{ end }} + + + {{ if not $displayName }} + {{ $displayName = $name }} + {{ end }} + + + +
+ + {{ if $banner }} +
+ +
+ {{ end }} + + + + +
+ +
+
+ {{ if $picture }} + {{ $displayName }}'s profile picture' + {{ end }} + +
+
+ +
+ + + +{{ end }} + {{ define "main" }}
-

Playlists

+ +

Playlists

Explore all my curated playlists from the Nostr network

@@ -27,11 +97,11 @@
- ▶ View Playlist + ▶ Listen
{{ end }}
-{{ end }} \ No newline at end of file +{{ end }} diff --git a/themes/one-pager/layouts/playlists/single.html b/themes/one-pager/layouts/playlists/single.html index 9c2a107..ddc2ed0 100644 --- a/themes/one-pager/layouts/playlists/single.html +++ b/themes/one-pager/layouts/playlists/single.html @@ -1,137 +1,214 @@ +{{ define "header" }} + + {{ $displayName := "" }} + {{ $name := "" }} + {{ $picture := "" }} + {{ $banner := "" }} + {{ $about := "" }} + {{ $website := "" }} + {{ $nip05 := "" }} + {{ $lud16 := "" }} + + {{ range hugo.Data.profile }} + {{ range . }} + {{ range .tags }} + {{ if eq (index . 0) "display_name" }} + {{ $displayName = index . 1 }} + {{ else if eq (index . 0) "name" }} + {{ $name = index . 1 }} + {{ else if eq (index . 0) "picture" }} + {{ $picture = index . 1 }} + {{ else if eq (index . 0) "banner" }} + {{ $banner = index . 1 }} + {{ else if eq (index . 0) "about" }} + {{ $about = index . 1 }} + {{ else if eq (index . 0) "website" }} + {{ $website = index . 1 }} + {{ else if eq (index . 0) "nip05" }} + {{ $nip05 = index . 1 }} + {{ else if eq (index . 0) "lud16" }} + {{ $lud16 = index . 1 }} + {{ end }} + {{ end }} + {{ end }} + {{ end }} + + + {{ if not $displayName }} + {{ $displayName = $name }} + {{ end }} + + + + +
+ + {{ if $banner }} +
+ +
+ {{ end }} + + + + +
+ +
+
+ {{ if $picture }} + {{ $displayName }}'s profile picture' + {{ end }} + +
+
+ +
+{{ end }} + + + {{ define "main" }} -{{ $name := .Title }} -{{ $description := .Params.playlist_description | default "" }} -{{ $image := .Params.playlist_image | default "" }} -{{ $tracks := .Params.playlist_tracks | default slice }} -{{ $created_at := .Params.playlist_created_at | default 0 }} + {{ $name := .Title }} + {{ $description := .Params.playlist_description | default "" }} + {{ $image := .Params.playlist_image | default "" }} + {{ $tracks := .Params.playlist_tracks | default slice }} + {{ $created_at := .Params.playlist_created_at | default 0 }} -
-
-
- {{ if $image }} - {{ $name }} - {{ end }} -
-

{{ $name }}

- {{ if $description }} -

{{ $description }}

- {{ end }} -
- 🎵 {{ len $tracks }} tracks - {{ if $created_at }} - 📅 {{ dateFormat "January 2, 2006" (time $created_at) }} - {{ end }} -
-
-
-
- -
- {{ if $tracks }} - {{ range $index, $track := $tracks }} -
-
{{ add $index 1 }}
- {{ if $track.image }} - {{ $track.title }} - {{ end }} -
- {{ $track.title | default "Untitled" }} - {{ $track.artist | default "Unknown Artist" }} - {{ if $track.album }} - {{ $track.album }} - {{ end }} - {{ if $track.duration }} - {{ $track.duration }}s - {{ end }} - {{ if $track.tags }} -
- {{ range $track.tags }} - {{ . }} - {{ end }} -
- {{ end }} -
-
- {{ if $track.url }} - - {{ end }} - {{ if $track.id }} - - {{ end }} -
-
- {{ end }} - {{ else }} -

No tracks found for this playlist.

- {{ end }} -
- - {{ if $tracks }} -
- -
- {{ end }} - -
- ← Back to All Playlists -
-
+ -function fallbackCopy(url) { - const textArea = document.createElement('textarea'); - textArea.value = url; - document.body.appendChild(textArea); - textArea.select(); - document.execCommand('copy'); - document.body.removeChild(textArea); - const btn = event.target.closest('.track-share-btn'); - const originalText = btn.innerHTML; - btn.innerHTML = '✓'; - setTimeout(() => { - btn.innerHTML = originalText; - }, 2000); -} +
+
+
+ {{ if $image }} + {{ $name }} + {{ end }} +
+

{{ $name }}

+ {{ if $description }} +

{{ $description }}

+ {{ end }} +
+ 🎵 {{ len $tracks }} tracks + {{ if $created_at }} + 📅 {{ dateFormat "January 2, 2006" (time $created_at) }} + {{ end }} +
+
+
+
-function playAllTracks() { - const players = document.querySelectorAll('.track-player'); - if (players.length === 0) return; - - let current = 0; - function playNext() { - if (current >= players.length) return; - const player = players[current]; - player.play(); - player.onended = function() { - current++; - playNext(); - }; - } - playNext(); -} - -{{ end }} \ No newline at end of file +
+ {{ if $tracks }} + {{ range $index, $track := $tracks }} +
+
{{ add $index 1 }}
+ {{ if $track.image }} + {{ $track.title }} + {{ end }} +
+ {{ $track.title | default "Untitled" }} + {{ $track.artist | default "Unknown Artist" }} + {{ if $track.album }} + {{ $track.album }} + {{ end }} + {{ if $track.duration }} + {{ $track.duration }}s + {{ end }} + {{ if $track.tags }} +
+ {{ range $track.tags }} + {{ . }} + {{ end }} +
+ {{ end }} +
+
+ {{ if $track.url }} + + {{ end }} + {{ if $track.id }} + + {{ end }} +
+
+ {{ end }} + {{ else }} +

No tracks found for this playlist.

+ {{ end }} +
+ + {{ if $tracks }} +
+ +
+ {{ end }} + +
+ ← Back to All Playlists +
+
+ + +{{ end }}