Edited Instructions and added colors

images/Group.svg

@@ -0,0 +1,8 @@
+<svg width="640" height="220" viewBox="0 0 640 220" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M639.04 12.6266C639.04 6.20996 633.79 0.959961 627.373 0.959961H453.827C447.41 0.959961 442.16 6.20996 442.16 12.6266V208.04C442.16 214.457 447.41 219.707 453.827 219.707H627.373C633.79 219.707 639.04 214.457 639.04 208.04V12.6266ZM465.493 24.2933H615.707V196.373H465.493V24.2933Z" fill="white"/>
+<path d="M418.84 12.6266C418.84 6.20996 413.59 0.959961 407.173 0.959961H233.627C227.21 0.959961 221.96 6.20996 221.96 12.6266V208.04C221.96 214.457 227.21 219.707 233.627 219.707H407.173C413.59 219.707 418.84 214.457 418.84 208.04V12.6266ZM394.048 196.373H245.301V24.2933H394.048V196.373Z" fill="white"/>
+<path d="M197.16 12.6266C197.16 6.20996 191.91 0.959961 185.493 0.959961H11.9467C5.53003 0.959961 0.280029 6.20996 0.280029 12.6266V208.04C0.280029 214.457 5.53003 219.707 11.9467 219.707H185.493C191.91 219.707 197.16 214.457 197.16 208.04V12.6266ZM23.6134 24.2933H173.827V196.373H23.6134V24.2933Z" fill="white"/>
+<path d="M113.676 61V165H91.6875V81.8711H91.0781L67.2617 96.8008V77.3008L93.0078 61H113.676Z" fill="white"/>
+<path d="M281.43 165V149.156L318.449 114.879C321.598 111.832 324.238 109.09 326.371 106.652C328.538 104.215 330.18 101.828 331.297 99.4922C332.414 97.1224 332.973 94.5664 332.973 91.8242C332.973 88.7773 332.279 86.1536 330.891 83.9531C329.503 81.7187 327.607 80.0091 325.203 78.8242C322.799 77.6055 320.074 76.9961 317.027 76.9961C313.845 76.9961 311.069 77.6393 308.699 78.9258C306.329 80.2122 304.501 82.0573 303.215 84.4609C301.928 86.8646 301.285 89.7253 301.285 93.043H280.414C280.414 86.2383 281.954 80.3307 285.035 75.3203C288.116 70.3099 292.432 66.4336 297.984 63.6914C303.536 60.9492 309.935 59.5781 317.18 59.5781C324.628 59.5781 331.111 60.8984 336.629 63.5391C342.181 66.1458 346.497 69.7682 349.578 74.4062C352.659 79.0443 354.199 84.3594 354.199 90.3516C354.199 94.2786 353.421 98.1549 351.863 101.98C350.34 105.806 347.615 110.055 343.688 114.727C339.76 119.365 334.225 124.934 327.082 131.434L311.898 146.312V147.023H355.57V165H281.43Z" fill="white"/>
+<path d="M540.871 166.422C533.288 166.422 526.534 165.118 520.609 162.512C514.719 159.871 510.064 156.249 506.645 151.645C503.259 147.007 501.516 141.658 501.414 135.598H523.555C523.69 138.137 524.52 140.371 526.043 142.301C527.6 144.197 529.665 145.669 532.238 146.719C534.811 147.768 537.706 148.293 540.922 148.293C544.273 148.293 547.236 147.701 549.809 146.516C552.382 145.331 554.396 143.689 555.852 141.59C557.307 139.491 558.035 137.07 558.035 134.328C558.035 131.552 557.257 129.098 555.699 126.965C554.176 124.798 551.975 123.105 549.098 121.887C546.254 120.668 542.868 120.059 538.941 120.059H529.242V103.91H538.941C542.259 103.91 545.188 103.335 547.727 102.184C550.299 101.033 552.297 99.4414 553.719 97.4102C555.141 95.3451 555.852 92.9414 555.852 90.1992C555.852 87.5924 555.225 85.3073 553.973 83.3437C552.754 81.3464 551.027 79.7891 548.793 78.6719C546.592 77.5547 544.02 76.9961 541.074 76.9961C538.095 76.9961 535.37 77.5378 532.898 78.6211C530.427 79.6706 528.447 81.1771 526.957 83.1406C525.467 85.1042 524.672 87.4062 524.57 90.0469H503.496C503.598 84.0547 505.307 78.7734 508.625 74.2031C511.943 69.6328 516.411 66.0612 522.031 63.4883C527.685 60.8815 534.066 59.5781 541.176 59.5781C548.353 59.5781 554.633 60.8815 560.016 63.4883C565.398 66.095 569.579 69.6159 572.559 74.0508C575.572 78.4518 577.061 83.3945 577.027 88.8789C577.061 94.7018 575.25 99.5599 571.594 103.453C567.971 107.346 563.249 109.818 557.426 110.867V111.68C565.077 112.661 570.9 115.319 574.895 119.652C578.923 123.952 580.921 129.335 580.887 135.801C580.921 141.725 579.211 146.99 575.758 151.594C572.339 156.198 567.616 159.82 561.59 162.461C555.564 165.102 548.658 166.422 540.871 166.422Z" fill="white"/>
+</svg>

index.html

@@ -38,22 +38,29 @@
   		<div class="content">
   			<i class="far fa-image"></i>
         <div class="InstructionText">
-        <p>Use the death scene provided to guess the name of the movie.</p>
+        <p>Use the movie scene provided to guess the name of the movie.</p>
         </div>
       </div>
       <div class="content">
-        <i class="fas fa-skull"></i>
+        <i class="fas fa-tint"></i>
         <div class="InstructionText">
-        <p>If you guess wrong a new death
-         scene from the movie is revealed but you will use 1 point.</p>
+        <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>
         </div>
       </div>
       <div class="content">
-      <i class="fas fa-tint"></i>
+        <img src="images/Group.svg" alt="" class="customIcon">
       <div class="InstructionText">
-        <p>You have a maximum of 3 guesses to find the movie.</p>
+        <p>you can use the buttons below the image to navigate once they are revealed.</p>
       </div>
     </div>
+    <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>
+      </div>
+      
+    </div>
    </div>
   	</div>
   </div>

main.js

@@ -12,7 +12,8 @@
 // gameover movie name
  if(!localStorage.getItem('playedBefore')){
   // window.location = window.location.href + "#info";
-  window.location = "file:///C:/Users/gogob/Documents/dEATHDLE/Test/index.html#info"
+  window.location = "https://gorkem.cc/horo#info"
+  localStorage.setItem('playedBefore',"true");
  }
 
 var buttonNo = 0;
@@ -52,8 +53,8 @@ function revealButtons(g = guessNo){
   console.log("gameBeginning: ",gameBeginning);
   console.log("now: ",present_date);
   
-var textResult = "Horrordle #"+dayCount+"\n🔪";
-console.log(textResult);
+
+// console.log(textResult);
 function dayCounter(){
   dayCount = Math.floor((present_date - gameBeginning) / (1000 * 60 * 60 * 24));
   return dayCount;
@@ -118,7 +119,7 @@ function firstCheck(){
 
 
 
-textResult = "Horrordle #"+dayCount+"\n🔪";
+
 function clearGuess() {
   localStorage.removeItem('firstGuess');
   localStorage.removeItem('secondGuess');
@@ -220,6 +221,7 @@ window.onload = deathOftheDay();
     document.getElementById("feedback").style.display = "block";
     document.getElementById("feedback").innerHTML = "Next movie revealed at midnight! 🕛 <br>";
     document.getElementById("resultText").innerHTML = textResult;
+    document.getElementById("resultText").style.display="block";
     document.getElementById("countDown").style.display = "block";
     document.getElementById("shareResult").style.display = "block";
     document.getElementById("submitBonusGuess").style.display="none";
@@ -228,13 +230,15 @@ window.onload = deathOftheDay();
     showPic(movieOfTheDay[1])
     console.log(buttonNo);
   }
-
+  textResult = "Horrordle #"+dayCount+"\n🔪";
   function checkGuess() {
     localStorage.setItem('playedBefore','true');
     
 console.log("day count:" + dayCount);
     let myGuess = guess
+   
     if (myGuess === movieOfTheDay[0]) {
+      
       if(guessNo==0){localStorage.setItem('firstGuessStat',parseInt(localStorage.getItem('firstGuessStat')) + 1);}
       if(guessNo==1){localStorage.setItem('secondGuessStat',parseInt(localStorage.getItem('secondGuessStat')) + 1);}
       if(guessNo==2){localStorage.setItem('thirdGuessStat',parseInt(localStorage.getItem('thirdGuessStat')) + 1);}

style.css

@@ -18,6 +18,32 @@
     font-size: 18px;
   
 }
+.customIcon {
+  /* background: url('images/Group.svg'); */
+  /* background-repeat: no-repeat; */
+  
+  /* background-attachment: fixed; */
+  /* background-position: center; */
+  /* background-size: 50px 70px;  */
+  display: block;
+   margin-left: auto;
+  margin-right: auto; 
+  margin-top: 5px;
+  margin-bottom: 5px;
+  padding: 25px 10px;
+  height: 78px; 
+  width: 68px; 
+  /* display: box; */
+  /* flex: none; */
+  /* top: 50%; */
+  
+  vertical-align: middle;
+  /* margin-top: 10px;
+  margin-bottom: 10px; */
+   overflow: visible; 
+  /* Other styles here */
+}
+
 .resetButton{
   align-items: center;
   display: block;
@@ -41,9 +67,16 @@
   margin-bottom: 20px;
 }
 .fa-tint{
+  color: red;
   padding-left: 21.625px !important;
   padding-right: 21.625px !important;
 }
+.fa-star{
+  width 68px;
+  color: yellow;
+  padding-right:13.75px !important;
+  padding-left:13.75px !important;
+}
 .content{
   width: 100%;
   position: relative;
@@ -247,7 +280,7 @@ figure{
   align-self: center;
 }
 #guessForm {
-  width: 80%;
+  width: 450px;
   left: 0;
   right: 0;
   margin: 0 auto;