<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Play Werewolf (Mafia)</title>
        <meta name="description" content="An app to create and run games of Werewolf (Mafia) with your friends. No sign-up, installation, or payment required.">
        <meta property="og:title" content="Play Werewolf (Mafia)">
        <meta property="og:type" content="website">
        <meta property="og:url" content="https://play-werewolf.app">
        <meta property="og:description" content="An app to create and run games of Werewolf (Mafia) with your friends. No sign-up, installation, or payment required.">
        <meta property="og:image" content="image.png">
        <link rel="icon" href="/favicon.ico">
        <link rel="icon" href="/favicon.svg" type="image/svg+xml">
        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
        <link rel="stylesheet" href="./styles/GLOBAL.css">
        <link rel="stylesheet" href="./styles/home.css">
        <link rel="stylesheet" href="/styles/hamburgers.css">
        <link rel="stylesheet" href="./styles/confirmation.css">
    </head>
    <body>
    <div id="mobile-menu-background-overlay"></div>
    <div id="navbar"></div>
    <div id="home-page-top-section">
        <div id="new-logo-container">
            <img alt="Werewolf App Logo" src="../images/new-logo.png"/>
        </div>
        <h3>An app to create and run games of Werewolf (Mafia) with your friends. No sign-up, installation, or payment required. <a href="/how-to-use">How do I use it?</a></h3>
        <div id="create-join">
            <a href="/create">
                <button id="home-create-button" class="app-button">Create A Room</button>
            </a>
            <div id="join-container">
                <label>Join A Room</label>
                <form id="join-form">
                    <div>
                        <label for="room-code">Room Code</label>
                        <input id="room-code" type="text" placeholder="four-character code..." autocomplete="off" required/>
                    </div>
                    <input id="join-button" type="submit" value="Join"/>
                </form>
            </div>
        </div>
    </div>
    <div id="about-container">
        <div>
            <h2>Join a game and have a role dealt to your device.</h2>
            <div class="framed-phone-screenshot-container">
                <img id="framed-phone-screenshot" alt="framed phone screenshot" src="../images/framed-phone-screenshot_resized.webp"/>
            </div>
        </div>
        <div>
            <h2>Create your own game with default or custom roles.</h2>
            <div class="framed-phone-screenshot-container">
                <img id="framed-phone-screenshot-2" alt="framed phone screenshot" src="../images/framed-phone-screenshot-2_resized.webp"/>
            </div>
        </div>
    </div>
    <script src="/dist/home-bundle.js.gz"></script>
    </body>
</html>
