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
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="zh" data-horror-surface="museum">
<head>
  <script src="js/site-horror-state.js?v=aftereffects-20261003"></script>
  <script src="js/site-horror-interaction.js?v=museum-release-20260927"></script>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  <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?v=museum-release-20260927" />
  <link rel="stylesheet" href="css/museum-guestbook.css?v=museum-release-20260927" />
  <link rel="stylesheet" href="css/museum-touch.css?v=museum-release-20260927" />
  <link rel="stylesheet" href="css/museum-horror.css?v=museum-release-20260927" />
  <script type="importmap">
  {
    "imports": {
      "three": "https://cdn.jsdelivr.net/npm/three@0.186.0/build/three.module.js",
      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.186.0/examples/jsm/"
    }
  }
  </script>
</head>
<body>
  <canvas id="scene-canvas"></canvas>
  <canvas id="knife-canvas" aria-hidden="true"></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">
    <div class="enter-masthead" aria-hidden="true">
      <span class="exhibition-signature">
        <svg class="gallery-emblem" viewBox="0 0 42 48" fill="none" focusable="false">
          <path d="M5 44V22a16 16 0 0 1 32 0v22M11 44V22a10 10 0 0 1 20 0v22M17 44V22a4 4 0 0 1 8 0v22M1 44h40" />
          <path class="emblem-star" d="M21 0v8M17 4h8" />
        </svg>
        <span>This is Eytle</span>
      </span>
      <span class="masthead-line"></span>
    </div>
    <div class="enter-copy">
      <h1 id="exhibition-title"></h1>
      <div class="sub" id="enter-sub"></div>
      <div class="enter-action">
        <button class="go" id="enter-go" disabled></button>
        <div class="prog" id="enter-prog" role="status" aria-live="polite"></div>
      </div>
      <div class="enter-options">
        <button type="button" class="touch-button" id="enter-fullscreen" aria-pressed="false" hidden>全屏</button>
        <a class="gallery-fallback" id="gallery-fallback" href="/gallery">浏览图片</a>
      </div>
      <p id="fullscreen-status" role="status" aria-live="polite"></p>
      <p id="runtime-status" role="status" aria-live="polite"></p>
    </div>
    <details id="museum-settings">
      <summary id="settings-title">操作设置</summary>
      <div class="settings-fields">
        <div class="setting-row">
          <label for="look-sensitivity" id="sensitivity-label">鼠标灵敏度</label>
          <div class="sensitivity-control">
            <input type="range" id="look-sensitivity" min="0.3" max="3" step="0.1" value="1" />
            <output id="sensitivity-value" for="look-sensitivity">1.0</output>
          </div>
        </div>
        <div class="setting-row">
          <label for="frame-limit" id="frame-limit-label">帧率上限</label>
          <select id="frame-limit">
            <option value="60" selected>60 FPS</option>
            <option value="90">90 FPS</option>
            <option value="120">120 FPS</option>
          </select>
        </div>
      </div>
    </details>
    <div class="control-guide enter-guide" id="enter-keys" aria-label="操作说明"></div>
    <button class="back" id="enter-back"></button>
  </div>

  <script type="module">
    import('./js/museum.js?v=museum-horror-intensity-20261003').catch(() => {
      let lang = 'zh';
      try { lang = localStorage.getItem('lang') || 'zh'; } catch {}
      const copy = lang === 'en'
        ? ['Pictures At An Exhibition', 'The exhibition could not load. Reload or browse the pictures below.', 'Browse pictures']
        : lang === 'ko'
        ? ['전람회의 그림', '전시를 불러오지 못했습니다. 새로고침하거나 아래에서 그림을 둘러보세요.', '그림 둘러보기']
        : ['图画展览会', '展馆加载失败，请刷新或选择浏览图片。', '浏览图片'];
      document.documentElement.lang = ['en', 'ko'].includes(lang) ? lang : 'zh';
      document.getElementById('exhibition-title').textContent = copy[0];
      document.getElementById('enter-sub').textContent = copy[1];
      document.getElementById('gallery-fallback').textContent = copy[2];
      document.getElementById('enter-prog').textContent = '';
      document.getElementById('enter-go').hidden = true;
    });
  </script>
</body>
</html>