sky

tree/pleiadians_satanism.css

@@ -0,0 +1,375 @@
+
+@font-face {
+    font-family: sinistre;
+    src: url(fonts/Sinistre-S†Caroline.woff),
+    url(fonts/Sinistre-S†Caroline.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-y: hidden;
+
+ }
+
+ .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: 5100px;
+    height: 120%;
+    position:fixed;
+    margin:-100px;
+    background-color: white;
+    z-index:-10;
+}
+
+#ground{
+    position:absolute;
+    height:100%;
+    width:3500px;  
+}
+
+#groundline {
+    position: fixed;
+    bottom: 35%;
+    height:0%;
+    width: 100%;
+    border-top: 1px solid;
+    z-index:-10;
+}
+
+
+div.text_container {
+    bottom: 40px;
+    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;    
+}
+
+.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);
+}
+
+
+span.button_text{
+    font-size: 1.6vw;
+    padding: 8px;
+}
+
+#player_name{
+    font-family: jolybolditalic;
+}
+
+
+
+div#player_img {
+    bottom: 23%;
+    left: 10%;
+    position:absolute ;
+    z-index: 2;
+    }
+
+.figure1{ 
+    top:10%;
+    right: 30%;
+    position: absolute;
+    z-index: 2;
+    cursor: pointer;
+}
+#planet2{
+    top:20%;
+    right: 20%;
+    position: absolute;
+    z-index: 2;
+    cursor: pointer;
+}
+
+.figure2{ 
+    top:60%;
+    right: 6%;
+    position: absolute;
+    cursor: pointer;
+}
+.figure3{ 
+    top:50%;
+    right: 10%;
+    position: absolute;
+    cursor: pointer;
+}
+.figure4{ 
+    top:30%;
+    right: 3%;
+    position: absolute;
+    cursor: pointer;
+}
+#planet4{
+    top:8%;
+    left:20%;
+    position: absolute;
+    z-index: 2;
+    cursor: pointer;
+}
+#planet6{
+    top:20%;
+    right: 8%;
+    position: absolute;
+    z-index: 2;
+    cursor: pointer;
+}
+#planet8{
+    top:20%;
+    left: 4%;
+    position: absolute;
+    z-index: 2;
+    cursor: pointer;
+}
+
+#trail1{
+    top:7%;
+    left: 1%;
+    position: absolute;
+    z-index: 3;
+    cursor: pointer;
+}
+
+#trail2{
+    top:20%;
+    left: 15%;
+    position: absolute;
+    z-index: 3;
+    cursor: pointer;
+}
+#trail3{
+    top:5%;
+    left: 35%;
+    position: absolute;
+    z-index: 3;
+    cursor: pointer;
+}
+#trail4{
+    top:20%;
+    left: 48%;
+    position: absolute;
+    z-index: 3;
+    cursor: pointer;
+}
+
+
+
+/*images*/ 
+
+#tree1 {
+    bottom:30%;
+    left: 8%;
+    position: absolute;
+    z-index:-1;
+}
+#tree2 {
+    bottom:15%;
+    left: 22%;
+    position: absolute;
+    z-index:5;
+}
+#tree3 {
+    bottom:30%;
+    left: 40%;
+    position: absolute;
+    z-index:-1;
+}
+#tree4 {
+    bottom:15%;
+    left: 60%;
+    position: absolute;
+    z-index:5;
+}
+#tree5 {
+    bottom:15%;
+    left: 80%;
+    position: absolute;
+    z-index:5;
+}
+
+
+/* amanda baloons*/
+
+.bubble1 {
+    right: 8.5%;  
+    top:12%;
+    position: absolute;
+    background: #ffffff;
+    color: #000000;
+    font-family: sinistre;
+    font-size: 16px;
+    line-height: 17px;
+    text-align: center;
+    width: 140px;
+    height: 57px;
+    border-radius: 10px;
+    padding: 18px;
+    border: #000000 solid 1px;
+    z-index: 50;
+}
+.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 {
+    right: 13%;  
+    top:10%;
+    position: absolute;
+    background: #ffffff;
+    color: #000000;
+    font-family: sinistre;
+    font-size: 16px;
+    line-height: 17px;
+    text-align: center;
+    width: 188px;
+    height: 57px;
+    border-radius: 10px;
+    padding: 18px;
+    border: #000000 solid 1px;
+    z-index: 50;
+}
+.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/pleiadians_satanism.html

@@ -0,0 +1,169 @@
+<!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>chemtrails</title>
+    <link rel="icon" href="imgs/pleiadian_s/planet7.gif">
+    <link rel="stylesheet" href="pleiadians_satanism.css">
+    
+</head>
+<body >
+
+    <div id="ground_color" class="invert scroll-pane stop_invert"></div>
+
+    <div id="groundline" class="invert scroll-pane stop_invert"></div>
+
+      <div  id="player_img"></div>
+
+    <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="tree1" src="imgs/pleiadian_s/tree.gif" height="160px">
+    <img  id="tree2" src="imgs/pleiadian_s/tree.gif" height="160px">
+    <img  id="tree3" src="imgs/pleiadian_s/tree.gif" height="160px">
+    <img  id="tree4" src="imgs/pleiadian_s/tree.gif" height="160px">
+    <img  id="tree5" src="imgs/pleiadian_s/tree.gif" height="160px">
+
+<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;">
+</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;">
+</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;">
+</div>
+
+<img  id="planet6" src="imgs/pleiadian_s/planet6.gif" height="150px">
+
+<div class="figure4">
+  <img  id="planet7" src="imgs/pleiadian_s/planet7.gif"height="100px">
+  <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">
+
+
+<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="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 " > 
+
+  <div class="message1">
+  <span class="instructions"><span class="instructions_arrow">→</span> Move with the arrows to follow the trails in the sky.</span>
+    </div>
+    <div class="message2" style="display: none;">
+    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. 
+    </div>
+</div>
+
+
+<script src="jquery.min.js"></script>
+  <script>
+
+// saves game step in the local storage 
+  window.onload = function() {
+  window.localStorage.setItem("pleiadians","opened");
+  console.log ("pleiadians:",localStorage.pleiadians);
+    }
+
+//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;
+
+//adjust camera scroll
+var $div = $('#player_img');
+    var screenLeftMin = 50;
+    var screenLeftMax = 700;
+      
+  function adjustScroll() {
+      var playerLeft = parseInt($div.css("left"));
+      var scrollLeft = $(document).scrollLeft();
+      var screenLeft = playerLeft - scrollLeft;
+      console.log ("screenleft:", screenLeft);
+        
+      if (screenLeft > screenLeftMax ) {
+          $(document).scrollLeft(playerLeft - screenLeftMax)
+      }
+      
+            if (screenLeft < screenLeftMin ) {
+          $(document).scrollLeft(playerLeft - screenLeftMin)
+      }
+  }    
+   
+//move the character 
+
+$(document).keydown(function(e) {
+     var offset = $div.position();
+    console.log("offset:", offset);   
+
+     switch (e.which) {
+        case 37:
+            offset.left -= 20;
+             console.log("left");
+             $div.addClass("flipped");
+            break;
+
+        case 39:
+             offset.left += 20;
+             console.log("right");
+             $div.removeClass("flipped");
+              break;
+
+       } 
+//check the offset and prevent the character to exceed the screen dimension 
+    if (offset.left < 80) {
+        offset.left = 80;
+    }
+
+    if (offset.left >  $("#ground").width()  - 700) {
+        $(".message1").hide();
+        $(".message2").show();
+    }
+
+    if (offset.left >  $("#ground").width()  - 80) {
+        offset.left = $("#ground").width() - 80;
+    }
+
+    $div.css("left", offset.left);
+    $div.css("top", offset.top);
+    e.preventDefault();
+    adjustScroll();
+    
+})
+
+  
+ </script>
+
+<script type="text/javascript" src="index.js" ></script>
+
+    
+</body>

tree/spring_river.css

@@ -423,21 +423,4 @@ div#player_img {
     background: black; 
   }
 
-  .scrollbar  { 
-  overflow-x: hidden;
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: -100px !important;
 
- }
- 
- .scrollbar::-webkit-scrollbar {
-  display: none;
-
- }
-
- .scroll-pane{
-	width: 100%;
-	height: 200px;
-	overflow: auto;
-
-}

tree/spring_river.html

@@ -16,18 +16,19 @@
 
     <div class="army">
       <div  id="player_img" ></div>
-      <img  id="fighter1" src="imgs/spring_river/fighter1.gif" height="120px">
+      <img  id="fighter1"  src="imgs/spring_river/fighter1.gif" height="120px" >
-      <img  id="fighter2" src="imgs/spring_river/fighter2.gif" height="120px">
+      <img  id="fighter2"  src="imgs/spring_river/fighter2.gif" height="120px">
-      <img  id="fighter3" src="imgs/spring_river/fighter3.gif" height="120px">
+      <img  id="fighter3"  src="imgs/spring_river/fighter3.gif" height="120px">
       <img  id="fighter4" src="imgs/spring_river/fighter4.gif" height="120px">
       <img  id="fighter5" src="imgs/spring_river/fighter5.gif" height="120px">
-      <img  id="fighter6" src="imgs/spring_river/fighter6.gif" height="160px">
+      <img  id="fighter6"  src="imgs/spring_river/fighter6.gif" height="160px">
       <img  id="fighter7" src="imgs/spring_river/fighter7.gif" height="120px"> 
       <img  id="fighter8" src="imgs/spring_river/fighter8.gif" height="150px">
-  </div>
+    </div>
     
-<div id="ground" class="scroll-pane"> 
+      <div id="ground" class="scroll-pane"> 
-<div class="tree1">
+
+        <div class="tree1">
     <img  id="tree1" src="imgs/spring_river/tree.gif" height="160px">
     <img  id="tree_flipped1" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;"> 
 </div>
@@ -252,15 +253,16 @@ $(document).keydown(function(e) {
       setTimeout( function () {
         $(".bubble1").show();
         setTimeout( function () {
-          $(".bubble2").show();
           $(".bad").hide();
           $(".good").show();
           $(".stop_invert").removeClass("invert");
+          $('html').css({overflow: 'hidden'});
           setTimeout( function () {
+            $(".bubble2").show();
             $(".message3").hide();
             $(".message4").show();
           }, 2000);
-        }, 3000);
+        }, 4000);
       }, 2000);
     };
 
@@ -270,6 +272,7 @@ $(document).keydown(function(e) {
 
 
 
+    
  </script>
 
 <script type="text/javascript" src="index.js" ></script>