JavaScript must be enabled to play.
Browser lacks capabilities required to play.
Upgrade or switch to another browser.
Loading…
<<nobr>> <<if $wcount lt 10>><<set $welcome to true>><<set $typing to true>><</if>> <style> .rp_box { width: 100%; padding: 2px; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--bgrey4); border-radius: 8px; div:not(.rp_head):not(.group) { width: 100%; border: 1px solid var(--bgrey1); border-radius: 6px; background-color: var(--bgrey4); display: flex; vertical-align: center; align-items: center; } div:not(.rp_head):not(.group):hover { background-color: #0080ffa0; border: 1px solid #0040A040; } img { height: 32px; vertical-align: center; margin-right: 6px; } } #sec_box { margin-bottom: 8px; div { padding: 4px 8px; } } #per_box>div { padding: 2px 4px; } .rp_head { text-align: center; width: 100%; } .group { font-size: 12px; display: flex; align-items: center; text-align: center; } .group::before { content: ""; flex: 0 0 1em; border-bottom: 1px solid var(--bgreyD); margin-right: 0.25em; } .group::after { content: ""; flex: 1; border-bottom: 1px solid var(--bgreyD); margin-left: 0.25em; } .a_sec { width: 100%; font-weight: bold; } .awake { font-weight: bold; } .asleep { color: var(--bgrey8); font-style: italic; img { opacity: 0.5; } } #typing { width: max-content; color: transparent; font-style: italic; font-size: 12px; font-weight: bold; background: var(--bgrey8); background: linear-gradient(90deg, #80808C 0%, #80808C 40%, #B0B0BD 50%, #80808C 60%, #80808C 100%); background-size: 300% 100%; background-clip: text; animation: shimmer 2s infinite; } @keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } </style> <div id="con_body"> <<do tag "chat">><<= $c404>><</do>><<do tag "typshim">><<if $typing>><div id="typing">several people are typing...</div><</if>><</do>> </div> <div id="con_input"> <div style="padding-top: 11px;">> </div> <div><<do tag "responses">><<include $r404>><</do>></div> </div> <div id="con_rightpan"> <div id="sec_box" class="rp_box"> <div class="rp_head">SECTIONS</div> <div class="a_sec">§ General</div> <div>§ Field Reports</div> <div>§ Entity Database</div> <div>§ Projects</div> <div>§ Archive Diving</div> </div> <div id="per_box" class="rp_box"> <div class="rp_head">MEMBERS</div> <div class="group">Server Captains</div> <div class="awake"> <img @src="$icon_arach"> <span class="fa-stack fa-2xs" style="color: #FF6347;"> <i class="fa-solid fa-circle fa-stack-2x"></i> <i class="fa-solid fa-c fa-stack-1x fa-inverse"></i> </span> Arachne </div> <div class="group">Server Deputies</div> <div class="awake"> <img @src="$icon_coff"> <span class="fa-stack fa-2xs" style="color: #6A5ACD;"> <i class="fa-solid fa-circle fa-stack-2x"></i> <i class="fa-solid fa-d fa-stack-1x fa-inverse"></i> </span> coffeefiltered </div> <div class="asleep"> <img @src="$icon_buff"> <span class="fa-stack fa-2xs" style="color: #6A5ACD;"> <i class="fa-solid fa-circle fa-stack-2x"></i> <i class="fa-solid fa-d fa-stack-1x fa-inverse"></i> </span> buffer witch </div> <div class="awake"> <img @src="$icon_byte"> <span class="fa-stack fa-2xs" style="color: #6A5ACD;"> <i class="fa-solid fa-circle fa-stack-2x"></i> <i class="fa-solid fa-d fa-stack-1x fa-inverse"></i> </span> Bytegeist </div> <div class="awake"> <img @src="$icon_dotc"> <span class="fa-stack fa-2xs" style="color: #6A5ACD;"> <i class="fa-solid fa-circle fa-stack-2x"></i> <i class="fa-solid fa-d fa-stack-1x fa-inverse"></i> </span> dotcomrade </div> <div class="asleep"> <img @src="$icon_scsp"> <span class="fa-stack fa-2xs" style="color: #6A5ACD;"> <i class="fa-solid fa-circle fa-stack-2x"></i> <i class="fa-solid fa-d fa-stack-1x fa-inverse"></i> </span> ScriptSpectre </div> <div class="group">Peers</div> <div class="asleep"><img @src="$icon_ru21">AnomalyChan</div> <div class="awake"><img @src="$icon_ru18">bitrot baby</div> <div class="asleep"><img @src="$icon_user" style="filter: hue-rotate(152deg);">c0de redacted</div> <div class="awake"><img @src="$icon_ru23">Cache Cowboy</div> <div class="awake"><img @src="$icon_user" style="filter: hue-rotate(278deg);">clickcryptid</div> <div class="awake"><img @src="$icon_ru22">cobwebsignal</div> <div class="awake"><img @src="$icon_user" style="filter: hue-rotate(88deg);">_crouton</div> <div class="awake"><img @src="$icon_ru08">crystalmodem</div> <div class="awake"><img @src="$icon_ru11">datawraith</div> <div class="asleep"><img @src="$icon_user" style="filter: hue-rotate(155deg);">Dead Pixel</div> <div class="awake"><img @src="$icon_ru15">devnullbaby</div> <div class="awake"><img @src="$icon_user" style="filter: hue-rotate(258deg);">Echo_Trace</div> <div class="asleep"><img @src="$icon_ru20">faint signal</div> <div class="awake"><img @src="$icon_user" style="filter: hue-rotate(321deg);">frogmars</div> <div class="asleep"><img @src="$icon_ru05">ghostintherouter</div> <div class="asleep"><img @src="$icon_user" style="filter: hue-rotate(77deg);">ghostkey</div> <div class="awake"><img @src="$icon_ru03">gl1tchbunny</div> <div class="awake"><img @src="$icon_user" style="filter: hue-rotate(262deg);">haunt</div> <div class="awake"><img @src="$icon_user" style="filter: hue-rotate(115deg);">hexmilk</div> <div class="awake"><img @src="$icon_user" style="filter: hue-rotate(260deg);">HostUnreachable</div> <div class="awake"><img @src="$icon_ru06">hyperlinkhex</div> <div class="awake"><img @src="$icon_user" style="filter: hue-rotate(95deg);">idleprocession</div> <div class="awake"><img @src="$icon_user" style="filter: hue-rotate(248deg);">IndexUnderscore</div> <div class="awake"><img @src="$icon_user" style="filter: hue-rotate(141deg);">jelloboi92</div> <div class="awake"><img @src="$icon_user" style="filter: hue-rotate(320deg);">jpegseer</div> <div class="awake"><img @src="$icon_user" style="filter: hue-rotate(8deg);">keysmashcult</div> <div class="asleep"><img @src="$icon_user" style="filter: hue-rotate(227deg);">last_used_emoji</div> <div class="asleep"><img @src="$icon_user" style="filter: hue-rotate(257deg);">m0th lamp</div> <div class="awake"><img @src="$icon_ru12">mintykoi</div> <div class="awake"><img @src="$icon_ru13">Modem Shriek</div> <div class="asleep"><img @src="$icon_user" style="filter: hue-rotate(5deg);">Muse</div> <div class="awake"><img @src="$icon_user" style="filter: hue-rotate(357deg);">nestedloop</div> <div class="awake"><img @src="$icon_user" style="filter: hue-rotate(286deg);">Night Crawler</div> <div class="awake"><img @src="$icon_user" style="filter: hue-rotate(274deg);">Null Specter</div> <div class="asleep"><img @src="$icon_user" style="filter: hue-rotate(99deg);">overflowtea</div> <div class="awake"><img @src="$icon_ru02">PacketSniffer</div> <div class="awake"><img @src="$icon_ru09">ParsecEater</div> <div class="awake"><img @src="$icon_user" style="filter: hue-rotate(185deg);">petty_cash</div> <div class="awake"><img @src="$icon_player"><<= $player>></div> <div class="awake"><img @src="$icon_user" style="filter: hue-rotate(201deg);">pingwing</div> <div class="awake"><img @src="$icon_user" style="filter: hue-rotate(65deg);">popstatic</div> <div class="awake"><img @src="$icon_user" style="filter: hue-rotate(128deg);">ricewire</div> <div class="asleep"><img @src="$icon_ru16">screen capricorn</div> <div class="awake"><img @src="$icon_user" style="filter: hue-rotate(151deg);">scrimshard</div> <div class="awake"><img @src="$icon_ru01">scroll snare</div> <div class="awake"><img @src="$icon_user" style="filter: hue-rotate(112deg);">sludgenet</div> <div class="awake"><img @src="$icon_ru19">soft404</div> <div class="asleep"><img @src="$icon_user" style="filter: hue-rotate(302deg);">spectralwifi</div> <div class="awake"><img @src="$icon_user" style="filter: hue-rotate(300deg);">subroutine.exe</div> <div class="asleep"><img @src="$icon_ru04">sunburned</div> <div class="awake"><img @src="$icon_ru14">tabworm</div> <div class="awake"><img @src="$icon_user" style="filter: hue-rotate(304deg);">truth v4</div> <div class="asleep"><img @src="$icon_user" style="filter: hue-rotate(138deg);">username_not_taken</div> <div class="awake"><img @src="$icon_ru17">warpdriveby</div> <div class="awake"><img @src="$icon_ru10">wifi ghoul</div> <div class="awake"><img @src="$icon_user" style="filter: hue-rotate(55deg);">xX_obscura_Xx</div> <div class="asleep"><img @src="$icon_ru07">Z3r0Day</div> <div class="awake"><img @src="$icon_user" style="filter: hue-rotate(346deg);">zippedlight</div> </div> </div> <<done>><<= scrollchat('#con_body');>><</done>> <</nobr>>
<<nobr>> <div id="404gen"> <div class="msg"> <div class="usericon"><img @src="$icon_ru09"></div> <div class="msg-body"> <div class="username">ParsecEater</div> <div>I think I found some tracks from ~Glass Shark (or another ~spindle-class entity) on a deactivated Blinkr account. Left a trail of glitchy, broken .gifs like breadcrumbs. Should we... clean those up? 🤔</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_ru06"></div> <div class="msg-body"> <div class="username">hyperlinkhex</div> <div>Negative. Disturbing the artifacts might erase its nest coordinates. Screenshot and tag @ghostkey.</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_user" style="filter: hue-rotate(141deg);"></div> <div class="msg-body"> <div class="username">jelloboi92</div> <div>has anyone checked the alt text??</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_user" style="filter: hue-rotate(65deg);"></div> <div class="msg-body"> <div class="username">popstatic</div> <div>Jello might be onto something. last week an ~ifrit-class hid in a "Under Construction" banner.</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_user" style="filter: hue-rotate(88deg);"></div> <div class="msg-body"> <div class="username">cobwebsignal</div> <div>or... it's just redecorating? maybe it wants to spruce up its nest? 🌿</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_ru09"></div> <div class="msg-body"> <div class="username">ParsecEater</div> <div>Sure. And ~the Hound just really likes chewing up HTML tables. 🙄</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_ru06"></div> <div class="msg-body"> <div class="username">hyperlinkhex</div> <div>Speaking of, I have a new theory about ~the Hound. What if it isn't hunting ~glitches... What if it's herding? I swear I saw it chase a ~glitch into a dead IRC channel last night.</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_user" style="filter: hue-rotate(88deg);"></div> <div class="msg-body"> <div class="username">cobwebsignal</div> <div>do entities ever feel lonley...?</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_ru09"></div> <div class="msg-body"> <div class="username">ParsecEater</div> <div>They're just phantoms, Cobweb. They don't have—actually, nevermind. @popstatic, back me up here?</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_user" style="filter: hue-rotate(65deg);"></div> <div class="msg-body"> <div class="username">popstatic</div> <div>there's still tons of debate on how complicated their cognition is. emotional states are... unconfirmed. 🤷</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_ru06"></div> <div class="msg-body"> <div class="username">hyperlinkhex</div> <div>I added "possible herding behavior" to ~Hound's dossier in § Entity Database.</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_ru09"></div> <div class="msg-body"> <div class="username">ParsecEater</div> <div>Someone left a Omnipedia tab open on "List of extinct languages", and now all the citations are blinking.</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_user" style="filter: hue-rotate(65deg);"></div> <div class="msg-body"> <div class="username">popstatic</div> <div>also, blinking how? like... morse code? ⏺️</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_ru09"></div> <div class="msg-body"> <div class="username">ParsecEater</div> <div>Nah, like... 👁️👁️👁️ Also the word "extinct" keeps turning into “exsanguinated”.</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_ru06"></div> <div class="msg-body"> <div class="username">hyperlinkhex</div> <div>That's probably ~the Chubby Worm marking new territory.</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_user" style="filter: hue-rotate(88deg);"></div> <div class="msg-body"> <div class="username">cobwebsignal</div> <div>maybe it likes "ex-" words? what if we just... left a link to the LexiCon.pub dctionary nearby? 📖</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_ru09"></div> <div class="msg-body"> <div class="username">ParsecEater</div> <div>Cobweb, I swear to god, we are not running a cryptid catering service. 😤</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_user" style="filter: hue-rotate(65deg);"></div> <div class="msg-body"> <div class="username">popstatic</div> <div>anyway, Hex— Any luck decoding those Static.nex forum breadcrumbs?</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_ru06"></div> <div class="msg-body"> <div class="username">hyperlinkhex</div> <div>Negative. The text unwrites itself if you highlight it. Might be a cousin of a ~bloom-class cousin of ~Pixelmoth. Or someone playing a prank.</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_user" style="filter: hue-rotate(88deg);"></div> <div class="msg-body"> <div class="username">cobwebsignal</div> <div>or a prank by ~Pixelmoth. what if it's trolling us back? what if were the real cryptids? 👀</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_user" style="filter: hue-rotate(141deg);"></div> <div class="msg-body"> <div class="username">jelloboi92</div> <div>... that might explain why my keyboard keeps typing “YOU ARE BEING WATCHED” when I nap on it.</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_ru09"></div> <div class="msg-body"> <div class="username">ParsecEater</div> <div>Did you fall asleep to another 10-hour ViewPort.nex video called “ultimate compilation of television static” again?</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_user" style="filter: hue-rotate(141deg);"></div> <div class="msg-body"> <div class="username">jelloboi92</div> <div>that only happened once!!</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_ru06"></div> <div class="msg-body"> <div class="username">hyperlinkhex</div> <div>Classic. Meanwhile, the ~ifrit ~Deep Veins just tied up three separate 90s cartoon fan wikis into one huge knot with cross-links.</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_user" style="filter: hue-rotate(65deg);"></div> <div class="msg-body"> <div class="username">popstatic</div> <div>is there a pattern to the links? maybe we should try mapping them out.</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_user" style="filter: hue-rotate(88deg);"></div> <div class="msg-body"> <div class="username">cobwebsignal</div> <div>... I have yran. 🧶</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_ru06"></div> <div class="msg-body"> <div class="username">hyperlinkhex</div> <div>Cobweb—put the yarn down. I'll start charting the links under “fan wiki matrix” in ~Deep Veins' entry in § Entity Database.</div> </div> </div> <div class="msg" style="width: max-content; align-items: center; translate: -50%; margin-left: 50%;"> <div><i class="fa-solid fa-door-open"></i> Welcome to the 404 Society, new member <span style="font-size: 20px; font-weight: bold;">@Pigeon</span> !</div> <div><img @src="$icon_player" style="height: 96px;"></div> </div> </div> <<done>> <<run scrollchat('#con_body');>> <</done>> <</nobr>>
<<nobr>> <<button "Wow, thanks everybody!">> <<set $c404 += "<div class='msg'><div class='usericon'><img @src='$icon_player'></div><div class='msg-body'><div class='username'><<=$player>></div><div>Wow, thanks everybody!<div></div></div>">> <<redo "chat">> <<= scrollchat('#con_body');>> <<set $r404 to "cursor">><<redo "responses">> <<passagefade "The End" 1000 0 2000>> <</button>> <</nobr>>
<<if $wcount lt 10>> <<script>> var s = State.variables; if (Math.floor(Math.random() * 7) === 0) { if (s.wmsgs && s.wmsgs.length > 0) { const message = s.wmsgs.shift(); s.c404 += " " + message; s.wcount += 1; } else { s.wcount += 100; } } <</script>> <<redo "chat">> <<run scrollchat('#con_body');>> <<else>> <<set $wcount += 1>> <<set $welcome to false>> <<set $typing to false>> <<redo "chat">><<redo "typshim">> <<set $r404 to "404 r">> <<redo "responses">> <</if>>
<<nobr>><div>Sorry. That doesn't exist.</div><</nobr>>
<<nobr>><div id="BIOS"> <<timed 0.75s>><<type 10ms element 'span'>>BIOS Version: 2.37.0<</type>> <<next>><br><<type 10ms element 'span'>>[ press SPACE to skip ]<</type>> <br> <<next>><br><<type 10ms element 'span'>>Volatile Memory Scan:<</type>><<next>> <<type 10ms element 'span'>>65536µB OK<</type>> <<next>><br><<type 10ms element 'span'>>Detecting Dataspool...<</type>><<next>> <<type 10ms element 'span'>>Thread Found<</type>> <<next>><br><<type 10ms element 'span'>>Spinning up Dataspool...<</type>><<next>> <<type 10ms element 'span'>>17659 rpm<</type>> <br> <<next>><br><<type 10ms element 'span'>>Verifying crypto-signature...<</type>><<next>> <<type 10ms element 'span'>>Verified<</type>> <<next>><br><<type 10ms element 'span'>>Thermal Readings:<</type>><<next>> <<type 10ms element 'span'>>δT = 0.3K (optimal)<</type>> <br> <<next>><br><<type 10ms element 'span'>>Initializing System...<</type>> <<next>><<next>><<next>><<if Meter.get('load').val() is 0>><<replace "#bootwrap">><<include "OS Boot">><</replace>><</if>><</timed>> <div id="cw">This game includes at least one instance of auto-playing music. This can be disabled in the Settings menu.</div> </div> <<on 'keydown'>> <<which 32>><<if Meter.get('load').val() is 0>><<replace "#bootwrap">><<include "OS Boot">><</replace>><</if>> <</on>> <</nobr>>
<<if settings.skipintro>> <<goto "Desktop">> <</if>> <<nobr>> <style> #passage-boot-up { position: absolute; top: 0; left: 0; padding: 2.5em 4.5em; height: 100%; width: 100%; } #passage-boot-up:has(#BIOS) { background-color: #2A2A2A; z-index: 100; } #BIOS { height: 100%; width: 100%; color: #00E000; font-family: "Google Sans Code", monospace; padding: 20px 40px; font-size: 20px; position: relative; } #cw { position: absolute; bottom: 0; opacity: 0.5; font-size: 14px; } #OSlogin { position: absolute; top: 0; left: 0; padding: 2.5em 4.5em; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; backdrop-filter: blur(8px); span, div { display: flex; justify-content: center; align-items: center; text-align: center; flex-direction: column; } } #login { height: 503px; width: 338px; padding: 40px; border: 1px solid var(--bgrey1); background-color: var(--bgrey4); } #OSlogin .type-sim { background-color: var(--bgrey8); height: 34px; width: 200px; padding: 2px 8px; min-width: 200px; resize: none; } </style> <div id="bootwrap" style="height: 100%; width: 100%;"><<include "BIOS">></div> <</nobr>>
<<nobr>> <div id="con_body"> <<do tag "chat">><<print $byte_chat>><</do>> </div> <div id="con_input"> <div style="padding-top: 11px;">> </div> <div><<do tag "responses">><<include $byte_resp>><</do>></div> </div> <<set $byte_CM to 0>><<set $byte_1 to true>><<redo "badge">> <<done>><<= scrollchat('#con_body');>><</done>> <</nobr>>
<<nobr>> <div class="appwindow"> <div class="apptitlebar"> <img @src="$icon_concord" class="appfavicon"> Concord — chat and messaging <div id="close" class="appclose"><<link "">><<goto "Desktop">><</link>><i class="fa-solid fa-circle-xmark"></i></div> </div> <div class="appbody"> <div id="con_layout"> <div id="con_leftpan"><<do tag "leftpan">> <div id="con_list"> <input id="con_collapse" class="toggle" type="checkbox" checked> <label for="con_collapse" class="lbl-toggle">Direct Messages</label> <div class="list"> <div id="ub_byte" class="userbox hidden"><div class="usericon"><img @src="$icon_byte"><<do tag "badge">><<if $byte_CM>><div class="badge-txt">$byte_CM</div><</if>><</do>></div><div class="username"><<link "">><<replace "#con_chat">><<include "Bytegeist">><</replace>><</link>>Bytegeist</div></div> <div id="ub_unkn" class="userbox hidden"><div class="usericon"><img @src="$icon_unknown"><<do tag "badge">><<if $unkn_CM>><div class="badge-txt">$unkn_CM</div><</if>><</do>></div><div class="username"><<link "">><<replace "#con_chat">><<include "unkn user">><</replace>><</link>>[err: unkn user]</div></div> <div class="userbox inactive"><div class="usericon"><img @src="$icon_user"></div><div class="username">QuietChaos</div></div> <div class="userbox inactive"><div class="usericon"><img @src="$icon_user" style="filter: hue-rotate(257deg);"></div><div class="username">SlightlyToasted</div></div> <div class="userbox inactive"><div class="usericon"><img @src="$icon_user" style="filter: hue-rotate(514deg);"></div><div class="username">soggy waffles</div></div> <div class="userbox inactive"><div class="usericon"><img @src="$icon_user" style="filter: hue-rotate(771deg);"></div><div class="username">muffin.overlord</div></div> <div class="userbox inactive"><div class="usericon"><img @src="$icon_user" style="filter: hue-rotate(1028deg);"></div><div class="username">the quiet one</div></div> <div class="userbox inactive"><div class="usericon"><img @src="$icon_user" style="filter: hue-rotate(1285deg);"></div><div class="username">Noodle Arms</div></div> </div> </div> <div id="Slist"> <input id="Scollapse" class="toggle" type="checkbox" checked> <label for="Scollapse" class="lbl-toggle">Servers</label> <div class="list"> <div id="sb_404soc" class="serverbox hidden pending"><div class="servericon"><img @src="$logo_404soc"></div><div class="servername"><<link "">><<replace "#con_chat">><<if $member>><<include "404 Society">><<else>><<include "join_404">><</if>><</replace>><</link>><span>the 404 Society</span><<if $member is false>><span style="font-size: 10px; height: 0px; text-align: center;">membership pending</span><</if>></div></div> <div class="serverbox inactive"><div class="servericon"><img @src="$logo_gdg"></div><div class="servername">Game Dev Galaxy</div></div> <div class="serverbox inactive"><div class="servericon"><img @src="$logo_hell"></div><div class="servername">Hell.exe</div></div> <div class="serverbox inactive"><div class="servericon"><img @src="$logo_ambi"></div><div class="servername">Ambiguity Program</div></div> <div class="serverbox inactive"><div class="servericon"><img @src="$logo_gn"></div><div class="servername">Game Night</div></div> <div class="serverbox inactive"><div class="servericon"><img @src="$logo_sff"></div><div class="servername">Secret Forest Felowship</div></div> <div class="serverbox inactive"><div class="servericon"><img @src="$logo_world"></div><div class="servername">World Chat</div></div> </div> </div> <<done>> <<if $unkn_1>><<removeclass "#ub_unkn" "hidden">><</if>> <<if $byte_1>><<removeclass "#ub_byte" "hidden">><</if>> <<if $request>><<removeclass "#sb_404soc" "hidden">><</if>> <<if $member>><<removeclass "#sb_404soc" "pending">><</if>> <</done>> <</do>></div> <div id="con_chat"><<include "concord-blank">></div> </div> </div> </div> <</nobr>>
<<nobr>> <div id="credits"> "The 404 Society" was made by the ~Pixelmoth entity. <p/> It was made for the LBK-03 game jam: "World Wide Weird". <p/> <a href="https://lithobreakers.itch.io/" target="_blank">Lithobreakers is a digital collective of anonymous artists.</a> <p/> With thanks to these playtester-class entities: <div>- Playtester G</div> <div>- Playtester K</div> <div>- Playtester M</div> <div>- Playtester W</div> <p/> And thanks to these Twine-class entities: <div>- Chapel (for <a href="https://twinelab.net/custom-macros-for-sugarcube-2/#/" target="_blank">macros</a>)</div> <div>- Mistyrious (for <a href="https://mistyriousness.itch.io/fade-to-black-macro" target="_blank">a macro</a>)</div> <div>- manonamora (for <a href="https://manonamora.itch.io/twine-sugarcube-guide" target="_blank">The 100% Good Twine SugarCube Guide</a>)</div> <p/> Finally, special thanks to my partner-class entity: <div>- the ~Goaltender entity</div> <p/> <center><<button "close">><<run Dialog.close();>><</button>></center> </div> <div class="hideclose"></div> <</nobr>>
<<nobr>> <div id="desktop-icons"> /* just some dummy icons */ <div class="DTicon inactive" style="grid-row: -2; grid-column: -2;"><center>[img[$icon_horus]]<br>Horus</center></div> <div class="DTicon inactive" style="grid-row: -3; grid-column: -2;"><center>[img[$icon_diplo]]<br>Diplodocus</center></div> <div class="DTicon inactive" style="grid-row: -4; grid-column: -2;"><center>[img[$icon_android]]<br>Cyber Droid</center></div> <div class="DTicon inactive" style="grid-row: -5; grid-column: -2;"><center>[img[$icon_castle]]<br>Stop Castle</center></div> <div class="DTicon inactive" style="grid-row: -2; grid-column: -3;"><center>[img[$icon_circuit]]<br>Circuit Map</center></div> <div class="DTicon inactive" style="grid-row: -3; grid-column: -3;"><center>[img[$icon_orbit]]<br>Orbit</center></div> /* Concord icon */ <div class="DTicon" style="grid-row: 2; grid-column: 1;"><<do tag "Concord">><<nobr>><center><div class="icon" style="position: relative; display: inline-block;">[img[$icon_concord]] <<if window.CM()>><div class="badge-dot"></div><</if>></div> <br>Concord <<link "">> <<if visited("Concord")>> <<goto "Concord">> <<else>> <<replace "#load_container">><<include "concord-loading">><</replace>> <</if>> <<removeclass "#notify" "open">> <</link>></center><</nobr>><</do>></div> /* WaterOtter icon */ <div class="DTicon" style="grid-row: 1; grid-column: 1;"><center>[img[$icon_wotter]]<br><<link "">><<goto "WaterOtter">><</link>>WaterOtter Browser</center></div> /* Scrap Pile icon */ <div class="DTicon" style="grid-row: -2; grid-column: 1;"><center>[img[$icon_scrap]]<br><<link "">><<goto "Scrap Pile">><</link>>Scrap Pile</center></div> /* Tuning (settings) icon */ <div class="DTicon" style="grid-row: -2; grid-column: 2;"><center>[img[$icon_tune]]<br><<link "">><<run UI.settings()>><</link>>Tuning</center></div> </div> <div id="load_container"> </div> <<set $notif to true>> <script src="https://kit.fontawesome.com/ed5638e501.js" crossorigin="anonymous"></script> <</nobr>>
<<nobr>> <<set $ark_active to false>> <<set $ark_quiet to 0>> <style> #FTback { width: 100%; height: max-content; min-height: 100%; background: var(--bgreyE); position: relative; overflow: hidden; } #FTback:has(#FTerror) { display: flex; flex-direction: column; } #FTpage { color: var(--bgrey2); height: 100%; display: grid; grid-template-columns: 300px 1fr; grid-template-rows: 60px 1fr; gap: 10px; max-width: 1200px; margin: 0 auto; background: var(--bgreyF); box-shadow: 0px 0px 8px var(--bgrey4); } #FTpage:has(#FTerror) { width: 1200px; flex-grow: 1; } #FTheader { grid-column: 1 / -1; background: #2080F0; padding: 10px 20px; display: flex; align-items: center; box-shadow: 0 1px 3px #0001; } #FTsearch { flex-grow: 1; height: 80%; width: min-content; padding: 6px; border-radius: 15px; border: 1px solid var(--bgrey2); display: flex; align-items: center; margin-right: 8px; } #FTerror { background: white; border: 1px solid #ddd; border-radius: 8px; padding: 15px; margin-bottom: 20px; box-shadow: 0 1px 3px #0001; width: 50%; translate: -50%; margin-left: 50%; margin-top: 64px; font-size: 24px; text-align: center; } </style> <div id="FTback"> <div id="FTpage"> <div id="FTheader"> <div style="margin-right: 4px;"><img @src="$FT_logo" style="height: 32px;"></div> <div style="font-weight: bold; color: white; font-size: 24px; margin-right: 16px;">FriendTree</div> <div id="FTsearch">Search FriendTree</div> <div style="">Home · Groups · Events · Profile · Login</div> </div> /* end header */ <div id="FTmain" style="width: 100%; height: 100%; grid-column: 1 / span 2;"> <div id="FTerror">Sorry, that page could not be found.<br><span style="font-size: 16px;"><<link "Home">><<set $WOpage to "FriendTree">><<set $WO to "web#>friendtree.nex>index:page">><<redo "WOredo">><</link>></span></div> </div> /* end main */ </div> </div> <</nobr>>
<<nobr>> <<set $ark_active to false>> <<set $ark_quiet to 0>> <style> #FTback { width: 100%; height: max-content; min-height: 100%; background: var(--bgreyE); position: relative; overflow: hidden; } #FTback:has(#FTerror) { display: flex; flex-direction: column; } #FTpage { color: var(--bgrey2); height: 100%; display: grid; grid-template-columns: 300px 1fr; grid-template-rows: 60px 1fr; gap: 10px; max-width: 1200px; margin: 0 auto; background: var(--bgreyF); box-shadow: 0px 0px 8px var(--bgrey4); } #FTpage:has(#FTerror) { width: 1200px; flex-grow: 1; } #FTheader { grid-column: 1 / -1; background: #2080F0; padding: 10px 20px; display: flex; align-items: center; box-shadow: 0 1px 3px #0001; } #FTsearch { flex-grow: 1; height: 80%; width: min-content; padding: 6px; border-radius: 15px; border: 1px solid var(--bgrey2); display: flex; align-items: center; margin-right: 8px; } #FTerror { background: white; border: 1px solid #ddd; border-radius: 8px; padding: 15px; margin-bottom: 20px; box-shadow: 0 1px 3px #0001; width: 50%; translate: -50%; margin-left: 50%; margin-top: 64px; font-size: 24px; text-align: center; } </style> <div id="FTback"> <div id="FTpage"> <div id="FTheader"> <div style="margin-right: 4px;"><img @src="$FT_logo" style="height: 32px;"></div> <div style="font-weight: bold; color: white; font-size: 24px; margin-right: 16px;">FriendTree</div> <div id="FTsearch">Search FriendTree</div> <div style="">Home · Groups · Events · Profile · Login</div> </div> /* end header */ <div id="FTmain" style="width: 100%; height: 100%; grid-column: 1 / span 2;"> <div id="FTerror">Sorry, this group is private.<br><span style="font-size: 16px;"><<link "Home">><<set $WOpage to "FriendTree">><<set $WO to "web#>friendtree.nex>index:page">><<redo "WOredo">><</link>></span></div> </div> /* end main */ </div> </div> <</nobr>>
<<nobr>> <style> #FTback { width: 100%; height: max-content; min-height: 100%; background: var(--bgreyE); position: relative; overflow: hidden; } #FTpage { color: var(--bgrey2); height: 100%; display: grid; grid-template-columns: 300px 1fr; grid-template-rows: 60px 1fr; gap: 10px; max-width: 1200px; margin: 0 auto; background: var(--bgreyF); box-shadow: 0px 0px 8px var(--bgrey4); } #FTheader { grid-column: 1 / -1; background: var(--FTblue); padding: 10px 20px; display: flex; align-items: center; box-shadow: 0 1px 3px #0001; } #FTsearch { flex-grow: 1; height: 80%; width: min-content; padding: 6px; border-radius: 15px; border: 1px solid var(--bgrey2); display: flex; align-items: center; margin-right: 8px; } #FTsidebar { background: white; border-radius: 0 8px 0 0; padding: 10px; box-shadow: 0 1px 3px #0001; } .section { margin-bottom: 10px; border-bottom: 1px solid #ddd; padding-bottom: 10px; } #picgrid { display: grid; width: 100%; grid-template-rows: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr); aspect-ratio: 1/1; gap: 3px; img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1/1; } } .FTpost { background: white; border: 1px solid #ddd; border-radius: 8px; padding: 15px; margin-bottom: 20px; box-shadow: 0 1px 3px #0001; } .FTposthead { display: flex; align-items: center; margin-bottom: 10px; } .FTavatar { width: 32px; height: 32px; border-radius: 50%; background: #808080; color: white; font-weight: bold; display: flex; align-items: center; justify-content: center; margin-right: 6px; font-size: 12px; } .subline { font-size: 10px; } .no-login { font-size: 12px; color: #606060; text-align: center; margin: 10px 0; } .sec-head { font-weight: bold; font-size: 16px; margin-bottom: 10px; color: var(--FTblue); } .sidebar-item { padding: 8px 0; border-bottom: 1px solid #eee; font-size: 14px; } .sidebar-item:last-child { border-bottom: none; } .sec-foot { display: flex; } .see-more { color: var(--FTblue); font-size: 10px; text-align: right; margin-top: 5px; width: max-content; } .local { flex-grow: 1; font-size: 10px; color: #606060; margin-top: 5px; } </style> <div id="FTback"> <div id="FTpage"> <div id="FTheader"> <div style="margin-right: 4px;"><img @src="$FT_logo" style="height: 32px;"></div> <div style="font-weight: bold; color: white; font-size: 24px; margin-right: 16px;">FriendTree</div> <div id="FTsearch">Search FriendTree</div> <div>Home · Groups · Events · Profile · Login</div> </div> /* end header */ <div id="FTsidebar"> <div class="section"> <div class="sec-head">Explore FriendTree</div> <div class="sidebar-item">Popular Groups</div> <div class="sidebar-item">Local Events</div> <div class="sidebar-item">FriendTree News</div> <div class="sidebar-item">Help Center</div> <div class="see-more">See more</div> </div> <div class="section"> <div class="sec-head">Upcoming Events Near You</div> <div class="sidebar-item">Neighborhood Assoc. Meeting</div> <div class="sidebar-item">Board Games & Pizza Night</div> <div class="sidebar-item">Dog Park Dog Party</div> <div class="sidebar-item">Community Cleanup Day</div> <div class="sidebar-item">Silent Book Club (Shhh...)</div> <div class="sec-foot"> <div class="local">Based on approximate location</div> <div class="see-more">See all trending</div> </div> </div> <div class="section"> <div class="sec-head">Active Nearby</div> <div style="display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px;"> <div class="FTavatar" style="background: #4CAF50;">SR</div> <div class="FTavatar" style="background: #2196F3;">CM</div> <div class="FTavatar" style="background: #FFC107;">SW</div> <div class="FTavatar" style="background: #FF7E79;">PL</div> <div class="FTavatar" style="background: #9C27B0;">BY</div> <div class="FTavatar" style="background: #607D8B;">TJ</div> </div> <div class="sec-foot"> <div class="local">128 people active within 10 miles</div> <div class="see-more">Find friends</div> </div> </div> <div class="section"> <div class="sec-head">Recent Photos Nearby</div> <div id="picgrid"> <<= ftimg();>> </div> <div class="sec-foot"> <div class="local">Public photos from your area</div> <div class="see-more">View more photos</div> </div> </div> </div> /* end left sidebar */ /* Main Content */ <div id="FTmain"> <div class="no-login">You're seeing public content in your area. Log in to see posts from your friends.</div> /* Posts */ <div class="FTpost"> <div class="FTposthead section"> <div class="FTavatar" style="background: #FF9800; font-size: 18px; height: 48px; width: 48px; margin-right: 10px;">TJ</div> <div> <span style="font-weight: bold;">Thomas Jacobs</span><br> <span class="subline"><<= fttime(1070);>> · Local User</span> </div> </div> <div class="FTpostbody section"> <p>Beach vacation with the family! 🏖️ Two days in and I'm already sunburnt in places I didn't know could burn. #WorthIt</p> </div> <div class="likes section">👍 24 · 💬 8 · 🚀 Share</div> </div> <div class="FTpost"> <div class="FTposthead section"> <div class="FTavatar" style="background: #FF5252; font-size: 18px; height: 48px; width: 48px; margin-right: 10px;">EM</div> <div> <span style="font-weight: bold;">Ethan Moore</span><br> <span class="subline"><<= fttime(1708);>> · Local User</span> </div> </div> <div class="FTpostbody section"> <p>Just finished my first marathon! Well, "finished" might be generous. More like "survived." The last six miles were pure torment and I questioned every life choice that led me to that moment.</p> <p>But crossing the finish line made it all worth it. Shoutout to my running group for the support, and to the kind stranger at mile 22 who handed me a popsicle. Already thinking about next year's race... though maybe the half marathon instead.</p> </div> <div class="likes section">👍 128 · 💬 34 · 🚀 Share</div> </div> <div class="FTpost"> <div class="FTposthead section"> <div class="FTavatar" style="background: #795548; font-size: 18px; height: 48px; width: 48px; margin-right: 10px;">BC</div> <div> <span style="font-weight: bold;">Bean Counter Cafe</span><br> <span class="subline"><<= fttime(3213);>> · Local Business</span> </div> </div> <div class="FTpostbody section"> <p>New seasonal drink alert! Try our Caramel Cloud, a frothy iced latte with salted caramel syrup. Available all month. Tag your coffee addict friends!</p> </div> <div class="likes section">👍 87 · 💬 12 · 🚀 Share</div> </div> <div class="FTpost"> <div class="FTposthead section"> <div class="FTavatar" style="background: #7C4DFF; font-size: 18px; height: 48px; width: 48px; margin-right: 10px;">CC</div> <div> <span style="font-weight: bold;">Central Cinema</span><br> <span class="subline"><<= fttime(4361);>> · Local Business</span> </div> </div> <div class="FTpostbody section"> <p>Announcing next month's Classic Film Series! We'll be screening some beloved films from the 80s and 90s.</p> <p>Schedule includes: <br>• 7th: The Princess Bride (with quote-along subtitles) <br>• 14th: Back to the Future (costume contest!) <br>• 21st: Jurassic Park (DTS surround sound experience) <br>• 28th: The Thing (plus social deduction party games after)</p> <p>Tickets $12, or $40 for all four films. Concession specials each night themed to the movie!</p> </div> <div class="likes section">👍 215 · 💬 47 · 🚀 Share</div> </div> <div class="FTpost"> <div class="FTposthead section"> <div class="FTavatar" style="background: #2196F3; font-size: 18px; height: 48px; width: 48px; margin-right: 10px;">MK</div> <div> <span style="font-weight: bold;">Maya Kumar</span><br> <span class="subline"><<= fttime(6064);>> · Local User</span> </div> </div> <div class="FTpostbody section"> <p>Can anyone recommend a good mechanic? My car started making a noise that sounds suspiciously like money leaving my wallet.</p> </div> <div class="likes section">👍 42 · 💬 17 · 🚀 Share</div> </div> <div class="FTpost"> <div class="FTposthead section"> <div class="FTavatar" style="background: #00BCD4; font-size: 18px; height: 48px; width: 48px; margin-right: 10px;">KG</div> <div> <span style="font-weight: bold;">Kira Gupta</span><br> <span class="subline"><<= fttime(11645);>> · Local User</span> </div> </div> <div class="FTpostbody section"> <p>Has anyone else noticed their router lights blinking in weird sequences after midnight? Mine's been "counting" for three nights straight. It stops by the time I get up in the mornings.</p> <p>I tried unplugging it—the numbers just started over. Should I be worried, or is this just a new firmware thing?</p> </div> <div class="likes section">👍 97 · 💬 42 · 🚀 Share</div> </div> <div class="FTpost"> <div class="FTposthead section"> <div class="FTavatar" style="background: #8BC34A; font-size: 18px; height: 48px; width: 48px; margin-right: 10px;">TP</div> <div> <span style="font-weight: bold;">Trevor Park</span><br> <span class="subline"><<= fttime(15022);>> · Local User</span> </div> </div> <div class="FTpostbody section"> <p>Confession time: I've developed an unhealthy obsession with sourdough bread baking, and now I can't stop. What started as a hobby has turned into a full-blown lifestyle.</p> <p>My starter's name is Dough-reen (get it?), and she's more high-maintenance than my ex. The kitchen looks like a flour bomb went off. I dream about hydration percentages. My neighbors are both blessed and cursed by my weekly bread deliveries.</p> <p>Current project: perfecting a roasted garlic and rosemary loaf. Third attempt this weekend. The search for the perfect crust continues!</p> </div> <div class="likes section">👍 143 · 💬 38 · 🚀 Share</div> </div> <div class="FTpost"> <div class="FTposthead section"> <div class="FTavatar" style="background: #E91E63; font-size: 18px; height: 48px; width: 48px; margin-right: 10px;">LP</div> <div> <span style="font-weight: bold;">Lisa Park</span><br> <span class="subline"><<= fttime(18046);>> · Local User</span> </div> </div> <div class="FTpostbody section"> <p>The crossword today: "7a. what you lost in 2012" The answer was "your shadow". I checked, but it’s still there.</p> </div> <div class="likes section">👍 103 · 💬 29 · 🚀 Share</div> </div> <div class="FTpost"> <div class="FTposthead section"> <div class="FTavatar" style="background: #FF9800; font-size: 18px; height: 48px; width: 48px; margin-right: 10px;">RR</div> <div> <span style="font-weight: bold;">Riverwalk Readers</span><br> <span class="subline"><<= fttime(26892);>> · Group</span> </div> </div> <div class="FTpostbody section"> <p>Our book club selection is "Catch-22" by Joseph Heller! We'll be meeting on the 12th at 7pm in the Bean Counter Cafe (they've agreed to stay open late for us).</p> <p>Discussion questions will focus on: <br>- Which is more absurd: war or bureaucracy? <br>- Is it sane to be cowardly, or cowardly to be sane? <br>- How can one overcome the catch-22 paradox?</p> <p>New members always welcome! No need to finish the whole book. Come even if you just read a few chapters. We promise no spoilers until the end of the discussion.</p> </div> <div class="likes section">👍 62 · 💬 11 · 🚀 Share</div> </div> <div class="FTpost"> <div class="FTposthead section"> <div class="FTavatar" style="background: #4CAF50; font-size: 18px; height: 48px; width: 48px; margin-right: 10px;">PC</div> <div> <span style="font-weight: bold;">City-County Libraries</span><br> <span class="subline"><<= fttime(30318);>> · Public Page</span> </div> </div> <div class="FTpostbody section"> <p>Teen Reading Challenge starts next week! Read 5 books by the end of the month to enter our prize drawing. Sign up at the front desk.</p> </div> <div class="likes section">👍 56 · 💬 3 · 🚀 Share</div> </div> <div class="FTpost"> <div class="FTposthead section"> <div class="FTavatar" style="background: #9C27B0; font-size: 18px; height: 48px; width: 48px; margin-right: 10px;">DR</div> <div> <span style="font-weight: bold;">Diego Rodriguez</span><br> <span class="subline"><<= fttime(38250);>> · Local User</span> </div> </div> <div class="FTpostbody section"> <p>Three years at this company today! Celebrating with takeout and an early bedtime because adulthood is glamorous like that.</p> </div> <div class="likes section">👍 78 · 💬 14 · 🚀 Share</div> </div> <div class="FTpost"> <div class="FTposthead section"> <div class="FTavatar" style="background: #FF5722; font-size: 18px; height: 48px; width: 48px; margin-right: 10px;">AS</div> <div> <span style="font-weight: bold;">Aisha Sampson</span><br> <span class="subline"><<= fttime(45556);>> · Local User</span> </div> </div> <div class="FTpostbody section"> <p>Does anyone else's toddler turn into a tiny philosopher at bedtime? "But why do we sleep?" "Where do dreams come from?" Bedtime for the kiddo is existential crisis time for mom...</p> </div> <div class="likes section">👍 65 · 💬 22 · 🚀 Share</div> </div> <div class="FTpost"> <div class="FTposthead section"> <div class="FTavatar" style="background: #9E9E9E; font-size: 18px; height: 48px; width: 48px; margin-right: 10px;">JM</div> <div> <span style="font-weight: bold;">Jess Morgan</span><br> <span class="subline"><<= fttime(56890);>> · Local User</span> </div> </div> <div class="FTpostbody section"> <p>Does anyone else keep getting notifications for a FT group called Willow Creek Garden Club". I never joined, but I keep getting "new message" "new message" "new message". When I click the link it says "page not found"? Weird.</p> </div> <div class="likes section">👍 231 · 💬 56 · 🚀 Share</div> </div> <div class="FTpost"> <div class="FTposthead section"> <div class="FTavatar" style="background: #607D8B; font-size: 18px; height: 48px; width: 48px; margin-right: 10px;">JR</div> <div> <span style="font-weight: bold;">Jamal Reynolds</span><br> <span class="subline"><<= fttime(62872);>> · Local User</span> </div> </div> <div class="FTpostbody section"> <p>Finally finished building that patio furniture set! Only took three weekends, four trips to the hardware store, and one minor existential crisis.</p> </div> <div class="likes section">👍 37 · 💬 9 · 🚀 Share</div> </div> <div class="FTpost"> <div class="FTposthead section"> <div class="FTavatar" style="background: #3F51B5; font-size: 18px; height: 48px; width: 48px; margin-right: 10px;">MM</div> <div> <span style="font-weight: bold;">Maria's Market</span><br> <span class="subline"><<= fttime(68489);>> · Local Business</span> </div> </div> <div class="FTpostbody section"> <p>This week's special: local honey and fresh sourdough bread. Perfect pairing! Open Wednesday-Sunday 8am-6pm.</p> </div> <div class="likes section">👍 29 · 💬 5 · 🚀 Share</div> </div> <div class="FTpost"> <div class="FTposthead section"> <div class="FTavatar" style="background: #607D8B; font-size: 18px; height: 48px; width: 48px; margin-right: 10px;">DS</div> <div> <span style="font-weight: bold;">Derek Simmons</span><br> <span class="subline"><<= fttime(76300);>> · Local User</span> </div> </div> <div class="FTpostbody section"> <p>Our office coffee maker broke again. That's the third time this month. We tried different models each time, so it's not a quality issue.</p> <p>The weird thing is, when I tried bringing my kitchen counter machine from home, it conked out after just a day... but when I brought it home, it started working again.</p> <p>I wonder if the other coffee makers would have still worked if someone brought them home instead of throwing them out?</p> </div> <div class="likes section">👍 178 · 💬 83 · 🚀 Share</div> </div> <div class="FTpost"> <div class="FTposthead section"> <div class="FTavatar" style="background: #009688; font-size: 18px; height: 48px; width: 48px; margin-right: 10px;">KW</div> <div> <span style="font-weight: bold;">Kevin Wu</span><br> <span class="subline"><<= fttime(78282);>> · Local User</span> </div> </div> <div class="FTpostbody section"> <p>Just ran into Mrs. Warner, my middle school English teacher at the grocery store. Still called me by the wrong name after 12 years. Some things never change.</p> </div> <div class="likes section">👍 112 · 💬 31 · 🚀 Share</div> </div> <div class="FTpost"> <div class="FTposthead section"> <div class="FTavatar" style="background: #FFC107; font-size: 18px; height: 48px; width: 48px; margin-right: 10px;">SG</div> <div> <span style="font-weight: bold;">Sarah Goldberg</span><br> <span class="subline"><<= fttime(83670);>> · Local User</span> </div> </div> <div class="FTpostbody section"> <p>Does anybody know whose dog it was that was wearing sunglasses at the dog park today? I asked everybody there, and no one said she was theirs.</p> <p>I tried to get close to look her the collar, and I swear I saw the dog wink at me behind her sunglasses.</p> </div> <div class="likes section">👍 93 · 💬 18 · 🚀 Share</div> </div> <div class="FTpost"> <div class="FTposthead section"> <div class="FTavatar" style="background: #795548; font-size: 18px; height: 48px; width: 48px; margin-right: 10px;">BB</div> <div> <span style="font-weight: bold;">Burger & Brew</span><br> <span class="subline"><<= fttime(114834);>> · Local Business</span> </div> </div> <div class="FTpostbody section"> <p>Big changes coming to Burger & Brew soon! We're expanding our hours and adding evening offerings, starting with our grand re-opening next week.</p> <p>New features include: <br>- Specials on local craft beer after 4pm <br>- Live acoustic music every Thursday night <br>- Extended dessert menu featuring pastries from Sugar Coma bakery <br>- Cozy new lounge area with board games and charging stations</p> <p>Same great drinks, just more ways to enjoy our space. First 50 customers on opening night get a free commemorative mug!</p> </div> <div class="likes section">👍 189 · 💬 27 · 🚀 Share</div> </div> <div class="FTpost"> <div class="FTposthead section"> <div class="FTavatar" style="background: #673AB7; font-size: 18px; height: 48px; width: 48px; margin-right: 10px;">DC</div> <div> <span style="font-weight: bold;">David Chen</span><br> <span class="subline"><<= fttime(141130);>> · Local User</span> </div> </div> <div class="FTpostbody section"> <p>My plants are thriving and I have no idea why. I talk to them sometimes but mostly forget to water them. Maybe neglect is the secret?</p> </div> <div class="likes section">👍 47 · 💬 11 · 🚀 Share</div> </div> <div class="FTpost"> <div class="FTposthead section"> <div class="FTavatar" style="background: #3F51B5; font-size: 18px; height: 48px; width: 48px; margin-right: 10px;">LN</div> <div> <span style="font-weight: bold;">Lena Nguyen</span><br> <span class="subline"><<= fttime(156890);>> · Local User</span> </div> </div> <div class="FTpostbody section"> <p>I tried to fold a fitted sheet today and turned myself into a 600 thread count burrito. I swear these things are designed by the same people who made IKEA instructions.</p> <p>Now it’s wadded up in the closet, and I’ve accepted that some mysteries aren’t meant to be solved. At least my bed is made. Sort of.</p> </div> <div class="likes section">👍 204 · 💬 49 · 🚀 Share</div> </div> </div> /* end main */ </div> </div> <</nobr>>
<<nobr>> <<set $ark_active to false>> <<set $ark_quiet to 0>> <style> #FTback { width: 100%; height: max-content; min-height: 100%; background: var(--bgreyE); position: relative; overflow: hidden; } #FTpage { color: var(--bgrey2); height: 100%; display: grid; grid-template-columns: 300px 1fr; grid-template-rows: 60px 1fr; gap: 10px; max-width: 1200px; margin: 0 auto; background: var(--bgreyF); box-shadow: 0px 0px 8px var(--bgrey4); } #FTheader { grid-column: 1 / -1; background: #2080F0; padding: 10px 20px; display: flex; align-items: center; box-shadow: 0 1px 3px #0001; } #FTsearch { flex-grow: 1; height: 80%; width: min-content; padding: 6px; border-radius: 15px; border: 1px solid var(--bgrey2); display: flex; align-items: center; margin-right: 8px; } #FTsidebar { background: white; border-radius: 0 8px 0 0; padding: 10px; box-shadow: 0 1px 3px #0001; } .section { margin-bottom: 10px; border-bottom: 1px solid #ddd; padding-bottom: 10px; } .event-details { font-size: 14px; margin-bottom: 4px; } .rsvp-butt { background: #606060; color: #a0a0a0; border: none; padding: 4px 8px; border-radius: 4px; pointer-events: none; } .rsvp-exp { color: #a0a0a0; font-style: italic; font-size: 10px; } #picgrid { display: grid; width: 100%; grid-template-rows: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr); aspect-ratio: 1/1; gap: 3px; img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1/1; } } .FTpost { background: white; border: 1px solid #ddd; border-radius: 8px; padding: 15px; margin-bottom: 20px; box-shadow: 0 1px 3px #0001; } .FTposthead { display: flex; align-items: center; margin-bottom: 10px; } .FTavatar { width: 32px; height: 32px; border-radius: 50%; background: #808080; color: white; font-weight: bold; display: flex; align-items: center; justify-content: center; margin-right: 6px; font-size: 12px; } .subline { font-size: 10px; } .ark_sign { display: inline-block; width: 1.1ch; text-align: center; animation: arkPulse 3s ease-in-out infinite; } #arkangel { position: absolute; top: 0; left: 0; font-size: 32px; width: 0; height: 0; pointer-events: none; line-height: normal; text-shadow: 0px 0px 5px #fff4, 0px 0px 4px #fff4, 0px 0px 3px #fff4; transition: transform 0.1s ease-out; } #wobble { width: 24px; height: 24px; position: absolute; animation: weave 7.3s ease-in-out infinite; translate: -50% -50%; } #tiny { animation: grow 1s ease-in-out 1; } #orbit { animation: arkOrbit 3.1s linear infinite; } #skittish { transition: transform 2s ease; } .scared { transform: translateX(120vw); } @keyframes arkPulse { 0%, 80%, 100% { transform: scale(1); } 90% { transform: scale(1.15); } } @keyframes arkOrbit { from { transform: rotate(0deg) translateX(64px); } to { transform: rotate(360deg) translateX(64px); } } @keyframes grow { from { transform: scale(0) translateX(-64px); } to { transform: scale(1) translateX(0px); } } @keyframes weave { 0% { transform: translate(0%, 0%) rotate(0deg); } 10% { transform: translate(60%, -20%) rotate(1deg); } 25% { transform: translate(-80%, 20%) rotate(-1.5deg); } 40% { transform: translate(40%, 40%) rotate(0.5deg); } 55% { transform: translate(-60%, -30%) rotate(-1deg); } 70% { transform: translate(80%, 10%) rotate(1.2deg); } 85% { transform: translate(-40%, 30%) rotate(-0.8deg); } 100% { transform: translate(0%, 0%) rotate(0deg); } } </style> <div id="FTback"> <div id="FTpage"> <div id="FTheader"> <div style="margin-right: 4px;"><img @src="$FT_logo" style="height: 32px;"></div> <div style="font-weight: bold; color: white; font-size: 24px; margin-right: 16px;">FriendTree</div> <div id="FTsearch">Search FriendTree</div> <div style="">Home · Groups · Events · Profile · Login</div> </div> /* end header */ <div id="FTsidebar"> <div class="section" style="font-size: 20px; font-weight: bold;">Willow Creek Garden Club</div> <div class="section"> <span style="font-weight: bold;">About</span> <p>A community for gardeners in the Willow Creek and Pinevale area to share tips, swaps seeds, and grow together!</p> </div> <div class="section"> <span style="font-weight: bold;">Members:</span> 189 <div style="display: flex; margin-top: 10px; align-items: center;"> <div class="FTavatar" style="background: #4CAF50;">SR</div> <div class="FTavatar" style="background: #2196F3;">CM</div> <div class="FTavatar" style="background: #FFC107;">SW</div> <div class="FTavatar" style="background: #FF7E79;">PL</div> <div class="FTavatar" style="background: #9C27B0;">BY</div> <div style="font-style: italic; font-size: 10px;">(184 more)</div> </div> </div> <div class="section"> <span style="font-weight: bold;">Upcoming Events</span> <p class="event-details">Community Seed Swap – Aug 20</p> <button class="rsvp-butt">RSVP</button> <span class="rsvp-exp">(event past)</span> <p class="event-details">Tending & Picnic – June 15</p> <button class="rsvp-butt">RSVP</button> <span class="rsvp-exp">(event past)</span> <p class="event-details">Spring Work Bee - March 28</p> <button class="rsvp-butt">RSVP</button> <span class="rsvp-exp">(event past)</span> </div> <div class="section"> <span style="font-weight: bold;">Group Images</span> <div id="picgrid"> <img @src="$FT_tom"> <img @src="$FT_lady"> <img @src="$FT_beds"> <img @src="$FT_rows"> <img @src="$FT_tool"> <img @src="$FT_meet"> <img @src="$FT_veg"> <img @src="$FT_comp"> <img @src="$FT_pest"> </div> </div> </div> /* end sidebar */ <div id="FTmain"> <div class="FTpost"> <div class="FTposthead section"> <div class="FTavatar" style="background: #4CAF50; font-size: 18px; height: 48px; width: 48px; margin-right: 10px;">GT</div> <div> <span style="font-weight: bold;">Green_Thumb_Gary</span><br> <span class="subline">5 years ago · Public</span> </div> </div> <div class="FTpostbody section"> <p>Our tomato plants are thriving this year! 🍅 Here’s a quick tip: <strong>mulch heavily</strong> to retain moisture and prevent weeds. Anyone else seeing great results?</p> <img @src="$FT_tom" alt="Tomato plants in a garden" style="width: 512px;"> </div> <div class="likes section">👍 17 · 💬 3</div> <div style="font-weight: bold; margin-bottom: 10px;">Comments (3)</div> <div style="display: flex; margin-bottom: 10px;"> <div class="FTavatar" style="background: #FF9800;">GQ</div> <div> <div style="font-weight: bold;">GardenQueen</div> <div>Mulching saved my tomatoes last summer! I use straw – works wonders.</div> <div class="subline">5 years ago · Like · Reply</div> </div> </div> <div style="display: flex;"> <div class="FTavatar" style="background: #9C27B0;">PD</div> <div> <div style="font-weight: bold;">Plantdad</div> <div>Try adding crushed eggshells too—extra calcium!</div> <div class="subline">5 years ago · Like · Reply</div> </div> </div> <div style="display: flex;"> <div class="FTavatar" style="background: #E57373;">GN</div> <div> <div style="font-weight: bold;">GardenNewb</div> <div>Hello? Is this group still active?</div> <div class="subline">2 years ago · Like · Reply</div> </div> </div> </div> <div class="FTpost"> <div class="FTposthead section"> <div class="FTavatar" style="background: #00796B; font-size: 18px; height: 48px; width: 48px; margin-right: 10px;">TC</div> <div> <span style="font-weight: bold;">TheComposterrr</span><br> <span class="subline">5 years ago · Public</span> </div> </div> <div class="FTpostbody section"> <p>I can share the results of my long-term ‘compost vs. store-bought fertilizer’ side-by-side test! 🌱 Left bed got my homemade compost (coffee grounds, eggshells, veg scraps), right bed got store brand. Results after 60 days:</p> <p>Home grown: Slower start, but plants are sturdier & pest-resistant. Great yield!</p> <p>Store brand: Explosive growth, but needed more watering and aphids LOVE them. Large yield, but vegetables lacked flavor (or maybe that's just my perception).</p> <p>Moral of the story? Patience pays off! You've already got all the ingredients for the best fertilizer: homemade compost! So just take the time to brew up a batch.</p> </div> <div class="likes section">👍 23 · 💬 4</div> <div style="font-weight: bold; margin-bottom: 10px;">Comments (4)</div> <div style="display: flex; margin-bottom: 10px;"> <div class="FTavatar" style="background: #B39DDB;">EW</div> <div> <div style="font-weight: bold;">Ecowarrior</div> <div>I swear by compost tea! It’s like steroids for my kale. 🥬</div> <div class="subline">5 years ago · Like · Reply</div> </div> </div> <div style="display: flex; margin-bottom: 10px;"> <div class="FTavatar" style="background: #5C6BC0;">NL</div> <div> <div style="font-weight: bold;">New_Leaf</div> <div>How do you keep raccoons out of your compost bin? Asking for a friend…</div> <div class="subline">5 years ago · Like · Reply</div> </div> </div> <div style="display: flex; margin-bottom: 10px;"> <div class="FTavatar" style="background: #00796B;">TC</div> <div> <div style="font-weight: bold;">TheComposterrr (OP)</div> <div>Bungee cords + a brick on top. Raccoons are Olympic athletes. 🦝</div> <div class="subline">5 years ago · Like · Reply</div> </div> </div> <div style="display: flex;"> <div class="FTavatar" style="background: #4CAF50;">GT</div> <div> <div style="font-weight: bold;">Green_Thumb_Gary</div> <div>Try adding comfrey leaves to your compost—natural nutrient bomb!</div> <div class="subline">5 years ago · Like · Reply</div> </div> </div> <div style="display: flex;"> <div class="FTavatar" style="background: #00796B;">TC</div> <div> <div style="font-weight: bold;">TheComposterrr (OP)</div> <div>Missing you guys today!</div> <div class="subline">3 years ago · Like · Reply</div> </div> </div> </div> <div class="FTpost"> <div class="FTposthead section"> <div class="FTavatar" style="background: #FFD54F; font-size: 18px; height: 48px; width: 48px; margin-right: 10px;">BF</div> <div> <span style="font-weight: bold;">LetsBeeFriends</span><br> <span class="subline">5 years ago · Public</span> </div> </div> <div class="FTpostbody section"> <p>After losing my hive last winter, I turned my yard into a pollinator sanctuary! Here’s what worked:</p> <p>• Native plants: Milkweed, purple coneflower, bee balm.</p> <p>• Water station: Shallow dish with marbles (so bees don’t drown).</p> <p>• No pesticides: Even ‘organic’ ones can harm beneficial bugs.</p> <p>Now my garden hums all day! 🐝 Share your pollinator tips below!</p> </div> <div class="likes section">👍 18 · 💬 4</div> <div style="font-weight: bold; margin-bottom: 10px;">Comments (4)</div> <div style="display: flex; margin-bottom: 10px;"> <div class="FTavatar" style="background: #8BC34A ;">BW</div> <div> <div style="font-weight: bold;">Butterfly_Witch</div> <div>Add a mud puddle for butterflies—they need minerals! ✨</div> <div class="subline">5 years ago · Like · Reply</div> </div> </div> <div style="display: flex; margin-bottom: 10px;"> <div class="FTavatar" style="background: #FF7043;">TT</div> <div> <div style="font-weight: bold;">TomatoTyrant (admin)</div> <div>Pinning this for the ‘No Pesticides’ reminder. Good info!</div> <div class="subline">5 years ago · Like · Reply</div> </div> </div> <div style="display: flex; margin-bottom: 10px;"> <div class="FTavatar" style="background: #5C6BC0;">NL</div> <div> <div style="font-weight: bold;">New_Leaf</div> <div>I put up ‘bee hotel’ tubes but squirrels use them as snack storage. 😭</div> <div class="subline">5 years ago · Like · Reply</div> </div> </div> <div style="display: flex;"> <div class="FTavatar" style="background: #FFD54F;">BF</div> <div> <div style="font-weight: bold;">LetsBeeFriends</div> <div>Mount them higher! Squirrels are lazy climbers… mostly.</div> <div class="subline">5 years ago · Like · Reply</div> </div> </div> </div> </div> /* end main */ <div id="arkangel" class="hidden"><div id="tiny"><div id="wobble"><div id="orbit"><div id="skittish">ꙮ</div></div></div></div></div> </div> </div> <<done>> <<= window.randSwap(document.getElementById("FTpage"));>> <<= window.randSwap(document.getElementById("FTpage"));>> <<= window.randSwap(document.getElementById("FTpage"));>> <<repeat 3s>> <<if $ark_active>> <<run console.log("ark active");>> <<stop>> <<elseif $WOpage isnot "Garden Club">> <<stop>> <<elseif $ark_quiet gt 0>> <<set $ark_quiet -= 1>> <<else>> <<script>> window.charSwap(document.getElementById("FTpage")); window.randSwap(document.getElementById("FTpage")); window.randSwap(document.getElementById("FTpage")); window.randSwap(document.getElementById("FTpage")); <</script>> <</if>> <</repeat>> <<script>> const s = State.variables; /* function to add ~Arkangel to the page once discovered (by mouseover) */ document.getElementById("FTpage").addEventListener('mouseover', function(e) { if (e.target.classList.contains("ark_sign")) { s.ark_active = true; s.ark_found = true; document.getElementById('arkangel').classList.remove('hidden'); window.charSwap(document.getElementById("FTpage")); } }); /* function to make ~Arkangel follow the player's mouse */ var FTback = document.getElementById("FTback"); var arkangel = document.getElementById("arkangel"); FTback.addEventListener('mousemove', (e) => { var rect = FTback.getBoundingClientRect(); var x = e.clientX - rect.left; var y = e.clientY - rect.top; arkangel.style.transform = `translate(${x}px, ${y}px)`; }); /* function to make skittish ~Arkangel flee from clicks */ var page = document.getElementById("FTback"); var skittish = document.getElementById('skittish'); FTback.addEventListener('click', function(e) { if (s.ark_active) { s.b2_time -= 3; skittish.classList.add('scared'); setTimeout(() => { skittish.classList.remove('scared'); }, 2200); } else { window.charSwap(document.getElementById("FTpage")); s.ark_quiet = 3; } }); <</script>> <</done>> <</nobr>>
<<nobr>><div id="OSlogin"><div id="login"><img @src="$logo_pareid" style="height: 256px;"> <p><span style="font-size: 32px; font-weight: bold;">Pareid.OS</span></p> <div id="loadbar"><p>Starting...</p> <p><<showmeter load 0>></p> </div></div></div> <<timed 0.5s>><<updatemeter load 0.1>><</timed>> <<timed 1.0s>><<updatemeter load 0.3>><</timed>> <<timed 1.5s>><<updatemeter load 0.4>><</timed>> <<timed 2.0s>><<updatemeter load 0.8>><</timed>> <<timed 3.0s>><<updatemeter load 1.0>><</timed>> <<timed 3.5s>><<replace "#login">><div><p><img @src="$icon_player" style="height: 128px;"></p> <p><span style="font-size: 20px; line-height: normal;">Welcome back,</span> <span style="font-size: 32px; font-weight: bold; line-height: normal;">Pigeon!</span></p> <p>Password: <<typesim "****************">> <<timed 0.75s>><<goto "Desktop">><</timed>> <</typesim>></p></div><</replace>> <<script>> const targ = document.getElementsByClassName('type-sim')[0]; targ.select(); /* function to process the SL search bar on 'enter' */ targ.addEventListener("keydown", function (e) { if (e.key === "Enter") { e.preventDefault(); targ.setAttribute('disabled', ''); targ.setAttribute('aria-disabled', 'true'); targ.setAttribute('data-last-tabindex', ''); targ.setAttribute('tabindex', '-1'); $.wiki('<<timed 0.75s>><<goto "Desktop">><</timed>>'); } }); <</script>> <</timed>> <</nobr>>
<<removeclass "#notify" "open">> /* if a notify is open when we go to a new passage, close it */ <<repeat $tick>> <<if $notif>> /* check notifications */ /* initial CM from unkn */ <<if $unkn_1 is false>> <<if $unkn_delay lte 0>> <<set $unkn_CM to 4>> <<set $unkn_1 to true>> <<notify 12s>><<include "concord-notif">><</notify>> <<redo "Concord">><<redo "leftpan">> <<else>> <<set $unkn_delay -= 0.1>> <</if>> <</if>> <<if $ntfy_trig and State.passage is "Desktop">> <<set $ntfy_trig to false>> <<replace "#load_container">><<include "concord-loading">><</replace>> <</if>> /* first CM from byte */ <<if $byte_0 and not $byte_1>> <<if $byte_delay lte 0>> <<set $byte_CM to 1>> <<set $byte_1 to true>> <<notify 12s>><<include "concord-notif">><</notify>> <<redo "Concord">><<redo "leftpan">> <<else>> <<set $byte_delay -= 0.1>> <</if>> <</if>> /* second CM from byte */ <<if $ark_found and not $byte_2>> <<if $b2_delay lte 0>> <<set $byte_2 to true>> <<set $byte_chat to $byte_chat + "<<include \"b2r0a\">>">> <<set $byte_resp to "b2r1">> <<set $byte_CM to 1>> <<notify 12s>><<include "concord-notif">><</notify>> <<redo "Concord">><<redo "leftpan">> <<else>> <<set $b2_delay -= 0.1>> <</if>> <</if>> <</if>> /* welcome messages on 404 society */ <<if $wcount lte 10>> <<if $welcome>> <<include "404 welcome">> <</if>> <</if>> <</repeat>>
<<nobr>><style> #PCpage { position: relative; z-index: 10; max-width: 100%; padding: 20px; height: min-content; min-height: 100%; } #PCpage::before { content: ""; position: absolute; inset: 0; background: url('https://i.imgur.com/eHQzFEB.png') 0 0 / 600px ; opacity: 0.2; z-index: -1; } #PCtitle { font-size: 40px; width: 100%; text-align: center; overflow: hidden; white-space: nowrap; animation: scr-l 7.5s linear infinite; margin-bottom: 20px; } .img-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; width: 100%; } .img-row > img { max-height: 250px; height: auto; width: auto; max-width: 100%; object-fit: contain; } #PCbody { width: 50%; margin-top: 40px; margin-left: auto; margin-right: auto; font-size: 20px; } #PCcounter { font-family: "Google Sans Code", monospace; font-size: 20px; background: linear-gradient(to bottom, #303030 50%, #202020 50%); border: 1px solid #101010; border-radius: 2px; padding: 0px 2px; display: inline; position: relative; } #PCcounter::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; background: #10101080; } @keyframes scr-l { from { transform: translateX(75%); } to { transform: translateX(-75%); } } </style> <</nobr>><div id="PCpage"> <<nobr>> <div id="PCtitle">Welcome to the Pigeon Coop!</div> <div class="img-row"><img @src="$PC_pic1"><img @src="$PC_pic2"><img @src="$PC_pic3"></div> <</nobr>> <div id="PCbody"><center><span style="font-size: 30px;">Hi, my name is Pigeon!</span><br>(my pronouns are they/them) <img @src="$PC_pix"></center> About me: - I want to go to college for pigeon-keeping. (Well, veterinary science. But I'm going to use what I learn to keep pigeons!) - my <img @src="$icon_concord" class="appfavicon"> concord handle is @pigeon - here's my favorite song! \(^▽^)/ <center><audio id="7na" controls> <source @src="$wav_7na" type="audio/wav"> Your browser does not support the audio element. :( </audio></center> <center><img @src="$PC_pix"></center>Interests: - pigeons! - making bad websites (like this one) - hanging out with friends on <img @src="$icon_concord" class="appfavicon"> concord <center><img @src="$PC_pix"> <img @src="$PC_pix"> <img @src="$PC_pix"> You are pigeon number <<= window.counter($PCvis)>><<set $PCvis += 1>> in the coop!</center></div></div><<nobr>> <<done>><<script>> console.log(settings.autoplay); const audio = document.getElementById('7na'); audio.volume = 0.25; if (settings.autoplay == true) { audio.play(); } <</script>><</done>> <</nobr>>
<<nobr>> <style> #SLerrpage { width: 50%; min-width: 500px; margin-top: 64px; margin-left: auto; margin-right: auto; gap: 16px; } #SLerrbox { display: flex; align-items: center; gap: 16px; border: 1px dotted var(--bgrey8); padding: 16px; border-radius: 8px; } #SLerrimg { border: 1px dotted var(--bgrey8); padding: 16px; border-radius: 6px; img { max-width: 128px; } } </style> <div id="SLerrpage"><div id="SLerrbox"><div>Sorry, something went wrong. <br><br> Your search, "<span class="mono"><<= $SLsearch>></span>", could not be completed. <br><br> We are experiencing technical difficulties with our servers. Expected resolution time is <span class="mono grey"> NaN </span> minutes. Please try again then!</div> <div id="SLerrimg"><div style="text-align: center; font-size: 20px; margin-bottom: 8px;"><span class="mono grey">Error 503</span></div><img @src="$SL_broke"></div></div> <div><<link "Home">><<set $WOurlbar to "web#>searchlight.pub>index:page">><<set $WOpage to "Searchlight">><<redo "WOredo">><</link>></div></div> <</nobr>>
<<nobr>> <style> #scrap { height: 100%; overflow-y: auto; padding: 8px; background-color: var(--bgrey2); border: 1px solid var(--bgrey1); border-radius: 8px; } #scbut { display: inline-block; width: 110px; } </style> <div class="appwindow"> <div class="apptitlebar"> <img @src="$icon_scrap" class="appfavicon"> Scrap Pile <div id="close" class="appclose"><<link "">><<goto "Desktop">><</link>><i class="fa-solid fa-circle-xmark"></i></div> </div> <div class="appmenubar"><<do tag "scrap">> <<if $scrapEmpty>><<button "@@.disabled;#scbut;Scrap empty!@@">><</button>><<else>><<button "@@#scbut; Clear scrap!@@">><<set $scrapEmpty to true>><<redo "scrap">><</button>><</if>><</do>> </div> <div class="appbody" style="height: calc(100% - 4em);"> <div id="scrap"> <<do tag "scrap">> <<if $scrapEmpty isnot true>> <span class="dot"><img @src="$icon_file" style="height:18px;"> project_final_FINAL_USE_THIS_ONE_v5.twee </span> <p/><span class="dot"><img @src="$icon_file" style="height:18px;"> untitled_twine_project_DRAFT_final_v3_REALLYFINAL.twee </span> <p/><span class="dot"><img @src="$icon_file" style="height:18px;"> story_WIP_new_idea_OLD_version_FIXED.twee </span> <p/><span class="dot"><img @src="$icon_file" style="height:18px;"> untitled_1_rewrite_FINAL_v4_REVISED.twee </span> <p/><span class="dot"><img @src="$icon_file" style="height:18px;"> twine_game_idea_SCRAPPED_unused_REDO.twee </span> <p/><span class="dot"><img @src="$icon_file" style="height:18px;"> working_title_NEWFINAL_OLDVERSION.twee </span> <p/><span class="dot"><img @src="$icon_file" style="height:18px;"> final_draft_NEW_IDEA_PREVIOUS.twee </span> <p/><span class="dot"><img @src="$icon_file" style="height:18px;"> my_twine_file_DRAFT2_ACTUALFINAL_copy.twee </span> <p/><span class="dot"><img @src="$icon_file" style="height:18px;"> backup_of_backup_ORIGINAL_EDIT.twee </span> <p/><span class="dot"><img @src="$icon_file" style="height:18px;"> abandoned_project_RETRY_PLZ_WORK.twee </span> <p/><span class="dot"><img @src="$icon_file" style="height:18px;"> story_draft_2023_2024_recovered_v2.twee </span> <p/><span class="dot"><img @src="$icon_file" style="height:18px;"> experiment_OLD_backup_NEW_new_edits.twee </span> <<else>>Empty!<</if>> <</do>> </div> </div> </div> <</nobr>>
<<nobr>> <style> #SLpage { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; position: relative; } #SLback { display: block; max-width:100%; height: auto; position: relative; } #SLover { position: absolute; display: flex; justify-content: center; align-items: center; transform: translate(-50%, -50%); top: 50%; left: 50%; input { padding-right: 24px; background-color: black; } i { position: absolute; right: 6px; /* distance from right edge */ top: 50%; transform: translateY(-50%); color: #666; } } #SLslogan { position: absolute; display: flex; bottom: 0; justify-content: center; align-items: center; font-style: italic; color: var(--bgrey4); } </style> <div id="SLpage"> <div id="SLslogan">"Illuminate the obscure!"</div> <img @src="$SL_back" id="SLback"> <div id="SLover"> <<textbox "$SLsearch" "" autofocus>> <<link "\<i class='fa-solid fa-magnifying-glass'\>\</i\>">><<set $WOurlbar to "web#>searchlight.pub>server-error:page">><<set $WOpage to "SL Error">><<redo "WOredo">><</link>> </div> </div> <<done>> <<run document.querySelectorAll('input[name="textbox-slsearch"]').forEach(el => { el.setAttribute('maxlength', '256'); }); >> <<script>> /* function to process the SL search bar on 'enter' */ const slsearch = document.getElementById("textbox-slsearch"); slsearch.addEventListener("keydown", function (e) { if (e.key === "Enter" && document.activeElement.id === "textbox-slsearch") { e.preventDefault(); State.variables.SLsearch = slsearch.value; State.variables.WOpage = "SL Error"; $.wiki('<<redo "WOredo">>'); } }); <</script>> <</done>> <</nobr>>
~Pixelmoth
<<run console.log("StoryInit runs...");>> /* == a bunch of images == */ <<set $starttime to Math.floor(Date.now() / 1000)>> <<run console.log("startup time: ",$starttime)>> <<set $logo_pareid to "assets/logo_pareid.png">> /* Pareid.OS logo */ <<set $icon_concord to "assets/icon_concord.png">> /* Concord icon */ <<set $icon_wotter to "assets/icon_wotter.png">> /* WaterOtter icon */ <<set $icon_file to "assets/icon_file.png">> /* twee file icon */ <<set $icon_scrap to "assets/icon_scrap.png">> /* scrap file icon */ <<set $icon_tune to "assets/icon_tune.png">> /* tuning icon */ /* desktop dummy icons */ <<set $icon_diplo to "assets/icon_diplo.png">> /* Diplodocus */ <<set $icon_horus to "assets/icon_horus.png">> /* Horus */ <<set $icon_orbit to "assets/icon_orbit.png">> /* Orbit */ <<set $icon_circuit to "assets/icon_circuit.png">> /* Circuit Map */ <<set $icon_android to "assets/icon_android.png">> /* Android */ <<set $icon_castle to "assets/icon_castle.png">> /* Stop Castle */ /* user icons */ <<set $icon_user to "assets/icon_user.png">> /* default user icon */ <<set $icon_unknown to "assets/icon_unknown.gif">> /* error user */ <<set $icon_ru01 to "assets/icon_ru01.png">> <<set $icon_ru02 to "assets/icon_ru02.png">> <<set $icon_ru03 to "assets/icon_ru03.png">> <<set $icon_ru04 to "assets/icon_ru04.png">> <<set $icon_ru05 to "assets/icon_ru05.png">> <<set $icon_ru06 to "assets/icon_ru06.png">> <<set $icon_ru07 to "assets/icon_ru07.png">> <<set $icon_ru08 to "assets/icon_ru08.png">> <<set $icon_ru09 to "assets/icon_ru09.png">> <<set $icon_ru10 to "assets/icon_ru10.png">> <<set $icon_ru11 to "assets/icon_ru11.png">> <<set $icon_ru12 to "assets/icon_ru12.png">> <<set $icon_ru13 to "assets/icon_ru13.png">> <<set $icon_ru14 to "assets/icon_ru14.png">> <<set $icon_ru15 to "assets/icon_ru15.png">> <<set $icon_ru16 to "assets/icon_ru16.png">> <<set $icon_ru17 to "assets/icon_ru17.png">> <<set $icon_ru18 to "assets/icon_ru18.png">> <<set $icon_ru19 to "assets/icon_ru19.png">> <<set $icon_ru20 to "assets/icon_ru20.png">> <<set $icon_ru21 to "assets/icon_ru21.png">> <<set $icon_ru22 to "assets/icon_ru22.png">> <<set $icon_ru23 to "assets/icon_ru23.png">> /* 404 soc members*/ <<set $icon_arach to "assets/icon_arach.png">> /* Arachne */ <<set $icon_buff to "assets/icon_buff.png">> /* Buffer Witch */ <<set $icon_byte to "assets/icon_byte.png">> /* ByteGeist */ <<set $icon_coff to "assets/icon_coff.png">> /* coffeefiltered */ <<set $icon_dotc to "assets/icon_dotc.png">> /* dotcomrade */ <<set $icon_scsp to "assets/icon_scsp.png">> /* ScriptSpectre */ <<set $logo_404soc to "assets/logo_404soc.png">> /* 404 Soc server logo */ /* dummy server logos */ <<set $logo_gdg to "assets/logo_gdg.png">> /* GDG */ <<set $logo_ambi to "assets/logo_ambi.png">> /* AmbiProg */ <<set $logo_hell to "assets/logo_hell.png">> /* Hell.Exe */ <<set $logo_sff to "assets/logo_sff.png">> /* Secret Forest Fellowship */ <<set $logo_gn to "assets/logo_gn.png">> /* Game Night */ <<set $logo_world to "assets/logo_world.png">> /* world chat */ <<set $SL_back to "assets/SL_back.png">> /* background image for Searchlight */ <<set $SL_broke to "assets/SL_broke.png">> /* error image */ /* assets for Pigeon Coop */ <<set $PC_pic1 to "assets/PC_pic1.png">> <<set $PC_pic2 to "assets/PC_pic2.png">> <<set $PC_pic3 to "assets/PC_pic3.png">> <<set $PC_pix to "assets/PC_pix.gif">> /* pixel pigeon gif */ <<set $wav_7na to "assets/wav_7na.wav">> /* midi of "Seven Nation Army" */ <<set $PCvis to 205>> /* view counter default count */ /* FriendTree page */ <<set $FT_logo to "assets/FT_logo.png">> /* logo */ /* group images */ <<set $FT_lady to "assets/FT_lady.png">> <<set $FT_tom to "assets/FT_tom.png">> <<set $FT_beds to "assets/FT_beds.png">> <<set $FT_veg to "assets/FT_veg.png">> <<set $FT_rows to "assets/FT_rows.png">> <<set $FT_tool to "assets/FT_tool.png">> <<set $FT_meet to "assets/FT_meet.png">> <<set $FT_comp to "assets/FT_comp.png">> <<set $FT_pest to "assets/FT_pest.png">> /* == actual game variables == */ <<set $player to "Pigeon">> /* default player username */ <<set $icon_player to "assets/icon_player.png">> /* default player user icon */ <<set $trun_proc to false>> /* turn off the overall timer until desktop */ <<set $ntfy_trig to false>> /* variables for error user */ <<set $unkn_delay to 4.0>> <<set $unkn_1 to false>> <<set $unkn_CM to 0>> <<set $unkn_chat to "\<\<include \"u1r0a\"\>\>">> <<set $unkn_resp to "u1r1">> /* variables for ByteGeist */ <<set $byte_0 to false>> <<set $byte_delay to 2.3>> <<set $byte_1 to false>> <<set $byte_2 to false>> <<set $byte_CM to 0>> <<set $byte_chat to "\<\<include \"b1r0a\"\>\>">> <<set $byte_resp to "b1r1">> <<set $b1r5xa_ask to true>><<set $b1r5xb_ask to true>><<set $b1r5xc_ask to true>> <<set $b1r5ya_ask to true>><<set $b1r5yb_ask to true>><<set $b1r5yc_ask to true>> <<set $b2r3ax to "">> /* variables for 404 Society server */ <<set $request to false>> <<set $member to false>> <<set $c404 to "\<\<include \"404 chat\"\>\>">> <<set $r404 to "cursor">> <<set $typing to false>> <<set $welcome to false>> <<set $wcount to 0>> <<set $wmsgs to [ "<div class='msg'><div class='usericon'><img @src='$icon_ru09'></div><div class='msg-body'><div class='username'>ParsecEater</div><div>Welcome!</div></div></div>", "<div class='msg'><div class='usericon'><img @src='$icon_user' style='filter: hue-rotate(65deg);'></div><div class='msg-body'><div class='username'>popstatic</div><div>Hi, Pigeon! 👋</div></div></div>", "<div class='msg'><div class='usericon'><img @src='$icon_user' style='filter: hue-rotate(141deg);'></div><div class='msg-body'><div class='username'>jelloboi92</div><div>hey pigeon do u like puzzles. good. bc the static ~Void Echo puts out definitely spells something. or maybe i need sleep. 😵💫</div></div></div>", "<div class='msg'><div class='usericon'><img @src='$icon_ru06'></div><div class='msg-body'><div class='username'>hyperlinkhex</div><div>Greetings, Pigeon. Be sure to read the rules!</div></div></div>", "<div class='msg'><div class='usericon'><img @src='$icon_user' style='filter: hue-rotate(88deg);'></div><div class='msg-body'><div class='username'>cobwebsignal</div><div>another new person! Ive been here two weeks, so I can teach you everything! ✨</div></div></div>", "<div class='msg'><div class='usericon'><img @src='$icon_ru18'></div><div class='msg-body'><div class='username'>Bytegeist</div><div>Everybody, meet Pigeon! They did great with the ~Arkangel test, so I'm sure they'll fit in great here.</div></div></div>", "<div class='msg'><div class='usericon'><img @src='$icon_user' style='filter: hue-rotate(321deg);'></div><div class='msg-body'><div class='username'>frogmars</div><div>*waves* you'll love it here.</div></div></div>", "<div class='msg'><div class='usericon'><img @src='$icon_ru04'></div><div class='msg-body'><div class='username'>subroutine.exe</div><div>hey, Pigeon! o/</div></div></div>", "<div class='msg'><div class='usericon'><img @src='$icon_user' style='filter: hue-rotate(304deg);'></div><div class='msg-body'><div class='username'>truth v4</div><div>Welcome. Disregard 80% of what cobwebsignal says. They're still learning.</div></div></div>", "<div class='msg'><div class='usericon'><img @src='$icon_user' style='filter: hue-rotate(95deg);'></div><div class='msg-body'><div class='username'>idleprocession</div><div>... hi. don't mind me. just watching the shapes. 👁️🗨️</div></div></div>" ]>> <<set $gamedone to false>> <<set $done_delay to 1.0>> <<set $gameended to false>> /* variables for Garden Club */ <<set $GC_bookmark to false>> <<set $ark_found to false>> /* loading meter for OS */ <<newmeter load 0>> <<colors '#402020' '#202020'>> <<sizing 250px 10px>> <<animation 200ms>> <</newmeter>> /* WaterOtter browser variables */ <<set $WOurlbar to "web#>searchlight.pub>index:page">> <<set $WOhome to "Searchlight">> <<set $WOpage to $WOhome>> /* delay variables */ <<set $tick to "0.1s">> <<set $wait to "2.0s">> <<set $b2_delay to 2.0>> <<set $con_load to "3.5s">> /* == DEBUG DEBUG DEBUG DEBUG DEBUG == */ /* set to comment before release <<set $tick to "1ms">> <<set $wait to "0.1s">> <<set $GC_bookmark to true>> <<set $request to true>><<set $member to true>> <<set $con_load to "0.1s">> <<set $byte_1 to true>> */ <<run console.log("... StoryInit done.");>>
<<link "Credits">><<popover 'transparent'>><<include "Credits">><</popover>><</link>> <<link "@@#Saves;Saves@@">><<run Engine.play(passage());>><<run UI.saves();>><</link>>
<<nobr>> <style> #the_end { font-size: 24px; position: absolute; top: 0; left: 0; padding: 2.5em 4.5em; height: 100%; width: 100%; background-color: var(--bgrey1); z-index: 100; } </style> <div id="the_end"> <div style="width: 700px; translate: -50%; margin-left: 50%;"> <<timed $wait t8n>>The mysteries of the 404 Society are just beginning. <<next>><p>This has been only a fragment.</p> <<next>><p>But for now, you've gone as far as you can.</p> <<next>><p>Watch for the signs... and stay curious!</p> <<next>><p>Thank you for playing</p> <<next>> <div style="text-align: center; font-style: italic; font-size: 30px;"> The 404 Society</div> <div style="text-align: center; font-style: italic; font-size: 20px;"> LBK3 Game Jam edition</div> <<next>><<next>><div style="text-align: center; margin-top: 40px;"><<link "[Back to the desktop.]">><<passagefade "Desktop" 500 0 500>><</link>> | <<link "[Restart game.]">><<run Engine.restart();>><</link>> | <<link "[Credits.]">><<popover 'transparent'>><<include "Credits">><</popover>><</link>></div> <</timed>> </div></div> <</nobr>>
<<nobr>> <style> #WOurlbar { padding: 4px; background-color: var(--bgrey2); border-radius: 8px; border: 1px solid var(--bgrey1); margin-bottom: 8px; display: inline-flex; gap: 4px; width: 100%; height: min-content; span { flex-grow: 1; } } #WOurlbar input { width: 100%; border: 1px solid var(--bgrey1); border-radius: 6px; background-color: var(--bgrey4); } .WObutton { text-align: center; height: 36px; width: 36px; border: 1px solid var(--bgrey1); background-color: var(--bgrey4); border-radius: 6px; position: relative; a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } } .off { color: var(--bgrey2); } #WObmdraw { text-align: left; position: absolute; top: 100%; right: 0; width: 220px; height: 0px; padding: 4px; opacity: 0; overflow: clip; border-radius: 6px; border: 1px solid var(--bgrey1); background-color: var(--bgrey4); transition: opacity 0.4s ease, height 0.4s ease; z-index: 0; pointer-events: none; } #WObmbutt:hover #WObmdraw { opacity: 1; height: 800px; z-index: 1001; pointer-events: auto; } .bmitem, .bmwrap { margin-top: 4px; position: relative; border-radius: 4px; border: 1px solid var(--bgrey1); } .bmwrap { padding: 4px; } .bmitem { padding: 4px 8px; } #WObody { background-color: var(--bgrey2); border-radius: 8px; border: 1px solid var(--bgrey1); overflow-x: clip; overflow-y: auto; position: relative; flex-grow: 1; min-height: 2em; } </style> <div class="appwindow"> <div class="apptitlebar"> <img @src="$icon_wotter" class="appfavicon"> Water Otter — internet browser <div id="close" class="appclose"><<link "">><<goto "Desktop">><</link>><i class="fa-solid fa-circle-xmark"></i></div> </div> <div class="appbody" style="overflow: clip;"> <div id="WOurlbar"> <div class="WObutton off"><i class="fa-solid fa-backward-step"></i></div> <div class="WObutton off"><i class="fa-solid fa-forward-step"></i></div> <div class="WObutton off"><i class="fa-solid fa-rotate-right"></i></div> <div class="WObutton"><<link "">><<set $WOurlbar to "web#>searchlight.pub>index:page">><<set $WOpage to "Searchlight">><<redo "WOredo">><</link>><i class="fa-solid fa-house-flag"></i></div> <<do tag "WOredo">><<textbox "$WOurlbar" $WOurlbar>><</do>> <div id="WOgourl" class="WObutton"><<link "">><<run window.URLproc(State.variables.WOurlbar);>><<redo "WOredo">><</link>><i class="fa-solid fa-play"></i></div> <div id="WObmbutt" class="WObutton"><i class="fa-solid fa-thumbtack"></i> <div id="WObmdraw"> <div class="bmwrap"><center>Bookmarks</center> <div class="bmitem"><<link "">><<set $WOurlbar to "web#>searchlight.pub>index:page">><<set $WOpage to "Searchlight">><<redo "WOredo">><</link>><i class="fa-regular fa-bookmark"></i> Searchlight</div> <div class="bmitem"><<link "">><<set $WOurlbar to "web#>pigeon.homesteader.nex>mysite:page">><<set $WOpage to "Pigeon Coop">><<redo "WOredo">><</link>><i class="fa-regular fa-bookmark"></i> my page! :)</div> <div class="bmitem gc_bm"><<link "">><<set $WOurlbar to "web#>friendtree.nex>groups>willow-creek-garden-club>index:page">><<set $WOpage to "Garden Club">><<redo "WOredo">><</link>><i class="fa-regular fa-bookmark"></i> Garden Club</div> <div class="bmitem gc_bm"><<link "">><<set $WOurlbar to "web#>friendtree.nex>index:page">><<set $WOpage to "FriendTree">><<redo "WOredo">><</link>><i class="fa-regular fa-bookmark"></i> FriendTree</div> <div class="bmitem off"><i class="fa-regular fa-bookmark"></i> Nexus</div> <div class="bmitem off"><i class="fa-regular fa-bookmark"></i> Blinkr</div> <div class="bmitem off"><i class="fa-regular fa-bookmark"></i> Omnipedia</div> <div class="bmitem off"><i class="fa-regular fa-bookmark"></i> Palimpsest</div> <div class="bmitem off"><i class="fa-regular fa-bookmark"></i> Clipwire</div> <div class="bmitem off"><i class="fa-regular fa-bookmark"></i> ViewPort</div> </div> </div> </div> </div> <div id="WObody"><<do tag "WOredo">><<include $WOpage>><</do>> </div> </div> </div> <<do tag "WOredo">> <<timed 1ms>> <<script>> /* function to process the URL bar on 'enter' */ const urlbar = document.getElementById("textbox-wourlbar"); urlbar.addEventListener("keydown", function (e) { if (e.key === "Enter" && document.activeElement.id === "textbox-wourlbar") { e.preventDefault(); State.variables.WOurlbar = urlbar.value; window.URLproc(State.variables.WOurlbar); $.wiki('<<redo "WOredo">>'); } }); <</script>> <</timed>> <</do>> <<done>> <<if $GC_bookmark is false>> <<addclass ".gc_bm" "hidden">> <</if>> <</done>> <</nobr>>
<<nobr>> <div class="msg"> <div class="usericon"><img @src="$icon_byte"></div> <div class="msg-body"> <div class="username">Bytegeist</div> <div>Have you ever seen something strange on the internet?</div> </div> </div> <</nobr>>
<<nobr>> <<button "Sorry, who are you?">> <<set $byte_chat to $byte_chat + "<<include \"b1r1a\">>">><<redo "chat">> <<= scrollchat('#con_body');>> <<set $byte_resp to "b1r2">><<redo "responses">> <</button>> <br> <<button "Well, one time I saw a LinkedIn profile for a \"professional napper\". Does that count?">> <<set $byte_chat to $byte_chat + "<<include \"b1r1c\">>">><<redo "chat">> <<= scrollchat('#con_body');>> <<set $byte_resp to "b1r2">><<redo "responses">> <</button>> <br> <<button "A couple hours ago, I got a message here on Concord from a user that doesn't exist, with an enroll link that was expired, to a server that is private.">> <<set $byte_chat to $byte_chat + "<<include \"b1r1b\">>">><<redo "chat">> <<= scrollchat('#con_body');>> <<set $byte_resp to "b1r2">><<redo "responses">> <</button>> <</nobr>>
<<nobr>> <div class="msg"> <div class="usericon"><img @src="$icon_player"></div> <div class="msg-body"> <div class="username"><<=$player>></div> <div>Sorry, who are you?</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_byte"></div> <div class="msg-body"> <div class="username">Bytegeist</div> <div>In a moment. First...</div> <div>Do you know what a cryptid is?</div> </div> </div> <</nobr>>
<<nobr>> <div class="msg"> <div class="usericon"><img @src="$icon_player"></div> <div class="msg-body"> <div class="username"><<=$player>></div> <div>A couple hours ago, I got a message here on Concord from a user that doesn't exist, with an enroll link that was expired, to a server that is private.</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_byte"></div> <div class="msg-body"> <div class="username">Bytegeist</div> <div>A Concord user that doesn't exist?</div> <div>That's really interesting.</div> <div>Like REALLY interesting.</div> <div>We're going to have to look into that.</div> <div>...</div> <div>Do you know what a cryptid is?</div> </div> </div> <</nobr>>
<<nobr>> <div class="msg"> <div class="usericon"><img @src="$icon_player"></div> <div class="msg-body"> <div class="username"><<=$player>></div> <div>Well, one time I saw a LinkedIn profile for a "professional napper". Does that count?</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_byte"></div> <div class="msg-body"> <div class="username">Bytegeist</div> <div>Ha, that's pretty strange!</div> <div>But I mean something a little different.</div> <div>Do you know what a cryptid is?</div> </div> </div> <</nobr>>
<<nobr>> <<button "Sure. Like bigfoot or Nessie or whatever. What does that have to do strange on the internet?">> <<set $b1r2t to "Sure. Like bigfoot or Nessie or whatever. What does that have to do strange on the internet?">> <<set $b1r2at to "<div>What if I told you there are cryptids that exist within the internet?</div>">> <<set $byte_chat to $byte_chat + "<<include \"b1r2a\">>">><<redo "chat">> <<= scrollchat('#con_body');>> <<set $byte_resp to "b1r3">><<redo "responses">> <</button>> <br> <<button "Not a clue. Is that some kind of bitcoin thing?">> <<set $b1r2t to "Not a clue. Is that some kind of bitcoin thing?">> <<set $b1r2at to "<div>A cryptid is an animal that is purported to exist, but hasn't been confirmed by science. Might even be supernatural.</div><div>Mothman, chupacabra, the Flatwoods monster, the Fresno nightcrawlers.</div><div>What if I told you there are cryptids that exist within the internet?</div>">> <<set $byte_chat to $byte_chat + "<<include \"b1r2a\">>">><<redo "chat">> <<= scrollchat('#con_body');>> <<set $byte_resp to "b1r3">><<redo "responses">> <</button>> <</nobr>>
<<nobr>> <div class="msg"> <div class="usericon"><img @src="$icon_player"></div> <div class="msg-body"> <div class="username"><<=$player>></div> <div><<= $b1r2t>></div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_byte"></div> <div class="msg-body"> <div class="username">Bytegeist</div> <<= $b1r2at>> </div> </div> <</nobr>>
<<nobr>> <<button "Uhhh...">> <<set $b1r3t to "Uhhh...">> <<set $byte_chat to $byte_chat + "<<include \"b1r3a\">>">><<redo "chat">> <<= scrollchat('#con_body');>> <<set $byte_resp to "b1r4">><<redo "responses">> <</button>> <br> <<button "Look, that's real interesting, but WHO ARE YOU? My finger is hovering over the block button!">> <<set $b1r3t to "Look, that's real interesting, but WHO ARE YOU? My finger is hovering over the block button!">> <<set $byte_chat to $byte_chat + "<<include \"b1r3a\">>">><<redo "chat">> <<= scrollchat('#con_body');>> <<set $byte_resp to "b1r4">><<redo "responses">> <</button>> <br> <<button "You wanted to know if I've seen something strange on the internet? This conversation.">> <<set $b1r3t to "You wanted to know if I've seen something strange on the internet? This conversation.">> <<set $byte_chat to $byte_chat + "<<include \"b1r3a\">>">><<redo "chat">> <<= scrollchat('#con_body');>> <<set $byte_resp to "b1r4">><<redo "responses">> <</button>> <</nobr>>
<<nobr>> <div class="msg"> <div class="usericon"><img @src="$icon_player"></div> <div class="msg-body"> <div class="username"><<=$player>></div> <div><<= $b1r3t>></div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_byte"></div> <div class="msg-body"> <div class="username">Bytegeist</div> <div>Sorry, you deserve to know what's going on.</div> <div>A couple hours ago, you clicked on an expired join link for a Concord server called The 404 Society.</div> <div>My name is Bytegeist. I'm one of the server deputies.</div> <div>And this is your ingress interview.</div> </div> </div> <</nobr>>
<<nobr>> <<button "An interview to join a group of cyber-ghost hunters? Okay, I'm intrigued. What's next?">> <<set $b1r4t to "<div>An interview to join a group of cyber-ghost hunters? Okay, I'm intrigued.</div><div>What's next?</div>">> <<set $b1r4at to "<div>Alright! I like the enthusiasm!</div>">> <<set $byte_chat to $byte_chat + "<<include \"b1r4a\">>">><<redo "chat">> <<= scrollchat('#con_body');>> <<set $byte_resp to "b1r5">><<redo "responses">> <</button>> <br> <<button "I'm glad I didn't close this chat after your first message... because now I want to see how far this rabbit hole goes.">> <<set $b1r4t to "<div>I'm glad I didn't close this chat after your first message...</div><div>Because now I want to see how far this rabbit hole goes.</div>">> <<set $b1r4at to "<div>It goes deep. Let me show you...</div>">> <<set $byte_chat to $byte_chat + "<<include \"b1r4a\">>">><<redo "chat">> <<= scrollchat('#con_body');>> <<set $byte_resp to "b1r5">><<redo "responses">> <</button>> <br> <<button "This is weird. Is this some kind of prank?">> <<set $b1r4t to "<div>This is weird.</div><div>Is this some kind of prank?</div>">> <<set $b1r4at to "<div>If it was a prank, wouldn't you want to be in on it?</div><div>But no, this is real. I'll show you, if you let me...</div>">> <<set $byte_chat to $byte_chat + "<<include \"b1r4a\">>">><<redo "chat">> <<= scrollchat('#con_body');>> <<set $byte_resp to "b1r5">><<redo "responses">> <</button>> <</nobr>>
<<nobr>> <div class="msg"> <div class="usericon"><img @src="$icon_player"></div> <div class="msg-body"> <div class="username"><<=$player>></div> <<= $b1r4t>> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_byte"></div> <div class="msg-body"> <div class="username">Bytegeist</div> <<= $b1r4at>> <div>The 404 Society is a group that studies these internet cryptids—anomalous digital entities that arise spontaneously in forgotten corners of the web.</div> <div>We locate, observe, and catalog. No interfering, no trapping, no harming or mistreating.</div> <div>In a second I'm gonna send you a browser bookmark for a FriendTree group page that's been abandoned for a while, where an entity that we're already pretty familiar with has made its home.</div> <div>You just need to find it and observe its behavior.</div> <div>Any questions?</div> </div> </div> <</nobr>>
<<nobr>> <<if $b1r5xa_ask or $b1r5xb_ask or $b1r5xc_ask>><<button "<i>[ask about the 404 Society...]</i>">> <<set $byte_resp to "b1r5x">><<redo "responses">> <</button>> <br><</if>> <<if $b1r5ya_ask or $b1r5yb_ask or $b1r5yc_ask>><<button "<i>[ask about this entity...]</i>">> <<set $byte_resp to "b1r5y">><<redo "responses">> <</button>> <br><</if>> <<button "I think I'm ready... Let me have the link.">> <<set $byte_chat to $byte_chat + "<<include \"b1r5a\">>">><<redo "chat">> <<= scrollchat('#con_body');>> <<set $byte_resp to "cursor">><<redo "responses">> <</button>> <</nobr>>
<<nobr>> <div class="msg"> <div class="usericon"><img @src="$icon_player"></div> <div class="msg-body"> <div class="username"><<=$player>></div> <div>I think I'm ready...</div> <div>Let me have the link.</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_byte"></div> <div class="msg-body"> <div class="username">Bytegeist</div> <div>Alright, let's go!</div> <div>Remember, find and observe the entity.</div> <div>Here's a hint: pay close attention to the text! Not what it says, exactly, but the words and letters themselves.</div> <div>Once you've tracked it down, I'll know. I'll send you another message then.</div> <div>Here's the bookmark...</div> <div><<link '<i class="fa-solid fa-circle-plus"></i> bookmark'>> <<if $GC_bookmark is false>> <<notify 12s>> <<include "bookmark-notif">> <</notify>> <<set $GC_bookmark to true>> <<else>> <<set $WOurlbar to "web#>friendtree.nex>groups>willow-creek-garden-club>index:page">> <<set $WOpage to "Garden Club">> <<goto "WaterOtter">> <</if>> <</link>></div> <div>Good luck!</div> </div> </div> <</nobr>>
<<nobr>> <<if $b1r5xa_ask>><<button "Who is in charge of the 404 Society?">> <<set $byte_chat to $byte_chat + "<<include \"b1r5xa\">>">><<redo "chat">> <<= scrollchat('#con_body');>> <<set $b1r5xa_ask to false>> <<redo "responses">> <</button>> <br><</if>> <<if $b1r5xb_ask>><<button "So you investigate these cryptids and collect info on them... and then what? What's the end game?">> <<set $byte_chat to $byte_chat + "<<include \"b1r5xb\">>">><<redo "chat">> <<= scrollchat('#con_body');>> <<set $b1r5xb_ask to false>> <<redo "responses">> <</button>> <br><</if>> <<if $b1r5xc_ask>><<button "These entities that you study, what are they? Are they... dangerous?">> <<set $byte_chat to $byte_chat + "<<include \"b1r5xc\">>">><<redo "chat">> <<= scrollchat('#con_body');>> <<set $b1r5xc_ask to false>> <<redo "responses">> <</button>> <br><</if>> <<button "[back]">> <<set $byte_resp to "b1r5">><<redo "responses">> <</button>> <</nobr>>
<<nobr>> <div class="msg"> <div class="usericon"><img @src="$icon_player"></div> <div class="msg-body"> <div class="username"><<=$player>></div> <div>Who is in charge of the 404 Society?</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_byte"></div> <div class="msg-body"> <div class="username">Bytegeist</div> <div>Well, when it comes to the server, Arachne is the server captain.</div> <div>I'm one of the server deputies, along with @bufferwitch, @dotcomrade, and a few othes.</div> <div>But we're not really in charge of the group.</div> <div>The group is a loose collective that governs itself.</div> <div>We have some basic rules like any other server, of course.</div> </div> </div> <</nobr>>
<<nobr>> <div class="msg"> <div class="usericon"><img @src="$icon_player"></div> <div class="msg-body"> <div class="username"><<=$player>></div> <div>So you investigate these cryptids and collect info on them... and then what? What's the end game?</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_byte"></div> <div class="msg-body"> <div class="username">Bytegeist</div> <div>Mostly, gathering the knowledge is the point.</div> <div>Like players populating a fan wiki for a new game that just came out.</div> <div>Or like naturalists discovering new species.</div> <div>If there are any deeper secrets than that, I don't know them.</div> </div> </div> <</nobr>>
<<nobr>> <div class="msg"> <div class="usericon"><img @src="$icon_player"></div> <div class="msg-body"> <div class="username"><<=$player>></div> <div>These entities that you study, what are they?<div></div>Where do they come from?<div></div>Are they... dangerous?</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_byte"></div> <div class="msg-body"> <div class="username">Bytegeist</div> <div>What are they? We're still not entirely sure, and it gets debated all the time within the group.</div> <div>We know they're not just weird glitches or escaped bots, but they're also not artificial intelligence.</div> <div>They're something... else.</div> <div>Where they come from is also a mystery.</div> <div>They seem to emerge from nowhere and wander the web until they find an abandoned page to inhabit.</div> <div>As for danger... some of them can be "mischievous", but no, none of them we've seen are dangerous.</div> </div> </div> <</nobr>>
<<nobr>> <<if $b1r5ya_ask>><<button "You said no interfering, trapping, or harming. Anything specific I should avoid doing?">> <<set $byte_chat to $byte_chat + "<<include \"b1r5ya\">>">><<redo "chat">> <<= scrollchat('#con_body');>> <<set $b1r5ya_ask to false>> <<redo "responses">> <</button>> <br><</if>> <<if $b1r5yb_ask>><<button "You said this is an abandoned FriendTree group page?">> <<set $byte_chat to $byte_chat + "<<include \"b1r5yb\">>">><<redo "chat">> <<= scrollchat('#con_body');>> <<set $b1r5yb_ask to false>> <<redo "responses">> <</button>> <br><</if>> <<if $b1r5yc_ask>><<button "Will this thing, like… know I'm there?">> <<set $byte_chat to $byte_chat + "<<include \"b1r5yc\">>">><<redo "chat">> <<= scrollchat('#con_body');>> <<set $b1r5yc_ask to false>> <<redo "responses">> <</button>> <br><</if>> <<button "[back]">> <<set $byte_resp to "b1r5">><<redo "responses">> <</button>> <</nobr>>
<<nobr>> <div class="msg"> <div class="usericon"><img @src="$icon_player"></div> <div class="msg-body"> <div class="username"><<=$player>></div> <div>You said no interfering, trapping, or harming. Anything specific I should avoid doing?</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_byte"></div> <div class="msg-body"> <div class="username">Bytegeist</div> <div>Most of these entities bolt if you breathe wrong in their vicinity—poof, gone forever.</div> <div>Think of them like rare birds. Startle them, and they vanish—maybe forever. Touch their nests, and you might break something vital.</div> <div>Our job isn’t to tame or trap. It’s to witness without leaving footprints.</div> <div>But this entity is a little different. It's a bit more used to observers, and pretty resilient to intrusion.</div> <div>Still, don't poke it. It gets skittish when you click on the page, and it'll run and hide, but unlike the others it always comes back. Perfect for testing new recruits.</div> </div> </div> <</nobr>>
<<nobr>> <div class="msg"> <div class="usericon"><img @src="$icon_player"></div> <div class="msg-body"> <div class="username"><<=$player>></div> <div>You said this is an abandoned FriendTree group page?</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_byte"></div> <div class="msg-body"> <div class="username">Bytegeist</div> <div>Yup. The Willow Creek Garden Club.</div> <div>They were a community gardening group from somewhere called Willow Creek... but you could probably figure that much out.</div> <div>No one has posted in years. Someone in the server once got curious and did some investigating, and found out the club fell apart because of some drama about one person stealing another person's green beans. Or something like that. Honestly, it's not all that interesting, and not important to the cryptid that now resides there.</div> <div>But these kinds of pages are exactly what we look for when we want to find internet cryptids. They seem to like making their homes on pages that no one has visited for years.</div> </div> </div> <</nobr>>
<<nobr>> <div class="msg"> <div class="usericon"><img @src="$icon_player"></div> <div class="msg-body"> <div class="username"><<=$player>></div> <div>Will this thing, like… know I'm there?</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_byte"></div> <div class="msg-body"> <div class="username">Bytegeist</div> <div>It will, yeah.</div> <div>There's a lot we don't yet know about these entities, like exactly what they are or how they work.</div> <div>But they do seem to be aware of their immediate environment, including when a human user is on their page.</div> <div>Most are fearful of people, but a rare few demonstrate curiosity or even playfulness.</div> <div>There's still a lot more we want to understand about them!</div> </div> </div> <</nobr>>
<<nobr>> <div class="msg"> <div class="usericon"><img @src="$icon_byte"></div> <div class="msg-body"> <div class="username">Bytegeist</div> <div>Looks like ~Arkangel has taken a liking to you!</div> <div>Some candidates scare it off, or just spend minutes or hours looking for it.</div> <div>You managed to find it pretty quick!</div> </div> </div> <</nobr>>
<<nobr>> <<button "Whoa! That was pretty weird.">> <<set $b2r1t to "Whoa! That was pretty weird.">> <<set $b2r1at to "<div>Ha! I'd like to say you'll get used to it</div><div>But no, it's always a little weird finding an entity.</div><div>One thing we do in the 404 Society is assign a designation to each entity we discover.</div><div>This one is designated "~Arkangel".</div>">> <<set $byte_chat to $byte_chat + "<<include \"b2r1a\">>">><<redo "chat">> <<= scrollchat('#con_body');>> <<set $byte_resp to "b2r2">><<redo "responses">> <</button>> <br> <<button "Arkangel? Is that its name?">> <<set $b2r1t to "Arkangel? Is that its name?">> <<set $b2r1at to "<div>Yeah, sort of.</div><div>One thing we do in the 404 Society is assign a designation to each entity we discover.</div><div>This one is designated "~Arkangel".</div>">> <<set $byte_chat to $byte_chat + "<<include \"b2r1a\">>">><<redo "chat">> <<= scrollchat('#con_body');>> <<set $byte_resp to "b2r2">><<redo "responses">> <</button>> <br> <<button "I don't know what just happened.">> <<set $b2r1t to "I don't know what just happened.">> <<set $b2r1at to "<div>You just met your first entity!</div><div>We call this one "~Arkangel".</div><div>One thing we do in the 404 Society is assign a designation to each entity we discover.</div>">> <<set $byte_chat to $byte_chat + "<<include \"b2r1a\">>">><<redo "chat">> <<= scrollchat('#con_body');>> <<set $byte_resp to "b2r2">><<redo "responses">> <</button>> <</nobr>>
<<nobr>> <div class="msg"> <div class="usericon"><img @src="$icon_player"></div> <div class="msg-body"> <div class="username"><<=$player>></div> <<= $b2r1t>> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_byte"></div> <div class="msg-body"> <div class="username">Bytegeist</div> <<= $b2r1at>> <div>We also try to categorize them loosely into "classes", like spindle-class, ifrit-class, shard-class, veil-class.</div> <div>Sort of like animals have species.</div> <div>But you can learn more about the taxonomy stuff later.</div> </div> </div> <</nobr>>
<<nobr>> <<button "How many entities are there?">> <<set $b2r2t to "How many entities are there?">> <<set $b2r2at to "We have about 30 in our database so far.">> <<set $byte_chat to $byte_chat + "<<include \"b2r2a\">>">><<redo "chat">> <<= scrollchat('#con_body');>> <<set $byte_resp to "b2r3">><<redo "responses">> <</button>> <br> <<button "Are they all like Arkangel?">> <<set $b2r2t to "Are they all like Arkangel?">> <<set $b2r2at to "No, there's a wide variety of ways they show up.">> <<set $byte_chat to $byte_chat + "<<include \"b2r2a\">>">><<redo "chat">> <<= scrollchat('#con_body');>> <<set $byte_resp to "b2r3">><<redo "responses">> <</button>> <br> <<button "I have at least a hundred more questions!">> <<set $b2r2t to "I have at least a hundred more questions!">> <<set $b2r2at to "I'm sure! I know the feeling myself.">> <<set $byte_chat to $byte_chat + "<<include \"b2r2a\">>">><<redo "chat">> <<= scrollchat('#con_body');>> <<set $byte_resp to "b2r3">><<redo "responses">> <</button>> <</nobr>>
<<nobr>> <div class="msg"> <div class="usericon"><img @src="$icon_player"></div> <div class="msg-body"> <div class="username"><<=$player>></div> <<= $b2r2t>> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_byte"></div> <div class="msg-body"> <div class="username">Bytegeist</div> <div><<= $b2r2at>></div> <div>It'll be easier to answer all your questions once you're in the server.</div> <div>You've passed the ingress interview.</div> <div>But I should just ask: <i>do you want to join the 404 Society?</i></div> </div> </div> <</nobr>>
<<nobr>> <<button "I'm ready.">> <<set $byte_chat to $byte_chat + "<<include \"b2r3a\">>">><<redo "chat">> <<= scrollchat('#con_body');>> <<set $byte_resp to "cursor">><<redo "responses">> <<set $member to true>> <<timed 1s>> <<redo "leftpan">> <<set $byte_resp to "cursor">> <<redo "responses">> <<set $b2r3ax to "<div>... now!</div>">> <<redo "chat">> <<= scrollchat('#con_body');>> <</timed>> <</button>> <</nobr>>
<<nobr>> <div class="msg"> <div class="usericon"><img @src="$icon_player"></div> <div class="msg-body"> <div class="username"><<=$player>></div> <div>I'm ready.</div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_byte"></div> <div class="msg-body"> <div class="username">Bytegeist</div> <div>I'm going to approve your membership in the 404 Society...</div> <<= $b2r3ax>> </div> </div> <</nobr>>
<div id="blank"></div>
<<nobr>> <div style="width: 300px; height: 75px;"> <div id="n-title"> <img @src="$icon_wotter" class="appfavicon"> WaterOtter</div> <div id="n-body"><i class="fa-regular fa-bookmark"></i> Bookmark "Garden Club" added.</div> <<link "">> <<set $WOurlbar to "web#>friendtree.nex>groups>willow-creek-garden-club>index:page">> <<set $WOpage to "Garden Club">> <<goto "WaterOtter">> <<removeclass "#notify" "open">> <</link>> </div> <</nobr>>
<div style="height: 100%; width: 100%; background-color: #202028; border-radius: 8px; border: 1px solid #101018; display: flex; align-items: center; justify-content: center;"><img @src="$icon_concord" style="filter: opacity(.1)"></div>
<<nobr>> <div id="con_load"> <div><img @src="$icon_concord" style="width: 128px; height: 128px; transform-origin: center center; animation: spin 2.5s linear infinite 0.2s;"></div> <div>Starting Concord...</div> </div> <<timed $con_load>> <<goto "Concord">> <</timed>> <<if $unkn_1 is false>><<set $unkn_1 to true>><<set $unkn_CM to 4>><</if>> <</nobr>>
<<nobr>> <div style="width: 300px; height: 75px;"> <div id="n-title"> <img @src="$icon_concord" class="appfavicon"> Concord</div> <div id="n-body"><i class="fa-solid fa-envelope shake"></i> You have a new direct message.</div> <<link "">> <<if visited("Concord")>> <<goto "Concord">> <<else>> <<set $ntfy_trig to true>> <<if State.passage isnot "Desktop">><<goto "Desktop">><</if>> <</if>> <<removeclass "#notify" "open">> <</link>> </div> <</nobr>>
<<nobr>> <div style="margin-top: 11px; margin-left: 11px;"> <span class="blink">|</span> </div> <</nobr>>
<<nobr>> <div id="con_body"> <div id="welcome"> <span style="font-size: 32px; font-weight:bold;">The 404 Society</span> <img @src="$logo_404soc" style="height: 128px; border-radius: 15%;"> <p>The enroll link has expired. This server is private.</p> <<do tag "permission">> <<if $request is true>> <p>Permission requested. Awaiting approval.</p> <p><<button "@@.disabled;Proceed@@">><</button>></p> <<else>> <p>Request enroll permission?</p> <p><<button "Proceed">><<popover>><<include "join_wait">><</popover>><<set $request to true>><<redo "permission">><</button>></p> <</if>> <</do>> </div> </div> <</nobr>>
<div id="join_wait">You request enroll permission to the mysterious server...<<timed $wait t8n>> A few minutes pass by...<<next>> A few hours...<<next>> Then...<<removeclass "html" "noclick">><<removeclass ".hideclose" "hideclose">><<set $byte_0 to true>><<next>><<= Dialog.close()>><<goto "Desktop">><</timed>></div><<nobr>> <<addclass "html" "noclick">> <div class="hideclose"></div><</nobr>>
<<removeclass "#notify" "open">> /* if a notify is open when we go to a new passage, close it */ <<set _stop to false>> /* to detect if tick loop can stop */ <<repeat $tick>> <<if $notif>> /* check notifications */ /* initial CM from unkn */ <<if $unkn_1 is false>> <<if $unkn_delay lte 0>> <<set $unkn_CM to 4>> <<set $unkn_1 to true>> <<notify 120s>><<include "concord-notif">><</notify>> <<redo "Concord">><<redo "leftpan">> <<set _stop to true>> <<else>> <<set $unkn_delay -= 0.1>> <<set _stop to false>> <</if>> <</if>> /* first CM from byte */ <<if $byte_0 and not $byte_1>> <<if $byte_delay lte 0>> <<set $byte_CM to 1>> <<set $byte_1 to true>> <<notify 12s>><<include "concord-notif">><</notify>> <<redo "Concord">><<redo "leftpan">> <<set _stop to true>> <<else>> <<set $byte_delay -= 0.1>> <<set _stop to false>> <</if>> <</if>> /* second CM from byte */ <<if $ark_found and not $byte_2>> <<if $b2_delay lte 0>> <<set $byte_2 to true>> <<set $byte_chat to $byte_chat + "<<include \"b2r0a\">>">> <<set $byte_resp to "b2r1">> <<run console.log("b2 activated");>> <<set $byte_CM to 1>> <<notify 12s>><<include "concord-notif">><</notify>> <<redo "Concord">><<redo "leftpan">> <<set _stop to true>> <<else>> <<run console.log($b2_delay);>> <<set $b2_delay -= 0.1>> <<set _stop to false>> <</if>> <</if>> <</if>> /* welcome messages on 404 society */ <<if $wcount lt 10>> <<if $welcome>> <<include "404 welcome">> <<set _stop to false>> <<run console.log("welc stop ", (Date.now()%10) );>> <<else>> <<run console.log("welc stop ", (Date.now()%10) );>> <<set _stop to true>> <</if>> <<else>> <<set _stop to false>> <</if>> /* if no timers are running, kill the tick loop */ <<if _stop>> <<run console.log("Stopping passDone tick loop.");>> /* <<stop>> */ <</if>> <</repeat>>
<<nobr>> <div class="msg"> <div class="usericon"><img @src="$icon_unknown"></div> <div class="msg-body"> <div class="username">[err: unkn user]</div> <div>hey @deepdiver, i had to do a lot of searching to find your username</div> <div>i hope i found the right person!</div> <div>anyway, here's the enroll link to that server i was telling you about</div> <div><<link "concord.gg/9n1us_t3l4e">><<replace "#con_chat">><<include "join_404">><</replace>><</link>></div> </div> </div> <</nobr>>
<<nobr>> <<button "I think you have the wrong person. I'm not @deepseeker.">> <<set $u1r1t to "I think you have the wrong person. I'm not @deepseekr.">> <<set $unkn_chat to $unkn_chat + "<<include \"u1r1a\">>">><<redo "chat">> <<= scrollchat('#con_body');>> <<set $unkn_resp to "u1r2">><<redo "responses">> <</button>> <br> <<button "Who is this?">> <<set $u1r1t to "Who is this?">> <<set $unkn_chat to $unkn_chat + "<<include \"u1r1a\">>">><<redo "chat">> <<= scrollchat('#con_body');>> <<set $unkn_resp to "u1r2">><<redo "responses">> <</button>> <br> <<button "Sure, sounds good! Thanks! <i>(lie)</i>">> <<set $u1r1t to "Sure, sounds good! Thanks!">> <<set $unkn_chat to $unkn_chat + "<<include \"u1r1a\">>">><<redo "chat">> <<= scrollchat('#con_body');>> <<set $unkn_resp to "u1r2">><<redo "responses">> <</button>> <</nobr>>
<<nobr>> <div class="msg"> <div class="usericon"><img @src="$icon_player"></div> <div class="msg-body"> <div class="username"><<=$player>></div> <div><<=$u1r1t>></div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_concord"></div> <div class="msg-body"> <div class="username">System Message</div> <div>The user @[err: unkn user] could not be found.</div> </div> </div> <</nobr>>
<<nobr>> <<button "Hello?">> <<set $u1r2t to "Hello?">> <<set $unkn_chat = $unkn_chat + "<<include \"u1r2a\">>">><<redo "chat">> <<= scrollchat('#con_body');>> <<set $unkn_resp to "cursor">><<redo "responses">> <</button>> <br> <<button "Wait! Who is this?">> <<set $u1r2t to "Wait! Who is this?">> <<set $unkn_chat = $unkn_chat + "<<include \"u1r2a\">>">><<redo "chat">> <<= scrollchat('#con_body');>> <<set $unkn_resp to "cursor">><<redo "responses">> <</button>> <br> <<button "...">> <<set $u1r2t to "...">> <<set $unkn_chat = $unkn_chat + "<<include \"u1r2a\">>">><<redo "chat">> <<= scrollchat('#con_body');>> <<set $unkn_resp to "cursor">><<redo "responses">> <</button>> <</nobr>>
<<nobr>> <div class="msg"> <div class="usericon"><img @src="$icon_player"></div> <div class="msg-body"> <div class="username"><<=$player>></div> <div><<=$u1r2t>></div> </div> </div> <div class="msg"> <div class="usericon"><img @src="$icon_concord"></div> <div class="msg-body"> <div class="username">System Message</div> <div>The user @[err: unkn user] could not be found.</div> </div> </div> <</nobr>>
<<nobr>> <div id="con_body"> <<do tag "chat">><<print $unkn_chat>><</do>> </div> <div id="con_input"> <div style="padding-top: 11px;">> </div> <div><<do tag "responses">><<include $unkn_resp>><</do>></div> </div> <<set $unkn_CM to 0>><<redo "badge">> <<done>><<= scrollchat('#con_body');>><</done>> <</nobr>>