<style>
#death-text {
position: center;
font-size: 25pt;
left: 50%;
top: 50%;
color: red;
}
</style>
<span id="death-text">WOW! YOU ESCAPED! However, The utopian European Heaven, the Elsewhere, does not exist. The Subject becomes a living dead even in Europe.
[[The escape is futile|First]]</span>
<style>
#gross-text {
position: fixed;
top: 10%;
left: 45%;
transform: translateX(-50%);
font-size: 30pt;
font-weight: bold;
color: #d80000;
}
#moving-text {
position: absolute;
font-size: 15pt;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: all 0.3s ease;
cursor: pointer;
color: #fff2cc;
font-weight: bold;
}
#passage-text {
position: fixed;
bottom: 10%;
right: 10%;
font-size: 20pt;
color: #990000;
font-weight: bold;
}
</style>
<span id="gross-text">Morocco, the Death-World, necessitates, if you can,</span>
<span id="passage-text" style="display: none;">[[After waiting your entire life, the boat arrives|Passage 1]]</span>
<span id="moving-text" onmouseover="moveText()">[[Escape!]]</span>
<script>
function moveText() {
var text = document.getElementById("moving-text");
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;
var left = Math.random() * screenWidth;
var top = Math.random() * screenHeight;
text.style.left = left + "px";
text.style.top = top + "px";
}
setTimeout(function() {
var wordContainer = document.getElementById("word-container");
if (wordContainer) {
wordContainer.appendChild(text);
}
var passageText = document.getElementById("passage-text");
if (passageText) {
passageText.style.display = "inline";
}
}, 15000);
</script>
<style>
body {
background-image: url('https://i.ibb.co/VJQfX1N/Light.png');
background-size: cover;
background-z-index: 998;
}
</style>
<audio id="audio-player" src="https://dl.sndup.net/zzfy/Audio.wav" autoplay loop></audio>
<<script>>
// Define global variable
window.spawnInterval;
// Function to spawn "Hraga" at random positions on the left side
function spawnHraga() {
var hraga = $('<span>').text('Hraga').css({
'position': 'fixed',
'left': '0',
'top': Math.random() * $(window).height(),
'font-weight': 'bold',
'color': 'white',
'font-size': '25pt'
});
$('body').append(hraga);
// Move Hraga to the middle of the screen and vanish
hraga.animate({
'left': $(window).width() / 2,
'opacity': '0'
}, 3000, function() {
$(this).remove();
});
}
// Function to continuously spawn Hraga
function continuousSpawn() {
window.spawnInterval = setInterval(spawnHraga, 2000); // milliseconds
}
// Start continuous spawning
continuousSpawn();
<</script>>
<span style= "color: white; font-size: 28pt; right: 10%; top: 10%;">Hraga: a noun, an adjective, and an adverb. it modifies everything, even death. Those who burn themselves to be persons. They are Irregular migrants from the Global South, the ex-colonies, the prison nation-states, the spatial alienation, death in life, living in death, living dead, living things, necropolitical existence, but they cannot leave, they cannot burn. Their identity is already burned. They are bound to never reach the Elsewhere, heaven, utopia, Europe. The boat capsizes, yet they swim against the tide. [[Life is near.|Passage 2]]</span>
<span style="position: fixed; right: 0; top: 50%; transform: translate(0, -50%); font-weight: bold; color: #000e04; font-size: 50pt;">The Elsewhere</span>
<style>
body {
background-image: url('https://i.ibb.co/DMyj5jY/Perilous.png');
background-size: cover;
}
</style>
<audio id="audio-player" src="https://dl.sndup.net/jd24/mixkit-motorboat-on-the-sea-1183.wav" autoplay loop></audio><<script>>
// Stop continuous spawning of Hraga
clearInterval(window.spawnInterval);
// Function to generate random number within a range
function getRandomNumber(min, max) {
return Math.random() * (max - min) + min;
}
// Function to spawn words at the bottom and animate them upwards
function spawnWords() {
var wordList = ["life", "passion", "dreams", "personhood", "breath", "boat", "family", "home", "sorry"]; // Add more words as desired
var screenWidth = $(window).width();
var screenHeight = $(window).height();
var word = $('<span>').text(wordList[Math.floor(Math.random() * wordList.length)]).css({
'position': 'fixed',
'left': getRandomNumber(0, screenWidth),
'bottom': '0',
'font-weight': 'bold',
'color': 'white',
'font-size': '20pt'
});
$('body').append(word);
word.animate({
'left': getRandomNumber(0, screenWidth),
'top': '-50',
'font-size': getRandomNumber(10, 30) + 'pt',
'opacity': '0'
}, {
duration: getRandomNumber(2000, 5000),
easing: 'linear',
complete: function() {
$(this).remove();
}
});
}
// Start spawning words
if (State.variables.intervalID === undefined) {
State.variables.intervalID = setInterval(spawnWords, 500);
}
<</script>>
<span style= "color: white; font-size: 30pt; right: 50%; top: 50%;">My breath escapes, my life escapes, my dream escapes, my passion escapes. Give me your hand reader, help me escape! Alas, my consciousness escapes me! As my breath emerges towards the surface, I feel life burries itself in the sea. Deliverance from life to death [[for I know not how to swim!|Passage 3]]</span>
<style>
body {
background-image: url('https://i.ibb.co/3CY28HN/underwater.png');
background-size: cover;
}
</style>
<audio id="audio-player" src="https://dl.sndup.net/cd6n/Sinking.wav" autoplay loop></audio><<script>>
// Clear the interval to stop spawning words
if (State.variables.intervalID !== undefined) {
clearInterval(State.variables.intervalID);
State.variables.intervalID = undefined;
}
<</script>>
<<script>>
// Function to generate random number within a range
function getRandomNumber(min, max) {
return Math.random() * (max - min) + min;
}
// Function to spawn "drowning" at random positions on the top and animate downwards
function spawnDrowning() {
var screenWidth = $(window).width();
var drowning = $('<span>').text('drowning').css({
'position': 'fixed',
'left': getRandomNumber(0, screenWidth),
'top': '0',
'font-weight': 'bold',
'color': 'white',
'font-size': '20pt'
});
$('body').append(drowning);
drowning.animate({
'left': getRandomNumber(0, screenWidth),
'top': $(window).height(),
'font-size': '90pt',
'opacity': '0'
}, {
duration: 5000,
easing: 'linear',
complete: function() {
$(this).remove();
}
});
}
// Start spawning "drowning" words continuously
if (State.variables.drowningInterval === undefined) {
State.variables.drowningInterval = setInterval(spawnDrowning, 2000);
}
<</script>>
<span style= "color: white; font-size: 30pt; right: 50%; top: 50%;">Your life extinguished, dreams now fade, in the embrace of the ocean. The weight of living thing-ness seeks personhood. As Europe's shores seem far in your eyes. To see beyond borders, skin, and race, and embrace those seeking being individuals. [[The metaphysical appears|Passage 4]].</span>
<style>
body {
background-image: url('https://i.ibb.co/GsSDzxz/Cracked.png');
background-size: cover;
}
</style>
<audio id="audio-player" src="https://dl.sndup.net/cd6n/Sinking.wav" autoplay loop></audio><<script>>
// Clear the interval to stop spawning "drowning" words
if (State.variables.drowningInterval !== undefined) {
clearInterval(State.variables.drowningInterval);
State.variables.drowningInterval = undefined;
}
<</script>>
<style>
#death-word {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #d80000;
font-weight: bold;
font-size: 50pt;
z-index: 1;
}
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
z-index: 0;
}
#text-overlay {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: bold;
font-size: 30pt;
z-index: 1;
}
</style>
<<audio 'https://dl.sndup.net/tgqx/Forgotten.mp3'>> // Updated audio file URL
<div id="death-word">Death</div>
<div id="background"></div>
<<script>>
var audio = new Audio('https://dl.sndup.net/tgqx/Forgotten.mp3'); // Updated audio file URL
$(document).on('click', '#death-word', function() {
audio.play();
$('#death-word').animate({
'top': '10%',
'opacity': '0'
}, {
duration: 2000,
easing: 'linear',
complete: function() {
$('#text-overlay').show();
$('#background').css('background-color', 'black');
}
});
});
$(document).one(':passageinit', function () {
audio.pause();
});
<</script>>
<div id="text-overlay" style="display: none; color: red;">The legends in the neighbourhood would not speak of you, drowned ones. They would not speak of death, for they are living dead. They would speak about the only person who crossed successfully and efface the rest. That legend would birth other irregular immigrants, only to drown themselves. Then, they are forgotten while others aspire to become [[legends|Passage 5]] in their neighbourhoods.</div>
<audio id="audio-player" src="https://dl.sndup.net/cd6n/Sinking.wav" autoplay></audio><style>
body {
background-image: url('https://i.ibb.co/N9BcMyc/cafe.png');
background-size: cover;
}
</style>
<span style= "color: white; font-size: 20pt; left: 50%; top: 50%;">"... We are leaving in a few minutes. You will leave this miserable world behind and go to Heaven. Europe, my son, Europe. Where people have rights and get money. You will go at night because you will be reborn as a person. We are not persons here; we are just things living in death. But, your family, your friends, and you, yourself, will consider yourself superior if you are in the elsewhere. Do not worry about all the deaths in the sea, just ask your mom for blessings. We are nothing without their blessings. People here will give you value once you set foot there; they might even refer to you as a legend. As the person who made it. You will become extremely wealthy there because the West is filled with money. The money you paid, the 10,000 Euros, pfff. You will get it in two months there. So, escape my son and exit this prison tonight. [[Let's go|Passage 6]]"</span>
<audio id="audio-player" src="https://dl.sndup.net/ddwd/FF.flac" autoplay></audio>
<<script>>
$(document).one(':passageenter', function () {
// Select the container element for the images
var container = document.getElementById('image-container');
// Remove all child elements (images) from the container
while (container.firstChild) {
container.firstChild.remove();
}
});
<</script>>
<<script>>
$(document).one(':passageleave', function () {
document.getElementById('audio-player').pause();
});
setTimeout(function () {
$('#delayed-text').show();
}, 12000); // Delayed text appears after 1 minute (60000 milliseconds)
<</script>>
<div id="delayed-text" style="display: none; left: 50%; top: 50%; color: white; font-size: 30pt;">Regardless of education, class, or region, you, Moroccans, are living-things, not persons, sitting in front of the beach floating between dreams and reality, between being and becoming, between significance and insignificance, between seeking personhood and being considered living-things. You hear of deaths, but you want to try your luck too. Tonight, you shall join the others, but you are contemplating. While others speak of heaven on the other side, [[you close yours eyes|Passage 7]].
</div>
<style>
body {
background-image: url('https://i.ibb.co/gP5ShmQ/Seas.png');
background-size: cover;
}
</style>
<audio id="audio-player" src="https://dl.sndup.net/g3kx/Nous%20les%20%C3%A9l%C3%A8ves%20on%20est%20dans%20un%20bateau%20perdu.mp3" autoplay loop></audio>
<<script>>
// Clear intervals
clearInterval(State.variables.spawnInterval);
clearInterval(State.variables.timerInterval);
// Remove word elements
var wordElements = document.querySelectorAll('.word');
for (var i = 0; i < wordElements.length; i++) {
var wordElement = wordElements[i];
wordElement.parentNode.removeChild(wordElement);
}
// Remove "Closing eyes!" text
var closingEyesText = document.querySelector('.closing-eyes-text');
if (closingEyesText) {
closingEyesText.parentNode.removeChild(closingEyesText);
}
<</script>>
<<script>>
var imageUrls = [
'https://i.ibb.co/RTTv5Nv/1.png',
'https://i.ibb.co/cYxM4S4/2.jpg',
'https://i.ibb.co/YhZJY3T/3.jpg',
'https://i.ibb.co/HDgXGdL/4.jpg',
'https://i.ibb.co/hmwVF7C/5.jpg',
'https://i.ibb.co/zNNC6Sh/6.jpg',
'https://i.ibb.co/qJmgVxS/7.png',
'https://i.ibb.co/nqpmZLP/8.png',
'https://i.ibb.co/Lz6dgGV/9.jpg',
'https://i.ibb.co/PTLFmg7/10.jpg',
'https://i.ibb.co/QkjRhq8/11.jpg',
'https://i.ibb.co/71mdszQ/12.jpg',
'https://i.ibb.co/rGFgrCB/13.jpg',
'https://i.ibb.co/df780Kh/14.webp',
'https://i.ibb.co/jJ4rDfS/15.jpg',
'https://i.ibb.co/SK3QVc4/16.jpg',
'https://i.ibb.co/TMZrdrQ/17.jpg',
'https://i.ibb.co/McM16wq/18.jpg',
'https://i.ibb.co/94XDXzj/19.jpg',
'https://i.ibb.co/wy5rtrj/20.jpg',
'https://i.ibb.co/Vv04zH2/Woman.png'
];
function spawnImage() {
var image = document.createElement('img');
var imageUrl = imageUrls[Math.floor(Math.random() * imageUrls.length)];
var x = Math.floor(Math.random() * (window.innerWidth - 200)); // Random X position within the window width
var y = Math.floor(Math.random() * (window.innerHeight - 200)); // Random Y position within the window height
image.src = imageUrl;
image.style.position = 'fixed';
image.style.left = x + 'px';
image.style.top = y + 'px';
image.style.width = '400px'; // Fixed width
image.style.height = '400px'; // Fixed height
image.style.zIndex = '0'; // Adjust the z-index as needed
document.body.appendChild(image);
// Add a disappearing effect after a certain duration
setTimeout(function() {
image.style.opacity = '0';
setTimeout(function() {
image.parentNode.removeChild(image);
}, 5000); // Adjust the fade-out duration as desired
}, 10000); // Adjust the image display duration as desired
}
var spawnInterval = setInterval(spawnImage, 1000); // Adjust the interval duration (in milliseconds) as desired
$(document).one(':passageinit', function () {
clearInterval(spawnInterval); // Stop spawning images when leaving Passage 6
});
<</script>>
<div id="text-overlay" style="position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); color: black; font-weight: bold; font-size: 50pt; z-index: 1; display: inline-block; padding: 10px; box-shadow: 0 0 10px black;">[[YOU CANNOT NOT SEE|First]].
</div>
<audio id="audio-player" src="https://dl.sndup.net/rsjb/Death%20in%20Mediterranean.wav" autoplay></audio>:: Start Fresh
<<script>>
var words = ["ⵡⴰⵢⵢⴰⴹ", "Autre", "الاخر", "Other"];
var wordIndex = 0;
var intervalId;
function changeWord() {
var otheringElement = document.getElementById("othering");
if (otheringElement) {
otheringElement.innerText = words[wordIndex];
wordIndex++;
if (wordIndex >= words.length) {
wordIndex = 0;
}
}
}
intervalId = setInterval(changeWord, 1000); // Change word every 2 seconds
window.addEventListener('unload', function () {
clearInterval(intervalId);
});
<</script>>
<div style="position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: #111;">
<div id="othering" style="position: absolute; left: 0; right: 0; top: 40%; transform: translateY(-50%); text-align: center; font-size: 75pt; color: white;">Othering</div>
<div style="position: absolute; left: 0; right: 0; top: 50%; text-align: center; font-size: 25pt; color: white;">Rachid Benharrousse</div>
<div style="position: absolute; left: 0; right: 0; top: 60%; text-align: center; font-size: 15pt; color: white;">[[The story does not reset but continues, similar to life, and to death.|First]]</div>
</div>
<<script>>
// Word Popping Effect
var words = [
{ original: 'Home', alternate: 'I feel homeless in my own country' },
{ original: 'Life', alternate: 'We are beasts of burden, dying for pocket change' },
{ original: 'Death', alternate: 'Mercy and ... better than this life' },
{ original: 'Hope', alternate: 'A flickering flame extinguished by despair' },
{ original: 'Belonging', alternate: 'Lost in a sea of isolation and indifference' },
{ original: 'Dreams', alternate: 'Shattered fragments of what could have been' },
{ original: 'Sunshine', alternate: 'A distant memory swallowed by perpetual grayness' },
{ original: 'Happiness', alternate: 'A mirage that fades as quickly as it appears' },
{ original: 'Future', alternate: 'A desolate path leading to nowhere but disappointment' },
{ original: 'Belief', alternate: 'Faith eroded by the harsh winds of reality' },
{ original: 'Love', alternate: 'A fragile illusion shattered by heartache' },
{ original: 'Identity', alternate: 'Fading echoes of a forgotten heritage' },
{ original: 'Laughter', alternate: 'Echoes silenced in the depths of sorrow' },
{ original: 'Friendship', alternate: 'Fractured bonds crumbling under the weight of betrayal' },
{ original: 'Culture', alternate: 'Fading colors of a once vibrant tapestry' },
{ original: 'Sunset', alternate: 'A somber palette painting the skies' },
{ original: 'Solitude', alternate: 'A solitary figure lost in a crowd of indifference' },
{ original: 'Heritage', alternate: 'Whispers of forgotten tales carried away by the wind' },
{ original: 'Desire', alternate: 'Embers of longing smoldering in a barren wasteland' },
{ original: 'Longing', alternate: 'A hunger that can never be satisfied' },
{ original: 'Memories', alternate: 'Fading snapshots of a melancholic past' },
{ original: 'Tears', alternate: 'Rivers of sorrow carving paths down weary cheeks' },
{ original: 'Melancholy', alternate: 'A heavy fog enveloping the spirit' },
{ original: 'Struggle', alternate: 'A constant uphill battle with no respite' },
{ original: 'Wanderlust', alternate: 'Roots torn asunder, longing for distant lands' },
{ original: 'Desolation', alternate: 'A barren landscape devoid of hope' },
{ original: 'Fate', alternate: 'Threads of destiny woven with sorrow' },
{ original: 'Regret', alternate: 'Haunted by the ghosts of choices not taken' },
{ original: 'Isolation', alternate: 'An empty void echoing with silence' },
{ original: 'Darkness', alternate: 'Enveloping shadows that suffocate the soul' },
{ original: 'Silence', alternate: 'A deafening absence of voices and echoes' },
{ original: 'Despair', alternate: 'A heavy weight pressing down on weary shoulders' },
{ original: 'Broken', alternate: 'Shattered fragments of a fractured reality' }
];
// Rest of your code goes here...
var timerElement = document.createElement('div');
timerElement.style.position = 'fixed';
timerElement.style.top = '20%';
timerElement.style.left = '38%';
timerElement.style.fontSize = '500px';
timerElement.style.color = '#d80000';
timerElement.style.zIndex = '-900';
var timerSeconds = 30;
var timerInterval;
var spawningEnabled = true; // Flag to control word spawning
function updateTimer() {
timerElement.innerText = timerSeconds;
if (timerSeconds <= 0) {
clearInterval(timerInterval);
timerElement.innerText = '';
removeAllWords();
var backgroundImage = document.createElement('div');
backgroundImage.style.position = 'fixed';
backgroundImage.style.left = '0';
backgroundImage.style.top = '0';
backgroundImage.style.width = '100%';
backgroundImage.style.height = '100%';
backgroundImage.style.opacity = '0';
backgroundImage.style.backgroundImage = 'url("https://i.ibb.co/tcXjJC2/Boat.png")'; // Replace "YOUR_IMAGE_URL" with your desired image URL
backgroundImage.style.backgroundSize = 'cover';
backgroundImage.style.backgroundPosition = 'center';
backgroundImage.style.transition = 'opacity 3s';
backgroundImage.style.zIndex = '-1';
document.body.appendChild(backgroundImage);
// Delay setting opacity to 1 to allow the image to load
setTimeout(function() {
backgroundImage.style.opacity = '1';
}, 100);
spawningEnabled = false; // Disable word spawning
}
timerSeconds--;
}
function startTimer() {
timerInterval = setInterval(updateTimer, 1000);
}
function removeAllWords() {
var wordElements = document.querySelectorAll('.word');
for (var i = 0; i < wordElements.length; i++) {
var wordElement = wordElements[i];
wordElement.parentNode.removeChild(wordElement);
}
}
startTimer();
document.body.appendChild(timerElement);
function spawnWord() {
if (!spawningEnabled) return; // Exit if word spawning is disabled
var wordIndex = Math.floor(Math.random() * words.length);
var wordObj = words[wordIndex];
var wordElement = document.createElement('div');
wordElement.innerText = wordObj.original;
wordElement.style.position = 'fixed';
wordElement.style.left = Math.random() * (window.innerWidth - 100) + 'px';
wordElement.style.top = Math.random() * (window.innerHeight - 100) + 'px';
wordElement.style.fontSize = '20pt';
wordElement.style.color = 'white';
wordElement.style.cursor = 'pointer';
wordElement.classList.add('word');
wordElement.addEventListener('click', function() {
this.innerText = wordObj.alternate;
setTimeout(function() {
wordElement.style.display = 'none';
}, 2000);
});
document.body.appendChild(wordElement);
}
var spawnInterval = setInterval(spawnWord, 800);
<</script>>
<style>
#passage-text {
position: fixed;
top: 50%;
left: 40%;
font-size: 30pt;
color: #990000;
zindex: 9999;
}
</style>
<span id="passage-text" style="display: none;">[[You run towards the boat.|Passage 8]]</span>
<<script>>
setTimeout(function() {
var wordContainer = document.getElementById("word-container");
if (wordContainer) {
wordContainer.appendChild(text);
}
var passageText = document.getElementById("passage-text");
if (passageText) {
passageText.style.display = "inline";
}
}, 32000);
<</script>>
<audio id="audio-player" src="https://dl.sndup.net/hs7c/Heart.mp3" autoplay loop></audio>