<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>MakerLab Murnau Logo generator</title>
    <link rel="stylesheet" href="pico.min.css">

    <style>
        @media (prefers-color-scheme: light) {
            .dark-only {
                display: none;
            }
        }

        @media (prefers-color-scheme: dark) {
            .light-only {
                display: none;
            }
        }
    </style>
</head>

<body>

    <main class="container">
        <nav>
            <ul>
                <li>
                    <img src="logo?variant=DarkText" style="height: 50px" class="light-only" />
                    <img src="logo?variant=LightText" style="height: 50px" class="dark-only" />
                    logo generator
                </li>
            </ul>
            <ul>
                <li><a href="https://makerlab-murnau.de">MakerLab Website</a></li>
                <li><a href="https://git.makerlab-murnau.de/MakerLab/logo-generator">Source code</a></li>
            </ul>
        </nav>

        <p>You can use this website to generate diffrent variation of the logo of the MakerLab Murnau e.V.</p>

        <details>
            <summary>Full-size Logo</summary>

            <form action="logo" method="get">
                <fieldset>
                    <label for="logo_variant">
                        Variant
                    </label>
                    <select id="logo_variant" name="variant" value="DarkText">
                        <option value="DarkText" selected>dark text</option>
                        <option value="LightText">light text</option>
                        <option value="NoText">no text</option>
                    </select>


                    <label for="logo_orientation">
                        Orientation
                    </label>

                    <select id="logo_orientation" name="orientation" value="Landscape">
                        <option value="Landscape" selected>landscape</option>
                        <option value="Portrait" selected>portrait</option>
                    </select>
                </fieldset>

                <div class="grid">
                    <button type="submit">Generate</button>
                    <button type="reset">Reset</button>
                </div>
            </form>
        </details>

        <details>
            <summary>Favicon</summary>

            <form action="favicon.ico" method="get">
                <button type="submit">Generate</button>
            </form>
        </details>
    </main>
</body>