<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>Popup</title>
    <style>
        body {
            width: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        button {
            padding: 4px;
            border-radius: 8px;
            border: none;
            transition: all .4s;
        }

        button:hover {
            opacity: 0.7;
        }

        .button-wrapper {
            display: flex;
            flex-flow: column;
            width: 100%;
            padding: 8px 8px 0;
        }

        #admin-button-wrapper {
            display: none;
            flex-flow: column;
            width: 100%;
            text-align: center;
        }

        .gform-button-wrapper {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-bottom: 8px;

            button {
                min-height: 40px;
                width: 48%;
                color: white;
            }

            button[value="engineer"] {
                background: #F49D00;
            }

            button[value="designer"] {
                background: #619B30;
            }
        }

        .large-button {
            display: block;
            color: #fff;
            min-height: 60px;
            width: 100%;
            font-size: 1.6rem;
            font-weight: bold;
        }

        #startButton {
            background-color: crimson;
        }

        #endButton {
            display: block;
            background-color: rgb(0, 0, 135);
            margin: 32px 0 16px;
        }


        #admin-switch {
            height: 8px;
        }

        #adminPanel {
            justify-content: space-between;
            flex-wrap: wrap;

            button {
                width: 48%;
            }
        }
    </style>
</head>

<body>
    <div class="button-wrapper">
        <div class="gform-button-wrapper">
            <button class="googleFormButton" value="engineer">エンジニア</button>
            <button class="googleFormButton" value="designer">デザイナー</button>
        </div>
        <button id="startButton" class="large-button">試験開始</button>
        <div id="admin-switch"></div>
        <div id="admin-button-wrapper">
            <button id="endButton" class="large-button">試験終了</button>
            <div id="adminPanel">
                <button id="clearStorageButton">初期化</button>
                <button id="logButton">ログ確認</button>
            </div>
        </div>
    </div>
    <script src="./popup.js"></script>
</body>

</html>