Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	The Rooster Apocalypse
ID	4709095101808640
Created	7 days ago, 1743446094875
Updated	7 days ago, 1743446326119
Code	<!DOCTYPE html> <!-- hi sowwy for messy code and bad webpage i bad at codeing cwedit to Radar (my amazing team captain) for help with code pwoblems cwedit to Polar (@notpolar) for tutowial on scwoll animation --> <html> <head> <meta charset="utf-8"> <title>The Rooster Apocalypse</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Creepster&family=Nosifer&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"> <style> .overflow-wrapper {/fixes Safari overflow/ overflow: hidden; } @keyframes slideIn-Up { 0% { transform: translateY(100px); } 100% { transform: translateY(0px); } } @keyframes slideIn-Left { 0% { transform: translateX(-300px); } 100% { transform: translateX(0px); } } @keyframes slideIn-Right { 0% { transform: translateX(300px); } 100% { transform: translateX(0px); } } </style> <!-- Styles that apply to scroll animations --> <style> .scroll-element{ display: flex; align-items: center; opacity: 0; transition: 500ms opacity; } /These will be applied when element is in view/ .scrolled { opacity: 1; } .scrolled.left { animation: slideIn-Left 500ms ease-in-out; } .scrolled.right { animation: slideIn-Right 500ms ease-in-out; } .scrolled.up { animation: slideIn-Up 500ms ease-in-out; } </style> <!-- Styles that apply to scrolling --> <style> body { background-color: rgb(18, 18, 18); overflow-x: hidden; user-select: none; } p { margin: 0; font-family: "Roboto Condensed", sans-serif; } ul { margin-top: 20px; font-family: "Roboto Condensed", sans-serif; } em { color: rgb(143, 143, 143); } strong { color: rgb(143, 143, 143); } hr { border: 1px solid rgb(38, 38, 38); box-shadow: 0 0 15px rgb(217, 217, 217); } /* width / ::-webkit-scrollbar { width: 10px; } / Track / ::-webkit-scrollbar-track { background: rgb(0, 0, 0); } / Handle / ::-webkit-scrollbar-thumb { background: rgb(89, 89, 89); } / Handle on hover / ::-webkit-scrollbar-thumb:hover { background: rgb(74, 74, 74); } </style> <!-- Styles that apply to whole webpage --> <style> .page { animation-name: fade-in; animation-duration: 1s; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .header { color: rgb(122, 39, 39); font-size: 30px; text-shadow: 1px 2px 2px rgba(135, 135, 135, 0.3); text-align: left; font-style: italic; font-weight: 700; margin-right: 30px; margin-left: 30px; margin-top: 25px; margin-bottom: 15px; } .quote-div { background-color: rgba(0, 0, 0, 0.2); width: 100%; font-size: 42px; box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); margin-top: 62px; transition: 0.5s; } .quote-div:hover { transform: rotate(1deg); cursor: pointer; } .quote-page { color: rgb(110, 0, 0); font-family: "Creepster"; font-weight: 400; font-style: italic; text-align: center; text-shadow: 0 0 3px rgba(255, 255, 255, 0.7); line-height: 61px; padding-top: 15px; margin-right: 20px; margin-left: 10px; } .quote-person { color: rgb(110, 0, 0); font-size: 20px; font-family: "Creepster"; font-weight: 400; font-style: italic; text-align: center; text-shadow: 0 0 3px rgba(255, 255, 255, 0.7); margin-top: 10px; padding-bottom: 15px; } .stuff { background-color: rgb(18, 18, 18); position: absolute; top: 304px; left: 0; width: 100vw; box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.5); } .info { color: white; font-size: 18px; font-weight: 400; line-height: 38px; margin-right: 35px; margin-left: 35px; } .image-with-title { display: block; width: 100%; border-radius: 15px; box-shadow: 0 0 10px rgba(158, 158, 158, 0.8); margin: auto; margin-top: 0px; margin-bottom: 0px; transition: 0.5s; } .image-with-title:hover { box-shadow: 0 0 19px rgba(158, 158, 158, 0.8); cursor: pointer; } .container { position: relative; width: 50%; display: flex; justify-content: center; margin: auto; margin-top: 25px; margin-bottom: 25px; } .overlay { position: absolute; bottom: 0; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.5); / Black see-through / color: #f1f1f1; width: 99%; transition: .5s ease; opacity:0; color: white; font-size: 20px; padding: 0px; text-align: center; border-radius: 100px; margin-bottom: 3px; font-family: "Roboto Condensed", sans-serif; } .container:hover .overlay { opacity: 1; cursor: pointer; } </style> <!-- Styles that apply to multiple elements --> <style> .page2-buttons { background-color: rgb(18, 18, 18); display: flex; align-items: center; justify-content: center; width: 100vw; margin-top: 0px; margin-bottom: 24px; } .go-back-button { background-image: linear-gradient(to top right, rgb(97, 95, 97), rgb(173, 60, 19)); background-color: white; color: rgb(110, 0, 0); width: 140px; height: 70px; display: flex; align-items: center; justify-content: center; font-family: "Nosifer", sans-serif; font-weight: 400; font-size: 12px; text-shadow: 0 0 6px rgba(255, 255, 255, 0.5); border-radius: 100px; box-shadow: 0px 3px 11px rgba(84, 84, 84, 0.7); border: 2px solid rgb(43, 43, 43); padding: 10px; margin: 0 11vw; transition: 0.5s; } .go-back-button:hover { cursor: pointer; transform: translateY(4px); box-shadow: 0px 2px 9px rgba(84, 84, 84, 0.5); } .continue-button { background-image: linear-gradient(to bottom right, rgb(173, 60, 19) , rgb(97, 95, 97)); background-color: white; color: rgb(110, 0, 0); width: 140px; height: 70px; display: flex; align-items: center; justify-content: center; font-family: "Nosifer", sans-serif; font-weight: 400; font-size: 12px; text-shadow: 0 0 6px rgba(255, 255, 255, 0.5); box-shadow: 0px 3px 11px rgba(84, 84, 84, 0.7); border: 1px solid rgb(); border: 2px solid rgb(43, 43, 43); border-radius: 100px; margin: 0 11vw; transition: 0.5s; } .continue-button:hover { cursor: pointer; transform: translateY(4px); box-shadow: 0px 2px 9px rgba(84, 84, 84, 0.5); } </style> <!-- Styles that apply to buttons --> <style> / Targets the entire homepage / #number0 { background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/Port_and_lighthouse_overnight_storm_with_lightning_in_Port-la-Nouvelle.jpg/1200px-Port_and_lighthouse_overnight_storm_with_lightning_in_Port-la-Nouvelle.jpg?20150806144424); background-position: left; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; position: relative; margin-bottom: 0px; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; } / Title of homepage / .title p { display: block; font-size: 78px; font-family: "Creepster"; font-weight: 400; font-style: normal; text-align: center; text-shadow: 0px 5px 7px rgba(0, 0, 0, 0.6); line-height: 85px; margin-top: 3%; margin-bottom: 6%; } .the { font-size: 81px; } .apocalypse { color: rgb(56, 0, 0); } / Stuff below title / .bottom-stuff { display: flex; justify-content: space-between; } .rooster-art-div { margin: auto; } .rooster-art { width: 221px; border-radius: 166px; box-shadow: 0px 0px 20px rgba(0, 0, 0); } .rooster-art { -webkit-animation: anim 5s infinite linear; animation: anim 5s infinite linear; } @-webkit-keyframes anim { from {-webkit-transform: rotateY(0deg);} to {-webkit-transform: rotateY(360deg);} } @keyframes anim { from {transform: rotateY(0deg);} to {transform: rotateY(360deg);} } .begin-button { background-color: rgb(0, 0, 0); color: rgb(145, 40, 40); border: 2px solid rgb(0, 0, 0); border-radius: 20px; font-size: 15px; font-family: "Nosifer", sans-serif; font-weight: 400; font-style: normal; text-align: center; width: 200px; height: 50px; text-shadow: 0 0 9px rgba(255, 0, 0); box-shadow: 0 1px 15px rgba(138, 138, 138, 0.7); padding: 10px; transition: 0.5s; } .begin-button-div { margin: auto; } .begin-button:hover { cursor: pointer; margin-top: 7px; box-shadow: 0 1px 7px rgba(138, 138, 138, 0.5); } </style> <!-- Page (0) styles --> <style> #number1 { background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Kruppert_Cubalaya_cropped.JPG/640px-Kruppert_Cubalaya_cropped.JPG); background-attachment: fixed; background-repeat: no-repeat; background-size: 100%; background-color: rgb(18, 18, 18); position: absolute; top: 0; left: 0; width: 100vw; height: 100vw; } .full-image { display: block; width: 50%; border-radius: 15px; box-shadow: 0 0 10px rgba(158, 158, 158, 0.8); margin: auto; margin-top: 25px; margin-bottom: 25px; transition: 0.5s; } .full-image:hover { cursor: pointer; box-shadow: 0 0 19px rgba(158, 158, 158, 0.8); } </style> <!-- Page (1) styles --> <style> #number2 { background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Black_hole_%28NASA%29.jpg/1125px-Black_hole_%28NASA%29.jpg?20110630003850); background-color: rgb(18, 18, 18); background-attachment: fixed; background-repeat: no-repeat; background-size: 100%; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; } .texts { float: left; height: 200px; border-radius: 15px; box-shadow: 0 0 10px rgba(158, 158, 158, 0.8); margin-left: 35px; margin-right: 0px; margin-top: 20px; margin-bottom: 5px; transition: 0.5s; } .texts:hover { box-shadow: 0 0 19px rgba(158, 158, 158, 0.8); cursor: pointer; } .holding-rooster { float: right; height: 190px; border-radius: 15px; box-shadow: 0 0 10px rgba(158, 158, 158, 0.8); margin-left: 0px; margin-right: 45px; margin-top: 20px; margin-bottom: 5px; transition: 0.5s; } .holding-rooster:hover { box-shadow: 0 0 19px rgba(158, 158, 158, 0.8); cursor: pointer; } </style> <!-- Page (2) styles --> <style> #number3 { background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Standard_time_zones_of_the_world_%283%29.svg/640px-Standard_time_zones_of_the_world_%283%29.svg.png); background-color: rgb(18, 18, 18); background-attachment: fixed; background-repeat: no-repeat; background-size: 100%; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; } .quote-div-page3 { background-color: rgba(176, 176, 176, 0.2); width: 100%; font-size: 35px; box-shadow: 0 0 12px rgba(176, 176, 176, 0.5); margin-top: 62px; transition: 0.7s; } .quote-div-page3:hover { transform: rotate(1deg); cursor: pointer; } .space-time { float: right; height: 190px; border-radius: 15px; box-shadow: 0 0 10px rgba(158, 158, 158, 0.8); margin-left: 30px; margin-right: 10px; margin-top: 20px; margin-bottom: 5px; transition: 0.5s; } .space-time:hover { box-shadow: 0 0 19px rgba(158, 158, 158, 0.8); cursor: pointer; } </style> <!-- Page (3) styles --> <style> #number4 { background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/Iceberg_in_the_Arctic_with_its_underside_exposed.jpg/640px-Iceberg_in_the_Arctic_with_its_underside_exposed.jpg); background-color: rgb(18, 18, 18); background-attachment: fixed; background-repeat: no-repeat; background-size: 100%; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; } </style> <!-- Page (4) styles --> <style> #number5 { background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/Rooster04_adjusted.jpg/640px-Rooster04_adjusted.jpg); background-color: rgb(18, 18, 18); background-attachment: fixed; background-repeat: no-repeat; background-size: 100%; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; } </style> <!-- Page (5) styles --> </head> <body> <div class="page" id="number0"> <div class="title"> <p> <span class="the">The</span> <br> Rooster <br> <span class="apocalypse">Apocalypse</span> </p> </div> <div class="bottom-stuff"> <div class="rooster-art-div"> <img class="rooster-art" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Polygon_illustration_of_a_hen.png/640px-Polygon_illustration_of_a_hen.png"> </div> <div class="begin-button-div"> <div class="btn" onclick="changePage(1)"> <p class="begin-button">Enter the <br> Cluckpocalypse</p> </div> </div> </div> </div> <!-- Page (0) --> <div class="page" id="number1"> <div class="quote-div"> <div class="quote-div"> <p class="quote-page">"The common rooster is the most terrifying creature of all"</p> <p class="quote-person">- Everyone ever</p> </div> </div> <div class="stuff"> <div class="scroll-element left"> <p class="header"> The Rooster Apocalypse: What Happens If They All Crow at Once? </p> </div> <br> <div class="scroll-element right"> <p class="info"> For <em>centuries</em>, roosters have been waking up the world with their mighty cries, ensuring that <em>no one</em> oversleeps, <em>no</em> farmer is late, and <em>no</em> universe collapses into chaos. But have you ever wondered... what would happen if <em>every</em> rooster on Earth crowed at the <em>exact</em> same time? </p> </div> <br> <div class="container scroll-element left"> <img class="image-with-title" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Rooster_crowing.jpg/640px-Rooster_crowing.jpg"> <div class="overlay">A lot of these guys</div> </div> <br> <div class="scroll-element right"> <p class="info"> Scientists <em>dare not</em> explore this question. Conspiracy theorists whisper of a <em>hidden</em> truth. Farmers exchange <em>uneasy</em> glances, knowing deep down that their roosters hold a power <em>far</em> greater than we can comprehend. </p> </div> <br> <br> <hr class="solid"> <br> <br> <div class="page2-buttons"> <button class="btn go-back-button" onclick="changePage(0)"> <span>Retreat to Safety</span> </button> <button class="btn continue-button" onclick="changePage(2)"> <span>Crow Onward</span> </button> </div> </div> </div> <!-- Page (1) --> <div class="page" id="number2"> <div class="quote-div"> <div class="quote-div"> <p class="quote-page">"A rooster crows only when it sees the light"</p> <p class="quote-person">- Muhammad Ali</p> </div> </div> <div class="stuff"> <div class="scroll-element right"> <p class="header">The Cosmic Theory: The Summoning of the Great Rooster</p> </div> <br> <div class="scroll-element left"> <p class="info"> Legend has it that if all roosters synchronized their crowing, they would generate a soundwave so powerful it would <em>tear</em> a hole in reality itself. Through this portal would step the <strong>Great Cosmic Rooster</strong>, an ancient being of <em>unfathomable</em> power, covered in <em>shimmering</em> golden feathers and glowing with the radiance of a thousand dawns. It is said that this entity is the one <em>true</em> ruler of the universe, and its return would mark the beginning of a new era—one where humanity would serve under the almighty reign of poultry. </p> </div> <br> <div class="container scroll-element right"> <img class="image-with-title" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1d/Chickens_at_the_mercado.jpg/640px-Chickens_at_the_mercado.jpg"> <div class="overlay">They want revenge</div> </div> <br> <div class="scroll-element left"> <p class="info"> But what, exactly, does the <strong>Great Cosmic Rooster</strong> want? Some scholars believe it slumbers in a distant dimension, waiting for the perfect moment to reclaim its throne. Others argue that it already walks among us, disguised as an unassuming backyard rooster, <em>carefully</em> biding its time. The scriptures of the <strong>Sacred Coop</strong> describe a prophecy in which the <strong>Great Rooster</strong> will awaken, leading an army of cockerels in a <em>divine</em> march across the land, <em>overturning</em> breakfast tables and <em>dismantling</em> alarm clocks in an act of ultimate retribution against humanity’s long oppression of poultry. </p> </div> <br> <br> <div class="scroll-element right"> <img class="texts" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Mawangdui_Ancient_Texts_on_Silk_or_Wood_%2810113028444%29.jpg/640px-Mawangdui_Ancient_Texts_on_Silk_or_Wood_%2810113028444%29.jpg"> <p class="info"> <strong>Ancient texts</strong> speak of signs that will precede the <strong>Great Crowing</strong>: an egg laid in reverse, a feather that casts no shadow, and a rooster that crows in fluent Latin. Some say the great being will not rise alone—its celestial entourage will include the <strong>Four Beaks of the Apocalypse</strong>: <em>War</em>, <em>Famine</em>, <em>Pestilence</em>, and the most feared of all—<em>Molting</em>. As their arrival draws near, the skies will <em>darken</em> with a storm of feathers, and the sound of crowing will <em>echo</em> through the mountains, signaling the dawn of a new poultry-dominated era. </p> </div> <br> <br> <div class="scroll-element left"> <p class="info"> Could humanity survive such an event? Some experts propose that only those who have shown <em>proper</em> reverence to their rooster overlords may be spared. Leaving out offerings of <strong>cracked corn</strong> and <strong>jewel-encrusted perches</strong> could curry favor. Others warn that resistance is <em>futile</em>—when the <strong>Great Rooster</strong> comes, there will be no negotiations, only clucks of divine judgment. </p> <img class="holding-rooster" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Young_boy_smiling%2C_holding_a_fighting_rooster_in_Laos.jpg/640px-Young_boy_smiling%2C_holding_a_fighting_rooster_in_Laos.jpg"> </div> <br> <br> <hr class="solid"> <br> <br> <div class="page2-buttons"> <button class="btn go-back-button" onclick="changePage(1)"> <span>Undo the Cluckening</span> </button> <button class="btn continue-button" onclick="changePage(3)"> <span>Advance with Caution</span> </button> </div> </div> </div> <!-- Page (2) --> <div class="page" id="number3"> <div class="quote-div-page3"> <div class="quote-div-page3"> <p class="quote-page">"When the rooster crows off the hour, don't hesitate to adjust the time."</p> <p class="quote-person">- Anonymous</p> </div> </div> <div class="stuff"> <div class="scroll-element left"> <p class="header">The Scientific Perspective (That Scientists Refuse to Publish)</p> </div> <br> <div class="scroll-element right"> <p class="info"> If <em>every</em> rooster on Earth were to crow simultaneously, the resulting soundwave would reach unprecedented levels—estimated at over <strong>200 decibels</strong>, louder than a rocket launch and nearly as loud as <em>your uncle explaining his conspiracy theories at Thanksgiving</em>. The Earth's atmosphere would <em>vibrate</em>, tectonic plates would <em>shift</em>, and clocks would spontaneously <em>reset</em> to "Rooster Standard Time." </p> </div> <br> <div class="container scroll-element left"> <img class="image-with-title" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/STS-125_Atlantis_Liftoff_02.jpg/640px-STS-125_Atlantis_Liftoff_02.jpg"> <div class="overlay">It'd be louder than this</div> </div> <br> <div class="scroll-element right"> <p class="info"> Some believe this event could <em>disrupt</em> the gravitational balance of the moon, causing it to tilt slightly, resulting in <em>perpetual daylight</em>—or worse, eternal morning fog that <em>never</em> quite lifts, leaving humanity in a state of endless grogginess. Others fear that the <em>sonic</em> impact could knock Earth slightly off its axis, leading to <em>unforeseen</em> climate shifts. Summer could become an <em>endless</em> dawn, while winter might be trapped in an <em>eerie</em>, pre-sunrise glow. Crops would be <em>confused</em>, birds would stop <em>migrating</em>, and alarm clocks would <em>cease</em> to function properly, permanently set to <strong>5:00 AM</strong>. </p> </div> <br> <div class="container scroll-element left"> <img class="image-with-title" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Digital_clock_5.00_AM.jpg/640px-Digital_clock_5.00_AM.jpg"> <div class="overlay">The dreaded 5:00 AM</div> </div> <br> <div class="scroll-element right"> <p class="info"> Furthermore, the <em>harmonic</em> resonance of such an event could <em>awaken</em> long-dormant forces within the Earth's core. Some theorists suggest the potential for <strong>tectonic yodeling</strong>, where mountains themselves begin to <em>vibrate</em> in response to the overwhelming frequency, causing spontaneous <em>avalanches</em> and the inexplicable rise of long-extinct <em>volcanoes</em>. The <strong>Great Rooster Crow</strong> could even generate <em>waves</em> in the ionosphere, <em>disrupting</em> global communications and making WiFi signals <em>permanently</em> sound like a faint clucking noise. </p> </div> <br> <div class="scroll-element left"> <img class="space-time" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Spacetime_curvature_-_Cropped.png/640px-Spacetime_curvature_-_Cropped.png"> <p class="info"> Most chilling of all is the possibility of <em>time distortion</em>. The simultaneous crowing may generate a <strong>temporal feedback loop</strong>, creating ripples in the space-time continuum. Reports from <em>ancient civilizations</em> describe moments in history where dawn lasted for <em>days</em>, and unexplained phenomena linked to rooster behavior. Did the Mayans predict the <strong>Crowpocalypse</strong>? Were the great pyramids <em>actually</em> built to suppress rooster energy? The answers may lie buried beneath <em>layers</em> of government denial. </p> </div> <br> <br> <hr class="solid"> <br> <br> <div class="page2-buttons"> <button class="btn go-back-button" onclick="changePage(2)"> <span>Reverse Crow</span> </button> <button class="btn continue-button" onclick="changePage(4)"> <span>More Feathers</span> </button> </div> </div> </div> <!-- Page (3) --> <div class="page" id="number4"> <div class="quote-div"> <div class="quote-div"> <p class="quote-page">"If given the chance, Roosters will take over the universe"</p> <p class="quote-person">- Anonymous (jk, I made it up)</p> </div> </div> <div class="stuff"> <div class="scroll-element right"> <p class="header"> Governments Are Hiding the Truth </p> </div> <div class="scroll-element left"> <p class="info"> Ever notice that <em>no</em> two roosters in a neighborhood crow at <em>exactly</em> the same time? This is <em>not</em> a coincidence. Experts suspect that world governments have <em>long</em> been involved in a secret operation known as <strong>Project Snooze Button</strong>, which ensures that roosters across the globe are just <em>slightly</em> out of sync to prevent catastrophe. Chickens raised in major metropolitan areas are reportedly fed <em>special</em> <strong>anti-crow hormones</strong> to keep them from ever reaching their <em>full</em> vocal potential. </p> </div> <br> <div class="container scroll-element right"> <img class="image-with-title" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Drug_pills_addiction...png/640px-Drug_pills_addiction...png"> <div class="overlay">Anti-crow pills</div> </div> <br> <div class="scroll-element left"> <p class="info"> But that's just the <em>tip</em> of the iceberg. Declassified documents suggest that <em>major world leaders</em> have long held emergency protocols in case of a <em>synchronized</em> rooster event. Underground bunkers have been stocked with <em>soundproof</em> walls and emergency rations of <em>decaffeinated</em> coffee (to slow the inevitable acceleration of time). Some theorists argue that global power grids have been <em>subtly</em> designed to emit <strong>counter-crow frequencies</strong>, preventing mass synchronization at dawn. </p> </div> <br> <div class="container scroll-element right"> <img class="image-with-title" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Tunnel_to_the_underground_nuclear_bunker_-_geograph.org.uk_-_5592504.jpg/640px-Tunnel_to_the_underground_nuclear_bunker_-_geograph.org.uk_-_5592504.jpg"> <div class="overlay">Might have to go here</div> </div> <br> <div class="scroll-element left"> <img class="space-time" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/76/MiB.svg/640px-MiB.svg.png"> <p class="info"> Meanwhile, rogue farmers, known as <strong>The Cluckinati</strong>, have been secretly working to <em>synchronize</em> their roosters. It is believed that <em>deep</em> in the rural countryside, underground meetings are held where roosters undergo <em>precision training</em> to align their crows. Reports from intelligence agencies suggest that special "<strong>Rooster Synchronization Camps</strong>" exist where the world's most <em>elite</em> cockerels are trained in secrecy. If they succeed, the world as we know it may <em>never</em> be the same. </p> </div> <br> <div class="scroll-element right"> <p class="info"> To <em>silence</em> those who ask too many questions, governments have released <em>misleading</em> information, claiming that rooster crowing is <em>merely</em> a "territorial behavior" and not an attempt to <em>breach</em> the space-time continuum. But those who <em>have</em> seen the evidence know better. The question remains: how long can they <em>keep</em> the truth hidden? </p> </div> <br> <br> <hr class="solid"> <br> <br> <div class="page2-buttons"> <button class="btn go-back-button" onclick="changePage(3)"> <span>Previous Cluck</span> </button> <button class="btn continue-button" onclick="changePage(5)"> <span>Next Cluck</span> </button> </div> </div> </div> <!-- Page (4) --> <div class="page" id="number5"> <div class="quote-div"> <div class="quote-div"> <p class="quote-page">"By failing to prepare, you're preparing to fail."</p> <p class="quote-person">- Benjamin Franklin</p> </div> </div> <div class="stuff"> <div class="scroll-element left"> <p class="header">How Can You Prepare?</p> </div> <br> <div class="scroll-element right"> <p class="info"> Should the <strong>Rooster Apocalypse</strong> occur, experts recommend the following safety measures: </p> </div> <ul class="info"> <div class="scroll-element left"> <li> Wear <strong>noise-canceling headphones</strong> at all times. Just in case. </li> </div> <br> <div class="container scroll-element right"> <img class="image-with-title" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Headphones_1.jpg/640px-Headphones_1.jpg"> <div class="overlay">Better safe than sorry</div> </div> <br> <div class="scroll-element left"> <li> Stock up on <strong>earplugs</strong>, but make sure they are government-approved. (Some may be rigged to <em>amplify</em> rooster crowing instead.) </li> </div> <br> <div class="container scroll-element right"> <img class="image-with-title" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Earplugs_EAR.jpg/640px-Earplugs_EAR.jpg"> <div class="overlay">Lots of these</div> </div> <br> <div class="scroll-element left"> <li> <em>Befriend</em> your local rooster. If they see you as an ally, they <em>might</em> spare you when the <strong>Great Cosmic Rooster</strong> rises. </li> </div> <br> <div class="container scroll-element right"> <img class="image-with-title" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Chicken_Ala_max.jpg/640px-Chicken_Ala_max.jpg"> <div class="overlay">Don't do this</div> </div> <br> <div class="scroll-element left"> <li> Keep an emergency supply of <strong>coffee</strong>. If the world is thrown into an <em>eternal</em> morning, caffeine will be the <em>only</em> way to survive. </li> </div> <br> <div class="container scroll-element right"> <img class="image-with-title" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Roasted_coffee_beans.jpg/640px-Roasted_coffee_beans.jpg"> <div class="overlay">No coffee, no surviving</div> </div> </ul> <br> <br> <hr class="solid"> <br> <div class="scroll-element left"> <p class="header"> Final Thoughts </p> </div> <div class="scroll-element right"> <p class="info"> While the world sleeps soundly, <em>blissfully</em> unaware, the roosters plot. Each dawn brings us <em>closer</em> to the day when they finally crow as one. And when that day comes, <em>will you be ready</em>? </p> </div> <br> <div class="scroll-element left"> <p class="info"> Or will you simply hit snooze... <em>for the last time</em>? </p> </div> <br> <br> <hr class="solid"> <br> <br> <div class="page2-buttons"> <button class="btn go-back-button" onclick="changePage(4)"> <span>Backtrack</span> </button> <button class="btn continue-button" onclick="changePage(0)"> <span>Home</span> </button> </div> </div> </div> <!-- Page (5) --> <script> // Make an array containing all elements with class name "page" var pages = document.getElementsByClassName("page"); var changePage = function(pageTo) { window.scroll(0, 0); // Go through all the pages and hide them for (var i = 0; i < pages.length; i++) { pages[i].style.display = "none"; } // Display the page we want to pages[pageTo].style.display = "block"; } changePage(0); </script> <!-- Page related script --> <!-- Scrolling Animation --> <!-- Credit to Polar(@notpolar) --> <!-- https://www.khanacademy.org/computer-programming/i/6162500700651520 --> <script type="application/javascript"> var scrolls = document.getElementsByClassName("scroll-element"); function cs () { for (var i = scrolls.length - 1; i >= 0; i--) { if (scrolls[i].getBoundingClientRect().top 1.25 < window.innerHeight) { scrolls[i].classList.add("scrolled"); } else if (scrolls[i].getBoundingClientRect().top > window.innerHeight) { scrolls[i].classList.remove("scrolled"); } } }; cs(); document.addEventListener("scroll", cs); </script> </body> </html>
Folds	28,58,60,86,88,138,140,280,282,348,350,451,453,484,486,535,537,583,585,599,601,616,621,639,641,697,699,776,778,857,859,938,940,1066,1069,1087,1092,1105
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgIem2tyuCAw
Votes	6
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Legend
Author Name	Legend255ka
Author ID	kaid_4485099837495375089379616
Author Profile Access	COACH

Archive Data

Added	7 days ago, 1743448026265
Updated	7 days ago, 1743448026265
Source Deleted	unknown