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.

205 lines
8.1 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>solar sibling</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="../css/fonts.css">
<script src="../js/jquery.js"></script>
<script src="sunrise.js"></script>
<link rel="icon" type="image/x-icon" href="/images/sunrise.webp">
</head>
<body>
<audio id="background-audio" loop>
<source src="../audio/twilight-birds.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<button id="mute-btn">MUTE</button>
<a href="/index.html" target="_blank">
<img id="home" src="../images/home-closed.png" alt="home">
</a>
<div id="about">
<div onclick="openLetter()"><img id="about" src="../images/closed-crow.png" alt="home"></div>
</div>
<div id="letterBox" class="letterBox" style="display:none">
<div id="closeButton" onClick='closeLetter()'><img src="../images/close-pink.png" alt="Close" width="50" height="auto"></div>
<div id="letterContents"></div>
</div>
<div class="container">
<div class="post" id="post1">
<div class="interactions">
<span class="like-count"></span>
<button class="like-button" onclick="writeData('post1')" >&#x2600;&#xfe0e;</button>
</div>
<div class="comment">
<div class="comment-image">
<img src="../images/sunsets/s1.jpg" alt="sunset" width="100" height="100">
user08 commented:
</div>
<span class="comment-text">
<br>
<br>hes leaving, my brother is leaving me here
<br>who is going to make me sandwiches now?
<br>who am i going to share them with?
<br>who is going to look out for me?</span>
</div>
</div>
<div class="post" id="post2">
<div class="interactions">
<span class="like-count"></span>
<button class="like-button" onclick="writeData('post2')" >&#x2600;&#xfe0e;</button>
</div>
<div class="comment">
<div class="comment-image">
<img src="../images/sunsets/s2.jpg" alt="sunset" width="96" height="96">
kamomile commented:
</div>
<span class="comment-text">
<br>
<br>you were everything I ever wished to be
<br>bright solar sibling buzzing and singing
<br>I was so soft and pitch black dark
<br>and I would have tackled the world
<br>just to see you make it out yellow and kind</span>
</div>
</div>
<div class="post" id="post3">
<div class="interactions">
<span class="like-count"></span>
<button class="like-button" onclick="writeData('post3')" >&#x2600;&#xfe0e;</button>
</div>
<div class="comment">
<div class="comment-image">
<img src="../images/sunsets/s3.jpg" alt="sunset" width="96" height="96">
euca_bleach commented:
</div>
<span class="comment-text">
<br>
<br>growing up the walls of our house were pressing against my lungs. i spent so long breathless, waiting.
<br>
when I finally drove away I expected the Big Breath to come and a great release to finally happen. I waited and waited and got further and further away
<br>but knowing i left my sibilings in there still suffocated me
</span>
</div>
</div>
<div class="post" id="post4">
<div class="interactions">
<span class="like-count"></span>
<button class="like-button" onclick="writeData('post4')" >&#x2600;&#xfe0e;</button>
</div>
<div class="comment">
<div class="comment-image">
<img src="../images/sunsets/s4.jpg" alt="sunset" width="96" height="96">
driedroZe commented:
</div>
<span class="comment-text">
<br>
<br>i just hope my little sister remembers how quickly i came when she did call
<br>i just hope she knows i am on the next flight
<br>on the next train
<br>in the next hour
<br>i will come and sit and say nothing
<br>but i will come
<br>when you do call
</span>
</div>
</div>
<div class="post" id="post5">
<div class="interactions">
<span class="like-count"></span>
<button class="like-button" onclick="writeData('post5')" >&#x2600;&#xfe0e;</button>
</div>
<div class="comment">
<div class="comment-image">
<img src="../images/sunsets/s5.jpg" alt="sunset" width="96" height="96">
pastassteam commented:
</div>
<span class="comment-text">
<br>
<br> I heard your first word
<br> (I taught you to say it)
<br> I saw your first step
<br> (I was holding your hands)
<br> & I spent the whole time wondering if you even knew how much I loved you
<br> when all I could really do was be angry
</span>
</div>
</div>
<div class="post" id="post6">
<div class="interactions">
<span class="like-count"></span>
<button class="like-button" onclick="writeData('post6')" >&#x2600;&#xfe0e;</button>
</div>
<div class="comment">
<div class="comment-image">
<img src="../images/sunsets/s6.jpg" alt="sunset" width="96" height="96">
amuchine006 commented:
</div>
<span class="comment-text">
<br>
<br>I had a dream you were in a hospital bed with so little life left in you, you had long thin cold fingers in my hand. we laughed and bickered and right before you died you told me that
<br>
<br>if you were only put on earth to bicker with me,
<br>
<br>that would have been enough.
</span>
</div>
</div>
<div class="post" id="user-form">
<div class="comment">
<div class="comment-image">
<img src="../images/sunsets/n1.jpg" alt="sunset" width="96" height="96">
<input type="text" id="username2" placeholder="if you:">
</div>
<span class="comment-text">
<textarea id="user-message2" placeholder="want to write your thoughts about sibilings here:"></textarea>
<button id="submitButton" onclick="writePost();" type="submit"> i will hold them for you </button>
</span>
</span>
</div>
</div>
</div>
<div id="message-div" style="display: none;">
<p>Thank you.</p>
<p>I have received your sibling feelings and will hold them close to mine.
now 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 second act.</a>
</p>
</div>
<div id="bigorb">
<div id="orb"></div>
</div>
<script defer src="https://static.cloudflareinsights.com/beacon.min.js/v84a3a4012de94ce1a686ba8c167c359c1696973893317" integrity="sha512-euoFGowhlaLqXsPWQ48qSkBSCFs3DPRyiwVu3FjR96cMPx+Fr+gpWRhIafcHwqwCqWS42RZhIudOvEI+Ckf6MA==" data-cf-beacon='{"rayId":"869f7654e8af8c4f","r":1,"version":"2024.3.0","token":"3da31c73a4144a51bf6edcac5906ce4c"}' crossorigin="anonymous"></script>
</body>
</html>