|
|
<!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>You’d 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 close, the scene has ended. <br>
|
|
|
You can read it <button onClick="window.location.reload();">again</button> <br>
|
|
|
go back
|
|
|
<a href="../index.html">home, <br></a> or to
|
|
|
<a href="../pie/pie.html">the last act.</a>
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
</html>
|