<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, intial-scale=1.0"><title>Adventure Game</title></head><body><div class="hero-image"><div class="grid"><!--<div class="butterfly"><img class="bf" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red-b.png" alt="<span class=LOSS><b><u>LOSS</u></b><br></span><br><br><p class=grow>Random Line of text this is where the fortune prediction will go.</p>" width="170px;"></div>--><div class="title">DARK: The Forest<div class="under">Playing <mark style="background-color:#E48A32;">ORANGE</mark></div></div><div class="text"><span class="first-letter">Y</span>ou run through the forest panicked. As you run, you can hear the sounds of a monstrous voice behind you, getting closer and closer by the second. You keep sprinting until you accidentally trip and fall down a steep slope. You wince as you get up, noticing that your surroundings have become strangely silent. You look around, still alert of your surroundings. In front of you are two trails, one leads right and the other left, before you have to chance to process why it is so silent, you can hear a voice cry out from the left trail. It almost sounds like <mark style="background-color:#336B90; color: white;">BLUE</mark>.</div></div>(if: $redleave is true)[<button class="custom-btn btn1-8"><span><p> [[Go left]]</p></span></button><button class="custom-btn btn2-8"><span><p>[[Go right]] </p></span></button>](else: )[<button class="custom-btn btn1-8"><span><p> [[Head left]]</p></span></button><button class="custom-btn btn2-8"><span><p>[[Head right]] </p></span></button>]<div class="sidebar"><div id="myModal" class="modal"><span class="close">×</span><img class="modal-content" id="img01"><div id="caption"></div></div><div class="section1"><img class="red" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Skull Crushed"></div><div class="section2"><img class="orange" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/orange.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Neck Snapped, Slammed"></div><div class="section3"><img class="yellow" id="myImg"src="https://martinez925.neocities.org/adventure_game/intro_outro/yellow.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Drowned"></div><div class="section4"><img class="green" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/green.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Suffocation"></div><div class="section5"> <img class="blue" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/blue.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Impaled"></div><div class="section6"><img class="purple" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/purple.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Poisoned, Decapitated"></div><hr><div class="section7"> <img class="hollow" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Hollowgast.png" alt="<br><b><u>Hollowgast</u></b><br>A chaotic tentacle-mouthed creature spawned from a failed experiment to grant itself immortality. Hollowgasts, (typically referred to as 'Hollows'), create auditory hallucinations to trick their prey and use the strength of their tongues to immobilize them."></div><div class="section8"> <img class="vampire" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Vampire.jpg" alt="<br><b><u>Vampire</u></b><br>An agile vampiric-winged creature succumed to infection by a parasite. These bat-like vampires are blind, using echolocation by making clicking sounds with their gills to hunt and navigate, which allows them to move in complete darkness."></div><div class="section9"> <img class="wendigo" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Wendigo.png" alt="<br><b><u>Wendigo</u></b><br>A violent cannibalistic-mutated creature possessed by the spirit of the Wendigo. Wendigos see movement: mobile persons are highlighted in their vision, otherwise they are usually unable to track those who remain still. Their skin is stretched taut against its body, making it immune to ballistics and sharp weapons."></div></div></div> </div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&display=swap');
body {
font-family: 'Annie Use Your Telescope', cursive;
margin-left: -384px;
margin-top: -57px;
backgound-color: black;
}
.grid {
display: grid;
grid-template-columns:auto auto auto auto auto auto auto auto auto; repeat(6, 1fr);
grid-template-rows:repeat(6, 1/2fr);
grid-gap:35px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.sidebar {
grid-column:1;
grid-row:1/7;
width: 100px;
position: fixed;
height: 100%;
background-color: #111;
top: 0;
left: 0;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.title {
grid-column:2/5;
grid-row:1;
text-align: left;
margin-top: -15px;
margin-left: 100px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 80px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
line-height: 1.7;
}
.butterfly {
grid-column:7;
grid-row:1;
margin-top: 10px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
overflow: hidden;
}
span.FORTUNE {
font-size: 30px;
color: white;
}
span.GUIDANCE {
font-size: 30px;
color: yellow;
}
span.DANGER {
font-size: 30px;
color: red;
}
span.LOSS {
font-size: 33px;
color: #183699;
}
.bf/*, .ob, .yb, .gb, .bb, .pb*/ {
transition: transform .2s;
}
.bf:hover {
transform: scale(1.1);
}
p.grow {
margin-top: 15px;
}
.under {
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 28px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text {
grid-column:2/8;
grid-row:3;
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 20px;
margin-left: 100px;
margin-top: -40px;
color:white;
line-height: 1.8;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text::first-letter {
color: #E48A32;
padding: 0 .3rem;
margin: 0 .3rem 0 0;
border: 2px solid;
border-radius: 8px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 4rem;
float: left;
line-height: 1;
}
tw-link {
color: white;
font-size: 20px;
}
.btn1-8 {
grid-column:3;
grid-row:4;
font-family: 'Annie Use Your Telescope', cursive;
text-align: center;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.btn2-8 {
grid-column:6;
grid-row:4;
color: white;
font-family: 'Annie Use Your Telescope', cursive;
margin-left: 200px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.custom-btn {
width: 160px;
height: 60px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
font-family: 'Annie Use Your Telescope', cursive;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
border-color: white;
/*box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);*/
outline: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 400px;
margin-top: 20px;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://martinez925.neocities.org/adventure_game/intro_outro/night.jpg");
height: 100%;
width: 100%;
position: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* 8 */
.btn1-8, .btn2-8 {
/*background-color: #f0ecfc;
background-image: linear-gradient(315deg, white 0%, white 74%);*/
line-height: 42px;
padding: 0;
border: none;
}
.btn1-8 span, .btn2-8 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.btn1-8:before, .btn2-8:before,
.btn1-8:after, .btn2-8:after {
position: absolute;
content: "";
right: 0;
bottom: 0;
background: white;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8:before, .btn2-8:before{
height: 0%;
width: 2px;
}
.btn1-8:after, .btn2-8:after {
width: 0%;
height: 2px;
}
.btn1-8:hover:before, .btn2-8:hover:before {
height: 100%;
}
.btn1-8:hover:after, .btn2-8:hover:after {
width: 100%;
}
.btn1-8:hover, .btn2-8:hover{
background: transparent;
}
.btn1-8 span:hover, .btn2-8 span:hover{
color: lightgray;
}
.btn1-8 span:before, .btn2-8 span:before,
.btn1-8 span:after, .btn2-8 span:after {
position: absolute;
content: "";
left: 0;
top: 0;
background: #749dcf;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8 span:before, .btn2-8 span:before {
width: 2px;
height: 0%;
}
.btn1-8 span:after, .btn2-8 span:after{
height: 2px;
width: 0%;
}
.btn1-8 span:hover:before, .btn2-8 span:hover:before {
height: 100%;
}
.btn1-8 span:hover:after, .btn2-8 span:hover:after {
width: 100%;
}
p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*.choice1:hover, .choice2:hover {
background-color: #3e8e41;
color: white;
}
.crescent {
text-align: center;
transition: transform .2s;
}
.moon {
vertical-align: middle;
width:55px;
height: 55px;
margin-bottom: 10px;
}*/
.section1 {
text-align: center;
transition: transform .2s;
border-radius: 30px;
margin-left: 15px;
margin-right: 15px;
}
.red {
border: 3px solid #DD4571;
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
margin-top: 20px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section2 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
margin-left: 15px;
margin-right: 16px;
}
.orange {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
border: 3px solid #E48A32;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section3 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.yellow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border: 3px solid #FBE280;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section4 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.green {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #5BBC96;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section5 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.blue {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #336B90;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section6 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.purple {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #CA86F3;
padding: 3px;
margin-bottom: 7px;
animation: fadeIn 3s;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section7 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.hollow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #604D51;
padding: 3px;
margin-bottom: 9px;
margin-top: 6px;
object-fit: cover;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section8 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.vampire {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #924F25;
padding: 3px;
margin-top: 5px;
margin-bottom: 6px;
object-fit: cover;
object-position: 30% 100%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section9 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.wendigo {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #547A94;
padding: 3px;
margin-bottom: 10px;
object-fit: cover;
object-position: 30% 100%;
margin-top: 9px;
margin-bottom: 25px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
hr {
width: 50%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
#myImg {
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content {
margin: auto;
display: block;
width: 30%;
max-width: 300px;
border-radius: 10px;
font-family: 'Annie Use Your Telescope', cursive;
}
#caption {
margin: auto;
display: block;
font-size: 27px;
width: 100%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content,
#caption {
animation-name: zoom;
animation-duration: 0.6s;
font-family: 'Annie Use Your Telescope', cursive;
}
.close {
position: absolute;
top: 99px;
right: 100px;
color: #f1f1f1;
font-size: 130px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: gray;
text-decoration: none;
cursor: pointer;
}
/* ---SECTION END--- */
.section1:hover {
transform: scale(1.1);
}
.section2:hover {
transform: scale(1.1);
}
.section3:hover {
transform: scale(1.1);
}
.section4:hover {
transform: scale(1.1);
}
.section5:hover {
transform: scale(1.1);
}
.section6:hover {
transform: scale(1.1);
}
.section7:hover {
transform: scale(1.1);
}
.section8:hover {
transform: scale(1.1);
}
.section9:hover {
transform: scale(1.1);
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
</style>
<script>
// RED -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('red');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// ORANGE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('orange');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// GREEN -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('green');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// YELLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('yellow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BLUE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('blue');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// PURPLE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('purple');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// HOLLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('hollow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// VAMPIRE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('vampire');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// WENDIGO -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('wendigo');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BUTTERFLY -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('bf');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script> <!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, intial-scale=1.0"><title>Adventure Game</title></head><body><div class="hero-image"><div class="grid"><!--<div class="butterfly"><img class="bf" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red-b.png" alt="<span class=LOSS><b><u>LOSS</u></b><br></span><br><br><p class=grow>Random Line of text this is where the fortune prediction will go.</p>" width="170px;"></div>--><div class="title">DARK: The Forest<div class="under">Playing <mark style="background-color:#DD4571;">RED</mark></div></div><div class="text"><span class="first-letter">R</span>ed walks into town.</div></div><button class="custom-btn btn1-8"><span><p>(set: $orange_red to false)[[Continue.|Investigate Noise]]</p></span></button><div class="sidebar"><div id="myModal" class="modal"><span class="close">×</span><img class="modal-content" id="img01"><div id="caption"></div></div><div class="section1"><img class="red" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Skull Crushed"></div><div class="section2"><img class="orange" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/orange.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Neck Snapped, Slammed"></div><div class="section3"><img class="yellow" id="myImg"src="https://martinez925.neocities.org/adventure_game/intro_outro/yellow.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Drowned"></div><div class="section4"><img class="green" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/green.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Suffocation"></div><div class="section5"> <img class="blue" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/blue.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Impaled"></div><div class="section6"><img class="purple" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/purple.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Poisoned, Decapitated"></div><hr><div class="section7"> <img class="hollow" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Hollowgast.png" alt="<br><b><u>Hollowgast</u></b><br>A chaotic tentacle-mouthed creature spawned from a failed experiment to grant itself immortality. Hollowgasts, (typically referred to as 'Hollows'), create auditory hallucinations to trick their prey and use the strength of their tongues to immobilize them."></div><div class="section8"> <img class="vampire" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Vampire.jpg" alt="<br><b><u>Vampire</u></b><br>An agile vampiric-winged creature succumed to infection by a parasite. These bat-like vampires are blind, using echolocation by making clicking sounds with their gills to hunt and navigate, which allows them to move in complete darkness."></div><div class="section9"> <img class="wendigo" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Wendigo.png" alt="<br><b><u>Wendigo</u></b><br>A violent cannibalistic-mutated creature possessed by the spirit of the Wendigo. Wendigos see movement: mobile persons are highlighted in their vision, otherwise they are usually unable to track those who remain still. Their skin is stretched taut against its body, making it immune to ballistics and sharp weapons."></div></div></div> </div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&display=swap');
body {
font-family: 'Annie Use Your Telescope', cursive;
margin-left: -384px;
margin-top: -57px;
backgound-color: black;
}
.grid {
display: grid;
grid-template-columns:auto auto auto auto auto auto auto auto auto; repeat(6, 1fr);
grid-template-rows:repeat(6, 1/2fr);
grid-gap:35px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.sidebar {
grid-column:1;
grid-row:1/7;
width: 100px;
position: fixed;
height: 100%;
background-color: #111;
top: 0;
left: 0;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.title {
grid-column:2/5;
grid-row:1;
text-align: left;
margin-top: -15px;
margin-left: 7px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 80px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
line-height: 1.7;
}
.butterfly {
grid-column:7;
grid-row:1;
margin-top: 10px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
overflow: hidden;
}
span.FORTUNE {
font-size: 30px;
color: white;
}
span.GUIDANCE {
font-size: 30px;
color: yellow;
}
span.DANGER {
font-size: 30px;
color: red;
}
span.LOSS {
font-size: 33px;
color: #183699;
}
.bf/*, .ob, .yb, .gb, .bb, .pb*/ {
transition: transform .2s;
}
.bf:hover {
transform: scale(1.1);
}
p.grow {
margin-top: 15px;
}
.under {
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 28px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text {
grid-column:2/8;
grid-row:3;
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 20px;
margin-left: 7px;
margin-top: -40px;
color:white;
line-height: 1.8;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text::first-letter {
color: #DD4571;
padding: 0 .3rem;
margin: 0 .3rem 0 0;
border: 2px solid;
border-radius: 8px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 4rem;
float: left;
line-height: 1;
}
tw-link {
color: white;
font-size: 20px;
}
.btn1-8 {
grid-column:3;
grid-row:4;
font-family: 'Annie Use Your Telescope', cursive;
text-align: center;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.btn2-8 {
grid-column:6;
grid-row:4;
color: white;
font-family: 'Annie Use Your Telescope', cursive;
margin-left: 200px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.custom-btn {
width: 160px;
height: 60px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
font-family: 'Annie Use Your Telescope', cursive;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
border-color: white;
/*box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);*/
outline: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 700px;
margin-top: 20px;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://martinez925.neocities.org/adventure_game/intro_outro/night.jpg");
height: 100%;
width: 100%;
position: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* 8 */
.btn1-8, .btn2-8 {
/*background-color: #f0ecfc;
background-image: linear-gradient(315deg, white 0%, white 74%);*/
line-height: 42px;
padding: 0;
border: none;
}
.btn1-8 span, .btn2-8 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.btn1-8:before, .btn2-8:before,
.btn1-8:after, .btn2-8:after {
position: absolute;
content: "";
right: 0;
bottom: 0;
background: white;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8:before, .btn2-8:before{
height: 0%;
width: 2px;
}
.btn1-8:after, .btn2-8:after {
width: 0%;
height: 2px;
}
.btn1-8:hover:before, .btn2-8:hover:before {
height: 100%;
}
.btn1-8:hover:after, .btn2-8:hover:after {
width: 100%;
}
.btn1-8:hover, .btn2-8:hover{
background: transparent;
}
.btn1-8 span:hover, .btn2-8 span:hover{
color: lightgray;
}
.btn1-8 span:before, .btn2-8 span:before,
.btn1-8 span:after, .btn2-8 span:after {
position: absolute;
content: "";
left: 0;
top: 0;
background: #749dcf;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8 span:before, .btn2-8 span:before {
width: 2px;
height: 0%;
}
.btn1-8 span:after, .btn2-8 span:after{
height: 2px;
width: 0%;
}
.btn1-8 span:hover:before, .btn2-8 span:hover:before {
height: 100%;
}
.btn1-8 span:hover:after, .btn2-8 span:hover:after {
width: 100%;
}
p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*.choice1:hover, .choice2:hover {
background-color: #3e8e41;
color: white;
}
.crescent {
text-align: center;
transition: transform .2s;
}
.moon {
vertical-align: middle;
width:55px;
height: 55px;
margin-bottom: 10px;
}*/
.section1 {
text-align: center;
transition: transform .2s;
border-radius: 30px;
margin-left: 15px;
margin-right: 15px;
}
.red {
border: 3px solid #DD4571;
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
margin-top: 20px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section2 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
margin-left: 15px;
margin-right: 16px;
}
.orange {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
border: 3px solid #E48A32;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section3 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.yellow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border: 3px solid #FBE280;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section4 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.green {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #5BBC96;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section5 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.blue {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #336B90;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section6 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.purple {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #CA86F3;
padding: 3px;
margin-bottom: 7px;
animation: fadeIn 3s;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section7 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.hollow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #604D51;
padding: 3px;
margin-bottom: 9px;
margin-top: 6px;
object-fit: cover;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section8 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.vampire {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #924F25;
padding: 3px;
margin-top: 5px;
margin-bottom: 6px;
object-fit: cover;
object-position: 30% 100%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section9 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.wendigo {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #547A94;
padding: 3px;
margin-bottom: 10px;
object-fit: cover;
object-position: 30% 100%;
margin-top: 9px;
margin-bottom: 25px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
hr {
width: 50%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
#myImg {
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content {
margin: auto;
display: block;
width: 30%;
max-width: 300px;
border-radius: 10px;
font-family: 'Annie Use Your Telescope', cursive;
}
#caption {
margin: auto;
display: block;
font-size: 27px;
width: 100%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content,
#caption {
animation-name: zoom;
animation-duration: 0.6s;
font-family: 'Annie Use Your Telescope', cursive;
}
.close {
position: absolute;
top: 99px;
right: 100px;
color: #f1f1f1;
font-size: 130px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: gray;
text-decoration: none;
cursor: pointer;
}
/* ---SECTION END--- */
.section1:hover {
transform: scale(1.1);
}
.section2:hover {
transform: scale(1.1);
}
.section3:hover {
transform: scale(1.1);
}
.section4:hover {
transform: scale(1.1);
}
.section5:hover {
transform: scale(1.1);
}
.section6:hover {
transform: scale(1.1);
}
.section7:hover {
transform: scale(1.1);
}
.section8:hover {
transform: scale(1.1);
}
.section9:hover {
transform: scale(1.1);
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
</style>
<script>
// RED -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('red');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// ORANGE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('orange');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// GREEN -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('green');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// YELLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('yellow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BLUE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('blue');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// PURPLE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('purple');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// HOLLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('hollow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// VAMPIRE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('vampire');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// WENDIGO -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('wendigo');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BUTTERFLY -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('bf');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script> <!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, intial-scale=1.0"><title>Adventure Game</title></head><body><div class="hero-image"><div class="grid"><!--<div class="butterfly"><img class="bf" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red-b.png" alt="<span class=LOSS><b><u>LOSS</u></b><br></span><br><br><p class=grow>Random Line of text this is where the fortune prediction will go.</p>" width="170px;"></div>--><div class="title">DARK: The Forest<div class="under">Playing <mark style="background-color:#E48A32;">ORANGE</mark></div></div><div class="text"><span class="first-letter">Y</span>ou follow the voice on the left trail. You walk down the trail hesitantly, calling out <mark style="background-color:#336B90; color: white;">BLUE</mark>'s name desperately trying to find her, but the response is silent. Suddenly you hear her cry from somewhere around you and almost instantaneously thick slimy tongues shootout from behind you and wrap around your neck, gradually reeling you in that direction. You try to pull on the tongues constricting around your neck, resisting as hard as possible. <br><br><mark style="background-color:#E48A32; color: white;">ORANGE</mark> struggles to pull the tongues away from his neck, he gasps for air, looking out into the woods. <br><br><i><mark style="background-color:#DD4571; color: white;">RED</mark> does not come out of the forest.</i><br><br> The tongues constrict tighter around his head and twist violently, snapping his neck. <mark style="background-color:#E48A32; color: white;">ORANGE</mark>'s body falls to the floor, and slowly gets dragged back up the trail.</div></div><button class="custom-btn btn1-8"><span><p>[[Continue.|YELLOW1]]</p></span></button><div class="sidebar"><div id="myModal" class="modal"><span class="close">×</span><img class="modal-content" id="img01"><div id="caption"></div></div><div class="section1"><img class="red" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Skull Crushed"></div><div class="section2"><img class="orange" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/orange.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Neck Snapped, Slammed"></div><div class="section3"><img class="yellow" id="myImg"src="https://martinez925.neocities.org/adventure_game/intro_outro/yellow.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Drowned"></div><div class="section4"><img class="green" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/green.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Suffocation"></div><div class="section5"> <img class="blue" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/blue.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Impaled"></div><div class="section6"><img class="purple" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/purple.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Poisoned, Decapitated"></div><hr><div class="section7"> <img class="hollow" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Hollowgast.png" alt="<br><b><u>Hollowgast</u></b><br>A chaotic tentacle-mouthed creature spawned from a failed experiment to grant itself immortality. Hollowgasts, (typically referred to as 'Hollows'), create auditory hallucinations to trick their prey and use the strength of their tongues to immobilize them."></div><div class="section8"> <img class="vampire" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Vampire.jpg" alt="<br><b><u>Vampire</u></b><br>An agile vampiric-winged creature succumed to infection by a parasite. These bat-like vampires are blind, using echolocation by making clicking sounds with their gills to hunt and navigate, which allows them to move in complete darkness."></div><div class="section9"> <img class="wendigo" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Wendigo.png" alt="<br><b><u>Wendigo</u></b><br>A violent cannibalistic-mutated creature possessed by the spirit of the Wendigo. Wendigos see movement: mobile persons are highlighted in their vision, otherwise they are usually unable to track those who remain still. Their skin is stretched taut against its body, making it immune to ballistics and sharp weapons."></div></div></div> </div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&display=swap');
body {
font-family: 'Annie Use Your Telescope', cursive;
margin-left: -384px;
margin-top: -57px;
backgound-color: black;
}
.grid {
display: grid;
grid-template-columns:auto auto auto auto auto auto auto auto auto; repeat(6, 1fr);
grid-template-rows:repeat(6, 1/2fr);
grid-gap:35px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.sidebar {
grid-column:1;
grid-row:1/7;
width: 100px;
position: fixed;
height: 100%;
background-color: #111;
top: 0;
left: 0;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.title {
grid-column:2/5;
grid-row:1;
text-align: left;
margin-top: -15px;
margin-left: 100px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 80px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
line-height: 1.7;
}
.butterfly {
grid-column:7;
grid-row:1;
margin-top: 10px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
overflow: hidden;
}
span.FORTUNE {
font-size: 30px;
color: white;
}
span.GUIDANCE {
font-size: 30px;
color: yellow;
}
span.DANGER {
font-size: 30px;
color: red;
}
span.LOSS {
font-size: 33px;
color: #183699;
}
.bf/*, .ob, .yb, .gb, .bb, .pb*/ {
transition: transform .2s;
}
.bf:hover {
transform: scale(1.1);
}
p.grow {
margin-top: 15px;
}
.under {
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 28px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text {
grid-column:2/8;
grid-row:3;
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 20px;
margin-left: 100px;
margin-top: -40px;
color:white;
line-height: 1.8;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text::first-letter {
color: #E48A32;
padding: 0 .3rem;
margin: 0 .3rem 0 0;
border: 2px solid;
border-radius: 8px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 4rem;
float: left;
line-height: 1;
}
tw-link {
color: white;
font-size: 20px;
}
.btn1-8 {
grid-column:3;
grid-row:4;
font-family: 'Annie Use Your Telescope', cursive;
text-align: center;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.btn2-8 {
grid-column:6;
grid-row:4;
color: white;
font-family: 'Annie Use Your Telescope', cursive;
margin-left: 200px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.custom-btn {
width: 160px;
height: 60px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
font-family: 'Annie Use Your Telescope', cursive;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
border-color: white;
/*box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);*/
outline: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 700px;
margin-top: 20px;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://martinez925.neocities.org/adventure_game/intro_outro/night.jpg");
height: 100%;
width: 100%;
position: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* 8 */
.btn1-8, .btn2-8 {
/*background-color: #f0ecfc;
background-image: linear-gradient(315deg, white 0%, white 74%);*/
line-height: 42px;
padding: 0;
border: none;
}
.btn1-8 span, .btn2-8 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.btn1-8:before, .btn2-8:before,
.btn1-8:after, .btn2-8:after {
position: absolute;
content: "";
right: 0;
bottom: 0;
background: white;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8:before, .btn2-8:before{
height: 0%;
width: 2px;
}
.btn1-8:after, .btn2-8:after {
width: 0%;
height: 2px;
}
.btn1-8:hover:before, .btn2-8:hover:before {
height: 100%;
}
.btn1-8:hover:after, .btn2-8:hover:after {
width: 100%;
}
.btn1-8:hover, .btn2-8:hover{
background: transparent;
}
.btn1-8 span:hover, .btn2-8 span:hover{
color: lightgray;
}
.btn1-8 span:before, .btn2-8 span:before,
.btn1-8 span:after, .btn2-8 span:after {
position: absolute;
content: "";
left: 0;
top: 0;
background: #749dcf;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8 span:before, .btn2-8 span:before {
width: 2px;
height: 0%;
}
.btn1-8 span:after, .btn2-8 span:after{
height: 2px;
width: 0%;
}
.btn1-8 span:hover:before, .btn2-8 span:hover:before {
height: 100%;
}
.btn1-8 span:hover:after, .btn2-8 span:hover:after {
width: 100%;
}
p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*.choice1:hover, .choice2:hover {
background-color: #3e8e41;
color: white;
}
.crescent {
text-align: center;
transition: transform .2s;
}
.moon {
vertical-align: middle;
width:55px;
height: 55px;
margin-bottom: 10px;
}*/
.section1 {
text-align: center;
transition: transform .2s;
border-radius: 30px;
margin-left: 15px;
margin-right: 15px;
}
.red {
border: 3px solid #DD4571;
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
margin-top: 20px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section2 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
margin-left: 15px;
margin-right: 16px;
}
.orange {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
border: 3px solid #E48A32;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section3 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.yellow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border: 3px solid #FBE280;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section4 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.green {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #5BBC96;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section5 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.blue {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #336B90;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section6 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.purple {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #CA86F3;
padding: 3px;
margin-bottom: 7px;
animation: fadeIn 3s;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section7 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.hollow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #604D51;
padding: 3px;
margin-bottom: 9px;
margin-top: 6px;
object-fit: cover;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section8 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.vampire {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #924F25;
padding: 3px;
margin-top: 5px;
margin-bottom: 6px;
object-fit: cover;
object-position: 30% 100%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section9 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.wendigo {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #547A94;
padding: 3px;
margin-bottom: 10px;
object-fit: cover;
object-position: 30% 100%;
margin-top: 9px;
margin-bottom: 25px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
hr {
width: 50%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
#myImg {
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content {
margin: auto;
display: block;
width: 30%;
max-width: 300px;
border-radius: 10px;
font-family: 'Annie Use Your Telescope', cursive;
}
#caption {
margin: auto;
display: block;
font-size: 27px;
width: 100%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content,
#caption {
animation-name: zoom;
animation-duration: 0.6s;
font-family: 'Annie Use Your Telescope', cursive;
}
.close {
position: absolute;
top: 99px;
right: 100px;
color: #f1f1f1;
font-size: 130px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: gray;
text-decoration: none;
cursor: pointer;
}
/* ---SECTION END--- */
.section1:hover {
transform: scale(1.1);
}
.section2:hover {
transform: scale(1.1);
}
.section3:hover {
transform: scale(1.1);
}
.section4:hover {
transform: scale(1.1);
}
.section5:hover {
transform: scale(1.1);
}
.section6:hover {
transform: scale(1.1);
}
.section7:hover {
transform: scale(1.1);
}
.section8:hover {
transform: scale(1.1);
}
.section9:hover {
transform: scale(1.1);
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
</style>
<script>
// RED -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('red');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// ORANGE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('orange');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// GREEN -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('green');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// YELLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('yellow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BLUE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('blue');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// PURPLE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('purple');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// HOLLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('hollow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// VAMPIRE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('vampire');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// WENDIGO -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('wendigo');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BUTTERFLY -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('bf');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script>
(set:$redseesorangedie to true)
(set:$orangedead1 to true)
(set:$orange_red to false)
(set:$redhasflare to true) <!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, intial-scale=1.0"><title>Adventure Game</title></head><body><div class="hero-image"><div class="grid"><!--<div class="butterfly"><img class="bf" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red-b.png" alt="<span class=LOSS><b><u>LOSS</u></b><br></span><br><br><p class=grow>Random Line of text this is where the fortune prediction will go.</p>" width="170px;"></div>--><div class="title">DARK: The Forest<div class="under">Playing <mark style="background-color:#E48A32;">ORANGE</mark></div></div><div class="text"><span class="first-letter">Y</span>ou don’t follow the voice on the left trail. You hesitantly and silently travel down the right trail till it stops and you reach the outskirts of a town.</div></div><button class="custom-btn btn1-8"><span><p>[[Continue.|YELLOW1]]</p></span></button><div class="sidebar"><div id="myModal" class="modal"><span class="close">×</span><img class="modal-content" id="img01"><div id="caption"></div></div><div class="section1"><img class="red" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Skull Crushed"></div><div class="section2"><img class="orange" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/orange.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Neck Snapped, Slammed"></div><div class="section3"><img class="yellow" id="myImg"src="https://martinez925.neocities.org/adventure_game/intro_outro/yellow.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Drowned"></div><div class="section4"><img class="green" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/green.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Suffocation"></div><div class="section5"> <img class="blue" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/blue.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Impaled"></div><div class="section6"><img class="purple" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/purple.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Poisoned, Decapitated"></div><hr><div class="section7"> <img class="hollow" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Hollowgast.png" alt="<br><b><u>Hollowgast</u></b><br>A chaotic tentacle-mouthed creature spawned from a failed experiment to grant itself immortality. Hollowgasts, (typically referred to as 'Hollows'), create auditory hallucinations to trick their prey and use the strength of their tongues to immobilize them."></div><div class="section8"> <img class="vampire" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Vampire.jpg" alt="<br><b><u>Vampire</u></b><br>An agile vampiric-winged creature succumed to infection by a parasite. These bat-like vampires are blind, using echolocation by making clicking sounds with their gills to hunt and navigate, which allows them to move in complete darkness."></div><div class="section9"> <img class="wendigo" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Wendigo.png" alt="<br><b><u>Wendigo</u></b><br>A violent cannibalistic-mutated creature possessed by the spirit of the Wendigo. Wendigos see movement: mobile persons are highlighted in their vision, otherwise they are usually unable to track those who remain still. Their skin is stretched taut against its body, making it immune to ballistics and sharp weapons."></div></div></div> </div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&display=swap');
body {
font-family: 'Annie Use Your Telescope', cursive;
margin-left: -384px;
margin-top: -57px;
backgound-color: black;
}
.grid {
display: grid;
grid-template-columns:auto auto auto auto auto auto auto auto auto; repeat(6, 1fr);
grid-template-rows:repeat(6, 1/2fr);
grid-gap:35px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.sidebar {
grid-column:1;
grid-row:1/7;
width: 100px;
position: fixed;
height: 100%;
background-color: #111;
top: 0;
left: 0;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.title {
grid-column:2/5;
grid-row:1;
text-align: left;
margin-top: -15px;
margin-left: 100px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 80px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
line-height: 1.7;
}
.butterfly {
grid-column:7;
grid-row:1;
margin-top: 10px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
overflow: hidden;
}
span.FORTUNE {
font-size: 30px;
color: white;
}
span.GUIDANCE {
font-size: 30px;
color: yellow;
}
span.DANGER {
font-size: 30px;
color: red;
}
span.LOSS {
font-size: 33px;
color: #183699;
}
.bf/*, .ob, .yb, .gb, .bb, .pb*/ {
transition: transform .2s;
}
.bf:hover {
transform: scale(1.1);
}
p.grow {
margin-top: 15px;
}
.under {
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 28px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text {
grid-column:2/8;
grid-row:3;
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 20px;
margin-left: 100px;
margin-top: -40px;
color:white;
line-height: 1.8;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text::first-letter {
color: #E48A32;
padding: 0 .3rem;
margin: 0 .3rem 0 0;
border: 2px solid;
border-radius: 8px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 4rem;
float: left;
line-height: 1;
}
tw-link {
color: white;
font-size: 20px;
}
.btn1-8 {
grid-column:3;
grid-row:4;
font-family: 'Annie Use Your Telescope', cursive;
text-align: center;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.btn2-8 {
grid-column:6;
grid-row:4;
color: white;
font-family: 'Annie Use Your Telescope', cursive;
margin-left: 200px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.custom-btn {
width: 160px;
height: 60px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
font-family: 'Annie Use Your Telescope', cursive;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
border-color: white;
/*box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);*/
outline: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 700px;
margin-top: 20px;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://martinez925.neocities.org/adventure_game/intro_outro/night.jpg");
height: 100%;
width: 100%;
position: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* 8 */
.btn1-8, .btn2-8 {
/*background-color: #f0ecfc;
background-image: linear-gradient(315deg, white 0%, white 74%);*/
line-height: 42px;
padding: 0;
border: none;
}
.btn1-8 span, .btn2-8 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.btn1-8:before, .btn2-8:before,
.btn1-8:after, .btn2-8:after {
position: absolute;
content: "";
right: 0;
bottom: 0;
background: white;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8:before, .btn2-8:before{
height: 0%;
width: 2px;
}
.btn1-8:after, .btn2-8:after {
width: 0%;
height: 2px;
}
.btn1-8:hover:before, .btn2-8:hover:before {
height: 100%;
}
.btn1-8:hover:after, .btn2-8:hover:after {
width: 100%;
}
.btn1-8:hover, .btn2-8:hover{
background: transparent;
}
.btn1-8 span:hover, .btn2-8 span:hover{
color: lightgray;
}
.btn1-8 span:before, .btn2-8 span:before,
.btn1-8 span:after, .btn2-8 span:after {
position: absolute;
content: "";
left: 0;
top: 0;
background: #749dcf;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8 span:before, .btn2-8 span:before {
width: 2px;
height: 0%;
}
.btn1-8 span:after, .btn2-8 span:after{
height: 2px;
width: 0%;
}
.btn1-8 span:hover:before, .btn2-8 span:hover:before {
height: 100%;
}
.btn1-8 span:hover:after, .btn2-8 span:hover:after {
width: 100%;
}
p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*.choice1:hover, .choice2:hover {
background-color: #3e8e41;
color: white;
}
.crescent {
text-align: center;
transition: transform .2s;
}
.moon {
vertical-align: middle;
width:55px;
height: 55px;
margin-bottom: 10px;
}*/
.section1 {
text-align: center;
transition: transform .2s;
border-radius: 30px;
margin-left: 15px;
margin-right: 15px;
}
.red {
border: 3px solid #DD4571;
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
margin-top: 20px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section2 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
margin-left: 15px;
margin-right: 16px;
}
.orange {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
border: 3px solid #E48A32;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section3 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.yellow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border: 3px solid #FBE280;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section4 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.green {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #5BBC96;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section5 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.blue {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #336B90;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section6 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.purple {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #CA86F3;
padding: 3px;
margin-bottom: 7px;
animation: fadeIn 3s;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section7 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.hollow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #604D51;
padding: 3px;
margin-bottom: 9px;
margin-top: 6px;
object-fit: cover;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section8 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.vampire {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #924F25;
padding: 3px;
margin-top: 5px;
margin-bottom: 6px;
object-fit: cover;
object-position: 30% 100%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section9 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.wendigo {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #547A94;
padding: 3px;
margin-bottom: 10px;
object-fit: cover;
object-position: 30% 100%;
margin-top: 9px;
margin-bottom: 25px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
hr {
width: 50%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
#myImg {
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content {
margin: auto;
display: block;
width: 30%;
max-width: 300px;
border-radius: 10px;
font-family: 'Annie Use Your Telescope', cursive;
}
#caption {
margin: auto;
display: block;
font-size: 27px;
width: 100%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content,
#caption {
animation-name: zoom;
animation-duration: 0.6s;
font-family: 'Annie Use Your Telescope', cursive;
}
.close {
position: absolute;
top: 99px;
right: 100px;
color: #f1f1f1;
font-size: 130px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: gray;
text-decoration: none;
cursor: pointer;
}
/* ---SECTION END--- */
.section1:hover {
transform: scale(1.1);
}
.section2:hover {
transform: scale(1.1);
}
.section3:hover {
transform: scale(1.1);
}
.section4:hover {
transform: scale(1.1);
}
.section5:hover {
transform: scale(1.1);
}
.section6:hover {
transform: scale(1.1);
}
.section7:hover {
transform: scale(1.1);
}
.section8:hover {
transform: scale(1.1);
}
.section9:hover {
transform: scale(1.1);
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
</style>
<script>
// RED -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('red');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// ORANGE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('orange');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// GREEN -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('green');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// YELLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('yellow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BLUE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('blue');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// PURPLE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('purple');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// HOLLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('hollow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// VAMPIRE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('vampire');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// WENDIGO -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('wendigo');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BUTTERFLY -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('bf');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script>
(set:$orangedead1 to false)
(set:$orange_red to false)
(set:$redhasflare to true) <!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, intial-scale=1.0"><title>Adventure Game</title></head><body><div class="hero-image"><div class="grid"><!--<div class="butterfly"><img class="bf" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red-b.png" alt="<span class=LOSS><b><u>LOSS</u></b><br></span><br><br><p class=grow>Random Line of text this is where the fortune prediction will go.</p>" width="170px;"></div>--><div class="title">DARK: The Forest<div class="under">Playing <mark style="background-color:#DD4571;">RED</mark></div></div><div class="text"><span class="first-letter">Y</span>ou make your way back into the woods. Suddenly, the screaming starts up again, except this time it's a male voice. As you begin to run in the darkness of the forest, the screams get louder.<br><br><i><mark style="background-color:#DD4571; color: white;">RED</mark> emerges from the forest.</i><br><br>You see thick pink tongues constricting <mark style="background-color:#E48A32; color: white;">ORANGE</mark> around the neck. In the darkness of the forest, the tongues extend out behind <mark style="background-color:#E48A32; color: white;">ORANGE</mark>, coming from a tall slender silhouette—its face difficult to make out. You take out the flare gun and point it at the dark figure.</div></div><button class="custom-btn btn1-8"><span><p>(set:$orangedead1 to false)[[Shoot Silhouette]] </p></span></button><button class="custom-btn btn2-8"><span><p>(set:$orangedead1 to true)[[Help Pull Tongues]] </p></span></button><div class="sidebar"><div id="myModal" class="modal"><span class="close">×</span><img class="modal-content" id="img01"><div id="caption"></div></div><div class="section1"><img class="red" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Skull Crushed"></div><div class="section2"><img class="orange" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/orange.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Neck Snapped, Slammed"></div><div class="section3"><img class="yellow" id="myImg"src="https://martinez925.neocities.org/adventure_game/intro_outro/yellow.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Drowned"></div><div class="section4"><img class="green" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/green.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Suffocation"></div><div class="section5"> <img class="blue" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/blue.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Impaled"></div><div class="section6"><img class="purple" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/purple.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Poisoned, Decapitated"></div><hr><div class="section7"> <img class="hollow" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Hollowgast.png" alt="<br><b><u>Hollowgast</u></b><br>A chaotic tentacle-mouthed creature spawned from a failed experiment to grant itself immortality. Hollowgasts, (typically referred to as 'Hollows'), create auditory hallucinations to trick their prey and use the strength of their tongues to immobilize them."></div><div class="section8"> <img class="vampire" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Vampire.jpg" alt="<br><b><u>Vampire</u></b><br>An agile vampiric-winged creature succumed to infection by a parasite. These bat-like vampires are blind, using echolocation by making clicking sounds with their gills to hunt and navigate, which allows them to move in complete darkness."></div><div class="section9"> <img class="wendigo" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Wendigo.png" alt="<br><b><u>Wendigo</u></b><br>A violent cannibalistic-mutated creature possessed by the spirit of the Wendigo. Wendigos see movement: mobile persons are highlighted in their vision, otherwise they are usually unable to track those who remain still. Their skin is stretched taut against its body, making it immune to ballistics and sharp weapons."></div></div></div> </div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&display=swap');
body {
font-family: 'Annie Use Your Telescope', cursive;
margin-left: -384px;
margin-top: -57px;
backgound-color: black;
}
.grid {
display: grid;
grid-template-columns:auto auto auto auto auto auto auto auto auto; repeat(6, 1fr);
grid-template-rows:repeat(6, 1/2fr);
grid-gap:35px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.sidebar {
grid-column:1;
grid-row:1/7;
width: 100px;
position: fixed;
height: 100%;
background-color: #111;
top: 0;
left: 0;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.title {
grid-column:2/5;
grid-row:1;
text-align: left;
margin-top: -15px;
margin-left: 100px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 80px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
line-height: 1.7;
}
.butterfly {
grid-column:7;
grid-row:1;
margin-top: 10px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
overflow: hidden;
}
span.FORTUNE {
font-size: 30px;
color: white;
}
span.GUIDANCE {
font-size: 30px;
color: yellow;
}
span.DANGER {
font-size: 30px;
color: red;
}
span.LOSS {
font-size: 33px;
color: #183699;
}
.bf/*, .ob, .yb, .gb, .bb, .pb*/ {
transition: transform .2s;
}
.bf:hover {
transform: scale(1.1);
}
p.grow {
margin-top: 15px;
}
.under {
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 28px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text {
grid-column:2/8;
grid-row:3;
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 20px;
margin-left: 100px;
margin-top: -40px;
color:white;
line-height: 1.8;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text::first-letter {
color: #DD4571;
padding: 0 .3rem;
margin: 0 .3rem 0 0;
border: 2px solid;
border-radius: 8px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 4rem;
float: left;
line-height: 1;
}
tw-link {
color: white;
font-size: 20px;
}
.btn1-8 {
grid-column:3;
grid-row:4;
font-family: 'Annie Use Your Telescope', cursive;
text-align: center;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.btn2-8 {
grid-column:6;
grid-row:4;
color: white;
font-family: 'Annie Use Your Telescope', cursive;
margin-left: 200px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.custom-btn {
width: 160px;
height: 60px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
font-family: 'Annie Use Your Telescope', cursive;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
border-color: white;
/*box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);*/
outline: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 400px;
margin-top: 20px;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://martinez925.neocities.org/adventure_game/intro_outro/night.jpg");
height: 100%;
width: 100%;
position: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* 8 */
.btn1-8, .btn2-8 {
/*background-color: #f0ecfc;
background-image: linear-gradient(315deg, white 0%, white 74%);*/
line-height: 42px;
padding: 0;
border: none;
}
.btn1-8 span, .btn2-8 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.btn1-8:before, .btn2-8:before,
.btn1-8:after, .btn2-8:after {
position: absolute;
content: "";
right: 0;
bottom: 0;
background: white;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8:before, .btn2-8:before{
height: 0%;
width: 2px;
}
.btn1-8:after, .btn2-8:after {
width: 0%;
height: 2px;
}
.btn1-8:hover:before, .btn2-8:hover:before {
height: 100%;
}
.btn1-8:hover:after, .btn2-8:hover:after {
width: 100%;
}
.btn1-8:hover, .btn2-8:hover{
background: transparent;
}
.btn1-8 span:hover, .btn2-8 span:hover{
color: lightgray;
}
.btn1-8 span:before, .btn2-8 span:before,
.btn1-8 span:after, .btn2-8 span:after {
position: absolute;
content: "";
left: 0;
top: 0;
background: #749dcf;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8 span:before, .btn2-8 span:before {
width: 2px;
height: 0%;
}
.btn1-8 span:after, .btn2-8 span:after{
height: 2px;
width: 0%;
}
.btn1-8 span:hover:before, .btn2-8 span:hover:before {
height: 100%;
}
.btn1-8 span:hover:after, .btn2-8 span:hover:after {
width: 100%;
}
p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*.choice1:hover, .choice2:hover {
background-color: #3e8e41;
color: white;
}
.crescent {
text-align: center;
transition: transform .2s;
}
.moon {
vertical-align: middle;
width:55px;
height: 55px;
margin-bottom: 10px;
}*/
.section1 {
text-align: center;
transition: transform .2s;
border-radius: 30px;
margin-left: 15px;
margin-right: 15px;
}
.red {
border: 3px solid #DD4571;
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
margin-top: 20px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section2 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
margin-left: 15px;
margin-right: 16px;
}
.orange {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
border: 3px solid #E48A32;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section3 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.yellow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border: 3px solid #FBE280;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section4 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.green {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #5BBC96;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section5 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.blue {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #336B90;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section6 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.purple {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #CA86F3;
padding: 3px;
margin-bottom: 7px;
animation: fadeIn 3s;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section7 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.hollow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #604D51;
padding: 3px;
margin-bottom: 9px;
margin-top: 6px;
object-fit: cover;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section8 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.vampire {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #924F25;
padding: 3px;
margin-top: 5px;
margin-bottom: 6px;
object-fit: cover;
object-position: 30% 100%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section9 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.wendigo {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #547A94;
padding: 3px;
margin-bottom: 10px;
object-fit: cover;
object-position: 30% 100%;
margin-top: 9px;
margin-bottom: 25px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
hr {
width: 50%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
#myImg {
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content {
margin: auto;
display: block;
width: 30%;
max-width: 300px;
border-radius: 10px;
font-family: 'Annie Use Your Telescope', cursive;
}
#caption {
margin: auto;
display: block;
font-size: 27px;
width: 100%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content,
#caption {
animation-name: zoom;
animation-duration: 0.6s;
font-family: 'Annie Use Your Telescope', cursive;
}
.close {
position: absolute;
top: 99px;
right: 100px;
color: #f1f1f1;
font-size: 130px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: gray;
text-decoration: none;
cursor: pointer;
}
/* ---SECTION END--- */
.section1:hover {
transform: scale(1.1);
}
.section2:hover {
transform: scale(1.1);
}
.section3:hover {
transform: scale(1.1);
}
.section4:hover {
transform: scale(1.1);
}
.section5:hover {
transform: scale(1.1);
}
.section6:hover {
transform: scale(1.1);
}
.section7:hover {
transform: scale(1.1);
}
.section8:hover {
transform: scale(1.1);
}
.section9:hover {
transform: scale(1.1);
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
</style>
<script>
// RED -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('red');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// ORANGE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('orange');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// GREEN -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('green');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// YELLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('yellow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BLUE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('blue');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// PURPLE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('purple');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// HOLLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('hollow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// VAMPIRE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('vampire');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// WENDIGO -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('wendigo');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BUTTERFLY -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('bf');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script><!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, intial-scale=1.0"><title>Adventure Game</title></head><body><div class="hero-image"><div class="grid"><!--<div class="butterfly"><img class="bf" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red-b.png" alt="<span class=LOSS><b><u>LOSS</u></b><br></span><br><br><p class=grow>Random Line of text this is where the fortune prediction will go.</p>" width="170px;"></div>--><div class="title">DARK: The Forest<div class="under">Playing <mark style="background-color:#E48A32;">ORANGE</mark></div></div><div class="text"><span class="first-letter">Y</span>ou don’t follow the voice on the left trail. You hesitantly and quietly walk down the right trail, until you hear the leaves crunch ahead of you. <mark style="background-color:#DD4571; color: white;">RED</mark> meets you on the trail. You both leave the forest quickly and head into town.</div></div><button class="custom-btn btn1-8"><span><p>[[Continue.|YELLOW1]]</p></span></button><div class="sidebar"><div id="myModal" class="modal"><span class="close">×</span><img class="modal-content" id="img01"><div id="caption"></div></div><div class="section1"><img class="red" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Skull Crushed"></div><div class="section2"><img class="orange" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/orange.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Neck Snapped, Slammed"></div><div class="section3"><img class="yellow" id="myImg"src="https://martinez925.neocities.org/adventure_game/intro_outro/yellow.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Drowned"></div><div class="section4"><img class="green" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/green.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Suffocation"></div><div class="section5"> <img class="blue" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/blue.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Impaled"></div><div class="section6"><img class="purple" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/purple.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Poisoned, Decapitated"></div><hr><div class="section7"> <img class="hollow" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Hollowgast.png" alt="<br><b><u>Hollowgast</u></b><br>A chaotic tentacle-mouthed creature spawned from a failed experiment to grant itself immortality. Hollowgasts, (typically referred to as 'Hollows'), create auditory hallucinations to trick their prey and use the strength of their tongues to immobilize them."></div><div class="section8"> <img class="vampire" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Vampire.jpg" alt="<br><b><u>Vampire</u></b><br>An agile vampiric-winged creature succumed to infection by a parasite. These bat-like vampires are blind, using echolocation by making clicking sounds with their gills to hunt and navigate, which allows them to move in complete darkness."></div><div class="section9"> <img class="wendigo" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Wendigo.png" alt="<br><b><u>Wendigo</u></b><br>A violent cannibalistic-mutated creature possessed by the spirit of the Wendigo. Wendigos see movement: mobile persons are highlighted in their vision, otherwise they are usually unable to track those who remain still. Their skin is stretched taut against its body, making it immune to ballistics and sharp weapons."></div></div></div> </div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&display=swap');
body {
font-family: 'Annie Use Your Telescope', cursive;
margin-left: -384px;
margin-top: -57px;
backgound-color: black;
}
.grid {
display: grid;
grid-template-columns:auto auto auto auto auto auto auto auto auto; repeat(6, 1fr);
grid-template-rows:repeat(6, 1/2fr);
grid-gap:35px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.sidebar {
grid-column:1;
grid-row:1/7;
width: 100px;
position: fixed;
height: 100%;
background-color: #111;
top: 0;
left: 0;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.title {
grid-column:2/5;
grid-row:1;
text-align: left;
margin-top: -15px;
margin-left: 100px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 80px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
line-height: 1.7;
}
.butterfly {
grid-column:7;
grid-row:1;
margin-top: 10px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
overflow: hidden;
}
span.FORTUNE {
font-size: 30px;
color: white;
}
span.GUIDANCE {
font-size: 30px;
color: yellow;
}
span.DANGER {
font-size: 30px;
color: red;
}
span.LOSS {
font-size: 33px;
color: #183699;
}
.bf/*, .ob, .yb, .gb, .bb, .pb*/ {
transition: transform .2s;
}
.bf:hover {
transform: scale(1.1);
}
p.grow {
margin-top: 15px;
}
.under {
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 28px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text {
grid-column:2/8;
grid-row:3;
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 20px;
margin-left: 100px;
margin-top: -40px;
color:white;
line-height: 1.8;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text::first-letter {
color: #E48A32;
padding: 0 .3rem;
margin: 0 .3rem 0 0;
border: 2px solid;
border-radius: 8px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 4rem;
float: left;
line-height: 1;
}
tw-link {
color: white;
font-size: 20px;
}
.btn1-8 {
grid-column:3;
grid-row:4;
font-family: 'Annie Use Your Telescope', cursive;
text-align: center;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.btn2-8 {
grid-column:6;
grid-row:4;
color: white;
font-family: 'Annie Use Your Telescope', cursive;
margin-left: 200px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.custom-btn {
width: 160px;
height: 60px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
font-family: 'Annie Use Your Telescope', cursive;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
border-color: white;
/*box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);*/
outline: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 700px;
margin-top: 20px;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://martinez925.neocities.org/adventure_game/intro_outro/night.jpg");
height: 100%;
width: 100%;
position: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* 8 */
.btn1-8, .btn2-8 {
/*background-color: #f0ecfc;
background-image: linear-gradient(315deg, white 0%, white 74%);*/
line-height: 42px;
padding: 0;
border: none;
}
.btn1-8 span, .btn2-8 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.btn1-8:before, .btn2-8:before,
.btn1-8:after, .btn2-8:after {
position: absolute;
content: "";
right: 0;
bottom: 0;
background: white;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8:before, .btn2-8:before{
height: 0%;
width: 2px;
}
.btn1-8:after, .btn2-8:after {
width: 0%;
height: 2px;
}
.btn1-8:hover:before, .btn2-8:hover:before {
height: 100%;
}
.btn1-8:hover:after, .btn2-8:hover:after {
width: 100%;
}
.btn1-8:hover, .btn2-8:hover{
background: transparent;
}
.btn1-8 span:hover, .btn2-8 span:hover{
color: lightgray;
}
.btn1-8 span:before, .btn2-8 span:before,
.btn1-8 span:after, .btn2-8 span:after {
position: absolute;
content: "";
left: 0;
top: 0;
background: #749dcf;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8 span:before, .btn2-8 span:before {
width: 2px;
height: 0%;
}
.btn1-8 span:after, .btn2-8 span:after{
height: 2px;
width: 0%;
}
.btn1-8 span:hover:before, .btn2-8 span:hover:before {
height: 100%;
}
.btn1-8 span:hover:after, .btn2-8 span:hover:after {
width: 100%;
}
p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*.choice1:hover, .choice2:hover {
background-color: #3e8e41;
color: white;
}
.crescent {
text-align: center;
transition: transform .2s;
}
.moon {
vertical-align: middle;
width:55px;
height: 55px;
margin-bottom: 10px;
}*/
.section1 {
text-align: center;
transition: transform .2s;
border-radius: 30px;
margin-left: 15px;
margin-right: 15px;
}
.red {
border: 3px solid #DD4571;
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
margin-top: 20px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section2 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
margin-left: 15px;
margin-right: 16px;
}
.orange {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
border: 3px solid #E48A32;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section3 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.yellow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border: 3px solid #FBE280;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section4 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.green {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #5BBC96;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section5 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.blue {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #336B90;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section6 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.purple {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #CA86F3;
padding: 3px;
margin-bottom: 7px;
animation: fadeIn 3s;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section7 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.hollow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #604D51;
padding: 3px;
margin-bottom: 9px;
margin-top: 6px;
object-fit: cover;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section8 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.vampire {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #924F25;
padding: 3px;
margin-top: 5px;
margin-bottom: 6px;
object-fit: cover;
object-position: 30% 100%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section9 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.wendigo {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #547A94;
padding: 3px;
margin-bottom: 10px;
object-fit: cover;
object-position: 30% 100%;
margin-top: 9px;
margin-bottom: 25px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
hr {
width: 50%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
#myImg {
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content {
margin: auto;
display: block;
width: 30%;
max-width: 300px;
border-radius: 10px;
font-family: 'Annie Use Your Telescope', cursive;
}
#caption {
margin: auto;
display: block;
font-size: 27px;
width: 100%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content,
#caption {
animation-name: zoom;
animation-duration: 0.6s;
font-family: 'Annie Use Your Telescope', cursive;
}
.close {
position: absolute;
top: 99px;
right: 100px;
color: #f1f1f1;
font-size: 130px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: gray;
text-decoration: none;
cursor: pointer;
}
/* ---SECTION END--- */
.section1:hover {
transform: scale(1.1);
}
.section2:hover {
transform: scale(1.1);
}
.section3:hover {
transform: scale(1.1);
}
.section4:hover {
transform: scale(1.1);
}
.section5:hover {
transform: scale(1.1);
}
.section6:hover {
transform: scale(1.1);
}
.section7:hover {
transform: scale(1.1);
}
.section8:hover {
transform: scale(1.1);
}
.section9:hover {
transform: scale(1.1);
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
</style>
<script>
// RED -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('red');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// ORANGE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('orange');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// GREEN -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('green');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// YELLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('yellow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BLUE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('blue');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// PURPLE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('purple');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// HOLLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('hollow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// VAMPIRE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('vampire');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// WENDIGO -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('wendigo');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BUTTERFLY -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('bf');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script>
(set:$red_orange to true)
(set:$orangedead1 to false)
(set:$redhasflare to true) <!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, intial-scale=1.0"><title>Adventure Game</title></head><body><div class="hero-image"><div class="grid"><!--<div class="butterfly"><img class="bf" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red-b.png" alt="<span class=LOSS><b><u>LOSS</u></b><br></span><br><br><p class=grow>Random Line of text this is where the fortune prediction will go.</p>" width="170px;"></div>--><div class="title">DARK: The Docks<div class="under">Playing <mark style="background-color:#FBE280;">YELLOW</mark></div></div><div class="text"><span class="first-letter">Y</span>ou run down the docks as quickly and silently as possible. The lake sways calmly to the light of the moon, creating a beautiful illusion on the water. To your right lightly bounces a speed boat tied to one of the posts on the dock, it has a blue stripe running across it giving it a nice look, but it is severely run down with scratches and discoloration all over it. The boat is relatively bigger than when you first saw it running down the docks. You climb into it and move towards the driver's seat to check what it needs to start running, under the steering wheel, you find its empty ignition. You look around in all the compartments around the boat, and to your surpirse, find a silver key. You turn the key into the ignition and almost immediately tiny lights around the boat turn on and give the gauges on the dashboard visibility. That’s when you realize the engine did not start running with you turned the ignition, you look over the dashboard and see that there is no fuel inside this boat. You contemplate your next decision. Without gas you are unable to start the boat engine, maybe you can find alternative escape options in the town. </div></div><button class="custom-btn btn1-8"><span><p>[ (set:$boatescape to false) [[Give Up (Leave Boat)]] ]</p></span></button><button class="custom-btn btn2-8"><span><p>[ (set:$boatescape to true) [[Commit (Look For Gas) ]] ]</p></span></button><div class="sidebar"><div id="myModal" class="modal"><span class="close">×</span><img class="modal-content" id="img01"><div id="caption"></div></div><div class="section1"><img class="red" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Skull Crushed"></div><div class="section2"><img class="orange" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/orange.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Neck Snapped, Slammed"></div><div class="section3"><img class="yellow" id="myImg"src="https://martinez925.neocities.org/adventure_game/intro_outro/yellow.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Drowned"></div><div class="section4"><img class="green" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/green.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Suffocation"></div><div class="section5"> <img class="blue" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/blue.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Impaled"></div><div class="section6"><img class="purple" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/purple.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Poisoned, Decapitated"></div><hr><div class="section7"> <img class="hollow" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Hollowgast.png" alt="<br><b><u>Hollowgast</u></b><br>A chaotic tentacle-mouthed creature spawned from a failed experiment to grant itself immortality. Hollowgasts, (typically referred to as 'Hollows'), create auditory hallucinations to trick their prey and use the strength of their tongues to immobilize them."></div><div class="section8"> <img class="vampire" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Vampire.jpg" alt="<br><b><u>Vampire</u></b><br>An agile vampiric-winged creature succumed to infection by a parasite. These bat-like vampires are blind, using echolocation by making clicking sounds with their gills to hunt and navigate, which allows them to move in complete darkness."></div><div class="section9"> <img class="wendigo" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Wendigo.png" alt="<br><b><u>Wendigo</u></b><br>A violent cannibalistic-mutated creature possessed by the spirit of the Wendigo. Wendigos see movement: mobile persons are highlighted in their vision, otherwise they are usually unable to track those who remain still. Their skin is stretched taut against its body, making it immune to ballistics and sharp weapons."></div></div></div> </div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&display=swap');
body {
font-family: 'Annie Use Your Telescope', cursive;
margin-left: -384px;
margin-top: -57px;
backgound-color: black;
}
.grid {
display: grid;
grid-template-columns:auto auto auto auto auto auto auto auto auto; repeat(6, 1fr);
grid-template-rows:repeat(6, 1/2fr);
grid-gap:35px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.sidebar {
grid-column:1;
grid-row:1/7;
width: 100px;
position: fixed;
height: 100%;
background-color: #111;
top: 0;
left: 0;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.title {
grid-column:2/5;
grid-row:1;
text-align: left;
margin-top: -15px;
margin-left: 100px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 80px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
line-height: 1.7;
}
.butterfly {
grid-column:7;
grid-row:1;
margin-top: 10px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
overflow: hidden;
}
span.FORTUNE {
font-size: 30px;
color: white;
}
span.GUIDANCE {
font-size: 30px;
color: yellow;
}
span.DANGER {
font-size: 30px;
color: red;
}
span.LOSS {
font-size: 33px;
color: #183699;
}
.bf/*, .ob, .yb, .gb, .bb, .pb*/ {
transition: transform .2s;
}
.bf:hover {
transform: scale(1.1);
}
p.grow {
margin-top: 15px;
}
.under {
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 28px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text {
grid-column:2/8;
grid-row:3;
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 20px;
margin-left: 100px;
margin-top: -40px;
color:white;
line-height: 1.8;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text::first-letter {
color: #FBE280;
padding: 0 .3rem;
margin: 0 .3rem 0 0;
border: 2px solid;
border-radius: 8px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 4rem;
float: left;
line-height: 1;
}
tw-link {
color: white;
font-size: 20px;
}
.btn1-8 {
grid-column:3;
grid-row:4;
font-family: 'Annie Use Your Telescope', cursive;
text-align: center;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.btn2-8 {
grid-column:6;
grid-row:4;
color: white;
font-family: 'Annie Use Your Telescope', cursive;
margin-left: 200px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.custom-btn {
width: 180px;
height: 60px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
font-family: 'Annie Use Your Telescope', cursive;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
border-color: white;
/*box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);*/
outline: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 400px;
margin-top: 20px;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://martinez925.neocities.org/adventure_game/intro_outro/night.jpg");
height: 100%;
width: 100%;
position: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* 8 */
.btn1-8, .btn2-8 {
/*background-color: #f0ecfc;
background-image: linear-gradient(315deg, white 0%, white 74%);*/
line-height: 42px;
padding: 0;
border: none;
}
.btn1-8 span, .btn2-8 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.btn1-8:before, .btn2-8:before,
.btn1-8:after, .btn2-8:after {
position: absolute;
content: "";
right: 0;
bottom: 0;
background: white;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8:before, .btn2-8:before{
height: 0%;
width: 2px;
}
.btn1-8:after, .btn2-8:after {
width: 0%;
height: 2px;
}
.btn1-8:hover:before, .btn2-8:hover:before {
height: 100%;
}
.btn1-8:hover:after, .btn2-8:hover:after {
width: 100%;
}
.btn1-8:hover, .btn2-8:hover{
background: transparent;
}
.btn1-8 span:hover, .btn2-8 span:hover{
color: lightgray;
}
.btn1-8 span:before, .btn2-8 span:before,
.btn1-8 span:after, .btn2-8 span:after {
position: absolute;
content: "";
left: 0;
top: 0;
background: #749dcf;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8 span:before, .btn2-8 span:before {
width: 2px;
height: 0%;
}
.btn1-8 span:after, .btn2-8 span:after{
height: 2px;
width: 0%;
}
.btn1-8 span:hover:before, .btn2-8 span:hover:before {
height: 100%;
}
.btn1-8 span:hover:after, .btn2-8 span:hover:after {
width: 100%;
}
p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*.choice1:hover, .choice2:hover {
background-color: #3e8e41;
color: white;
}
.crescent {
text-align: center;
transition: transform .2s;
}
.moon {
vertical-align: middle;
width:55px;
height: 55px;
margin-bottom: 10px;
}*/
.section1 {
text-align: center;
transition: transform .2s;
border-radius: 30px;
margin-left: 15px;
margin-right: 15px;
}
.red {
border: 3px solid #DD4571;
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
margin-top: 20px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section2 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
margin-left: 15px;
margin-right: 16px;
}
.orange {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
border: 3px solid #E48A32;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section3 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.yellow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border: 3px solid #FBE280;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section4 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.green {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #5BBC96;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section5 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.blue {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #336B90;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section6 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.purple {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #CA86F3;
padding: 3px;
margin-bottom: 7px;
animation: fadeIn 3s;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section7 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.hollow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #604D51;
padding: 3px;
margin-bottom: 9px;
margin-top: 6px;
object-fit: cover;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section8 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.vampire {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #924F25;
padding: 3px;
margin-top: 5px;
margin-bottom: 6px;
object-fit: cover;
object-position: 30% 100%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section9 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.wendigo {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #547A94;
padding: 3px;
margin-bottom: 10px;
object-fit: cover;
object-position: 30% 100%;
margin-top: 9px;
margin-bottom: 25px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
hr {
width: 50%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
#myImg {
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content {
margin: auto;
display: block;
width: 30%;
max-width: 300px;
border-radius: 10px;
font-family: 'Annie Use Your Telescope', cursive;
}
#caption {
margin: auto;
display: block;
font-size: 27px;
width: 100%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content,
#caption {
animation-name: zoom;
animation-duration: 0.6s;
font-family: 'Annie Use Your Telescope', cursive;
}
.close {
position: absolute;
top: 99px;
right: 100px;
color: #f1f1f1;
font-size: 130px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: gray;
text-decoration: none;
cursor: pointer;
}
/* ---SECTION END--- */
.section1:hover {
transform: scale(1.1);
}
.section2:hover {
transform: scale(1.1);
}
.section3:hover {
transform: scale(1.1);
}
.section4:hover {
transform: scale(1.1);
}
.section5:hover {
transform: scale(1.1);
}
.section6:hover {
transform: scale(1.1);
}
.section7:hover {
transform: scale(1.1);
}
.section8:hover {
transform: scale(1.1);
}
.section9:hover {
transform: scale(1.1);
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
</style>
<script>
// RED -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('red');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// ORANGE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('orange');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// GREEN -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('green');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// YELLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('yellow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BLUE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('blue');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// PURPLE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('purple');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// HOLLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('hollow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// VAMPIRE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('vampire');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// WENDIGO -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('wendigo');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BUTTERFLY -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('bf');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script>You hop over the wired gate walk towards the nearest pair of doors, quickly flicking on your flashlight, you shine it on door, revealing big bold red letters spelling out the name “WESTVIEW HIGH”. You open the door and shine your flashlight down the dark empty hallway, you make your way to the closest classroom door and pull on the handle only to find it locked. In your attempt of desperation to find a working telephone, you continue down the hall trying at each door but are unable to open them. You leave the hall and begin to walk in the outdoor hallway of the school. Grass and weeds sprout out from in between the cracks in the cement and in the patches of grass around you, series of vines plague the walls of buildings, windows, and rooftops. You find another wing to enter, you make your way inside and shut the door behind you. You notice that his hall is unlike the one you were in just in before. In this hall, there are no doors along the walls, instead, they are replaced with a green fluid that encases the entire doorway. The fluid glows a bright green lighting up your surrounding, you walk towards and examine the strange substance. The fluid is transparent and contains adhesive properties, it’s unlike anything you’ve ever seen before. That’s when you see movement through the fluid, and suddenly your eyes focus onto a large creature with wings, it’s back turned away from you as it ravages into the dead corpse of an animal.
[[Get Out Hall ]]
[[Hide In Classrooms]]You take a careful step back from the door, ensuring that your footsteps are as quiet as possible. You approach the other room and enter the doorway, ducking behind the adhesive substance and hiding against the wall. That's when you see the ground in this room has been leveled, and inches away from you is a massive hole in the ground, a tunnel leading down beneath the school. Vines and spores infest the walls and floor, spreading down into the tunnel's interior, their spores glowing a bright green like the slime hanging from the doors. Suddenly, you hear clicking in the hallway, followed by a deep gruff that echoes throughout the building hall. You turn your head into the hall and see the creature slowly approaching your classroom.
[[Stay Still]]
[[Run Out the Room]]As the creature creeps inside the doorway, inches away from you, you remain motionless against the wall. It clicks its gills, but there is no movement detected. The beast was at least the size of a lion, with huge, broad wings that draped from its arms. It sported sharp thick talons on all of its limbs and sharp fangs sticking out of its jaws. You keep a close eye on the creature as it walks over to the enormous hole in the ground and disappears within.You panic and run out the room, giving you a clear view of the monster. The creature was at least the size of a lion, with huge, broad wings that draped from its arms. It sported sharp thick talons on all of its limbs and sharp fangs sticking out of its jaws. The creature clicks its gills and dashes down the hallway at incredible speeds.
[[Take Detour]]
[[Run Out Hall]]You take a sharp left into one of the classrooms and run through the adhesive substance that surrounds the doorway. The adhesive adheres around your legs, and you fall onto the ground. As the creature enters the room, you lie on your back with your legs glued together. You gasp and move yourself away from it with your arms, but as you move back, you begin feeling yourself descending into a dark tunnel, vines and bright green spores falling upwards into your vision as the hole in the sky shrinks.
(set:$purplefalls to true) You sprint down the hall and dash out the door right before a talon pierces into your leg, causing you to collapse in pain. The creature flips you over by standing over you and lets forth a horrifying screech before digging its fangs into PURPLE's neck, secreting a fatal poison into her veins. The Vampire carefully drags her back into the building as her pulse rate lowers and her lungs begin to fail.<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, intial-scale=1.0"><title>Adventure Game</title></head><body><div class="hero-image"><div class="grid"><!--<div class="butterfly"><img class="bf" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red-b.png" alt="<span class=LOSS><b><u>LOSS</u></b><br></span><br><br><p class=grow>Random Line of text this is where the fortune prediction will go.</p>" width="170px;"></div>--><div class="title">DARK: The Forest<div class="under">Playing <mark style="background-color:#DD4571;">RED</mark></div></div><div class="text"><span class="first-letter">Y</span>ou keep sprinting into the woods, unsure of where your friends are. Soon later, you arrive to the end of the forest on the outskirts of town, where you discover a flare gun on the ground, the same flare gun that BLUE took after fleeing the cabin. You approach it and pick up the flare gun. Suddenly, you hear cries in the distance, coming from the forest behind you. BLUE's voice can be heard in the screaming. You shout her name.</div></div><button class="custom-btn btn1-8"><span><p>[ [[Investigate Noise]] ]</p></span></button><button class="custom-btn btn2-8"><span><p>[ [[Walk Into Town]] ]</p></span></button><div class="sidebar"><div id="myModal" class="modal"><span class="close">×</span><img class="modal-content" id="img01"><div id="caption"></div></div><div class="section1"><img class="red" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Skull Crushed"></div><div class="section2"><img class="orange" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/orange.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Neck Snapped, Slammed"></div><div class="section3"><img class="yellow" id="myImg"src="https://martinez925.neocities.org/adventure_game/intro_outro/yellow.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Drowned"></div><div class="section4"><img class="green" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/green.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Suffocation"></div><div class="section5"> <img class="blue" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/blue.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Impaled"></div><div class="section6"><img class="purple" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/purple.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Poisoned, Decapitated"></div><hr><div class="section7"> <img class="hollow" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Hollowgast.png" alt="<br><b><u>Hollowgast</u></b><br>A chaotic tentacle-mouthed creature spawned from a failed experiment to grant itself immortality. Hollowgasts, (typically referred to as 'Hollows'), create auditory hallucinations to trick their prey and use the strength of their tongues to immobilize them."></div><div class="section8"> <img class="vampire" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Vampire.jpg" alt="<br><b><u>Vampire</u></b><br>An agile vampiric-winged creature succumed to infection by a parasite. These bat-like vampires are blind, using echolocation by making clicking sounds with their gills to hunt and navigate, which allows them to move in complete darkness."></div><div class="section9"> <img class="wendigo" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Wendigo.png" alt="<br><b><u>Wendigo</u></b><br>A violent cannibalistic-mutated creature possessed by the spirit of the Wendigo. Wendigos see movement: mobile persons are highlighted in their vision, otherwise they are usually unable to track those who remain still. Their skin is stretched taut against its body, making it immune to ballistics and sharp weapons."></div></div></div> </div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&display=swap');
body {
font-family: 'Annie Use Your Telescope', cursive;
margin-left: -384px;
margin-top: -57px;
backgound-color: black;
}
.grid {
display: grid;
grid-template-columns:auto auto auto auto auto auto auto auto auto; repeat(6, 1fr);
grid-template-rows:repeat(6, 1/2fr);
grid-gap:35px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.sidebar {
grid-column:1;
grid-row:1/7;
width: 100px;
position: fixed;
height: 100%;
background-color: #111;
top: 0;
left: 0;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.title {
grid-column:2/5;
grid-row:1;
text-align: left;
margin-top: -15px;
margin-left: 100px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 80px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
line-height: 1.7;
}
.butterfly {
grid-column:7;
grid-row:1;
margin-top: 10px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
overflow: hidden;
}
span.FORTUNE {
font-size: 30px;
color: white;
}
span.GUIDANCE {
font-size: 30px;
color: yellow;
}
span.DANGER {
font-size: 30px;
color: red;
}
span.LOSS {
font-size: 33px;
color: #183699;
}
.bf/*, .ob, .yb, .gb, .bb, .pb*/ {
transition: transform .2s;
}
.bf:hover {
transform: scale(1.1);
}
p.grow {
margin-top: 15px;
}
.under {
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 28px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text {
grid-column:2/8;
grid-row:3;
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 20px;
margin-left: 100px;
margin-top: -40px;
color:white;
line-height: 1.8;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text::first-letter {
color: #DD4571;
padding: 0 .3rem;
margin: 0 .3rem 0 0;
border: 2px solid;
border-radius: 8px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 4rem;
float: left;
line-height: 1;
}
tw-link {
color: white;
font-size: 20px;
}
.btn1-8 {
grid-column:3;
grid-row:4;
font-family: 'Annie Use Your Telescope', cursive;
text-align: center;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.btn2-8 {
grid-column:6;
grid-row:4;
color: white;
font-family: 'Annie Use Your Telescope', cursive;
margin-left: 200px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.custom-btn {
width: 160px;
height: 60px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
font-family: 'Annie Use Your Telescope', cursive;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
border-color: white;
/*box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);*/
outline: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 400px;
margin-top: 20px;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://martinez925.neocities.org/adventure_game/intro_outro/night.jpg");
height: 100%;
width: 100%;
position: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* 8 */
.btn1-8, .btn2-8 {
/*background-color: #f0ecfc;
background-image: linear-gradient(315deg, white 0%, white 74%);*/
line-height: 42px;
padding: 0;
border: none;
}
.btn1-8 span, .btn2-8 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.btn1-8:before, .btn2-8:before,
.btn1-8:after, .btn2-8:after {
position: absolute;
content: "";
right: 0;
bottom: 0;
background: white;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8:before, .btn2-8:before{
height: 0%;
width: 2px;
}
.btn1-8:after, .btn2-8:after {
width: 0%;
height: 2px;
}
.btn1-8:hover:before, .btn2-8:hover:before {
height: 100%;
}
.btn1-8:hover:after, .btn2-8:hover:after {
width: 100%;
}
.btn1-8:hover, .btn2-8:hover{
background: transparent;
}
.btn1-8 span:hover, .btn2-8 span:hover{
color: lightgray;
}
.btn1-8 span:before, .btn2-8 span:before,
.btn1-8 span:after, .btn2-8 span:after {
position: absolute;
content: "";
left: 0;
top: 0;
background: #749dcf;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8 span:before, .btn2-8 span:before {
width: 2px;
height: 0%;
}
.btn1-8 span:after, .btn2-8 span:after{
height: 2px;
width: 0%;
}
.btn1-8 span:hover:before, .btn2-8 span:hover:before {
height: 100%;
}
.btn1-8 span:hover:after, .btn2-8 span:hover:after {
width: 100%;
}
p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*.choice1:hover, .choice2:hover {
background-color: #3e8e41;
color: white;
}
.crescent {
text-align: center;
transition: transform .2s;
}
.moon {
vertical-align: middle;
width:55px;
height: 55px;
margin-bottom: 10px;
}*/
.section1 {
text-align: center;
transition: transform .2s;
border-radius: 30px;
margin-left: 15px;
margin-right: 15px;
}
.red {
border: 3px solid #DD4571;
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
margin-top: 20px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section2 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
margin-left: 15px;
margin-right: 16px;
}
.orange {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
border: 3px solid #E48A32;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section3 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.yellow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border: 3px solid #FBE280;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section4 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.green {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #5BBC96;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section5 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.blue {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #336B90;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section6 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.purple {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #CA86F3;
padding: 3px;
margin-bottom: 7px;
animation: fadeIn 3s;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section7 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.hollow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #604D51;
padding: 3px;
margin-bottom: 9px;
margin-top: 6px;
object-fit: cover;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section8 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.vampire {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #924F25;
padding: 3px;
margin-top: 5px;
margin-bottom: 6px;
object-fit: cover;
object-position: 30% 100%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section9 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.wendigo {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #547A94;
padding: 3px;
margin-bottom: 10px;
object-fit: cover;
object-position: 30% 100%;
margin-top: 9px;
margin-bottom: 25px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
hr {
width: 50%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
#myImg {
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content {
margin: auto;
display: block;
width: 30%;
max-width: 300px;
border-radius: 10px;
font-family: 'Annie Use Your Telescope', cursive;
}
#caption {
margin: auto;
display: block;
font-size: 27px;
width: 100%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content,
#caption {
animation-name: zoom;
animation-duration: 0.6s;
font-family: 'Annie Use Your Telescope', cursive;
}
.close {
position: absolute;
top: 99px;
right: 100px;
color: #f1f1f1;
font-size: 130px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: gray;
text-decoration: none;
cursor: pointer;
}
/* ---SECTION END--- */
.section1:hover {
transform: scale(1.1);
}
.section2:hover {
transform: scale(1.1);
}
.section3:hover {
transform: scale(1.1);
}
.section4:hover {
transform: scale(1.1);
}
.section5:hover {
transform: scale(1.1);
}
.section6:hover {
transform: scale(1.1);
}
.section7:hover {
transform: scale(1.1);
}
.section8:hover {
transform: scale(1.1);
}
.section9:hover {
transform: scale(1.1);
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
</style>
<script>
// RED -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('red');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// ORANGE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('orange');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// GREEN -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('green');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// YELLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('yellow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BLUE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('blue');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// PURPLE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('purple');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// HOLLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('hollow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// VAMPIRE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('vampire');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// WENDIGO -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('wendigo');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BUTTERFLY -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('bf');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script>
(set:$redhasflare to true) <!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, intial-scale=1.0"><title>Adventure Game</title></head><body><div class="hero-image"><div class="grid"><!--<div class="butterfly"><img class="bf" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red-b.png" alt="<span class=LOSS><b><u>LOSS</u></b><br></span><br><br><p class=grow>Random Line of text this is where the fortune prediction will go.</p>" width="170px;"></div>--><div class="title">DARK: The Forest<div class="under">Playing <mark style="background-color:#DD4571;">RED</mark></div></div><div class="text"><span class="first-letter">Y</span>ou pull the trigger and the flare gun makes a loud pop sound, shooting out an illuminating red beam that zooms in the air.<br><br><br><i><mark style="background-color:#DD4571; color: white;">RED</mark> pulls the trigger.<br><br></i> The cry of a dreadful screech reverberates throughout the forest, and almost immediately, the tongues retract. <mark style="background-color:#E48A32; color: white;">ORANGE</mark> falls to the floor gasping for air, you help him up and run out of the forest towards the town. The flare simmers on the floor.</div></div><button class="custom-btn btn1-8"><span><p>[[Continue.|YELLOW1]]</p></span></button><div class="sidebar"><div id="myModal" class="modal"><span class="close">×</span><img class="modal-content" id="img01"><div id="caption"></div></div><div class="section1"><img class="red" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Skull Crushed"></div><div class="section2"><img class="orange" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/orange.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Neck Snapped, Slammed"></div><div class="section3"><img class="yellow" id="myImg"src="https://martinez925.neocities.org/adventure_game/intro_outro/yellow.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Drowned"></div><div class="section4"><img class="green" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/green.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Suffocation"></div><div class="section5"> <img class="blue" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/blue.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Impaled"></div><div class="section6"><img class="purple" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/purple.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Poisoned, Decapitated"></div><hr><div class="section7"> <img class="hollow" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Hollowgast.png" alt="<br><b><u>Hollowgast</u></b><br>A chaotic tentacle-mouthed creature spawned from a failed experiment to grant itself immortality. Hollowgasts, (typically referred to as 'Hollows'), create auditory hallucinations to trick their prey and use the strength of their tongues to immobilize them."></div><div class="section8"> <img class="vampire" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Vampire.jpg" alt="<br><b><u>Vampire</u></b><br>An agile vampiric-winged creature succumed to infection by a parasite. These bat-like vampires are blind, using echolocation by making clicking sounds with their gills to hunt and navigate, which allows them to move in complete darkness."></div><div class="section9"> <img class="wendigo" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Wendigo.png" alt="<br><b><u>Wendigo</u></b><br>A violent cannibalistic-mutated creature possessed by the spirit of the Wendigo. Wendigos see movement: mobile persons are highlighted in their vision, otherwise they are usually unable to track those who remain still. Their skin is stretched taut against its body, making it immune to ballistics and sharp weapons."></div></div></div> </div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&display=swap');
body {
font-family: 'Annie Use Your Telescope', cursive;
margin-left: -384px;
margin-top: -57px;
backgound-color: black;
}
.grid {
display: grid;
grid-template-columns:auto auto auto auto auto auto auto auto auto; repeat(6, 1fr);
grid-template-rows:repeat(6, 1/2fr);
grid-gap:35px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.sidebar {
grid-column:1;
grid-row:1/7;
width: 100px;
position: fixed;
height: 100%;
background-color: #111;
top: 0;
left: 0;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.title {
grid-column:2/5;
grid-row:1;
text-align: left;
margin-top: -15px;
margin-left: 100px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 80px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
line-height: 1.7;
}
.butterfly {
grid-column:7;
grid-row:1;
margin-top: 10px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
overflow: hidden;
}
span.FORTUNE {
font-size: 30px;
color: white;
}
span.GUIDANCE {
font-size: 30px;
color: yellow;
}
span.DANGER {
font-size: 30px;
color: red;
}
span.LOSS {
font-size: 33px;
color: #183699;
}
.bf/*, .ob, .yb, .gb, .bb, .pb*/ {
transition: transform .2s;
}
.bf:hover {
transform: scale(1.1);
}
p.grow {
margin-top: 15px;
}
.under {
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 28px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text {
grid-column:2/8;
grid-row:3;
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 20px;
margin-left: 100px;
margin-top: -40px;
color:white;
line-height: 1.8;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text::first-letter {
color: #DD4571;
padding: 0 .3rem;
margin: 0 .3rem 0 0;
border: 2px solid;
border-radius: 8px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 4rem;
float: left;
line-height: 1;
}
tw-link {
color: white;
font-size: 20px;
}
.btn1-8 {
grid-column:3;
grid-row:4;
font-family: 'Annie Use Your Telescope', cursive;
text-align: center;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.btn2-8 {
grid-column:6;
grid-row:4;
color: white;
font-family: 'Annie Use Your Telescope', cursive;
margin-left: 200px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.custom-btn {
width: 160px;
height: 60px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
font-family: 'Annie Use Your Telescope', cursive;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
border-color: white;
/*box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);*/
outline: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 700px;
margin-top: 20px;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://martinez925.neocities.org/adventure_game/intro_outro/night.jpg");
height: 100%;
width: 100%;
position: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* 8 */
.btn1-8, .btn2-8 {
/*background-color: #f0ecfc;
background-image: linear-gradient(315deg, white 0%, white 74%);*/
line-height: 42px;
padding: 0;
border: none;
}
.btn1-8 span, .btn2-8 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.btn1-8:before, .btn2-8:before,
.btn1-8:after, .btn2-8:after {
position: absolute;
content: "";
right: 0;
bottom: 0;
background: white;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8:before, .btn2-8:before{
height: 0%;
width: 2px;
}
.btn1-8:after, .btn2-8:after {
width: 0%;
height: 2px;
}
.btn1-8:hover:before, .btn2-8:hover:before {
height: 100%;
}
.btn1-8:hover:after, .btn2-8:hover:after {
width: 100%;
}
.btn1-8:hover, .btn2-8:hover{
background: transparent;
}
.btn1-8 span:hover, .btn2-8 span:hover{
color: lightgray;
}
.btn1-8 span:before, .btn2-8 span:before,
.btn1-8 span:after, .btn2-8 span:after {
position: absolute;
content: "";
left: 0;
top: 0;
background: #749dcf;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8 span:before, .btn2-8 span:before {
width: 2px;
height: 0%;
}
.btn1-8 span:after, .btn2-8 span:after{
height: 2px;
width: 0%;
}
.btn1-8 span:hover:before, .btn2-8 span:hover:before {
height: 100%;
}
.btn1-8 span:hover:after, .btn2-8 span:hover:after {
width: 100%;
}
p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*.choice1:hover, .choice2:hover {
background-color: #3e8e41;
color: white;
}
.crescent {
text-align: center;
transition: transform .2s;
}
.moon {
vertical-align: middle;
width:55px;
height: 55px;
margin-bottom: 10px;
}*/
.section1 {
text-align: center;
transition: transform .2s;
border-radius: 30px;
margin-left: 15px;
margin-right: 15px;
}
.red {
border: 3px solid #DD4571;
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
margin-top: 20px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section2 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
margin-left: 15px;
margin-right: 16px;
}
.orange {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
border: 3px solid #E48A32;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section3 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.yellow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border: 3px solid #FBE280;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section4 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.green {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #5BBC96;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section5 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.blue {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #336B90;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section6 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.purple {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #CA86F3;
padding: 3px;
margin-bottom: 7px;
animation: fadeIn 3s;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section7 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.hollow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #604D51;
padding: 3px;
margin-bottom: 9px;
margin-top: 6px;
object-fit: cover;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section8 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.vampire {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #924F25;
padding: 3px;
margin-top: 5px;
margin-bottom: 6px;
object-fit: cover;
object-position: 30% 100%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section9 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.wendigo {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #547A94;
padding: 3px;
margin-bottom: 10px;
object-fit: cover;
object-position: 30% 100%;
margin-top: 9px;
margin-bottom: 25px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
hr {
width: 50%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
#myImg {
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content {
margin: auto;
display: block;
width: 30%;
max-width: 300px;
border-radius: 10px;
font-family: 'Annie Use Your Telescope', cursive;
}
#caption {
margin: auto;
display: block;
font-size: 27px;
width: 100%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content,
#caption {
animation-name: zoom;
animation-duration: 0.6s;
font-family: 'Annie Use Your Telescope', cursive;
}
.close {
position: absolute;
top: 99px;
right: 100px;
color: #f1f1f1;
font-size: 130px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: gray;
text-decoration: none;
cursor: pointer;
}
/* ---SECTION END--- */
.section1:hover {
transform: scale(1.1);
}
.section2:hover {
transform: scale(1.1);
}
.section3:hover {
transform: scale(1.1);
}
.section4:hover {
transform: scale(1.1);
}
.section5:hover {
transform: scale(1.1);
}
.section6:hover {
transform: scale(1.1);
}
.section7:hover {
transform: scale(1.1);
}
.section8:hover {
transform: scale(1.1);
}
.section9:hover {
transform: scale(1.1);
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
</style>
<script>
// RED -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('red');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// ORANGE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('orange');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// GREEN -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('green');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// YELLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('yellow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BLUE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('blue');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// PURPLE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('purple');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// HOLLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('hollow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// VAMPIRE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('vampire');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// WENDIGO -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('wendigo');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BUTTERFLY -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('bf');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script>
(set:$redhasflare to false)
(set:$orangedead1 to false)
(set:$red_orange to true)<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, intial-scale=1.0"><title>Adventure Game</title></head><body><div class="hero-image"><div class="grid"><!--<div class="butterfly"><img class="bf" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red-b.png" alt="<span class=LOSS><b><u>LOSS</u></b><br></span><br><br><p class=grow>Random Line of text this is where the fortune prediction will go.</p>" width="170px;"></div>--><div class="title">DARK: The Forest<div class="under">Playing <mark style="background-color:#DD4571;">RED</mark></div></div><div class="text"><span class="first-letter">Y</span>our hesitation to shoot the flare allows the tongues to constrict harder around <mark style="background-color:#E48A32; color: white">ORANGE</mark>. You grab the pink fleshy tongues and pull them apart as hard as you can, only leveraging a finger width size before losing grip and having them snap back in place. The monster becomes enraged and extends its tongues around <mark style="background-color:#E48A32; color: white">ORANGE</mark>'s body—binding his legs together, and lifts him into the air.<br><br><i><mark style="background-color:#DD4571; color: white">RED</mark> did not shoot the flare.</i><br><br>Almost immediately the monster slams <mark style="background-color:#E48A32; color: white">ORANGE</mark> into the ground with powerful, violent swings, instantly breaking every bone in his body. <mark style="background-color:#E48A32; color: white">ORANGE</mark> lays facing the sky as the monster flings his body along the the trail—leaving behind a river of red fluid in the vicinity. <mark style="background-color:#DD4571; color: white">RED</mark>, in a state of hysteria, runs out of the forest towards the town as the monster's tentacles wrap around the dead corpse and drag it away into the darkness. </div></div><button class="custom-btn btn1-8"><span><p>[[Continue.|YELLOW1]]</p></span></button><div class="sidebar"><div id="myModal" class="modal"><span class="close">×</span><img class="modal-content" id="img01"><div id="caption"></div></div><div class="section1"><img class="red" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Skull Crushed"></div><div class="section2"><img class="orange" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/orange.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Neck Snapped, Slammed"></div><div class="section3"><img class="yellow" id="myImg"src="https://martinez925.neocities.org/adventure_game/intro_outro/yellow.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Drowned"></div><div class="section4"><img class="green" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/green.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Suffocation"></div><div class="section5"> <img class="blue" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/blue.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Impaled"></div><div class="section6"><img class="purple" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/purple.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Poisoned, Decapitated"></div><hr><div class="section7"> <img class="hollow" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Hollowgast.png" alt="<br><b><u>Hollowgast</u></b><br>A chaotic tentacle-mouthed creature spawned from a failed experiment to grant itself immortality. Hollowgasts, (typically referred to as 'Hollows'), create auditory hallucinations to trick their prey and use the strength of their tongues to immobilize them."></div><div class="section8"> <img class="vampire" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Vampire.jpg" alt="<br><b><u>Vampire</u></b><br>An agile vampiric-winged creature succumed to infection by a parasite. These bat-like vampires are blind, using echolocation by making clicking sounds with their gills to hunt and navigate, which allows them to move in complete darkness."></div><div class="section9"> <img class="wendigo" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Wendigo.png" alt="<br><b><u>Wendigo</u></b><br>A violent cannibalistic-mutated creature possessed by the spirit of the Wendigo. Wendigos see movement: mobile persons are highlighted in their vision, otherwise they are usually unable to track those who remain still. Their skin is stretched taut against its body, making it immune to ballistics and sharp weapons."></div></div></div> </div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&display=swap');
body {
font-family: 'Annie Use Your Telescope', cursive;
margin-left: -384px;
margin-top: -57px;
backgound-color: black;
}
.grid {
display: grid;
grid-template-columns:auto auto auto auto auto auto auto auto auto; repeat(6, 1fr);
grid-template-rows:repeat(6, 1/2fr);
grid-gap:35px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.sidebar {
grid-column:1;
grid-row:1/7;
width: 100px;
position: fixed;
height: 100%;
background-color: #111;
top: 0;
left: 0;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.title {
grid-column:2/5;
grid-row:1;
text-align: left;
margin-top: -15px;
margin-left: 100px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 80px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
line-height: 1.7;
}
.butterfly {
grid-column:7;
grid-row:1;
margin-top: 10px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
overflow: hidden;
}
span.FORTUNE {
font-size: 30px;
color: white;
}
span.GUIDANCE {
font-size: 30px;
color: yellow;
}
span.DANGER {
font-size: 30px;
color: red;
}
span.LOSS {
font-size: 33px;
color: #183699;
}
.bf/*, .ob, .yb, .gb, .bb, .pb*/ {
transition: transform .2s;
}
.bf:hover {
transform: scale(1.1);
}
p.grow {
margin-top: 15px;
}
.under {
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 28px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text {
grid-column:2/8;
grid-row:3;
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 20px;
margin-left: 100px;
margin-top: -40px;
color:white;
line-height: 1.8;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text::first-letter {
color: #DD4571;
padding: 0 .3rem;
margin: 0 .3rem 0 0;
border: 2px solid;
border-radius: 8px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 4rem;
float: left;
line-height: 1;
}
tw-link {
color: white;
font-size: 20px;
}
.btn1-8 {
grid-column:3;
grid-row:4;
font-family: 'Annie Use Your Telescope', cursive;
text-align: center;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.btn2-8 {
grid-column:6;
grid-row:4;
color: white;
font-family: 'Annie Use Your Telescope', cursive;
margin-left: 200px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.custom-btn {
width: 160px;
height: 60px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
font-family: 'Annie Use Your Telescope', cursive;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
border-color: white;
/*box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);*/
outline: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 700px;
margin-top: 20px;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://martinez925.neocities.org/adventure_game/intro_outro/night.jpg");
height: 100%;
width: 100%;
position: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* 8 */
.btn1-8, .btn2-8 {
/*background-color: #f0ecfc;
background-image: linear-gradient(315deg, white 0%, white 74%);*/
line-height: 42px;
padding: 0;
border: none;
}
.btn1-8 span, .btn2-8 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.btn1-8:before, .btn2-8:before,
.btn1-8:after, .btn2-8:after {
position: absolute;
content: "";
right: 0;
bottom: 0;
background: white;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8:before, .btn2-8:before{
height: 0%;
width: 2px;
}
.btn1-8:after, .btn2-8:after {
width: 0%;
height: 2px;
}
.btn1-8:hover:before, .btn2-8:hover:before {
height: 100%;
}
.btn1-8:hover:after, .btn2-8:hover:after {
width: 100%;
}
.btn1-8:hover, .btn2-8:hover{
background: transparent;
}
.btn1-8 span:hover, .btn2-8 span:hover{
color: lightgray;
}
.btn1-8 span:before, .btn2-8 span:before,
.btn1-8 span:after, .btn2-8 span:after {
position: absolute;
content: "";
left: 0;
top: 0;
background: #749dcf;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8 span:before, .btn2-8 span:before {
width: 2px;
height: 0%;
}
.btn1-8 span:after, .btn2-8 span:after{
height: 2px;
width: 0%;
}
.btn1-8 span:hover:before, .btn2-8 span:hover:before {
height: 100%;
}
.btn1-8 span:hover:after, .btn2-8 span:hover:after {
width: 100%;
}
p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*.choice1:hover, .choice2:hover {
background-color: #3e8e41;
color: white;
}
.crescent {
text-align: center;
transition: transform .2s;
}
.moon {
vertical-align: middle;
width:55px;
height: 55px;
margin-bottom: 10px;
}*/
.section1 {
text-align: center;
transition: transform .2s;
border-radius: 30px;
margin-left: 15px;
margin-right: 15px;
}
.red {
border: 3px solid #DD4571;
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
margin-top: 20px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section2 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
margin-left: 15px;
margin-right: 16px;
}
.orange {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
border: 3px solid #E48A32;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section3 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.yellow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border: 3px solid #FBE280;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section4 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.green {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #5BBC96;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section5 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.blue {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #336B90;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section6 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.purple {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #CA86F3;
padding: 3px;
margin-bottom: 7px;
animation: fadeIn 3s;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section7 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.hollow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #604D51;
padding: 3px;
margin-bottom: 9px;
margin-top: 6px;
object-fit: cover;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section8 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.vampire {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #924F25;
padding: 3px;
margin-top: 5px;
margin-bottom: 6px;
object-fit: cover;
object-position: 30% 100%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section9 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.wendigo {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #547A94;
padding: 3px;
margin-bottom: 10px;
object-fit: cover;
object-position: 30% 100%;
margin-top: 9px;
margin-bottom: 25px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
hr {
width: 50%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
#myImg {
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content {
margin: auto;
display: block;
width: 30%;
max-width: 300px;
border-radius: 10px;
font-family: 'Annie Use Your Telescope', cursive;
}
#caption {
margin: auto;
display: block;
font-size: 27px;
width: 100%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content,
#caption {
animation-name: zoom;
animation-duration: 0.6s;
font-family: 'Annie Use Your Telescope', cursive;
}
.close {
position: absolute;
top: 99px;
right: 100px;
color: #f1f1f1;
font-size: 130px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: gray;
text-decoration: none;
cursor: pointer;
}
/* ---SECTION END--- */
.section1:hover {
transform: scale(1.1);
}
.section2:hover {
transform: scale(1.1);
}
.section3:hover {
transform: scale(1.1);
}
.section4:hover {
transform: scale(1.1);
}
.section5:hover {
transform: scale(1.1);
}
.section6:hover {
transform: scale(1.1);
}
.section7:hover {
transform: scale(1.1);
}
.section8:hover {
transform: scale(1.1);
}
.section9:hover {
transform: scale(1.1);
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
</style>
<script>
// RED -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('red');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// ORANGE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('orange');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// GREEN -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('green');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// YELLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('yellow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BLUE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('blue');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// PURPLE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('purple');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// HOLLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('hollow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// VAMPIRE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('vampire');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// WENDIGO -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('wendigo');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BUTTERFLY -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('bf');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script>
(set:$orangedead1 to true)
(set:$orange_red to false)
(set:$redhasflare to true) <!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, intial-scale=1.0"><title>Adventure Game</title></head><body><div class="hero-image"><div class="grid"><!--<div class="butterfly"><img class="bf" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red-b.png" alt="<span class=LOSS><b><u>LOSS</u></b><br></span><br><br><p class=grow>Random Line of text this is where the fortune prediction will go.</p>" width="170px;"></div>--><div class="title">DARK: The Docks<div class="under">Playing <mark style="background-color:#FBE280;">YELLOW</mark></div></div><div class="text"><span class="first-letter">Y</span>ou believe finding an alternative escape is the best option. Taking the key out of the ignition and placing it on the dashboard, you climb out the boat and begin walking down the docks. You hope your friends are okay.</div></div><button class="custom-btn btn1-8"><span><p>[[Continue.|PURPLE1]] </p></span></button><div class="sidebar"><div id="myModal" class="modal"><span class="close">×</span><img class="modal-content" id="img01"><div id="caption"></div></div><div class="section1"><img class="red" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Skull Crushed"></div><div class="section2"><img class="orange" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/orange.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Neck Snapped, Slammed"></div><div class="section3"><img class="yellow" id="myImg"src="https://martinez925.neocities.org/adventure_game/intro_outro/yellow.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Drowned"></div><div class="section4"><img class="green" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/green.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Suffocation"></div><div class="section5"> <img class="blue" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/blue.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Impaled"></div><div class="section6"><img class="purple" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/purple.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Poisoned, Decapitated"></div><hr><div class="section7"> <img class="hollow" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Hollowgast.png" alt="<br><b><u>Hollowgast</u></b><br>A chaotic tentacle-mouthed creature spawned from a failed experiment to grant itself immortality. Hollowgasts, (typically referred to as 'Hollows'), create auditory hallucinations to trick their prey and use the strength of their tongues to immobilize them."></div><div class="section8"> <img class="vampire" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Vampire.jpg" alt="<br><b><u>Vampire</u></b><br>An agile vampiric-winged creature succumed to infection by a parasite. These bat-like vampires are blind, using echolocation by making clicking sounds with their gills to hunt and navigate, which allows them to move in complete darkness."></div><div class="section9"> <img class="wendigo" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Wendigo.png" alt="<br><b><u>Wendigo</u></b><br>A violent cannibalistic-mutated creature possessed by the spirit of the Wendigo. Wendigos see movement: mobile persons are highlighted in their vision, otherwise they are usually unable to track those who remain still. Their skin is stretched taut against its body, making it immune to ballistics and sharp weapons."></div></div></div> </div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&display=swap');
body {
font-family: 'Annie Use Your Telescope', cursive;
margin-left: -384px;
margin-top: -57px;
backgound-color: black;
}
.grid {
display: grid;
grid-template-columns:auto auto auto auto auto auto auto auto auto; repeat(6, 1fr);
grid-template-rows:repeat(6, 1/2fr);
grid-gap:35px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.sidebar {
grid-column:1;
grid-row:1/7;
width: 100px;
position: fixed;
height: 100%;
background-color: #111;
top: 0;
left: 0;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.title {
grid-column:2/5;
grid-row:1;
text-align: left;
margin-top: -15px;
margin-left: 100px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 80px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
line-height: 1.7;
}
.butterfly {
grid-column:7;
grid-row:1;
margin-top: 10px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
overflow: hidden;
}
span.FORTUNE {
font-size: 30px;
color: white;
}
span.GUIDANCE {
font-size: 30px;
color: yellow;
}
span.DANGER {
font-size: 30px;
color: red;
}
span.LOSS {
font-size: 33px;
color: #183699;
}
.bf/*, .ob, .yb, .gb, .bb, .pb*/ {
transition: transform .2s;
}
.bf:hover {
transform: scale(1.1);
}
p.grow {
margin-top: 15px;
}
.under {
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 28px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text {
grid-column:2/8;
grid-row:3;
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 20px;
margin-left: 100px;
margin-top: -40px;
color:white;
line-height: 1.8;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text::first-letter {
color: #FBE280;
padding: 0 .3rem;
margin: 0 .3rem 0 0;
border: 2px solid;
border-radius: 8px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 4rem;
float: left;
line-height: 1;
}
tw-link {
color: white;
font-size: 20px;
}
.btn1-8 {
grid-column:3;
grid-row:4;
font-family: 'Annie Use Your Telescope', cursive;
text-align: center;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.btn2-8 {
grid-column:6;
grid-row:4;
color: white;
font-family: 'Annie Use Your Telescope', cursive;
margin-left: 200px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.custom-btn {
width: 160px;
height: 60px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
font-family: 'Annie Use Your Telescope', cursive;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
border-color: white;
/*box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);*/
outline: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 700px;
margin-top: 20px;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://martinez925.neocities.org/adventure_game/intro_outro/night.jpg");
height: 100%;
width: 100%;
position: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* 8 */
.btn1-8, .btn2-8 {
/*background-color: #f0ecfc;
background-image: linear-gradient(315deg, white 0%, white 74%);*/
line-height: 42px;
padding: 0;
border: none;
}
.btn1-8 span, .btn2-8 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.btn1-8:before, .btn2-8:before,
.btn1-8:after, .btn2-8:after {
position: absolute;
content: "";
right: 0;
bottom: 0;
background: white;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8:before, .btn2-8:before{
height: 0%;
width: 2px;
}
.btn1-8:after, .btn2-8:after {
width: 0%;
height: 2px;
}
.btn1-8:hover:before, .btn2-8:hover:before {
height: 100%;
}
.btn1-8:hover:after, .btn2-8:hover:after {
width: 100%;
}
.btn1-8:hover, .btn2-8:hover{
background: transparent;
}
.btn1-8 span:hover, .btn2-8 span:hover{
color: lightgray;
}
.btn1-8 span:before, .btn2-8 span:before,
.btn1-8 span:after, .btn2-8 span:after {
position: absolute;
content: "";
left: 0;
top: 0;
background: #749dcf;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8 span:before, .btn2-8 span:before {
width: 2px;
height: 0%;
}
.btn1-8 span:after, .btn2-8 span:after{
height: 2px;
width: 0%;
}
.btn1-8 span:hover:before, .btn2-8 span:hover:before {
height: 100%;
}
.btn1-8 span:hover:after, .btn2-8 span:hover:after {
width: 100%;
}
p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*.choice1:hover, .choice2:hover {
background-color: #3e8e41;
color: white;
}
.crescent {
text-align: center;
transition: transform .2s;
}
.moon {
vertical-align: middle;
width:55px;
height: 55px;
margin-bottom: 10px;
}*/
.section1 {
text-align: center;
transition: transform .2s;
border-radius: 30px;
margin-left: 15px;
margin-right: 15px;
}
.red {
border: 3px solid #DD4571;
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
margin-top: 20px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section2 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
margin-left: 15px;
margin-right: 16px;
}
.orange {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
border: 3px solid #E48A32;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section3 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.yellow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border: 3px solid #FBE280;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section4 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.green {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #5BBC96;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section5 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.blue {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #336B90;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section6 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.purple {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #CA86F3;
padding: 3px;
margin-bottom: 7px;
animation: fadeIn 3s;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section7 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.hollow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #604D51;
padding: 3px;
margin-bottom: 9px;
margin-top: 6px;
object-fit: cover;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section8 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.vampire {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #924F25;
padding: 3px;
margin-top: 5px;
margin-bottom: 6px;
object-fit: cover;
object-position: 30% 100%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section9 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.wendigo {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #547A94;
padding: 3px;
margin-bottom: 10px;
object-fit: cover;
object-position: 30% 100%;
margin-top: 9px;
margin-bottom: 25px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
hr {
width: 50%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
#myImg {
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content {
margin: auto;
display: block;
width: 30%;
max-width: 300px;
border-radius: 10px;
font-family: 'Annie Use Your Telescope', cursive;
}
#caption {
margin: auto;
display: block;
font-size: 27px;
width: 100%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content,
#caption {
animation-name: zoom;
animation-duration: 0.6s;
font-family: 'Annie Use Your Telescope', cursive;
}
.close {
position: absolute;
top: 99px;
right: 100px;
color: #f1f1f1;
font-size: 130px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: gray;
text-decoration: none;
cursor: pointer;
}
/* ---SECTION END--- */
.section1:hover {
transform: scale(1.1);
}
.section2:hover {
transform: scale(1.1);
}
.section3:hover {
transform: scale(1.1);
}
.section4:hover {
transform: scale(1.1);
}
.section5:hover {
transform: scale(1.1);
}
.section6:hover {
transform: scale(1.1);
}
.section7:hover {
transform: scale(1.1);
}
.section8:hover {
transform: scale(1.1);
}
.section9:hover {
transform: scale(1.1);
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
</style>
<script>
// RED -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('red');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// ORANGE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('orange');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// GREEN -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('green');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// YELLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('yellow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BLUE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('blue');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// PURPLE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('purple');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// HOLLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('hollow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// VAMPIRE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('vampire');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// WENDIGO -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('wendigo');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BUTTERFLY -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('bf');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script><!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, intial-scale=1.0"><title>Adventure Game</title></head><body><div class="hero-image"><div class="grid"><!--<div class="butterfly"><img class="bf" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red-b.png" alt="<span class=LOSS><b><u>LOSS</u></b><br></span><br><br><p class=grow>Random Line of text this is where the fortune prediction will go.</p>" width="170px;"></div>--><div class="title">DARK: The Docks<div class="under">Playing <mark style="background-color:#FBE280;">YELLOW</mark></div></div><div class="text"><span class="first-letter">Y</span>ou believe sticking with the boat and looking for fuel is the option. Taking the key out of the ignition and putting it in your pocket, you climb out the boat and begin walking down the docks. You hope your friends are okay.</div></div><button class="custom-btn btn1-8"><span><p>[[Continue.|PURPLE1]]</p></span></button><div class="sidebar"><div id="myModal" class="modal"><span class="close">×</span><img class="modal-content" id="img01"><div id="caption"></div></div><div class="section1"><img class="red" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Skull Crushed"></div><div class="section2"><img class="orange" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/orange.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Neck Snapped, Slammed"></div><div class="section3"><img class="yellow" id="myImg"src="https://martinez925.neocities.org/adventure_game/intro_outro/yellow.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Drowned"></div><div class="section4"><img class="green" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/green.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Suffocation"></div><div class="section5"> <img class="blue" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/blue.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Impaled"></div><div class="section6"><img class="purple" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/purple.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Poisoned, Decapitated"></div><hr><div class="section7"> <img class="hollow" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Hollowgast.png" alt="<br><b><u>Hollowgast</u></b><br>A chaotic tentacle-mouthed creature spawned from a failed experiment to grant itself immortality. Hollowgasts, (typically referred to as 'Hollows'), create auditory hallucinations to trick their prey and use the strength of their tongues to immobilize them."></div><div class="section8"> <img class="vampire" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Vampire.jpg" alt="<br><b><u>Vampire</u></b><br>An agile vampiric-winged creature succumed to infection by a parasite. These bat-like vampires are blind, using echolocation by making clicking sounds with their gills to hunt and navigate, which allows them to move in complete darkness."></div><div class="section9"> <img class="wendigo" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Wendigo.png" alt="<br><b><u>Wendigo</u></b><br>A violent cannibalistic-mutated creature possessed by the spirit of the Wendigo. Wendigos see movement: mobile persons are highlighted in their vision, otherwise they are usually unable to track those who remain still. Their skin is stretched taut against its body, making it immune to ballistics and sharp weapons."></div></div></div> </div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&display=swap');
body {
font-family: 'Annie Use Your Telescope', cursive;
margin-left: -384px;
margin-top: -57px;
backgound-color: black;
}
.grid {
display: grid;
grid-template-columns:auto auto auto auto auto auto auto auto auto; repeat(6, 1fr);
grid-template-rows:repeat(6, 1/2fr);
grid-gap:35px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.sidebar {
grid-column:1;
grid-row:1/7;
width: 100px;
position: fixed;
height: 100%;
background-color: #111;
top: 0;
left: 0;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.title {
grid-column:2/5;
grid-row:1;
text-align: left;
margin-top: -15px;
margin-left: 100px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 80px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
line-height: 1.7;
}
.butterfly {
grid-column:7;
grid-row:1;
margin-top: 10px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
overflow: hidden;
}
span.FORTUNE {
font-size: 30px;
color: white;
}
span.GUIDANCE {
font-size: 30px;
color: yellow;
}
span.DANGER {
font-size: 30px;
color: red;
}
span.LOSS {
font-size: 33px;
color: #183699;
}
.bf/*, .ob, .yb, .gb, .bb, .pb*/ {
transition: transform .2s;
}
.bf:hover {
transform: scale(1.1);
}
p.grow {
margin-top: 15px;
}
.under {
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 28px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text {
grid-column:2/8;
grid-row:3;
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 20px;
margin-left: 100px;
margin-top: -40px;
color:white;
line-height: 1.8;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text::first-letter {
color: #FBE280;
padding: 0 .3rem;
margin: 0 .3rem 0 0;
border: 2px solid;
border-radius: 8px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 4rem;
float: left;
line-height: 1;
}
tw-link {
color: white;
font-size: 20px;
}
.btn1-8 {
grid-column:3;
grid-row:4;
font-family: 'Annie Use Your Telescope', cursive;
text-align: center;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.btn2-8 {
grid-column:6;
grid-row:4;
color: white;
font-family: 'Annie Use Your Telescope', cursive;
margin-left: 200px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.custom-btn {
width: 160px;
height: 60px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
font-family: 'Annie Use Your Telescope', cursive;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
border-color: white;
/*box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);*/
outline: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 700px;
margin-top: 20px;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://martinez925.neocities.org/adventure_game/intro_outro/night.jpg");
height: 100%;
width: 100%;
position: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* 8 */
.btn1-8, .btn2-8 {
/*background-color: #f0ecfc;
background-image: linear-gradient(315deg, white 0%, white 74%);*/
line-height: 42px;
padding: 0;
border: none;
}
.btn1-8 span, .btn2-8 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.btn1-8:before, .btn2-8:before,
.btn1-8:after, .btn2-8:after {
position: absolute;
content: "";
right: 0;
bottom: 0;
background: white;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8:before, .btn2-8:before{
height: 0%;
width: 2px;
}
.btn1-8:after, .btn2-8:after {
width: 0%;
height: 2px;
}
.btn1-8:hover:before, .btn2-8:hover:before {
height: 100%;
}
.btn1-8:hover:after, .btn2-8:hover:after {
width: 100%;
}
.btn1-8:hover, .btn2-8:hover{
background: transparent;
}
.btn1-8 span:hover, .btn2-8 span:hover{
color: lightgray;
}
.btn1-8 span:before, .btn2-8 span:before,
.btn1-8 span:after, .btn2-8 span:after {
position: absolute;
content: "";
left: 0;
top: 0;
background: #749dcf;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8 span:before, .btn2-8 span:before {
width: 2px;
height: 0%;
}
.btn1-8 span:after, .btn2-8 span:after{
height: 2px;
width: 0%;
}
.btn1-8 span:hover:before, .btn2-8 span:hover:before {
height: 100%;
}
.btn1-8 span:hover:after, .btn2-8 span:hover:after {
width: 100%;
}
p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*.choice1:hover, .choice2:hover {
background-color: #3e8e41;
color: white;
}
.crescent {
text-align: center;
transition: transform .2s;
}
.moon {
vertical-align: middle;
width:55px;
height: 55px;
margin-bottom: 10px;
}*/
.section1 {
text-align: center;
transition: transform .2s;
border-radius: 30px;
margin-left: 15px;
margin-right: 15px;
}
.red {
border: 3px solid #DD4571;
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
margin-top: 20px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section2 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
margin-left: 15px;
margin-right: 16px;
}
.orange {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
border: 3px solid #E48A32;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section3 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.yellow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border: 3px solid #FBE280;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section4 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.green {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #5BBC96;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section5 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.blue {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #336B90;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section6 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.purple {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #CA86F3;
padding: 3px;
margin-bottom: 7px;
animation: fadeIn 3s;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section7 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.hollow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #604D51;
padding: 3px;
margin-bottom: 9px;
margin-top: 6px;
object-fit: cover;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section8 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.vampire {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #924F25;
padding: 3px;
margin-top: 5px;
margin-bottom: 6px;
object-fit: cover;
object-position: 30% 100%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section9 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.wendigo {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #547A94;
padding: 3px;
margin-bottom: 10px;
object-fit: cover;
object-position: 30% 100%;
margin-top: 9px;
margin-bottom: 25px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
hr {
width: 50%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
#myImg {
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content {
margin: auto;
display: block;
width: 30%;
max-width: 300px;
border-radius: 10px;
font-family: 'Annie Use Your Telescope', cursive;
}
#caption {
margin: auto;
display: block;
font-size: 27px;
width: 100%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content,
#caption {
animation-name: zoom;
animation-duration: 0.6s;
font-family: 'Annie Use Your Telescope', cursive;
}
.close {
position: absolute;
top: 99px;
right: 100px;
color: #f1f1f1;
font-size: 130px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: gray;
text-decoration: none;
cursor: pointer;
}
/* ---SECTION END--- */
.section1:hover {
transform: scale(1.1);
}
.section2:hover {
transform: scale(1.1);
}
.section3:hover {
transform: scale(1.1);
}
.section4:hover {
transform: scale(1.1);
}
.section5:hover {
transform: scale(1.1);
}
.section6:hover {
transform: scale(1.1);
}
.section7:hover {
transform: scale(1.1);
}
.section8:hover {
transform: scale(1.1);
}
.section9:hover {
transform: scale(1.1);
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
</style>
<script>
// RED -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('red');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// ORANGE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('orange');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// GREEN -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('green');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// YELLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('yellow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BLUE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('blue');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// PURPLE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('purple');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// HOLLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('hollow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// VAMPIRE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('vampire');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// WENDIGO -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('wendigo');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BUTTERFLY -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('bf');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script>
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, intial-scale=1.0"><title>Adventure Game</title></head><body><div class="hero-image"><div class="grid"><!--<div class="butterfly"><img class="bf" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red-b.png" alt="<span class=LOSS><b><u>LOSS</u></b><br></span><br><br><p class=grow>Random Line of text this is where the fortune prediction will go.</p>" width="170px;"></div>--><div class="title">DARK: The Neighborhood<div class="under">Playing <mark style="background-color:#5BBC96;">GREEN</mark></div></div><div class="text"><span class="first-letter">Y</span>ou hide inside a tiny shed in the backyard of someone's home. You sit silently on a wooden crate, anxious that something has tracked you to your hiding place. You get up and start looking around the shed for something to defend yourself with, but can’t make out anything of good use. You pull out your flashlight and flick it on, illuminating the cans of paint and black garbage bags around you containing unidentifiable objects poking through them. You turn to the shelves on the wall and spot nothing much of good use: spray paint bottles, keys, a lighter, a box cutter, and folded piece of paper. You take a closer look and unravel the paper; it's a 1942 map of the entire town, with the words 'WESTVIEW' written in large strong characters in the bottom right. Take the box cutter and lighter and slide it into your pocket. You switch off your flashlight and sit back down, trying to figure out what to do next, but before you can even think about it, you hear heavy footsteps outside the shed, followed by heavy breathing. You place your ear against the door and hear muffled panting.</div></div>(if:$orange_red is false)[<button class="custom-btn btn1-8"><span><p>[[Stay Inside|A (RED walks out forest alone/has flare gun)]]</p></span></button>]<button class="custom-btn btn2-8"><span><p>[[Open Door]]</p></span></button><div class="sidebar"><div id="myModal" class="modal"><span class="close">×</span><img class="modal-content" id="img01"><div id="caption"></div></div><div class="section1"><img class="red" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Skull Crushed"></div><div class="section2"><img class="orange" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/orange.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Neck Snapped, Slammed"></div><div class="section3"><img class="yellow" id="myImg"src="https://martinez925.neocities.org/adventure_game/intro_outro/yellow.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Drowned"></div><div class="section4"><img class="green" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/green.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Suffocation"></div><div class="section5"> <img class="blue" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/blue.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Impaled"></div><div class="section6"><img class="purple" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/purple.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Poisoned, Decapitated"></div><hr><div class="section7"> <img class="hollow" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Hollowgast.png" alt="<br><b><u>Hollowgast</u></b><br>A chaotic tentacle-mouthed creature spawned from a failed experiment to grant itself immortality. Hollowgasts, (typically referred to as 'Hollows'), create auditory hallucinations to trick their prey and use the strength of their tongues to immobilize them."></div><div class="section8"> <img class="vampire" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Vampire.jpg" alt="<br><b><u>Vampire</u></b><br>An agile vampiric-winged creature succumed to infection by a parasite. These bat-like vampires are blind, using echolocation by making clicking sounds with their gills to hunt and navigate, which allows them to move in complete darkness."></div><div class="section9"> <img class="wendigo" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Wendigo.png" alt="<br><b><u>Wendigo</u></b><br>A violent cannibalistic-mutated creature possessed by the spirit of the Wendigo. Wendigos see movement: mobile persons are highlighted in their vision, otherwise they are usually unable to track those who remain still. Their skin is stretched taut against its body, making it immune to ballistics and sharp weapons."></div></div></div> </div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&display=swap');
body {
font-family: 'Annie Use Your Telescope', cursive;
margin-left: -384px;
margin-top: -57px;
backgound-color: black;
}
.grid {
display: grid;
grid-template-columns:auto auto auto auto auto auto auto auto auto; repeat(6, 1fr);
grid-template-rows:repeat(6, 1/2fr);
grid-gap:35px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.sidebar {
grid-column:1;
grid-row:1/7;
width: 100px;
position: fixed;
height: 100%;
background-color: #111;
top: 0;
left: 0;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.title {
grid-column:2/5;
grid-row:1;
text-align: left;
margin-top: -15px;
margin-left: 100px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 80px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
line-height: 1.7;
}
.butterfly {
grid-column:7;
grid-row:1;
margin-top: 10px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
overflow: hidden;
}
span.FORTUNE {
font-size: 30px;
color: white;
}
span.GUIDANCE {
font-size: 30px;
color: yellow;
}
span.DANGER {
font-size: 30px;
color: red;
}
span.LOSS {
font-size: 33px;
color: #183699;
}
.bf/*, .ob, .yb, .gb, .bb, .pb*/ {
transition: transform .2s;
}
.bf:hover {
transform: scale(1.1);
}
p.grow {
margin-top: 15px;
}
.under {
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 28px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text {
grid-column:2/8;
grid-row:3;
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 20px;
margin-left: 100px;
margin-top: -40px;
color:white;
line-height: 1.8;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text::first-letter {
color: #5BBC96;
padding: 0 .3rem;
margin: 0 .3rem 0 0;
border: 2px solid;
border-radius: 8px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 4rem;
float: left;
line-height: 1;
}
tw-link {
color: white;
font-size: 20px;
}
.btn1-8 {
grid-column:3;
grid-row:4;
font-family: 'Annie Use Your Telescope', cursive;
text-align: center;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.btn2-8 {
grid-column:6;
grid-row:4;
color: white;
font-family: 'Annie Use Your Telescope', cursive;
margin-left: 200px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.custom-btn {
width: 160px;
height: 60px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
font-family: 'Annie Use Your Telescope', cursive;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
border-color: white;
/*box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);*/
outline: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 400px;
margin-top: 20px;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://martinez925.neocities.org/adventure_game/intro_outro/night.jpg");
height: 100%;
width: 100%;
position: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* 8 */
.btn1-8, .btn2-8 {
/*background-color: #f0ecfc;
background-image: linear-gradient(315deg, white 0%, white 74%);*/
line-height: 42px;
padding: 0;
border: none;
}
.btn1-8 span, .btn2-8 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.btn1-8:before, .btn2-8:before,
.btn1-8:after, .btn2-8:after {
position: absolute;
content: "";
right: 0;
bottom: 0;
background: white;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8:before, .btn2-8:before{
height: 0%;
width: 2px;
}
.btn1-8:after, .btn2-8:after {
width: 0%;
height: 2px;
}
.btn1-8:hover:before, .btn2-8:hover:before {
height: 100%;
}
.btn1-8:hover:after, .btn2-8:hover:after {
width: 100%;
}
.btn1-8:hover, .btn2-8:hover{
background: transparent;
}
.btn1-8 span:hover, .btn2-8 span:hover{
color: lightgray;
}
.btn1-8 span:before, .btn2-8 span:before,
.btn1-8 span:after, .btn2-8 span:after {
position: absolute;
content: "";
left: 0;
top: 0;
background: #749dcf;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8 span:before, .btn2-8 span:before {
width: 2px;
height: 0%;
}
.btn1-8 span:after, .btn2-8 span:after{
height: 2px;
width: 0%;
}
.btn1-8 span:hover:before, .btn2-8 span:hover:before {
height: 100%;
}
.btn1-8 span:hover:after, .btn2-8 span:hover:after {
width: 100%;
}
p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*.choice1:hover, .choice2:hover {
background-color: #3e8e41;
color: white;
}
.crescent {
text-align: center;
transition: transform .2s;
}
.moon {
vertical-align: middle;
width:55px;
height: 55px;
margin-bottom: 10px;
}*/
.section1 {
text-align: center;
transition: transform .2s;
border-radius: 30px;
margin-left: 15px;
margin-right: 15px;
}
.red {
border: 3px solid #DD4571;
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
margin-top: 20px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section2 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
margin-left: 15px;
margin-right: 16px;
}
.orange {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
border: 3px solid #E48A32;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section3 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.yellow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border: 3px solid #FBE280;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section4 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.green {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #5BBC96;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section5 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.blue {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #336B90;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section6 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.purple {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #CA86F3;
padding: 3px;
margin-bottom: 7px;
animation: fadeIn 3s;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section7 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.hollow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #604D51;
padding: 3px;
margin-bottom: 9px;
margin-top: 6px;
object-fit: cover;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section8 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.vampire {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #924F25;
padding: 3px;
margin-top: 5px;
margin-bottom: 6px;
object-fit: cover;
object-position: 30% 100%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section9 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.wendigo {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #547A94;
padding: 3px;
margin-bottom: 10px;
object-fit: cover;
object-position: 30% 100%;
margin-top: 9px;
margin-bottom: 25px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
hr {
width: 50%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
#myImg {
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content {
margin: auto;
display: block;
width: 30%;
max-width: 300px;
border-radius: 10px;
font-family: 'Annie Use Your Telescope', cursive;
}
#caption {
margin: auto;
display: block;
font-size: 27px;
width: 100%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content,
#caption {
animation-name: zoom;
animation-duration: 0.6s;
font-family: 'Annie Use Your Telescope', cursive;
}
.close {
position: absolute;
top: 99px;
right: 100px;
color: #f1f1f1;
font-size: 130px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: gray;
text-decoration: none;
cursor: pointer;
}
/* ---SECTION END--- */
.section1:hover {
transform: scale(1.1);
}
.section2:hover {
transform: scale(1.1);
}
.section3:hover {
transform: scale(1.1);
}
.section4:hover {
transform: scale(1.1);
}
.section5:hover {
transform: scale(1.1);
}
.section6:hover {
transform: scale(1.1);
}
.section7:hover {
transform: scale(1.1);
}
.section8:hover {
transform: scale(1.1);
}
.section9:hover {
transform: scale(1.1);
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
</style>
<script>
// RED -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('red');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// ORANGE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('orange');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// GREEN -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('green');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// YELLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('yellow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BLUE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('blue');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// PURPLE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('purple');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// HOLLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('hollow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// VAMPIRE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('vampire');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// WENDIGO -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('wendigo');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BUTTERFLY -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('bf');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script>Double-click this passage to edit it.<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, intial-scale=1.0"><title>Adventure Game</title></head><body><div class="hero-image"><div class="grid"><!--<div class="butterfly"><img class="bf" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red-b.png" alt="<span class=LOSS><b><u>LOSS</u></b><br></span><br><br><p class=grow>Random Line of text this is where the fortune prediction will go.</p>" width="170px;"></div>--><div class="title">DARK: The Neighborhood<div class="under">Playing <mark style="background-color:#5BBC96;">GREEN</mark></div></div><div class="text"><span class="first-letter">Y</span>ou stay inside. After a few moments, the sound of footsteps resume and slowly begin to fade out. That's when you suddenly hear a loud crash and a shrilling screech that could deafen ears from the opposite side of the house. Then more screams erupt, except this time, you recognize the voice. You rush out the shed and run around the side of the house and <mark style="background-color:#DD4571; color:white;">RED</mark> is on the ground, looking up at the terrifying creature in front of him. Hovering inches away from him stands a tall, human-like white monster. The monster hovers low in a spider position, skinny to the bone—its limbs twice as long as a normal human. It stares at him with gray discolored eyes, boasting its claws for nails and teeth that look as sharp as knives. <br><br> <i><mark style="background-color:#DD4571; color:white;">RED</mark> shoots the flare gun.</i> <br><br> The Wendigo cries and retreats on top of the house, you help <mark style="background-color:#DD4571; color:white;">RED</mark> get up and start running out of the front yard into the empty neighborhood, taking quick glimpses at the wrecked houses falling apart. You hear the Wendigo screech and take a look to your side to find it jumping animalistically over the rooftops of the houses trying to catch up. You gaze straight ahead into the street, searching for any escape routes, and eye a sewage hole large enough to fit a person beneath the sidewalk. You both race to the sewer entrance and slide into it quickly and pull in <mark style="background-color:#DD4571; color:white;">RED</mark> right before a long white arm reaches in and grasps at the air. The monster retracts its arm empty handed as you and <mark style="background-color:#DD4571; color:white;">RED</mark> run into the sewer.</div></div><button class="custom-btn btn1-8"><span><p>[[Continue.|BLUE1]]</p></span></button><div class="sidebar"><div id="myModal" class="modal"><span class="close">×</span><img class="modal-content" id="img01"><div id="caption"></div></div><div class="section1"><img class="red" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Skull Crushed"></div><div class="section2"><img class="orange" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/orange.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Neck Snapped, Slammed"></div><div class="section3"><img class="yellow" id="myImg"src="https://martinez925.neocities.org/adventure_game/intro_outro/yellow.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Drowned"></div><div class="section4"><img class="green" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/green.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Suffocation"></div><div class="section5"> <img class="blue" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/blue.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Impaled"></div><div class="section6"><img class="purple" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/purple.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Poisoned, Decapitated"></div><hr><div class="section7"> <img class="hollow" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Hollowgast.png" alt="<br><b><u>Hollowgast</u></b><br>A chaotic tentacle-mouthed creature spawned from a failed experiment to grant itself immortality. Hollowgasts, (typically referred to as 'Hollows'), create auditory hallucinations to trick their prey and use the strength of their tongues to immobilize them."></div><div class="section8"> <img class="vampire" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Vampire.jpg" alt="<br><b><u>Vampire</u></b><br>An agile vampiric-winged creature succumed to infection by a parasite. These bat-like vampires are blind, using echolocation by making clicking sounds with their gills to hunt and navigate, which allows them to move in complete darkness."></div><div class="section9"> <img class="wendigo" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Wendigo.png" alt="<br><b><u>Wendigo</u></b><br>A violent cannibalistic-mutated creature possessed by the spirit of the Wendigo. Wendigos see movement: mobile persons are highlighted in their vision, otherwise they are usually unable to track those who remain still. Their skin is stretched taut against its body, making it immune to ballistics and sharp weapons."></div></div></div> </div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&display=swap');
body {
font-family: 'Annie Use Your Telescope', cursive;
margin-left: -384px;
margin-top: -57px;
backgound-color: black;
}
.grid {
display: grid;
grid-template-columns:auto auto auto auto auto auto auto auto auto; repeat(6, 1fr);
grid-template-rows:repeat(6, 1/2fr);
grid-gap:35px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.sidebar {
grid-column:1;
grid-row:1/7;
width: 100px;
position: fixed;
height: 100%;
background-color: #111;
top: 0;
left: 0;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.title {
grid-column:2/5;
grid-row:1;
text-align: left;
margin-top: -15px;
margin-left: 100px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 80px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
line-height: 1.7;
}
.butterfly {
grid-column:7;
grid-row:1;
margin-top: 10px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
overflow: hidden;
}
span.FORTUNE {
font-size: 30px;
color: white;
}
span.GUIDANCE {
font-size: 30px;
color: yellow;
}
span.DANGER {
font-size: 30px;
color: red;
}
span.LOSS {
font-size: 33px;
color: #183699;
}
.bf/*, .ob, .yb, .gb, .bb, .pb*/ {
transition: transform .2s;
}
.bf:hover {
transform: scale(1.1);
}
p.grow {
margin-top: 15px;
}
.under {
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 28px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text {
grid-column:2/8;
grid-row:3;
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 20px;
margin-left: 100px;
margin-top: -40px;
color:white;
line-height: 1.8;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text::first-letter {
color: #5BBC96;
padding: 0 .3rem;
margin: 0 .3rem 0 0;
border: 2px solid;
border-radius: 8px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 4rem;
float: left;
line-height: 1;
}
tw-link {
color: white;
font-size: 20px;
}
.btn1-8 {
grid-column:3;
grid-row:4;
font-family: 'Annie Use Your Telescope', cursive;
text-align: center;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.btn2-8 {
grid-column:6;
grid-row:4;
color: white;
font-family: 'Annie Use Your Telescope', cursive;
margin-left: 200px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.custom-btn {
width: 160px;
height: 60px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
font-family: 'Annie Use Your Telescope', cursive;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
border-color: white;
/*box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);*/
outline: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 700px;
margin-top: 20px;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://martinez925.neocities.org/adventure_game/intro_outro/night.jpg");
height: 100%;
width: 100%;
position: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* 8 */
.btn1-8, .btn2-8 {
/*background-color: #f0ecfc;
background-image: linear-gradient(315deg, white 0%, white 74%);*/
line-height: 42px;
padding: 0;
border: none;
}
.btn1-8 span, .btn2-8 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.btn1-8:before, .btn2-8:before,
.btn1-8:after, .btn2-8:after {
position: absolute;
content: "";
right: 0;
bottom: 0;
background: white;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8:before, .btn2-8:before{
height: 0%;
width: 2px;
}
.btn1-8:after, .btn2-8:after {
width: 0%;
height: 2px;
}
.btn1-8:hover:before, .btn2-8:hover:before {
height: 100%;
}
.btn1-8:hover:after, .btn2-8:hover:after {
width: 100%;
}
.btn1-8:hover, .btn2-8:hover{
background: transparent;
}
.btn1-8 span:hover, .btn2-8 span:hover{
color: lightgray;
}
.btn1-8 span:before, .btn2-8 span:before,
.btn1-8 span:after, .btn2-8 span:after {
position: absolute;
content: "";
left: 0;
top: 0;
background: #749dcf;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8 span:before, .btn2-8 span:before {
width: 2px;
height: 0%;
}
.btn1-8 span:after, .btn2-8 span:after{
height: 2px;
width: 0%;
}
.btn1-8 span:hover:before, .btn2-8 span:hover:before {
height: 100%;
}
.btn1-8 span:hover:after, .btn2-8 span:hover:after {
width: 100%;
}
p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*.choice1:hover, .choice2:hover {
background-color: #3e8e41;
color: white;
}
.crescent {
text-align: center;
transition: transform .2s;
}
.moon {
vertical-align: middle;
width:55px;
height: 55px;
margin-bottom: 10px;
}*/
.section1 {
text-align: center;
transition: transform .2s;
border-radius: 30px;
margin-left: 15px;
margin-right: 15px;
}
.red {
border: 3px solid #DD4571;
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
margin-top: 20px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section2 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
margin-left: 15px;
margin-right: 16px;
}
.orange {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
border: 3px solid #E48A32;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section3 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.yellow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border: 3px solid #FBE280;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section4 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.green {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #5BBC96;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section5 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.blue {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #336B90;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section6 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.purple {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #CA86F3;
padding: 3px;
margin-bottom: 7px;
animation: fadeIn 3s;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section7 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.hollow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #604D51;
padding: 3px;
margin-bottom: 9px;
margin-top: 6px;
object-fit: cover;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section8 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.vampire {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #924F25;
padding: 3px;
margin-top: 5px;
margin-bottom: 6px;
object-fit: cover;
object-position: 30% 100%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section9 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.wendigo {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #547A94;
padding: 3px;
margin-bottom: 10px;
object-fit: cover;
object-position: 30% 100%;
margin-top: 9px;
margin-bottom: 25px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
hr {
width: 50%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
#myImg {
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content {
margin: auto;
display: block;
width: 30%;
max-width: 300px;
border-radius: 10px;
font-family: 'Annie Use Your Telescope', cursive;
}
#caption {
margin: auto;
display: block;
font-size: 27px;
width: 100%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content,
#caption {
animation-name: zoom;
animation-duration: 0.6s;
font-family: 'Annie Use Your Telescope', cursive;
}
.close {
position: absolute;
top: 99px;
right: 100px;
color: #f1f1f1;
font-size: 130px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: gray;
text-decoration: none;
cursor: pointer;
}
/* ---SECTION END--- */
.section1:hover {
transform: scale(1.1);
}
.section2:hover {
transform: scale(1.1);
}
.section3:hover {
transform: scale(1.1);
}
.section4:hover {
transform: scale(1.1);
}
.section5:hover {
transform: scale(1.1);
}
.section6:hover {
transform: scale(1.1);
}
.section7:hover {
transform: scale(1.1);
}
.section8:hover {
transform: scale(1.1);
}
.section9:hover {
transform: scale(1.1);
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
</style>
<script>
// RED -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('red');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// ORANGE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('orange');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// GREEN -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('green');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// YELLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('yellow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BLUE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('blue');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// PURPLE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('purple');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// HOLLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('hollow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// VAMPIRE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('vampire');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// WENDIGO -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('wendigo');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BUTTERFLY -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('bf');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script> <!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, intial-scale=1.0"><title>Adventure Game</title></head><body><div class="hero-image"><div class="grid"><!--<div class="butterfly"><img class="bf" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red-b.png" alt="<span class=LOSS><b><u>LOSS</u></b><br></span><br><br><p class=grow>Random Line of text this is where the fortune prediction will go.</p>" width="170px;"></div>--><div class="title">DARK: The Neighborhood<div class="under">Playing <mark style="background-color:#5BBC96;">GREEN</mark></div></div><div class="text"><span class="first-letter">Y</span>ou stay inside. After a few moments, the sound of footsteps resume and slowly begin to fade out. That's when you suddenly hear a loud crash and a shrilling screech that could deafen ears from the opposite side of the house. Then more screams erupt, except this time, you recognize the voices. You rush out the shed and run around the side of the house and see <mark style="background-color:#DD4571; color:white;">RED</mark> and <mark style="background-color:#E48A32; color:white;">ORANGE</mark> on the ground, looking up at the terrifying creature in front of them. Hovering inches away from them stands a tall, human-like white monster. The monster hovers low in a spider position, skinny to the bone—its limbs twice as long as a normal human. It stares at them with gray discolored eyes, boasting its claws for nails and teeth that look as sharp as knives. <br><br> <i><mark style="background-color:#DD4571; color:white;">RED</mark> does not have the flare gun.</i> <br><br> The Wendigo screams in their faces and picks out <mark style="background-color:#DD4571; color:white;">RED</mark> from the floor. It lifts him up by the face and <mark style="background-color:#DD4571; color:white;">RED</mark> pulls desperately at its hand as muffled screams come out. You and <mark style="background-color:#E48A32; color:white;">ORANGE</mark> don’t think twice and just start running out of the front yard into the empty neighborhood. The monster uses both of its hands to press into <mark style="background-color:#DD4571; color:white;">RED</mark>’s head and in a matter of seconds his head caves in and explodes. By the time you’re both down the street you hear the Wendigo screech, you take look back and see it—now painted red, jumping animalistically over the rooftops of the houses trying to catch up. You search for any escape routes, and eye a sewage hole large enough to fit a person beneath the sidewalk. You both race to the sewer entrance and slide into it quickly.</div></div><button class="custom-btn btn1-8"><span><p>[[Continue.|BLUE1]]</p></span></button><div class="sidebar"><div id="myModal" class="modal"><span class="close">×</span><img class="modal-content" id="img01"><div id="caption"></div></div><div class="section1"><img class="red" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Skull Crushed"></div><div class="section2"><img class="orange" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/orange.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Neck Snapped, Slammed"></div><div class="section3"><img class="yellow" id="myImg"src="https://martinez925.neocities.org/adventure_game/intro_outro/yellow.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Drowned"></div><div class="section4"><img class="green" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/green.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Suffocation"></div><div class="section5"> <img class="blue" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/blue.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Impaled"></div><div class="section6"><img class="purple" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/purple.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Poisoned, Decapitated"></div><hr><div class="section7"> <img class="hollow" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Hollowgast.png" alt="<br><b><u>Hollowgast</u></b><br>A chaotic tentacle-mouthed creature spawned from a failed experiment to grant itself immortality. Hollowgasts, (typically referred to as 'Hollows'), create auditory hallucinations to trick their prey and use the strength of their tongues to immobilize them."></div><div class="section8"> <img class="vampire" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Vampire.jpg" alt="<br><b><u>Vampire</u></b><br>An agile vampiric-winged creature succumed to infection by a parasite. These bat-like vampires are blind, using echolocation by making clicking sounds with their gills to hunt and navigate, which allows them to move in complete darkness."></div><div class="section9"> <img class="wendigo" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Wendigo.png" alt="<br><b><u>Wendigo</u></b><br>A violent cannibalistic-mutated creature possessed by the spirit of the Wendigo. Wendigos see movement: mobile persons are highlighted in their vision, otherwise they are usually unable to track those who remain still. Their skin is stretched taut against its body, making it immune to ballistics and sharp weapons."></div></div></div> </div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&display=swap');
body {
font-family: 'Annie Use Your Telescope', cursive;
margin-left: -384px;
margin-top: -57px;
backgound-color: black;
}
.grid {
display: grid;
grid-template-columns:auto auto auto auto auto auto auto auto auto; repeat(6, 1fr);
grid-template-rows:repeat(6, 1/2fr);
grid-gap:35px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.sidebar {
grid-column:1;
grid-row:1/7;
width: 100px;
position: fixed;
height: 100%;
background-color: #111;
top: 0;
left: 0;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.title {
grid-column:2/5;
grid-row:1;
text-align: left;
margin-top: -15px;
margin-left: 100px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 80px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
line-height: 1.7;
}
.butterfly {
grid-column:7;
grid-row:1;
margin-top: 10px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
overflow: hidden;
}
span.FORTUNE {
font-size: 30px;
color: white;
}
span.GUIDANCE {
font-size: 30px;
color: yellow;
}
span.DANGER {
font-size: 30px;
color: red;
}
span.LOSS {
font-size: 33px;
color: #183699;
}
.bf/*, .ob, .yb, .gb, .bb, .pb*/ {
transition: transform .2s;
}
.bf:hover {
transform: scale(1.1);
}
p.grow {
margin-top: 15px;
}
.under {
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 28px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text {
grid-column:2/8;
grid-row:3;
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 20px;
margin-left: 100px;
margin-top: -40px;
color:white;
line-height: 1.8;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text::first-letter {
color: #5BBC96;
padding: 0 .3rem;
margin: 0 .3rem 0 0;
border: 2px solid;
border-radius: 8px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 4rem;
float: left;
line-height: 1;
}
tw-link {
color: white;
font-size: 20px;
}
.btn1-8 {
grid-column:3;
grid-row:4;
font-family: 'Annie Use Your Telescope', cursive;
text-align: center;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.btn2-8 {
grid-column:6;
grid-row:4;
color: white;
font-family: 'Annie Use Your Telescope', cursive;
margin-left: 200px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.custom-btn {
width: 160px;
height: 60px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
font-family: 'Annie Use Your Telescope', cursive;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
border-color: white;
/*box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);*/
outline: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 700px;
margin-top: 20px;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://martinez925.neocities.org/adventure_game/intro_outro/night.jpg");
height: 100%;
width: 100%;
position: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* 8 */
.btn1-8, .btn2-8 {
/*background-color: #f0ecfc;
background-image: linear-gradient(315deg, white 0%, white 74%);*/
line-height: 42px;
padding: 0;
border: none;
}
.btn1-8 span, .btn2-8 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.btn1-8:before, .btn2-8:before,
.btn1-8:after, .btn2-8:after {
position: absolute;
content: "";
right: 0;
bottom: 0;
background: white;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8:before, .btn2-8:before{
height: 0%;
width: 2px;
}
.btn1-8:after, .btn2-8:after {
width: 0%;
height: 2px;
}
.btn1-8:hover:before, .btn2-8:hover:before {
height: 100%;
}
.btn1-8:hover:after, .btn2-8:hover:after {
width: 100%;
}
.btn1-8:hover, .btn2-8:hover{
background: transparent;
}
.btn1-8 span:hover, .btn2-8 span:hover{
color: lightgray;
}
.btn1-8 span:before, .btn2-8 span:before,
.btn1-8 span:after, .btn2-8 span:after {
position: absolute;
content: "";
left: 0;
top: 0;
background: #749dcf;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8 span:before, .btn2-8 span:before {
width: 2px;
height: 0%;
}
.btn1-8 span:after, .btn2-8 span:after{
height: 2px;
width: 0%;
}
.btn1-8 span:hover:before, .btn2-8 span:hover:before {
height: 100%;
}
.btn1-8 span:hover:after, .btn2-8 span:hover:after {
width: 100%;
}
p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*.choice1:hover, .choice2:hover {
background-color: #3e8e41;
color: white;
}
.crescent {
text-align: center;
transition: transform .2s;
}
.moon {
vertical-align: middle;
width:55px;
height: 55px;
margin-bottom: 10px;
}*/
.section1 {
text-align: center;
transition: transform .2s;
border-radius: 30px;
margin-left: 15px;
margin-right: 15px;
}
.red {
border: 3px solid #DD4571;
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
margin-top: 20px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section2 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
margin-left: 15px;
margin-right: 16px;
}
.orange {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
border: 3px solid #E48A32;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section3 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.yellow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border: 3px solid #FBE280;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section4 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.green {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #5BBC96;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section5 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.blue {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #336B90;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section6 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.purple {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #CA86F3;
padding: 3px;
margin-bottom: 7px;
animation: fadeIn 3s;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section7 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.hollow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #604D51;
padding: 3px;
margin-bottom: 9px;
margin-top: 6px;
object-fit: cover;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section8 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.vampire {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #924F25;
padding: 3px;
margin-top: 5px;
margin-bottom: 6px;
object-fit: cover;
object-position: 30% 100%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section9 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.wendigo {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #547A94;
padding: 3px;
margin-bottom: 10px;
object-fit: cover;
object-position: 30% 100%;
margin-top: 9px;
margin-bottom: 25px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
hr {
width: 50%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
#myImg {
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content {
margin: auto;
display: block;
width: 30%;
max-width: 300px;
border-radius: 10px;
font-family: 'Annie Use Your Telescope', cursive;
}
#caption {
margin: auto;
display: block;
font-size: 27px;
width: 100%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content,
#caption {
animation-name: zoom;
animation-duration: 0.6s;
font-family: 'Annie Use Your Telescope', cursive;
}
.close {
position: absolute;
top: 99px;
right: 100px;
color: #f1f1f1;
font-size: 130px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: gray;
text-decoration: none;
cursor: pointer;
}
/* ---SECTION END--- */
.section1:hover {
transform: scale(1.1);
}
.section2:hover {
transform: scale(1.1);
}
.section3:hover {
transform: scale(1.1);
}
.section4:hover {
transform: scale(1.1);
}
.section5:hover {
transform: scale(1.1);
}
.section6:hover {
transform: scale(1.1);
}
.section7:hover {
transform: scale(1.1);
}
.section8:hover {
transform: scale(1.1);
}
.section9:hover {
transform: scale(1.1);
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
</style>
<script>
// RED -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('red');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// ORANGE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('orange');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// GREEN -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('green');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// YELLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('yellow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BLUE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('blue');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// PURPLE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('purple');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// HOLLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('hollow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// VAMPIRE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('vampire');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// WENDIGO -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('wendigo');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BUTTERFLY -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('bf');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script>
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, intial-scale=1.0"><title>Adventure Game</title></head><body><div class="hero-image"><div class="grid"><!--<div class="butterfly"><img class="bf" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red-b.png" alt="<span class=LOSS><b><u>LOSS</u></b><br></span><br><br><p class=grow>Random Line of text this is where the fortune prediction will go.</p>" width="170px;"></div>--><div class="title">DARK: The Neighborhood<div class="under">Playing <mark style="background-color:#5BBC96;">GREEN</mark></div></div><div class="text"><span class="first-letter">Y</span>ou stay inside. After a few moments, the sound of footsteps resume and slowly begin to fade out. That's when you suddenly hear a loud crash and a shrilling screech that could deafen ears from the opposite side of the house. Then more screams erupt, except this time, you recognize the voices. You rush out the shed and run around the side of the house and see <mark style="background-color:#DD4571; color:white;">RED</mark> and <mark style="background-color:#E48A32; color:white;">ORANGE</mark> on the ground, looking up at the terrifying creature in front of them. Hovering inches away from them stands a tall, human-like white monster. The monster hovers low in a spider position, skinny to the bone—its limbs twice as long as a normal human. It stares at them with gray discolored eyes, boasting its claws for nails and teeth that look as sharp as knives. <br><br> <i><mark style="background-color:#DD4571; color:white;">RED</mark> shoots the flare gun.</i> <br><br>The Wendigo cries and retreats on top of the house, you help <mark style="background-color:#DD4571; color:white;">RED</mark> and <mark style="background-color:#E48A32; color:white;">ORANGE</mark> get up and start running out of the front yard into the empty neighborhood, taking quick glimpses at the wrecked houses falling apart. You hear the Wendigo screech and take a look to your side to find it jumping animalistically over the rooftops of the houses trying to catch up. You gaze straight ahead into the street, searching for any escape routes, and eye a sewage hole large enough to fit a person beneath the sidewalk. You three race to the sewer entrance and slide yourselves into it quickly right before a long white arm reaches in and grasps at the air. The monster retracts its arm empty handed as you, <mark style="background-color:#E48A32; color:white;">ORANGE</mark>, and <mark style="background-color:#DD4571; color:white;">RED</mark> run into the sewer.</div></div><button class="custom-btn btn1-8"><span><p>[[Continue.|BLUE1]]</p></span></button><div class="sidebar"><div id="myModal" class="modal"><span class="close">×</span><img class="modal-content" id="img01"><div id="caption"></div></div><div class="section1"><img class="red" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Skull Crushed"></div><div class="section2"><img class="orange" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/orange.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Neck Snapped, Slammed"></div><div class="section3"><img class="yellow" id="myImg"src="https://martinez925.neocities.org/adventure_game/intro_outro/yellow.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Drowned"></div><div class="section4"><img class="green" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/green.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Suffocation"></div><div class="section5"> <img class="blue" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/blue.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Impaled"></div><div class="section6"><img class="purple" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/purple.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Poisoned, Decapitated"></div><hr><div class="section7"> <img class="hollow" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Hollowgast.png" alt="<br><b><u>Hollowgast</u></b><br>A chaotic tentacle-mouthed creature spawned from a failed experiment to grant itself immortality. Hollowgasts, (typically referred to as 'Hollows'), create auditory hallucinations to trick their prey and use the strength of their tongues to immobilize them."></div><div class="section8"> <img class="vampire" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Vampire.jpg" alt="<br><b><u>Vampire</u></b><br>An agile vampiric-winged creature succumed to infection by a parasite. These bat-like vampires are blind, using echolocation by making clicking sounds with their gills to hunt and navigate, which allows them to move in complete darkness."></div><div class="section9"> <img class="wendigo" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Wendigo.png" alt="<br><b><u>Wendigo</u></b><br>A violent cannibalistic-mutated creature possessed by the spirit of the Wendigo. Wendigos see movement: mobile persons are highlighted in their vision, otherwise they are usually unable to track those who remain still. Their skin is stretched taut against its body, making it immune to ballistics and sharp weapons."></div></div></div> </div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&display=swap');
body {
font-family: 'Annie Use Your Telescope', cursive;
margin-left: -384px;
margin-top: -57px;
backgound-color: black;
}
.grid {
display: grid;
grid-template-columns:auto auto auto auto auto auto auto auto auto; repeat(6, 1fr);
grid-template-rows:repeat(6, 1/2fr);
grid-gap:35px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.sidebar {
grid-column:1;
grid-row:1/7;
width: 100px;
position: fixed;
height: 100%;
background-color: #111;
top: 0;
left: 0;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.title {
grid-column:2/5;
grid-row:1;
text-align: left;
margin-top: -15px;
margin-left: 100px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 80px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
line-height: 1.7;
}
.butterfly {
grid-column:7;
grid-row:1;
margin-top: 10px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
overflow: hidden;
}
span.FORTUNE {
font-size: 30px;
color: white;
}
span.GUIDANCE {
font-size: 30px;
color: yellow;
}
span.DANGER {
font-size: 30px;
color: red;
}
span.LOSS {
font-size: 33px;
color: #183699;
}
.bf/*, .ob, .yb, .gb, .bb, .pb*/ {
transition: transform .2s;
}
.bf:hover {
transform: scale(1.1);
}
p.grow {
margin-top: 15px;
}
.under {
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 28px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text {
grid-column:2/8;
grid-row:3;
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 20px;
margin-left: 100px;
margin-top: -40px;
color:white;
line-height: 1.8;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text::first-letter {
color: #5BBC96;
padding: 0 .3rem;
margin: 0 .3rem 0 0;
border: 2px solid;
border-radius: 8px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 4rem;
float: left;
line-height: 1;
}
tw-link {
color: white;
font-size: 20px;
}
.btn1-8 {
grid-column:3;
grid-row:4;
font-family: 'Annie Use Your Telescope', cursive;
text-align: center;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.btn2-8 {
grid-column:6;
grid-row:4;
color: white;
font-family: 'Annie Use Your Telescope', cursive;
margin-left: 200px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.custom-btn {
width: 160px;
height: 60px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
font-family: 'Annie Use Your Telescope', cursive;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
border-color: white;
/*box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);*/
outline: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 700px;
margin-top: 20px;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://martinez925.neocities.org/adventure_game/intro_outro/night.jpg");
height: 100%;
width: 100%;
position: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* 8 */
.btn1-8, .btn2-8 {
/*background-color: #f0ecfc;
background-image: linear-gradient(315deg, white 0%, white 74%);*/
line-height: 42px;
padding: 0;
border: none;
}
.btn1-8 span, .btn2-8 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.btn1-8:before, .btn2-8:before,
.btn1-8:after, .btn2-8:after {
position: absolute;
content: "";
right: 0;
bottom: 0;
background: white;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8:before, .btn2-8:before{
height: 0%;
width: 2px;
}
.btn1-8:after, .btn2-8:after {
width: 0%;
height: 2px;
}
.btn1-8:hover:before, .btn2-8:hover:before {
height: 100%;
}
.btn1-8:hover:after, .btn2-8:hover:after {
width: 100%;
}
.btn1-8:hover, .btn2-8:hover{
background: transparent;
}
.btn1-8 span:hover, .btn2-8 span:hover{
color: lightgray;
}
.btn1-8 span:before, .btn2-8 span:before,
.btn1-8 span:after, .btn2-8 span:after {
position: absolute;
content: "";
left: 0;
top: 0;
background: #749dcf;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8 span:before, .btn2-8 span:before {
width: 2px;
height: 0%;
}
.btn1-8 span:after, .btn2-8 span:after{
height: 2px;
width: 0%;
}
.btn1-8 span:hover:before, .btn2-8 span:hover:before {
height: 100%;
}
.btn1-8 span:hover:after, .btn2-8 span:hover:after {
width: 100%;
}
p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*.choice1:hover, .choice2:hover {
background-color: #3e8e41;
color: white;
}
.crescent {
text-align: center;
transition: transform .2s;
}
.moon {
vertical-align: middle;
width:55px;
height: 55px;
margin-bottom: 10px;
}*/
.section1 {
text-align: center;
transition: transform .2s;
border-radius: 30px;
margin-left: 15px;
margin-right: 15px;
}
.red {
border: 3px solid #DD4571;
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
margin-top: 20px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section2 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
margin-left: 15px;
margin-right: 16px;
}
.orange {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
border: 3px solid #E48A32;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section3 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.yellow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border: 3px solid #FBE280;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section4 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.green {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #5BBC96;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section5 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.blue {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #336B90;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section6 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.purple {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #CA86F3;
padding: 3px;
margin-bottom: 7px;
animation: fadeIn 3s;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section7 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.hollow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #604D51;
padding: 3px;
margin-bottom: 9px;
margin-top: 6px;
object-fit: cover;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section8 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.vampire {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #924F25;
padding: 3px;
margin-top: 5px;
margin-bottom: 6px;
object-fit: cover;
object-position: 30% 100%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section9 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.wendigo {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #547A94;
padding: 3px;
margin-bottom: 10px;
object-fit: cover;
object-position: 30% 100%;
margin-top: 9px;
margin-bottom: 25px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
hr {
width: 50%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
#myImg {
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content {
margin: auto;
display: block;
width: 30%;
max-width: 300px;
border-radius: 10px;
font-family: 'Annie Use Your Telescope', cursive;
}
#caption {
margin: auto;
display: block;
font-size: 27px;
width: 100%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content,
#caption {
animation-name: zoom;
animation-duration: 0.6s;
font-family: 'Annie Use Your Telescope', cursive;
}
.close {
position: absolute;
top: 99px;
right: 100px;
color: #f1f1f1;
font-size: 130px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: gray;
text-decoration: none;
cursor: pointer;
}
/* ---SECTION END--- */
.section1:hover {
transform: scale(1.1);
}
.section2:hover {
transform: scale(1.1);
}
.section3:hover {
transform: scale(1.1);
}
.section4:hover {
transform: scale(1.1);
}
.section5:hover {
transform: scale(1.1);
}
.section6:hover {
transform: scale(1.1);
}
.section7:hover {
transform: scale(1.1);
}
.section8:hover {
transform: scale(1.1);
}
.section9:hover {
transform: scale(1.1);
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
</style>
<script>
// RED -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('red');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// ORANGE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('orange');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// GREEN -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('green');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// YELLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('yellow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BLUE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('blue');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// PURPLE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('purple');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// HOLLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('hollow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// VAMPIRE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('vampire');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// WENDIGO -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('wendigo');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BUTTERFLY -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('bf');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script> Double-click this passage to edit it.<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, intial-scale=1.0"><title>Adventure Game</title></head><body><div class="hero-image"><div class="grid"><!--<div class="butterfly"><img class="bf" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red-b.png" alt="<span class=LOSS><b><u>LOSS</u></b><br></span><br><br><p class=grow>Random Line of text this is where the fortune prediction will go.</p>" width="170px;"></div>--><div class="title">DARK: The School<div class="under">Playing <mark style="background-color:#CA86F3;">PURPLE</mark></div></div><div class="text"><span class="first-letter">Y</span>ou slowly step back from the classroom, making sure your footsteps are as silent. You walk to the door and push it open, reverberating a loud ugly creaky noise in the entire hallway. You start running back to the gate in hysteria, in doing so, you trip and fall on the pavement and your flashlight goes flying out of your hand. You hear the hallway doors burst open as you get up from the floor.</div></div><button class="custom-btn btn1-8"><span><p>[[Leave Flashlight]]</p></span></button><button class="custom-btn btn2-8"><span><p>[[Grab Flashlight]]</p></span></button><div class="sidebar"><div id="myModal" class="modal"><span class="close">×</span><img class="modal-content" id="img01"><div id="caption"></div></div><div class="section1"><img class="red" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Skull Crushed"></div><div class="section2"><img class="orange" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/orange.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Neck Snapped, Slammed"></div><div class="section3"><img class="yellow" id="myImg"src="https://martinez925.neocities.org/adventure_game/intro_outro/yellow.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Drowned"></div><div class="section4"><img class="green" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/green.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Suffocation"></div><div class="section5"> <img class="blue" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/blue.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Impaled"></div><div class="section6"><img class="purple" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/purple.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Poisoned, Decapitated"></div><hr><div class="section7"> <img class="hollow" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Hollowgast.png" alt="<br><b><u>Hollowgast</u></b><br>A chaotic tentacle-mouthed creature spawned from a failed experiment to grant itself immortality. Hollowgasts, (typically referred to as 'Hollows'), create auditory hallucinations to trick their prey and use the strength of their tongues to immobilize them."></div><div class="section8"> <img class="vampire" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Vampire.jpg" alt="<br><b><u>Vampire</u></b><br>An agile vampiric-winged creature succumed to infection by a parasite. These bat-like vampires are blind, using echolocation by making clicking sounds with their gills to hunt and navigate, which allows them to move in complete darkness."></div><div class="section9"> <img class="wendigo" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Wendigo.png" alt="<br><b><u>Wendigo</u></b><br>A violent cannibalistic-mutated creature possessed by the spirit of the Wendigo. Wendigos see movement: mobile persons are highlighted in their vision, otherwise they are usually unable to track those who remain still. Their skin is stretched taut against its body, making it immune to ballistics and sharp weapons."></div></div></div> </div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&display=swap');
body {
font-family: 'Annie Use Your Telescope', cursive;
margin-left: -384px;
margin-top: -57px;
backgound-color: black;
}
.grid {
display: grid;
grid-template-columns:auto auto auto auto auto auto auto auto auto; repeat(6, 1fr);
grid-template-rows:repeat(6, 1/2fr);
grid-gap:35px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.sidebar {
grid-column:1;
grid-row:1/7;
width: 100px;
position: fixed;
height: 100%;
background-color: #111;
top: 0;
left: 0;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.title {
grid-column:2/5;
grid-row:1;
text-align: left;
margin-top: -15px;
margin-left: 100px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 80px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
line-height: 1.7;
}
.butterfly {
grid-column:7;
grid-row:1;
margin-top: 10px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
overflow: hidden;
}
span.FORTUNE {
font-size: 30px;
color: white;
}
span.GUIDANCE {
font-size: 30px;
color: yellow;
}
span.DANGER {
font-size: 30px;
color: red;
}
span.LOSS {
font-size: 33px;
color: #183699;
}
.bf/*, .ob, .yb, .gb, .bb, .pb*/ {
transition: transform .2s;
}
.bf:hover {
transform: scale(1.1);
}
p.grow {
margin-top: 15px;
}
.under {
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 28px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text {
grid-column:2/8;
grid-row:3;
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 20px;
margin-left: 100px;
margin-top: -40px;
color:white;
line-height: 1.8;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text::first-letter {
color: #CA86F3;
padding: 0 .3rem;
margin: 0 .3rem 0 0;
border: 2px solid;
border-radius: 8px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 4rem;
float: left;
line-height: 1;
}
tw-link {
color: white;
font-size: 20px;
}
.btn1-8 {
grid-column:3;
grid-row:4;
font-family: 'Annie Use Your Telescope', cursive;
text-align: center;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.btn2-8 {
grid-column:6;
grid-row:4;
color: white;
font-family: 'Annie Use Your Telescope', cursive;
margin-left: 200px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.custom-btn {
width: 160px;
height: 60px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
font-family: 'Annie Use Your Telescope', cursive;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
border-color: white;
/*box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);*/
outline: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 400px;
margin-top: 20px;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://martinez925.neocities.org/adventure_game/intro_outro/night.jpg");
height: 100%;
width: 100%;
position: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* 8 */
.btn1-8, .btn2-8 {
/*background-color: #f0ecfc;
background-image: linear-gradient(315deg, white 0%, white 74%);*/
line-height: 42px;
padding: 0;
border: none;
}
.btn1-8 span, .btn2-8 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.btn1-8:before, .btn2-8:before,
.btn1-8:after, .btn2-8:after {
position: absolute;
content: "";
right: 0;
bottom: 0;
background: white;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8:before, .btn2-8:before{
height: 0%;
width: 2px;
}
.btn1-8:after, .btn2-8:after {
width: 0%;
height: 2px;
}
.btn1-8:hover:before, .btn2-8:hover:before {
height: 100%;
}
.btn1-8:hover:after, .btn2-8:hover:after {
width: 100%;
}
.btn1-8:hover, .btn2-8:hover{
background: transparent;
}
.btn1-8 span:hover, .btn2-8 span:hover{
color: lightgray;
}
.btn1-8 span:before, .btn2-8 span:before,
.btn1-8 span:after, .btn2-8 span:after {
position: absolute;
content: "";
left: 0;
top: 0;
background: #749dcf;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8 span:before, .btn2-8 span:before {
width: 2px;
height: 0%;
}
.btn1-8 span:after, .btn2-8 span:after{
height: 2px;
width: 0%;
}
.btn1-8 span:hover:before, .btn2-8 span:hover:before {
height: 100%;
}
.btn1-8 span:hover:after, .btn2-8 span:hover:after {
width: 100%;
}
p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*.choice1:hover, .choice2:hover {
background-color: #3e8e41;
color: white;
}
.crescent {
text-align: center;
transition: transform .2s;
}
.moon {
vertical-align: middle;
width:55px;
height: 55px;
margin-bottom: 10px;
}*/
.section1 {
text-align: center;
transition: transform .2s;
border-radius: 30px;
margin-left: 15px;
margin-right: 15px;
}
.red {
border: 3px solid #DD4571;
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
margin-top: 20px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section2 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
margin-left: 15px;
margin-right: 16px;
}
.orange {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
border: 3px solid #E48A32;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section3 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.yellow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border: 3px solid #FBE280;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section4 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.green {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #5BBC96;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section5 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.blue {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #336B90;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section6 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.purple {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #CA86F3;
padding: 3px;
margin-bottom: 7px;
animation: fadeIn 3s;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section7 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.hollow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #604D51;
padding: 3px;
margin-bottom: 9px;
margin-top: 6px;
object-fit: cover;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section8 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.vampire {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #924F25;
padding: 3px;
margin-top: 5px;
margin-bottom: 6px;
object-fit: cover;
object-position: 30% 100%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section9 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.wendigo {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #547A94;
padding: 3px;
margin-bottom: 10px;
object-fit: cover;
object-position: 30% 100%;
margin-top: 9px;
margin-bottom: 25px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
hr {
width: 50%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
#myImg {
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content {
margin: auto;
display: block;
width: 30%;
max-width: 300px;
border-radius: 10px;
font-family: 'Annie Use Your Telescope', cursive;
}
#caption {
margin: auto;
display: block;
font-size: 27px;
width: 100%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content,
#caption {
animation-name: zoom;
animation-duration: 0.6s;
font-family: 'Annie Use Your Telescope', cursive;
}
.close {
position: absolute;
top: 99px;
right: 100px;
color: #f1f1f1;
font-size: 130px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: gray;
text-decoration: none;
cursor: pointer;
}
/* ---SECTION END--- */
.section1:hover {
transform: scale(1.1);
}
.section2:hover {
transform: scale(1.1);
}
.section3:hover {
transform: scale(1.1);
}
.section4:hover {
transform: scale(1.1);
}
.section5:hover {
transform: scale(1.1);
}
.section6:hover {
transform: scale(1.1);
}
.section7:hover {
transform: scale(1.1);
}
.section8:hover {
transform: scale(1.1);
}
.section9:hover {
transform: scale(1.1);
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
</style>
<script>
// RED -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('red');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// ORANGE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('orange');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// GREEN -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('green');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// YELLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('yellow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BLUE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('blue');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// PURPLE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('purple');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// HOLLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('hollow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// VAMPIRE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('vampire');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// WENDIGO -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('wendigo');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BUTTERFLY -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('bf');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script><!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, intial-scale=1.0"><title>Adventure Game</title></head><body><div class="hero-image"><div class="grid"><!--<div class="butterfly"><img class="bf" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red-b.png" alt="<span class=LOSS><b><u>LOSS</u></b><br></span><br><br><p class=grow>Random Line of text this is where the fortune prediction will go.</p>" width="170px;"></div>--><div class="title">DARK: The School<div class="under">Playing <mark style="background-color:#CA86F3;">PURPLE</mark></div></div><div class="text"><span class="first-letter">Y</span>ou abandon your flashlight and start running in the outdoor hallway, the Vampire following in pursuit. You look behind you and see the creature clicking its gills, catching up to you at an incredible speed. At this rate, you won’t be able to reach the gate in time. You look back and see the outdoor hallway is coming to a split.</div></div><button class="custom-btn btn1-8"><span><p>[[Juke Left]]</p></span></button><button class="custom-btn btn2-8"><span><p>[[Juke Right]]</p></span></button><div class="sidebar"><div id="myModal" class="modal"><span class="close">×</span><img class="modal-content" id="img01"><div id="caption"></div></div><div class="section1"><img class="red" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Skull Crushed"></div><div class="section2"><img class="orange" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/orange.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Neck Snapped, Slammed"></div><div class="section3"><img class="yellow" id="myImg"src="https://martinez925.neocities.org/adventure_game/intro_outro/yellow.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Drowned"></div><div class="section4"><img class="green" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/green.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Suffocation"></div><div class="section5"> <img class="blue" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/blue.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Impaled"></div><div class="section6"><img class="purple" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/purple.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Poisoned, Decapitated"></div><hr><div class="section7"> <img class="hollow" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Hollowgast.png" alt="<br><b><u>Hollowgast</u></b><br>A chaotic tentacle-mouthed creature spawned from a failed experiment to grant itself immortality. Hollowgasts, (typically referred to as 'Hollows'), create auditory hallucinations to trick their prey and use the strength of their tongues to immobilize them."></div><div class="section8"> <img class="vampire" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Vampire.jpg" alt="<br><b><u>Vampire</u></b><br>An agile vampiric-winged creature succumed to infection by a parasite. These bat-like vampires are blind, using echolocation by making clicking sounds with their gills to hunt and navigate, which allows them to move in complete darkness."></div><div class="section9"> <img class="wendigo" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Wendigo.png" alt="<br><b><u>Wendigo</u></b><br>A violent cannibalistic-mutated creature possessed by the spirit of the Wendigo. Wendigos see movement: mobile persons are highlighted in their vision, otherwise they are usually unable to track those who remain still. Their skin is stretched taut against its body, making it immune to ballistics and sharp weapons."></div></div></div> </div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&display=swap');
body {
font-family: 'Annie Use Your Telescope', cursive;
margin-left: -384px;
margin-top: -57px;
backgound-color: black;
}
.grid {
display: grid;
grid-template-columns:auto auto auto auto auto auto auto auto auto; repeat(6, 1fr);
grid-template-rows:repeat(6, 1/2fr);
grid-gap:35px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.sidebar {
grid-column:1;
grid-row:1/7;
width: 100px;
position: fixed;
height: 100%;
background-color: #111;
top: 0;
left: 0;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.title {
grid-column:2/5;
grid-row:1;
text-align: left;
margin-top: -15px;
margin-left: 100px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 80px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
line-height: 1.7;
}
.butterfly {
grid-column:7;
grid-row:1;
margin-top: 10px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
overflow: hidden;
}
span.FORTUNE {
font-size: 30px;
color: white;
}
span.GUIDANCE {
font-size: 30px;
color: yellow;
}
span.DANGER {
font-size: 30px;
color: red;
}
span.LOSS {
font-size: 33px;
color: #183699;
}
.bf/*, .ob, .yb, .gb, .bb, .pb*/ {
transition: transform .2s;
}
.bf:hover {
transform: scale(1.1);
}
p.grow {
margin-top: 15px;
}
.under {
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 28px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text {
grid-column:2/8;
grid-row:3;
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 20px;
margin-left: 100px;
margin-top: -40px;
color:white;
line-height: 1.8;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text::first-letter {
color: #CA86F3;
padding: 0 .3rem;
margin: 0 .3rem 0 0;
border: 2px solid;
border-radius: 8px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 4rem;
float: left;
line-height: 1;
}
tw-link {
color: white;
font-size: 20px;
}
.btn1-8 {
grid-column:3;
grid-row:4;
font-family: 'Annie Use Your Telescope', cursive;
text-align: center;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.btn2-8 {
grid-column:6;
grid-row:4;
color: white;
font-family: 'Annie Use Your Telescope', cursive;
margin-left: 200px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.custom-btn {
width: 160px;
height: 60px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
font-family: 'Annie Use Your Telescope', cursive;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
border-color: white;
/*box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);*/
outline: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 400px;
margin-top: 20px;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://martinez925.neocities.org/adventure_game/intro_outro/night.jpg");
height: 100%;
width: 100%;
position: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* 8 */
.btn1-8, .btn2-8 {
/*background-color: #f0ecfc;
background-image: linear-gradient(315deg, white 0%, white 74%);*/
line-height: 42px;
padding: 0;
border: none;
}
.btn1-8 span, .btn2-8 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.btn1-8:before, .btn2-8:before,
.btn1-8:after, .btn2-8:after {
position: absolute;
content: "";
right: 0;
bottom: 0;
background: white;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8:before, .btn2-8:before{
height: 0%;
width: 2px;
}
.btn1-8:after, .btn2-8:after {
width: 0%;
height: 2px;
}
.btn1-8:hover:before, .btn2-8:hover:before {
height: 100%;
}
.btn1-8:hover:after, .btn2-8:hover:after {
width: 100%;
}
.btn1-8:hover, .btn2-8:hover{
background: transparent;
}
.btn1-8 span:hover, .btn2-8 span:hover{
color: lightgray;
}
.btn1-8 span:before, .btn2-8 span:before,
.btn1-8 span:after, .btn2-8 span:after {
position: absolute;
content: "";
left: 0;
top: 0;
background: #749dcf;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8 span:before, .btn2-8 span:before {
width: 2px;
height: 0%;
}
.btn1-8 span:after, .btn2-8 span:after{
height: 2px;
width: 0%;
}
.btn1-8 span:hover:before, .btn2-8 span:hover:before {
height: 100%;
}
.btn1-8 span:hover:after, .btn2-8 span:hover:after {
width: 100%;
}
p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*.choice1:hover, .choice2:hover {
background-color: #3e8e41;
color: white;
}
.crescent {
text-align: center;
transition: transform .2s;
}
.moon {
vertical-align: middle;
width:55px;
height: 55px;
margin-bottom: 10px;
}*/
.section1 {
text-align: center;
transition: transform .2s;
border-radius: 30px;
margin-left: 15px;
margin-right: 15px;
}
.red {
border: 3px solid #DD4571;
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
margin-top: 20px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section2 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
margin-left: 15px;
margin-right: 16px;
}
.orange {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
border: 3px solid #E48A32;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section3 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.yellow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border: 3px solid #FBE280;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section4 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.green {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #5BBC96;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section5 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.blue {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #336B90;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section6 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.purple {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #CA86F3;
padding: 3px;
margin-bottom: 7px;
animation: fadeIn 3s;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section7 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.hollow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #604D51;
padding: 3px;
margin-bottom: 9px;
margin-top: 6px;
object-fit: cover;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section8 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.vampire {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #924F25;
padding: 3px;
margin-top: 5px;
margin-bottom: 6px;
object-fit: cover;
object-position: 30% 100%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section9 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.wendigo {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #547A94;
padding: 3px;
margin-bottom: 10px;
object-fit: cover;
object-position: 30% 100%;
margin-top: 9px;
margin-bottom: 25px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
hr {
width: 50%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
#myImg {
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content {
margin: auto;
display: block;
width: 30%;
max-width: 300px;
border-radius: 10px;
font-family: 'Annie Use Your Telescope', cursive;
}
#caption {
margin: auto;
display: block;
font-size: 27px;
width: 100%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content,
#caption {
animation-name: zoom;
animation-duration: 0.6s;
font-family: 'Annie Use Your Telescope', cursive;
}
.close {
position: absolute;
top: 99px;
right: 100px;
color: #f1f1f1;
font-size: 130px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: gray;
text-decoration: none;
cursor: pointer;
}
/* ---SECTION END--- */
.section1:hover {
transform: scale(1.1);
}
.section2:hover {
transform: scale(1.1);
}
.section3:hover {
transform: scale(1.1);
}
.section4:hover {
transform: scale(1.1);
}
.section5:hover {
transform: scale(1.1);
}
.section6:hover {
transform: scale(1.1);
}
.section7:hover {
transform: scale(1.1);
}
.section8:hover {
transform: scale(1.1);
}
.section9:hover {
transform: scale(1.1);
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
</style>
<script>
// RED -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('red');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// ORANGE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('orange');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// GREEN -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('green');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// YELLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('yellow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BLUE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('blue');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// PURPLE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('purple');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// HOLLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('hollow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// VAMPIRE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('vampire');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// WENDIGO -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('wendigo');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BUTTERFLY -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('bf');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script>
(set:$purplehaslight to false) <!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, intial-scale=1.0"><title>Adventure Game</title></head><body><div class="hero-image"><div class="grid"><!--<div class="butterfly"><img class="bf" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red-b.png" alt="<span class=LOSS><b><u>LOSS</u></b><br></span><br><br><p class=grow>Random Line of text this is where the fortune prediction will go.</p>" width="170px;"></div>--><div class="title">DARK: The School<div class="under">Playing <mark style="background-color:#CA86F3;">PURPLE</mark></div></div><div class="text"><span class="first-letter">Y</span>ou grab your flashlight and start running in the outdoor hallway, the Vampire following in pursuit. You look behind you and see the creature clicking its gills, catching up to you at an incredible speed. At this rate, you won’t be able to reach the gate in time. You look back and see the outdoor hallway is coming to a split.
</div></div><button class="custom-btn btn1-8"><span><p>[[Juke Left]]</p></span></button><button class="custom-btn btn2-8"><span><p>[[Juke Right]]</p></span></button><div class="sidebar"><div id="myModal" class="modal"><span class="close">×</span><img class="modal-content" id="img01"><div id="caption"></div></div><div class="section1"><img class="red" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Skull Crushed"></div><div class="section2"><img class="orange" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/orange.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Neck Snapped, Slammed"></div><div class="section3"><img class="yellow" id="myImg"src="https://martinez925.neocities.org/adventure_game/intro_outro/yellow.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Drowned"></div><div class="section4"><img class="green" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/green.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Suffocation"></div><div class="section5"> <img class="blue" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/blue.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Impaled"></div><div class="section6"><img class="purple" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/purple.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Poisoned, Decapitated"></div><hr><div class="section7"> <img class="hollow" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Hollowgast.png" alt="<br><b><u>Hollowgast</u></b><br>A chaotic tentacle-mouthed creature spawned from a failed experiment to grant itself immortality. Hollowgasts, (typically referred to as 'Hollows'), create auditory hallucinations to trick their prey and use the strength of their tongues to immobilize them."></div><div class="section8"> <img class="vampire" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Vampire.jpg" alt="<br><b><u>Vampire</u></b><br>An agile vampiric-winged creature succumed to infection by a parasite. These bat-like vampires are blind, using echolocation by making clicking sounds with their gills to hunt and navigate, which allows them to move in complete darkness."></div><div class="section9"> <img class="wendigo" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Wendigo.png" alt="<br><b><u>Wendigo</u></b><br>A violent cannibalistic-mutated creature possessed by the spirit of the Wendigo. Wendigos see movement: mobile persons are highlighted in their vision, otherwise they are usually unable to track those who remain still. Their skin is stretched taut against its body, making it immune to ballistics and sharp weapons."></div></div></div> </div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&display=swap');
body {
font-family: 'Annie Use Your Telescope', cursive;
margin-left: -384px;
margin-top: -57px;
backgound-color: black;
}
.grid {
display: grid;
grid-template-columns:auto auto auto auto auto auto auto auto auto; repeat(6, 1fr);
grid-template-rows:repeat(6, 1/2fr);
grid-gap:35px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.sidebar {
grid-column:1;
grid-row:1/7;
width: 100px;
position: fixed;
height: 100%;
background-color: #111;
top: 0;
left: 0;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.title {
grid-column:2/5;
grid-row:1;
text-align: left;
margin-top: -15px;
margin-left: 100px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 80px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
line-height: 1.7;
}
.butterfly {
grid-column:7;
grid-row:1;
margin-top: 10px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
overflow: hidden;
}
span.FORTUNE {
font-size: 30px;
color: white;
}
span.GUIDANCE {
font-size: 30px;
color: yellow;
}
span.DANGER {
font-size: 30px;
color: red;
}
span.LOSS {
font-size: 33px;
color: #183699;
}
.bf/*, .ob, .yb, .gb, .bb, .pb*/ {
transition: transform .2s;
}
.bf:hover {
transform: scale(1.1);
}
p.grow {
margin-top: 15px;
}
.under {
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 28px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text {
grid-column:2/8;
grid-row:3;
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 20px;
margin-left: 100px;
margin-top: -40px;
color:white;
line-height: 1.8;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text::first-letter {
color: #CA86F3;
padding: 0 .3rem;
margin: 0 .3rem 0 0;
border: 2px solid;
border-radius: 8px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 4rem;
float: left;
line-height: 1;
}
tw-link {
color: white;
font-size: 20px;
}
.btn1-8 {
grid-column:3;
grid-row:4;
font-family: 'Annie Use Your Telescope', cursive;
text-align: center;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.btn2-8 {
grid-column:6;
grid-row:4;
color: white;
font-family: 'Annie Use Your Telescope', cursive;
margin-left: 200px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.custom-btn {
width: 160px;
height: 60px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
font-family: 'Annie Use Your Telescope', cursive;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
border-color: white;
/*box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);*/
outline: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 400px;
margin-top: 20px;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://martinez925.neocities.org/adventure_game/intro_outro/night.jpg");
height: 100%;
width: 100%;
position: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* 8 */
.btn1-8, .btn2-8 {
/*background-color: #f0ecfc;
background-image: linear-gradient(315deg, white 0%, white 74%);*/
line-height: 42px;
padding: 0;
border: none;
}
.btn1-8 span, .btn2-8 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.btn1-8:before, .btn2-8:before,
.btn1-8:after, .btn2-8:after {
position: absolute;
content: "";
right: 0;
bottom: 0;
background: white;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8:before, .btn2-8:before{
height: 0%;
width: 2px;
}
.btn1-8:after, .btn2-8:after {
width: 0%;
height: 2px;
}
.btn1-8:hover:before, .btn2-8:hover:before {
height: 100%;
}
.btn1-8:hover:after, .btn2-8:hover:after {
width: 100%;
}
.btn1-8:hover, .btn2-8:hover{
background: transparent;
}
.btn1-8 span:hover, .btn2-8 span:hover{
color: lightgray;
}
.btn1-8 span:before, .btn2-8 span:before,
.btn1-8 span:after, .btn2-8 span:after {
position: absolute;
content: "";
left: 0;
top: 0;
background: #749dcf;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8 span:before, .btn2-8 span:before {
width: 2px;
height: 0%;
}
.btn1-8 span:after, .btn2-8 span:after{
height: 2px;
width: 0%;
}
.btn1-8 span:hover:before, .btn2-8 span:hover:before {
height: 100%;
}
.btn1-8 span:hover:after, .btn2-8 span:hover:after {
width: 100%;
}
p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*.choice1:hover, .choice2:hover {
background-color: #3e8e41;
color: white;
}
.crescent {
text-align: center;
transition: transform .2s;
}
.moon {
vertical-align: middle;
width:55px;
height: 55px;
margin-bottom: 10px;
}*/
.section1 {
text-align: center;
transition: transform .2s;
border-radius: 30px;
margin-left: 15px;
margin-right: 15px;
}
.red {
border: 3px solid #DD4571;
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
margin-top: 20px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section2 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
margin-left: 15px;
margin-right: 16px;
}
.orange {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
border: 3px solid #E48A32;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section3 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.yellow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border: 3px solid #FBE280;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section4 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.green {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #5BBC96;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section5 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.blue {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #336B90;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section6 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.purple {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #CA86F3;
padding: 3px;
margin-bottom: 7px;
animation: fadeIn 3s;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section7 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.hollow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #604D51;
padding: 3px;
margin-bottom: 9px;
margin-top: 6px;
object-fit: cover;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section8 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.vampire {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #924F25;
padding: 3px;
margin-top: 5px;
margin-bottom: 6px;
object-fit: cover;
object-position: 30% 100%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section9 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.wendigo {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #547A94;
padding: 3px;
margin-bottom: 10px;
object-fit: cover;
object-position: 30% 100%;
margin-top: 9px;
margin-bottom: 25px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
hr {
width: 50%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
#myImg {
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content {
margin: auto;
display: block;
width: 30%;
max-width: 300px;
border-radius: 10px;
font-family: 'Annie Use Your Telescope', cursive;
}
#caption {
margin: auto;
display: block;
font-size: 27px;
width: 100%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content,
#caption {
animation-name: zoom;
animation-duration: 0.6s;
font-family: 'Annie Use Your Telescope', cursive;
}
.close {
position: absolute;
top: 99px;
right: 100px;
color: #f1f1f1;
font-size: 130px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: gray;
text-decoration: none;
cursor: pointer;
}
/* ---SECTION END--- */
.section1:hover {
transform: scale(1.1);
}
.section2:hover {
transform: scale(1.1);
}
.section3:hover {
transform: scale(1.1);
}
.section4:hover {
transform: scale(1.1);
}
.section5:hover {
transform: scale(1.1);
}
.section6:hover {
transform: scale(1.1);
}
.section7:hover {
transform: scale(1.1);
}
.section8:hover {
transform: scale(1.1);
}
.section9:hover {
transform: scale(1.1);
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
</style>
<script>
// RED -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('red');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// ORANGE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('orange');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// GREEN -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('green');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// YELLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('yellow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BLUE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('blue');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// PURPLE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('purple');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// HOLLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('hollow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// VAMPIRE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('vampire');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// WENDIGO -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('wendigo');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BUTTERFLY -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('bf');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script>
(set:$purplehaslight to true) <!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, intial-scale=1.0"><title>Adventure Game</title></head><body><div class="hero-image"><div class="grid"><!--<div class="butterfly"><img class="bf" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red-b.png" alt="<span class=LOSS><b><u>LOSS</u></b><br></span><br><br><p class=grow>Random Line of text this is where the fortune prediction will go.</p>" width="170px;"></div>--><div class="title">DARK: The School<div class="under">Playing <mark style="background-color:#CA86F3;">PURPLE</mark></div></div><div class="text"><span class="first-letter">T</span>o give your turn leverage, you juke to the left and grab one of the polls that are holding up the outdoor hallway. At your abrupt turn, the Vampire slipped and crashed into a metal barrier—creating a wider distance between both of you. You spot the entrance to the school's cafeteria building ahead of you and hurry in, barricading the door with one of the surrounding tables. You catch a glimpse of the Vampire racing towards you via the doorway glass. You search the area for a quick spot to hide behind. </div></div><button class="custom-btn btn1-8"><span><p>[[Dining Hall Pillar]]</p></span></button><button class="custom-btn btn2-8"><span><p>[[Cafeteria Counter]]</p></span></button><div class="sidebar"><div id="myModal" class="modal"><span class="close">×</span><img class="modal-content" id="img01"><div id="caption"></div></div><div class="section1"><img class="red" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Skull Crushed"></div><div class="section2"><img class="orange" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/orange.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Neck Snapped, Slammed"></div><div class="section3"><img class="yellow" id="myImg"src="https://martinez925.neocities.org/adventure_game/intro_outro/yellow.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Drowned"></div><div class="section4"><img class="green" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/green.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Suffocation"></div><div class="section5"> <img class="blue" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/blue.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Impaled"></div><div class="section6"><img class="purple" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/purple.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Poisoned, Decapitated"></div><hr><div class="section7"> <img class="hollow" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Hollowgast.png" alt="<br><b><u>Hollowgast</u></b><br>A chaotic tentacle-mouthed creature spawned from a failed experiment to grant itself immortality. Hollowgasts, (typically referred to as 'Hollows'), create auditory hallucinations to trick their prey and use the strength of their tongues to immobilize them."></div><div class="section8"> <img class="vampire" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Vampire.jpg" alt="<br><b><u>Vampire</u></b><br>An agile vampiric-winged creature succumed to infection by a parasite. These bat-like vampires are blind, using echolocation by making clicking sounds with their gills to hunt and navigate, which allows them to move in complete darkness."></div><div class="section9"> <img class="wendigo" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Wendigo.png" alt="<br><b><u>Wendigo</u></b><br>A violent cannibalistic-mutated creature possessed by the spirit of the Wendigo. Wendigos see movement: mobile persons are highlighted in their vision, otherwise they are usually unable to track those who remain still. Their skin is stretched taut against its body, making it immune to ballistics and sharp weapons."></div></div></div> </div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&display=swap');
body {
font-family: 'Annie Use Your Telescope', cursive;
margin-left: -384px;
margin-top: -57px;
backgound-color: black;
}
.grid {
display: grid;
grid-template-columns:auto auto auto auto auto auto auto auto auto; repeat(6, 1fr);
grid-template-rows:repeat(6, 1/2fr);
grid-gap:35px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.sidebar {
grid-column:1;
grid-row:1/7;
width: 100px;
position: fixed;
height: 100%;
background-color: #111;
top: 0;
left: 0;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.title {
grid-column:2/5;
grid-row:1;
text-align: left;
margin-top: -15px;
margin-left: 100px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 80px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
line-height: 1.7;
}
.butterfly {
grid-column:7;
grid-row:1;
margin-top: 10px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
overflow: hidden;
}
span.FORTUNE {
font-size: 30px;
color: white;
}
span.GUIDANCE {
font-size: 30px;
color: yellow;
}
span.DANGER {
font-size: 30px;
color: red;
}
span.LOSS {
font-size: 33px;
color: #183699;
}
.bf/*, .ob, .yb, .gb, .bb, .pb*/ {
transition: transform .2s;
}
.bf:hover {
transform: scale(1.1);
}
p.grow {
margin-top: 15px;
}
.under {
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 28px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text {
grid-column:2/8;
grid-row:3;
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 20px;
margin-left: 100px;
margin-top: -40px;
color:white;
line-height: 1.8;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text::first-letter {
color: #CA86F3;
padding: 0 .3rem;
margin: 0 .3rem 0 0;
border: 2px solid;
border-radius: 8px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 4rem;
float: left;
line-height: 1;
}
tw-link {
color: white;
font-size: 20px;
}
.btn1-8 {
grid-column:3;
grid-row:4;
font-family: 'Annie Use Your Telescope', cursive;
text-align: center;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.btn2-8 {
grid-column:6;
grid-row:4;
color: white;
font-family: 'Annie Use Your Telescope', cursive;
margin-left: 200px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.custom-btn {
width: 160px;
height: 60px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
font-family: 'Annie Use Your Telescope', cursive;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
border-color: white;
/*box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);*/
outline: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 400px;
margin-top: 20px;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://martinez925.neocities.org/adventure_game/intro_outro/night.jpg");
height: 100%;
width: 100%;
position: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* 8 */
.btn1-8, .btn2-8 {
/*background-color: #f0ecfc;
background-image: linear-gradient(315deg, white 0%, white 74%);*/
line-height: 42px;
padding: 0;
border: none;
}
.btn1-8 span, .btn2-8 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.btn1-8:before, .btn2-8:before,
.btn1-8:after, .btn2-8:after {
position: absolute;
content: "";
right: 0;
bottom: 0;
background: white;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8:before, .btn2-8:before{
height: 0%;
width: 2px;
}
.btn1-8:after, .btn2-8:after {
width: 0%;
height: 2px;
}
.btn1-8:hover:before, .btn2-8:hover:before {
height: 100%;
}
.btn1-8:hover:after, .btn2-8:hover:after {
width: 100%;
}
.btn1-8:hover, .btn2-8:hover{
background: transparent;
}
.btn1-8 span:hover, .btn2-8 span:hover{
color: lightgray;
}
.btn1-8 span:before, .btn2-8 span:before,
.btn1-8 span:after, .btn2-8 span:after {
position: absolute;
content: "";
left: 0;
top: 0;
background: #749dcf;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8 span:before, .btn2-8 span:before {
width: 2px;
height: 0%;
}
.btn1-8 span:after, .btn2-8 span:after{
height: 2px;
width: 0%;
}
.btn1-8 span:hover:before, .btn2-8 span:hover:before {
height: 100%;
}
.btn1-8 span:hover:after, .btn2-8 span:hover:after {
width: 100%;
}
p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*.choice1:hover, .choice2:hover {
background-color: #3e8e41;
color: white;
}
.crescent {
text-align: center;
transition: transform .2s;
}
.moon {
vertical-align: middle;
width:55px;
height: 55px;
margin-bottom: 10px;
}*/
.section1 {
text-align: center;
transition: transform .2s;
border-radius: 30px;
margin-left: 15px;
margin-right: 15px;
}
.red {
border: 3px solid #DD4571;
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
margin-top: 20px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section2 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
margin-left: 15px;
margin-right: 16px;
}
.orange {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
border: 3px solid #E48A32;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section3 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.yellow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border: 3px solid #FBE280;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section4 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.green {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #5BBC96;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section5 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.blue {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #336B90;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section6 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.purple {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #CA86F3;
padding: 3px;
margin-bottom: 7px;
animation: fadeIn 3s;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section7 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.hollow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #604D51;
padding: 3px;
margin-bottom: 9px;
margin-top: 6px;
object-fit: cover;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section8 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.vampire {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #924F25;
padding: 3px;
margin-top: 5px;
margin-bottom: 6px;
object-fit: cover;
object-position: 30% 100%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section9 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.wendigo {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #547A94;
padding: 3px;
margin-bottom: 10px;
object-fit: cover;
object-position: 30% 100%;
margin-top: 9px;
margin-bottom: 25px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
hr {
width: 50%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
#myImg {
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content {
margin: auto;
display: block;
width: 30%;
max-width: 300px;
border-radius: 10px;
font-family: 'Annie Use Your Telescope', cursive;
}
#caption {
margin: auto;
display: block;
font-size: 27px;
width: 100%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content,
#caption {
animation-name: zoom;
animation-duration: 0.6s;
font-family: 'Annie Use Your Telescope', cursive;
}
.close {
position: absolute;
top: 99px;
right: 100px;
color: #f1f1f1;
font-size: 130px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: gray;
text-decoration: none;
cursor: pointer;
}
/* ---SECTION END--- */
.section1:hover {
transform: scale(1.1);
}
.section2:hover {
transform: scale(1.1);
}
.section3:hover {
transform: scale(1.1);
}
.section4:hover {
transform: scale(1.1);
}
.section5:hover {
transform: scale(1.1);
}
.section6:hover {
transform: scale(1.1);
}
.section7:hover {
transform: scale(1.1);
}
.section8:hover {
transform: scale(1.1);
}
.section9:hover {
transform: scale(1.1);
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
</style>
<script>
// RED -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('red');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// ORANGE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('orange');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// GREEN -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('green');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// YELLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('yellow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BLUE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('blue');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// PURPLE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('purple');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// HOLLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('hollow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// VAMPIRE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('vampire');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// WENDIGO -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('wendigo');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BUTTERFLY -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('bf');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script>Double-click this passage to edit it.Double-click this passage to edit it.<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, intial-scale=1.0"><title>Adventure Game</title></head><body><div class="hero-image"><div class="grid"><!--<div class="butterfly"><img class="bf" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red-b.png" alt="<span class=LOSS><b><u>LOSS</u></b><br></span><br><br><p class=grow>Random Line of text this is where the fortune prediction will go.</p>" width="170px;"></div>--><div class="title">DARK: The School<div class="under">Playing <mark style="background-color:#CA86F3;">PURPLE</mark></div></div>(if:$purplehaslight is false)[<div class="text"><span class="first-letter">Y</span>ou climb over the cafeteria counter. Then the sound of a loud crash ensues as the table you propped against the cafeteria doors comes flying over the dining hall, crashing into the floor. Crouched behind the kitchen counter, you remain silent. The sound of clicking fills the vacant cafeteria. You cannot see anything around the kitchen, you try to focus your vision around the room until you make out a door at the far end of the room that is wide open, allowing moonlight to flood in.</div></div><button class="custom-btn btn1-8"><span><p>[[Crawl to Door|No Flashlight-C]]</p></span></button><button class="custom-btn btn2-8"><span><p>[[Listen to Surroundings|No Flashlight-L]]</p></span></button>] (else: )[<div class="text"><span class="first-letter">W</span>ith your flashlight in hand, you climb over the cafeteria counter. Then the sound of a loud crash ensues as the table you propped against the cafeteria doors comes flying over the dining hall, crashing into the floor. Crouched behind the kitchen counter, you remain silent. The sound of clicking fills the vacant cafeteria. When you shine your flashlight around the kitchen, you see a door at the far end of the room that is wide open, allowing moonlight to flood in.</div></div><button class="custom-btn btn1-8"><span><p>[[Crawl to Door|Yes Flashlight-C]]</p></span></button><button class="custom-btn btn2-8"><span><p>[[Listen to Surroundings|Yes Flashlight-L]]</p></span></button>]<div class="sidebar"><div id="myModal" class="modal"><span class="close">×</span><img class="modal-content" id="img01"><div id="caption"></div></div><div class="section1"><img class="red" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/red.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Skull Crushed"></div><div class="section2"><img class="orange" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/orange.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Neck Snapped, Slammed"></div><div class="section3"><img class="yellow" id="myImg"src="https://martinez925.neocities.org/adventure_game/intro_outro/yellow.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Drowned"></div><div class="section4"><img class="green" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/green.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Suffocation"></div><div class="section5"> <img class="blue" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/blue.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Impaled"></div><div class="section6"><img class="purple" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/purple.png" alt="<br><b><u>POSSIBLE DEATHS:</u></b><br>Poisoned, Decapitated"></div><hr><div class="section7"> <img class="hollow" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Hollowgast.png" alt="<br><b><u>Hollowgast</u></b><br>A chaotic tentacle-mouthed creature spawned from a failed experiment to grant itself immortality. Hollowgasts, (typically referred to as 'Hollows'), create auditory hallucinations to trick their prey and use the strength of their tongues to immobilize them."></div><div class="section8"> <img class="vampire" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Vampire.jpg" alt="<br><b><u>Vampire</u></b><br>An agile vampiric-winged creature succumed to infection by a parasite. These bat-like vampires are blind, using echolocation by making clicking sounds with their gills to hunt and navigate, which allows them to move in complete darkness."></div><div class="section9"> <img class="wendigo" id="myImg" src="https://martinez925.neocities.org/adventure_game/intro_outro/Wendigo.png" alt="<br><b><u>Wendigo</u></b><br>A violent cannibalistic-mutated creature possessed by the spirit of the Wendigo. Wendigos see movement: mobile persons are highlighted in their vision, otherwise they are usually unable to track those who remain still. Their skin is stretched taut against its body, making it immune to ballistics and sharp weapons."></div></div></div> </div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&display=swap');
body {
font-family: 'Annie Use Your Telescope', cursive;
margin-left: -384px;
margin-top: -57px;
backgound-color: black;
}
.grid {
display: grid;
grid-template-columns:auto auto auto auto auto auto auto auto auto; repeat(6, 1fr);
grid-template-rows:repeat(6, 1/2fr);
grid-gap:35px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.sidebar {
grid-column:1;
grid-row:1/7;
width: 100px;
position: fixed;
height: 100%;
background-color: #111;
top: 0;
left: 0;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.title {
grid-column:2/5;
grid-row:1;
text-align: left;
margin-top: -15px;
margin-left: 100px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 80px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
line-height: 1.7;
}
.butterfly {
grid-column:7;
grid-row:1;
margin-top: 10px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
overflow: hidden;
}
span.FORTUNE {
font-size: 30px;
color: white;
}
span.GUIDANCE {
font-size: 30px;
color: yellow;
}
span.DANGER {
font-size: 30px;
color: red;
}
span.LOSS {
font-size: 33px;
color: #183699;
}
.bf/*, .ob, .yb, .gb, .bb, .pb*/ {
transition: transform .2s;
}
.bf:hover {
transform: scale(1.1);
}
p.grow {
margin-top: 15px;
}
.under {
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 28px;
color:white;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text {
grid-column:2/8;
grid-row:3;
text-align: left;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 20px;
margin-left: 100px;
margin-top: -40px;
color:white;
line-height: 1.8;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.text::first-letter {
color: #CA86F3;
padding: 0 .3rem;
margin: 0 .3rem 0 0;
border: 2px solid;
border-radius: 8px;
font-family: 'Annie Use Your Telescope', cursive;
font-size: 4rem;
float: left;
line-height: 1;
}
tw-link {
color: white;
font-size: 20px;
}
.btn1-8 {
grid-column:3;
grid-row:4;
font-family: 'Annie Use Your Telescope', cursive;
text-align: center;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.btn2-8 {
grid-column:6;
grid-row:4;
color: white;
font-family: 'Annie Use Your Telescope', cursive;
margin-left: 200px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.custom-btn {
width: 160px;
height: 60px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
font-family: 'Annie Use Your Telescope', cursive;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
border-color: white;
/*box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);*/
outline: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 400px;
margin-top: 20px;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://martinez925.neocities.org/adventure_game/intro_outro/night.jpg");
height: 100%;
width: 100%;
position: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* 8 */
.btn1-8, .btn2-8 {
/*background-color: #f0ecfc;
background-image: linear-gradient(315deg, white 0%, white 74%);*/
line-height: 42px;
padding: 0;
border: none;
}
.btn1-8 span, .btn2-8 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.btn1-8:before, .btn2-8:before,
.btn1-8:after, .btn2-8:after {
position: absolute;
content: "";
right: 0;
bottom: 0;
background: white;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8:before, .btn2-8:before{
height: 0%;
width: 2px;
}
.btn1-8:after, .btn2-8:after {
width: 0%;
height: 2px;
}
.btn1-8:hover:before, .btn2-8:hover:before {
height: 100%;
}
.btn1-8:hover:after, .btn2-8:hover:after {
width: 100%;
}
.btn1-8:hover, .btn2-8:hover{
background: transparent;
}
.btn1-8 span:hover, .btn2-8 span:hover{
color: lightgray;
}
.btn1-8 span:before, .btn2-8 span:before,
.btn1-8 span:after, .btn2-8 span:after {
position: absolute;
content: "";
left: 0;
top: 0;
background: #749dcf;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn1-8 span:before, .btn2-8 span:before {
width: 2px;
height: 0%;
}
.btn1-8 span:after, .btn2-8 span:after{
height: 2px;
width: 0%;
}
.btn1-8 span:hover:before, .btn2-8 span:hover:before {
height: 100%;
}
.btn1-8 span:hover:after, .btn2-8 span:hover:after {
width: 100%;
}
p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*.choice1:hover, .choice2:hover {
background-color: #3e8e41;
color: white;
}
.crescent {
text-align: center;
transition: transform .2s;
}
.moon {
vertical-align: middle;
width:55px;
height: 55px;
margin-bottom: 10px;
}*/
.section1 {
text-align: center;
transition: transform .2s;
border-radius: 30px;
margin-left: 15px;
margin-right: 15px;
}
.red {
border: 3px solid #DD4571;
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
margin-top: 20px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section2 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
margin-left: 15px;
margin-right: 16px;
}
.orange {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
padding: 3px;
border: 3px solid #E48A32;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section3 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.yellow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border: 3px solid #FBE280;
border-radius: 50%;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section4 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.green {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #5BBC96;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section5 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.blue {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #336B90;
padding: 3px;
margin-bottom: 11px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section6 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.purple {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #CA86F3;
padding: 3px;
margin-bottom: 7px;
animation: fadeIn 3s;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section7 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.hollow {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #604D51;
padding: 3px;
margin-bottom: 9px;
margin-top: 6px;
object-fit: cover;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section8 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.vampire {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #924F25;
padding: 3px;
margin-top: 5px;
margin-bottom: 6px;
object-fit: cover;
object-position: 30% 100%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.section9 {
transition: transform .2s;
border-radius: 30px;
text-align: center;
}
.wendigo {
vertical-align: middle;
width: 62px;
height: 62px;
cursor: pointer;
border-radius: 50%;
border: 3px solid #547A94;
padding: 3px;
margin-bottom: 10px;
object-fit: cover;
object-position: 30% 100%;
margin-top: 9px;
margin-bottom: 25px;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
hr {
width: 50%;
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
#myImg {
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content {
margin: auto;
display: block;
width: 30%;
max-width: 300px;
border-radius: 10px;
font-family: 'Annie Use Your Telescope', cursive;
}
#caption {
margin: auto;
display: block;
font-size: 27px;
width: 100%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
font-family: 'Annie Use Your Telescope', cursive;
}
.modal-content,
#caption {
animation-name: zoom;
animation-duration: 0.6s;
font-family: 'Annie Use Your Telescope', cursive;
}
.close {
position: absolute;
top: 99px;
right: 100px;
color: #f1f1f1;
font-size: 130px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: gray;
text-decoration: none;
cursor: pointer;
}
/* ---SECTION END--- */
.section1:hover {
transform: scale(1.1);
}
.section2:hover {
transform: scale(1.1);
}
.section3:hover {
transform: scale(1.1);
}
.section4:hover {
transform: scale(1.1);
}
.section5:hover {
transform: scale(1.1);
}
.section6:hover {
transform: scale(1.1);
}
.section7:hover {
transform: scale(1.1);
}
.section8:hover {
transform: scale(1.1);
}
.section9:hover {
transform: scale(1.1);
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
</style>
<script>
// RED -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('red');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// ORANGE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('orange');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// GREEN -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('green');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// YELLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('yellow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BLUE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('blue');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// PURPLE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('purple');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// HOLLOW -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('hollow');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// VAMPIRE -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('vampire');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// WENDIGO -------------------------
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('wendigo');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// BUTTERFLY -------------------------
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('bf');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script>Double-click this passage to edit it.Double-click this passage to edit it.Double-click this passage to edit it.Double-click this passage to edit it.