homepage/gallery.html at main · Hima-Server/homepage · 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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>暇人鯖 - ギャラリー</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <link rel="stylesheet" href="/style.css" type="text/css">
    <link rel="stylesheet" href="/styles/gallery.css" type="text/css">
  </head>
  <body>
    <div id="pagetop"></div>
    <div class="main-content">
      <h3 id="is-javascript-enabled">このメッセージが消えずに表示されている場合、ページが正しく表示されていません。JavaScriptを有効にしてください。</h3>
      <h1>ギャラリー</h1>
      <p>暇人鯖で使われている・使われていた画像を展示しています。</p>
      <p>画像の権利はすべて、暇人鯖及び作成者に帰属します。<br>無断使用を禁止します。</p>
      <div id="gallery-links"></div>
      <section id="logos">
        <h2>ロゴ</h2>
        <img src="/img/logo.png">
      </section>
      <section id="icons">
        <h2>アイコン</h2>
        <img src="/img/icon.gif">
        <img src="/img/icon.png">
        <img src="/img/icon-otoneko.png">
        <img src="/img/icon-koirdsuzu.png">
        <img src="/img/icon-remilia.png">
        <img src="/img/icon-flandle.png">

        <h3>過去のバージョンです。</h3>
        <img src="/img/old/icon.gif">
      </section>
      <section id="banners">
        <h2>バナー</h2>
        <img src="/img/banner.gif">
        <img src="/img/server-banner.png">
        <img src="/img/invite.png">

        <h3>過去のバージョンです。</h3>
        <img src="/img/old/banner.gif">
        <img src="/img/old/server-banner-mc2.png">
        <img src="/img/old/server-banner-mc.png">
        <img src="/img/old/server-banner.gif">
      </section>
      <section id="others">
        <h2>その他</h2>
        <h3>ウェルカムカードです。</h3>
        <img src="/img/assets/welcome-card.png">

        <h3>イベントポスターや描いてくださったイラストです。</h3>
        <img src="/img/gallery/2025_event_amongus.png">
        <img src="/img/gallery/2025_newyear.png">
        <img src="/img/gallery/2024_event_newyearpre.png">
        <img src="/img/gallery/2024_xmas.png">
        <img src="/img/gallery/2024_xmas-notext.png">
        <img src="/img/gallery/2024_event_summer.png">
        <img src="/img/gallery/poster.png">
        <img src="/img/gallery/first.png">

        <h3>上部のランダムに表示される画像全種です。</h3>
        <img src="/img/top-backgrounds/11.png">
        <img src="/img/top-backgrounds/10.png">
        <img src="/img/top-backgrounds/9.png">
        <img src="/img/top-backgrounds/8.png">
        <img src="/img/top-backgrounds/7.png">
        <img src="/img/top-backgrounds/6.png">
        <img src="/img/top-backgrounds/5.png">
        <img src="/img/top-backgrounds/4.png">
        <img src="/img/top-backgrounds/3.png">
        <img src="/img/top-backgrounds/2.png">
        <img src="/img/top-backgrounds/1.png">
        <img src="/img/top-backgrounds/0.png">
      </section>
    </div>
    <script src="/scripts/functions.js"></script>
    <script src="/scripts/script.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        const mainContent = document.querySelector(".main-content");
        const overlay = document.createElement("div");
        overlay.classList.add("image-overlay");
        overlay.innerHTML = "<img src='' alt='拡大画像'>";
        document.body.appendChild(overlay);

        const overlayImage = overlay.querySelector("img");

        mainContent.addEventListener("click", (event) => {
          if (event.target.tagName === "IMG") {
            const imgSrc = event.target.src;

            const tempImage = new Image();
            tempImage.src = imgSrc;
            tempImage.onload = () => {
              const screenWidth = window.innerWidth * 0.9;
              const screenHeight = window.innerHeight * 0.9;

              if (tempImage.width / tempImage.height > screenWidth / screenHeight) {
                overlayImage.style.width = `${screenWidth}px`;
                overlayImage.style.height = "auto";
              } else {
                overlayImage.style.height = `${screenHeight}px`;
                overlayImage.style.width = "auto";
              }

              overlayImage.src = imgSrc;
              overlay.style.display = "flex";
            };
          }
        });

        overlay.addEventListener("click", () => {
          overlay.style.display = "none";
          overlayImage.src = "";
        });
      });
    </script>
  </body>
</html>