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

6 months ago
<!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">
6 months ago
</head>
</head>
<body>
<!-- nav -->
<a href="../index.html" target="_self">
<img id="home" src="../photos/home-closed.png" alt="home">
6 months ago
</a>
<div id="about">
<div onclick="openLetter()"><img id="about" src="../photos/closed-crow.png" alt="home"></div>
6 months ago
</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>
6 months ago
<div id="letterContents"></div>
</div>
<!-- audio -->
<audio id="background-audio" loop>
<source src="../audio/machine-birds.mp3" type="audio/mp3">
6 months ago
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>
6 months ago
<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>
6 months ago
</p>
</div>
</body>
</html>