DOA-1

Browser lacks capabilities required to play.

Upgrade or switch to another browser.

Loading…

<div class="header"> <span class="title">AFTER DEATH, '2014' QUIRIDA</span> <hr class="separator"> </div> <div class="marquee-wrapper"> <div class="marquee-text">Feelings often seem as indifferent as the sun above, unmoved by our struggles. This world holds a loneliness so deep it’s visible in the slow movement of a clock's hands. People, worn down by love or its absence, bear marks that show their battles. Despite this, there’s a feeling that remains a guiding star—a gut punch, a nauseating pit in your stomach, clawing its way up your throat. It gnaws at its bars, desperate to escape, not by prayer—no, stray dogs don’t pray—but by raw, relentless hope.</div> </div> <div class="video-container"> <div class="box"> <iframe class="video" src="https://www.youtube.com/embed/UUEu2Zh9gAM?si=ioAxjoIB69qNBwm1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <div class="box__line box__line--top"></div> <div class="box__line box__line--right"></div> <div class="box__line box__line--bottom"></div> <div class="box__line box__line--left"></div> </div> </div> <div class="footer"> <a class="custom-button" href="javascript:void(0);" onclick="SugarCube.Engine.play('0.2')">Conclude</a> </div>  <span style="position: fixed; bottom: 10px; left: 10px; z-index: 1002;"> <<back "<span style='background-color: #FFDAB9; color: black; padding: 10px; border-radius: 5px; text-decoration: none; display: inline-block; width: 70px; height: 10px; text-align: center; line-height: 10px; font-size: 20px; font-family: \"Times New Roman\", serif;'>BACK</span>">> </span> <style> @import url('https://fonts.googleapis.com/css2?family=Times+New+Roman&display=swap'); body { background-image: url('https://enter-ciaxpoturi.neocities.org/DOA/IMG_20240821_191054.jpg'); background-repeat: repeat; background-color: black; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; font-family: 'Times New Roman', serif; color: white; position: relative; } .header { text-align: center; margin-top: 150px; /* Adds 90px space at the top */ margin-bottom: 60px; /* Adjusted to move down by 40px */ } .title { font-family: 'Times New Roman', serif; font-weight: bold; font-size: 2rem; color: lightgray; } .separator { border: 1px solid lightgray; width: 50%; margin: 10px auto; } /* Marquee Styles */ .marquee-wrapper { position: absolute; top: 55%; /* Adjust this to control the vertical position */ left: 0; width: 100%; overflow: hidden; background-color: lightgray; z-index: -1; /* Ensure it stays behind the video */ } .marquee-text { display: inline-block; white-space: nowrap; font-size: 1.5rem; color: black; animation: marquee 40s linear infinite; } @keyframes marquee { from { transform: translateX(50%); /* Starts halfway on the screen */ } to { transform: translateX(-100%); /* Moves completely out of view */ } } .video-container { position: relative; display: flex; justify-content: center; margin-bottom: 20px; } .box { position: relative; width: 568px; /* 560px + border width */ height: 323px; /* 315px + border height */ } .video { position: relative; top: -30px; /* Shift the video up by 30px */ width: 100%; height: 100%; border: none; } .box__line { position: absolute; background: lightgray; width: 100%; height: 8px; } .box__line--top { top: 0; left: 0; } .box__line--bottom { bottom: 0; left: 0; } .box__line--left { left: 0; top: 0; width: 8px; height: 100%; } .box__line--right { right: 0; top: 0; width: 8px; height: 100%; } .footer { text-align: center; } .custom-button { --b: 3px; --s: 12px; --c: #FFDAB9; padding: calc(.1em + var(--s)) calc(.6em + var(--s)); color: var(--c); --_p: var(--s); background: conic-gradient(from 90deg at var(--b) var(--b), #0000 90deg, var(--c) 0) var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p)); transition: .3s linear, color 0s, background-color 0s; outline: var(--b) solid #0000; outline-offset: .2em; font-family: 'Times New Roman', serif; font-weight: normal; font-size: 1.5rem; cursor: pointer; border: none; margin: .5em; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } .custom-button:hover, .custom-button:focus-visible { --_p: 0px; outline-color: var(--c); outline-offset: .05em; } .custom-button:active { background: var(--c); color: #fff; } </style>

<head> <style> body { background-image: url('https://enter-ciaxpoturi.neocities.org/DOA/IMG_20240821_191054.jpg'); background-repeat: repeat; background-color: black; color: lightgray; font-family: 'Times New Roman', serif; text-align: center; margin: 0; padding: 0; font-size: 30px; display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; overflow: hidden; } .container { background-color: #1a1a1a; padding: 60px; display: inline-block; left: 50%; border-radius: 8px; width: 600px; height: 220px; box-sizing: border-box; overflow: hidden; color: lightgray; text-align: center; position: relative; z-index: 1; margin-top: 100px; /* Move container up by 100px */ } .text { position: absolute; width: calc(100% - 120px); top: 15px; /* Adjust for new container position */ left: 50%; transform: translateX(-50%); margin: 0; padding: 0; line-height: 1.1; opacity: 0; transition: opacity 1s ease-in-out; } .text.visible { opacity: 1; } .link { color: #FFDAB9; font-size: 30px; text-decoration: none; cursor: pointer; } .link:hover { text-decoration: underline; } .hidden { display: none; } #find_me { color: #FFC04C; } #find_me:link, #find_me:visited, #find_me:hover, #find_me:active { color: #FFC04C; text-decoration: none; } #musicNote { position: fixed; top: 50px; left: 10px; font-size: 30px; /* Adjust size as needed */ color: lightgray; /* Adjust color as needed */ z-index: 1001; /* Ensure it appears above most elements */ cursor: default; /* Optional: change cursor to default arrow */ } #fullscreenImage { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://enter-ciaxpoturi.neocities.org/DOA/FINDME.png'); background-size: cover; background-position: center; z-index: 1000; display: none; } #text2, #text3, #text4 { top: 45px; /* Adjust for new container position */ } #text4 { top: 60px; /* Adjust for new container position */ } </style> </head> <body> <div class="container"> <p id="text1" class="text visible"> O Shepherd's dog, lead me to the narrow path where radiance shines through the smallest of <span id="openings" class="link">openings</span>. </p> <p id="text2" class="text hidden"> Seek me out, O Herder, even beyond the veil of <span id="death" class="link">death</span>. </p> <p id="text3" class="text hidden"> Take my hand, and in Your grace, I shall walk as Your <span id="savior" class="link">Savior</span>. </p> <p id="text4" class="text hidden"> <a id="find_me" href="javascript:void(0);" onclick="showImageAndProceed()">FIND ME</a> </p> </div> <span id="musicNote">♬</span> <span style="position: fixed; bottom: 10px; left: 10px;"> <<back "<span style='background-color: #FFDAB9; color: black; padding: 10px; border-radius: 5px; text-decoration: none; display: inline-block; width: 70px; height: 7px; text-align: center; line-height: 10px; font-size: 20px;'>BACK</span>">> </span> <div id="fullscreenImage"></div> <audio id="backgroundMusic" autoplay loop> <source src="https://www.dropbox.com/scl/fi/g6v6viy92qn5nppvjumgl/CONCLUDE-AUDIO.mp3?rlkey=3fj16ghsxszyt1qnwvcnjtg38&st=hu0mua5q&dl=1" type="audio/mpeg"> </audio> <script> // Preload images (function() { const images = [ 'https://enter-ciaxpoturi.neocities.org/DOA%20MEDIA/IMG_20240821_191054.jpg', 'https://enter-ciaxpoturi.neocities.org/DOA%20MEDIA/FINDME.png' ]; images.forEach(src => { const img = new Image(); img.src = src; }); })(); // Immediately invoked function to encapsulate the preload logic function showText(textId) { const currentText = document.querySelector('.text:not(.hidden)'); if (currentText) { currentText.classList.add('hidden'); currentText.classList.remove('visible'); } const nextText = document.getElementById(textId); if (nextText) { nextText.classList.remove('hidden'); nextText.classList.add('visible'); } } function showImageAndProceed() { const imageElement = document.getElementById('fullscreenImage'); imageElement.style.display = 'block'; setTimeout(function() { SugarCube.Engine.play('0.3'); }, 150); } document.getElementById('openings').addEventListener('click', function() { showText('text2'); }); document.getElementById('death').addEventListener('click', function() { showText('text3'); }); document.getElementById('savior').addEventListener('click', function() { showText('text4'); }); </script> </body>

<head> <link href="https://fonts.googleapis.com/css2?family=Jersey+10&display=swap" rel="stylesheet"> <style> body, html { height: 100%; margin: 0; display: flex; justify-content: center; align-items: center; position: relative; font-family: 'Times New Roman', sans-serif; } .container { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; position: relative; } .container img { width: 80vw; height: 80vh; object-fit: contain; transform: translateX(22%); /* Moves the image 10% to the right */ } .colored-container { position: absolute; padding: 20px; top: 55%; left: 72%; transform: translate(-50%, -50%); width: 27%; height: auto; color: white; border-radius: 10px; text-align: center; z-index: 20; display: none; } .arrow { position: absolute; background-color: transparent; border: none; padding: 10px; width: 80px; height: 80px; background-size: contain; background-repeat: no-repeat; cursor: pointer; z-index: 10; display: none; } .left-arrow { left: 10%; /* Position adjusted for consistent design */ top: 50%; transform: translateY(-50%); background-image: url('https://www.dropbox.com/scl/fi/4uaen85kc8mxqhs7wky3q/3dgifmaker04494.gif?rlkey=xinfvrr966nvrbx8rm67ars9y&st=yer0uuvv&dl=1'); } .right-arrow { right: 10%; /* Position adjusted for consistent design */ top: 50%; transform: translateY(-50%); background-image: url('https://www.dropbox.com/scl/fi/238xqs33m4zi39ab6v9x0/3dgifmaker10912.gif?rlkey=d8xfi07chvs57xd1byb83ny82&st=9pr6kive&dl=1'); } </style> </head> <body> <button class="arrow left-arrow" id="leftArrow" onclick="triggerPassage('LEFT')"></button> <div class="container"> <img id="mainImage" src="https://www.dropbox.com/scl/fi/7hi32y75c1iji2kacuea7/altar8-min.png?rlkey=v0uoz2r2mt3g99nk255796lh7&st=7m2g3iem&dl=1" alt="Image" onload="showElements()"> <div class="colored-container" id="coloredContainer"> <p style="font-size: 2em; line-height: 1.2; color: #b1688b;">"...Didn't mean to curse at a holy place..." "It's a bit of a bad day today. Sorry again..." </p> </div> </div> <button class="arrow right-arrow" id="rightArrow" onclick="triggerPassage('RIGHT')"></button> <script> function triggerPassage(direction) { if (direction === 'LEFT') { SugarCube.Engine.play('14'); } else if (direction === 'RIGHT') { SugarCube.Engine.play('16'); } } function showElements() { document.getElementById('coloredContainer').style.display = 'block'; document.getElementById('leftArrow').style.display = 'block'; document.getElementById('rightArrow').style.display = 'block'; } </script> </body>

<head> <link href="https://fonts.googleapis.com/css2?family=Jersey+10&display=swap" rel="stylesheet"> <style> body{ margin: 0; padding: 0; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; font-family: 'Times New Roman', sans-serif; color: #2b2b2b; /* Very dark gray */ overflow: hidden; } #bg-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } #bg-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } #txt-container { padding: 20px; border-radius: 10px; font-size: 40px; text-align: center; line-height: 1.2; z-index: 2; width: 40%; height: 50%; position: relative; transform: translate(7%, 20%); display: flex; flex-direction: column; justify-content: center; align-items: center; } .clickable-img { width: 100px; height: 100px; cursor: pointer; margin-top: -30px; transform: translateY(-10px); } </style> </head> <body> <div id="bg-container"> <img id="bg-image" src="https://www.dropbox.com/scl/fi/0ms6r9yz48vdfyienmj0e/brchur1.png?rlkey=z95c5gqk19ml7fv9mg1s2519w&st=7bikatmz&dl=1" alt="Background Image"> <div id="txt-container"> <p id="text" style="display: none;">The soldier quickly wipes away some of his blood. The ones in his mouth, he refuses to spit out, so he swallows them.</p> <img id="firstImg" class="clickable-img" src="https://www.dropbox.com/scl/fi/ib2zuw2qlto9m5qdf15i0/3dgifmaker92185.gif?rlkey=v8axdptfud83oo511savzk2uj&st=iy087y8z&dl=1" onclick="firstClick()"> </div>  <span style="position: fixed; bottom: 10px; left: 10px; z-index: 1002;"> <<back "<span style='background-color: #FFDAB9; color: black; padding: 10px; border-radius: 5px; text-decoration: none; display: inline-block; width: 70px; height: 7px; text-align: center; line-height: 10px; font-size: 20px; font-family: \"Times New Roman\", serif;'>BACK</span>">> </span> </div> <script> // Function to make the text appear once all images are fully loaded function showTextWhenImagesLoaded() { const bgImage = document.getElementById("bg-image"); const firstImg = document.getElementById("firstImg"); let imagesLoaded = 0; const totalImages = 2; // Total number of images to load function checkAllImagesLoaded() { imagesLoaded++; if (imagesLoaded === totalImages) { // Once all images are loaded, show the text document.getElementById("text").style.display = 'block'; } } // Set onload event for both images bgImage.onload = checkAllImagesLoaded; firstImg.onload = checkAllImagesLoaded; } function firstClick() { const textElement = document.getElementById("text"); textElement.style.display = 'none'; textElement.innerText = "In his other hand, he holds two dirty pieces of paper."; textElement.style.display = 'block'; document.getElementById("firstImg").remove(); let newImg = document.createElement("img"); newImg.src = "https://www.dropbox.com/scl/fi/ib2zuw2qlto9m5qdf15i0/3dgifmaker92185.gif?rlkey=v8axdptfud83oo511savzk2uj&st=iy087y8z&dl=1"; newImg.classList.add("clickable-img"); newImg.onclick = function() { SugarCube.Engine.play('17'); }; newImg.style.marginTop = '-5px'; newImg.style.transform = 'translateY(-80px)'; document.getElementById("txt-container").appendChild(newImg); } // Call the function to wait for all images to load showTextWhenImagesLoaded(); </script> </body>

<head> <link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Jersey+10&display=swap" rel="stylesheet"> <style>\ @media (max-width: 640px) { #txt-con { font-size: 30px; /* or use a percentage or vw unit */ width: 80%; /* Adjust width to fit smaller screens */ top: 20%; /* Adjust positioning as needed */ } #txt-con1 { font-size: 15px; width: 70%; top: 50%; /* Adjust to fit content */ } #modal-content { font-size: 16px; /* Reduce modal font size for readability */ } } body { margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden; background-color: #ffbd12; } #bg-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } #bg-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } #txt-con { position: absolute; top: 35%; left: 2%; transform: translateY(-50%); padding: 20px; height: 80%; width: 27%; border-radius: 10px; color: #2b2b2b; font-family: 'Jersey 10', sans-serif; text-align: left; font-size: 60px; line-height: 1.2; z-index: 2; display: none; /* Initially hidden */ } #txt-con1 { position: absolute; top: 55%; right: 1%; transform: translateY(-50%); padding: 20px; height: 80%; width: 20%; border-radius: 10px; color: #2b2b2b; font-family: 'Jersey 10', sans-serif; text-align: left; font-size: 30px; line-height: 1; z-index: 2; text-decoration: underline; display: none; /* Initially hidden */ } #modal { position: fixed; top: 0; left: 33%; width: 40%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: none; justify-content: center; align-items: center; z-index: 3; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); } #modal-content { background: url('https://www.dropbox.com/scl/fi/bk96rxecbftbngvi9fbs3/images-18.jpeg?rlkey=lu7ii1exms0ceynzy8300s76p&st=swg67ev4&dl=1') no-repeat center center; background-size: cover; padding: 20px; border-radius: 10px; width: 100%; height: 100%; overflow-y: auto; color: black; text-align: left; font-family: 'Special Elite', cursive; font-size: 20px; } #overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; z-index: 2; /* Place overlay below modal */ } #close-btn { position: absolute; top: 20px; right: 30px; background-color: transparent; border: none; color: black; font-size: 30px; cursor: pointer; } #musicNote { position: fixed; top: 20px; left: 10px; font-size: 50px; color: black; z-index: 1001; cursor: default; } </style> </head> <body> <audio autoplay loop> <source src="https://www.dropbox.com/scl/fi/fnq11cidoz3ssu4aghc1k/Screenrecorder-2024-09-25-09-46-46-633_1.mp3?rlkey=70q8yhlun0fjqbl5wcuia6usd&st=3jreiy06&dl=1" type="audio/mpeg"> Your browser does not support the audio tag. </audio> <span id="musicNote">♬</span> <div id="bg-container"> <img id="bg-image" src="https://www.dropbox.com/scl/fi/bhyfcbf7t5rtoh602r8pr/brchur.png?rlkey=mslx3bxx8firi6l938zigzoe9&st=rtbhow9a&dl=1" alt="Background Image"> <div id="txt-con"> <p>He tucks the papers under the wrecked confessional, hidden under rubble, hoping they won't be found.</p> </div> <div id="txt-con1"> <p><span onclick="openModal('LETTER TO MARY 1')">>Take a peek of [LETTER TO MARY 1]</span></p> <p><span onclick="openModal('LETTER TO MARY 2')">>Take a peek of [LETTER TO MARY 2]</span></p> <p><span onclick="skip()">>MOVE ON FROM THE WAR, FROM REGRET</span></p> </div> </div> <div id="overlay"></div> <span style="position: fixed; bottom: 10px; left: 10px; z-index: 1002;"> <<back "<span style='background-color: #FFDAB9; color: black; padding: 10px; border-radius: 5px; text-decoration: none; display: inline-block; width: 70px; height: 7px; text-align: center; line-height: 10px; font-size: 20px; font-family: \"Times New Roman\", serif;'>BACK</span>">> </span> <div id="modal"> <div id="modal-content"> <button id="close-btn" onclick="closeModal()">×</button> <div id="modal-text"></div> </div> </div> <script> // Only initialize the variable if it has not been declared already if (typeof allImagesLoaded === 'undefined') { allImagesLoaded = false; } // Only assign bgImage if it hasn't been declared before if (typeof bgImage === 'undefined') { const bgImage = document.getElementById("bg-image"); bgImage.onload = function () { allImagesLoaded = true; document.getElementById("txt-con").style.display = "block"; document.getElementById("txt-con1").style.display = "block"; }; setTimeout(function () { bgImage.src = "https://www.dropbox.com/scl/fi/kbdgl315gl7tc158giebm/brchur2.png?rlkey=9kql898vcm2csii1uew4f27gf&st=machet4r&dl=1"; }, 20000); } // Function to open the modal with the letter content function openModal(letter) { const modalText = document.getElementById("modal-text"); const overlay = document.getElementById("overlay"); // Load the appropriate content based on which letter is clicked if (letter === 'LETTER TO MARY 1') { modalText.innerHTML = "<p>Mother Mary, would you still love a starving hound? With dirtied nails and blood between its teeth?</p><p>Searchlight eyes, tail a propeller, an engine revving growl.</p><p>Of course, that’s just a metaphor. The books I managed to grab from a fallen bookstore’s rubble call men like myself dogs. Stay, sit, and bark on command. Perhaps gnaw on something to satiate the ache between your teeth. When loved enough, declawed and groomed fur, maybe even have your ears clipped because you’d look more appealing that way. If I had to choose between scrubbing floors in brothels or shooting a man in the head, at least the goal of a headshot is clear-cut and planned. Scrubbing floors takes too much thinking: how far should I go? Should I leave out the stray hair I missed and continue the mopping? How hard should I scrub? Is floor wax necessary after using it just yesterday?</p><p>Mother Mary, will you forgive a poor, stupid son? Choosing violence instead of what resembles a home? And my only reason is that ambiguity is a scary thing to me. To think from the very beginning I'm already broken.</p>"; } else if (letter === 'LETTER TO MARY 2') { modalText.innerHTML = "<p>█████ ████████████████████████████ ████████ ████ ███████████████████████ ████████ █████ █████████████████ ████████████████ █████████████████ █████████████████████</p><p>Mother Mary, the war has ended, but the head hanging from my hand feels worse than freedom. It feels as though I killed myself instead. █████████ ███████████████████. If my opinion was asked, the peace of silence is better than breathing in the smell of rust, mind wondering about millions of things. ██████████ ████ ███████████████ ████████ ████████████ ████.</p><p>Sorry, I can't restart all over again; I've ran out of paper to write on. Don't mind the mess. I can't seem to make up my mind on what to say or ask for.</p><p>Mother…On second thought, I'm no longer asking for forgiveness–not all men deserve forgiveness. I'm no better than a terrorist. You don't deserve to see such an incomplete boy, you'll only burden yourself. If one were to feed a stray dog, it would come back again and again. Waiting by your door, sniffing the warm indoor light through the cracks of it, howl and bark if it feels loved enough to feel entitled. I’m afraid once I’m given a bone, I’d take it a mile, and bury it along with my worries.</p><p>Sometimes I wonder if dogs also feel what I feel. Hopefully not, it's worse than getting waterboarded, honestly. I hope you don't see this, Mother Mary. It's embarrassing. I no longer mean to call out your name. Sorry.</p>"; } const modal = document.getElementById("modal"); modal.scrollTop = 0; overlay.style.display = "block"; modal.style.display = "flex"; } // Function to close the modal function closeModal() { const overlay = document.getElementById("overlay"); document.getElementById("modal").style.display = "none"; overlay.style.display = "none"; } // Function for skipping modal content function skip() { closeModal(); } function skip() { setTimeout(function() { SugarCube.Engine.play('18'); }, 0); } </script> </body>

<html lang="en"> <head> <link href="https://fonts.googleapis.com/css2?family=Jersey+10&display=swap" rel="stylesheet"> <style> body { margin: 0; padding: 0; overflow: hidden; height: 100%; width: 100%; background-color: #121f1f; position: relative; } .container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .panel-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } .panel { width: 305px; height: 705px; position: absolute; left: 6%; top: -4%; overflow: visible; } .panel1 { width: 970px; height: auto; position: fixed; top: 36%; left: 29%; z-index: 1; opacity: 0; animation: fadeInPanel1 1s forwards; animation-delay: 5s; cursor: pointer; } .background-image { position: absolute; top: 30%; left: 0; width: 1920px; height: 80px; z-index: -1; object-fit: cover; } .marquee-container { width: 100vw; overflow: hidden; position: absolute; top: 30%; left: 0; } .marquee { display: flex; animation: scroll 10s linear infinite; } .marquee img { width: 15%; height: 15%; object-fit: cover; margin-right: 180px; } @keyframes scroll { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } .top-right-text { position: absolute; top: 20px; right: 20px; font-family: 'Jersey 10', sans-serif; font-size: 50px; color: #fafad2; z-index: 3; text-shadow: 2px 2px 0 #5f9ea0; opacity: 0; animation: fadeIn 1s forwards; animation-delay: 1s; } @keyframes fadeIn { to { opacity: 1; } } @keyframes fadeInPanel1 { to { opacity: 1; } } .container > *:not(.top-right-text):not(.panel1) { opacity: 0; animation: fadeIn 1s forwards; animation-delay: 2s; } #musicNote { position: fixed; top: 20px; left: 10px; font-size: 50px; color: light-yellow; z-index: 1001; cursor: default; } .panel img { width: 100%; height: auto; object-fit: contain; } </style> </head> <body> <div class="container"> <audio id="backgroundMusic" loop autoplay> <source src="https://www.dropbox.com/scl/fi/i3p0iy6yx24n63gvgje0f/ocean-waves-112906.mp3?rlkey=acvk1aki8m2ok4k19dz5cziki&st=lhccb532&dl=1" type="audio/mpeg"> Your browser does not support the audio element. </audio> <span id="musicNote">♬</span> <span style="position: fixed; bottom: 10px; left: 10px; z-index: 1002;"> <<back "<span style='background-color: #FFDAB9; color: black; padding: 10px; border-radius: 5px; text-decoration: none; display: inline-block; width: 70px; height: 7px; text-align: center; line-height: 10px; font-size: 20px; font-family: \"Times New Roman\", serif;'>BACK</span>">> </span> <img class="background-image" src="https://www.dropbox.com/scl/fi/iac0wnbu3605pn8mx9759/fishbg.png?rlkey=dolbs364rbihj8o8j1fa9cttt&st=b54s5drd&dl=1" alt="Background Image"> <div class="marquee-container"> <div class="marquee"> <img src="https://www.dropbox.com/scl/fi/b6t6z5iltykymzr7ohe3j/fish.png?rlkey=9pkh4moevpvkc8y7fssaciwi8&st=416aqvpy&dl=1" alt="FISH"> <img src="https://www.dropbox.com/scl/fi/b6t6z5iltykymzr7ohe3j/fish.png?rlkey=9pkh4moevpvkc8y7fssaciwi8&st=416aqvpy&dl=1" alt="FISH"> <img src="https://www.dropbox.com/scl/fi/b6t6z5iltykymzr7ohe3j/fish.png?rlkey=9pkh4moevpvkc8y7fssaciwi8&st=416aqvpy&dl=1" alt="FISH"> <img src="https://www.dropbox.com/scl/fi/b6t6z5iltykymzr7ohe3j/fish.png?rlkey=9pkh4moevpvkc8y7fssaciwi8&st=416aqvpy&dl=1" alt="FISH"> <img src="https://www.dropbox.com/scl/fi/b6t6z5iltykymzr7ohe3j/fish.png?rlkey=9pkh4moevpvkc8y7fssaciwi8&st=416aqvpy&dl=1" alt="FISH"> </div> </div> <div class="panel-container"> <div class="panel"> <img src="https://www.dropbox.com/scl/fi/1wvd4tcdmjxbd8v0fthx3/panel.png?rlkey=aaq2bpldp3tkrg7jjuj4bf8ui&st=fbz5cf82&dl=1" alt="PANEL1" style="width: 100%; height: auto; object-fit: contain;"> </div> <div class="panel panel1"> <img id="gifPanel" src="https://www.dropbox.com/scl/fi/f1bekvi35qnqtij494ppt/ezgif.com-optimize.gif?rlkey=qzcxtqk07gqrnbqsmxvq8l99t&st=zrxdcba3&dl=1" alt="GIF" style="width: 100%; height: auto; object-fit: contain; display: none;"> </div> </div> <div class="top-right-text">BEFORE DEATH 2009, SOMEWHERE IN THE PACIFIC OCEAN</div> </div> <script> (function() { const gifPanel = document.getElementById('gifPanel'); function showAndResetGIF() { const gifSrc = gifPanel.src; // Save the original GIF source gifPanel.src = ''; // Reset the src to force reload gifPanel.src = gifSrc; // Re-assign the original src gifPanel.style.display = 'block'; // Make it visible gifPanel.style.pointerEvents = 'auto'; // Enable clicking gifPanel.style.cursor = 'pointer'; // Change cursor style // Set up click event to navigate gifPanel.onclick = function() { SugarCube.Engine.play("20"); }; } // Show the GIF after an initial delay of 5 seconds setTimeout(() => { showAndResetGIF(); }, 5000); // Initial delay // Listen for the visibility change to reset the GIF document.addEventListener('visibilitychange', function() { if (document.visibilityState === 'visible') { // Reset GIF when coming back to the tab after 5 seconds setTimeout(showAndResetGIF, 5000); } }); })(); </script> </body> </html>

<head> <link href="https://fonts.googleapis.com/css2?family=Jersey+10&display=swap" rel="stylesheet"> <style> body { background-image: url('https://www.dropbox.com/scl/fi/wrx1r7f16geq5qws2rynr/boatbg.png?rlkey=udl72jt59817vmwafywswyxpt&st=owepycwc&dl=1'); background-repeat: repeat; } /* Marquee Animation */ @keyframes marquee { from { transform: translateX(100%); } to { transform: translateX(-100%); } } #marqueeContent { width: 200vw; } .image-container { margin-top: 20px; display: flex; margin-left: -130px; gap: 20px; } /* Slide Up Animation */ @keyframes slideUp { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0); } } .spawned-img { width: 350px; height: 500px; border: 2px solid #092741; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); opacity: 0; animation: slideUp 1s ease-in-out forwards; } .spawned-img:hover { transform: scale(1.1); transition: transform 0.2s ease-in-out; } /* Increased font sizes */ #textHolder { font-size: 28px; } #holderText { font-size: 28px; } /* Button Style */ #button { cursor: pointer; width: 90px; height: auto; } </style> </head> <body> <audio id="backgroundMusic" loop autoplay> <source src="https://www.dropbox.com/scl/fi/i3p0iy6yx24n63gvgje0f/ocean-waves-112906.mp3?rlkey=acvk1aki8m2ok4k19dz5cziki&st=lhccb532&dl=1" type="audio/mpeg"> Your browser does not support the audio element. </audio> <div style="position: relative; display: flex; justify-content: center;">  <div id="marqueeContainer" style="position: absolute; top: 0; left: -30%; width: 150vw; height: 200px; z-index: 0; overflow: hidden;"> <div id="marqueeContent" style="display: flex; animation: marquee 15s linear infinite; height: 100%;"> <img src="https://www.dropbox.com/scl/fi/le7ug1girlub872r9j1wr/fish1.png?rlkey=x7kvmg9pp95gopujywppdxb9g&st=jp67t5am&dl=1" alt="GULUGULU" style="height: 100px; margin-right: 100px;"> <img src="https://www.dropbox.com/scl/fi/le7ug1girlub872r9j1wr/fish1.png?rlkey=x7kvmg9pp95gopujywppdxb9g&st=jp67t5am&dl=1" alt="I LOVE FISH" style="height: 100px; margin-right: 100px;"> <img src="https://www.dropbox.com/scl/fi/le7ug1girlub872r9j1wr/fish1.png?rlkey=x7kvmg9pp95gopujywppdxb9g&st=jp67t5am&dl=1" alt="BLUB BLUB" style="height: 100px; margin-right: 100px;"> </div> </div>  <div id="textHolder" style="background-color: #092741; height: 100px; padding: 20px; width: 90%; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);"> <span id="holderText" style="font-family: 'Jersey 10', sans-serif; color: white;">Back to the fray, just a year after the terrorist war finally ended.</span>  <span style="position: fixed; bottom: 10px; left: 10px; z-index: 1002;"> <<back "<span style='background-color: #FFDAB9; color: black; padding: 10px; border-radius: 5px; text-decoration: none; display: inline-block; width: 70px; height: 7px; text-align: center; line-height: 10px; font-size: 20px; font-family: \"Times New Roman\", serif;'>BACK</span>">> </span> <img id="button" src="https://www.dropbox.com/scl/fi/za8klq8575iwrylxna7t7/3dgifmaker79138.gif?rlkey=ean5rq61e8iqjgoq35bhnwn7v&st=zdt9mjwo&dl=1" alt="Button" style="cursor: pointer; width: 90px; height: auto;"> </div> </div> <div id="imageContainer" class="image-container"></div> <script> var clickCount = 0; var button = document.getElementById('button'); var textHolder = document.getElementById('holderText'); var imageContainer = document.getElementById('imageContainer'); // Preload images var images = []; images[0] = new Image(); images[0].src = "https://www.dropbox.com/scl/fi/6m2we69zh03pntl6k2x3v/boat2.png?rlkey=de2hfhr2n385uu1xa9yikau6z&st=4vr8gaff&dl=1"; images[1] = new Image(); images[1].src = "https://www.dropbox.com/scl/fi/muiximzddpwd5fkxfx8w8/boat.png?rlkey=i84sdjmzx86ntcc8qpaaxgfh9&st=gr5eywuh&dl=1"; images[2] = new Image(); images[2].src = "https://www.dropbox.com/scl/fi/c5ehfsz1nz11l81yvc5pp/boat1.png?rlkey=4uozsrkctj73fiy4bv5d1fkd7&st=16tq87wm&dl=1"; button.addEventListener('click', function() { clickCount++; if (clickCount === 1) { textHolder.textContent = "No breaks, no rewards—"; var img1 = document.createElement('img'); img1.src = images[0].src; // Use preloaded image img1.alt = "picture of a boat"; img1.classList.add('spawned-img'); imageContainer.appendChild(img1); } else if (clickCount === 2) { textHolder.textContent = "From a soldier on the front lines to being stuck in a dingy patrol boat doing black operations."; var img2 = document.createElement('img'); img2.src = images[1].src; // Use preloaded image img2.alt = "boat interior"; img2.classList.add('spawned-img'); imageContainer.appendChild(img2); } else if (clickCount === 3) { textHolder.textContent = "What a time to be alive."; var img3 = document.createElement('img'); img3.src = images[2].src; // Use preloaded image img3.alt = "why tf is it dark in there"; img3.classList.add('spawned-img'); imageContainer.appendChild(img3); } else if (clickCount === 4) { textHolder.textContent = "Redirecting to passage 21..."; SugarCube.Engine.play("21"); } }); </script> </body>

<head> <style> body { margin: 0; height: 600vh; /* Increased height to make the page longer */ background-color: black; overflow: auto; /* Enable scrolling */ display: flex; align-items: center; } .image-container { position: fixed; top: 60%; left: 50%; transform: translate(-50%, -50%); width: 400px; height: 100%; perspective: 1000px; z-index: 3; } .img1-wrapper { position: relative; width: 300px; height: 600px; transform-style: preserve-3d; transform-origin: left; transition: transform 0.1s linear; z-index: 2; } .img1-front, .img1-back { position: absolute; top: -30px; width: 400px; height: 800px; backface-visibility: hidden; border-radius: 10%; } .img1-front { background: url('https://www.dropbox.com/scl/fi/ayvn9wqnrz2ssg4jusaas/door.png?rlkey=ytqj5ms3s7esizydgb27hlrkd&st=dxjpfkwk&dl=1') center / cover no-repeat; } .img1-back { background: url('https://www.dropbox.com/scl/fi/zxy8ku7a9xma011hejmms/door1.png?rlkey=8q166yneq31r84tc0typt99r9&st=o2u6gdwy&dl=1') center / cover no-repeat; transform: rotateY(180deg); } .img2 { display: none; /* Initially hidden */ position: absolute; top: 0; left: 0; width: 400px; height: 800px; background: url('https://www.dropbox.com/scl/fi/i51kbsu4iwoso1luigdoj/door3.png?rlkey=wqn0l43gtmhk1141vs9vbl0ra&st=tt0aydmz&dl=1') center / cover no-repeat; z-index: 1; border-radius: 10%; } .color-container { position: fixed; top: 50%; right: 20px; transform: translateY(-50%); width: 200px; height: 400px; z-index: 0; display: flex; justify-content: center; align-items: center; } .placeholder-img { width: 120px; height: 250px; background: url('https://www.dropbox.com/scl/fi/dfcs1u1bdyjbmebwrakjx/arrow.png?rlkey=5tp6w2a02kaaq6fx4gyf1s2i1&st=nron16d0&dl=1') center / cover no-repeat; cursor: pointer; } /* Text styling */ .scroll-text { position: absolute; top: -40px; font-size: 18px; color: lightyellow; display: none; } </style> </head> <body> <div class="image-container" id="imageContainer"> <div class="img1-wrapper" id="img1Wrapper"> <div class="img1-front"></div> <div class="img1-back"></div> </div> <div class="img2" id="img2"></div> </div>  <span style="position: fixed; bottom: 10px; left: 10px; z-index: 1002;"> <<back "<span style='background-color: #FFDAB9; color: black; padding: 10px; border-radius: 5px; text-decoration: none; display: inline-block; width: 70px; height: 7px; text-align: center; line-height: 10px; font-size: 20px; font-family: \"Times New Roman\", serif;'>BACK</span>">> </span> <div class="color-container"> <div class="scroll-text" id="scrollText">Scroll down...</div> <div class="placeholder-img" id="placeholderImg"></div> </div> <script> (function () { let lastScrollTop = window.pageYOffset || document.documentElement.scrollTop; let rotationY = 0; const img1Wrapper = document.getElementById('img1Wrapper'); const img2 = document.getElementById('img2'); const scrollText = document.getElementById('scrollText'); const placeholderImg = document.getElementById('placeholderImg'); let imagesLoaded = 0; // Counter for loaded images const totalImages = 3; // Total number of images to load const preloadImages = () => { const img1Front = new Image(); const img1Back = new Image(); const img2Background = new Image(); img1Front.src = 'https://www.dropbox.com/scl/fi/ayvn9wqnrz2ssg4jusaas/door.png?rlkey=ytqj5ms3s7esizydgb27hlrkd&st=dxjpfkwk&dl=1'; img1Back.src = 'https://www.dropbox.com/scl/fi/zxy8ku7a9xma011hejmms/door1.png?rlkey=8q166yneq31r84tc0typt99r9&st=o2u6gdwy&dl=1'; img2Background.src = 'https://www.dropbox.com/scl/fi/i51kbsu4iwoso1luigdoj/door3.png?rlkey=wqn0l43gtmhk1141vs9vbl0ra&st=tt0aydmz&dl=1'; // Increment the counter when each image is loaded img1Front.onload = img1Back.onload = img2Background.onload = () => { imagesLoaded++; // Show img2 only when all images are loaded if (imagesLoaded === totalImages) { img2.style.display = 'block'; } }; }; preloadImages(); function handleScroll(event) { const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop; if (currentScrollTop > lastScrollTop) { rotationY = Math.min(rotationY + 2, 180); } else if (currentScrollTop < lastScrollTop) { rotationY = Math.max(rotationY - 2, 0); } img1Wrapper.style.transform = `rotateY(${rotationY}deg)`; if (rotationY === 180) { setTimeout(function () { window.location.href = 'https://enter-ciaxpoturi.neocities.org/DOA/1.2'; }, 1000); } lastScrollTop = currentScrollTop; } window.addEventListener('scroll', handleScroll); // Show "Scroll down..." text on image click placeholderImg.addEventListener('click', () => { scrollText.style.display = 'block'; setTimeout(() => { scrollText.style.display = 'none'; }, 2000); }); })(); </script> </body>

<head> <style> html, body { margin: 0; padding: 0; height: 100%; width: 100%; background-image: url('https://ciaxpoturi.neocities.org/STORIES/Disc/bgcd.png'); background-size: 100% auto; background-repeat: repeat-y; background-position: top center; display: flex; justify-content: center; align-items: center; } .resolution { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px; width: 200%; box-sizing: border-box; position: relative; padding-left: 70%; /* Add padding to the left to move elements right */ } .images { display: flex; gap: 20px; margin-bottom: 20px; justify-content: center; } .images img { max-width: 100px; height: auto; } .text { font-family: "Times New Roman", Times, serif; font-size: 18px; color: lightyellow; margin-bottom: 20px; } .clickable { color: lightyellow; text-decoration: underline; cursor: pointer; margin: 10px 0; font-weight: bold; font-size: 25px; width: 100%; text-align: center; } .clickable:hover { color: #ffd700; } </style> <script> function proceed() { SugarCube.Engine.play('0.1'); } function showContentWarning() { alert("The story contains mentions of war and death. It also contains sounds so make sure you bring that volume up stinky"); } </script> </head> <body> <div class="resolution"> <div class="images"> <img src="https://www.dropbox.com/scl/fi/z5bfo4dwebgzaklbv7mj0/welcomicon1.png?rlkey=sia62mz53r4uyzoari7jyoasj&st=it7bfx0x&dl=1" alt="Image 2"> </div> <div class="text"> The story will mostly work on PC! There was an attempt to adapt it on mobile but be nice to me lol I'm new to coding. Make sure you got good wifi too. <br><br> This is an interactive comic. If lost, click something yellow! Or anything that moves or texts that are underlined! </div> <div class="clickable" onclick="showContentWarning()">> CONTENT WARNING</div> <div class="clickable" onclick="proceed()">> PROCEED</div> </div> </body>

{ box-sizing: border-box; } body { margin: 0; padding: 0; overflow-x: hidden; width: 100%; height: auto; max-width: 100vw; } #custom-ui { position: fixed; top: 10px; left: 10px; z-index: 10000; } #page-button { background-color: black; color: gray; padding: 5px 15px; border: none; font-family: "Times New Roman", Times, serif; font-size: 16px; cursor: pointer; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); border-radius: 10px; } #page-button:hover { background-color: #fde7b1; } .dropdown-content { display: none; position: absolute; top: 40px; left: 0; background-color: #333; min-width: 160px; max-height: 300px; overflow-y: auto; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); z-index: 9999; } .dropdown-content a { color: lightgray; padding: 12px 16px; text-decoration: none; display: block; font-family: "Times New Roman", Times, serif; font-size: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .dropdown-content a:hover { background-color: #f1f1f1; } .show { display: block; } #custom-container { width: 100%; overflow: hidden; } .passage { max-width: 100%; margin: 0 auto; } @media screen and (max-width: 1440px) { html, body { width: 100vw; height: auto; overflow-x: hidden; } .passage { max-width: 100%; margin: 0 auto; } } /* Adjust zoom to 80% for larger screens */ @media screen and (min-width: 1441px) { html, body { zoom: 0.8; /* 80% zoom */ width: 100%; height: 100%; overflow-x: hidden; } .passage { max-width: 100%; } }