~cytrogen/realm

realm/canon.html -rw-r--r-- 17.5 KiB
f6d51824 — Cytrogen 更新联系方式 5 days ago 
                                                                                
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
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327

<!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="典籍室 — Canon and sources that nourish the Realm">
	<meta name="theme-color" content="#1a1a2e">
	<link rel="stylesheet" href="realm.css">
</head>
<body>

	<a class="skip-link" href="#scene-nav-canon">跳过场景</a>

	<main class="realm-folder">
		<h1 class="visually-hidden">典籍室</h1>

		<div class="folder-content">

			<svg role="group" aria-labelledby="scene-canon-title" viewBox="0 0 800 500">
				<title id="scene-canon-title">典籍室 — 古典书斋，内有书架、地图、留声机、棋盘与旅行日志</title>

				<!-- ============================
				     1. Background
				     ============================ -->
				<rect class="fill-wall-dark" x="0" y="0" width="800" height="500"/>

				<!-- ============================
				     2. Far wall + ceiling
				     ============================ -->
				<polygon class="fill-wall" points="0,0 800,0 720,50 720,370 80,370 80,50" aria-hidden="true"/>

				<!-- ============================
				     3. Far wall decorative lines
				     ============================ -->
				<!-- Crown molding -->
				<polygon class="fill-wall-light" points="80,50 720,50 720,56 80,56" aria-hidden="true"/>
				<!-- Baseboard -->
				<polygon class="fill-wall-dark" points="80,360 720,360 720,370 80,370" aria-hidden="true"/>

				<!-- ============================
				     4. Left side wall + highlight
				     ============================ -->
				<polygon class="fill-wall-dark" points="0,0 80,50 80,370 0,500" aria-hidden="true"/>
				<polygon class="fill-wall" points="80,50 72,54 72,366 80,370" aria-hidden="true"/>

				<!-- ============================
				     5. Right side wall + highlight
				     ============================ -->
				<polygon class="fill-wall-dark" points="800,0 720,50 720,370 800,500" aria-hidden="true"/>
				<polygon class="fill-wall" points="720,50 728,54 728,366 720,370" aria-hidden="true"/>

				<!-- ============================
				     6. Ground + perspective grid
				     ============================ -->
				<polygon class="fill-ground" points="80,370 720,370 800,500 0,500" aria-hidden="true"/>
				<g class="scene-detail" aria-hidden="true">
					<!-- Horizontal lines -->
					<polygon class="fill-path" points="80,370 720,370 718,372 82,372"/>
					<polygon class="fill-path" points="56,400 744,400 743,402 57,402"/>
					<polygon class="fill-path" points="30,430 770,430 769,432 31,432"/>
					<polygon class="fill-path" points="0,460 800,460 800,462 0,462"/>
					<!-- Converging vertical lines -->
					<polygon class="fill-path" points="200,370 198,370 140,500 142,500"/>
					<polygon class="fill-path" points="310,370 308,370 260,500 262,500"/>
					<polygon class="fill-path" points="400,370 398,370 400,500 398,500"/>
					<polygon class="fill-path" points="490,370 492,370 540,500 538,500"/>
					<polygon class="fill-path" points="600,370 602,370 660,500 658,500"/>
				</g>

				<!-- ============================
				     7. Scene title plaque (far wall upper center)
				     ============================ -->
				<g aria-hidden="true">
					<rect class="fill-wall-dark" x="280" y="64" width="240" height="24" rx="2"/>
					<rect class="fill-wall-light" x="284" y="67" width="232" height="18" rx="1"/>
				</g>
				<text class="scene-title" x="400" y="81" text-anchor="middle">此处记载着滋养这片领地的源头</text>

				<!-- ============================
				     8. Torches (decorative)
				     ============================ -->
				<g class="scene-detail" aria-hidden="true">
					<!-- Left wall torch -->
					<rect class="fill-wall-light" x="80" y="260" width="6" height="18"/>
					<rect class="fill-accent-shape" x="78" y="252" width="10" height="10"/>
					<rect class="fill-window-glow" x="73" y="244" width="20" height="12"/>
					<!-- Right wall torch -->
					<rect class="fill-wall-light" x="714" y="260" width="6" height="18"/>
					<rect class="fill-accent-shape" x="712" y="252" width="10" height="10"/>
					<rect class="fill-window-glow" x="707" y="244" width="20" height="12"/>
				</g>

				<!-- ============================
				     9. Reading table (decorative, center ground)
				     ============================ -->
				<g aria-hidden="true">
					<!-- Table top -->
					<rect class="fill-wall" x="340" y="378" width="90" height="8" rx="2"/>
					<!-- Table legs -->
					<rect class="fill-wall-dark" x="350" y="386" width="6" height="38"/>
					<rect class="fill-wall-dark" x="414" y="386" width="6" height="38"/>
					<!-- Open book on table -->
					<polygon class="fill-door" points="358,370 383,374 383,378 358,378"/>
					<polygon class="fill-wall-light" points="383,374 408,370 408,378 383,378"/>
				</g>

				<!-- ============================
				     10. HOTSPOT: Bookshelf 书架 (far wall left) → panel-books
				     ============================ -->
				<a class="hotspot" href="#panel-books" aria-label="书架 — 书籍">
					<title>书架 — Books</title>
					<!-- Bookcase frame -->
					<rect class="hotspot-shape" x="110" y="95" width="130" height="265" rx="3"/>
					<!-- Shelves -->
					<rect class="fill-wall-dark" x="118" y="150" width="114" height="4"/>
					<rect class="fill-wall-dark" x="118" y="208" width="114" height="4"/>
					<rect class="fill-wall-dark" x="118" y="266" width="114" height="4"/>
					<rect class="fill-wall-dark" x="118" y="324" width="114" height="4"/>
					<!-- Books row 1 -->
					<rect class="fill-accent-dim" x="122" y="102" width="12" height="46"/>
					<rect class="fill-window" x="138" y="108" width="10" height="40"/>
					<rect class="fill-accent-shape" x="152" y="104" width="14" height="44"/>
					<rect class="fill-wall-light" x="170" y="110" width="10" height="38"/>
					<rect class="fill-door" x="184" y="102" width="12" height="46"/>
					<rect class="fill-window" x="200" y="106" width="11" height="42"/>
					<rect class="fill-accent-dim" x="215" y="104" width="12" height="44"/>
					<!-- Books row 2 -->
					<rect class="fill-door" x="122" y="158" width="14" height="48"/>
					<rect class="fill-accent-dim" x="140" y="162" width="10" height="44"/>
					<rect class="fill-window" x="154" y="156" width="12" height="50"/>
					<rect class="fill-wall-light" x="170" y="160" width="10" height="46"/>
					<rect class="fill-accent-shape" x="184" y="158" width="14" height="48"/>
					<rect class="fill-door" x="202" y="164" width="10" height="42"/>
					<rect class="fill-window" x="216" y="156" width="12" height="50"/>
					<!-- Books row 3 -->
					<rect class="fill-accent-shape" x="122" y="216" width="12" height="48"/>
					<rect class="fill-door" x="138" y="220" width="10" height="44"/>
					<rect class="fill-accent-dim" x="152" y="214" width="14" height="50"/>
					<rect class="fill-window" x="170" y="218" width="10" height="46"/>
					<rect class="fill-wall-light" x="184" y="216" width="12" height="48"/>
					<rect class="fill-accent-dim" x="200" y="222" width="10" height="42"/>
					<rect class="fill-door" x="214" y="214" width="14" height="50"/>
					<!-- Books row 4 -->
					<rect class="fill-window" x="122" y="274" width="14" height="48"/>
					<rect class="fill-accent-shape" x="140" y="278" width="10" height="44"/>
					<rect class="fill-door" x="154" y="272" width="12" height="50"/>
					<rect class="fill-wall-light" x="170" y="276" width="10" height="46"/>
					<rect class="fill-accent-dim" x="184" y="274" width="14" height="48"/>
					<rect class="fill-window" x="202" y="280" width="10" height="42"/>
					<rect class="fill-accent-shape" x="216" y="272" width="12" height="50"/>
					<!-- Label -->
					<text class="hotspot-label" x="175" y="87" text-anchor="middle">书架</text>
				</a>

				<!-- ============================
				     11. HOTSPOT: Map 地图 (left wall) → panel-places
				     ============================ -->
				<a class="hotspot" href="#panel-places" aria-label="地图 — 地点">
					<title>地图 — Places</title>
					<!-- Map frame on left wall (perspective-adjusted) -->
					<polygon class="hotspot-shape" points="24,140 72,148 72,296 24,308"/>
					<!-- Map surface -->
					<polygon class="fill-door" points="30,148 68,155 68,289 30,300"/>
					<!-- Map markers -->
					<rect class="fill-accent-shape" x="40" y="180" width="6" height="6"/>
					<rect class="fill-accent-shape" x="52" y="220" width="6" height="6"/>
					<rect class="fill-accent-dim" x="36" y="252" width="6" height="6"/>
					<rect class="fill-window" x="54" y="196" width="5" height="5"/>
					<rect class="fill-window-glow" x="42" y="270" width="5" height="5"/>
					<!-- Label -->
					<text class="hotspot-label" x="48" y="130" text-anchor="middle">地图</text>
				</a>

				<!-- ============================
				     12. HOTSPOT: Gramophone 留声机 (far wall right) → shelf-media (locked)
				     ============================ -->
				<g id="shelf-media">
					<a class="hotspot" href="#shelf-media" aria-label="视听 — 尚未记载">
						<title>视听 — 尚未记载</title>
						<!-- Cabinet/stand -->
						<rect class="hotspot-shape" x="560" y="260" width="100" height="100" rx="3"/>
						<!-- Cabinet front detail -->
						<rect class="fill-wall-light" x="568" y="270" width="84" height="80"/>
						<!-- Gramophone base plate -->
						<rect class="fill-door" x="578" y="248" width="64" height="14"/>
						<!-- Turntable -->
						<circle class="fill-wall-dark" cx="610" cy="236" r="20"/>
						<circle class="fill-door" cx="610" cy="236" r="8"/>
						<circle class="fill-accent-dim" cx="610" cy="236" r="3"/>
						<!-- Horn -->
						<polygon class="fill-accent-dim" points="626,228 660,195 660,212 630,236"/>
						<!-- Horn mouth -->
						<rect class="fill-accent-shape" x="656" y="192" width="8" height="22" rx="2"/>
						<!-- Label -->
						<text class="hotspot-label" x="610" y="183" text-anchor="middle">视听</text>
					</a>
					<g class="capsule-lock" aria-hidden="true">
						<path class="fill-wall-light" d="M606 300 L606 292 Q606 284 610 284 Q614 284 614 292 L614 300"/>
						<rect class="fill-wall" x="602" y="300" width="16" height="12" rx="2"/>
						<circle class="fill-door" cx="610" cy="306" r="2"/>
					</g>
					<text class="capsule-lock-text" x="610" y="175" text-anchor="middle">尚未记载</text>
				</g>

				<!-- ============================
				     13. HOTSPOT: Chess table 棋盘台 (ground right) → shelf-games (locked)
				     ============================ -->
				<g id="shelf-games">
					<a class="hotspot" href="#shelf-games" aria-label="游戏 — 尚未记载">
						<title>游戏 — 尚未记载</title>
						<!-- Table top -->
						<rect class="hotspot-shape" x="530" y="378" width="100" height="10" rx="2"/>
						<!-- Table legs -->
						<rect class="hotspot-shape" x="538" y="388" width="8" height="42"/>
						<rect class="hotspot-shape" x="614" y="388" width="8" height="42"/>
						<!-- Board on table -->
						<rect class="fill-wall-light" x="545" y="370" width="70" height="8"/>
						<!-- Grid lines on board -->
						<rect class="fill-wall-dark" x="562" y="370" width="1" height="8"/>
						<rect class="fill-wall-dark" x="580" y="370" width="1" height="8"/>
						<rect class="fill-wall-dark" x="597" y="370" width="1" height="8"/>
						<rect class="fill-wall-dark" x="545" y="374" width="70" height="1"/>
						<!-- Pieces -->
						<rect class="fill-accent-dim" x="550" y="366" width="6" height="4"/>
						<rect class="fill-door" x="568" y="366" width="6" height="4"/>
						<rect class="fill-accent-dim" x="585" y="366" width="6" height="4"/>
						<rect class="fill-door" x="602" y="366" width="6" height="4"/>
						<!-- Label -->
						<text class="hotspot-label" x="580" y="358" text-anchor="middle">游戏</text>
					</a>
					<g class="capsule-lock" aria-hidden="true">
						<path class="fill-wall-light" d="M576 394 L576 386 Q576 378 580 378 Q584 378 584 386 L584 394"/>
						<rect class="fill-wall" x="572" y="394" width="16" height="12" rx="2"/>
						<circle class="fill-door" cx="580" cy="400" r="2"/>
					</g>
					<text class="capsule-lock-text" x="580" y="350" text-anchor="middle">尚未记载</text>
				</g>

				<!-- ============================
				     14. HOTSPOT: Travel journal 旅行记 (right wall) → shelf-experiences (locked)
				     ============================ -->
				<g id="shelf-experiences">
					<a class="hotspot" href="#shelf-experiences" aria-label="经历 — 尚未记载">
						<title>经历 — 尚未记载</title>
						<!-- Journal frame on right wall (perspective-adjusted) -->
						<polygon class="hotspot-shape" points="728,148 776,140 776,308 728,296"/>
						<!-- Journal pages -->
						<polygon class="fill-door" points="732,155 772,148 772,300 732,289"/>
						<!-- Page lines (writing) -->
						<rect class="fill-wall-dark" x="738" y="168" width="28" height="2"/>
						<rect class="fill-wall-dark" x="738" y="180" width="26" height="2"/>
						<rect class="fill-wall-dark" x="738" y="192" width="30" height="2"/>
						<rect class="fill-wall-dark" x="738" y="204" width="24" height="2"/>
						<rect class="fill-wall-dark" x="738" y="224" width="28" height="2"/>
						<rect class="fill-wall-dark" x="738" y="236" width="26" height="2"/>
						<rect class="fill-wall-dark" x="738" y="248" width="30" height="2"/>
						<rect class="fill-wall-dark" x="738" y="260" width="22" height="2"/>
						<!-- Label -->
						<text class="hotspot-label" x="752" y="130" text-anchor="middle">经历</text>
					</a>
					<g class="capsule-lock" aria-hidden="true">
						<path class="fill-wall-light" d="M749 228 L749 220 Q749 212 753 212 Q757 212 757 220 L757 228"/>
						<rect class="fill-wall" x="745" y="228" width="16" height="12" rx="2"/>
						<circle class="fill-door" cx="753" cy="234" r="2"/>
					</g>
					<text class="capsule-lock-text" x="752" y="122" text-anchor="middle">尚未记载</text>
				</g>

				<!-- ============================
				     15. HOTSPOT: Return door 返回城堡 (ground bottom center)
				     ============================ -->
				<a class="hotspot" href="interior.html" aria-label="返回城堡 — Return to castle interior">
					<title>返回城堡 — Return to castle interior</title>
					<rect class="hotspot-shape" x="350" y="450" width="100" height="45" rx="4"/>
					<text class="hotspot-label" x="400" y="478" text-anchor="middle">返回城堡</text>
				</a>
			</svg>

		</div>

		<!-- :target overlay panels -->

		<nav id="scene-nav-canon" class="scene-nav" aria-label="典籍室导航">
			<ul class="scene-nav__list">
				<li><a class="scene-nav__link" href="#panel-books">书架 — 书籍</a></li>
				<li><a class="scene-nav__link" href="#panel-places">地图 — 地点</a></li>
				<li><span class="scene-nav__link scene-nav__link--locked">视听（尚未记载）</span></li>
				<li><span class="scene-nav__link scene-nav__link--locked">游戏（尚未记载）</span></li>
				<li><span class="scene-nav__link scene-nav__link--locked">经历（尚未记载）</span></li>
				<li><a class="scene-nav__link" href="interior.html">返回城堡</a></li>
			</ul>
		</nav>

		<div id="panel-books" 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>《不原谅也没关系》</h2>
					<p>这本书改变了我看人的角度。通常来说，将人视为天生且不会改变的是很便利的做法。实际上，许多被我们归结为固有性格特质的行为是个体在长期创伤环境中形成的防御机制，也就是所谓的 4F 反应。我理解到，他人的许多地方都可以通过他们所处的环境来推测出来。借此，我暗自分析了身边的许多人，也了解了他们许多。站在这种角度去看，会发现自己能够理解原先不可理喻的蠢人或者坏人们。但这也不意味着我需要无底线包容他们的越界行为。</p>
					<p>不过，我对这种概念还在缓慢消化中。生气的时候还是会偷偷将对方视为「一辈子的恶人」来数落。</p>
				</div>
				<div class="scroll__rod" aria-hidden="true"></div>
			</div>
			<a href="#" class="capsule-panel__close">关闭</a>
		</div>

		<div id="panel-places" 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>
					<p>我是南北家庭出身，但是在北方（山东）居住的时间更长久，也更融入到当地的文化中。因为小时候在福建的生活并不快乐，所以我对那个地方带有一些自己的小偏见。</p>
					<p>在中国生活了十一年后，我随着父母搬来纽约定居。无论是新生活带来的压力和恐惧、同父母之间每日每夜的争执，还是日后难以融入当地的人群中，都让我倍受折磨，也构成了我青少年时期的底色。上高中时，我已然是一个对社交感到恐惧且自负的人，这也导致了未来一系列糟糕的事情。</p>
					<p>尽管在高中期间我离开了家，不再需要每天和父母产生摩擦，但也让我陷入了另一个泥潭，也就是和室友之间的爱恨情仇。我们之间发生了很多，也改变了彼此很多。毫无疑问的是，我们互相是对方最亲密的人，至今也是。</p>
					<p>在美国的这十几年，我从未回到中国去，导致我对中国的认知严重脱节。不过也正因此，你会在本站看到更多与美国境内相关的内容。</p>
				</div>
				<div class="scroll__rod" aria-hidden="true"></div>
			</div>
			<a href="#" class="capsule-panel__close">关闭</a>
		</div>

	</main>

</body>
</html>