eytlebb.github.io/museum.html at main · EytleBB/eytlebb.github.io · 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
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>This is Eytle</title>
  <link rel="icon" href="images/favicon.png" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400&family=Hanken+Grotesk:wght@400;500&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="css/museum.css" />
  <script type="importmap">
  {
    "imports": {
      "three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js",
      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/"
    }
  }
  </script>
</head>
<body>
  <canvas id="scene-canvas"></canvas>

  <div class="reticle" id="reticle"></div>
  <div id="art-hint" aria-hidden="true">
    <span class="hint-icon">
      <svg class="eye-icon" viewBox="0 0 48 28" focusable="false">
        <path class="icon-stroke" d="M4 14c7.4-8.2 13.9-11 20-11s12.6 2.8 20 11c-7.4 8.2-13.9 11-20 11S11.4 22.2 4 14Z" />
        <circle class="icon-fill" cx="24" cy="14" r="4.4" />
      </svg>
    </span>
    <span class="hint-divider"></span>
    <span class="hint-icon">
      <svg class="mouse-icon" viewBox="0 0 32 44" focusable="false">
        <rect class="icon-stroke" x="5" y="3" width="22" height="38" rx="11" />
        <path class="icon-stroke soft" d="M16 3v13" />
        <path class="icon-fill" d="M8 14V9.5C8 6.5 10.5 4 13.5 4H16v13H8.8C8.3 16.1 8 15.1 8 14Z" />
      </svg>
    </span>
  </div>
  <div id="title"></div>
  <div id="hud"></div>
  <button id="exit-btn" title="退出">✕</button>

  <!-- start screen + pause menu (one element; reappears on Esc) -->
  <div id="enter">
    <h1 id="exhibition-title"></h1>
    <div class="sub" id="enter-sub"></div>
    <button class="go" id="enter-go" disabled></button>
    <div class="control-guide enter-guide" id="enter-keys" aria-label="操作说明"></div>
    <div class="prog" id="enter-prog"></div>
    <button class="back" id="enter-back"></button>
  </div>

  <script type="module" src="js/museum.js?v=gallery-controls-20260711"></script>
</body>
</html>