Scriptorium/gallery.html at main · Eritrix/Scriptorium · GitHub

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
71
72
73
74
75
76
77
78
79
80
81
82
83
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Library — The Scriptorium</title>

  <!-- Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Lora:wght@400;700&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="styles.css">
  <script defer src="script.js"></script>
</head>
<body data-page="gallery">
  <header class="site-header" role="banner">
    <div class="header-inner container">
      <a class="logo" href="index.html" aria-label="The Scriptorium — home">
        <svg class="logo-svg" viewBox="0 0 64 64" width="44" height="44" aria-hidden="true">
          <g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
            <path d="M14 50c6-10 18-13 26-16 6 3 18 6 24 16" />
            <path d="M20 14c6-2 18-2 24 6" />
            <path d="M28 20l8-8" />
          </g>
        </svg>
        <span class="site-title">The Scriptorium</span>
      </a>

      <button id="nav-toggle" aria-expanded="false" aria-controls="primary-nav" class="hamburger" title="Open menu">
        <span></span><span></span><span></span>
      </button>

      <nav id="primary-nav" class="nav" role="navigation" aria-label="Main navigation">
        <ul>
          <li><a class="nav-link" href="index.html">Home</a></li>
          <li><a class="nav-link" href="gallery.html">Library</a></li>
          <li><a class="nav-link" href="manage.html">Manage</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main class="main container" role="main">
    <section class="controls" aria-label="Search and filters">
      <div class="search-wrap">
        <label for="search-input" class="visually-hidden">Search by title, author, or tag</label>
        <input id="search-input" class="input" placeholder="Search title, author, or tag…" aria-label="Search library"/>
      </div>

      <div class="sort-wrap">
        <label for="sort-select">Sort</label>
        <select id="sort-select" class="input" aria-label="Sort library">
          <option value="newest">Newest</option>
          <option value="highest">Highest Rated</option>
          <option value="title">Title (A–Z)</option>
        </select>
      </div>

      <div class="favorites-filter">
        <label><input id="show-favorites" type="checkbox"> Show favorites only</label>
      </div>
    </section>

    <section aria-labelledby="library-heading">
      <h2 id="library-heading" class="section-heading">Library</h2>
      <div id="library-grid" class="library-grid" aria-live="polite"></div>
    </section>
  </main>

  <!-- Modal for details -->
  <div id="detail-modal" class="modal" role="dialog" aria-modal="true" aria-hidden="true" aria-labelledby="modal-title">
    <div class="modal-panel" role="document" tabindex="-1">
      <button class="modal-close" id="modal-close" aria-label="Close details">✕</button>
      <div id="modal-content"></div>
    </div>
  </div>

  <footer class="site-footer" role="contentinfo">
    <div class="container">
      <small>© <span id="year"></span> The Scriptorium</small>
    </div>
  </footer>
</body>
</html>