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
e57ab1d7b1ba41c2f3c91f1dc8769555574060a7
stewardle/views/index.ejs
ssyyhhrr e57ab1d7b1 Adsterra
2023-03-13 02:50:59 +00:00

214 lines
9.2 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">
<link id="highContrast" rel="stylesheet" href="./css/highContrast.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.">
</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 id="shareScreen" class="shareScreen">
<div id="closeShare" 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>
<div class="backdrop"></div>
<div class="title">
<div class="left"></div>
<h1>Stewardle</h1>
<div class="info">
<i id="stats" class="fa-sharp fa-solid fa-chart-simple"></i>
<i id="highContrast-btn" class="fa-solid fa-palette"></i>
<i id="tutorial" class="fa-solid fa-circle-info"></i>
</div>
</div>
<div class="splitter"></div>
<div class="content">
<div class="vertical-ad">
<script type="text/javascript">
atOptions = {
'key' : '506aea9125e8277ac9fd84cfc363d8ad',
'format' : 'iframe',
'height' : 600,
'width' : 160,
'params' : {}
};
document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://www.profitabledisplaynetwork.com/506aea9125e8277ac9fd84cfc363d8ad/invoke.js"></scr' + 'ipt>');
</script>
</div>
<div class="game">
<div class="board">
<div class="row header">
<div class="frame header"><div class="text">Driver</div></div>
<div class="frame header"><div class="text">Flag</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>
<div class="banner-ad">
<script type="text/javascript">
atOptions = {
'key' : '2e9f6dc2f375f2e2b9968f73cb1ea713',
'format' : 'iframe',
'height' : 50,
'width' : 320,
'params' : {}
};
document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://www.profitabledisplaynetwork.com/2e9f6dc2f375f2e2b9968f73cb1ea713/invoke.js"></scr' + 'ipt>');
</script>
</div>
</div>
<div class="vertical-ad">
<script type="text/javascript">
atOptions = {
'key' : '506aea9125e8277ac9fd84cfc363d8ad',
'format' : 'iframe',
'height' : 600,
'width' : 160,
'params' : {}
};
document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://www.profitabledisplaynetwork.com/506aea9125e8277ac9fd84cfc363d8ad/invoke.js"></scr' + 'ipt>');
</script>
</div>
</div>
<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