index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>SPY! 🕵</title>
</head>

<body>
    <div class="start-page">
        <button id="players-button" onclick="showPage('set-players')">
            <div>Players</div>
            <div></div>
        </button>
        <button id="spies-button" onclick="showPage('set-spies')">
            <div>Spies</div>
            <div></div>
        </button>
        <button id="duration-button" onclick="showPage('set-duration')">
            <div>Duration</div>
            <div></div>
        </button>
        <button id="category-button" onclick="showPage('set-category')">
            <div>Category</div>
            <div></div>
        </button>
        <button id="theme-button" onclick="switchTheme()">
            <div>Theme</div>
            <div></div>
        </button>
        <button id="start-button" onclick="showPage('assign-players')">
            <div>Start</div>
            <div>⎆</div>
        </button>
    </div>
    <div class="set-players"></div>
    <div class="set-spies"></div>
    <div class="set-duration"></div>
    <div class="set-category"></div>
    <div class="assign-players"></div>
    <div class="timer-countdown">
        <p></p>
        <button id="timer-toggler" onclick="toggleTimer()">Pause Timer</button>
        <button onclick="restart()">RE-START</button>
    </div>

    <script type="module" src="index.mjs"></script>
</body>

</html>