2022-08-07 03:40:24 -05:00
<!DOCTYPE>
< html >
< head >
< meta charset = "UTF-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2022-09-29 12:57:17 -05:00
< meta name = "description" content = "The horror movie guessing game!" >
2022-09-28 11:31:06 -05:00
< meta property = "og:title" content = "Horrordle" / >
< meta property = "og:description" content = "The horror movie guessing game!" / >
2022-09-28 11:39:18 -05:00
< meta property = "og:image" content = "http://www.horrordle.com/thumbnail.png" >
2022-09-28 11:31:06 -05:00
< meta property = "og:url" content = "horrordle.com" / >
2022-10-08 15:25:42 -05:00
< 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" / >
2022-09-28 11:48:07 -05:00
< meta name = "twitter:card" content = "summary_large_image" > < / meta >
2022-09-28 11:42:06 -05:00
< meta name = "twitter:image" content = "http://www.horrordle.com/thumbnail.png" >
2022-09-28 11:48:07 -05:00
< meta name = "twitter:site" content = "@horrordle" > < / meta >
< meta name = "twitter:creator" content = "@gocivici" > < / meta >
2022-08-07 03:40:24 -05:00
< 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" >
2022-09-25 05:12:37 -05:00
< link rel = "stylesheet" href = "autoComplete.css" >
2022-09-28 11:13:14 -05:00
< title > Horrordle < / title >
2022-08-07 03:40:24 -05:00
< / head >
< div class = "topnav" >
< div class = "subnav" >
< div class = "topnav-left" >
< a class = "wideInfo" href = "#info" > < i class = "fa fa-question" > < / i > < / a >
2022-09-26 08:14:06 -05:00
2022-08-07 03:40:24 -05:00
< / div >
2022-09-11 09:11:13 -05:00
< img class = "title" width = "300" src = "title.png" alt = "horror" >
2022-08-07 03:40:24 -05:00
2022-10-01 03:27:58 -05:00
2022-08-07 03:40:24 -05:00
< div class = "topnav-right" >
< a class = "mobileInfo" href = "#info" > < i class = "fa fa-question" > < / i > < / a >
2022-09-07 09:05:49 -05:00
< a class = "mobileInfo" href = "#support" > < i class = "fa fa-heart" > < / i > < / a >
2022-09-26 08:14:06 -05:00
< a class = "wideInfo" href = "#support" > < i class = "fa fa-heart" > < / i > < / a >
2023-09-30 16:05:47 -05:00
< a onclick = "remember()" href = "#stats" > < image class = "gif" src = "new.gif" > < / image > < i class = "fas fa-chart-bar" > < / i > < / a >
2022-08-07 03:40:24 -05:00
< / 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" >
2024-09-29 12:24:18 -05:00
< p > Use the scene provided to guess the name of the movie, each scene features a frame from the movie.< / p >
2022-08-07 03:40:24 -05:00
< / div >
2022-09-25 05:12:37 -05:00
< / div >
< div class = "content" >
2022-09-26 03:23:35 -05:00
< i class = "fas fa-tint" > < / i >
2022-08-07 03:40:24 -05:00
< div class = "InstructionText" >
2022-09-27 10:24:46 -05:00
< p > If you guess wrong or skip, a new
2022-09-26 08:14:06 -05:00
scene from the movie is revealed. You have a maximum of 3 guesses to find the movie.< / p >
2022-08-07 03:40:24 -05:00
< / div >
2022-09-25 05:12:37 -05:00
< / div >
< div class = "content" >
2022-09-26 03:23:35 -05:00
< img src = "images/Group.svg" alt = "" class = "customIcon" >
2022-08-07 03:40:24 -05:00
< div class = "InstructionText" >
2022-09-26 03:23:35 -05:00
< p > you can use the buttons below the image to navigate once they are revealed.< / p >
2022-08-07 03:40:24 -05:00
< / div >
2022-09-25 05:12:37 -05:00
< / div >
2024-09-29 12:24:18 -05:00
<!-- <div class="content">
2022-09-26 03:23:35 -05:00
< i class = "fas fa-star" > < / i >
< div class = "InstructionText" >
2022-10-01 03:27:58 -05:00
< 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 >
2022-09-26 03:23:35 -05:00
< / div >
2024-09-29 12:24:18 -05:00
< / div > -->
2022-10-09 10:14:30 -05:00
< 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 >
2022-08-07 03:40:24 -05:00
< / div >
< / div >
< / div >
< div id = "stats" class = "overlay" >
< div class = "popup" >
2022-10-31 08:35:47 -05:00
< h2 > Archive< / h2 >
2024-09-22 20:10:30 -05:00
< h3 > October 2024< / h3 >
2022-09-25 08:26:54 -05:00
< div class = "archive" >
2022-09-26 08:14:06 -05:00
2022-09-25 08:26:54 -05:00
< 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 >
2024-09-22 20:10:30 -05:00
< 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 >
2023-09-30 16:05:47 -05:00
2022-09-25 08:26:54 -05:00
< / div >
< / div >
2022-09-25 13:45:13 -05:00
2022-09-25 08:26:54 -05:00
< / div >
2023-09-30 16:05:47 -05:00
< div class = "chartNumber" >
2022-09-26 08:14:06 -05:00
< canvas id = "myChart" > < / canvas >
2023-09-30 16:05:47 -05:00
< / div >
2022-09-26 08:14:06 -05:00
< a class = "close" href = "#" > × < / a >
2022-10-01 03:27:58 -05:00
<!-- <h3>Streak</h3> -->
2022-09-28 10:35:39 -05:00
<!-- <div id="streakNumber" class="content">
2022-09-26 08:14:06 -05:00
your stats
2022-09-28 10:35:39 -05:00
< / div > -->
2023-09-30 16:05:47 -05:00
<!-- <input onclick="copyToClipboardCalendar()" type="button" id="shareResultCalender" value="Share Total Result"> -->
< button onclick = "resetFunction();" class = "resetButton" > Reset Stats< / button >
2022-09-25 13:45:13 -05:00
2022-08-07 03:40:24 -05:00
< / div >
< / div >
2022-09-07 09:05:49 -05:00
< div id = "support" class = "overlay" >
< div class = "popup" >
< h2 > Support< / h2 >
< a class = "close" href = "#" > × < / a >
2024-09-29 12:24:18 -05:00
< p > Horrordle 2024 is curated by < a href = "https://letterboxd.com/iamanil/" > Anı < / a > & < a href = "https://letterboxd.com/Ashby/" > Görkem< / a > < / p >
2022-10-09 10:14:30 -05:00
<!-- <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> -->
2024-09-29 12:24:18 -05:00
<!-- <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 >
2024-10-26 00:57:27 -05:00
< 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 >
2022-09-07 09:05:49 -05:00
< / div >
< / div >
< / div >
2022-08-07 03:40:24 -05:00
< div id = "archive" class = "overlay" >
< div class = "popup" >
2024-09-22 20:10:30 -05:00
< h2 > October 2024< / h2 >
2022-08-07 03:40:24 -05:00
< a class = "close" href = "#" > × < / a >
< div class = "archive" >
2022-09-25 08:26:54 -05:00
2022-08-07 03:40:24 -05:00
< / div >
< / div >
< / div >
<!-- <div class="title">
< img width = "400" src = "title.png" alt = "horrordle" >
< / div > -->
<!-- <h1>Guess the Movie!</h1> -->
2022-09-26 08:14:06 -05:00
2022-09-28 10:35:39 -05:00
< div class = "resultContainer" >
<!-- -->
< div class = "resultImage" >
< img src = "" id = "posterFrame" >
2022-09-26 08:14:06 -05:00
2022-09-28 10:35:39 -05:00
< / 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" >
2022-10-09 10:14:30 -05:00
2022-09-28 10:35:39 -05:00
< / div >
< / div >
< / div >
2022-09-26 08:14:06 -05:00
2022-09-28 10:35:39 -05:00
< figure class = "movie-img" >
2022-09-26 08:14:06 -05:00
< img src = "images/back.png" id = "movieFrame" alt = "movie death frame" class = "center" >
< div class = "loading" id = "loader" > < / div >
2022-09-11 07:41:49 -05:00
< / figure >
2022-08-07 03:40:24 -05:00
2022-09-25 13:45:13 -05:00
< 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 >
2023-09-30 16:05:47 -05:00
< button onclick = "showPic(3)" id = "button4" class = "imageButton bonusScreen" > 💀< / button >
2022-09-25 13:45:13 -05:00
< / div >
< input onclick = "submitBonus()" type = "button" id = "submitBonusGuess" value = "Submit" >
2022-10-16 13:02:24 -05:00
< input onclick = "submitBonus(2)" type = "button" id = "skipBonusGuess" value = "Skip" >
2022-08-07 03:40:24 -05:00
< form id = "guessForm" autocomplete = "off" >
< div class = "autocomplete" >
<!-- <label for="guess">Movie:</label> -->
2022-09-25 05:12:37 -05:00
< input class = "guess" type = "text" id = "autoComplete" placeholder = "Movie" >
2022-09-27 10:24:46 -05:00
< input type = "button" id = "submitGuess" value = "Skip" >
2022-08-07 03:40:24 -05:00
< / div >
2022-09-11 09:11:13 -05:00
2022-08-07 03:40:24 -05:00
< / form >
2022-09-25 13:45:13 -05:00
2022-08-07 03:40:24 -05:00
< p id = "feedback" > < / p >
2023-09-30 16:05:47 -05:00
< h2 id = "countDown" > < / h2 >
2024-10-26 00:57:27 -05:00
2022-09-28 10:35:39 -05:00
<!-- <div class="result">
2022-09-11 09:11:13 -05:00
< div id = "resultText" > < / div >
2022-08-07 03:40:24 -05:00
< input onclick = "copyToClipboard()" type = "button" id = "shareResult" value = "Share Result" >
2022-09-28 10:35:39 -05:00
< / div > -->
2022-10-09 10:14:30 -05:00
2022-08-07 03:40:24 -05:00
< div class = "bottomContainer" >
< div id = "firstGuess" > < / div >
< div id = "secondGuess" > < / div >
< div id = "thirdGuess" > < / div >
< / div >
2024-10-26 00:57:27 -05:00
< div id = "footer" >
< p > Horrordle 2024 is curated by < a href = "https://letterboxd.com/iamanil/" > Anı < / a > & < a href = "https://letterboxd.com/Ashby/" > Görkem< / a > < / br >
❤️ < 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 >
2022-09-07 09:05:49 -05:00
2022-10-09 10:14:30 -05:00
< 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 >
2024-10-26 00:57:27 -05:00
< script data-goatcounter = "https://horrordle.goatcounter.com/count"
2023-10-07 08:08:13 -05:00
data-goatcounter-settings='{"allow_local": true}'
2024-09-29 12:24:18 -05:00
async src="//gc.zgo.at/count.js">< / script >
2024-10-26 00:57:27 -05:00
2022-08-07 03:40:24 -05:00
2024-10-26 00:58:07 -05:00
< script src = "movieList.js?14" > < / script >
2024-09-29 12:24:18 -05:00
< script src = "main.js?17" > < / script >
2022-08-07 03:40:24 -05:00
< / body >
< / html >
