<!DOCTYPE html>

<body>

    <head>
        <style>
            html,
            body {
                height: 100%;
            }

            html {
                display: table;
                margin: auto;
                font-family: "Metropolis", sans-serif;
            }

            body {
                display: table-cell;
                vertical-align: middle;
                background: #182239;
                color: #d4def7;
            }


            input {
                width: 100%;
                box-sizing: border-box;
                line-height: 1.5;
                background: #121a2b;
                border-radius: 3px;
                border: 0px solid transparent;
                color: #d4def7;
                padding: 0.5em 0.8em;
                height: 2.5rem;
                line-height: 1.5;
                background: #121a2b;
                width: 100%;
                display: block;
            }

            a{
                display: block;
                color: #DDE7F5;
                text-decoration:underline;
            }
        </style>
    </head>
    <h2>WIFI Configuration</h2>
    <a href="#">Refresh</a>
    <form>
        <div class="wifi-list">
            <a href="#" onclick="fillSSID(this.innerHTML)">WifiName</a><br>
            <a href="#" onclick="fillSSID(this.innerHTML)">WifiName</a><br>
            <a href="#" onclick="fillSSID(this.innerHTML)">WifiName</a><br>
            <a href="#" onclick="fillSSID(this.innerHTML)">WifiName</a><br>
            <a href="#" onclick="fillSSID(this.innerHTML)">WifiName</a><br>
            <a href="#" onclick="fillSSID(this.innerHTML)">WifiName</a><br>
        </div>
        <div class="wifi-form">
            <input id="wifi-ssid" type="text"><br>
            <input id="password" type="text"><br>
            <input type="submit" value="Connect">
        </div>
    </form>
    <script>
        function fillSSID(value) {
            document.getElementById("wifi-ssid").value = value;
        }
    </script>
</body>