<div class="v-center">
Child of the world, look up at the sky,
And see the wings of the celestial one embrace the world.
Watch as their feathers become stars,
Guiding travellers back home.
(if: not $gotAether)[
(set: $value to $value + 1)
(set: $gotAether to true)
[[Return -> Clock]]
](else:)[[[Return -> Clock]]]<div class="v-center">
Let not the world restrict your power,
Or confine your potential.
Embrace the storm that uproots a city,
And use it to become more then you were.
(if: not $gotChaos)[
(set: $value to $value + 1)
(set: $gotChaos to true)
[[Return -> Clock]]
](else:)[[[Return -> Clock]]]<div class="clock-face">
<div class="clock-number num-12">[[Genisis -> Genisis]]</div>
<div class="clock-number num-1">[[Order -> Order]]</div>
<div class="clock-number num-2">[[World-> World]]</div>
<div class="clock-number num-3">[[Emotion -> Emotion]]</div>
<div class="clock-number num-4">[[Trickery -> Trickery]]</div>
<div class="clock-number num-5">[[Silence -> Silence]]</div>
<div class="clock-number num-6">[[Finality -> Finality]]</div>
<div class="clock-number num-7">[[Chaos -> Chaos]]</div>
<div class="clock-number num-8">[[Aether-> Aether]]</div>
<div class="clock-number num-9">[[Nescience -> Nescience]]</div>
<div class="clock-number num-10">[[Law -> Law]]</div>
<div class="clock-number num-11">[[Time -> Time]]</div>
<div class="clock-centre">(if: $value >= 12)[[Next -> End]]</div>
</div><div class="v-center">
Calamity arose with her first smile,
People filled with greed and envy and hate,
But her smile also brought love and hope to the people,
And the courage to protect what is important to them.
(if: not $gotEmotion)[
(set: $value to $value + 1)
(set: $gotEmotion to true)
[[Return -> Clock]]
](else:)[[[Return -> Clock]]]<div class="v-center">
You who have learned of their existence,
I hope you learned something new.
These twelve titans shape the world and the people in it,
And shall continue to do so for eons to come.
Perhaps they shall all be taken by Finality, perhaps they will all be chronicled by Time,
All we know is that whatever happens, their stories will be shrouded by Silence.
[[Return to the beginning]]<div class="v-center">
Fear not the end, they said,
For all things must come to their embrace.
Take your time and experience all that life has to offer,
For they will be enraptured by all the stories that you have to tell.
(if: not $gotFinality)[
(set: $value to $value + 1)
(set: $gotFinality to true)
[[Return -> Clock]]
](else:)[[[Return -> Clock]]]<div class="v-center">
Oh mother of all things, alone in the void,
A single mote of light enveloped by the gloom.
But fear not, for all you need to do is reach into the darkness,
And replace the shadows with life.
(if: not $gotGenisis)[
(set: $value to $value + 1)
(set: $gotGenisis to true)
[[Return -> Clock]]
](else:)[
[[Return -> Clock]]
]<div class="v-center">
When towers crumble and strife appear,
All must follow the rules set by the land.
For if those rules are broken,
Judgement is sure to follow.
(if: not $gotLaw)[
(set: $value to $value + 1)
(set: $gotLaw to true)
[[Return -> Clock]]
](else:)[[[Return -> Clock]]]<div class="v-center">
“Do not be content with what you have” they said,
“Learn what you can, and then acquire even more knowledge,”
“Build me a tower, and put all that you have learned inside,”
“For I shall always be learning.”
(if: not $gotNescience)[
(set: $value to $value + 1)
(set: $gotNescience to true)
[[Return -> Clock]]
](else:)[[[Return -> Clock]]]<div class="v-center">
All things have a place in existence, they say,
Fitting together like a tapestry of clockwork.
But remember to preserve those cogs,
For existence has a habit of wearing them down.
(if: not $gotOrder)[
(set: $value to $value + 1)
(set: $gotOrder to true)
[[Return -> Clock]]
](else:)[[[Return -> Clock]]]<div class="v-center">
Forget not the paths not taken,
For they are just as important as the ones you did.
Do and experience all that you can in life,
And that which you cannot will be remembered by the void.
(if: not $gotSilence)[
(set: $value to $value + 1)
(set: $gotSilence to true)
[[Return -> Clock]]
](else:)[[[Return -> Clock]]]<div class="v-center">
Remember to chronicle the past and what it teaches,
Observe that which exists in the here and now,
And do not fail to stride towards the future,
For all things must yield to history, exist in the now, and make room for what follows.
(if: not $gotTime)[
(set: $value to $value + 1)
(set: $gotTime to true)
[[Return -> Clock]]
](else:)[[[Return -> Clock]]]<div class="v-center">
The world can be unfair, but do not let it condemn you,
See the injustice, and do not let it go.
Take their tricks and cut at those who are unjust,
And let your deception pave the path for a brighter tomorrow.
(if: not $gotTrickery)[
(set: $value to $value + 1)
(set: $gotTrickery to true)
[[Return -> Clock]]
](else:)[[[Return -> Clock]]]<div class="v-center">
Oh, you who walks across the land, remember to thank The World,
Each step they take raising mountains,
Each tear they cast creating seas,
And new life springing from their back.
(if: not $gotWorld)[
(set: $value to $value + 1)
(set: $gotWorld to true)
[[Return -> Clock]]
](else:)[[[Return -> Clock]]](restart:).v-center{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 80vh; /* Adjust height percentage as needed */
text-align: center;
}
/* Base container */
#clock-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* Centers the origin point */
width: 0;
height: 0;
pointer-events: none;
}
.clock-centre {
position: fixed; /* Fixed to the viewport, ignoring parent constraints */
top: 50%;
left: 50%;
transform: translate(-50%, -50%) !important;
width: 140px;
height: 30px;
line-height: 30px;
text-align: center;
white-space: nowrap;
pointer-events: auto;
z-index: 10;
}
/* Individual options centered at the parent origin */
.clock-number {
position: absolute;
top: 37%;
left: 50%;
width: 140px;
height: 30px;
margin-left: -70px;
margin-top: 175px;
text-align: center;
line-height: 30px;
white-space: nowrap;
pointer-events: auto;
/* Applies the rotation angle and pushes outward radially using --arm-length */
transform: rotate(var(--angle)) translateY(calc(var(--arm-length) * -1)) rotate(calc(var(--angle) * -1));
}
/* Single variable to adjust radius */
:root {
--arm-length: 420px;
}
/* Position angles */
.num-12 { --angle: 0deg; }
.num-1 { --angle: 30deg; }
.num-2 { --angle: 60deg; }
.num-3 { --angle: 90deg; }
.num-4 { --angle: 120deg; }
.num-5 { --angle: 150deg; }
.num-6 { --angle: 180deg; }
.num-7 { --angle: 210deg; }
.num-8 { --angle: 240deg; }
.num-9 { --angle: 270deg; }
.num-10 { --angle: 300deg; }
.num-11 { --angle: 330deg; }<div class="v-center">
(text-style:"bold")+(css: "font-size: 200%")[Ode To Titans]
[[Next -> Intro]]<div class="v-center">
Traveller from afar,
You who knows not of the Titans of this world,
Engage with the clock,
And learn of their existence.
[[Next -> Clock]]
(set: $gotGenisis to false)
(set: $gotOrder to false)
(set: $gotWorld to false)
(set: $gotEmotion to false)
(set: $gotTrickery to false)
(set: $gotSilence to false)
(set: $gotFinality to false)
(set: $gotChaos to false)
(set: $gotAether to false)
(set: $gotNescience to false)
(set: $gotLaw to false)
(set: $gotTime to false)
(set: $value to 0)