From c75beda743dfd6af63f512e928d0889d9ead3973 Mon Sep 17 00:00:00 2001
From: Ken <ken@jots.org>
Date: Sat, 9 May 2026 04:41:03 +0000
Subject: =?UTF-8?q?Initial=20commit=20=E2=80=94=20Albumen=20photo=20album?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ruby/Sinatra self-hosted photo album with directory hierarchy,
per-photo captions and visibility, lightbox, slideshow, admin UI,
and Let's Encrypt HTTPS via Apache reverse proxy on prouter.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 views/album.erb | 99 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 99 insertions(+)
 create mode 100644 views/album.erb

(limited to 'views/album.erb')

diff --git a/views/album.erb b/views/album.erb
new file mode 100644
index 0000000..077e119
--- /dev/null
+++ b/views/album.erb
@@ -0,0 +1,99 @@
+<div class="album-header">
+  <% unless @crumbs.empty? %>
+  <nav class="breadcrumbs">
+    <a href="/browse/">Home</a>
+    <% @crumbs.each do |c| %>
+      <span class="sep">›</span>
+      <a href="/browse/<%= c[:path] %>"><%= c[:name] %></a>
+    <% end %>
+  </nav>
+  <% end %>
+  <h1><%= @title %></h1>
+  <% if @desc %><p class="album-desc"><%= @desc %></p><% end %>
+  <div class="album-actions">
+    <% if @entries.any? { |e| %i[image video].include?(e[:type]) } %>
+      <a href="/slideshow/<%= @rel %>" class="btn">Slideshow</a>
+    <% end %>
+  </div>
+</div>
+
+<% unless @albums.empty? %>
+<section class="grid-section">
+  <% if @entries.any? %><h2 class="section-label">Albums</h2><% end %>
+  <div class="grid">
+    <% @albums.each do |a| %>
+      <% href = @rel.empty? ? "/browse/#{a[:name]}" : "/browse/#{@rel}/#{a[:name]}" %>
+      <a href="<%= href %>" class="card album-card">
+        <div class="thumb-wrap">
+          <% cover_rel = @rel.empty? ? "#{a[:name]}/#{a[:cover]}" : "#{@rel}/#{a[:name]}/#{a[:cover]}" %>
+          <% if a[:cover] %>
+            <img src="/thumb/<%= cover_rel %>" alt="<%= a[:title] %>" loading="lazy">
+          <% else %>
+            <div class="thumb-placeholder">📁</div>
+          <% end %>
+        </div>
+        <div class="album-label"><%= a[:title] %></div>
+      </a>
+    <% end %>
+  </div>
+</section>
+<% end %>
+
+<% unless @entries.empty? %>
+<section class="grid-section">
+  <% if @albums.any? %><h2 class="section-label">Photos &amp; Videos</h2><% end %>
+  <div class="grid" id="photo-grid">
+    <% @entries.each_with_index do |e, i| %>
+      <% file_rel = @rel.empty? ? e[:name] : "#{@rel}/#{e[:name]}" %>
+      <div class="card media-card<%= ' hidden-item' unless e[:visible] %>"
+           data-index="<%= i %>"
+           data-type="<%= e[:type] %>"
+           data-src="/media/<%= file_rel %>"
+           data-title="<%= ERB::Util.html_escape(e[:title]) %>"
+           data-caption="<%= ERB::Util.html_escape(e[:caption].to_s) %>"
+           onclick="openLightbox(<%= i %>)">
+        <div class="thumb-wrap">
+          <img src="/thumb/<%= file_rel %>" alt="<%= ERB::Util.html_escape(e[:title]) %>" loading="lazy">
+          <% if e[:type] == :video %><span class="type-badge video-badge">▶</span><% end %>
+          <% if e[:type] == :audio %><span class="type-badge audio-badge">♪</span><% end %>
+        </div>
+        <% if e[:caption] %>
+        <div class="card-meta"><p class="card-caption"><%= e[:caption] %></p></div>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+</section>
+<% end %>
+
+<% if @albums.empty? && @entries.empty? %>
+  <p class="empty-album">This album is empty.</p>
+<% end %>
+
+<div id="lightbox" class="lightbox hidden" role="dialog" aria-modal="true">
+  <button class="lb-btn lb-close" onclick="closeLightbox()" aria-label="Close">✕</button>
+  <div class="lb-stage" onclick="closeLightbox()">
+    <div class="lb-media" onclick="event.stopPropagation()">
+      <img    id="lb-img"   src="" alt="" class="hidden">
+      <video  id="lb-video" controls class="hidden"></video>
+      <audio  id="lb-audio" controls class="hidden"></audio>
+      <button class="lb-btn lb-prev" onclick="lbNav(-1)" aria-label="Previous">‹</button>
+      <button class="lb-btn lb-next" onclick="lbNav(1)"  aria-label="Next">›</button>
+    </div>
+  </div>
+  <div class="lb-caption-bar">
+    <span id="lb-title"></span>
+    <span id="lb-caption"></span>
+    <a id="lb-download" href="" download class="btn btn-sm lb-action">↓ Original</a>
+    <button id="lb-copylink" onclick="lbCopyLink()" class="btn btn-sm lb-action">⧉ Copy link</button>
+    <span id="lb-counter"></span>
+  </div>
+</div>
+
+<script>
+const ENTRIES = <%= @entries.map { |e|
+  file_rel = @rel.empty? ? e[:name] : "#{@rel}/#{e[:name]}"
+  e.merge(src: "/media/#{file_rel}")
+}.to_json %>;
+</script>
+<script src="/js/album.js"></script>
-- 
cgit v1.2.3