fin

tree/park.css

@@ -192,7 +192,7 @@ a {
 }
 
 .blur_background {
-    filter: blur(20px);
+    filter: blur(50px);
 }
 
 a:hover {

tree/saurians_head.css

@@ -0,0 +1,471 @@
+
+@font-face {
+    font-family: sinistre;
+    src: url(fonts/Sinistre-StCaroline.woff),
+    url(fonts/Sinistre-StCaroline.otf);
+}
+@font-face {
+    font-family: jolybolditalic;
+    src: url(fonts/JolyDisplay-BoldDisplayItalic.woff),
+    url(fonts/JolyDisplay-BoldDisplayItalic.otf);
+}
+
+@font-face {
+    font-family: jolyregularitalic;
+    src: url(fonts/JolyDisplay-RegularDisplayItalic.woff),
+    url(fonts/JolyDisplay-RegularDisplayItalic.otf);
+}
+@font-face {
+    font-family: jolyregular;
+    src: url(fonts/JolyDisplay-RegularDisplay.woff),
+    url(fonts/JolyDisplay-RegularDisplay.otf);
+}
+
+@font-face {
+    font-family: jolybold;
+    src: url(fonts/JolyDisplay-BoldDisplay.woff),
+    url(fonts/JolyDisplay-BoldDisplay.otf);
+}
+
+.invert{
+    filter: invert(100%);
+}
+
+ body {
+     font-family: jolyregular;
+     font-size: 1.8vw;
+     overflow: hidden;
+ }
+ svg {
+    width: 100%;
+    height: 100%;
+    position:fixed;
+    z-index: -9;
+    stroke:black;
+    stroke-width:1px;
+ }
+
+ .instructions{
+    font-family:jolyregularitalic;
+ }
+
+span.instructions_arrow{
+    padding-left:40px;
+    font-size: 2.4vw;
+    font-family:jolybolditalic;
+}
+
+ ::-moz-selection { /* Code for Firefox */   
+    background: transparent;
+  }
+  ::selection {
+    background: transparent;
+  }
+
+#ground_color {
+    width: 120%;
+    height: 120%;
+    position:fixed;
+    margin:-100px;
+    background-color: white;
+    z-index:-10;
+}
+
+#ground{
+    position:absolute;
+    height:100%;
+    width:100%;  
+}
+
+div.text_container {
+    bottom: 35px;
+    left:40px;
+    right:40px;
+    position:fixed;
+    margin: auto; 
+    line-height: 1.4em;   
+}
+
+button{
+    -webkit-appearance: none;
+    background-color: white;
+    border: 0.1em black solid;
+    border-radius: 25em;
+    color:black;
+    cursor:pointer;
+    font-family: jolybolditalic;
+}
+
+button:hover{
+border: 0.1em transparent solid;
+-webkit-box-shadow: 0px 0px 8px 1px  black;
+-moz-box-shadow: 0px 0px 8px 1px  black;
+box-shadow: 0px 0px 8px 1px  black;   
+}
+
+span.button_text{
+    font-size: 1.6vw;
+    padding: 8px;
+}
+
+#player_name{
+    font-family: jolybolditalic;
+}
+.blur_background {
+    filter: blur(20px);
+}
+
+/*army*/ 
+
+div#player_img {
+    top: 40%;
+    left: 100%;
+    position:absolute ;
+    z-index: 2;
+    }
+
+.army {
+    position: absolute;
+    top:6%;
+    right: 4%;
+    width: 350px;
+    height: 280px;
+    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);
+}
+
+
+#fighter1 {
+    top:50%;
+    left: 80%;
+    position: absolute;
+    z-index:2;
+}
+#fighter2 {
+    top:5%;
+    left: 50%;
+    position: absolute;
+    z-index:0;
+}
+#fighter3 {
+    top:20%;
+    left: 30%;
+    position: absolute;
+    z-index:2;
+}
+#fighter4 {
+    top:100%;
+    left: 45%;
+    position: absolute;
+    z-index:5;
+}
+#fighter5 {
+    top:40%;
+    left: 50%;
+    position: absolute;
+    z-index:2;
+}
+#fighter6 {
+    top:70%;
+    left: 65%;
+    position: absolute;
+    z-index:3;
+}
+#fighter7 {
+    top:68%;
+    left: 44%;
+    position: absolute;
+    z-index:3;
+}
+#fighter8 {
+    top:50%;
+    left: 5%;
+    position: absolute;
+    z-index:2;
+}
+#fighter9 {
+    top:50%;
+    left: 5%;
+    position: absolute;
+    z-index:3;
+}
+
+/*saurians*/
+
+.figure1{ 
+    bottom: 60%;
+    left: 32%;
+    position: absolute;
+    z-index: 2;
+    cursor: pointer;
+}
+.figure2{ 
+    bottom:40%;
+    left: 10%;
+    position: absolute;
+    cursor: pointer;
+}
+.figure3{ 
+    top:50%;
+    left: 35%;
+    position: absolute;
+    cursor: pointer;
+}
+.figure4{ 
+    bottom:17%;
+    left: 12%;
+    position: absolute;
+    cursor: pointer;
+}
+.figure5{ 
+    top:20%;
+    left: 10%;
+    position: absolute;
+    z-index: 2;
+    cursor: pointer;
+}
+.figure6{ 
+    top: 10%;
+    left: 20%;
+    position: absolute;
+    cursor: pointer;
+}
+.figure7{ 
+    top:32%;
+    left: 20%;
+    position: absolute;
+    cursor: pointer;
+}
+.figure8{ 
+    bottom: 54%;
+    left: 45%;
+    position: absolute;
+    cursor: pointer;
+}
+.figure9{ 
+    bottom:22%;
+    left: 25%;
+    position: absolute;
+    cursor: pointer;
+}
+
+
+.scenography1{
+    top:12%;
+    left: 8%;  
+    position: absolute;
+
+}
+.scenography2{
+    top:35%;
+    left: 35%;  
+    position: absolute;
+    z-index: 2;
+}
+.scenography3{
+    bottom:30%;
+    right: 8%;  
+    position: absolute;
+    z-index: 10;
+}
+.scenography4{
+    bottom:25%;
+    right: 25%;  
+    position: absolute;
+    z-index: 15;
+}
+.scenography5{
+    bottom:35%;
+    right: 29%;  
+    position: absolute;
+    z-index: 10;
+}
+img#cat3{
+    bottom: 10%;
+    position: absolute;
+}
+.spot1{
+    bottom:20%;
+    left:38%;
+    position: absolute;
+    z-index: 10;
+}
+.spot2{
+    bottom:70%;
+    left:44%;
+    position: absolute;
+    z-index: 0;
+}
+.spot3{
+    bottom:35%;
+    right: 45%;  
+    position: absolute;
+    z-index: 10;
+}
+.spot4{
+    bottom:40%;
+    left: 30%;  
+    position: absolute;
+    z-index: 10;
+}
+.spot5{
+    top:33%;
+    left: 5%;  
+    position: absolute;
+    z-index: 10;
+}
+
+
+#amanda{
+    left: 46.5%;  
+    bottom:50%;
+    position: absolute;
+    z-index: 12;
+}
+#cloud{
+    /*
+    left: 39%;  
+        */
+    bottom:43%;
+    left:2%;
+    position: absolute;
+    z-index: 10;
+}
+#cloud2{
+    /*
+    left: 42%; 
+    */ 
+    right: 2%;
+    bottom:37%;
+    position: absolute;
+    z-index: 10;
+}
+#thunders{
+    left: 36%;  
+    top:0%;
+    position: absolute;
+    z-index: 10;
+}
+
+/* amanda baloons*/
+
+.bubble1 {
+    left: 49%;  
+    top:16%;
+    position: absolute;
+    background: #ffffff;
+    color: #000000;
+    font-family: sinistre;
+    font-size: 16px;
+    line-height: 17px;
+    text-align: center;
+    width: 140px;
+    height: 35px;
+    border-radius: 10px;
+    padding: 18px;
+    border: #000000 solid 1px;
+    z-index: 50;
+    cursor: pointer;
+}
+.bubble1:after {
+    content: '';
+    position: absolute;
+    display: block;
+    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;
+}
+.bubble1:before {
+    content: '';
+    position: absolute;
+    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;
+    display: block;
+}
+
+.bubble2 {
+    left: 30%;  
+    top:14%;
+    position: absolute;
+    background: #ffffff;
+    color: #000000;
+    font-family: sinistre;
+    font-size: 16px;
+    line-height: 17px;
+    text-align: center;
+    width: 188px;
+    height: 52px;
+    border-radius: 10px;
+    padding: 18px;
+    border: #000000 solid 1px;
+    z-index: 50;
+    cursor: pointer;
+}
+.bubble2:after {
+    content: '';
+    position: absolute;
+    display: block;
+    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;
+}
+.bubble2:before {
+    content: '';
+    position: absolute;
+    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;
+    display: block;
+}
+
+
+
+
+
+/* hide scroll bar */
+/* width */
+::-webkit-scrollbar {
+    color:black;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: black; 
+  }
+   
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: black; 
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: black; 
+  }
+
+

tree/saurians_head.html

@@ -0,0 +1,326 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+      <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+    <title>saurian headquarter</title>
+    <link rel="icon" href="imgs/saurian_headquarter/fire2.gif">
+    <link rel="stylesheet" href="saurians_head.css">
+    
+</head>
+<body >
+    <svg class="invert blur">
+        <line x1="-10" y1="70" x2="68%" y2="70"/>
+        <line x1="68%" y1="70" x2="68%" y2="-10"/>
+        <line x1="88%" y1="70" x2="88%" y2="-10"/>
+        <line x1="88%" y1="70" x2="110%" y2="70"/>
+    </svg>
+
+    <div id="ground_color" class="invert stop_invert"></div>
+
+    <div class="army ">
+      <div  id="player_img" class="blur" style="display: none;"></div>
+      <img  id="fighter1" class="blur" src="imgs/spring_river/fighter1.gif" height="120px" style="display: none;">
+      <img  id="fighter2" class="blur" src="imgs/spring_river/fighter2.gif" height="120px"style="display: none;">
+      <img  id="fighter3" class="blur" src="imgs/spring_river/fighter3.gif" height="120px"style="display: none;">
+      <img  id="fighter4" class="blur"src="imgs/spring_river/fighter4.gif" height="120px"style="display: none;">
+      <img  id="fighter5" class="blur"src="imgs/spring_river/fighter5.gif" height="120px"style="display: none;">
+      <img  id="fighter6" class="blur" src="imgs/spring_river/fighter6.gif" height="160px"style="display: none;">
+      <img  id="fighter7" class="blur" src="imgs/spring_river/fighter7.gif" height="120px"style="display: none;"> 
+      <img  id="fighter8" class="blur" src="imgs/spring_river/fighter8.gif" height="150px"style="display: none;">
+    </div>
+    
+      <div id="ground"> 
+
+<div class="spot1 blur">
+    <img  id="fire1" class="bad" src="imgs/saurian_headquarter/fire1.gif" height="90px">
+    <img  id="cat1" class="good" src="imgs/saurian_headquarter/cat1.gif" height="80px"style="display: none;"> 
+</div>
+<div class="spot2 blur">
+    <img  id="fire2" class="bad" src="imgs/saurian_headquarter/fire2.gif" height="90px">
+    <img  id="cat2" class="good" src="imgs/saurian_headquarter/cat2.gif" height="80px"style="display: none;"> 
+</div>  
+<div class="spot3 blur">
+    <img  id="fire3" class="bad" src="imgs/saurian_headquarter/fire3.gif" height="90px">
+    <img  id="cat3" class="good"src="imgs/saurian_headquarter/cat3.gif" height="60px"style="display: none;"> 
+</div>
+<div class="spot4 blur">
+    <img  id="fire4" class="bad" src="imgs/saurian_headquarter/fire4.gif" height="90px">
+    <img  id="cat4" class="good" src="imgs/saurian_headquarter/cat4.gif" height="60px"style="display: none;"> 
+</div>
+<div class="spot5 blur">
+    <img  id="fire5" class="bad" src="imgs/saurian_headquarter/fire5.gif" height="90px">
+    <img  id="cat5" class="good" src="imgs/saurian_headquarter/cat5.gif" height="90px"style="display: none;"> 
+</div>
+
+
+
+<div class="figure1 blur">
+  <img  id="saurian1" class="bad" src="imgs/saurian_headquarter/saurian1.gif" height="110px">
+  <img  id="person1" class="good" src="imgs/saurian_headquarter/person1.gif" height="110px" style="display: none;">
+</div>
+<div class="figure2 blur">
+    <img  id="saurian2" class="bad" src="imgs/saurian_headquarter/saurian2.gif" height="100px">
+    <img  id="person2" class="good" src="imgs/saurian_headquarter/person2.gif" height="90px" style="display: none;">
+</div>
+<div class="figure3 blur">
+    <img  id="saurian3" class="bad" src="imgs/saurian_headquarter/saurian3.gif" height="110px">
+    <img  id="person3" class="good" src="imgs/saurian_headquarter/person3.gif" height="100px" style="display: none;">
+</div>
+<div class="figure4 blur">
+    <img  id="saurian4" class="bad" src="imgs/saurian_headquarter/saurian4.gif" height="140px">
+    <img  id="person4" class="good" src="imgs/saurian_headquarter/person4.gif" height="100px" style="display: none;">
+</div>
+<div class="figure5 blur">
+    <img  id="saurian5" class="bad" src="imgs/saurian_headquarter/saurian5.gif" height="110px">
+    <img  id="person5" class="good" src="imgs/saurian_headquarter/person5.gif" height="120px" style="display: none;">
+</div>
+<div class="figure6 blur">
+      <img  id="saurian6" class="bad" src="imgs/saurian_headquarter/saurian6.gif" height="140px">
+      <img  id="person6" class="good" src="imgs/saurian_headquarter/person6.gif" height="110px" style="display: none;">
+</div>
+<div class="figure7 blur">
+      <img  id="saurian7" class="bad" src="imgs/saurian_headquarter/saurian7.gif" height="110px">
+      <img  id="person7" class="good" src="imgs/saurian_headquarter/person7.gif" height="100px" style="display: none;">
+</div>
+<div class="figure8 blur">
+      <img  id="saurian8" class="bad" src="imgs/saurian_headquarter/saurian8.gif" height="110px">
+      <img  id="person8" class="good" src="imgs/saurian_headquarter/person8.gif" height="100px" style="display: none;">
+</div>
+<div class="figure9 blur">
+    <img  id="saurian9" class="bad" src="imgs/saurian_headquarter/saurian9.gif" height="110px">
+    <img  id="person9" class="good" src="imgs/saurian_headquarter/person9.gif" height="110px" style="display: none;">
+</div>
+
+<div class="scenography1 blur"> 
+    <img  class="bad"  src="imgs/saurian_headquarter/eruption.gif" height="100px">
+    <img  class="good"  src="imgs/saurian_headquarter/cesto.gif" height="60px" style="display: none;">
+</div>
+<div class="scenography2 blur"> 
+    <img  class="bad"  src="imgs/saurian_headquarter/eruption.gif" height="100px">
+    <img  class="good"  src="imgs/saurian_headquarter/cake2.gif" height="80px" style="display: none;">
+</div>
+<div class="scenography3 blur"> 
+    <img  class="bad"  src="imgs/saurian_headquarter/stone_once.gif" height="150px">
+    <img  class="good"  src="imgs/saurian_headquarter/baloons.gif" height="80px" style="display: none;">
+</div>
+<div class="scenography4 blur"> 
+    <img  class="bad"  src="imgs/saurian_headquarter/stone_once.gif" height="150px">
+    <img  class="good"  src="imgs/saurian_headquarter/cake2.gif" height="100px" style="display: none;">
+</div>
+<div class="scenography5 blur"> 
+    <img  class="bad"  src="imgs/saurian_headquarter/stone_once.gif" height="150px">
+    <img  class="good"  src="imgs/saurian_headquarter/baloons.gif" height="100px" style="display: none;">
+</div>
+
+<img id="amanda" src="imgs/spring_river/amanda.gif" height="110px" style="display: none;">
+<div class="bubble1 invert stop_invert"style="display: none;"><span id="player_name"></span>, where have you been? ✜</div>
+<div class="bubble2 invert stop_invert"style="display: none;">Follow me, I think you made a colossal blunder here ■</div>
+
+<img id="cloud" src="imgs/saurian_headquarter/cloud2.gif" height="120px" style="display: none;">
+<img id="cloud2" src="imgs/saurian_headquarter/cloud2.gif" height="120px" style="display: none;">
+<img id="thunders" src="imgs/saurian_headquarter/thunder.gif" height="190px" style="display: none;">
+
+
+<div class="text_container invert stop_invert" > 
+
+  <div class="message1">
+    You and your army entered the saurians' headquarter. Your suspicions were well-founded.<br>
+  <span class="instructions"><span class="instructions_arrow">→</span> Stop the evil kitten-eaters invasion. Fight the saurians back!</span>
+    </div>
+    <div class="message2" style="display: none;">
+        Is this... Amanda?
+    </div>
+    <div class="message3" style="display: none;">
+        What did just happened? You really should <button onclick="location.href='final.html';"><span class="button_text">follow Amanda</span></button> . 
+    </div>
+
+</div>
+
+
+<script src="jquery.min.js"></script>
+  <script>
+
+    // saves game step in the local storage 
+window.onload = function() {
+  window.localStorage.setItem("saurians_headquarter","opened");
+  console.log ("saurians headquarter:",localStorage.saurians_headquarter);
+  setTimeout(function() {
+  $("#player_img").show();
+  setTimeout(function() {
+    $("#fighter1").show();
+    setTimeout(function() {
+        $("#fighter2").show();
+        setTimeout(function() {
+            $("#fighter3").show();
+            setTimeout(function() {
+                $("#fighter4").show();
+                setTimeout(function() {
+                    $("#fighter5").show();
+                    setTimeout(function() {
+                        $("#fighter6").show();
+                        setTimeout(function() {
+                            $("#fighter7").show();
+                            setTimeout(function() {
+                                $("#fighter8").show();
+                                setTimeout(function() {
+                                    $("#fighter9").show();
+                                },500);
+                            },500);
+                        },500);
+                    },500);
+                },500);
+            },500);
+        },500);
+    },500);
+  },500);
+},1500);
+}
+  //get player avatar from local storage
+console.log (localStorage.myavatar)
+var img = document.createElement("img");
+img.src = localStorage.myavatar;
+var player_img = document.querySelector("#player_img");
+player_img.appendChild(img);
+
+//get player name from local storage
+document.querySelector('#player_name').innerHTML = localStorage.playerName;
+
+
+  var shooting_counter = 0;
+
+  $(".figure1").click(function () {
+    shooting_counter ++;
+    console.log(shooting_counter);
+    $("#saurian1").attr( "src", "imgs/saurian_headquarter/fire_once2.gif");
+    setTimeout( function(){
+        $("#saurian1").attr( "src", "imgs/saurian_headquarter/saurian1.gif")
+    },1000);
+    reach_counter()
+  });
+
+  $(".figure2").click(function () {
+    shooting_counter ++;
+    console.log(shooting_counter);
+    $("#saurian2").attr( "src", "imgs/saurian_headquarter/fire_once2.gif");
+    setTimeout( function(){
+        $("#saurian2").attr( "src", "imgs/saurian_headquarter/saurian2.gif")
+    },1000);
+    reach_counter()
+  });
+
+  $(".figure3").click(function () {
+    shooting_counter ++;
+    console.log(shooting_counter);
+    $("#saurian3").attr( "src", "imgs/saurian_headquarter/fire_once2.gif");
+    setTimeout( function(){
+        $("#saurian3").attr( "src", "imgs/saurian_headquarter/saurian3.gif")
+    },1000);
+    reach_counter()
+  });
+
+  $(".figure4").click(function () {
+    shooting_counter ++;
+    console.log(shooting_counter);
+    $("#saurian4").attr( "src", "imgs/saurian_headquarter/fire_once2.gif");
+    setTimeout( function(){
+        $("#saurian4").attr( "src", "imgs/saurian_headquarter/saurian4.gif")
+    },1000);
+    reach_counter()
+  });
+  $(".figure5").click(function () {
+    shooting_counter ++;
+    console.log(shooting_counter);
+    $("#saurian5").attr( "src", "imgs/saurian_headquarter/fire_once2.gif");
+    setTimeout( function(){
+        $("#saurian5").attr( "src", "imgs/saurian_headquarter/saurian5.gif")
+    },1000);
+    reach_counter()
+  });
+  $(".figure6").click(function () {
+    shooting_counter ++;
+    console.log(shooting_counter);
+    $("#saurian6").attr( "src", "imgs/saurian_headquarter/fire_once2.gif");
+    setTimeout( function(){
+        $("#saurian6").attr( "src", "imgs/saurian_headquarter/saurian6.gif")
+    },1000);
+    reach_counter()
+  });
+  $(".figure7").click(function () {
+    shooting_counter ++;
+    console.log(shooting_counter);
+    $("#saurian7").attr( "src", "imgs/saurian_headquarter/fire_once2.gif");
+    setTimeout( function(){
+        $("#saurian7").attr( "src", "imgs/saurian_headquarter/saurian7.gif")
+    },1000);
+    reach_counter()
+  });
+  $(".figure8").click(function () {
+    shooting_counter ++;
+    console.log(shooting_counter);
+    $("#saurian8").attr( "src", "imgs/saurian_headquarter/fire_once2.gif");
+    setTimeout( function(){
+        $("#saurian8").attr( "src", "imgs/saurian_headquarter/saurian8.gif")
+    },1000);
+    reach_counter()
+  });
+  $(".figure9").click(function () {
+    shooting_counter ++;
+    console.log(shooting_counter);
+    $("#saurian9").attr( "src", "imgs/saurian_headquarter/fire_once2.gif");
+    setTimeout( function(){
+        $("#saurian9").attr( "src", "imgs/saurian_headquarter/saurian9.gif")
+    },1000);
+    reach_counter()
+  });
+
+  function reach_counter() {
+    if ( shooting_counter == 10 ) {
+        $("#cloud").show();
+        $("#cloud").animate({ left: "39%"}, { 
+                        duration: 500
+                    }).promise().done(function(){
+                        $("#cloud2").show();
+                        $("#cloud2").animate({ left: "42%"}, { 
+                        duration: 500
+                        }).promise().done(function(){
+                            $("#thunders").show();
+                            setTimeout( function() {
+                                $("#amanda").show();
+                                setTimeout( function() {
+                                    $(".message1").hide();
+                                    $(".message2,.bubble1").show();
+                                    $(".blur").addClass("blur_background");
+                                },1500);
+                            },500);
+                        });
+                    });
+    };
+  }
+
+  $(".bubble1").click( function() {
+    $(".bad").hide(); 
+    $(".good").show();
+    $(".stop_invert").removeClass("invert");
+    $(".bubble1, #thunders").hide();
+    $(".bubble2").toggle();
+    setTimeout( function() {
+        $(".message2").hide();
+        $(".message3").show();
+        $(".blur").removeClass("blur_background");
+    },2500);
+  });
+
+  $(".bubble2").click( function() {
+    $(".bubble2").toggle();
+    $("#amanda, #cloud, #cloud2").hide();   
+  })
+
+
+
+    
+ </script>
+
+
+    
+</body>