m/stewardle
1
0
Fork 0
mirror of https://github.com/ssyyhhrr/stewardle.git synced 2025-11-08 10:33:46 -05:00
Code Issues Packages Projects Releases Wiki Activity
Files
63cddf51651c17601bd1dbd56f7857ebd375b69e
stewardle/views/index.ejs
ssyyhhrr 63cddf5165 Google AdSense
2023-01-19 20:34:29 +00:00

192 lines
7.4 KiB
Plaintext
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:image" content="./stewardle.png" />
<link rel="stylesheet" href="./css/main.css">
<script src="https://kit.fontawesome.com/134dd703dd.js" crossorigin="anonymous"></script>
<title>Stewardle</title>
<meta name="description" content="Test your F1 knowledge by guessing the driver of the day using the clues from your previous guesses! Inspired by Wordle, created by syhr.">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7890608731216910"
crossorigin="anonymous"></script>
</head>
<body>
<div class="tutorial">
<div class="close">
<i class="fa-solid fa-xmark"></i>
</div>
<p>Guess the <b>STEWARDLE</b> in six tries.<br><br>
Each guess must be a valid F1 driver name who has raced in the 2014 season or later. Hit the enter button to submit.<br><br>
After each guess, the color of the tiles will change to show how close your guess was to the Driver of the Day
</p>
<div class="splitter"></div>
<p><b>Examples</b></p>
<div class="row">
<div class="frame correct"><img class="flag" src="./flags/gb.svg"></div>
<p>The driver is of British nationality.</p>
</div>
<div class="row">
<div class="frame incorrect"><img class="team" src="./logos/mercedes.webp"></div>
<p>The driver does not race for Mercedes.</p>
</div>
<div class="row">
<div class="frame previous"><img class="team" src="./logos/williams.webp"></div>
<p>The driver previously raced for Williams.</p>
</div>
<div class="row">
<div class="frame up"><div class="guess text">44</div></div>
<p>The number is too low.</p>
</div>
<div class="row">
<div class="frame down"><div class="guess text">103</div></div>
<p>The number is too high.</p>
</div>
<p></p>
<div class="splitter"></div>
<p>A new <b>STEWARDLE</b> will be available each day!</p>
</div>
<div class="shareScreen">
<div class="closeShare">
<i class="fa-solid fa-xmark"></i>
</div>
<p><b>Statistics</b></p>
<p><b id="played">0</b>played</p>
<p><b id="won">0</b>won</p>
<p><b id="lost">0</b>lost</p>
<p><b id="streak">0</b>streak</p>
<p><b id="max">0</b>max streak</p>
<div class="splitter"></div>
<p><b>Debrief</b></p>
<div class="stats">
<p><b>1</b></p>
<div class="bar" id="one">0</div>
</div>
<div class="stats">
<p><b>2</b></p>
<div class="bar" id="two">0</div>
</div>
<div class="stats">
<p><b>3</b></p>
<div class="bar" id="three">0</div>
</div>
<div class="stats">
<p><b>4</b></p>
<div class="bar" id="four">0</div>
</div>
<div class="stats">
<p><b>5</b></p>
<div class="bar" id="five">0</div>
</div>
<div class="stats">
<p><b>6</b></p>
<div class="bar" id="six">0</div>
</div>
<div class="score">
<p></p>
<div class="splitter"></div>
<p><b>Score</b></p>
<p id="copyable"></p>
</div>
<div class="copy">
<div class="btn"><i class="fa-solid fa-copy"></i> Copy</div>
</div>
<p id="copied"></p>
</div>
<div class="backdrop"></div>
<div class="title">
<h1>Stewardle</h1>
<div class="info"><i class="fa-solid fa-circle-info"></i></div>
</div>
<div class="splitter"></div>
<div class="board">
<div class="row header">
<div class="frame header"><div class="text">Driver</div></div>
<div class="frame header"><div class="text">Geo</div></div>
<div class="frame header"><div class="text">Team</div></div>
<div class="frame header"><div class="text">Car<br>Num</div></div>
<div class="frame header"><div class="text">Driver<br>Age</div></div>
<div class="frame header"><div class="text">First<br>Year</div></div>
<div class="frame header"><div class="text">Race<br>Wins</div></div>
</div>
<div class="row">
<div class="frame"></div>
<div class="frame"></div>
<div class="frame"></div>
<div class="frame"></div>
<div class="frame"></div>
<div class="frame"></div>
<div class="frame"></div>
</div>
<div class="row">
<div class="frame"></div>
<div class="frame"></div>
<div class="frame"></div>
<div class="frame"></div>
<div class="frame"></div>
<div class="frame"></div>
<div class="frame"></div>
</div>
<div class="row">
<div class="frame"></div>
<div class="frame"></div>
<div class="frame"></div>
<div class="frame"></div>
<div class="frame"></div>
<div class="frame"></div>
<div class="frame"></div>
</div>
<div class="row">
<div class="frame"></div>
<div class="frame"></div>
<div class="frame"></div>
<div class="frame"></div>
<div class="frame"></div>
<div class="frame"></div>
<div class="frame"></div>
</div>
<div class="row">
<div class="frame"></div>
<div class="frame"></div>
<div class="frame"></div>
<div class="frame"></div>
<div class="frame"></div>
<div class="frame"></div>
<div class="frame"></div>
</div>
<div class="row">
<div class="frame"></div>
<div class="frame"></div>
<div class="frame"></div>
<div class="frame"></div>
<div class="frame"></div>
<div class="frame"></div>
<div class="frame"></div>
</div>
</div>
<div class="input">
<div class="autocomplete">
<input id="myInput" type="text" placeholder="Driver">
</div>
</div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7890608731216910"
crossorigin="anonymous"></script>
<!-- Footer Ad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-7890608731216910"
data-ad-slot="1543055497"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div class="credits">
<p style="margin-bottom: 0.25em">Inspired by <a href="https://www.nytimes.com/games/wordle/index.html" target="_blank">Wordle</a></p>
<p style="margin-top: 0px">Created by <a href="https://sy.hr/" target="_blank">syhr</a> <a href="https://github.com/ssyyhhrr/stewardle" target="_blank"><i class="fa-brands fa-github"></i></a></p>
</div>
</body>
<script src="./js/main.js"></script>
<script src="./js/countUp.js"></script>
</html>
Reference in New Issue View Git Blame Copy Permalink