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

@ -3,18 +3,42 @@
<head>
<meta charset="utf-8" />
<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">
</head>
<body>
Hello <span id="player_name"></span> (<span id="player_img"></span>).
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
</div>
<div id="newspaper_info" style="display:none;">
<div id="newspaper_block" style="display:none;">
The newspaper
</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>
//player name
@ -29,20 +53,54 @@ var img = document.createElement("img");
//checks story development
window.onload = function (){
var park = document.querySelector("#park_info");
var news = document.querySelector("#newspaper_info");
var park = document.querySelector("#park_block");
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" ) {
console.log ("park:",localStorage.park);
park.style.display ="block";
}
if (localStorage.newspaper === "opened" ) {
console.log ("newspaper:",localStorage.newspaper);
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>

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

@ -641,6 +641,14 @@ span.button_text{
margin-left: -16px;
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 */

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

@ -18,10 +18,10 @@
<div id="ground" >
<img id="trail1" src="imgs/pleiadian_s/trail1.gif" height="160px">
<img id="trail2" src="imgs/pleiadian_s/trail1.gif" height="160px">
<img id="trail3" src="imgs/pleiadian_s/trail1.gif" height="160px">
<img id="trail4" 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="140px">
<img id="trail3" src="imgs/pleiadian_s/trail1.gif" height="140px">
<img id="trail4" src="imgs/pleiadian_s/trail1.gif" height="140px">
<img id="tree1" 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">
<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>
<img id="planet2" src="imgs/pleiadian_s/planet2.gif" height="100px">
<div class="figure2">
<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>
<img id="planet4" src="imgs/pleiadian_s/planet4.gif" height="120px">
<div class="figure3">
<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>
<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;">
</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="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="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="bubble5 invert"style="display: none;">Keep following this path.</div>
<div class="text_container invert " >
@ -75,7 +89,7 @@
The sky looks odd. Is there something out there?
</div>
<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>
@ -157,9 +171,65 @@ $(document).keydown(function(e) {
$div.css("top", offset.top);
e.preventDefault();
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>

Loading…
Cancel
Save