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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>胶囊旅馆 — Realm</title>
<meta name="description" content="胶囊旅馆内部 — Capsule hotel interior">
<meta name="theme-color" content="#1a1a2e">
<link rel="stylesheet" href="realm.css">
</head>
<body>
<a class="skip-link" href="#scene-nav-hotel">跳过场景</a>
<main class="realm-folder">
<h1 class="visually-hidden">胶囊旅馆</h1>
<div class="folder-content">
<svg role="group" aria-labelledby="scene-hotel-title" viewBox="0 0 800 500">
<title id="scene-hotel-title">胶囊旅馆内部 — Capsule hotel interior with front desk and capsule rooms</title>
<!-- Interior wall background -->
<rect class="fill-wall-dark" x="0" y="0" width="800" height="500"/>
<!-- Arched ceiling (capsule dome shape) -->
<path class="fill-wall" d="M0 0 L0 100 Q200 30 400 60 Q600 30 800 100 L800 0 Z" aria-hidden="true"/>
<!-- Floor -->
<rect class="fill-ground" x="0" y="400" width="800" height="100"/>
<!-- Floor tile lines -->
<g class="scene-detail" aria-hidden="true">
<rect class="fill-wall-dark" x="0" y="400" width="800" height="2"/>
<rect class="fill-path" x="100" y="400" width="2" height="100"/>
<rect class="fill-path" x="200" y="400" width="2" height="100"/>
<rect class="fill-path" x="300" y="400" width="2" height="100"/>
<rect class="fill-path" x="400" y="400" width="2" height="100"/>
<rect class="fill-path" x="500" y="400" width="2" height="100"/>
<rect class="fill-path" x="600" y="400" width="2" height="100"/>
<rect class="fill-path" x="700" y="400" width="2" height="100"/>
</g>
<!-- Wall columns -->
<g aria-hidden="true">
<!-- Left column -->
<rect class="fill-wall" x="0" y="80" width="30" height="320"/>
<rect class="fill-wall-light" x="5" y="80" width="5" height="320"/>
<!-- Right column -->
<rect class="fill-wall" x="770" y="80" width="30" height="320"/>
<rect class="fill-wall-light" x="775" y="80" width="5" height="320"/>
</g>
<!-- Wall lamps (decorative) -->
<g class="scene-detail" aria-hidden="true">
<!-- Left lamp -->
<rect class="fill-wall-light" x="40" y="190" width="8" height="20"/>
<rect class="fill-accent-shape" x="38" y="182" width="12" height="12"/>
<rect class="fill-window-glow" x="30" y="172" width="28" height="14"/>
<!-- Right lamp -->
<rect class="fill-wall-light" x="752" y="190" width="8" height="20"/>
<rect class="fill-accent-shape" x="750" y="182" width="12" height="12"/>
<rect class="fill-window-glow" x="742" y="172" width="28" height="14"/>
</g>
<!-- === HOTSPOT: Exit (出口) === -->
<a class="hotspot" href="neighbors.html" aria-label="出口 — Return to neighbors">
<title>出口 — Return to neighbors</title>
<!-- Door frame -->
<path class="hotspot-shape" d="M70 400 L70 190 Q70 155 120 145 Q170 155 170 190 L170 400 Z"/>
<!-- Door surface -->
<rect class="fill-door" x="82" y="200" width="76" height="200"/>
<!-- Door handle -->
<circle class="fill-accent-shape" cx="145" cy="310" r="4"/>
<!-- Label -->
<text class="hotspot-label" x="120" y="135" text-anchor="middle">出口</text>
</a>
<!-- === HOTSPOT: Front Desk (前台) === -->
<a class="hotspot" href="#desk" aria-label="前台 — Front desk">
<title>前台 — Front desk</title>
<!-- Counter top -->
<rect class="hotspot-shape" x="230" y="300" width="180" height="20"/>
<!-- Counter body -->
<rect class="hotspot-shape" x="245" y="320" width="150" height="80"/>
<!-- Counter front detail -->
<rect class="fill-wall-light" x="253" y="330" width="134" height="60"/>
<!-- Sign above desk -->
<rect class="fill-accent-dim" x="275" y="250" width="90" height="18"/>
<!-- Bell on counter -->
<path class="fill-accent-shape" d="M310 300 L315 290 L320 300 Z" aria-hidden="true"/>
<!-- Label -->
<text class="hotspot-label" x="320" y="242" text-anchor="middle">前台</text>
</a>
<!-- === HOTSPOT: Room 101 (top capsule) === -->
<g id="room1">
<a class="hotspot" href="#room1" aria-label="101号房 — Room 101">
<title>101号房 — Room 101</title>
<!-- Capsule shell -->
<rect class="hotspot-shape" x="530" y="130" width="180" height="70" rx="12"/>
<!-- Capsule window -->
<rect class="fill-window" x="545" y="148" width="30" height="34"/>
<!-- Room number -->
<text class="fill-wall-dark" x="680" y="172" text-anchor="middle" font-family="var(--font-mono)" font-size="14">101</text>
</a>
<!-- Padlock -->
<g class="capsule-lock" aria-hidden="true">
<!-- Shackle (U-shape) -->
<path class="fill-wall-light" d="M615 154 L615 144 Q615 132 625 132 Q635 132 635 144 L635 154"/>
<!-- Lock body -->
<rect class="fill-wall" x="610" y="154" width="30" height="22" rx="3"/>
<!-- Keyhole -->
<circle class="fill-door" cx="625" cy="165" r="3"/>
</g>
<!-- "Not open" text (animated) -->
<text class="capsule-lock-text" x="625" y="124" text-anchor="middle">该房间还未开放</text>
</g>
<!-- === HOTSPOT: Room 102 (middle capsule) === -->
<g id="room2">
<a class="hotspot" href="#room2" aria-label="102号房 — Room 102">
<title>102号房 — Room 102</title>
<!-- Capsule shell -->
<rect class="hotspot-shape" x="530" y="220" width="180" height="70" rx="12"/>
<!-- Capsule window -->
<rect class="fill-window" x="545" y="238" width="30" height="34"/>
<!-- Room number -->
<text class="fill-wall-dark" x="680" y="262" text-anchor="middle" font-family="var(--font-mono)" font-size="14">102</text>
</a>
<!-- Padlock -->
<g class="capsule-lock" aria-hidden="true">
<!-- Shackle (U-shape) -->
<path class="fill-wall-light" d="M615 244 L615 234 Q615 222 625 222 Q635 222 635 234 L635 244"/>
<!-- Lock body -->
<rect class="fill-wall" x="610" y="244" width="30" height="22" rx="3"/>
<!-- Keyhole -->
<circle class="fill-door" cx="625" cy="255" r="3"/>
</g>
<!-- "Not open" text (animated) -->
<text class="capsule-lock-text" x="625" y="214" text-anchor="middle">该房间还未开放</text>
</g>
<!-- === HOTSPOT: Room 103 (bottom capsule) === -->
<g id="room3">
<a class="hotspot" href="#room3" aria-label="103号房 — Room 103">
<title>103号房 — Room 103</title>
<!-- Capsule shell -->
<rect class="hotspot-shape" x="530" y="310" width="180" height="70" rx="12"/>
<!-- Capsule window -->
<rect class="fill-window" x="545" y="328" width="30" height="34"/>
<!-- Room number -->
<text class="fill-wall-dark" x="680" y="352" text-anchor="middle" font-family="var(--font-mono)" font-size="14">103</text>
</a>
<!-- Padlock -->
<g class="capsule-lock" aria-hidden="true">
<!-- Shackle (U-shape) -->
<path class="fill-wall-light" d="M615 334 L615 324 Q615 312 625 312 Q635 312 635 324 L635 334"/>
<!-- Lock body -->
<rect class="fill-wall" x="610" y="334" width="30" height="22" rx="3"/>
<!-- Keyhole -->
<circle class="fill-door" cx="625" cy="345" r="3"/>
</g>
<!-- "Not open" text (animated) -->
<text class="capsule-lock-text" x="625" y="304" text-anchor="middle">该房间还未开放</text>
</g>
<!-- Divider between desk area and capsule area -->
<rect class="fill-wall" x="460" y="100" width="12" height="300" aria-hidden="true"/>
<rect class="fill-wall-light" x="464" y="100" width="4" height="300" aria-hidden="true"/>
</svg>
</div>
<nav id="scene-nav-hotel" class="scene-nav" aria-label="胶囊旅馆导航">
<ul class="scene-nav__list">
<li><a class="scene-nav__link" href="neighbors.html">出口 — 返回街道</a></li>
<li><a class="scene-nav__link" href="#desk">前台 — Gemini 介绍</a></li>
<li><span class="scene-nav__link scene-nav__link--locked">101号房（尚未开放）</span></li>
<li><span class="scene-nav__link scene-nav__link--locked">102号房（尚未开放）</span></li>
<li><span class="scene-nav__link scene-nav__link--locked">103号房（尚未开放）</span></li>
</ul>
</nav>
<!-- :target overlay panels -->
<div id="desk" class="capsule-panel" tabindex="-1">
<div class="scroll">
<div class="scroll__rod" aria-hidden="true"></div>
<div class="scroll__body">
<h1 class="scroll__title">前台</h1>
<h2>什么是 Gemini</h2>
<p>Gemini 是一种轻量级互联网协议，介于 Gopher 的极简和 HTTP 的臃肿之间。</p>
<p>它使用专用的 Gemtext 标记语言，只支持标题、列表、引用、链接等基础格式。链接必须独占一行，不能嵌入段落中。</p>
<h2>为什么推荐</h2>
<ul>
<li>强制 TLS 加密，无明文传输</li>
<li>没有 cookie、没有客户端脚本、没有追踪器、没有广告</li>
<li>纯文字体验，让你更贴近内容本身</li>
<li>单次请求-响应模型，连接即关闭，简洁高效</li>
</ul>
<h2>如何访问</h2>
<p>领主的胶囊地址：<code>gemini://cytrogen.icu</code></p>
<p>需要 Gemini 浏览器（如 Lagrange、Kristall）或 Emacs 的 Elpher 插件。</p>
</div>
<div class="scroll__rod" aria-hidden="true"></div>
</div>
<a href="#" class="capsule-panel__close">关闭</a>
</div>
</main>
</body>
</html>