233 lines
8.5 KiB
HTML
233 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<script>
|
|
/* No quest without embarking (URL-guessers go home), and no quest for the
|
|
deleted website while the website isn't deleted */
|
|
try {
|
|
if (localStorage.getItem('questStarted') !== '1' ||
|
|
!localStorage.getItem('siteDeleted')) location.replace('/');
|
|
} catch (e) { location.replace('/'); }
|
|
</script>
|
|
<title>The Quest for the Deleted Website</title>
|
|
<link rel="icon" href="goat.png">
|
|
<link rel="stylesheet" href="/fonts/fonts.css">
|
|
<link rel="stylesheet" href="/fa/css/all.min.css">
|
|
<script defer src="/js/quest.js"></script>
|
|
<style>
|
|
h1 { font-family: 'Kingdom', serif; font-size: 4.2em; font-weight: normal; }
|
|
/* Breathing room after the last paragraph. Padding rather than margin on
|
|
the last element: it only becomes visible once content overflows the
|
|
viewport, so short early-quest pages don't scroll */
|
|
body { padding-bottom: 4em; }
|
|
p { max-width: 46em; margin-left: auto; margin-right: auto; }
|
|
/* Centered as a block, but lines keep their columns: ascii art must not
|
|
have each line centered individually */
|
|
pre { display: inline-block; text-align: left; }
|
|
/* The figure is composed of bottom-aligned columns (hero, companion) so
|
|
art blocks of different heights stand on the same ground */
|
|
#figure .fig { display: inline-block; vertical-align: bottom; text-align: left; }
|
|
#figure .fig + .fig { margin-left: 2ch; }
|
|
/* Weapon icons live inside the ascii art: the .wpn cell keeps the pre's
|
|
monospace font, so 2ch is exactly two art columns; the icon inside
|
|
carries its own font. On the viewer-left side the cell is mirrored so
|
|
the icon faces away from the body */
|
|
.wpn { display: inline-block; width: 2ch; text-align: center; }
|
|
.wpn-flip { transform: scaleX(-1); }
|
|
.wpn .fa-solid, .wpn .wpn-em { font-size: .8em; }
|
|
.wpn-em { font-family: 'Noto Emoji'; line-height: 1; }
|
|
/* Glyphs drawn tip-down get stood on their hilt instead (inner element,
|
|
so it composes with the cell's mirror flip) */
|
|
.wpn-rot { display: inline-block; transform: rotate(180deg); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<center>
|
|
<h1>The Quest for the Deleted Website</h1>
|
|
<form id="naming">
|
|
<label for="heroName">Name your hero</label>
|
|
<input id="heroName" maxlength="40" autocomplete="off">
|
|
<input type="submit" value="Begin quest">
|
|
</form>
|
|
<div id="story" style="display:none">
|
|
<pre id="figure">
|
|
o
|
|
/|\
|
|
/ \
|
|
</pre>
|
|
<p id="intro"></p>
|
|
<p id="setout" style="display:none"></p>
|
|
<p id="traverse" style="display:none"></p>
|
|
<div id="grpTroll">
|
|
<p id="enc1" style="display:none"></p>
|
|
<p id="enc1riddle" style="display:none"></p>
|
|
<p id="enc1attack" style="display:none"></p>
|
|
<p id="enc1wrong" style="display:none"></p>
|
|
<p id="enc1correct" style="display:none"></p>
|
|
</div>
|
|
<div id="grpKid">
|
|
<p id="enc2" style="display:none"></p>
|
|
<p id="enc2yes" style="display:none"></p>
|
|
<p id="enc2no" style="display:none"></p>
|
|
<p id="kidrename" style="display:none"></p>
|
|
</div>
|
|
<div id="grpMimic">
|
|
<p id="enc3" style="display:none"></p>
|
|
<p id="enc3pry" style="display:none"></p>
|
|
<p id="enc3leave" style="display:none"></p>
|
|
</div>
|
|
<div id="grpPotion">
|
|
<p id="enc4" style="display:none"></p>
|
|
<p id="enc4steal" style="display:none"></p>
|
|
<p id="enc4explain" style="display:none"></p>
|
|
</div>
|
|
<div id="grpPrincess">
|
|
<p id="enc5" style="display:none"></p>
|
|
<p id="enc5decline" style="display:none"></p>
|
|
<p id="enc5agree" style="display:none"></p>
|
|
<p id="enc5vines" style="display:none"></p>
|
|
<p id="enc5door" style="display:none"></p>
|
|
<p id="princessrename" style="display:none"></p>
|
|
</div>
|
|
<p id="arrival" style="display:none"></p>
|
|
<p id="confront" style="display:none"></p>
|
|
<p id="ending" style="display:none"></p>
|
|
</div>
|
|
<div id="showdownAttack" style="display:none">
|
|
<p><button type="button">Attack</button></p>
|
|
</div>
|
|
<div id="endWin" style="display:none">
|
|
<p><button type="button">Return to gade.gg</button></p>
|
|
</div>
|
|
<div id="endRestart" style="display:none">
|
|
<p><button type="button">Restart quest</button></p>
|
|
</div>
|
|
<form id="vnaming" style="display:none">
|
|
<label for="villainName">Name the villain</label>
|
|
<input id="villainName" maxlength="40" autocomplete="off">
|
|
<input type="submit" value="Confirm">
|
|
</form>
|
|
<form id="vpronouns" style="display:none">
|
|
<p>Choose the villain's pronouns</p>
|
|
<p>
|
|
<button type="button" data-preset="she">She/her</button>
|
|
<button type="button" data-preset="he">He/him</button>
|
|
<button type="button" data-preset="they">They/them</button>
|
|
<button type="button" id="vcustomBtn">Custom</button>
|
|
</p>
|
|
<table id="vcustom" style="display:none">
|
|
<tr><td align="right">Subjective</td>
|
|
<td><input id="vpnSubj" placeholder="she / he / they" autocomplete="off"></td></tr>
|
|
<tr><td align="right">Objective</td>
|
|
<td><input id="vpnObj" placeholder="her / him / them" autocomplete="off"></td></tr>
|
|
<tr><td align="right">Possessive</td>
|
|
<td><input id="vpnPosd" placeholder="her / his / their" autocomplete="off"></td></tr>
|
|
<tr><td align="right">Reflexive</td>
|
|
<td><input id="vpnRefl" placeholder="herself / himself / themself" autocomplete="off"></td></tr>
|
|
<tr><td></td><td><input type="submit" value="Confirm"></td></tr>
|
|
</table>
|
|
</form>
|
|
<div id="enc3choice" style="display:none">
|
|
<p>
|
|
<button type="button" data-act="pry" id="pryBtn"></button>
|
|
<button type="button" data-act="leave">Leave it</button>
|
|
</p>
|
|
</div>
|
|
<div id="enc4choice" style="display:none">
|
|
<p>
|
|
<button type="button" data-act="steal">Steal a potion</button>
|
|
<button type="button" data-act="explain">Explain your situation</button>
|
|
</p>
|
|
</div>
|
|
<div id="enc5choice" style="display:none">
|
|
<p>
|
|
<button type="button" data-act="agree">Agree</button>
|
|
<button type="button" data-act="decline">Decline</button>
|
|
</p>
|
|
</div>
|
|
<div id="enc5method" style="display:none">
|
|
<p>
|
|
<button type="button" data-act="vines">Climb up the vines on the side of the tower</button>
|
|
<button type="button" data-act="door">Walk in through the front door</button>
|
|
</p>
|
|
</div>
|
|
<div id="prename" style="display:none">
|
|
<p>Would you like to rename her?</p>
|
|
<p>
|
|
<button type="button" data-rename="yes">Yes, please</button>
|
|
<button type="button" data-rename="no">What? No! Why would I do that?</button>
|
|
</p>
|
|
<form id="prenameForm" style="display:none">
|
|
<input id="princessName" maxlength="40" autocomplete="off">
|
|
<input type="submit" value="Confirm">
|
|
</form>
|
|
</div>
|
|
<div id="enc2choice" style="display:none">
|
|
<p>
|
|
<button type="button" data-ans="yes">Yes, yes, yes</button>
|
|
<button type="button" data-ans="no">Yes, yes, no</button>
|
|
</p>
|
|
</div>
|
|
<div id="rename" style="display:none">
|
|
<p>Would you like to rename him?</p>
|
|
<p>
|
|
<button type="button" data-rename="yes">Yes, please</button>
|
|
<button type="button" data-rename="no">What? No! Why would I do that?</button>
|
|
</p>
|
|
<form id="renameForm" style="display:none">
|
|
<input id="kidName" maxlength="40" autocomplete="off">
|
|
<input type="submit" value="Confirm">
|
|
</form>
|
|
</div>
|
|
<div id="enc1choice" style="display:none">
|
|
<p>
|
|
<button type="button" data-act="attack">Attack</button>
|
|
<button type="button" data-act="riddle">Agree to the terms</button>
|
|
</p>
|
|
</div>
|
|
<form id="riddle" style="display:none">
|
|
<input id="riddleAnswer" maxlength="40" autocomplete="off">
|
|
<input type="submit" value="Answer">
|
|
<button type="button" id="riddleAttack">Attack</button>
|
|
</form>
|
|
<form id="pronouns" style="display:none">
|
|
<p>Choose your hero's pronouns</p>
|
|
<p>
|
|
<button type="button" data-preset="she">She/her</button>
|
|
<button type="button" data-preset="he">He/him</button>
|
|
<button type="button" data-preset="they">They/them</button>
|
|
<button type="button" id="customBtn">Custom</button>
|
|
</p>
|
|
<table id="custom" style="display:none">
|
|
<tr><td align="right">Subjective</td>
|
|
<td><input id="pnSubj" placeholder="she / he / they" autocomplete="off"></td></tr>
|
|
<tr><td align="right">Objective</td>
|
|
<td><input id="pnObj" placeholder="her / him / them" autocomplete="off"></td></tr>
|
|
<tr><td align="right">Possessive</td>
|
|
<td><input id="pnPosd" placeholder="her / his / their" autocomplete="off"></td></tr>
|
|
<tr><td align="right">Reflexive</td>
|
|
<td><input id="pnRefl" placeholder="herself / himself / themself" autocomplete="off"></td></tr>
|
|
<tr><td></td><td><input type="submit" value="Confirm"></td></tr>
|
|
</table>
|
|
</form>
|
|
<div id="weapon" style="display:none">
|
|
<p>Choose your hero's preferred weapon</p>
|
|
<p>
|
|
<button type="button" data-weapon="sword">Sword</button>
|
|
<button type="button" data-weapon="axe">Axe</button>
|
|
<button type="button" data-weapon="wand">Wand</button>
|
|
<button type="button" data-weapon="gun">Gun</button>
|
|
</p>
|
|
</div>
|
|
<div id="hand" style="display:none">
|
|
<p>Is your hero left-handed or right-handed?</p>
|
|
<p>
|
|
<button type="button" data-hand="left">Left-handed</button>
|
|
<button type="button" data-hand="right">Right-handed</button>
|
|
</p>
|
|
</div>
|
|
</center>
|
|
</body>
|
|
</html>
|