-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
218 lines (195 loc) · 13.6 KB
/
Copy pathindex.html
File metadata and controls
218 lines (195 loc) · 13.6 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
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
<!-- light: the eye/intro is a light "paper" design; matches :root{color-scheme:light} in puzzle.css.
(was "dark", which made Firefox paint a black canvas + dark UI chrome before the CSS applied) -->
<meta name="color-scheme" content="light" />
<title>INFOHAZARD</title>
<!-- ░ Critical first-paint CSS, inlined ░ Firefox (esp. over a VPN / cold CDN) will paint the page
UNSTYLED if a render-blocking stylesheet is slow to arrive. Without these rules that first paint
shows the triangle stretched to the window + un-centred, the reveal video poster, and a scrolling
page. These mirror puzzle.css/landing.css so the gate is laid out correctly from the first byte;
the external sheets then take over (their reveal-state rules are more specific, so the reveal
still works). Keep in sync with puzzle.css. -->
<style>
*, *::before, *::after { box-sizing: border-box; } /* match puzzle.css — without it the critical-only paint adds padding to #hero's height, dropping the triangle ~50px before the CSS snaps it back up */
html, body { margin: 0; height: 100%; background: #f4f2ea; }
body { overflow: hidden; }
#hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 1rem 1rem calc(11vh + env(safe-area-inset-bottom, 0px)); }
#hazard { width: min(92vw, 88vh, 660px); height: auto; flex: none; } /* flex:none matches puzzle.css — without it the flex row mis-sizes the SVG and it sits lower, then jumps up when the CSS lands */
.credit { position: fixed; left: 0; right: 0; bottom: 26px; margin: 0; text-align: center; }
#revbg, #dread, #boom { display: none; }
</style>
<link rel="icon" type="image/svg+xml" href="infosigns/infohazard.svg">
<link rel="alternate icon" type="image/png" sizes="32x32" href="assets/favicon-16x16.png">
<!-- preload the reveal assets so "The Last Psyop" fades in seamlessly: the LED font and
war-room photo live in hidden elements, so without this they'd only start loading at
reveal time (causing the wrong-font flash + black-then-photo pop). -->
<link rel="preload" href="assets/LEDLIGHT.otf" as="font" type="font/otf" crossorigin />
<!-- preload the war-room POSTER, not the mp4: `as="video"` is NOT a valid preload destination —
Firefox rejects it (console warning) and never fetches, which is part of why the backdrop came
in late there. The poster paints the war-room instantly on reveal in every browser; the muted
video loop then streams in behind it. -->
<link rel="preload" href="assets/warroom.jpg" as="image" />
<!-- classic serifs for the elegant reveal — Cormorant Garamond (display) + EB Garamond (body).
Loaded NON-blocking (media=print → all onload): they're only needed for the reveal, so the
eye intro paints immediately with puzzle.css instead of waiting on this cross-origin request
(that wait was letting the unstyled SVG flash the old neon/gold "game" look). -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap" media="print" onload="this.media='all'" />
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap" /></noscript>
<!-- puzzle.css = the eye/triangle/heart gate · landing.css = the reveal. Split for legibility;
puzzle first so its base rules load before the reveal overrides. -->
<link rel="stylesheet" href="puzzle.css" />
<link rel="stylesheet" href="landing.css" />
</head>
<body class="eye-a">
<!-- eye-a = the watching eye on the title "A" is ON by default (Cmd/Ctrl+Shift+L toggles it off/on) -->
<!-- ░░░ THE EYE (exact gate eye) ░░░ -->
<main id="hero">
<svg id="hazard" viewBox="0 0 600 560" xmlns="http://www.w3.org/2000/svg"
role="img" aria-label="Infohazard — the watching eye">
<defs>
<radialGradient id="iris" cx="50%" cy="48%" r="52%">
<stop id="s0" offset="0%" stop-color="#fffbd0" />
<stop id="s1" offset="34%" stop-color="#f2dd00" />
<stop id="s2" offset="72%" stop-color="#a07a00" />
<stop id="s3" offset="100%" stop-color="#3a2a00" />
</radialGradient>
<radialGradient id="sclera" cx="50%" cy="50%" r="60%">
<stop offset="0%" stop-color="#16160f" />
<stop offset="100%" stop-color="#050504" />
</radialGradient>
<clipPath id="eyeClip" clipPathUnits="userSpaceOnUse">
<path d="M 215 355 Q 300 281 385 355 Q 300 429 215 355 Z" />
</clipPath>
<!-- info "i" punched into the pupil (default on) -->
<mask id="iMask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
<rect x="246" y="301" width="108" height="108" fill="#fff" />
<circle cx="300" cy="341.1" r="5.85" fill="#000" />
<rect x="294.5" y="349.7" width="11" height="24.1" rx="5.5" fill="#000" />
</mask>
<!-- becomes a heart on blessing -->
<mask id="heartMask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
<rect x="246" y="301" width="108" height="108" fill="#fff" />
<path d="M300 372 C322 352 315 334 300 344 C285 334 278 352 300 372 Z" fill="#000" />
</mask>
</defs>
<!-- warning triangle — inline attrs match the flat scheme in puzzle.css, so the first paint
(before the CSS applies) already looks right instead of flashing the old neon outline -->
<polygon id="triangle" class="tri" points="300,46 542,498 58,498"
fill="#f2dd00" stroke="#0c0c0c" stroke-width="14" stroke-linejoin="round" />
<!-- the whole eye (visuals + hit area) scaled to 136% about its centre; the flip/gaze/blink
operate on the inner groups and compose with this -->
<g id="eyeAll" transform="translate(300 355) scale(1.36) translate(-300 -355)">
<!-- eyeball: clipped to the almond, opened/closed by the inner #lid group -->
<g clip-path="url(#eyeClip)">
<g id="lid">
<ellipse id="scleraE" cx="300" cy="355" rx="120" ry="68" fill="#f2dd00" />
<g id="gaze">
<circle id="irisC" cx="300" cy="355" r="46" fill="#f2dd00" stroke="#0c0c0c" stroke-width="6" />
<circle id="pupil" cx="300" cy="355" r="27" fill="#040403" mask="url(#iMask)" />
<circle id="hi" cx="285" cy="340" r="7.5" fill="#fffbe6" opacity="0.8" display="none" />
</g>
</g>
</g>
<path id="rim" class="rim" d="M 215 355 Q 300 281 385 355 Q 300 429 215 355 Z"
fill="none" stroke="#0c0c0c" stroke-width="7" />
<path id="crease" class="crease" d="M 222 356 Q 300 361 378 356"
fill="none" stroke="#0c0c0c" stroke-width="7" stroke-linecap="round" opacity="0" />
<ellipse id="eyeHit" cx="300" cy="355" rx="102" ry="82" fill="transparent" pointer-events="all" />
</g>
</svg>
</main>
<!-- proximity red wash -->
<div id="dread" aria-hidden="true"></div>
<!-- ░░░ THE TRUTH — revealed when the heart reaches the eye ░░░ -->
<section id="reveal" hidden>
<!-- ░ LANDING / HERO — the war-room photo shows through here; the title sits on top.
it "sticks" because #revbg is fixed; the opaque paper sections below scroll up over it. ░ -->
<div class="lp-hero">
<div class="lp-hero__inner">
<!-- the "A" in LAST wears a watching eye that tracks the cursor (Cmd/Ctrl+Shift+L toggles it).
the eye mirrors #hazard's eye 1:1; landing.js drives the .lp-a-eye__gaze translate. -->
<h1 class="lp-title">The L<span class="lp-a">a<svg class="lp-a-eye" viewBox="205 271 190 168" aria-hidden="true">
<defs><clipPath id="lpAeyeClip" clipPathUnits="userSpaceOnUse"><path d="M 215 355 Q 300 281 385 355 Q 300 429 215 355 Z"/></clipPath></defs>
<g clip-path="url(#lpAeyeClip)">
<path d="M 215 355 Q 300 281 385 355 Q 300 429 215 355 Z" fill="#ffbe4d"/>
<g class="lp-a-eye__gaze">
<circle cx="300" cy="355" r="46" fill="#ffbe4d" stroke="#0c0c0c" stroke-width="6"/>
<circle cx="300" cy="355" r="27" fill="#040403"/>
<circle cx="300" cy="341.1" r="5.85" fill="#ffbe4d"/><rect x="294.5" y="349.7" width="11" height="24.1" rx="5.5" fill="#ffbe4d"/>
</g>
</g>
<path d="M 215 355 Q 300 281 385 355 Q 300 429 215 355 Z" fill="none" stroke="#0c0c0c" stroke-width="8"/>
</svg></span>st Psyop</h1>
<h2 class="lp-event">“The September Event”</h2>
<p class="lp-tagline">
A mind virus preparedness and prevention wargaming conference
<!--
A gain-of-function memetic research & deployment hackathon
-->
<!--
Psyops, for science!
-->
</p>
<p class="lp-dates">Weekend of September 4–6, 2026 in Austin, TX</p>
</div>
<a class="apply" href="https://luma.com/psyop-hackathon" target="_blank" rel="noopener">Apply to Attend</a>
<div class="lp-cue" aria-hidden="true">▼</div>
</div>
<!-- ░ THE PAPER — one continuous orange graph-paper sheet holding all the text sections ░ -->
<div class="lp-paper">
<!-- ░ scrolling "eternal september" separator (toggled in settings) between hero and paper ░ -->
<div class="es-sep" aria-hidden="true"><div class="es-track" id="es-track"></div></div>
<!-- ░ PROSOCIAL ENGINEERING CORP emblem — centred on the graph paper ░ -->
<section class="lp-section lp-emblem">
<a class="lp-emblem__link" href="https://prosocialengineering.org/" target="_blank" rel="noopener" aria-label="Prosocial Engineering Corp">
<img class="lp-emblem__img" src="assets/prosocial.png" alt="Prosocial Engineering Corp — Maximum Good Actuator" loading="lazy" />
</a>
</section>
<!-- ░ footer credit — in flow at the very bottom (only seen after scrolling) ░ -->
<footer class="lp-footer">
<a href="https://www.psyop.report/" target="_blank">Weekly updates at www.psyop.report</a>
</footer>
</div><!-- /.lp-paper -->
</section>
<!-- pinned credit — the ❤️ is the draggable mechanic -->
<p class="credit">Made with <span id="heart" role="img" aria-label="love">❤️</span></p>
<!-- fixed video backdrop for the reveal (muted, looping, preloaded; covers the viewport).
poster = the war-room still — a fallback if the video can't play -->
<div id="revbg" aria-hidden="true">
<video id="revvid" autoplay loop muted playsinline preload="auto" poster="assets/warroom.jpg">
<source src="assets/revbg.mp4" type="video/mp4" />
</video>
</div>
<!-- background muzak (fades in on reveal) + a single sound on/off toggle for music & SFX -->
<audio id="bgm" loop preload="auto" src="assets/muzak.mp3"></audio>
<button id="bgm-toggle" class="bgm-toggle" type="button" aria-label="Toggle sound" aria-pressed="true">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path class="snd-spk" d="M4 9v6h4l5 4V5L8 9H4z" fill="currentColor" />
<path class="snd-wave" d="M16 8.6a4 4 0 010 6.8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
<path class="snd-wave" d="M18.6 6a7.5 7.5 0 010 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
<line class="bgm-slash" x1="3.5" y1="20.5" x2="20.5" y2="3.5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" />
</svg>
</button>
<!-- ⚙ settings (reveal page only): font + watching-eye toggles -->
<button id="gear-toggle" class="gear-toggle" type="button" aria-label="Settings" aria-expanded="false" aria-controls="settings">
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M19.14 12.94a7.07 7.07 0 000-1.88l2.03-1.58a.5.5 0 00.12-.64l-1.92-3.32a.5.5 0 00-.6-.22l-2.39.96a7 7 0 00-1.62-.94l-.36-2.54a.5.5 0 00-.5-.42h-3.84a.5.5 0 00-.5.42l-.36 2.54c-.59.24-1.13.56-1.62.94l-2.39-.96a.5.5 0 00-.6.22L2.71 8.84a.5.5 0 00.12.64l2.03 1.58a7.07 7.07 0 000 1.88l-2.03 1.58a.5.5 0 00-.12.64l1.92 3.32c.13.22.39.31.6.22l2.39-.96c.49.38 1.03.7 1.62.94l.36 2.54c.04.24.25.42.5.42h3.84c.25 0 .46-.18.5-.42l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.09.47 0 .6-.22l1.92-3.32a.5.5 0 00-.12-.64l-2.03-1.58zM12 15.6A3.6 3.6 0 1112 8.4a3.6 3.6 0 010 7.2z"/></svg>
</button>
<div id="settings" class="settings" hidden>
<p class="settings__title">Settings</p>
<label class="setting"><input type="checkbox" id="set-handwriting" checked> <span>Handwritten copy</span></label>
<label class="setting"><input type="checkbox" id="set-eye" checked> <span>Watching eye on the title</span></label>
<label class="setting"><input type="checkbox" id="set-september" checked> <span>“Eternal September” banner</span></label>
</div>
<canvas id="boom" aria-hidden="true"></canvas>
<!-- puzzle.js = the eye/heart gate · landing.js = the reveal. puzzle first: it owns the audio
engine + the window.PSYOP bridge that landing.js hooks into (and the ?reveal skip uses). -->
<script src="puzzle.js"></script>
<script src="landing.js"></script>
</body>
</html>