DivinePulse

<html> <meta name="viewport" content="width=800px;initial-scale:1;"> <head> <style> * { box-sizing: border-box; } tw-story { padding: 0; background-color: white; margin: auto; height: 100%; max-width: 900px; min-width: 0vw; margin: auto; padding: 0; border-left:2px solid rgba(18, 37, 84, 1); border-right:2px solid rgba(18, 37, 84, 1); -webkit-filter: drop-shadow(0 0 5px black); filter: drop-shadow(0 0 5px black); line-height: 1em; font-size: 1.2em; overflow:hidden; } body { font-family: Arial; background: #f1f1f1; margin: 0; padding: 0; min-width:900px; background-color: transparent; background-attachment:fixed; position: fixed; } .bg { top: -15%; left: -20%; width: 200vw; height: 200vh; background-color: white; position: fixed; overflow: hidden; } #container { text-align: center; } </style> </head> <body> <div id="container"> Chapter One. <button onclick="document.getElementById('bflat').play()">PLAY</button>[[Start]] </div> <div id="preload"> <img src="https://vertpush.neocities.org/VN/Character/chetico1.png"> <img src="https://vertpush.neocities.org/VN/Character/chet1.png"> <img src="https://vertpush.neocities.org/VN/Character/chet2.png"> <img src="https://vertpush.neocities.org/VN/Character/chet3.png"> <img src="https://vertpush.neocities.org/VN/Character/chet4.png"> <img src="https://vertpush.neocities.org/VN/Character/hateico1.png"> <img src="https://vertpush.neocities.org/VN/Character/hate1.png"> <img src="https://vertpush.neocities.org/VN/Character/hate2.png"> <img src="https://vertpush.neocities.org/VN/Character/hate3.png"> <img src="https://vertpush.neocities.org/VN/Character/hate4.png"> <img src="https://vertpush.neocities.org/VN/Character/hate5.png"> </div> </body> </html>

{ <meta name="viewport" content="width=device-width, initial-scale=.6"> <div class='container'> <div class="ch_right"><img src="https://vertpush.neocities.org/VN/Character/chet2.png"></div> <div class='ch_left'><img src="https://vertpush.neocities.org/VN/Character/hate4.png"></div> <div class="textContainer"> <table> <tr> <td><img src="https://vertpush.neocities.org/VN/Character/chetico1.png" style="width:50px;"></td> <td>{(live:2s)[<div class="css-typing">"...aaaate... Haaaate... <b>HAAAATE!!</b>"</div>(stop:)]} </td> </tr> <tr> <td><img src="https://vertpush.neocities.org/VN/Character/hateico1.png" style="width:50px;"></td> <td>{(live:5s)[<div class="css-typing">"... Hnnngghhhrff..."</div>(stop:)]} </td> </tr> </table> </div> <div class="topBackground" style="background-image: url('https://vertpush.neocities.org/VN/Bg/bg_2.png')"></div> <div class='textBubble'> (set: ?passage1 to"<div class='textButton' style='left:0px;'><div class='previous'><img src='https://vertpush.neocities.org/VN/Buttons/previous.png' style='width:100%;'></div></div>") (click: ?passage1)[(goto: "Scene3")]|passage1>[] (set: ?passage to"<div class='textButton' style='right:0px;'><div class='next'><img src='https://vertpush.neocities.org/VN/Buttons/next.png' style='width:100%;z-index:5;' id='link'></div></div>") (click: ?passage)[(goto: "Scene5")]|passage>[] </div> </div> </div>}

{ (print: "<script>$('html').removeClass(\)</script>") (if: (passage:)'s tags's length > 0)[ (print: "<script>$('html').addClass('" + (passage:)'s tags.join(' ') + "'\)</script>") ] }

{<!DOCTYPE html> <html> <meta name="viewport" content="width=800px;initial-scale:1;"> <head> <style> * { box-sizing: border-box; } tw-story { padding: 0; background-color: white; margin: auto; max-width: 900px; min-width: 0vw; margin: auto; padding: 0; border-left:2px solid rgba(18, 37, 84, 1); border-right:2px solid rgba(18, 37, 84, 1); -webkit-filter: drop-shadow(0 0 5px black); filter: drop-shadow(0 0 5px black); background-image: url("https://vertpush.neocities.org/VN/Bg/bg_2.png"); background-size: cover; background-attachment: fixed; line-height: 1em; font-size: 1.2em; } body { font-family: Arial; background: #f1f1f1; margin: 0; padding: 0; min-width:900px; background-color: transparent; background-attachment:fixed; } .bg { top: -15%; left: -20%; width: 200vw; height: 200vh; background-color: white; position: fixed; overflow: hidden; } #container { } /* Header/Blog Title */ .header { width: 100%; } h1 {color: red; text-align: center;} h2 { font-size: 25px; color: #004C41; text-align: center; margin-top: 0; padding-bottom: 0; } h5 {text-align:center;} a { color: white; text-decoration: none; transition: 2s; font-size: 15px;text-transform:uppercase;} a:hover { color: #00F4C6; transition: .32s;} p {padding: 20px;} /* Style the top navigation bar */ .topnav { width:100%; text-align: center; background-color: transparent; margin-top: -23%; } /* Style the topnav links */ .topnav a { float:center; text-align: center; text-decoration: none; } /* Create two unequal columns that floats next to each other */ /* Left column */ .leftcolumn { float: left; width: 75%; margin-top:-5px; } /* Right column */ .rightcolumn { float: left; width: 25%; background-color: transparent; margin-top:-5px; margin-left:-3px; } /* Fake image */ .fakeimg { background-color: #aaa; width: 100%; padding: 20px; } /* Add a card effect for articles */ .card { background-color: white; padding-top: 3px; padding-left: 3px; padding-right: 3px; border-radius: 20px; border: 2px solid rgba(18, 37, 84, 1); margin:5px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Footer */ .footer { padding: 20px; text-align: center; background: transparent; margin-top: 20px; } #link {width: 100%; transition: .2s; image-rendering: -moz-crisp-edges; /* Firefox */ image-rendering: -o-crisp-edges; /* Opera */ image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */ image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */} #link:hover { scale: 1.5; -webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 1)); filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 1)); transform: translate(-2px, -2px); transition: .2s; } button {width: 25%; transition: 1s;padding: 0; border: none; background: none;z-index:2; cursor: pointer;} .margin { margin: auto; } .ata {width:100%;} /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 800px) { .leftcolumn, .rightcolumn { width: 100%; padding: 0; } .rightcolumn { margin-top:0;} .ata {width:30%; float: left;} tw-story { width:100%; font-size: 15px;} } .tabcontent { transition: 2s; } .tabcontent.on { -webkit-animation: fadein 0.6s 1 linear alternate; -moz-animation: fadein 0.6s 1 linear alternate; -ms-animation: fadein 0.6s 1 linear alternate; -o-animation: fadein 0.6s 1 linear alternate; animation: fadein 0.6s 1 linear alternate; } @keyframes fadein { 0% { opacity: 0%; transform: translate(-7px); } 30% { opacity: 0%; transform: translate(-7px); } 100% { opacity: 100%; transform: translate(0px); } } .trigger { transition: 2s;} </style> </head> <body> <div id="container"> {<div class="header"><img src="https://vertpush.neocities.org/VN/Banner1v3.png" style="width:100%; image-rendering: crisp-edges;"> </div>} <div class="topnav"> <button class="tablinks trigger" onclick="openTab(event, 'About')" id="defaultOpen"><img src="https://vertpush.neocities.org/VN/Buttons/about.png" id="link"></button> (set: ?passage to"<button><img src='https://vertpush.neocities.org/VN/Buttons/read.png' id='link'></button>")(click: ?passage)[(goto: "Navigate")]|passage>[] <button class="tablinks active trigger" onclick="openTab(event, 'Charas')" id="defaultOpen"><img src="https://vertpush.neocities.org/VN/Buttons/charas%20.png" id="link"></button> <button class="tablinks active trigger" onclick="openTab(event, 'World')" id="defaultOpen"><img src="https://vertpush.neocities.org/VN/Buttons/world%20.png" id="link"></button> </div> <div id="About" class="tabcontent" style="display: none;"> <div class="row"> <div class="leftcolumn"> <div class="card"> <img src="https://vertpush.neocities.org/VN/Welcome2.png" style="width: 100%; border-radius: 20px;"></div> <div class="card"> <img src="https://vertpush.neocities.org/VN/update.png" style="width: 100%; border-radius: 20px;"> <h5>Added Characters & World Info 6.16.21</h5> <p>Hey hey! Finally have it so all the tabs on the main page work. Now to start the story and making sure that works on every platform =w= Do you think I should make music, too? We'll see! - ohmi</p> </div> <div class="card"> <img src="https://vertpush.neocities.org/VN/update.png" style="width: 100%; border-radius: 20px;"> <h5>Still Working 6.10.21</h5> <p>Just adding some graphics to this "main page" before writing the actual story and getting that VN process a little more... accessible. Having fun with it, & not worrying too much about perfection or anything =w= just looking to make something!! - ohmi</p> </div> </div> <div class="rightcolumn"> {<div class="card" style="background: rgba(196, 253, 248, 0.28);"> <iframe src="https://www6.cbox.ws/box/?boxid=847355&boxtag=z734Lj" width="100%" height="450" allowtransparency="yes" allow="autoplay" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"></iframe></div>} { <div class="card" style="text-align: center;"> <div class="ata"><img src="https://vertpush.neocities.org/VN/atasm.png" style="width:100%; border-radius: 20px;"></div> <p>I'm ohmi! A nb anthro-enthusiast who likes to draw and write.</p> </div>} </div> </div> </div> <div id="Charas" class="tabcontent" style="display: none;"> <div class="row"> <div class="card" style="background-color:transparent; border:none;"><h2></h2></div> <div class="card"> <img src="https://vertpush.neocities.org/VN/Character/chet1.png" style="height:250px; position: absolute; left:0;bottom:0;"><div style="margin-left: 200px;"> <h3> Chet Farron </h3> <p>He's too tall!! Friendly blue idiot. Wicked quick reflexes and heals suspiciously fast. Looks about 23. Does he know more than he lets on? Probably not.</p></div> </div> <div class="card" style="background-color:transparent; border:none;"><h2></h2></div> <div class="card"> <img src="https://vertpush.neocities.org/VN/Character/hate1.png" style="width:180px; position: absolute; left:0;bottom:0;"><div style="margin-left: 200px;"> <h3> Hate Farron </h3> <p>!Unfriendly! Tiny "big sister" to Chet. Suspiciously strong. Has a real name, age height, and weight; refuses to tell anyone. <b>Don't ask!!</b></p><br></div> </div> <div class="card" style="background-color:transparent; border:none;"><h2></h2></div> <div class="card"> <img src="https://vertpush.neocities.org/VN/Character/athena1.png" style="height:250px; position: absolute; left:0;bottom:0;"><div style="margin-left: 200px;"> <h3> Athena </h3> <p>How does someone this lazy make it this far? Likely depending on the kindness of others. In return makes snarky jokes. How frustrating!</p><br><br></div> </div> <div class="card" style="background-color:transparent; border:none;"><h2></h2></div> <div class="card"> <img src="https://vertpush.neocities.org/VN/Character/kit1.png" style="height:250px; position: absolute; left:0;bottom:0;"><div style="margin-left: 200px;"> <h3> Kit </h3> <p>Huh? A rabbit? She's a mysterious master chef and likes to let Athena try her food. Don't feed that leech, Kit!! You're too good for this world.</p><br><br></div> </div> <div class="card" style="background-color:transparent; border:none;"><h2></h2></div> <div class="card"> <img src="https://vertpush.neocities.org/VN/Character/taw1.png" style="height:250px; position: absolute; left:0;bottom:0;"><div style="margin-left: 200px;"> <h3> Taw </h3> <p>Wild aeronaut with too much energy! She's a whirlwind! Beware of her antics, you <i>will</i> get swept up!</p><br><br></div> </div> <div class="card" style="background-color:transparent; border:none;"><h2></h2></div> <div class="card"> <img src="https://vertpush.neocities.org/VN/Character/dyne1.png" style="height:250px; position: absolute; left:0;bottom:0;"><div style="margin-left: 200px;"> <h3> Dyne </h3> <p>Timid and fluffy girl wrapped up in Taw's passion for everything. Does... she need help?</p><br></div> </div> <div class="card" style="background-color:transparent; border:none;"><h2></h2></div> <div class="card"> <div style="margin-left: 200px;"><h3> ??? </h3> <p>There are many friends not here yet. And many enemies as well...</p></div> </div> </div> </div> <div id="World" class="tabcontent" style="display: none;"> <div class="row"> <div class="card"> <h3>Welcome to The World!</h3> <p> It doesn't have a name yet, but I can tell you some things about it.</p> </div> <div class="card"><h1>Event!</h1><p>Recently there have been reports of Royal Blooded citizens going missing. Keep on the lookout for suspicious individuals, and keep tabs on your Royal Blooded patrons.</p></div> <div class="card"> <h3>Royal Blooded</h3> <p> Long ago, gods descended from the heavens and roamed the surface world. Some took positions of power and ruled peacefully, some waged war, some acquired fortunes, and some wandered the planet experiencing simple lives. As the gods grew old in their mortal forms, they bred with mortals to carry on the lineage and seek glory in that god's name. A single godlike ability would pass on to the child of a god, and they were called <b>Royal Blooded.</b></p> <p>Because of their inherant abilities, Royal Blooded offspring more often than not find their way into positions of power. Whether they use that power for good or evil... is up to the individual.</p> <p><b>Royal Breeding:</b> Only one child born of a Royal Blooded parent may carry on an ability. This may be a direct descendant, being the very same ability of the parent, or some sort of deviation or mutation of the parent ability.<br><br>There is only one possibility for a child to carry two abilities at once: If two Royal Blooded parents breed. The drawback to a child born with two abilities is that they will be barren, and not produce offspring themselves. However, this is incredibly unlikely, because those with Royal Blood instinctively wish to overcome eachother.</p> </div> <div class="card"> <h3>Map</h3> <p> Someday there will be a map! </p> </div> <div class="card"> <h3>History</h3> <p> There is important history, entire kindoms built and razed in the name of gods, at the hands of rulers with incredible abilities. Someday, it will be more relevant than now! ;) </p> </div> </div> </div> <div class="footer"> <center> <a href="https://twitter.com/home">Twitter</a> | <a href="https://vertpush.neocities.org/">Neocities</a> | <a href="https://www.ohmiyoni.com/">ohmiyoni.com</a> </center> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> $('.trigger').click(function () { $('.tabcontent').addClass('on'); $('.tabcontent').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(event) { $('.tabcontent').removeClass('on') }); }); </script> <script> function openTab(evt, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(tabName).style.display = "block"; evt.currentTarget.className += " active"; } document.getElementById("defaultOpen").click(); </script> </body> </html>}

{ <head> <style> .bg { width: 200%; height: 200%; background-color: black; position: fixed; top:-100%; left:-100%; z-index:-100; overflow: hidden; } </style> </head> <meta name="viewport" content="width=device-width, initial-scale=.6"> <div class='container'> <img src="" id="ch_left"> <img src="" id="ch_right"> <div class="textContainer"> <table> <tr> <td><b>???:</b></td> <td>{(live:250ms)[<div class="css-typing">"..."</div>(stop:)]} </td> </tr> </table> </div> <div class="topBackground" style="background-color: black;"></div> <div class='textBubble'> (set: ?passage1 to"<div class='textButton' style='left:0px;'><div class='previous'><img src='https://vertpush.neocities.org/VN/Buttons/previous.png' style='width:100%;'></div></div>") (click: ?passage1)[(goto: "Navigate")]|passage1>[] (set: ?passage to"<div class='textButton' style='right:0px;'><div class='next'><img src='https://vertpush.neocities.org/VN/Buttons/next.png' style='width:100%;z-index:5;' id='link'></div></div>") (click: ?passage)[(goto: "Scene1")]|passage>[] </div> </div> <div class="bg"></div> </div>}

{ <head> <style> .bg { width: 200%; height: 200%; background-color: black; position: fixed; top:-100%; left:-100%; z-index:-100; overflow: hidden; } </style> </head> <meta name="viewport" content="width=device-width, initial-scale=.6"> <div class='container'> <img src="" id="ch_left"> <img src="" id="ch_right"> <div class="textContainer"> <table> <tr> <td><b>???:</b></td> <td>{(live:250ms)[<div class="css-typing">".......?"</div>(stop:)]} </td> </tr> </table> </div> <div class="topBackground" style="background-color: black;"></div> <div class='textBubble'> (set: ?passage1 to"<div class='textButton' style='left:0px;'><div class='previous'><img src='https://vertpush.neocities.org/VN/Buttons/previous.png' style='width:100%;'></div></div>") (click: ?passage1)[(goto: "Start")]|passage1>[] (set: ?passage to"<div class='textButton' style='right:0px;'><div class='next'><img src='https://vertpush.neocities.org/VN/Buttons/next.png' style='width:100%;z-index:5;' id='link'></div></div>") (click: ?passage)[(goto: "Scene2")]|passage>[] </div> </div> <div class="bg"></div> </div>}

{ <head> <style> .bg { width: 200%; height: 200%; background-color: black; position: fixed; top:-100%; left:-100%; z-index:-100; overflow: hidden; } </style> </head> <meta name="viewport" content="width=device-width, initial-scale=.6"> <div class='container'> <img src="" id="ch_left"> <img src="" id="ch_right"> <div class="textContainer"> <table> <tr> <td><b>???:</b></td> <td>{(live:250ms)[<div class="css-typing">"... It looks like you're stuck here again."</div>(stop:)]} </td> </tr> </table> </div> <div class="topBackground" style="background-color: black;"></div> <div class='textBubble'> (set: ?passage1 to"<div class='textButton' style='left:0px;'><div class='previous'><img src='https://vertpush.neocities.org/VN/Buttons/previous.png' style='width:100%;'></div></div>") (click: ?passage1)[(goto: "Scene1")]|passage1>[] (set: ?passage to"<div class='textButton' style='right:0px;'><div class='next'><img src='https://vertpush.neocities.org/VN/Buttons/next.png' style='width:100%;z-index:5;' id='link'></div></div>") (click: ?passage)[(goto: "Scene3")]|passage>[] </div> </div> <div class="bg"></div> </div>}

{ <head> <style> @media screen and (max-width: 800px) { .next { position: absolute; top: 50%; right: 0px; -ms-transform: translateY(-50%); transform: translateY(-50%);} .previous { position: absolute; top: 50%; left: 0px; -ms-transform: translateY(-50%); transform: translateY(-50%);} #ch_left { position:absolute; bottom:30%; left:20%; -webkit-transform: scaleX(-1); transform: scaleX(-1); } #ch_right { position:absolute; bottom:30%; right:20%; } .textContainer { width: 650px; height: 30%; position: fixed; bottom: 0px; pointer-events: none; border-radius: 8px; z-index: 2; line-height: normal; left: 240px; vertical-align: top; padding: 15px; margin: auto; } .container { width:700px; } } .bg { width: 200%; height: 200%; background-color: black; position: fixed; top:-100%; left:-100%; z-index:-100; overflow: hidden; } </style> </head> <meta name="viewport" content="width=device-width, initial-scale=.6"> <div class='container'> <img src="" id="ch_left"> <img src="" id="ch_right"> <div class="textContainer"> <table> <tr> <td><b>???:</b></td> <td>{(live:250ms)[<div class="css-typing">"You know, eventually you won't be able to leave here by yourself." </div> (stop:)]} </td> </tr> </table> </div> <div class="topBackground" style="background-color: black;"></div> <div class='textBubble'> (set: ?passage1 to"<div class='textButton' style='left:0px;'><div class='previous'><img src='https://vertpush.neocities.org/VN/Buttons/previous.png' style='width:100%;'></div></div>") (click: ?passage1)[(goto: "Scene2")]|passage1>[] (set: ?passage to"<div class='textButton' style='right:0px;'><div class='next'><img src='https://vertpush.neocities.org/VN/Buttons/next.png' style='width:100%;z-index:5;' id='link'></div></div>") (click: ?passage)[(goto: "Scene4")]|passage>[] </div> </div> <div class="bg"></div> </div>}

{ <meta name="viewport" content="width=device-width, initial-scale=.6"> <div class='container'> <div class="ch_right"><img src="https://vertpush.neocities.org/VN/Character/chet8.png"></div> <div class='ch_left'><img src="https://vertpush.neocities.org/VN/Character/hate1.png"></div> <div class="textContainer"> <table> <tr> <td><img src="https://vertpush.neocities.org/VN/Character/chetico1.png" style="width:50px;"></td> <td>{(live:1s)[<div class="css-typing">"Oh good! You're awake! You nearly punched a hole in me."</div>(stop:)]} </td> </tr> <tr> <td><img src="https://vertpush.neocities.org/VN/Character/hateico1.png" style="width:50px;"></td> <td>{(live:3s)[<div class="css-typing">"<i>Urgh</i>... Yeah, yeah. How long was I asleep?"</div>(stop:)]} </td> </tr> <tr> <td><img src="https://vertpush.neocities.org/VN/Character/chetico1.png" style="width:50px;"></td> <td>{(live:6s)[<div class="css-typing">"About a week or so!"</div>(stop:)]} </td> </tr> </table> </div> <div class="topBackground" style="background-image: url('https://vertpush.neocities.org/VN/Bg/bg_2.png')"></div> <div class='textBubble'> (set: ?passage1 to"<div class='textButton' style='left:0px;'><div class='previous'><img src='https://vertpush.neocities.org/VN/Buttons/previous.png' style='width:100%;'></div></div>") (click: ?passage1)[(goto: "Scene4")]|passage1>[] (set: ?passage to"<div class='textButton' style='right:0px;'><div class='next'><img src='https://vertpush.neocities.org/VN/Buttons/next.png' style='width:100%;z-index:5;' id='link'></div></div>") (click: ?passage)[(goto: "Scene6")]|passage>[] </div> </div> </div>}

{ <meta name="viewport" content="width=device-width, initial-scale=.6"> <div class='container'> <div class="ch_right"><img src="https://vertpush.neocities.org/VN/Character/chet7.png"></div> <div class='ch_left'><img src="https://vertpush.neocities.org/VN/Character/hate9.png"></div> <div class="textContainer"> <table> <tr> <td><img src="https://vertpush.neocities.org/VN/Character/hateico1.png" style="width:50px;"></td> <td>{(live:1s)[<div class="css-typing">"Well <i>Gods</i> why didn't you wake me up sooner?</div>(stop:)]} {(live:3s)[<div class="css-typing">We only have a small window to catch the emperor on his trip through Maldere!"</div>(stop:)]} </td> </tr> <tr> <td><img src="https://vertpush.neocities.org/VN/Character/chetico1.png" style="width:50px;"></td> <td>{(live:6s)[<div class="css-typing">"I, ermm, figured it'd be best for you to get some sleep. You've been a bit... tired lately."</div>(stop:)]} </td> </tr> </table> </div> <div class="topBackground" style="background-image: url('https://vertpush.neocities.org/VN/Bg/bg_2.png')"></div> <div class='textBubble'> (set: ?passage1 to"<div class='textButton' style='left:0px;'><div class='previous'><img src='https://vertpush.neocities.org/VN/Buttons/previous.png' style='width:100%;'></div></div>") (click: ?passage1)[(goto: "Scene5")]|passage1>[] (set: ?passage to"<div class='textButton' style='right:0px;'><div class='next'><img src='https://vertpush.neocities.org/VN/Buttons/next.png' style='width:100%;z-index:5;' id='link'></div></div>") (click: ?passage)[(goto: "Scene7")]|passage>[] </div> </div> </div>}

{  (set: $typewriterPos to 1)  |typewriterOutput>[]  (live: 1ms)[  (append: ?typewriterOutput)[(print: $typewriterText's $typewriterPos)]  (set: $typewriterPos to it + 1)  (if: $typewriterPos is $typewriterText's length + 1)[ (stop:) ] ] }

{ <meta name="viewport" content="width=device-width, initial-scale=.6"> <div class='container'> <div class="ch_right"><img src="https://vertpush.neocities.org/VN/Character/chet5.png"></div> <div class='ch_left'><img src="https://vertpush.neocities.org/VN/Character/hate6.png"></div> <div class="textContainer"> <table> <tr> <td><img src="https://vertpush.neocities.org/VN/Character/hateico1.png" style="width:50px;"></td> <td>{(live:1s)[<div class="css-typing">"That's... not important right now. In what direction is the city from here?</div>(stop:)]} </td> <tr><td></td> <td> {(live:3s)[<div class="css-typing"><i>Chet vanishes for a moment, as the tree above rustles. Chet reappears, covered in twigs.</i></div>(stop:)]} </td></tr> </tr> <tr> <td><img src="https://vertpush.neocities.org/VN/Character/chetico1.png" style="width:50px;"></td> <td>{(live:6s)[<div class="css-typing">"Hard to say. There's a path that goes west-ish.</div>(stop:)]} {(live:8.5s)[<div class="css-typing">There might be a village we could ask for directions."</div>(stop:)]} </td> </tr> </table> </div> <div class="topBackground" style="background-image: url('https://vertpush.neocities.org/VN/Bg/bg_2.png')"></div> <div class='textBubble'> (set: ?passage1 to"<div class='textButton' style='left:0px;'><div class='previous'><img src='https://vertpush.neocities.org/VN/Buttons/previous.png' style='width:100%;'></div></div>") (click: ?passage1)[(goto: "Scene6")]|passage1>[] (set: ?passage to"<div class='textButton' style='right:0px;'><div class='next'><img src='https://vertpush.neocities.org/VN/Buttons/next.png' style='width:100%;z-index:5;' id='link'></div></div>") (click: ?passage)[(goto: "Scene8")]|passage>[] </div> </div> </div>}

So I don't forget: <div class='ch2_right rin'><img src='https://vertpush.neocities.org/VN/Character/athena1.png'></div> <div class='ch2_left lin'><img src="https://vertpush.neocities.org/VN/Character/kit1.png" style="transform: scaleX(-1);"></div> <div class='ch2_rightout rout'><img src='https://vertpush.neocities.org/VN/Character/athena1.png'></div> <div class='ch2_leftout lout'><img src="https://vertpush.neocities.org/VN/Character/kit1.png" style="transform: scaleX(-1);"></div>