make playlist more better
This commit is contained in:
parent
67f08a3670
commit
fdb107f099
9 changed files with 672 additions and 851 deletions
42
themes/one-pager/layouts/partials/music-lightbox.html
Normal file
42
themes/one-pager/layouts/partials/music-lightbox.html
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<!-- Music Lightbox -->
|
||||
<div class="music-lightbox" id="musicLightbox">
|
||||
<div class="music-lightbox-background" id="musicLightboxBg"></div>
|
||||
<button class="music-lightbox-close" id="musicLightboxClose">✕</button>
|
||||
|
||||
<div class="music-lightbox-content">
|
||||
<div class="music-lightbox-album-art">
|
||||
<img id="musicLightboxImage" src="" alt="Album art">
|
||||
</div>
|
||||
|
||||
<div class="music-lightbox-info">
|
||||
<h2 id="musicLightboxTitle">Title</h2>
|
||||
<p class="music-lightbox-artist" id="musicLightboxArtist">Artist</p>
|
||||
<p class="music-lightbox-album-name" id="musicLightboxAlbum">Album</p>
|
||||
|
||||
<div class="music-lightbox-progress">
|
||||
<span class="music-lightbox-time" id="musicLightboxCurrentTime">0:00</span>
|
||||
<div class="music-lightbox-progress-bar" id="musicLightboxProgressBar">
|
||||
<div class="music-lightbox-progress-fill" id="musicLightboxProgressFill"></div>
|
||||
</div>
|
||||
<span class="music-lightbox-time" id="musicLightboxDuration">0:00</span>
|
||||
</div>
|
||||
|
||||
<div class="music-lightbox-controls">
|
||||
<button class="music-lightbox-control-btn" id="musicLightboxPrev">⏮</button>
|
||||
<button class="music-lightbox-control-btn play-btn" id="musicLightboxPlayBtn2">
|
||||
<span id="musicPlayIcon2">▶</span>
|
||||
</button>
|
||||
<button class="music-lightbox-control-btn" id="musicLightboxNext">⏭</button>
|
||||
</div>
|
||||
|
||||
<div class="music-lightbox-share-row">
|
||||
<button id="musicShareBtn" class="music-lightbox-share-btn" title="Share or interact with this track">
|
||||
<span class="share-icon">🔗</span>
|
||||
<span class="share-label">Share</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="music-lightbox-lyrics" id="musicLightboxLyrics" style="display: none;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
30
themes/one-pager/layouts/partials/nav-strip.html
Normal file
30
themes/one-pager/layouts/partials/nav-strip.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
{{/* Small persistent navigation strip for sub-pages (playlist list, playlist single, etc.) */}}
|
||||
{{ $displayName := "" }}
|
||||
{{ $picture := "" }}
|
||||
|
||||
{{ range hugo.Data.profile }}
|
||||
{{ range . }}
|
||||
{{ range .tags }}
|
||||
{{ if eq (index . 0) "display_name" }}{{ $displayName = index . 1 }}{{ end }}
|
||||
{{ if eq (index . 0) "picture" }}{{ $picture = index . 1 }}{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ if not $displayName }}
|
||||
{{ range hugo.Data.profile }}{{ range . }}{{ range .tags }}{{ if eq (index . 0) "name" }}{{ $displayName = index . 1 }}{{ end }}{{ end }}{{ end }}{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<nav class="nav-strip">
|
||||
<div class="nav-strip-inner">
|
||||
<a href="/" class="nav-strip-brand">
|
||||
{{ if $picture }}
|
||||
<img src="{{ $picture }}" alt="{{ $displayName }}" class="nav-strip-avatar">
|
||||
{{ end }}
|
||||
<span class="nav-strip-name">{{ $displayName | default "Home" }}</span>
|
||||
</a>
|
||||
<div class="nav-strip-links">
|
||||
<a href="/">🏠 Home</a>
|
||||
<a href="/playlists/">📀 Playlists</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
14
themes/one-pager/layouts/partials/photo-lightbox.html
Normal file
14
themes/one-pager/layouts/partials/photo-lightbox.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!-- Custom Lightbox -->
|
||||
<div class="custom-lightbox" id="customLightbox">
|
||||
<span class="custom-lightbox-close" id="lightboxClose">✕</span>
|
||||
<button class="custom-lightbox-prev" id="lightboxPrev">‹</button>
|
||||
<button class="custom-lightbox-next" id="lightboxNext">›</button>
|
||||
<div class="custom-lightbox-content">
|
||||
<img id="lightboxImage" src="" alt="">
|
||||
<div class="custom-lightbox-caption">
|
||||
<span id="lightboxCaption"></span>
|
||||
<span class="lightbox-meta" id="lightboxMeta"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="custom-lightbox-counter" id="lightboxCounter">1 / 1</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue