master
*anna* 3 years ago
parent be40667a71
commit 01e36af129

@ -3,18 +3,42 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>final test</title> <title>oracle</title>
<link rel="icon" href="imgs/avatars/ball2.gif"> <link rel="icon" href="imgs/avatars/ball2.gif">
</head> </head>
<body> <body>
Hello <span id="player_name"></span> (<span id="player_img"></span>). Hello <span id="player_name"></span> (<span id="player_img"></span>).
This is the end. In your journey you visited: This is the end. In your journey you visited:
<div id="park_info" style="display:none;"> <div id="park_block" style="display:none;">
The park The park
</div> </div>
<div id="newspaper_info" style="display:none;"> <div id="newspaper_block" style="display:none;">
The newspaper The newspaper
</div> </div>
<div id="N_block" style="display:none;">
Looking for N
</div>
<div id="monteferro_block" style="display:none;">
Monteferro
</div>
<div id="canteen_block" style="display:none;">
School Canteen
</div>
<div id="pleiadians_block" style="display:none;">
Pleiadians
</div>
<div id="square_s_block" style="display:none;">
Square
</div>
<div id="river_bank_block" style="display:none;">
River Bank
</div>
<div id="spring_river_block" style="display:none;">
Spring River
</div>
<script> <script>
//player name //player name
@ -29,22 +53,56 @@ var img = document.createElement("img");
//checks story development //checks story development
window.onload = function (){ window.onload = function (){
var park = document.querySelector("#park_info"); var park = document.querySelector("#park_block");
var news = document.querySelector("#newspaper_info"); var news = document.querySelector("#newspaper_block");
var look_for_N = document.querySelector("#N_block");
var monteferro = document.querySelector("#monteferro_block");
var canteen = document.querySelector("#canteen_block");
var pleiadians = document.querySelector("#pleiadians_block");
var square_s = document.querySelector("#square_s_block");
var river_bank = document.querySelector("#river_bank_block");
var spring_river = document.querySelector("#spring_river_block");
if (localStorage.park === "opened" ) { if (localStorage.park === "opened" ) {
console.log ("park:",localStorage.park); console.log ("park:",localStorage.park);
park.style.display ="block"; park.style.display ="block";
} }
if (localStorage.newspaper === "opened" ) { if (localStorage.newspaper === "opened" ) {
console.log ("newspaper:",localStorage.newspaper); console.log ("newspaper:",localStorage.newspaper);
news.style.display ="block"; news.style.display ="block";
} }
if (localStorage.looking_for_N === "opened" ) {
console.log ("looking for N:",localStorage.looking_for_N );
look_for_N.style.display ="block";
}
if (localStorage.monteferro === "opened" ) {
console.log ("monteferro:",localStorage.monteferro );
monteferro.style.display ="block";
}
if (localStorage.school_canteen === "opened" ) {
console.log ("school canteen:",localStorage.school_canteen );
canteen.style.display ="block";
}
if (localStorage.pleiadians === "opened" ) {
console.log ("pleiadians:",localStorage.pleiadians );
pleiadians.style.display ="block";
}
if (localStorage.square_satanism === "opened" ) {
console.log ("square satanism:",localStorage.square_satanism );
square_s.style.display ="block";
}
if (localStorage.river_bank === "opened" ) {
console.log ("River Bank:",localStorage.river_bank );
river_bank.style.display ="block";
}
if (localStorage.spring_river === "opened" ) {
console.log ("Spring River:",localStorage.spring_river );
spring_river.style.display ="block";
}
} }
</script> </script>
<script type="text/javascript" src="index.js" ></script> <script type="text/javascript" src="index.js" ></script>

@ -121,6 +121,7 @@ $(document).keydown(function(e) {
case 37: case 37:
offset.left -= 20; offset.left -= 20;
console.log("left"); console.log("left");
$div.addClass("flipped");
break; break;
case 38: case 38:
offset.top -= 20; offset.top -= 20;
@ -129,6 +130,7 @@ $(document).keydown(function(e) {
case 39: case 39:
offset.left += 20; offset.left += 20;
console.log("right"); console.log("right");
$div.removeClass("flipped");
break; break;
case 40: case 40:
offset.top += 20; offset.top += 20;

@ -641,6 +641,14 @@ span.button_text{
margin-left: -16px; margin-left: -16px;
display: block; display: block;
} }
.flipped {
transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-khtml-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
}
/* hide scroll bar */ /* hide scroll bar */

@ -129,43 +129,43 @@ span.button_text{
div#player_img { #player_img {
bottom: 23%; bottom: 21%;
left: 10%; left: 15%;
position:absolute ; position:absolute ;
z-index: 2; z-index: 2;
} }
.figure1{ .figure1{
top:10%; top:10%;
right: 30%; right: 23%;
position: absolute; position: absolute;
z-index: 2; z-index: 2;
cursor: pointer; cursor: pointer;
} }
#planet2{ #planet2{
top:20%; top:35%;
right: 20%; right: 52%;
position: absolute; position: absolute;
z-index: 2; z-index: 2;
cursor: pointer;
} }
.figure2{ .figure2{
top:60%; top:30%;
right: 6%; right: 20%;
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
z-index:2;
} }
.figure3{ .figure3{
top:50%; top:10%;
right: 10%; right: 15%;
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
} }
.figure4{ .figure4{
top:30%; top:20%;
right: 3%; right: 5%;
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
} }
@ -174,21 +174,25 @@ div#player_img {
left:20%; left:20%;
position: absolute; position: absolute;
z-index: 2; z-index: 2;
cursor: pointer;
} }
#planet6{ #planet6{
top:20%; top:35%;
right: 8%; right: 9%;
position: absolute; position: absolute;
z-index: 2; z-index: 2;
cursor: pointer;
} }
#planet8{ #planet8{
top:20%; top:20%;
left: 4%; left: 4%;
position: absolute; position: absolute;
z-index: 2; z-index: 2;
cursor: pointer; }
#planet9{
top:42%;
right: 26%;
position: absolute;
z-index: 2;
} }
#trail1{ #trail1{
@ -260,8 +264,8 @@ div#player_img {
/* amanda baloons*/ /* amanda baloons*/
.bubble1 { .bubble1 {
right: 8.5%; right: 25%;
top:12%; top:34%;
position: absolute; position: absolute;
background: #ffffff; background: #ffffff;
color: #000000; color: #000000;
@ -269,12 +273,12 @@ div#player_img {
font-size: 16px; font-size: 16px;
line-height: 17px; line-height: 17px;
text-align: center; text-align: center;
width: 140px; width: 190px;
height: 57px; height: 50px;
border-radius: 10px; border-radius: 10px;
padding: 18px; padding: 18px;
border: #000000 solid 1px; border: #000000 solid 1px;
z-index: 50;
} }
.bubble1:after { .bubble1:after {
content: ''; content: '';
@ -283,11 +287,11 @@ div#player_img {
width: 0; width: 0;
z-index: 1; z-index: 1;
border-style: solid; border-style: solid;
border-width: 20px 20px 0 0; border-color: #ffffff transparent;
border-color: #ffffff transparent transparent transparent; border-width: 0 20px 20px;
bottom: -20px; top: -20px;
left: 32%; left: 76%;
margin-left: -10px; margin-left: -20px;
} }
.bubble1:before { .bubble1:before {
content: ''; content: '';
@ -295,17 +299,16 @@ div#player_img {
width: 0; width: 0;
z-index: 0; z-index: 0;
border-style: solid; border-style: solid;
border-width: 21px 21px 0 0; border-color: #000000 transparent;
border-color: #000000 transparent transparent transparent; border-width: 0 21px 21px;
bottom: -22px; top: -21.5px;
left: 32%; left: 76%;
margin-left: -11px; margin-left: -21px;
display: block; display: block;
} }
.bubble2{
.bubble2 { right: 11%;
right: 13%; top:35%;
top:10%;
position: absolute; position: absolute;
background: #ffffff; background: #ffffff;
color: #000000; color: #000000;
@ -313,12 +316,11 @@ div#player_img {
font-size: 16px; font-size: 16px;
line-height: 17px; line-height: 17px;
text-align: center; text-align: center;
width: 188px; width: 220px;
height: 57px; height: 75px;
border-radius: 10px; border-radius: 10px;
padding: 18px; padding: 18px;
border: #000000 solid 1px; border: #000000 solid 1px;
z-index: 50;
} }
.bubble2:after { .bubble2:after {
content: ''; content: '';
@ -327,11 +329,11 @@ div#player_img {
width: 0; width: 0;
z-index: 1; z-index: 1;
border-style: solid; border-style: solid;
border-width: 0 20px 20px 0; border-color: transparent #ffffff;
border-color: transparent #ffffff transparent transparent; border-width: 20px 20px 20px 0;
bottom: -20px; top: 34%;
left: 81%; left: -20px;
margin-left: -10px; margin-top: -20px;
} }
.bubble2:before { .bubble2:before {
content: ''; content: '';
@ -339,16 +341,139 @@ div#player_img {
width: 0; width: 0;
z-index: 0; z-index: 0;
border-style: solid; border-style: solid;
border-width: 0 21px 21px 0; border-color: transparent #000000;
border-color: transparent #000000 transparent transparent; border-width: 21px 21px 21px 0;
bottom: -22px; top: 34%;
left: 81%; left: -21.5px;
margin-left: -10px; margin-top: -21px;
display: block;
}
.bubble3 {
right: 20%;
top:53%;
position: absolute;
background: #ffffff;
color: #000000;
font-family: sinistre;
font-size: 16px;
line-height: 17px;
text-align: center;
width: 200px;
height: 55px;
border-radius: 10px;
padding: 18px;
border: #000000 solid 1px;
}
.bubble3:after {
content: '';
position: absolute;
display: block;
width: 0;
z-index: 1;
border-style: solid;
border-color: #ffffff transparent;
border-width: 0 20px 20px;
top: -20px;
left: 73%;
margin-left: -20px;
}
.bubble3:before {
content: '';
position: absolute;
width: 0;
z-index: 0;
border-style: solid;
border-color: #000000 transparent;
border-width: 0 21px 21px;
top: -21.5px;
left: 73%;
margin-left: -21px;
display: block;
}
.bubble4{
right: 8%;
top:6%;
position: absolute;
background: #ffffff;
color: #000000;
font-family: sinistre;
font-size: 16px;
line-height: 17px;
text-align: center;
width: 190px;
height: 90px;
border-radius: 10px;
padding: 18px;
border: #000000 solid 1px;
}
.bubble4:after {
content: '';
position: absolute;
display: block;
width: 0;
z-index: 1;
border-style: solid;
border-color: transparent #ffffff;
border-width: 20px 20px 20px 0;
top: 34%;
left: -20px;
margin-top: -20px;
}
.bubble4:before {
content: '';
position: absolute;
width: 0;
z-index: 0;
border-style: solid;
border-color: transparent #000000;
border-width: 21px 21px 21px 0;
top: 34%;
left: -21.5px;
margin-top: -21px;
display: block;
}
.bubble5 {
right:2%;
top:38%;
position: absolute;
background: #ffffff;
color: #000000;
font-family: sinistre;
font-size: 16px;
line-height: 17px;
text-align: center;
width: 210px;
height: 86px;
border-radius: 10px;
padding: 18px;
border: #000000 solid 1px;
}
.bubble5:after {
content: '';
position: absolute;
display: block;
width: 0;
z-index: 1;
border-style: solid;
border-color: #ffffff transparent;
border-width: 0 20px 20px;
top: -20px;
left: 24%;
margin-left: -20px;
}
.bubble5:before {
content: '';
position: absolute;
width: 0;
z-index: 0;
border-style: solid;
border-color: #000000 transparent;
border-width: 0 21px 21px;
top: -21.5px;
left: 24%;
margin-left: -21px;
display: block; display: block;
} }
/* hide scroll bar */ /* hide scroll bar */

@ -18,10 +18,10 @@
<div id="ground" > <div id="ground" >
<img id="trail1" src="imgs/pleiadian_s/trail1.gif" height="160px"> <img id="trail1" src="imgs/pleiadian_s/trail1.gif" height="140px">
<img id="trail2" src="imgs/pleiadian_s/trail1.gif" height="160px"> <img id="trail2" src="imgs/pleiadian_s/trail1.gif" height="140px">
<img id="trail3" src="imgs/pleiadian_s/trail1.gif" height="160px"> <img id="trail3" src="imgs/pleiadian_s/trail1.gif" height="140px">
<img id="trail4" src="imgs/pleiadian_s/trail1.gif" height="160px"> <img id="trail4" src="imgs/pleiadian_s/trail1.gif" height="140px">
<img id="tree1" src="imgs/pleiadian_s/tree.gif" height="160px"> <img id="tree1" src="imgs/pleiadian_s/tree.gif" height="160px">
<img id="tree2" src="imgs/pleiadian_s/tree.gif" height="160px"> <img id="tree2" src="imgs/pleiadian_s/tree.gif" height="160px">
@ -31,21 +31,21 @@
<div class="figure1"> <div class="figure1">
<img id="planet1" src="imgs/pleiadian_s/planet1.gif" height="100px"> <img id="planet1" src="imgs/pleiadian_s/planet1.gif" height="100px">
<img id="being1" src="imgs/pleiadian_s/angel1.gif" height="100px" style="display: none;"> <img id="being1" src="imgs/pleiadian_s/angel1.gif" height="150px" style="display: none;">
</div> </div>
<img id="planet2" src="imgs/pleiadian_s/planet2.gif" height="100px"> <img id="planet2" src="imgs/pleiadian_s/planet2.gif" height="100px">
<div class="figure2"> <div class="figure2">
<img id="planet3" src="imgs/pleiadian_s/planet3.gif" height="100px"> <img id="planet3" src="imgs/pleiadian_s/planet3.gif" height="100px">
<img id="being2" src="imgs/pleiadian_s/angel2.gif" height="110px" style="display: none;"> <img id="being3" src="imgs/pleiadian_s/angel2.gif" height="130px" style="display: none;">
</div> </div>
<img id="planet4" src="imgs/pleiadian_s/planet4.gif" height="120px"> <img id="planet4" src="imgs/pleiadian_s/planet4.gif" height="120px">
<div class="figure3"> <div class="figure3">
<img id="planet5" src="imgs/pleiadian_s/planet5.gif" height="100px"> <img id="planet5" src="imgs/pleiadian_s/planet5.gif" height="100px">
<img id="being5" src="imgs/pleiadian_s/angel3.gif" height="125px" style="display: none;"> <img id="being5" src="imgs/pleiadian_s/angel3.gif" height="100px" style="display: none;">
</div> </div>
<img id="planet6" src="imgs/pleiadian_s/planet6.gif" height="150px"> <img id="planet6" src="imgs/pleiadian_s/planet6.gif" height="150px">
@ -55,15 +55,29 @@
<img id="being7" src="imgs/pleiadian_s/angel4.gif" height="100px" style="display: none;"> <img id="being7" src="imgs/pleiadian_s/angel4.gif" height="100px" style="display: none;">
</div> </div>
<img id="planet8" src="imgs/pleiadian_s/planet8.gif" height="150px"> <img id="planet8" src="imgs/pleiadian_s/planet8.gif" height="140px">
<img id="stars1" src="imgs/pleiadian_s/stars.gif" height="200px">
<img id="stars2" src="imgs/pleiadian_s/stars.gif" height="200px">
<img id="stars3" src="imgs/pleiadian_s/stars.gif" height="200px">
<img id="stars1" src="imgs/pleiadian_s/stars.gif" height="200px">
<img id="stars2" src="imgs/pleiadian_s/stars.gif" height="200px">
<img id="stars3" src="imgs/pleiadian_s/stars.gif" height="200px">
<img id="stars1" src="imgs/pleiadian_s/stars.gif" height="200px">
<img id="stars2" src="imgs/pleiadian_s/stars.gif" height="200px">
<img id="stars3" src="imgs/pleiadian_s/stars.gif" height="200px">
<img id="stars1" src="imgs/pleiadian_s/stars.gif" height="200px">
<img id="stars2" src="imgs/pleiadian_s/stars.gif" height="200px">
<img id="stars3" src="imgs/pleiadian_s/stars.gif" height="200px">
<img id="stars3" src="imgs/pleiadian_s/stars.gif" height="200px">
<div class="bubble1 invert"style="display: none;">Hello <span id="player_name"></span>, your enlightened spirit guided you here.</div>
<div class="bubble2 invert"style="display: none;">We can sense that you are looking for something beyond your habits and understanding. We are happy to meet you. </div>
<div class="bubble3 invert"style="display: none;">We are the beings of light. We don't belong to this planet.</div> <div class="bubble1 invert" style="display: none;">Hello <span id="player_name"></span>, your enlightened spirit guided you here.</div>
<div class="bubble4 invert"style="display: none;">We can sense the other beings and planet's energetic vibration. A heinous crime is shaking this land's vibration.</div> <div class="bubble2 invert" style="display: none;">We can sense that you are looking for something beyond your habits and understanding. We are happy to meet you. </div>
<div class="bubble5 invert"style="display: none;">This darkness will soon spread to other planets. We came here as messengers, to help you elevate your soul and find the courage to fight evil.</div> <div class="bubble3 invert" style="display: none;">We are the beings of light. We don't belong to this planet.</div>
<div class="bubble5 invert"style="display: none;">Keep following this path.</div> <div class="bubble4 invert" style="display: none;">We can sense the other beings and planet's energetic state. A heinous crime is shaking this land's vibration.</div>
<div class="bubble5 invert" style="display: none;">This darkness will soon spread to other planets. We came here as messengers, to help you elevate your soul and find the courage to fight evil.</div>
<div class="text_container invert " > <div class="text_container invert " >
@ -75,7 +89,7 @@
The sky looks odd. Is there something out there? The sky looks odd. Is there something out there?
</div> </div>
<div class="message3" style="display: none;"> <div class="message3" style="display: none;">
You know what is the crime they are talking about. Collect the courage and <button onclick="location.href='square_satanism.html';"><span class="button_text">go to the square</span></button> to inform the villagers of what is going on. You know what is the crime they are talking about. <button onclick="location.href='square_satanism.html';"><span class="button_text">Go to the village square!</span></button>
</div> </div>
</div> </div>
@ -156,10 +170,66 @@ $(document).keydown(function(e) {
$div.css("left", offset.left); $div.css("left", offset.left);
$div.css("top", offset.top); $div.css("top", offset.top);
e.preventDefault(); e.preventDefault();
adjustScroll(); adjustScroll();
}) })
// make pleiadians appear
var pleiadians = 0;
$("#planet1").click( function() {
pleiadians ++;
$("#planet1").hide();
$("#being1").show();
check_pleiadians();
});
$("#planet3").click( function() {
pleiadians ++;
$("#planet3").hide();
$("#being3").show();
check_pleiadians();
});
$("#planet5").click( function() {
pleiadians ++;
$("#planet5").hide();
$("#being5").show();
check_pleiadians();
});
$("#planet7").click( function() {
pleiadians ++;
$("#planet7").hide();
$("#being7").show();
check_pleiadians();
});
function check_pleiadians() {
if (pleiadians == 4) {
setTimeout( function (){
$(".bubble1").css("zIndex", 50);
$(".bubble1").show();
setTimeout( function (){
$(".bubble2").css("zIndex", 50);
$(".bubble2").show();
setTimeout( function (){
$(".bubble3").css("zIndex", 50);
$(".bubble3").show();
setTimeout( function (){
$(".bubble4").css("zIndex", 50);
$(".bubble4").show();
setTimeout( function (){
$(".bubble5").css("zIndex", 50);
$(".bubble5").show();
setTimeout( function (){
$(".message2").hide();
$(".message3").show();
}, 2500);
}, 2500);
}, 2500);
}, 2500);
}, 2500);
}, 100);
};
};
</script> </script>

Loading…
Cancel
Save