saurians

tree/cat_shelter.css

@@ -373,11 +373,12 @@ span.button_text{
     line-height: 17px;
     text-align: center;
     width: 160px;
-    height: 35px;
+    height: 50px;
     border-radius: 10px;
     padding: 18px;
     border: #000000 solid 1px;
     z-index: 10;
+    cursor: pointer;
 }
 .bubble4:after {
     content: '';
@@ -406,6 +407,93 @@ span.button_text{
     display: block;
 }
 
+.bubble5 {
+    bottom: 65%;
+    left: 24%;
+    position: absolute;
+    background: #ffffff;
+    color: #000000;
+    font-family: sinistre;
+    font-size: 16px;
+    line-height: 17px;
+    text-align: center;
+    width: 250px;
+    height: 105px;
+    border-radius: 10px;
+    padding: 18px;
+    border: 1px black solid;
+    z-index: 20;
+}
+.bubble5:after {
+    content: '';
+    position: absolute;
+    display: block;
+    width: 0;
+    z-index: 1;
+    border-style: solid;
+    border-width: 0 30px 24px 0;
+    border-color: transparent #ffffff transparent transparent;
+    bottom: -24px;
+    left: 83%;
+    margin-left: -15px;
+}
+.bubble5:before {
+    content: '';
+    position: absolute;
+    width: 0;
+    z-index: 0;
+    border-style: solid;
+    border-width: 0 31px 25px 0;
+    border-color: transparent #000000 transparent transparent;
+    bottom: -26px;
+    left: 83%;
+    margin-left: -15px;
+    display: block;
+}
+.bubble6 {
+    bottom: 64%;
+    left: 50%;
+    position: absolute;
+    background: #ffffff;
+    color: #000000;
+    font-family:sinistre;
+    font-size: 16px;
+    line-height: 17px;
+    text-align: center;
+    width: 160px;
+    height: 55px;
+    border-radius: 10px;
+    padding: 18px;
+    border: #000000 solid 1px;
+    z-index: 10;
+}
+.bubble6:after {
+    content: '';
+    position: absolute;
+    display: block;
+    width: 0;
+    z-index: 2;
+    border-style: solid;
+    border-width: 24px 30px 0 0;
+    border-color: #ffffff transparent transparent transparent;
+    bottom: -24px;
+    left: 17%;
+    margin-left: -15px;
+}
+.bubble6:before {
+    content: '';
+    position: absolute;
+    width: 0;
+    z-index: 0;
+    border-style: solid;
+    border-width: 25px 31px 0 0;
+    border-color: #000000 transparent transparent transparent;
+    bottom: -26px;
+    left: 17%;
+    margin-left: -16px;
+    display: block;
+}
+
 @keyframes touch {
 0%  {transform: rotate(0deg);}
 50% {transform: rotate(-10deg);}

tree/cat_shelter.html

@@ -37,13 +37,17 @@
       <img  id="snake" src="imgs/cat_shelter/snake.gif" height="40px" style="display: none;">
       <img  id="lizard" src="imgs/cat_shelter/lizard.gif" height="25px"style="display: none;">
       <img  id="dog" src="imgs/cat_shelter/dog2.gif" height="50px"style="display: none;">
-      <img  id="pat" src="imgs/cat_shelter/parrot.gif" height="100px"style="display: none;">
+      <img  id="pat" src="imgs/cat_shelter/parrot.gif" height="100px" style="display: none;">
 
          <div class="comic_div">
           <div class="bubble1"style="display: none;">Hello stranger, are you looking for something? </div>
           <div class="bubble2"style="display: none;"> My name is Pat, nice to meet you. [...] </div>        
           <div class="bubble3"style="display: none;"> I don't know any Amanda. But believe me, I wouldn't be surprised if something happened to her as well. Like those poor cats. They didn't escape, someone kidnapped them. </div>        
-          <div class="bubble4"style="display: none;"> Follow me, I can tell you more about it.</div>        
+          <div class="bubble4"style="display: none;"> If you want I can tell you more about it. [...]</div>        
+          <div class="bubble5" style="display: none;">I have reasons to believe that the Major's family is not as human as we thought. You need to see this. 
+            They are financing the cat shelter to harvest the cubs as food: they made them disappear during the night. </div>        
+          <div class="bubble6"style="display: none;"> The hairballs will drive us to the Major's mansion. Follow me!</div>        
+
         </div>
 
     </div>
@@ -58,7 +62,7 @@
         <span class="instructions_arrow">→</span><span class="instructions"> Ask Pat if she has seen Amanda</span>   
     </div>
     <div class="message3" style="display:none;">
-     I hope Amanda did not get involved in this. <button onclick="location.href='major_house.html';"><span class="button_text">Follow Pat</span></button> to hear more about it. 
+     This sounds horrible. Can Amanda be involved in all this mess? <button onclick="location.href='major_house.html';"><span class="button_text">Follow Pat</span></button> to see if she is saying the truth. 
     </div>
  </div>
 
@@ -167,6 +171,14 @@
         $(".bubble3").show();
         setTimeout(function(){
             $(".bubble4").show();
+        }, 1000);
+    });
+
+    $(".bubble4").click(function(){
+        $(".bubble3, .bubble4").hide();
+        $(".bubble5").show();
+        setTimeout(function(){
+            $(".bubble6").show();
             setTimeout(function(){
                 $(".message3").show();
             }, 1000);

tree/major_house.css

@@ -40,16 +40,14 @@
 
  .instructions{
     font-family:jolyregularitalic;
-
  }
-    span.instructions_arrow{
+
+span.instructions_arrow{
     padding-left:40px;
     font-size: 2.4vw;
     font-family:jolybolditalic;
 }
 
-
-
  ::-moz-selection { /* Code for Firefox */   
     background: transparent;
   }
@@ -58,7 +56,7 @@
   }
 
 #ground_color {
-    width: 5100px;
+    width: 3600px;
     height: 120%;
     position:fixed;
     margin:-100px;
@@ -75,12 +73,12 @@
 #groundline {
     position: fixed;
     top:130px;
+    height:0%;
     width: 100%;
     border-top: 1px solid;
     z-index:-10;
 }
 
-
 div.text_container {
     bottom: 40px;
     left:40px;
@@ -101,10 +99,12 @@ button{
 }
 
 button:hover{
-border: 0.1em transparent solid;
--webkit-box-shadow: 0px 0px 8px 1px  black;
--moz-box-shadow: 0px 0px 8px 1px  black;
+    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;    
 box-shadow: 0px 0px 8px 1px  black;    
+    box-shadow: 0px 0px 8px 1px  black;    
 }
 
 .flipped {
@@ -116,7 +116,6 @@ box-shadow: 0px 0px 8px 1px  black;
     -ms-transform: scale(-1, 1);
 }
 
-
 span.button_text{
     font-size: 1.6vw;
     padding: 8px;
@@ -126,135 +125,184 @@ span.button_text{
     font-family: jolybolditalic;
 }
 
-
 .duo{
     position: absolute;
-    bottom: 25%;
-    left: 5%;
+    bottom: 35%;
+    left: 13%;
     width: 200px;
     height: 100px;
+    z-index: 2;
+}
+.glasses_bar {
+    top:40px;
+    right:80px;
+    position:fixed;
+    border-radius: 25vw;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-top: 3px;
+    padding-bottom: 5px;
+    font-family: sinistre;
+    background-color: white;
+    border: 0.11vw black solid;
+    border-radius: 25vw;
+    color:black;
+    cursor:pointer;
+    font-size: 1.4vw;
+    animation-name: appear;
+    animation-duration: 0.2s;   
+}
+
+@keyframes appear {
+    0%  {top: 80px;}
+    25% {top: 90px;}
+    50%  {top: 80px;}
+    75% {top: 90px;}
+    100%  {top: 80px;}
+    }
+
+.glasses_bar:hover{
+    border: 0.11vw transparent solid;
+    color:#c94dff;
+    -webkit-box-shadow: 0px 0px 8px 1px  #c94dff ;
+    -moz-box-shadow: 0px 0px 8px 1px  #c94dff ;
+    box-shadow: 0px 0px 8px 1px  #c94dff ;  
+}
+.glasses_bar_black{
+    border: 0.11vw transparent solid;
+    color:#c94dff;
+    background-color: #000000;
+    -webkit-box-shadow: 0px 0px 8px 1px  #c94dff ;
+    -moz-box-shadow: 0px 0px 8px 1px  #c94dff ;
+    box-shadow: 0px 0px 8px 1px  #c94dff ;   
 }
 
 
 /*images*/ 
 
 #tree1 {
-    bottom:30%;
-    left: 8%;
+    bottom:50%;
+    left: 7%;
     position: absolute;
-    z-index:-1;
+    z-index:0;
 }
 #tree2 {
-    bottom:15%;
-    left: 22%;
+    bottom:25%;
+    left: 18%;
     position: absolute;
     z-index:5;
 }
 #tree3 {
-    bottom:30%;
-    left: 40%;
+    bottom:60%;
+    left: 35%;
     position: absolute;
     z-index:-1;
 }
 #tree4 {
-    bottom:15%;
-    left: 60%;
+    bottom:50%;
+    left: 50%;
+    position: absolute;
+    z-index:1;
+}
+#tree5 {
+    bottom:25%;
+    left: 75%;
     position: absolute;
     z-index:5;
 }
-
-
-
-/* amanda baloons*/
-
-.bubble1 {
-    right: 25%;
-    top:34%;
+#tree6 {
+    bottom:55%;
+    right: 4%;
     position: absolute;
-    background: #ffffff;
-    color: #000000;
-    font-family: sinistre;
-    font-size: 16px;
-    line-height: 17px;
-    text-align: center;
-    width: 190px;
-    height: 50px;
-    border-radius: 10px;
-    padding: 18px;
-    border: #000000 solid 1px;
-
+    z-index:0;
 }
-.bubble1:after {
-    content: '';
+#tree7 {
+    bottom:65%;
+    right: 27%;
     position: absolute;
-    display: block;
-    width: 0;
-    z-index: 1;
-    border-style: solid;
-    border-color: #ffffff transparent;
-    border-width: 0 20px 20px;
-    top: -20px;
-    left: 76%;
-    margin-left: -20px;
+    z-index:0;
 }
-.bubble1:before {
-    content: '';
+#fur1 {
+    bottom:55%;
+    left: 12%;
     position: absolute;
-    width: 0;
-    z-index: 0;
-    border-style: solid;
-    border-color: #000000 transparent;
-    border-width: 0 21px 21px;
-    top: -21.5px;
-    left: 76%;
-    margin-left: -21px;
-    display: block;
+    z-index:0;
 }
-.bubble2{
-    right: 11%;
-    top:35%;
+#fur2 {
+    bottom:72%;
+    left: 20%;
     position: absolute;
-    background: #ffffff;
-    color: #000000;
-    font-family: sinistre;
-    font-size: 16px;
-    line-height: 17px;
-    text-align: center;
-    width: 220px;
-    height: 75px;
-    border-radius: 10px;
-    padding: 18px;
-    border: #000000 solid 1px;
+    z-index:0;
 }
-.bubble2:after {
-    content: '';
+#fur3 {
+    bottom:25%;
+    left: 23%;
     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;
+    z-index:5;
 }
-.bubble2:before {
-    content: '';
+#fur4 {
+    bottom:65%;
+    left: 38%;
     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;
+    z-index:-2;
+}
+#fur5 {
+    bottom:20%;
+    left: 55%;
+    position: absolute;
+    z-index:-2;
+}
+.house {
+    top:15%;
+    right: 8%;
+    position: absolute;
+    z-index:-2;
+}
+.figure5{
+    bottom:50%;
+    right: 15%;
+    position: absolute;
+    z-index:2;
+}
+.figure2{
+    bottom:70%;
+    right: 21%;
+    position: absolute;
+    z-index:-2;
 }
-.bubble3 {
-    right: 20%;
-    top:53%;
+.figure1{
+    bottom:26%;
+    right: 8%;
+    position: absolute;
+    z-index:-2;
+}
+.figure4{
+    bottom:35%;
+    right: 18%;
+    position: absolute;
+    z-index:-2;
+}
+.figure3{
+    top:32%;
+    right: 8%;
+    position: absolute;
+    z-index:2;
+}
+.figure6{
+    bottom:30%;
+    right: 4%;
+    position: absolute;
+    z-index:3;
+}
+.figure7{
+    bottom:35%;
+    right: 12%;
+    position: absolute;
+    z-index:-2;
+}
+.bubble1 {
+    right: 24%;
+    top:18%;
     position: absolute;
     background: #ffffff;
     color: #000000;
@@ -262,13 +310,13 @@ span.button_text{
     font-size: 16px;
     line-height: 17px;
     text-align: center;
-    width: 200px;
-    height: 55px;
+    width: 180px;
+    height: 120px;
     border-radius: 10px;
     padding: 18px;
     border: #000000 solid 1px;
 }
-.bubble3:after {
+.bubble1:after {
     content: '';
     position: absolute;
     display: block;
@@ -276,27 +324,28 @@ span.button_text{
     z-index: 1;
     border-style: solid;
     border-color: #ffffff transparent;
-    border-width: 0 20px 20px;
-    top: -20px;
-    left: 73%;
+    border-width: 20px 20px 0;
+    bottom: -20px;
+    left: 66%;
     margin-left: -20px;
 }
-.bubble3:before {
+.bubble1: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%;
+    border-width: 21px 21px 0;
+    bottom: -21.5px;
+    left: 66%;
     margin-left: -21px;
     display: block;
 }
-.bubble4{
-    right: 8%;
-    top:6%;
+
+.bubble2 {
+    right: 24%;
+    top:18%;
     position: absolute;
     background: #ffffff;
     color: #000000;
@@ -304,36 +353,36 @@ span.button_text{
     font-size: 16px;
     line-height: 17px;
     text-align: center;
-    width: 190px;
-    height: 90px;
+    width: 180px;
+    height: 120px;
     border-radius: 10px;
     padding: 18px;
     border: #000000 solid 1px;
 }
-.bubble4:after {
+.bubble2: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;
+    border-color: #ffffff transparent;
+    border-width: 20px 20px 0;
+    bottom: -20px;
+    left: 66%;
+    margin-left: -20px;
 }
-.bubble4:before {
+.bubble2: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;
+    border-color: #000000 transparent;
+    border-width: 21px 21px 0;
+    bottom: -21.5px;
+    left: 66%;
+    margin-left: -21px;
     display: block;
 }
 
@@ -341,22 +390,22 @@ span.button_text{
 /* hide scroll bar */
 /* width */
 ::-webkit-scrollbar {
-    color:white;
+    color: transparent;
   }
   
   /* Track */
   ::-webkit-scrollbar-track {
-    background: white; 
+    background: transparent; 
   }
    
   /* Handle */
   ::-webkit-scrollbar-thumb {
-    background: white; 
+    background: transparent; 
   }
   
   /* Handle on hover */
   ::-webkit-scrollbar-thumb:hover {
-    background: white; 
+    background: transparent; 
   }
 
 

tree/major_house.html

@@ -3,48 +3,95 @@
 <head>
       <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
-    <title>chemtrails</title>
-    <link rel="icon" href="imgs/pleiadian_s/planet7.gif">
+    <title>follow Pat</title>
+    <link rel="icon" href="imgs/major_house/house1.gif">
     <link rel="stylesheet" href="major_house.css">
     
 </head>
 <body >
 
-    <div id="ground_color"></div>
+    <div id="ground_color" class="to_invert"></div>
 
-    <div id="groundline" ></div>
+    <div id="groundline" class="to_invert"></div>
 
-
-
-
-    <div id="ground"> 
     <div class="duo">
         <span  id="player_img"></span>
         <img  id="pat" src="imgs/cat_shelter/parrot.gif" height="100px">
     </div>
 
-    <img  id="tree1" src="imgs/cat_shelter/tree.gif" height="160px">
-    <img  id="tree2" src="imgs/cat_shelter/tree.gif"height="160px">
-    <img  id="tree3" src="imgs/cat_shelter/tree.gif" height="160px">
-    <img  id="tree4" src="imgs/cat_shelter/tree.gif" height="160px">
-    <img  id="tree5"src="imgs/cat_shelter/tree.gif" height="160px">
 
+    <div id="ground" > 
 
-<div class="bubble1" style="display: none;">Hello <span id="player_name"></span>, your enlightened spirit guided you here.</div>
-<div class="bubble2" 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" style="display: none;">We are the beings of light. We don't belong to this planet.</div>
-<div class="bubble4" 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" 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>
+    <img  id="fur1" src="imgs/major_house/ball.gif" height="60px">
+    <img  id="fur2" src="imgs/major_house/ball.gif" height="60px">
+    <img  id="fur3" src="imgs/major_house/ball.gif" height="60px">
+    <img  id="fur4" src="imgs/major_house/ball.gif" height="60px">
+    <img  id="fur5" src="imgs/major_house/ball.gif" height="60px">
 
 
-<div class="text_container" > 
+    <img  id="tree1" src="imgs/park/tree4.gif" height="160px">
+    <img  id="tree2" src="imgs/park/tree4.gif" height="160px">
+    <img  id="tree3" src="imgs/park/tree4.gif" height="160px">
+    <img  id="tree4" src="imgs/park/tree4.gif" height="160px">
+    <img  id="tree5" src="imgs/park/tree4.gif" height="160px">
+    <img  id="tree6" src="imgs/park/tree4.gif" height="130px">
+    <img  id="tree7" src="imgs/park/tree4.gif" height="130px">
 
-  <div class="message1">
-  <span class="instructions"><span class="instructions_arrow">→</span> </span>
+<div class="house">
+    <img  class="good" src="imgs/major_house/house1.gif" height="160px">
+    <img  class="bad" src="imgs/major_house/volcano.gif" height="140px"style="display: none;">
+
+</div>
+    <div class="figure1">
+        <img  id="person1" class="good" src="imgs/major_house/person1.gif" height="110px">
+        <img  id="rept1" class="bad" src="imgs/major_house/rept1.gif" height="120px" style="display: none;"> 
+    </div>
+    <div class="figure2">
+        <img  id="person2" class="good" src="imgs/major_house/person2.gif" height="80px">
+        <img  id="rept2" class="bad" src="imgs/major_house/rept2.gif" height="120px" style="display: none;"> 
+    </div>
+    <div class="figure3">
+        <img  id="person3" class="good" src="imgs/major_house/person3.gif" height="110px">
+        <img  id="rept3" class="bad" src="imgs/major_house/rept3.gif" height="120px" style="display: none;"> 
+    </div>
+    <div class="figure4">
+        <img  id="person4" class="good" src="imgs/major_house/person4.gif" height="100px">
+        <img  id="rept4" class="bad" src="imgs/major_house/rept4.gif" height="120px" style="display: none;"> 
+    </div>
+    <div class="figure5">
+        <img  id="person5" class="good" src="imgs/major_house/person5.gif" height="120px">
+        <img  id="rept5" class="bad" src="imgs/major_house/rept5.gif" height="120px" style="display: none;"> 
+    </div>
+    <div class="figure6">
+        <img  id="person6" class="good" src="imgs/major_house/person6.gif" height="120px">
+        <img  id="rept6" class="bad" src="imgs/major_house/rept6.gif" height="150px" style="display: none;"> 
     </div>
+    <div class="figure7">
+        <img  id="cat" class="good" src="imgs/major_house/cat.gif" height="60px">
+        <img  id="barbecue" class="bad" src="imgs/major_house/barbecue4.gif" height="100px" style="display: none;"> 
+    </div>
+
+<div class="bubble1 to_invert" style="display: none;">
+    The Major and his family are actually saurian settlers who came here to invade planet earth. 
+    Use my magnifying glass to see them in their real appearance. 
+</div>
+<div class="bubble2 to_invert" style="display: none;">
+    They are harvesting the cats to be ready for the arrival of other groups of invaders. 
+    Follow me to the butchery, I can show you the proof of what I'm saying. 
+</div>
+
+<button class="glasses_bar" style="display: none;"> ✜ magnifying glass </button>
+<div class="text_container to_invert " > 
+
+  <div class="message1">
+    <span class="instructions"><span class="instructions_arrow">→</span> Follow the hairballs </span>      
+</div>
     <div class="message2" style="display: none;">
+    Pat was right, you reached the major's mansion. 
     </div>
     <div class="message3" style="display: none;">
+ Pat was right from the beginning! I hope Amanda did not get hurt: she can be anywhere by now. <br>
+ It seems there is no option but to <button onclick="location.href='butchery.html';"><span class="button_text">go to the butchery</span></button> . 
     </div>
 </div>
 
@@ -54,8 +101,20 @@
 
 // saves game step in the local storage 
   window.onload = function() {
-  window.localStorage.setItem("pleiadians","opened");
-  console.log ("pleiadians:",localStorage.pleiadians);
+    window.localStorage.setItem("major_house","opened");
+    console.log ("major house:",localStorage.major_house);
+    /*
+    setTimeout( function() {
+        $('.bubble1').show();
+        setTimeout( function() {
+            $('.bubble2').show();
+            setTimeout( function() {
+                $('.message1').hide();
+                $('.message2').show();
+            }, 2000);
+        }, 2000);
+    }, 1000);
+*/
     }
 
 //get player avatar from local storage
@@ -65,13 +124,11 @@
     var player_img = document.querySelector("#player_img");
     player_img.appendChild(img);
 
-//get player name from local storage
-    document.querySelector('#player_name').innerHTML = localStorage.playerName;
 
 //adjust camera scroll
 var $div = $('.duo');
     var screenLeftMin = 50;
-    var screenLeftMax = 700;
+    var screenLeftMax = 170;
       
   function adjustScroll() {
       var playerLeft = parseInt($div.css("left"));
@@ -113,14 +170,19 @@ $(document).keydown(function(e) {
         offset.left = 80;
     }
 
-    if (offset.left >  $("#ground").width()  - 700) {
+    if (offset.left >  $("#ground").width() - 1000) {
+        offset.left = $("#ground").width() - 1000;
+        $(document).scrollLeft(3500);
         $(".message1").hide();
         $(".message2").show();
+        setTimeout( function() {
+                $('.bubble1').show();
+                setTimeout( function() {
+                    $('.glasses_bar').show();
+                }, 3000);
+            }, 2000);
     }
 
-    if (offset.left >  $("#ground").width()  - 80) {
-        offset.left = $("#ground").width() - 80;
-    }
 
     $div.css("left", offset.left);
     $div.css("top", offset.top);
@@ -128,6 +190,16 @@ $(document).keydown(function(e) {
     adjustScroll();   
 })
 
+    $('.glasses_bar').click ( function(){
+        $('.to_invert').toggleClass("invert");
+        $('.glasses_bar').toggleClass("glasses_bar_black");
+        $('.good').toggle();
+        $('.bad').toggle();
+        $('.bubble1, .message2').hide();
+        $('.bubble2, .message3').show();
+        $("body").css("overflow", "hidden");
+        
+    })
 
   
  </script>