Repository navigation
Expand file tree
/
Copy patherrors.html
More file actions
137 lines (125 loc) · 6.82 KB
/
Copy patherrors.html
File metadata and controls
137 lines (125 loc) · 6.82 KB
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
<!DOCTYPE html>
<html lang="ko" data-catalog="./data-errors.js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<link rel="icon" href="data:," />
<meta name="description" content="Beautiful Errors — 10점의 인터랙티브 착시 전시. 모든 착시는 손으로 증명할 수 있습니다." />
<title>Beautiful Errors · 착시 전시 — 뇌의 정직한 오류</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- ★서드파티 웹폰트는 첫 페인트를 막지 않는다 (§E-7 "흰 화면은 어떤 경우에도
발생하지 않는다"). fonts.googleapis.com 이 응답을 물고 늘어지는 캡티브 포털에서
렌더 블로킹 시트는 페인트를 무한히 미룬다 — 이 페이지는 3D 전시장의 탈출구다.
media="print" 로 받아 두고 onload 에서 all 로 승격한다(다운로드는 그대로).
CSS 의 font-family 폴백 스택이 폰트 없이도 전시를 읽히게 한다. -->
<link rel="stylesheet" media="print" onload="this.media='all'" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@300;400;500;600&family=Space+Mono:wght@400;700&display=swap" />
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@300;400;500;600&family=Space+Mono:wght@400;700&display=swap" /></noscript>
<link rel="stylesheet" href="./css/style.css" />
<!-- three.js (XI관 — 시간을 세는 법). 빌드 없는 사이트라 bare specifier를
해결할 import map이 필요. addon들이 `from 'three'`를 쓰므로 필수.
카메라관의 MediaPipe와 같은 zero-build CDN-ESM 경로. -->
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.161.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.161.0/examples/jsm/"
}
}
</script>
</head>
<body data-view="atrium">
<!-- ===== Grain / vignette overlay (whole-page atmosphere) ================= -->
<div class="grain" aria-hidden="true"></div>
<div class="vignette" aria-hidden="true"></div>
<!-- ===== Top bar ========================================================= -->
<header class="topbar">
<button class="brand" data-action="home" aria-label="아트리움으로">
<span class="brand__mark" aria-hidden="true"></span>
<span class="brand__text">GENERATIVE HOURS</span>
</button>
<nav class="topnav" aria-label="전시관">
<!-- wing links injected by JS -->
</nav>
<button class="sound-toggle" data-action="sound" aria-pressed="false" aria-label="사운드 토글">
<span class="sound-toggle__icon" aria-hidden="true"></span>
</button>
</header>
<!-- ===== ATRIUM (landing) ================================================ -->
<main class="atrium" id="atrium">
<section class="hero">
<p class="hero__eyebrow">인터랙티브 착시 전시 · GENERATIVE HOURS 자매전</p>
<h1 class="hero__title">Beautiful<br />Errors</h1>
<p class="hero__lead">
뇌는 세계를 보지 않습니다 — 추측합니다. 완전한 직선이 휘고, 같은 크기가
달라 보이고, 정지한 것이 돌고, 등속이 절뚝입니다. 열 점의 착시를 직접
만지고, 돌리고, 포개 보세요. 그리고 어느 작품에서든 꾹 눌러 보세요 —
자와 증명이 나타나 진실을 보여줍니다. 놓는 순간, 뇌는 다시 속을 겁니다.
</p>
<div class="hero__meta">
<span>10 WORKS</span><i></i><span>2 WINGS</span><i></i><span>PROOF IN HAND</span>
</div>
<p class="hero__sister"><a href="index.html">← 본 전시 — Generative Hours</a></p>
<button class="hero__enter" data-action="enter">전시 입장 <span aria-hidden="true">↓</span></button>
</section>
<div class="hero__scrollhint" aria-hidden="true"></div>
</main>
<!-- ===== GALLERY (work grid) ============================================= -->
<section class="gallery" id="gallery" aria-label="작품 목록">
<!-- wings + work cards injected by JS -->
</section>
<!-- ===== EXHIBIT ROOM (single work, fullscreen) ========================= -->
<section class="room" id="room" aria-hidden="true" aria-label="전시실">
<canvas class="room__canvas" id="stage"></canvas>
<!-- loading shimmer -->
<div class="room__loader" id="loader" aria-hidden="true"><span></span><span></span><span></span></div>
<!-- placard / wall text -->
<aside class="placard" id="placard">
<button class="placard__collapse" data-action="placard-toggle" aria-label="작품 설명 접기 / 펴기">
<span aria-hidden="true"></span>
</button>
<div class="placard__scroll">
<p class="placard__no"></p>
<h2 class="placard__title"></h2>
<p class="placard__ko"></p>
<p class="placard__medium"></p>
<div class="placard__rule"></div>
<p class="placard__note"></p>
<button class="placard__more" data-action="details-toggle" aria-expanded="false" aria-controls="details">
<span class="placard__more-label">기술 노트 자세히 보기</span>
<span class="placard__more-icon" aria-hidden="true"></span>
</button>
<div class="details" id="details" hidden>
<div class="details__block">
<p class="details__label">기법 · TECHNIQUE</p>
<p class="details__text" data-detail="tech"></p>
</div>
<div class="details__block">
<p class="details__label">개념 · CONCEPT</p>
<p class="details__text" data-detail="idea"></p>
</div>
<div class="details__block">
<p class="details__label">체험 · TRY THIS</p>
<p class="details__text" data-detail="play"></p>
</div>
</div>
<div class="placard__controls" id="controls"><!-- per-piece controls --></div>
</div>
</aside>
<!-- bottom action bar -->
<div class="actionbar">
<button class="actionbar__btn" data-action="prev" aria-label="이전 작품">‹</button>
<div class="actionbar__center">
<p class="actionbar__hint" id="hint"></p>
</div>
<button class="actionbar__btn" data-action="next" aria-label="다음 작품">›</button>
</div>
<button class="room__exit" data-action="exit" aria-label="전시실 나가기 (Esc)">✕ 나가기</button>
</section>
<!-- ===== Footer credit ================================================== -->
<footer class="credit" id="credit">
<p>Generative Hours · 코드로 그린 전시 · <span id="year"></span></p>
</footer>
<script type="module" src="./js/main.js"></script>
</body>
</html>