added info page

index.html

@@ -29,8 +29,7 @@
 
   <img class="title"  width="300" src="title.png" alt="horror">
 
-  <!-- <a href="#news">News</a>
+
-  <a href="#contact">Contact</a> -->
   <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>
@@ -49,7 +48,7 @@
   		<div class="content">
   			<i class="far fa-image"></i>
         <div class="InstructionText">
-        <p>Use the movie scene provided to guess the name of the movie.</p>
+        <p>Use the scene provided to guess the name of the movie, each scene features a character from the movie.</p>
         </div>
       </div>
       <div class="content">
@@ -68,7 +67,7 @@
     <div class="content">
       <i class="fas fa-star"></i>
       <div class="InstructionText">
-        <p>If you win you'll have the chance to guess which image contains the survivor in the bonus stage.</p>
+        <p>If you win the first round, you'll have the chance to guess which scene features the character that survives the movie in the bonus stage.</p>
       </div>
       
     </div>
@@ -139,12 +138,12 @@
       <canvas id="myChart"></canvas>
     </div>
     <a class="close" href="#">&times;</a>
-    <h3>Streak</h3>
+    <!-- <h3>Streak</h3> -->
     <!-- <div id="streakNumber" class="content">
       your stats
     </div> -->
    
-    <button onclick="window.localStorage.clear();"class="resetButton">Reset Stats</button>
+    <button onclick="resetFunction();"class="resetButton">Reset Stats</button>
   
     </div>
   </div>
@@ -153,7 +152,10 @@
     <div class="popup">
       <h2>Support</h2>
       <a class="close" href="#">&times;</a>
-        pls support
+        <p>Horrordle is a game for horror fans, inspired by <a href="https://framed.wtf/">Framed</a>, <a href="https://archiguesser.com/">Archiguesser</a>, <a href="https://medium.com/floodgates/the-complete-and-authoritative-list-of-wordle-spinoffs-fb00bfafc448">and all the other spinoffs.</a> </p>
+        <p>Each day a new horror movie is picked from a <a href="https://letterboxd.com/ashby/list/horrordle-october-2022/">curated list</a>. </p>
+        <p>This project is open-source and nowhere near complete. You can access and contribute by visiting the <a href="https://github.com/gocivici/horrordle">GitHub page.</a></p>
+        <p> If you have any suggestions or want to give feedback, you can also contact me on <a href="https://twitter.com/horrordle">twitter</a></p>
       </div>
     </div>
   </div>

main.js

@@ -49,7 +49,7 @@ function revealButtons(g = guessNo){
 
 
 
-  var movies = [["The Texas Chainsaw Massacre",1,"Sally Hardesty"],["It Follows",2,"Jaime Height"],["Friday the 13th",0,"Alice Hardy"],["Event Horizon",2,"Lieutenant Starck"],["Hellraiser",2,"Kirsty Cotton"],["A Nightmare on Elm Street",1,"Nancy Thompson"],["It",1,"Eddie Kaspbrak"],["Rec",2,"Ángela Vidal"],["Saw",1,"Amanda Young"],["Final Destination",2,"Alex Browning"],["The Ring",0,"Rachel Keller"]];
+  var movies = [["The Texas Chainsaw Massacre",1,"Sally Hardesty"],["It",1,"Eddie Kaspbrak"],["A Nightmare on Elm Street",1,"Nancy Thompson"],["It Follows",2,"Jaime Height"],["Friday the 13th",0,"Alice Hardy"],["Event Horizon",2,"Lieutenant Starck"],["Hellraiser",2,"Kirsty Cotton"],["Rec",2,"Ángela Vidal"],["Saw",1,"Amanda Young"],["Final Destination",2,"Alex Browning"],["The Ring",0,"Rachel Keller"]];
   var pix = [];
   // autocomplete(document.getElementById("guess"), movies);
   var gameBeginning = new Date('September 30, 2022 00:00:00');
@@ -511,4 +511,11 @@ function preloadImage(url)
     var img=new Image();
     img.src=url;
 };
+function resetFunction() {
+  if (confirm("this will delete all you progress, are you sure?") == true) {
+    window.localStorage.clear();
+  } else {
+
+  } 
+}
 //window.localStorage.clear();

style.css

@@ -2,6 +2,7 @@
 #button1,#button2,#button3{
  display: none;
 }
+
 /* #movieName,#bonusQuestion{
   display: none;
 } */
@@ -303,7 +304,7 @@ h3 {
 .popup {
   text-align: left;
   margin: 70px auto;
-  padding: 20px;
+  padding: 20px 50px;
   background: #333;
   border-radius: 5px;
   width: 30%;
@@ -358,7 +359,9 @@ h3 {
   /* position: absolute; */
   }
   a {
-    color: white;
+    color: red;
+    background-color: transparent;
+    /* text-decoration: none; */
   }
 
 body {
@@ -370,7 +373,7 @@ body {
 text-align: center;
 }
 p {
-  margin:0;
+  /* margin:0; */
 }
 i{
   font-size: 1.5rem;
@@ -716,6 +719,7 @@ border-radius: 5px;
     padding-left: 10px;
   }
   .popup{
+    padding: 20px;
     /* padding-left: 5px;
     padding-right: 5px; */
   }