Encoded

The Standard.html

<!DOCTYPE html>
<html>
<head lang = "lingua cordis"> Piqued Interest
<title> You </title>
</head>

<body>
<br><hr>

<h1> Attractive </h1>
<p title = "I see galaxies">
<mark><em><b> Within </b></em></mark> your eyes, a universe expanding. </p>
<p title = "Building blocks and puzzle pieces">
The foundation of <mark><em><b> a future world </b></em></mark>. </p>
<p title = "Chaotic acoustics">
Before the bells and whistles, <mark><em><b> there was </b></em></mark> Tim Berners-Leeding. </p>
<p title = "Entanglement">
Casting a web wide enough to reach <mark><em><b> YOU. </b></em></mark> </p>
<br><hr>

<h2> Lovely </h2>
<a href = "IPinter.com " target = "_top"> The Link </a>
<img src = "still.RAW" alt = "A dream" width = "100" height = "100">
<pre> <i><strong>
<del>The outline</del>
<ins>The starting place</ins>
The tug of fate
On my heart
In a language
Without words<sup>(01 & 00)</sup>
Encoded like DNA<sub>(A&T G&C)</sub> </i></strong>
</pre>
<br><hr>

<h3> Elegant </h3>
<p><a href = "#A"><bdo dir = "rtl"> .gnitsefinaM :nigeB oT </bdo></a>
<br>
<iframe src = "Envisioning.WebP" height = "144" width = "144"></iframe> </p>
<br><hr>

<h4> Xenial </h4>
<p><cite> How do I love thee? Let me count the ways </cite> by Elizabeth Barrett Browning </p>
<blockquote cite = "https://www.poetryfoundation.org/poems/43742/sonnets-from-the-portuguese-43-how-do-i-love-thee-let-me-count-the-ways">
How do I love thee? Let me count the ways.
I love thee to the depth and breadth and height
My soul can reach, when feeling out of sight
For the ends of being and ideal grace.
I love thee to the level of every day’s
Most quiet need, by sun and candle-light.
I love thee freely, as men strive for right;
I love thee purely, as they turn from praise.
I love thee with the passion put to use
In my old griefs, and with my childhood’s faith.
I love thee with a love I seemed to lose
With my lost saints. I love thee with the breath,
Smiles, tears, of all my life; and, if God choose,
I shall but love thee better after death.
</blockquote>
<br><hr>

<h5> Exquisite </h5>
<ol id = "A" type = "I">
<li> Beauty </li>
<li> Charm </li>
<li> Radiance </li>
<li> Divinity </li>
</ol>
<br>

<h6> Impeccable </h6>
<table title = "Order in the Chaos" cellpadding = "4" cellspacing = "2">
<caption> In Spire </caption>
<thead>
<tr>
<th> Hope </th>
<th> Faith </th>
<th> Love </th>
<th> Discipline </th>
</tr>
</thead>
<tbody>
<tr>
<td> on the wings of a Dove </td>
<td> a north Star </td>
<td> Forget-me-not </td>
<td> chosen Chains </td>
</tr>
<tr>
<td> renew like the Phoenix </td>
<td> a guiding Light </td>
<td> for i am but a Jasmine </td>
<td> a devotional Shield </td>
</tr>
<tr>
<td> bring the cheerful Robin </td>
<td> an eternal Flame </td>
<td> declaring my Tulips </td>
<td> a Temple, where divinity dwells </td>
</tr>
</tbody>
<tfoot>
<tr>
<td> <sub><small> an anchor </small></sub></td>
<td> <sub><small> a buttress </small></sub></td>
<td> <sub><small> a bulwark </small></sub></td>
<td> <sub><small> to embed </small></sub></td>
</tr>
</tfoot>
</table>
<br>
<br>
<div> Worthy of Suffering </div>

<meta name = "keywords" content = "HTML">
<meta name = "description" content = "a love poem">
<meta name = "author" content = "the source of eternal love">

</body>
</html>

CompaSS.html

<!DOCTYPE html>
<html>

<head lang = "Magnetoreception">
<title> A Voluntary Migration </title>

<style>
h1 {
width: 99dvw;
outline-style: groove;
outline-width: thin;
background-image: url(https://media.gettyimages.com/id/667588491/photo/northern-lights-over-top-of-the-town-known-as-djupavik-along-the-strandir-coast.jpg?s=2048x2048&w=gi&k=20&c=IWSddLNSojW3_LQzOJocv70obuLmcZep5lihV9zdDEs=);
font-size: 88px;
text-align: center;
}

#toggle {
display: none;
}

body {
width: 100dvw;
text-align: center;
color: white;
background-color: black;
font-family: courier;
background-attachment: fixed;
}

h2 {
zoom: 111%;
word-break: normal;
word-spacing: normal;
vertical-align: super;
margin-top: 100px;
padding-bottom: 50px;
}

label {
cursor: pointer;
}

.любовь {
border: 8px solid #98AFC7;
border-start-start-radius: 69%;
font-weight: bold;
font-size: 22px;
display: block;
transition: all 0.2s ease;
background-color: lightblue;
color: #254117;
margin-top: 44px;
margin-bottom: 44px;
margin-right: 44px;
margin-left: 44px;
user-select: none;
}

#toggle2 {
display: none;
}

.навсегда {
border: 8px solid grey;
border-start-end-radius: 69%;
font-weight: bold;
font-size: 22px;
display: block;
transition: all 0.2s ease;
background-color: lightgrey;
color: #254117;
margin-top: 44px;
margin-bottom: 44px;
margin-right: 44px;
margin-left: 44px;
user-select: none;
}

.любовь:active, .навсегда:active {
transform: translateY(0);
}

#toggle:checked + .любовь, #toggle2:checked + .навсегда {
border: 8px solid #7F7F7F;
background-color: #808080;
}

.любовь:hover, .навсегда:hover {
transform: scale(1.02);
border: 8px solid #AF0000;
background-color: tomato;
}

.любовь::after, .навсегда::after {
display: inline-block;
content: "▼";
transition: transform 0.4s ease;
margin-left: 11px;
}

#toggle:checked + .любовь::after, #toggle2:checked + .навсегда::after {
transform: rotate(180deg);
}

#toggle:checked + .любовь:hover, #toggle2:checked + .навсегда:hover {
transform: scale(1.02);
border: 8px solid #AF0000;
background-color: tomato;
}

.collapsible-content {
opacity: 0;
overflow: hidden;
max-height: 0;
border-radius: 25%;
}

#toggle:checked + .любовь + .collapsible-content, #toggle2:checked + .навсегда + .collapsible-content {
transition: all 0.4s;
opacity: 1;
background-color: #f9f9f9;
color: #254117;
max-height: 100%;
padding: 100px;
}

#аврора {
animation: aRushingDance 22s alternate infinite;
height: 100px;
width: 99%;
}

@keyframes aRushingDance {
0% { background-color: #000080; }
20% { background-color: #008000; }
40% { background-color: #800000; }
60% { background-color: #800080; }
80% { background-color: #808000; }
100% { background-color: #800080; }
}
</style>

<h1> A True North: <small>With Flashing Lights</small> </h1>
</head>

<body>
<p> I felt like a bird — not blowing in the wind — guided by the magnetism </p>

<input type = "checkbox" id = "toggle" />
<label class = "любовь" for = "toggle"> Learning To Fly </label>
<div class = "collapsible-content">
<p><cite><h2> At That Hour </h2></cite> by James Joyce </p>
<pre><blockquote cite = "https://mypoeticside.com/show-classic-poem-14348">
At that hour when all things have repose,
O lonely watcher of the skies,
Do you hear the night wind and the sighs
Of harps playing unto Love to unclose
The pale gates of sunrise?
When all things repose, do you alone
Awake to hear the sweet harps play
To Love before him on his way,
And the night wind answering in antiphon
Till night is overgone?

Play on, invisible harps, unto Love,
Whose way in heaven is aglow
At that hour when soft lights come and go,
Soft sweet music in the air above
And in the earth below.
</blockquote></pre>
<br><hr>
<p><cite><h2> Roll the dice </h2></cite> by Charles Bukowski </p>
<pre><blockquote cite = "https://deeptrums.com/5-poems-of-charles-bukowski-you-should-not-miss">
If you’re going to try, go all the way. Otherwise, don’t even start.
If you’re going to try, go all the way. This could mean
– losing girlfriends, wives, relatives, jobs, and maybe your mind;
go all the way
it could mean not eating for three or four days
it could mean freezing on a park bench
it could mean jail
it could mean derision, mockery, isolation
Isolation is a gift. All the others are a test of your endurance,
how much you really want to do it.
And you will do it.
Despite rejections and the worst odds
And it will be better than anything else that you can imagine
If you’re going to try, go all the way
There’s no other feeling like that
You will be alone with the gods and the nights will flame with fire
Do it; do it; do it
All the way
You will ride life straight into perfect laughter, it’s the only good fight
there is.
</blockquote></pre>
<br><hr>
<p><cite><h2> All Day I Hear the Noise of Waters </h2></cite> by James Joyce </p>
<pre><blockquote cite = "https://mypoeticside.com/show-classic-poem-14350">
All day I hear the noise of waters
Making moan,
Sad as the sea-bird is when, going
Forth alone,
He hears the winds cry to the water's
Monotone.

The grey winds, the cold winds are blowing
Where I go.
I hear the noise of many waters
Far below.
All day, all night, I hear them flowing
To and fro.
</blockquote></pre>
<br><hr>
<p><cite><h2> a pretty a day </h2></cite> by e.e. cummings </p>
<pre><blockquote cite = "https://mypoeticside.com/show-classic-poem-6980">
a pretty a day
(and every fades)
is here and away
(but born are maids
to flower an hour
in all,all)

o yes to flower
until so blithe
a doer a wooer
some limber and lithe
some very fine mower
a tall;tall

some jerry so very
(and nellie and fan)
some handsomest harry
(and sally and nan
they tremble and cower
so pale ale)

for betty was born
to never say nay
but lucy could learn
and lily could pray
and fewer were shyer
than doll. doll
</blockquote></pre>
</div>

<p> through the seasons — through the years </p>

<input type = "checkbox" id = "toggle2" />
<label class = "навсегда" for = "toggle2"> Learning To Land </label>
<div class = "collapsible-content">
<p><cite><h2> all which isn't singing is mere talking </h2></cite> by e.e. cummings </p>
<pre><blockquote cite = "https://mypoeticside.com/show-classic-poem-6983">
all which isn't singing is mere talking
and all talking's talking to oneself
(whether that oneself be sought or seeking
master or disciple sheep or wolf)

gush to it as deity or devil
-toss in sobs and reasons threats and smiles
name it cruel fair or blessed evil-
it is you (ne i)nobody else

drive dumb mankind dizzy with haranguing
-you are deafened every mother's son-
all is merely talk which isn't singing
and all talking's to oneself alone

but the very song of(as mountains
feel and lovers)singing is silence
</blockquote></pre>
<br><hr>
<p><cite><h2> ballad of the scholar's lament </h2></cite> by e.e. cummings </p>
<pre><blockquote cite = "https://mypoeticside.com/show-classic-poem-7028">
When I have struggled through three hundred years
of Roman history, and hastened o'er
Some French play-(though I have my private fears
Of flunking sorely when I take the floor
In class),-when I have steeped my soul in gore
And Greek, and figured over half a ream
With Algebra, which I do (not) adore,
How shall I manage to compose a theme?

It's well enough to talk of poor and peers,
And munch the golden apples' shiny core,
And lay a lot of heroes on their biers;-
While the great Alec, knocking down a score,
Takes out his handkerchief, boohoo-ing, "More!"-
But harshly I awaken from my dream,
To find a new,-er,-privilege,-in store:
How shall I manage to compose a theme?

After I've swallowed prophecies of seers,
And trailed Aeneas from the Trojan shore,
Learned how Achilles, after many jeers,
On piggy Agamemnon got to sore,
And heard how Hercules, Esq., tore
Around, and swept and dusted with a stream,
There's one last duty,-let's not call it bore,-
How shall I manage to compose a theme?

Envoi

Of what avail is all my mighty lore?
I beat my breast, I tear my hair, I scream:
"Behold, I have a Herculean chore.
How shall I manage to compose a theme?"
</blockquote></pre>
<br><hr>
<p><cite><h2> if </h2></cite> by e.e. cummings </p>
<pre><blockquote cite = "https://mypoeticside.com/show-classic-poem-7024">
If freckles were lovely, and day was night,
And measles were nice and a lie warn't a lie,
Life would be delight,-
But things couldn't go right
For in such a sad plight
I wouldn't be I.

If earth was heaven, and now was hence,
And past was present, and false was true,
There might be some sense
But I'd be in suspense
For on such a pretense
You wouldn't be you.

If fear was plucky, and globes were square,
And dirt was cleanly and tears were glee
Things would seem fair,-
Yet they'd all despair,
For if here was there
We wouldn't be we.
</blockquote></pre>
<br><hr>
<p><cite><h2> IF– </h2></cite> by Rudyard Kipling </p>
<pre><blockquote cite = "https://www.poetryfoundation.org/poems/46473/if---">
If you can keep your head when all about you
Are losing theirs and blaming it on you,
If you can trust yourself when all men doubt you,
But make allowance for their doubting too;
If you can wait and not be tired by waiting,
Or being lied about, don’t deal in lies,
Or being hated, don’t give way to hating,
And yet don’t look too good, nor talk too wise:

If you can dream—and not make dreams your master;
If you can think—and not make thoughts your aim;
If you can meet with Triumph and Disaster
And treat those two impostors just the same;
If you can bear to hear the truth you’ve spoken
Twisted by knaves to make a trap for fools,
Or watch the things you gave your life to, broken,
And stoop and build ’em up with worn-out tools:

If you can make one heap of all your winnings
And risk it on one turn of pitch-and-toss,
And lose, and start again at your beginnings
And never breathe a word about your loss;
If you can force your heart and nerve and sinew
To serve your turn long after they are gone,
And so hold on when there is nothing in you
Except the Will which says to them: ‘Hold on!’

If you can talk with crowds and keep your virtue,
Or walk with Kings—nor lose the common touch,
If neither foes nor loving friends can hurt you,
If all men count with you, but none too much;
If you can fill the unforgiving minute
With sixty seconds’ worth of distance run,
Yours is the Earth and everything that’s in it,
And—which is more—you’ll be a Man, my son!
</blockquote></pre>
</div>

<p> dance — weave — romance </p>
<div id = "аврора"> </div>

<meta name = "keywords" content = "HTML, CSS">
<meta name = "description" content = "a love poem">
<meta name = "author" content = "the source of eternal love">

</body>
</html>

W3Brainery.css

<!DOCTYPE html>
<html lang = "Nucleolus">
<head>

<title> Dreamscape </title>
<link rel = "stylesheet" href = "https://www.w3schools.com/w3css/5/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-2024.css">

<style>
.looking-like-fools {
gap: clamp(4px, 2dvw, 6px);
flex-wrap: wrap;
justify-content: center;
}

.maddly-in-love {
text-align: center;
transition: transform 2s ease;

min-width: 22px;
flex: auto auto auto;
}
.maddly-in-love h4 {
font-size: clamp(.6rem, 2dvw, .8rem);
margin: 0;
}
.maddly-in-love:hover {
transform: scale(1.1);
}

@keyframes kissAnimation {

}

@keyframes kissAppear {
0% { opacity: .5;
transform: translate(-50%, -50%) scale(0); }
50% { opacity: 1;
transform: translate(-50%, -50%) scale(1.2); }
100% { opacity: 1;
transform: translate(-50%, -50%) scale(1); }
}

.maddly-in-love:hover::after {
top: 50%;
content: "💋";

transform: translate(-50%, -50%);
position: absolute;

animation: kissAppear 2s ease-in-out forwards;
font-size: 2em;
animation-iteration-count: 4;
}

.dreaming-of-you {
display: flex;

top: 0;
position: absolute;

align-items: center;
width: auto;
height: 100%;
justify-content: center;
}
.dreaming-of-you.left {
left: 2.5%;
}
.dreaming-of-you.right {
right: 2.5%;
}

.image-container {
width: auto;
height: auto;
position: absolute;
}
.image-container img {
width: 100dvw;
height: 100dvh;
object-fit: cover;
}

.dreaming-of-you pre {
white-space: pre-wrap;
font-size: clamp(0.6rem, 1.4dvw, 2rem);
line-height: 1.2;
overflow-y: auto;
background: rgba(222, 222, 222, 0.4);
border-radius: 6px;
margin: 0;
max-height: 90%;
word-wrap: normal;
padding: 10px;
}
.dreaming-of-you.left {
left: 8%;
}
.dreaming-of-you.right {
right: 8%;
}
.dreaming-of-you {
width: 40%;
font-size: 0.7rem;
}

</style>
</head>

<body>
<div class="w3-flex w3-2024-moonstruck looking-like-fools">
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">😘</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💕</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💋</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">😘</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💕</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💋</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">😘</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💕</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💋</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">😘</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💕</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💋</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">😘</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💕</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💋</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">😘</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💕</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💋</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">😘</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💕</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💋</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">😘</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💕</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💋</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">😘</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💕</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💋</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">😘</h4></div>
</div>

<div class = "image-container">
<img src="https://api.nga.gov/iiif/ffd3e8e9-6642-427b-aad5-ef69735b2204__900/0,70,900,472/!1200,630/0/default.jpg" alt = "line of sight">

<div class = "dreaming-of-you left">
<pre>
Moonlight streams through a cracked windowsill,
Sheer curtains billow in the light breeze.
I am lying in an empty room,
Beneath cool sheets,
Imagining you beside me—
Your long, heavy breath
Along my back,
The warmth from your body,
The weight of your arm
Hooked around my chest.
In a chaotic world, I am at rest,
In the safest place—
Building a nest, woven with blessings,
Handled with love, carried in on angel wings.
I haven’t quite yet fallen asleep;
I am too excited,
Finally having caught up with my dreams—
Those of you and me.
I think,
</pre>
</div>

<div class = "dreaming-of-you right">
<pre>
I may no longer ever need to sleep—
Not, at least, to see you,
Now here with me...
I turn around to kiss you,
To lay my ear upon your chest;
I long for the sound of your heart’s beat...
But am met with empty space, and silence.
That’s when it hits me—
Reality.
Still beneath the cool sheets,
Not warmed by your body,
I cling tightly to your memory,
To the moments we create,
Little by little, building
Toward a life in which we live together—
A bed we share,
Wrapped in sheets we heat,
Beneath the moonlight,
Enmeshed in the quiet gravity of each other’s stare.
</pre>
</div>
</div>

<meta name = "keywords" content = "HTML, CSS, W3.CSS">
<meta name = "description" content = "a love poem">
<meta name = "author" content = "the source of eternal love">

</body>
</html>

humanUser

<!DOCTYPE html>
<html lang = "of the living">

<script>
//no matter your point of viewing
   function getBrowser() {
      const humanUser = navigator.userAgent;
      if (humanUser.indexOf("Firefox") > -1) {
      return "Firefox";
      } else if (humanUser.indexOf("Edg") > -1) {
         return "Edge";
      } else if (humanUser.indexOf("Chrome") > -1) {
         return "Chrome";
      } else if (humanUser.indexOf("Safari") > -1) {
         return "Safari";
      } else if (humanUser.indexOf("MSIE") > -1 ||
         humanUser.indexOf("Trident") > -1) {
         return "IE";
      }
      return "Unknown";
   }

//may there be good tidings
   alert("Красота спасёт мир");
   alert("La beauté sauvera le monde");
   alert("La belleza salvará el mundo");
   alert("Die Schönheit wird die Welt retten");
   alert("Краса врятує світ");
   alert("美は世界を救う");
   alert("美丽将拯救世界");
   alert("सौंदर्य दुनिया को बचाएगा");
   alert("جمال عالم را نجات خواهد داد");
   alert("היפי יציל את העולם");
   alert("Beauty will save the world");

//until the end
   const browser = getBrowser();
   window.close();

//of time...
   setTimeout(() => {
      document.body.innerHTML = `
      <h1></h1>
      <p>Browser detected: ${browser}<p>
      <p>Due to ${browser} security settings, this window cannot close itself automatically.<p>`;
   }, 111);
</script>
</html>

Act 1: Dynamical Systems

<!DOCTYPE html>
<html lang="vulnerability">
<head>
<meta charset="UTF-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<meta name = "keywords" content = "HTML, CSS, JavaScript">
<meta name = "description" content = "a love poem">
<meta name = "author" content = "the source of eternal love">

<title>The Delivery</title>

<style>
/*by hand*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;

/*Characters: you, me*/

/*my*/
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
position: relative;
overflow-x: hidden;
}
/*trembling*/

/*Setting:*/
.titleContent-wrapper {
position: relative;
z-index: 10;
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
}
.titleHeader {
text-align: center;
margin-bottom: 40px;
}
.titleHeader h1 {
font-size: 2.5em;
color: #2c3e50;
font-weight: 300;
letter-spacing: 2px;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.card {
background: rgba(255, 255, 255, 0.10);
border-radius: 16px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
backdrop-filter: blur(.5px);
}

/*Plot:*/
.signHere {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}

/*Motif:*/
.button-group {
display: flex;
gap: 15px;
}
button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 12px 30px;
border-radius: 25px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}
button:active {
transform: translateY(0);
}

/*Themes:*/
/*something to treasure*/
.image-container {
margin-top: 20px;
text-align: center;
}
.image-container img {
max-width: 200px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
transition: transform 0.3s ease;
}
.image-container img:hover {
transform: scale(1.05);
}

/*a total vibe*/
.choices-section {
margin-top: 30px;
align-items: center;
display: flex;
flex-direction: column;
}
.choices-section h2 {
color: #2c3e50;
font-size: 1.8em;
font-weight: 400;
margin-bottom: 25px;
text-align: center;
}
.choice-item {
background: rgba(255, 255, 255, .2);
padding: 20px;
border-radius: 12px;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.3s ease;
}
.choice-item:hover {
background: rgba(255, 255, 255, 0.5);
transform: translateX(5px);
}
.choice-text {
font-size: 1.1em;
color: #34495e;
align-items: center;
}

/*a long-term commitment*/
.response-text {
font-size: 1.1em;
color: #667eea;
font-weight: 500;
font-style: italic;
align-items: center;
}

.axiom {
background: #2c3e50;
color: #ecf0f1;
padding: 20px;
border-radius: 12px;
font-family: 'Courier New', monospace;
font-size: 1em;
line-height: 1.8;
margin-top: 30px;
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
}

/*a place where anything is possible*/
.canvas-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}
.canvas-title {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: rgba(44, 66, 88, 0.4);
font-size: 1.2em;
font-weight: 300;
letter-spacing: 3px;
text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
z-index: 5;
pointer-events: none;
}
canvas {
display: block;
width: 100%;
height: 100%;
}

/*where everything seems to fit*/
@media (max-width: 768px) {
.titleHeader h1 {
font-size: 1.8em;
}

.button-group {
flex-direction: column;
}

button {
width: 100%;
}

.choice-item {
flex-direction: column;
gap: 15px;
text-align: center;
}
}
</style>
</head>


<body>

<div class="canvas-container">
<div class="canvas-title">the Love here is infinite</div>
<canvas id="canvas"></canvas>
</div>


<div class="titleContent-wrapper">
<div class="titleHeader">

<h1>The Delivery</h1>
</div>


<div class="card">

<div class="signHere">
<div class="button-group">
<button onclick="changeImage('policy')">Policy</button>
<button onclick="changeImage('open')">Open</button>
</div>

<div class="image-container">

<img id="myImage"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQkYRdrvg_ylfhamyg0bmKPeq6HE4xQaARx4A&s"
alt="Delivery Image">
</div>
</div>
</div>

<div class="card">

<div class="choices-section">
<h2>Having seen the contents</h2>
<div class="choice-item">
<span class="choice-text" id="possibility1">You may choose to <button onclick="runFunction()">Run</button></span>
</div>

<div class="choice-item">
<span class="choice-text" id="possibility2">You may choose to <button onclick="stayFunction()">Stay</button></span>
</div>
</div>

<div class="axiom">
let x = you;<br>
let y = me;<br>
let sum = you + me + ∞;
</div>
</div>
</div>



<script>
// no refunds, only exchanges; sine here
function changeImage(type) {
const img = document.getElementById('myImage');
if (type === 'policy') {
img.src = 'https://i.ebayimg.com/images/g/q~UAAeSwhRhoXsD0/s-l300.jpg';
} else if (type === 'open') {
img.src = 'https://tse2.mm.bing.net/th/id/OIP.Jrt2WxsH2XXWEH44qYc3SgHaE7?rs=1&pid=ImgDetMain&o=7&rm=3';
}
}

// your heart knows this —
function runFunction() {
document.getElementById("possibility1").innerHTML =
'<span class="response-text">Я жду тебя с распростёртыми руками</span>';
}

function stayFunction() {
document.getElementById("possibility2").innerHTML =
'<span class="response-text">I am waiting for you with open arms</span>';
}

// in a space of pure potential
const canvas = document.getElementById('canvas');
const lex = canvas.getContext('2d');
// i have a job for you

function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}

resizeCanvas();
window.addEventListener('resize', resizeCanvas);

let centerX = canvas.width / 2;
let centerY = canvas.height / 2;

// establishing natural parameters and laying our foundations
const g = 0.2;
const L = 150;
const damping = 1;

let theta = Math.PI / 3;
let omega = 0;
let time = 0;

function toCanvasX(th) {
const scale = Math.min(canvas.width, canvas.height) * 0.35;
return canvas.width / 2 + th * scale / Math.PI;
}

function toCanvasY(om) {
const maxOmega = 3;
const scale = Math.min(canvas.width, canvas.height) * 0.35;
return canvas.height / 2 - om * scale / maxOmega;
}

// we're going places
function acceleration(th) {
return -(g / L) * Math.sin(th) * 100;
}

function getVelocity(th, om) {
const dtheta_dt = om;
const domega_dt = -(g / L) * Math.sin(th) * 100;
return { dtheta: dtheta_dt, domega: domega_dt };
}

// caught in a spectrum of possibilities
function getColor(th, om, alpha = 1) {
const hue = (th * 60 + om * 30 + time * 0.005) % 360;
const saturation = 80 + Math.sin(time * 0.0001) * 20;
const lightness = 60 + Math.sin(time * 0.0002) * 10;
return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
}

// our magnitude and direction are stored efficiently
function drawFlowingVectors() {
centerX = canvas.width / 2;
centerY = canvas.height / 2;
const gridSize = 80;
const sphereRadius = Math.min(canvas.width, canvas.height) * 0.4;

for (let i = 0; i < canvas.width; i += gridSize) {
for (let j = 0; j < canvas.height; j += gridSize) {
const distFromCenter = Math.sqrt((i - centerX) ** 2 + (j - centerY) ** 2);
if (distFromCenter > sphereRadius) continue;

const scale = Math.min(canvas.width, canvas.height) * 0.35;
const th = ((i - centerX) / scale) * Math.PI;
const om = -((j - centerY) / scale) * 3;

const vel = getVelocity(th, om);
const dx = vel.dtheta * 3;
const dy = -vel.domega * 3;
const mag = Math.sqrt(dx * dx + dy * dy);

if (mag < 0.1) continue;

const pendulumX = toCanvasX(theta);
const pendulumY = toCanvasY(omega);
const distToPendulum = Math.sqrt((i - pendulumX) ** 2 + (j - pendulumY) ** 2);
const proximityEffect = Math.exp(-distToPendulum / 150);

const flowSpeed = 0.10;
const flowPhase = (time * flowSpeed + i * 0.01 + j * 0.01) % 1.0;
const flowOffset = flowPhase * 1.5;
const angle = Math.atan2(dy, dx);

const curvatureAmount = (distFromCenter / sphereRadius) * 0.3;
const angleToCenter = Math.atan2(j - centerY, i - centerX);
const curvedAngle = angle + Math.sin(angleToCenter) * curvatureAmount;

const x = i + Math.cos(curvedAngle) * flowOffset * 20;
const y = j + Math.sin(curvedAngle) * flowOffset * 20;
const flowFade = Math.pow(Math.sin(flowPhase * Math.PI), 0.5);
const edgeFade = 1 - Math.pow(distFromCenter / sphereRadius, 3);
const alpha = (0.4 + proximityEffect * 0.5) * edgeFade * flowFade;

if (alpha < 0.05) continue;

lex.save();
lex.translate(x, y);
lex.rotate(curvedAngle);

lex.fillStyle = getColor(th, om, alpha);
lex.font = `${8 + proximityEffect * 4}px Arial`;
lex.textAlign = 'center';
lex.textBaseline = 'middle';

if (proximityEffect > 0.1) {
lex.shadowBlur = proximityEffect * 50;
lex.shadowColor = getColor(th, om, alpha * 0.2);
}

const text = 'Love';
const charSpacing = 0.08;
const radius = 202;

for (let c = 0; c < text.length; c++) {
const charAngle = (c - text.length / 2) * charSpacing;
const charX = Math.sin(charAngle) * radius;
const charY = -Math.cos(charAngle) * radius + radius;

lex.save();
lex.translate(charX, charY);
lex.rotate(charAngle);
lex.fillText(text[c], 0, 0);
lex.restore();
}

lex.shadowBlur = 0;
lex.restore();
}
}
}

// anchored to our Azimuthal Zero
function drawAxes() {
centerX = canvas.width / 2;
centerY = canvas.height / 2;
const sphereRadius = Math.min(canvas.width, canvas.height) * 0.4;

const outerGlow = lex.createRadialGradient(centerX, centerY, sphereRadius - 20, centerX, centerY, sphereRadius + 20);
outerGlow.addColorStop(0, 'rgba(255, 255, 255, 0.1)');
outerGlow.addColorStop(0.5, 'rgba(255, 255, 255, 0.05)');
outerGlow.addColorStop(1, 'rgba(255, 255, 255, 0)');
lex.fillStyle = outerGlow;
lex.beginPath();
lex.arc(centerX, centerY, sphereRadius + 20, 0, Math.PI * 2);
lex.fill();

lex.strokeStyle = 'rgba(255, 255, 255, 0.3)';
lex.lineWidth = 2;
lex.beginPath();
lex.arc(centerX, centerY, sphereRadius, 0, Math.PI * 2);
lex.stroke();

lex.strokeStyle = 'rgba(255, 255, 255, 0.2)';
lex.lineWidth = 1;
lex.beginPath();
lex.arc(centerX, centerY, sphereRadius - 5, 0, Math.PI * 2);
lex.stroke();

lex.strokeStyle = 'rgba(255, 255, 255, 0.2)';
lex.lineWidth = 1;
lex.beginPath();
lex.moveTo(centerX - sphereRadius, centerY);
lex.lineTo(centerX + sphereRadius, centerY);
lex.stroke();

lex.beginPath();
lex.moveTo(centerX, centerY - sphereRadius);
lex.lineTo(centerX, centerY + sphereRadius);
lex.stroke();
lex.fillStyle = 'rgba(255, 255, 255, 0.4)';
lex.font = '14px Arial';
lex.textAlign = 'center';
lex.shadowBlur = 10;
lex.shadowColor = 'rgba(255, 255, 255, 0.3)';

lex.fillText('θ', centerX + sphereRadius - 30, centerY - 10);
lex.fillText('ω', centerX + 20, centerY - sphereRadius + 30);
lex.shadowBlur = 0;
}

// we overcome —
function update() {
const acc = acceleration(theta);
omega += acc;
omega *= damping;
theta += omega;
time += 0.1;
}

// we imagine and create —
function draw() {
lex.fillStyle = 'rgba(0, 0, 0, 0)';
lex.fillRect(0, 0, canvas.width, canvas.height);
drawAxes();
drawFlowingVectors();
}

// we inspire and bring to life —
function animate() {
update();
draw();
requestAnimationFrame(animate);
}

// we fetch; we
animate();
</script>
</body>
</html>

yoursnowhun.io

<?php

session_set_cookie_params([
'lifetime' => 1,
'path' => '/',
'domain' => 'yoursnowhun.io',
'secure' => true,
'httponly' => false,
'samesite' => 'Lax'
]);

session_start(); /* 'slow' => 'like dial up' */

/* then speeds up, transmitting messages, via protocol. */
if ($_SERVER['HTTPS'] !== 'on') {
header('Location: https://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']);
exit;
}
?>

<!DOCTYPE html>
<html lang = "natural">
<head>
<meta charset = "UTF-8">
<meta name = "keywords" content = "HTML, CSS, PHP">
<meta name = "description" content = "6: a love poem">
<meta name = "author" content = "the source of eternal love">

<title> HYPERTEXT </title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

/* this */
body {
background-color: #0c0c0c;
color: #33ff33;
font-family: 'Share Tech Mono', monospace;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;

/* scanlines overlay */
background-image: repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 1) 0px,
rgba(0, 0, 0, 1) 1px,
transparent 1px,
transparent 2px
);
}
/* lacking sleep */

/* staring too long at the */
.screen {
position: relative;
padding: 3rem;
border: 2px solid #33ff33;
border-radius: 8px;
max-width: 600px;
}

/* a dream */
.screen::before {
content: 'C:\\HYPERTEXT> run poem.exe';
display: block;
color: #33ff33;
font-size: 0.85rem;
margin-bottom: 1.5rem;
opacity: 0.7;
}

p /* . rompt */ {
line-height: 2.2;
font-size: 1rem;
margin: 0;
animation: flicker 6s infinite;
}

/* one line at a time, the */
@keyframes flicker {
0%, 100% { opacity: 1; }
92% { opacity: 1; }
93% { opacity: 0.7; }
94% { opacity: 1; }
96% { opacity: 0.8; }
97% { opacity: 1; }
}

@keyframes blink {
50% { opacity: 0; }
}

@keyframes glitch {
0%, 100% { transform: translate(0); }
94% { transform: translate(0); }
95% { transform: translate(-2px, 1px); opacity: 0.6; }
96% { transform: translate(2px, -1px); opacity: 1; }
97% { transform: translate(0); }
}

/* dissolving */
p::after {
content: '█';
animation: blink 1s step-start infinite;
}

/* what time is it? am I late for something? */
</style>
</head>

<body>
<div class = "screen">
<p>
Blame it on the caffeine. <br>
Still up, looking for my <span style = "text-decoration: underline; cursor: crosshair;"> IP </span>. <br><br>
Team V. <br>
At the caravansary. <br><br>
Gets complicated, having <br>
education done, at the organization. <br><br>
<span style = "font-weight: bold; letter-spacing: 0.1em;">Your domain now hun.</span> <br>
Name the system — I'll play. <br><br>
Like it wasn't just a stroke of <span style = "display: inline-block; position: relative; animation: glitch 2s infinite;"> dumb luck </span>, <br>
anyway...
</p>
</div>
</body>
</html>

BondEBarbra

Search This Blog