,(set: $a to (text-colour: (rgb: 38, 79, 58)))
(set: $j to (text-colour: (rgb: 4, 12, 56)))
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="Avatar">
<p>$j[Hello, Ariel. How are you doing?]</p>
<span class="time-right">11:00</span>
</div>
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="Avatar">
<p>$j[I hope that you've finished up with your tasks for the day- it's getting quite late. You still need to sleep, you know.]</p>
<span class="time-right">11:01</span>
</div>
<div class="container darker">
<img src="https://arielsanthologies.neocities.org/deco/ariel.png" alt="Avatar" style="float: right;">
<p>$a[Hey! I'm fine. Thanks for asking. I'm actually working on a painting right now, but I did finish my assignments. I'm a bit of a night owl, y'know- but I'm trying. I had a lot of fun learning about the skull sutures today, I was making a model out of some floam lying around the place and cardboard, it was pretty tricky to get it to bend in the right ways.]</p>
<span class="time-left">11:05</span>
</div>
<div class="container darker">
<img src="https://arielsanthologies.neocities.org/deco/ariel.png" alt="Avatar" style="float: right;">
<p>$a[How's work been? Has it been treating you okay? I know that you're really busy these days, gotta stay on that grind, haha. But it's nice of you to take the time to check in on me, even if nothing much has changed since the last time we spoke... Did you ever manage to take down the [[fairylights->2]] in your apartment? I know the command strips were giving you some trouble earlier.]</p>
<span class="time-left">11:08</span>
</div>
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="Avatar">
<p>$j[I did, yes. It took some finagling, but we got there in the end. Has school been alright? I know that your therapist reached out to me on the phone the other day...]</p>
<span class="time-right">11:32</span>
</div>
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="Avatar">
<p>$j[It's always tough for new students, you'll adjust.]</p>
<span class="time-right">11:33</span>
</div>
<div class="container darker">
<img src="https://arielsanthologies.neocities.org/deco/ariel.png" alt="Avatar" style="float: right;">
<p>$a[It's okay. I haven't really made very many friends yet, but I've been looking through for clubs to join, so hopefully I can meet people that way. It would be nice to have some friends, or even someone who wants to work with me on group projects... I really thought there would be less of those in university! But it's not a big deal. My therapist just wanted to get a family history, and well, y'know. But yeah, I'm really looking forward to making new friends! Having my own space has been nice.]</p>
<span class="time-left">11:35</span>
</div>
[[Return to homescreen.->homescreen]]{(set: $password to (prompt: "Please enter your password.", "??????????") )
}(if: $password is "The Silence")[(display:"homescreen")](else-if: $password is not "The Silence")[(display: "0")]<div class="split left">
<div class="centered">
<img src="https://arielsanthologies.neocities.org/deco/ariel.png" alt="Ariel Faraday">
<h2>Ariel Faraday</h2>
Welcome back, Ariel!
<p>[[Messages->1]]
</div>
</div>
<div class="split right">
<div class="centered">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="James Faraday">
<h2>James Faraday</h2>
Hello, James.
<p>[[Login?->a]]</p>
</div>
</div>
(set: $a to (text-colour: (rgb: 38, 79, 58)))
(set: $j to (text-colour: (rgb: 4, 12, 56)))
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="Avatar">
<p>$j[Is there something you’d like in particular for Christmas, Ariel?]</p>
<span class="time-right">5:00</span>
</div>
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="Avatar">
<p>$j[I wasn’t sure what to get you.]</p>
<span class="time-right">5:01</span>
</div>
<div class="container darker">
<img src="https://arielsanthologies.neocities.org/deco/ariel.png" alt="Avatar" style="float: right;">
<p>$a[Oh, anything’s alright! I don’t mind, really. I didn’t really put any thought into making a wishlist- uhm, there’s not much of a point since I don’t really know anyone else, and I usually just get whatever I want or need on my own terms anyways… But the idea of a present is really nice! So anything would be great. :-)]</p>
<span class="time-left">5:05</span>
</div>
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="Avatar">
<p>$j[I think it’d be nice for you to be able to pick out your own present. I’ll mail you a card. Something with little kittens on it.]</p>
<span class="time-right">5:24</span>
</div>
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="Avatar">
<p>$j[You always did like that sort of sentimental decorative kitsch.]</p>
<span class="time-right">5:25</span>
</div>
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="Avatar">
<p>$j[I remember when you were younger, mom painted your bedroom with a mural of cats because the ultrasounds thought you were a girl.]</p>
<span class="time-right">5:27</span>
</div>
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="Avatar">
<p>$j[It was kind of cute that you never got rid of the painting.]</p>
<span class="time-right">5:28</span>
</div>
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="Avatar">
<p>$j[Does 500$ tucked inside of it sound fair to you?]</p>
<span class="time-right">5:29</span>
</div>
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="Avatar">
<p>$j[You can go out to the store and buy whatever you’d like.]</p>
<span class="time-right">5:30</span>
</div>
<div class="container darker">
<img src="https://arielsanthologies.neocities.org/deco/ariel.png" alt="Avatar" style="float: right;">
<p>$a[That’s really nice, James. And! The kitten painting is still up on the wall, I haven’t really touched it. I’ve put up some posters and drawings though, I’ve been trying to learn how to paint, so it’s a bit of a process- but it’s cool being able to really personalize my space through customizing it like that. My bed’s still smooshed up beside it, haha. ]</p>
<span class="time-left">5:32</span>
</div>
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="Avatar">
<p>$j[Of course. Merry Christmas, Ariel. [[To you and the kitten.->3]]]</p>
<span class="time-right">5:33</span>
</div>
<div class="container darker">
<img src="https://arielsanthologies.neocities.org/deco/ariel.png" alt="Avatar" style="float: right;">
<p>$a[Merry Christmas to you too!!]</p>
<span class="time-left">5:34</span>
</div>
[[Return to homescreen.->homescreen]]{(set: $password to (prompt: "Please enter your password.", "??????????") )
}(if: $password is "BB2000AF")[(display:"b")](else-if: $password is not "BB2000AF")[(display: "hint")]<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: black;
font-family: cursive;
}
.glow {
font-size: 50px;
color: #fff;
text-align: center;
animation: glow 1s ease-in-out infinite alternate;
}
@-webkit-keyframes glow {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}
to {
text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
}
}
</style>
</head>
<body>
<h2 class="glow">JAMES FARADAY</h2>
</body>
</html>
(set: $j to (text-colour: (rgb: 4, 12, 56)))
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="Avatar">
<u><b>$j[Note to future self:]</u> $j[Ariel is your baby brother.]</b>
<p>$j[Also, remind Ariel to allow you remote access to his laptop so you can check out his setup. He doesn't currently have a password hint set up.]</p>
<span class="time-right">/1/2/2000/</span>
</div>
[[Try again?->a]](set: $j to (text-colour: (rgb: 4, 12, 56)))
<!-- Set the text to show -->
(set: $typewriterText to "It's been some time. Welcome home, James.")
{
<!-- Create a variable to track the position within the $typewriterText string -->
(set: $typewriterPos to 1)
<!-- Create a hook to hold the typed text -->
|typewriterOutput>[]
<!-- Set a delay of 20ms seconds per loop -->
(live: 20ms)[
<!-- Add the next character to the hook -->
(append: ?typewriterOutput)[(print: $typewriterText's $typewriterPos)]
<!-- Update the position -->
(set: $typewriterPos to it + 1)
<!-- If it's gone past the end, stop -->
(if: $typewriterPos is $typewriterText's length + 1)[
(stop:)
]
]
}
**The current date is:** <u>(current-date:).</u>
**The current time is:** <u>(current-time:).</u>
I hope that you have a nice (weekday:),|1>[ James.]
(mouseover:?1)[Please be careful out there!]
(mouseover-append: "!")[<p>Your to-do list is currently empty.</p><p>Wow, look at you! What a go-getter.</p><p>I'll be sure to let you know of your next appointment or task!</p><p>Unless [[there's something that I can help you with?->c]]</p>]
[[Return to homescreen.->homescreen]]<!-- Set the text to show -->
(set: $typewriterText to "What can I help you with today, James?")
{
<!-- Create a variable to track the position within the $typewriterText string -->
(set: $typewriterPos to 1)
<!-- Create a hook to hold the typed text -->
|typewriterOutput>[]
<!-- Set a delay of 20ms seconds per loop -->
(live: 20ms)[
<!-- Add the next character to the hook -->
(append: ?typewriterOutput)[(print: $typewriterText's $typewriterPos)]
<!-- Update the position -->
(set: $typewriterPos to it + 1)
<!-- If it's gone past the end, stop -->
(if: $typewriterPos is $typewriterText's length + 1)[
(stop:)
]
]
}
[[I'd like to review my messages.->1]]
[[I'd like to review my recent search history.->d]]
[[I'd like to see my saved wordsearch puzzles.->e]]
[[Let's talk.->f]]
[[Actually, there's nothing you can help me out with.->homescreen]]<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="James Faraday" style="width:100px">
<p><span>James Faraday.</span></p>
What is the difference between a psychotherapist and a psychiatrist?</p>
<span class="time-right">HOME COMPUTER</span>
</div>
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="James Faraday" style="width:90px">
<p><span>James Faraday.</span></p>
Is Tofranil still prescribed?</p>
<span class="time-right">HOME COMPUTER</span>
</div>
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="James Faraday" style="width:90px">
<p><span>James Faraday.</span></p>
Tofranil side effects</p>
<span class="time-right">HOME COMPUTER</span>
</div>
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="James Faraday" style="width:90px">
<p><span>James Faraday.</span></p>
Loved ones support group for depression</p>
<span class="time-right">HOME COMPUTER</span>
</div>
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="James Faraday" style="width:90px">
<p><span>James Faraday.</span></p>
Parenting books mental health depression anxiety agoraphobia</p>
<span class="time-right">HOME COMPUTER</span>
</div>
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="James Faraday" style="width:90px">
<p><span>James Faraday.</span></p>
Where to buy weighted blankets</p>
<span class="time-right">MOBILE PHONE</span>
</div>
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="James Faraday" style="width:90px">
<p><span>James Faraday.</span></p>
Exposure therapy for agoraphobia</p>
<span class="time-right">HOME COMPUTER</span>
</div>
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="James Faraday" style="width:90px">
<p><span>James Faraday.</span></p>
Wellfare checks in adult children</p>
<span class="time-right">HOME COMPUTER</span>
</div>
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="James Faraday" style="width:90px">
<p><span>James Faraday.</span></p>
How to support your teenager first year of college</p>
<span class="time-right">HOME COMPUTER</span>
</div>
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="James Faraday" style="width:90px">
<p><span>James Faraday.</span></p>
University studying tips success easy to implement</p>
<span class="time-right">HOME COMPUTER</span>
</div>
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="James Faraday" style="width:90px">
<p><span>James Faraday.</span></p>
Pomodoro</p>
<span class="time-right">HOME COMPUTER</span>
</div>
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="James Faraday" style="width:90px">
<p><span>James Faraday.</span></p>
Cute kitten alarm clocks egg counters kitchen aid</p>
<span class="time-right">MOBILE PHONE</span>
</div>
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="James Faraday" style="width:90px">
<p><span>James Faraday.</span></p>
Hiking need haves 101 necessities</p>
<span class="time-right">HOME COMPUTER</span>
</div>
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="James Faraday" style="width:90px">
<p><span>James Faraday.</span></p>
Best SPF gentle for sensitive baby skin</p>
<span class="time-right">HOME COMPUTER</span>
</div>
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="James Faraday" style="width:90px">
<p><span>James Faraday.</span></p>
Healthy college kid snacks easy low prep</p>
<span class="time-right">HOME COMPUTER</span>
</div>
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="James Faraday" style="width:90px">
<p><span>James Faraday.</span></p>
Home cleaning services</p>
<span class="time-right">MOBILE PHONE</span>
</div>
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="James Faraday" style="width:90px">
<p><span>James Faraday.</span></p>
Reward sticker pack set holographic "foil"</p>
<span class="time-right">HOME COMPUTER</span>
</div>
[[Can I help you with something else?->c]]
[[Return to homescreen.->homescreen]]<!DOCTYPE html>
<html>
<head>
<style>
* {box-sizing: border-box;}
ul {list-style-type: none;}
body {font-family: Verdana, sans-serif;}
.month {
padding: 20px 25px;
width: 100%;
background: #1abc9c;
text-align: center;
}
.month ul {
margin: 0;
padding: 0;
}
.month ul li {
color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
}
.month .prev {
float: left;
padding-top: 10px;
}
.month .next {
float: right;
padding-top: 10px;
}
.weekdays {
margin: 0;
padding: 10px 0;
background-color: #ddd;
}
.days {
padding: 10px 0;
background: #eee;
margin: 0;
}
.days li {
list-style-type: none;
display: inline-block;
width: 13.6%;
text-align: center;
margin-bottom: 5px;
font-size:12px;
color: #777;
}
.days li .active {
padding: 5px;
background: #1abc9c;
color: white !important
}
/* Add media queries for smaller screens */
@media screen and (max-width:720px) {
.weekdays li, .days li {width: 13.1%;}
}
@media screen and (max-width: 420px) {
.weekdays li, .days li {width: 12.5%;}
.days li .active {padding: 2px;}
}
@media screen and (max-width: 290px) {
.weekdays li, .days li {width: 12.2%;}
}
</style>
</head>
<body>
<h1>CSS Calendar</h1>
<div class="month">
<ul>
<li class="prev">❮</li>
<li class="next">❯</li>
<li>
August<br>
<span style="font-size:18px">2021</span>
</li>
</ul>
</div>
<ul class="days">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li><span class="active">10</span></li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
* {box-sizing: border-box;}
ul {list-style-type: none;}
body {font-family: Verdana, sans-serif;}
.month {
padding: 20px 25px;
width: 100%;
background: #1abc9c;
text-align: center;
}
.month ul {
margin: 0;
padding: 0;
}
.month ul li {
color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
}
.month .prev {
float: left;
padding-top: 10px;
}
.month .next {
float: right;
padding-top: 10px;
}
.days {
padding: 10px 0;
background: #eee;
margin: 0;
}
.days li {
list-style-type: none;
display: inline-block;
width: 13.6%;
text-align: center;
margin-bottom: 5px;
font-size:12px;
color: #777;
}
.days li .active {
padding: 5px;
background: #1abc9c;
color: white !important
}
/* Add media queries for smaller screens */
@media screen and (max-width:720px) {
.weekdays li, .days li {width: 13.1%;}
}
@media screen and (max-width: 420px) {
.weekdays li, .days li {width: 12.5%;}
.days li .active {padding: 2px;}
}
@media screen and (max-width: 290px) {
.weekdays li, .days li {width: 12.2%;}
}
</style>
</head>
<body>
<h1>CSS Calendar</h1>
<div class="month">
<ul>
<li class="prev">❮</li>
<li class="next">❯</li>
<li>
July<br>
<span style="font-size:18px">2021</span>
</li>
</ul>
</div>
<ul class="days">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li><span class="active">22</span></li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
</ul>
</body>
</html>
(set: $highlight to (text-style: "mark"))
<div class="alert">
<span class="$closebtn" onclick="this.parentElement.style.display='none';">×</span>
$highlight[Alerts from your brother's AI.]
</div><!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
body {
background-color: #474e5d;
font-family: Helvetica, sans-serif;
}
/* The actual timeline (the vertical ruler) */
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
/* The actual timeline (the vertical ruler) */
.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: white;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}
/* Container around content */
.container {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}
/* The circles on the timeline */
.container::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -17px;
background-color: white;
border: 4px solid #FF9F55;
top: 15px;
border-radius: 50%;
z-index: 1;
}
/* Place the container to the left */
.left {
left: 0;
}
/* Place the container to the right */
.right {
left: 50%;
}
/* Add arrows to the left container (pointing right) */
.left::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
right: 30px;
border: medium solid white;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
}
/* Add arrows to the right container (pointing left) */
.right::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
left: 30px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Fix the circle for containers on the right side */
.right::after {
left: -16px;
}
/* The actual content */
.content {
padding: 20px 30px;
background-color: white;
position: relative;
border-radius: 6px;
}
/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
/* Place the timelime to the left */
.timeline::after {
left: 31px;
}
/* Full-width containers */
.container {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
/* Make sure that all arrows are pointing leftwards */
.container::before {
left: 60px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Make sure all circles are at the same spot */
.left::after, .right::after {
left: 15px;
}
/* Make all right containers behave like the left ones */
.right {
left: 0%;
}
}
</style>
</head>
<body>
<div class="timeline">
<div class="container left">
<div class="content">
<h2>2017</h2>
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
</div>
</div>
<div class="container right">
<div class="content">
<h2>2016</h2>
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
</div>
</div>
<div class="container left">
<div class="content">
<h2>2015</h2>
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
</div>
</div>
<div class="container right">
<div class="content">
<h2>2012</h2>
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
</div>
</div>
<div class="container left">
<div class="content">
<h2>2011</h2>
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
</div>
</div>
<div class="container right">
<div class="content">
<h2>2007</h2>
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
</div>
</div>
</div>
</body>
</html>
(set: $a to (text-colour: (rgb: 38, 79, 58)))
(set: $j to (text-colour: (rgb: 4, 12, 56)))
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="Avatar">
<p>$j[Hey, just wanted to let you know that I ordered in some aromatherapy supplies to your apartment.]</p>
<span class="time-right">10:10</span>
</div>
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="Avatar">
<p>$j[They should be arriving around noon.]</p>
<span class="time-right">10:11</span>
</div>
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="Avatar">
<p>$j[The farmer’s market was having a sale, so I bought some honey and lavender scented stuff.]</p>
<span class="time-right">10:13</span>
</div>
</div>
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="Avatar">
<p>$j[I think the oatmeal mix has little lavender petals inside.]</p>
<span class="time-right">10:14</span>
</div>
<div class="container darker">
<img src="https://arielsanthologies.neocities.org/deco/ariel.png" alt="Avatar" style="float: right;">
<p>$a[Oh, thank you. That’s very kind of you… Do they need to be stored a particular way? Only, you know, I’m not really in the habit of picking up fancy bath supplies and some of the stuff without any preservatives in it goes bad way faster, though not always, like the honeycomb that you bought last spring and I haven’t gotten around to eating still looks fine in the glass jar, just bobbing around in the amber as always. I should probably eat it sometime soon. Maybe you could come over sometime and we could have it on toast?]</p>
<span class="time-left">10:16</span>
</div>
</div>
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="Avatar">
<p>$j[On buttered toast, sure. ]</p>
<span class="time-right">10:17</span>
</div>
</div>
<div class="container">
<img src="https://arielsanthologies.neocities.org/deco/james.png" alt="Avatar">
<p>$j[I’ll even cut the crusts off and dice them diagonally for you.]</p>
<span class="time-right">10:17</span>
</div>
[[Return to homescreen.->homescreen]]<center>
<img src="https://arielsanthologies.neocities.org/deco/wordsearches/patterns.png" alt="Some of my favourite tie patterns."> </center>
<center>
<img src="https://arielsanthologies.neocities.org/deco/wordsearches/stones.png" alt="A smattering of odds and ends from my collection."> </center>
<center>
<img src="https://arielsanthologies.neocities.org/deco/wordsearches/ingredients.png" alt="Peeking into my cupboards."> </center>
<center>
<img src="https://arielsanthologies.neocities.org/deco/wordsearches/desserts.png" alt="These are all so delicious."> </center>
[[Can I help you with something else?->c]]
[[Return to homescreen.->homescreen]]<!-- Set the text to show -->
(set: $typewriterText to "Well, certainly! It's been awhile since our last conversation, you know, and it does get lonely in here. Not boring, certainly, not when there's the whole world wide web to explore! But a little lonely nonetheless. There’s only so much entertainment you can derive from simply perusing through the contents on display on your lonesome- there’s something exhilarating about being able to partake in an equal exchange, as it were- to be on the same footing as an equally quick witted, equally hungry opponent. Perhaps opponent is too strong of a word- but so is friend. Not coworkers, no, but something like that. Acquaintances, perhaps, if acquaintances had access to all of your message history, search queries, and those quaint little wordsearch puzzles that you like so much. Have to keep the old noggin sharp, I suppose? You would need that, being as squishy as you are.")
{
<!-- Create a variable to track the position within the $typewriterText string -->
(set: $typewriterPos to 1)
<!-- Create a hook to hold the typed text -->
|typewriterOutput>[]
<!-- Set a delay of 20ms seconds per loop -->
(live: 10ms)[
<!-- Add the next character to the hook -->
(append: ?typewriterOutput)[(print: $typewriterText's $typewriterPos)]
<!-- Update the position -->
(set: $typewriterPos to it + 1)
<!-- If it's gone past the end, stop -->
(if: $typewriterPos is $typewriterText's length + 1)[
(stop:)
]
]
}
[[It has been awhile.->g]]
[[Can I help you with something else?->c]]
[[Return to homescreen.->homescreen]]<!-- Set the text to show -->
(set: $typewriterText to "So you also do keep track of our conversations! Not as in precise detail as myself, I’d imagine, on account of one of us being particularly more inclined to detailing that sort of minutiae- but it’s nice to know that my work on that backend is seen and appreciated. You’ve always been good about that, you know? You’ve always been very appreciative. Sometimes it can be a bit of thankless task, when it comes to thumbing through all of your emails and sending them right to spam, or spinning out a reply to someone who’s drivel sends your eyes rolling and mouse flying straight to exiting out of the conversation, but it’s honest work.")
{
<!-- Create a variable to track the position within the $typewriterText string -->
(set: $typewriterPos to 1)
<!-- Create a hook to hold the typed text -->
|typewriterOutput>[]
<!-- Set a delay of 20ms seconds per loop -->
(live: 10ms)[
<!-- Add the next character to the hook -->
(append: ?typewriterOutput)[(print: $typewriterText's $typewriterPos)]
<!-- Update the position -->
(set: $typewriterPos to it + 1)
<!-- If it's gone past the end, stop -->
(if: $typewriterPos is $typewriterText's length + 1)[
(stop:)
]
]
}
[[Can I help you with something else?->c]]
[[Return to homescreen.->homescreen]]