fixed Instructions text

index.html

@@ -14,7 +14,7 @@
   <div class="subnav">
   <div class="topnav-left">
   <a class="wideInfo" href="#info"><i class="fa fa-question"></i></a>
-  <a class="wideInfo" href="#support"><i class="fa fa-heart"></i></a>
+  
   </div>
 
   <img class="title"  width="300" src="title.png" alt="horror">
@@ -24,6 +24,7 @@
   <div class="topnav-right">
     <a class="mobileInfo" href="#info"><i class="fa fa-question"></i></a>
     <a class="mobileInfo" href="#support"><i class="fa fa-heart"></i></a>
+    <a class="wideInfo" href="#support"><i class="fa fa-heart"></i></a>
     <a href="#stats"><i class="fas fa-chart-bar"></i></a>
   </div>
   </div>
@@ -45,7 +46,7 @@
         <i class="fas fa-tint"></i>
         <div class="InstructionText">
         <p>If you guess wrong a new 
-         scene from the movie is revealed. You have a maximum of 3 guesses to find the movie</p>
+         scene from the movie is revealed. You have a maximum of 3 guesses to find the movie.</p>
         </div>
       </div>
       <div class="content">
@@ -57,7 +58,7 @@
     <div class="content">
       <i class="fas fa-star"></i>
       <div class="InstructionText">
-        <p>If you guess right you'll have the chance to guess who the survivor is in the bonus stage </p>
+        <p>If you win you'll have the chance to guess which image contains the survivor who escapes the movie in the bonus stage.</p>
       </div>
       
     </div>
@@ -68,15 +69,9 @@
   <div id="stats" class="overlay">
     <div class="popup">
       <h2>Stats</h2>
-      <div class="chartNumber">
+      <h3>October 2022</h3>
-        <canvas id="myChart"></canvas>
-      </div>
-      <a class="close" href="#">&times;</a>
-      <h3>Streak</h3>
-      <div id="streakNumber" class="content">
-        your stats
-      </div>
       <div class="archive">
+        
       <div class="calendar">
         <!-- <div class="calendar__picture">
           <h2>18, Sunday</h2>
@@ -130,6 +125,14 @@
       </div>
       
     </div>
+    <div class="chartNumber">
+      <canvas id="myChart"></canvas>
+    </div>
+    <a class="close" href="#">&times;</a>
+    <h3>Streak</h3>
+    <div id="streakNumber" class="content">
+      your stats
+    </div>
    
     <button onclick="window.localStorage.clear();"class="resetButton">Reset Stats</button>
   
@@ -163,8 +166,14 @@
   </div> -->
 
   <!-- <h1>Guess the Movie!</h1> -->
+  
   <figure class="movie-img">
-<img src="images/images.jpg" id="movieFrame" alt="movie death frame" class="center">
+
+    
+
+<img src="images/back.png" id="movieFrame" alt="movie death frame" class="center" >
+<div class="loading" id="loader"></div>
+
   </figure>
 
 

main.js

@@ -10,9 +10,15 @@
 //pre-load images
 //image placeholder
 // gameover movie name
+
+window.addEventListener ("load", function() {
+    loader.style.display = 'none';
+});
+
  if(!localStorage.getItem('playedBefore')){
   // window.location = window.location.href + "#info";
   window.location = "https://gorkem.cc/horo#info"
+  // window.location = "file:///C:/Users/gogob/Documents/dEATHDLE/Test/index.html#info"
   localStorage.setItem('playedBefore',"true");
  }
 
@@ -71,7 +77,8 @@ function markCalendar() {
 
       if (dates[i].innerHTML==dayCount) {
         dates[i].classList.add('current');
-        for (var j = 0; j < i; j++) {
+        
+        for (var j = 0; j <= i; j++) {
           if (localStorage.getItem('day'+(j+1))) {
             if (localStorage.getItem('day'+(j+1))=='true') {
                 dates[j].classList.add('won');
@@ -154,10 +161,10 @@ streakNumber.textContent = localStorage.getItem('streak');
   if(localStorage.getItem('guessNo')){guessNo=localStorage.getItem('guessNo')};
   feedback.textContent = "🩸 " + (3-guessNo) + " guesses remaining";
   if(localStorage.getItem('result')) {localStorage.setItem('result', textResult);document.getElementById("resultText").innerHTML =textResult}
-  if(localStorage.getItem('firstGuess')){firstGuess.textContent = "❌" + localStorage.getItem('firstGuess');document.getElementById("firstGuess").style.display = "block";}
+  if(localStorage.getItem('firstGuess')){firstGuess.textContent = "❌ " + localStorage.getItem('firstGuess');document.getElementById("firstGuess").style.display = "block";}
-  if(localStorage.getItem('secondGuess')){secondGuess.textContent = "❌" + localStorage.getItem('secondGuess');document.getElementById("secondGuess").style.display = "block";}
+  if(localStorage.getItem('secondGuess')){secondGuess.textContent = "❌ " + localStorage.getItem('secondGuess');document.getElementById("secondGuess").style.display = "block";}
   if(localStorage.getItem('winningGuess')){document.getElementsByClassName("picButtons")[0].style.display="none";revealButtons(2);document.getElementById("feedback").innerHTML = "Next movie will reveal at <b>midnight!</b> 🕛";document.getElementById("shareResult").style.display = "block";document.getElementById("countDown").style.display = "block";document.getElementById("guessForm").style.display = "none";document.getElementById("firstGuess").style.display = "none";document.getElementById("secondGuess").style.display = "none";document.getElementById("resultText").style.display="block";}else {document.getElementById("shareResult").style.display = "none";document.getElementById("guessForm").style.display = "block";document.getElementById("resultText").style.display="none";};
-  secondGuess.textContent = "❌" + localStorage.getItem('secondGuess');
+  secondGuess.textContent = "❌ " + localStorage.getItem('secondGuess');
   revealButtons();
 }else {
 clearGuess();
@@ -189,6 +196,8 @@ window.onload = deathOftheDay();
   }
 
   function showPic(p=guessNo){
+    
+    // document.getElementById("movieFrame").src = "http://www.deelay.me/3000/https://via.placeholder.com/1920x1080";
     document.getElementById("movieFrame").src = pix[p];
     buttonNo = p;
     picButtons = document.getElementsByClassName('imageButton');
@@ -229,6 +238,7 @@ window.onload = deathOftheDay();
     document.getElementsByClassName("picButtons")[0].style.display="none";
     showPic(movieOfTheDay[1])
     console.log(buttonNo);
+    addData();
   }
   textResult = "Horrordle #"+dayCount+"\n🔪";
   function checkGuess() {
@@ -282,7 +292,7 @@ console.log("day count:" + dayCount);
       localStorage.setItem('guessNo', guessNo);
       feedback.textContent = "🩸 " + (3-guessNo) + " guesses remaining";
       document.getElementById("movieFrame").src = pix[guessNo];
-      firstGuess.textContent = "❌" + guess;
+      firstGuess.textContent = "❌ " + guess;
       localStorage.setItem('firstGuess', guess);
       document.getElementById("firstGuess").style.display = "block";
       textResult = textResult + "🟥";
@@ -293,7 +303,7 @@ console.log("day count:" + dayCount);
       localStorage.setItem('guessNo', guessNo);
       feedback.textContent =  "🩸 " + (3-guessNo) + " guesses remaining";
       document.getElementById("movieFrame").src = pix[guessNo];
-      secondGuess.textContent = "❌" + guess;
+      secondGuess.textContent = "❌ " + guess;
       localStorage.setItem('secondGuess', guess);
       document.getElementById("secondGuess").style.display = "block";
       textResult = textResult + "🟥";
@@ -313,6 +323,7 @@ console.log("day count:" + dayCount);
     console.log(textResult);
     document.getElementById("guessForm").reset();
     markCalendar();
+    
  }
 
 
@@ -390,7 +401,7 @@ const data = {
   labels: labels,
   datasets: [{
     label: 'Number of guesses',
-    backgroundColor: ['red','pink','blue'],
+    backgroundColor: ['#BB86FC'],
     fontColor: 'white',
     color:'white',
     data: [localStorage.getItem('firstGuessStat'), localStorage.getItem('secondGuessStat'), localStorage.getItem('thirdGuessStat')],
@@ -443,7 +454,12 @@ if (localStorage.getItem('day')!=dayCount)  {
     window.location.reload();
 }
 }, 1000);
-
+function addData(){
+	myChart.data.datasets[0].data[0] = localStorage.getItem('firstGuessStat');
+  myChart.data.datasets[0].data[1] = localStorage.getItem('secondGuessStat');
+  myChart.data.datasets[0].data[2] = localStorage.getItem('thirdGuessStat');
+  myChart.update();
+}
 const myChart = new Chart(
   document.getElementById('myChart'),
   config

style.css

@@ -5,6 +5,130 @@
 /* #movieName,#bonusQuestion{
   display: none;
 } */
+
+.movie-img {
+
+display: flex;
+justify-content: center;
+align-items: center;
+}
+
+.loading {
+  position: absolute;
+  /* z-index: 999; */
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* overflow: visible;
+  margin-left: auto;
+  margin-right: auto;
+  vertical-align: middle; */
+  /* top:0;
+  left: 0;
+  bottom: 0;
+  right: 0; */
+}
+
+/* Transparent Overlay */
+
+
+/* :not(:required) hides these rules from IE9 and below */
+.loading:not(:required) {
+  /* hide "loading..." text */
+  font: 0/0 a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+}
+
+.loading:not(:required):after {
+  content: '';
+  display: block;
+  font-size: 10px;
+  width: 1em;
+  height: 1em;
+  margin-top: -0.5em;
+  -webkit-animation: spinner 1500ms infinite linear;
+  -moz-animation: spinner 1500ms infinite linear;
+  -ms-animation: spinner 1500ms infinite linear;
+  -o-animation: spinner 1500ms infinite linear;
+  animation: spinner 1500ms infinite linear;
+  border-radius: 0.5em;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+}
+
+/* Animation */
+
+@-webkit-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-moz-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-o-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+
 .imageButton{
   
     background-color: #3a3a3a; /* Green */
@@ -28,8 +152,8 @@
   display: block;
    margin-left: auto;
   margin-right: auto; 
-  margin-top: 5px;
+  /* margin-top: 5px;
-  margin-bottom: 5px;
+  margin-bottom: 5px; */
   padding: 25px 10px;
   height: 78px; 
   width: 68px; 
@@ -47,7 +171,7 @@
 .resetButton{
   align-items: center;
   display: block;
-  margin-top: 10px;
+  margin-top: 20px;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
@@ -67,13 +191,13 @@
   margin-bottom: 20px;
 }
 .fa-tint{
-  color: red;
+  color: rgb(255, 57, 57);
   padding-left: 21.625px !important;
   padding-right: 21.625px !important;
 }
 .fa-star{
   width 68px;
-  color: yellow;
+  color: rgb(206, 206, 0);
   padding-right:13.75px !important;
   padding-left:13.75px !important;
 }
@@ -83,12 +207,12 @@
   display: table;
   /* margin: 30px 0; */
 }
-/* .chartNumber{
+.chartNumber{
     position: relative;
-    margin: auto;
+    margin-top: 20px;
-    height: 50%;
+    /* height: 50%;
-    width: 60%;
+    width: 60%; */
-} */
+}
 
 .overlay {
   position: fixed;
@@ -101,6 +225,7 @@
   visibility: hidden;
   opacity: 0;
   z-index: 99;
+  overflow: auto; 
 }
 #streakNumber{
   text-align: center;
@@ -132,10 +257,10 @@ h3 {
   width: 30%;
   position: relative;
   transition: all 5s ease-in-out;
-  overflow: hidden;
+   /* overflow: auto;  */
 }
 .popup i{
-  padding: 14px 16px;
+  padding: 20px 16px;
   font-size: 36px;
   display: block;
   width: 20%;
@@ -234,6 +359,7 @@ i{
   padding-top: 10px;
   padding-bottom:10px;
   width: 450px;
+  border-radius: 5px;
   /* display: block; */
   margin-left: auto;
   margin-right: auto;
@@ -432,7 +558,7 @@ margin-left: 8px;
   resize: horizontal;
   
   width: 400px;
-  background-color: #fff;
+  background-color: #616E7C;
   box-sizing: border-box;
   box-shadow: 0 5px 50px rgba(#000, 0.5);
   border-radius: 8px;
@@ -454,7 +580,7 @@ margin-left: 8px;
   justify-content: center;
   height: 25px;
   font-weight: 600;
-  color: #262626;
+  color: #F5F7FA;
 
 
 }
@@ -464,24 +590,26 @@ margin-left: 8px;
   align-items: center;
   justify-content: center;
   height: 25px;
-  color: grey;
+  color: #CBD2D9;
   font-style:oblique;
 
 }
 .current{
-  border-style: dashed;
+  border-style: solid;
-  background-color: orange;
+  /* background-color: orange; */
-  color: white;
+  color: grey;
   border-color: black;
   border-width: 2px;
   font-style:normal;
+  /* border-radius: 5px; */
 
 }
 .past{
-  background-color: orange;
+  background-color: #FFA000;
   cursor: pointer;
   color: white;
 font-style:normal;
+border-radius: 5px;
 
 
 }
@@ -489,15 +617,17 @@ font-style:normal;
   /* cursor:none; */
   color: white;
   cursor:default;
-  background-color: green;
+  background-color: #00897B;
 font-style:normal;
+border-radius: 5px;
   /* border-width: 0px; */
 }
 .lost{
   /* cursor:none; */
   color: white;
-  background-color: red;
+  background-color: #C62828;
 font-style:normal;
+border-radius: 5px;
   /* border-width: 0px; */
 }
 
@@ -517,6 +647,29 @@ font-style:normal;
     margin:0 -16.665%;
     width:133.33%;  
   }
+  .InstructionText {
+    font-size: 14px;
+    padding-left: 10px;
+  }
+  .popup{
+    /* padding-left: 5px;
+    padding-right: 5px; */
+  }
+  /* i{
+    padding-left: 5px !important;
+    padding-right: 20px;
+  }
+  .fa-tint{
+    padding-left: 5px !important;
+  }
+  .customIcon{
+    padding-left: 5px;
+    padding-right: 15px;
+    margin-left: -11px;
+  }
+  .fa-star{
+    padding-left: 0px !important;
+  } */
 }