gallery/index.html at main · CoreJa/gallery · 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
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <meta name="theme-color" content="#0f172a">
    <meta name="description" content="一个支持触摸缩放的静态图片画廊">
    <title>图片画廊</title>
  </head>
  <body>
    <main class="page-shell">
      <header class="site-header">
        <div>
          <p class="eyebrow">IMAGE GALLERY</p>
          <h1>图片画廊</h1>
          <p class="page-description">点击图片查看大图，手机上可双指缩放和拖动。</p>
        </div>
        <p id="galleryCount" class="gallery-count" aria-live="polite">正在读取图片…</p>
      </header>

      <section id="gallery" class="gallery" aria-label="按目录分组的图片列表"></section>

      <section id="emptyState" class="empty-state" hidden>
        <h2>还没有图片</h2>
        <p>把图片放入 <code>img/</code>，然后运行项目的生成脚本更新 <code>metadata.json</code>。</p>
        <pre><code>npm run generate:metadata</code></pre>
      </section>
    </main>

    <div id="viewer" class="viewer" role="dialog" aria-modal="true" aria-label="图片预览" hidden>
      <button id="viewerClose" class="viewer-button viewer-close" type="button" aria-label="关闭预览">×</button>

      <div class="viewer-toolbar" role="toolbar" aria-label="图片操作">
        <button id="zoomOut" class="viewer-button" type="button" aria-label="缩小">−</button>
        <span id="zoomLabel" class="zoom-label">100%</span>
        <button id="zoomIn" class="viewer-button" type="button" aria-label="放大">＋</button>
      </div>

      <button id="viewerPrevious" class="viewer-button viewer-nav viewer-previous" type="button" aria-label="上一张">
        <svg class="viewer-nav-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <path d="M15.5 5.5 8.5 12l7 6.5"></path>
        </svg>
      </button>
      <div id="viewerStage" class="viewer-stage">
        <img id="viewerImage" alt="" draggable="false">
      </div>
      <button id="viewerNext" class="viewer-button viewer-nav viewer-next" type="button" aria-label="下一张">
        <svg class="viewer-nav-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <path d="M8.5 5.5 15.5 12l-7 6.5"></path>
        </svg>
      </button>

      <div class="viewer-footer">
        <div class="viewer-image-info" aria-live="polite">
          <strong id="viewerImageName" class="viewer-image-name"></strong>
          <span id="viewerImageResolution" class="viewer-image-resolution">读取分辨率…</span>
        </div>
        <div class="viewer-actions" role="toolbar" aria-label="缩放级别">
          <button id="zoomReset" class="viewer-button viewer-reset" type="button" aria-label="恢复到适应窗口">适应窗口</button>
          <button id="zoomOneToOne" class="viewer-button viewer-one-to-one" type="button" aria-label="按原始像素显示">1:1</button>
        </div>
      </div>

      <p class="viewer-hint">双指缩放 · 拖动图片 · 双击切换缩放</p>
    </div>

    <noscript>
      <p class="noscript-message">此页面需要启用 JavaScript 才能读取图片清单。</p>
    </noscript>
  </body>
</html>