<!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.">
    <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 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="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>