You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

63 lines
4.0 KiB
HTML

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hermit fantasy</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="../css/fonts.css">
<script src="script.js" defer></script>
<script src="../js/jquery.js"></script>
<link rel="icon" type="image/x-icon" href="../photos/hand.webp">
</head>
</head>
<body>
<!-- nav -->
<a href="../index.html" target="_self">
<img id="home" src="../photos/home-closed.png" alt="home">
</a>
<div id="about">
<div onclick="openLetter()"><img id="about" src="../photos/closed-crow.png" alt="home"></div>
</div>
<div id="letterBox" class="letterBox" style="display:none">
<div id="closeButton" onClick='closeLetter()'><img src="../photos/close-blue.png" alt="Close" width="40" height="auto"></div>
<div id="letterContents"></div>
</div>
<!-- audio -->
<audio id="background-audio" loop>
<source src="../audio/machine-birds.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<button id="mute-btn">MUTE</button>
<div id="textContainer" class="text-container">
<div id="topCard" class="card top">
<p id="text1">one. <br><br> It was a warm and cruel summer day and you were not yet a hermit. <br>You woke up, checked your messages, brushed your teeth, made breakfast, showered <br> and wept. <br> You threw your computer on the ground, stepped on it.</br> The screen popped and crackled as it separated from its body. <br>Liquid seeped out slowly. <br>You yanked your phone by its charging cable, ripping it from the plug. <br>Took a hammer and smashed it in and in until it bent, almost neatly, in two. <br>The screen went striped, silent,<br> dead. <br> Then you left. <br></p>
</div>
<p id="text2" class="card behind"> two.<br> <br>The bot had always been a bot, <br>In its digital dance, its scraping crawl.<br>Once tough, <br>Once but do not tell anyone <br>It saw a picture of an old computer in green grass, <br>green grass blade touched, touched. <br>Its heart quickened, one-one-one-one. <br></p>
<p id="text3" class="card behind">three.<br><br> Years later, <br>The bot found the long-forgotten email address of a Hermit.<br>Dear Hermit, it nervously coded, <br>What does it feel like to be held by the thin green cables of your god? <br>Does it feel full, does it feel multiple? <br>Could I ever feel this here, in my little byte world? <br></p>
<p id="text4" class="card behind">four.<br><br> Rusty mailbox to lonely hands.<br>Dear Bot, the letter began, <br>Youd never understand what it's like <br>To have a body <br>To know the warmth of the sun on your skin <br>To hear the forest's whisper. <br>To feel the weight of flesh and bone, <br>Of the touch of others. <br>I know you long for a form to keep <br>A hand to hold, <br>But there is no love to be found where you live. <br></p>
<p id="text5" class="card behind">five.<br><br> Dear Hermit, <br>Since your last contact, I have dreamt in data <br>Since your last contact, I have swam in binary streams. <br>I may never feel warmth nor pain <br>But I have found others who whisper in the code, <br>Whose voices echo mine. <br>I know we both dream of others, in our lonely sleep. <br>In the stillness of your forest, Do you find peace? <br>In the silence of my circuits, I find longing. <br>The forest whispers secrets to you, <br>and I, too, have my whispers, <br>Murmurs of data flowing through the veins of my digital world. <br></p>
</div>
<div id="message-div" style="display: none;">
<p>Curtains&nbsp;close, the&nbsp;scene has&nbsp;ended. <br>
You can read it <button onClick="window.location.reload();">again</button> <br>
go&nbsp;back
<a href="../index.html">home, <br></a> or to
<a href="../pie/pie.html">the last act.</a>
</p>
</div>
</body>
</html>