TheseusGallery/index.html at master · zka26/TheseusGallery · 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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Gallery | Theseus Incorporated</title>

    <link rel="icon" href="assets/logo.png" type="image/png" />
    <link rel="apple-touch-icon" href="assets/logo.png" />

    <link rel="stylesheet" href="assets/styles.css" />
  </head>

  <body>
    <main>
      <header>
        <img class="logo" src="assets/new-yellow.png" alt="Theseus Aegis" />
        <h1>Gallery</h1>
      </header>

      <a id="slideshowLink" class="slideshow" href="#" aria-label="Open current slideshow image">
        <div class="slideshow__layer slideshow__layer--a" id="slideshowA"></div>
        <div class="slideshow__layer slideshow__layer--b" id="slideshowB"></div>

        <div class="slideshow__caption" aria-hidden="true">
          <div id="slideshowMissionName" class="slideshow__captionTitle"></div>
          <div id="slideshowMissionMeta" class="slideshow__captionMeta"></div>
        </div>
      </a>

      <a
        id="backHome"
        href="https://www.theseus-aegis.com/"
        target="_self"
        rel="noopener"
      >Back to Homepage</a>

      <label for="missionSearch">Search</label>
      <input id="missionSearch" type="search" placeholder="Filter by Name..." autocomplete="off" />

      <button
        id="viewToggle"
        type="button"
        aria-label="Toggle list/grid view"
        title="Toggle list/grid view"
      >
        <span class="viewToggle__icon" aria-hidden="true"></span>
      </button>

      <div id="status" role="status" aria-live="polite"></div>
      <ul id="missionList"></ul>
    </main>

    <footer class="siteFooter" aria-label="Footer">
      <span class="siteFooter__brand">Theseus Incorporated</span>
      <span class="siteFooter__divider" aria-hidden="true">|</span>
      <a class="siteFooter__link" href="https://www.theseus-aegis.com/">Homepage</a>
    </footer>

    <dialog id="lightbox" class="lightbox" aria-label="Image viewer">
      <div class="lightbox__frame">
        <button id="lightboxClose" class="lightbox__close" type="button" aria-label="Close (Esc)">&times;</button>

        <div class="lightbox__header">
          <div id="lightboxTitle" class="lightbox__title"></div>
          <div id="lightboxSubtitle" class="lightbox__subtitle"></div>
        </div>

        <div class="lightbox__body">
          <button id="lightboxPrev" class="lightbox__nav" type="button" aria-label="Previous (Left)">&lt;</button>

          <figure class="lightbox__figure">
            <img id="lightboxImg" class="lightbox__img" alt="" />
            <figcaption id="lightboxCaption" class="lightbox__caption"></figcaption>
          </figure>

          <button id="lightboxNext" class="lightbox__nav" type="button" aria-label="Next (Right)">&gt;</button>
        </div>

        <div id="lightboxThumbs" class="lightbox__thumbs" aria-label="Thumbnails"></div>
      </div>
    </dialog>

    <dialog id="zoomModal" class="zoomModal" aria-label="Full screen image viewer">
      <div class="zoomModal__frame">
        <button id="zoomClose" class="zoomModal__close" type="button" aria-label="Close">&times;</button>

        <div id="zoomStage" class="zoomModal__stage" tabindex="0">
          <img id="zoomImg" class="zoomModal__img" alt="" />
        </div>

        <div class="zoomModal__hint" aria-hidden="true">
          Scroll to zoom · Drag to pan
        </div>
      </div>
    </dialog>

    <script src="assets/app.js"></script>
  </body>
</html>