Media Log page

layouts/media/list.html

@@ -0,0 +1,72 @@
+{{ define "main" }}
+<div class="media-page">
+  <canvas id="matrix-bg" class="matrix-background"></canvas>
+  <div class="media-container">
+    <div class="media-screen">
+      <div class="media-content">
+        <div class="media-header">
+          <pre>
+  ▄▄▄     ▄▄▄                          ▄▄▄
+   ███▄ ▄███            █▄            ▀██▀
+   ██ ▀█▀ ██            ██ ▀▀          ██               ▄▄
+   ██     ██   ▄█▀█▄ ▄████ ██ ▄▀▀█▄    ██      ▄███▄ ▄████
+   ██     ██   ██▄█▀ ██ ██ ██ ▄█▀██    ██      ██ ██ ██ ██
+ ▀██▀     ▀██▄▄▀█▄▄▄▄█▀███▄██▄▀█▄██   ████████▄▀███▀ ▀████
+                                                        ██
+                                                      ▀▀▀
+</pre>
+        </div>
+
+        <div class="media-layout">
+          <div class="media-list">
+            {{ range .Paginator.Pages }}
+              <div class="media-item" data-type="{{ index .Params.tags 0 }}">
+                <div class="media-cover">
+                  {{ with .Resources.GetMatch "cover.*" }}
+                    {{ $image := .Resize "320x webp q85" }}
+                    <img src="{{ $image.RelPermalink }}" alt="{{ $.Title }}" loading="lazy" width="{{ $image.Width }}" height="{{ $image.Height }}">
+                  {{ else }}
+                    <div class="no-cover">
+                      <span class="cover-placeholder">NO COVER</span>
+                    </div>
+                  {{ end }}
+                </div>
+                <div class="media-info">
+                  <div class="media-meta">
+                    <div class="media-type">{{ index .Params.tags 0 | upper }}</div>
+                    {{ if .Params.format }}
+                      <div class="media-format">{{ .Params.format | upper }}</div>
+                    {{ end }}
+                    <div class="media-date">{{ .Date.Format "02-01-2006" }}</div>
+                  </div>
+                  <h3 class="media-title">{{ .Title }}</h3>
+                  {{ if .Params.rating }}
+                    <div class="media-rating">
+                      <span class="rating-value">{{ .Params.rating }}</span>
+                      <span class="rating-max">/10</span>
+                    </div>
+                  {{ end }}
+                </div>
+              </div>
+            {{ end }}
+
+            {{ partial "pagination.html" .Paginator }}
+          </div>
+
+          <div class="lastfm-sidebar">
+            <div class="lastfm-header">
+              <h3>Recently Listened</h3>
+              <a href="https://www.last.fm/user/ritualplays" target="_blank" rel="noopener noreferrer" class="lastfm-profile-link">last.fm →</a>
+            </div>
+            <div class="lastfm-tracks" id="lastfm-tracks">
+              <div class="lastfm-loading">Loading tracks...</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script src="/js/pages/media.js"></script>
+{{ end }}