Hugging Face's logo

Spaces:
davanstrien
/
bpl-card-catalog
Running

App Files Community
bpl-card-catalog
File size: 2,618 Bytes
17a4402
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %}BPL Card Catalog Search{% endblock %}</title>
  <link rel="stylesheet" href="/static/style.css">
  <script src="https://unpkg.com/htmx.org@2.0.4"></script>
  <script>
    function rotateImage(btn) {
      var img = btn.previousElementSibling;
      var cur = parseInt(img.dataset.rotation || "0", 10);
      cur = (cur + 90) % 360;
      img.dataset.rotation = cur;
      img.style.transform = "rotate(" + cur + "deg)";
    }
  </script>
</head>
<body>
  <div class="lightbox" id="lightbox" onclick="closeLightbox()">
    <img id="lightbox-img" src="" alt="">
  </div>
  <script>
    function openLightbox(src, rotation) {
      var lb = document.getElementById('lightbox');
      var img = document.getElementById('lightbox-img');
      img.src = src;
      img.style.transform = rotation ? 'rotate(' + rotation + 'deg)' : '';
      lb.classList.add('active');
    }
    function closeLightbox() {
      document.getElementById('lightbox').classList.remove('active');
    }
    document.addEventListener('keydown', function(e) {
      if (e.key === 'Escape') closeLightbox();
    });
    // Make all card images clickable — works for dynamically loaded HTMX content too
    document.addEventListener('click', function(e) {
      var img = e.target.closest('.card-image, .spotlight-image');
      if (img) {
        e.preventDefault();
        openLightbox(img.src, img.dataset.rotation || 0);
      }
    });
  </script>
  <div class="container">
    <header>
      <a href="/" class="brand">BPL Card Catalog</a>
      <span class="subtitle">Rare Books &amp; Manuscripts</span>
      <a href="/drawers" class="header-link">Browse</a>
    </header>
    {% block content %}{% endblock %}
  </div>
  <footer class="site-footer">
    <div class="footer-content">
      <div class="footer-about">
        <p>Cards from the <a href="https://guides.bpl.org/rarebooks">Rare Books &amp; Manuscripts Department</a>,
        Boston Public Library, 700 Boylston St, Boston.</p>
        <p>Reading Room: Wed&ndash;Fri 9:30&ndash;4:30 · <a href="mailto:specialcollections@bpl.org">specialcollections@bpl.org</a></p>
      </div>
      <div class="footer-note">
        <p>These catalog records describe historical materials and may contain
        outdated or harmful language reflecting the time periods in which they were created.
        <a href="https://guides.bpl.org/rarebooks/book-search">Read more</a></p>
      </div>
    </div>
  </footer>
</body>
</html>