302 lines
11 KiB
HTML
302 lines
11 KiB
HTML
<!DOCTYPE>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="The horror movie guessing game!">
|
||
<meta property="og:title" content="Horrordle"/>
|
||
<meta property="og:description" content="The horror movie guessing game!"/>
|
||
<meta property="og:image" content="http://www.horrordle.com/thumbnail.png">
|
||
<meta property="og:url" content="horrordle.com"/>
|
||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
||
<meta http-equiv="Pragma" content="no-cache" />
|
||
<meta http-equiv="Expires" content="0" />
|
||
<meta name="twitter:card" content="summary_large_image"></meta>
|
||
<meta name="twitter:image" content="http://www.horrordle.com/thumbnail.png">
|
||
<meta name="twitter:site" content="@horrordle"></meta>
|
||
<meta name="twitter:creator" content="@gocivici"></meta>
|
||
<link rel="stylesheet" href="style.css">
|
||
<!-- <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> -->
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
||
<link rel="stylesheet" href="autoComplete.css">
|
||
<title> Horrordle </title>
|
||
</head>
|
||
<div class="topnav">
|
||
<div class="subnav">
|
||
<div class="topnav-left">
|
||
<a class="wideInfo" href="#info"><i class="fa fa-question"></i></a>
|
||
|
||
</div>
|
||
|
||
<img class="title" width="300" src="title.png" alt="horror">
|
||
|
||
|
||
<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 onclick="remember()" href="#stats"><image class="gif" src="new.gif"></image><i class="fas fa-chart-bar"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<body>
|
||
|
||
|
||
<div id="info" class="overlay">
|
||
<div class="popup">
|
||
<h2>Instructions</h2>
|
||
<a class="close" href="#">×</a>
|
||
<div class="content">
|
||
<i class="far fa-image"></i>
|
||
<div class="InstructionText">
|
||
<p>Use the scene provided to guess the name of the movie, each scene features a frame from the movie.</p>
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<i class="fas fa-tint"></i>
|
||
<div class="InstructionText">
|
||
<p>If you guess wrong or skip, 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">
|
||
<img src="images/Group.svg" alt="" class="customIcon">
|
||
<div class="InstructionText">
|
||
<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 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> -->
|
||
<div class="content">
|
||
<i class="fas fa-calendar-day"></i>
|
||
<div class="InstructionText">
|
||
<p>Horrordle will only run through Spooktober! make sure to check everyday until November.</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="stats" class="overlay">
|
||
<div class="popup">
|
||
<h2>Archive</h2>
|
||
<h3>October 2024</h3>
|
||
<div class="archive">
|
||
|
||
<div class="calendar">
|
||
<!-- <div class="calendar__picture">
|
||
<h2>18, Sunday</h2>
|
||
<h3>November</h3>
|
||
</div> -->
|
||
<div class="calendar__date">
|
||
<div class="calendar__day">M</div>
|
||
<div class="calendar__day">T</div>
|
||
<div class="calendar__day">W</div>
|
||
<div class="calendar__day">T</div>
|
||
<div class="calendar__day">F</div>
|
||
<div class="calendar__day">S</div>
|
||
<div class="calendar__day">S</div>
|
||
<div class="calendar__number1"></div>
|
||
<div class="calendar__number">1</div>
|
||
<div class="calendar__number">2</div>
|
||
<div class="calendar__number">3</div>
|
||
<div class="calendar__number">4</div>
|
||
<div class="calendar__number">5</div>
|
||
<div class="calendar__number">6</div>
|
||
<div class="calendar__number">7</div>
|
||
<div class="calendar__number">8</div>
|
||
<div class="calendar__number">9</div>
|
||
<div class="calendar__number">10</div>
|
||
<div class="calendar__number">11</div>
|
||
<div class="calendar__number">12</div>
|
||
<div class="calendar__number">13</div>
|
||
<div class="calendar__number">14</div>
|
||
<div class="calendar__number">15</div>
|
||
<div class="calendar__number">16</div>
|
||
<div class="calendar__number">17</div>
|
||
<div class="calendar__number">18</div>
|
||
<div class="calendar__number">19</div>
|
||
<div class="calendar__number">20</div>
|
||
<div class="calendar__number">21</div>
|
||
<div class="calendar__number">22</div>
|
||
<div class="calendar__number">23</div>
|
||
<div class="calendar__number">24</div>
|
||
<div class="calendar__number">25</div>
|
||
<div class="calendar__number">26</div>
|
||
<div class="calendar__number">27</div>
|
||
<div class="calendar__number">28</div>
|
||
<div class="calendar__number">29</div>
|
||
<div class="calendar__number">30</div>
|
||
<div class="calendar__number">31</div>
|
||
<div class="calendar__number1"></div>
|
||
<div class="calendar__number1"></div>
|
||
<div class="calendar__number1"></div>
|
||
<div class="calendar__number1"></div>
|
||
<div class="calendar__number1"></div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="chartNumber">
|
||
<canvas id="myChart"></canvas>
|
||
</div>
|
||
<a class="close" href="#">×</a>
|
||
<!-- <h3>Streak</h3> -->
|
||
<!-- <div id="streakNumber" class="content">
|
||
your stats
|
||
</div> -->
|
||
<!-- <input onclick="copyToClipboardCalendar()" type="button" id="shareResultCalender" value="Share Total Result"> -->
|
||
<button onclick="resetFunction();"class="resetButton">Reset Stats</button>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div id="support" class="overlay">
|
||
<div class="popup">
|
||
<h2>Support</h2>
|
||
<a class="close" href="#">×</a>
|
||
|
||
<p>Horrordle 2024 is curated by <a href="https://letterboxd.com/iamanil/">Anıl</a> & <a href="https://letterboxd.com/Ashby/">Görkem</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 contact us on <a href="https://twitter.com/horrordle">twitter</a></p>
|
||
<p>Designed with ❤️ by Görkem Source code available <a href="https://gorkem.cc">on my website</a></p>
|
||
<h2>Credits</h2>
|
||
<p>Movie Stills from <a href="film-grab.com">film-grab.com</a>, <a href="filmaffinity.com">filmaffinity.com</a>, <a href="https://cultsploitation.com">cultsploitation.com</a>, <a href="https://fancaps.net">fancaps.net</a> and personal captures from VLC </p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="archive" class="overlay">
|
||
<div class="popup">
|
||
|
||
<h2>October 2024</h2>
|
||
<a class="close" href="#">×</a>
|
||
<div class="archive">
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<!-- <div class="title">
|
||
<img width="400" src="title.png" alt="horrordle">
|
||
</div> -->
|
||
|
||
<!-- <h1>Guess the Movie!</h1> -->
|
||
|
||
<div class="resultContainer">
|
||
<!-- -->
|
||
<div class="resultImage">
|
||
<img src="" id="posterFrame">
|
||
|
||
</div>
|
||
<div class="resultStats">
|
||
<h1 id="congratz">You got it🎉</h1>
|
||
<table>
|
||
|
||
<tr>
|
||
<td><b>Streak:</b></td>
|
||
<td id="streakNumber"></td>
|
||
|
||
|
||
</tr>
|
||
<tr>
|
||
<td><b>Win:</b></td>
|
||
<td id="winPerc"></td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>Plays:</b></td>
|
||
<td id="totalPlays"></td>
|
||
</tr>
|
||
|
||
</table>
|
||
<!-- <p></p>
|
||
<br>
|
||
<p></p>
|
||
<br> -->
|
||
<!-- <p>🔪🟩⬛⬛[⭐]</p> -->
|
||
<!-- <br> -->
|
||
<div class="result">
|
||
<div id="resultText"></div>
|
||
<input onclick="copyToClipboard()" type="button" id="shareResult" value="Share Result">
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<figure class="movie-img">
|
||
<img src="images/back.png" id="movieFrame" alt="movie death frame" class="center" >
|
||
<div class="loading" id="loader"></div>
|
||
|
||
</figure>
|
||
|
||
|
||
<h1 id="movieName"></h1>
|
||
<h2 id="bonusQuestion"></h2>
|
||
|
||
<div class="picButtons">
|
||
<button onclick="showPic(0)" id="button1" class="imageButton">1</button>
|
||
<button onclick="showPic(1)" id="button2" class="imageButton">2</button>
|
||
<button onclick="showPic(2)" id="button3" class="imageButton">3</button>
|
||
<button onclick="showPic(3)" id="button4" class="imageButton bonusScreen">💀</button>
|
||
</div>
|
||
<input onclick="submitBonus()" type="button" id="submitBonusGuess" value="Submit">
|
||
<input onclick="submitBonus(2)" type="button" id="skipBonusGuess" value="Skip">
|
||
|
||
<form id="guessForm" autocomplete="off">
|
||
<div class="autocomplete">
|
||
<!-- <label for="guess">Movie:</label> -->
|
||
<input class="guess" type="text" id="autoComplete" placeholder="Movie">
|
||
<input type="button" id="submitGuess" value="Skip">
|
||
</div>
|
||
|
||
</form>
|
||
|
||
<p id="feedback"></p>
|
||
<h2 id="countDown"></h2>
|
||
|
||
<!-- <div class="result">
|
||
<div id="resultText"></div>
|
||
<input onclick="copyToClipboard()" type="button" id="shareResult" value="Share Result">
|
||
</div> -->
|
||
|
||
<div class="bottomContainer">
|
||
<div id="firstGuess"></div>
|
||
<div id="secondGuess"></div>
|
||
<div id="thirdGuess"></div>
|
||
</div>
|
||
<div id="footer">
|
||
<p>Horrordle 2024 is curated by <a href="https://letterboxd.com/iamanil/">Anıl</a> & <a href="https://letterboxd.com/Ashby/">Görkem</a> </br>
|
||
❤️horrordle? <a href="https://ko-fi.com/gorkem"> Buy me a coffee!</a></p>
|
||
|
||
|
||
<!-- <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/80x15.png" /></a><br /> -->
|
||
|
||
|
||
</div>
|
||
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/autoComplete.min.js"></script>
|
||
<script data-goatcounter="https://horrordle.goatcounter.com/count"
|
||
data-goatcounter-settings='{"allow_local": true}'
|
||
async src="//gc.zgo.at/count.js"></script>
|
||
|
||
|
||
<script src="movieList.js?14"></script>
|
||
<script src="main.js?17"></script>
|
||
|
||
</body>
|
||
|
||
</html>
|