This is a bad story (:
[[Start]]
<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>
{
<head>
<style>
@media screen and (max-width: 800px) {
.next {
position: absolute;
top:100%
bottom: 0;
right:80%;
-ms-transform: translateY(0);
transform: translateY(0);}
.previous {
position: absolute;
top:100%
bottom: 0;
left:80%;
-ms-transform: translateY(0);
transform: translateY(0);}
#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;
}
}
</style>
</head>
<meta name="viewport" content="width=device-width, initial-scale=.6">
<div class='container'>
<img src="https://vertpush.neocities.org/VN/Character/hate1.png" id="ch_left">
<img src="https://vertpush.neocities.org/VN/Character/chet1.png" id="ch_right">
<div class="textContainer">
<div class="name"><img src="https://vertpush.neocities.org/VN/Character/hateico1.png" style="width:50px;">Hate:</div>
(display: "Typewriter")
(set: $typewriterText to " If //this// is your idea of fun, you need some serious life re-evaluating.")
</div>
<div class="topBackground" style="background-image: url('https://vertpush.neocities.org/VN/Bg/bg_2.png')"></div>
<div class='textBubble'>
(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: "Scene 3a")]|passage>[]
(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: "Scene 1")]|passage1>[]
</div>
</div>
</div>}<div class='container'>
<div class='topBackground'></div>
</div>
<div class="centered">
{(set: ?question1 to "
<div class='question'>Do we want choices?</div>")
(click: ?question1)[(goto: "Scene 4")]
|question1>[]}
{(set: ?question2 to "
<div class='question'>Or maybe we don't care about choices?</div>")
(click: ?question2)[(goto: "Scene 5")]
|question2>[]}
</div><div class='container'>
<div class='topBackground'></div>
Howdy doody scene 4
</div>
<script>
$('.topBackground').css('background','yellow');
</script><div class='container'>
<img src="https://vertpush.neocities.org/VN/Character/hate1.png" id="ch_left">
<img src="https://vertpush.neocities.org/VN/Character/chet4.png" id="ch_right">
<div class="textContainer"><div class="centered1">
</div></div>
(set: ?passage to"<div class='textBubble'><div class='next'></div></div>")
(click: ?passage)[(goto: "Scene 5a")]|passage>[]
</div>{
(print: "<script>$('html').removeClass(\)</script>")
(if: (passage:)'s tags's length > 0)[
(print: "<script>$('html').addClass('" + (passage:)'s tags.join(' ') + "'\)</script>")
]
}<div class='container'>
<img src="https://vertpush.neocities.org/VN/Character/hate2.png" id="ch_left">
<img src="https://vertpush.neocities.org/VN/Character/chet1.png" id="ch_right">
<div class="textContainer"><div class="centered1">Hate: sjdgfahsgdfa</div></div>
(set: ?passage to"<div class='textBubble'><div class='next'></div></div>")
(click: ?passage)[(goto: "Scene 4a")]|passage>[]
</div>
:: StoryTitle
Typewriter Effect in Harlowe
:: Start
<!-- Set the text to show -->
(set: $typewriterText to "Hello, world!")
:: Typewriter
{
<!-- Create a variable to track the position within the $typewriterText string -->
(set: $typewriterPos to 1)
<!-- Create a hook to hold the typed text -->
|typewriterOutput>[]
<!-- Set a delay of 20ms seconds per loop -->
(live: 20ms)[
<!-- Add the next character to the hook -->
(append: ?typewriterOutput)[(print: $typewriterText's $typewriterPos)]
<!-- Update the position -->
(set: $typewriterPos to it + 1)
<!-- If it's gone past the end, stop -->
(if: $typewriterPos is $typewriterText's length + 1)[
(stop:)
]
]
}<div class='container'>
<img src="https://vertpush.neocities.org/VN/Character/hate5.png" id="ch_left">
<img src="https://vertpush.neocities.org/VN/Character/chet3.png" id="ch_right">
<div class="textContainer">
(display: "Typewriter")
</div>
(set: ?passage to"<div class='textBubble'><div class='next'></div></div>")
(click: ?passage)[(goto: "Scene 5a")]|passage>[]
(set: $typewriterText to "Hate: If //this// is your idea of fun, you need some serious life re-evaluating.")
</div>{
<!-- Create a variable to track the position within the $typewriterText string -->
(set: $typewriterPos to 1)
<!-- Create a hook to hold the typed text -->
|typewriterOutput>[]
<!-- Set a delay of 20ms seconds per loop -->
(live: 1ms)[
<!-- Add the next character to the hook -->
(append: ?typewriterOutput)[(print: $typewriterText's $typewriterPos)]
<!-- Update the position -->
(set: $typewriterPos to it + 1)
<!-- If it's gone past the end, stop -->
(if: $typewriterPos is $typewriterText's length + 1)[
(stop:)
]
]
}
{<!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: 75%;
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: #73a7de;
text-align: center;
margin-top: 0;
}
h5 {text-align:center;}
a { color: #73a7de; text-decoration: none; transition: 2s;}
a:hover { color: #ae87de; scale: 1.5; transition: 1s;}
/* 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:-15px;
}
/* Right column */
.rightcolumn {
float: left;
width: 25%;
background-color: transparent;
margin-top:-15px;
margin-left:-3px;
}
/* Fake image */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Add a card effect for articles */
.card {
background-color: white;
padding: 20px;
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: #ddd;
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;}
.margin { margin: auto; }
/* 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;}
tw-story { width:100%; font-size: 1.5em;}
}
.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: "Scene 1")]|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">
<img src="https://vertpush.neocities.org/VN/ata.png" style="width: 165px; border-radius: 20px; text-align: center;">
<p>I'm ohmi! A nb anthro-enthusiast who likes to draw furry friends and write.</p>
</div>
<div class="card">
<h2>Links</h2>
<a href="https://twitter.com/home">Twitter @ohmiyoni</a><br>
<a href="https://vertpush.neocities.org/">Neocities</a><br>
<a href="https://www.ohmiyoni.com/">ohmiyoni.com</a><br>
</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: 180px;"> <h3> Chet Farron </h3> <p>Tall, friendly blue idiot. Wicked quick reflexes and heals suspiciously quickly. 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: 180px;"> <h3> Hate Farron </h3> <p>!Unfriendly! Tiny "big sister" to Chet. Suspiciously strong. Has a real name, height, and weight; refuses to tell anyone. <b>Don't ask!!</b> Likely has her own agenda.</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: 180px;"> <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: 180px;"> <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: 180px;"> <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: 180px;"> <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: 180px;"><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>
<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>}