Flipdot-Array

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flipdot Display Control</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: rgb(220, 220, 220);
            color: #333;
            text-align: center;
            padding: 20px;
        }
        h1 {
            color: #111;
        }
        .container {
            background: rgb(200, 200, 200);
            padding: 25px;
            border-radius: 10px;
            margin: 10px auto;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            display: block;
            text-align: left;
            max-width: 400px;
            box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
        }
        .section {
            padding: 15px 0;
            border-bottom: 1px solid rgb(0, 0, 0);
        }
        .section:last-child {
            border-bottom: none;
        }
        .section strong {
            font-size: 20px;
        }
        button {
            background-color: rgba(0, 0, 255, 0.70);
            color: rgb(0, 0, 0);
            border: 1px solid rgb(0, 0, 0);
            font-size: 14px;
            padding: 10px 15px;
            border-radius: 6px;
            cursor: pointer;
            margin-top: 5px;
        }
        button:hover {
            background-color: rgba(0, 0, 255, 0.40);
        }
        .danger {
            background-color: rgba(255, 0, 0, 0.70);
        }
        .danger:hover {
            background-color: rgba(255, 0, 0, 0.40);
        }
        select, input {
            padding: 6px;
            margin: 6px 0;
            border: 1px solid #000000;
            background: #e8e8e8;
            background-color: #e8e8e8;
            border-radius: 5px;
        }
        input[type=checkbox] {
            transform: scale(1.5);
        }
        label {
            display: block;
            margin-top: 8px;
            cursor: pointer;
        }
    </style>
    <script>
        function mode(mode, params) {
            fetch(window.location.origin + '/mode', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({'mode': mode, 'params': params})
            });
        }
    </script>
</head>
<body>
    <h1>Flipdot Display</h1>
    <div class="container">
        <div class="section">
            <strong>Canvas</strong> <br>
            <a href="canvas">
                <button>Open Canvas</button>
            </a>
        </div>
        <div class="section">
            <strong>Clock</strong> <br>
            Start at: <select id="clock-start">
                <option value="">--</option>
                <option value=5>05:00</option>
                <option value=6>06:00</option>
                <option value=7 selected>07:00</option>
                <option value=8>08:00</option>
                <option value=9>09:00</option>
                <option value=10>10:00</option>
            </select> <br>
            Stop at: <select id="clock-stop">
                <option value="">--</option>
                <option value=19>19:00</option>
                <option value=20>20:00</option>
                <option value=21>21:00</option>
                <option value=22>22:00</option>
                <option value=23>23:00</option>
                <option value=24 selected>24:00</option>
            </select> <br>
            Font: <select id="clock-font">
                <option value=standard>Standard</option>
                <option value=block>Block</option>
                <option value=segment>7-Segment</option>
                <option value=futuristic>Futuristic</option>
                <option value=bubble>Bubble</option>
            </select> <br>
            <label><input type="checkbox" id="clock-format">&nbsp;&nbsp;24 Hour</label>
            <label><input type="checkbox" id="clock-leading-zero">&nbsp;&nbsp;Leading zero</label>
            <button onclick="mode('Clock', {hours_24: Boolean(document.getElementById('clock-format').checked), 
                                            leading_zero: Boolean(document.getElementById('clock-leading-zero').checked),
                                            start_hour: document.getElementById('clock-start').value, 
                                            stop_hour: document.getElementById('clock-stop').value,
                                            font: document.getElementById('clock-font').value})">Set Mode</button>
        </div>

        <div class="section">
            <strong>Game of Life</strong>
            <label>TBF: <select id="game-of-life-tbf">
                <option value=0.1>100ms</option>
                <option value=0.25>250ms</option>
                <option value=0.5 selected>500ms</option>
                <option value=1>1s</option>
                <option value=2>2s</option>
            </select></label>
            <button onclick="mode('Game of Life', {tbf: document.getElementById('game-of-life-tbf').value})">Set Mode</button>
        </div>

        <div class="section">
            <strong>Scrolling Text</strong>
            <label>Text: <input id="scrolling-text-text" value="Hello World"></label>
            <label>TBF: <select id="scrolling-text-tbf">
                <option value=0.25>250ms</option>
                <option value=0.5>500ms</option>
                <option value=1 selected>1s</option>
                <option value=2>2s</option>
            </select></label>
            <button onclick="mode('Scrolling Text', {tbf: document.getElementById('scrolling-text-tbf').value, text: document.getElementById('scrolling-text-text').value})">Set Mode</button>
        </div>

        <div class="section">
            <strong>Weather</strong> <br>
            <label><input type="checkbox" id="weather-format">&nbsp;&nbsp;Use Celsius</label>
            <button onclick="mode('Weather', {use_celsius: Boolean(document.getElementById('weather-format').checked)})">Set Mode</button>
        </div>

        <div class="section">
            <strong>Date</strong> <br>
            <button onclick="mode('Date', {})">Set Mode</button>
        </div>

        <div class="section">
            <strong>Off</strong> <br>
            <button onclick="mode('Off', {})">Set Mode</button>
        </div>
    </div>
    <div class="container">
        <div class="section">
            <strong>Global Settings</strong> <br>
            <label>Write Dot Delay: <input id="settings-delay" type="number" value="10000"><span style="margin-left:-20px;">µs</span></label>
            <label>Horizontal: <select id="settings-horizontal">
                <option value=WE>West &rarr; East (WE)</option>
                <option value=EW>West &larr; East (EW)</option>
            </select></label>
            <label>Vertical: <select id="settings-vertical">
                <option value=NS>North &rarr; South (NS)</option>
                <option value=SN>North &larr; South (SN)</option>
            </select></label>
            <label>Order: <select id="settings-order">
                <option value=XY>X(Y(write_dot(x,y)))</option>
                <option value=YX>Y(X(write_dot(x,y)))</option>
            </select></label>
            <button onclick="fetch(window.location.origin + '/settings', {method: 'POST', 
                                                                          headers: { 'Content-Type': 'application/json' }, 
                                                                          body: JSON.stringify({
                                                                            delay: document.getElementById('settings-delay').value,
                                                                            horizontal: document.getElementById('settings-horizontal').value,
                                                                            vertical: document.getElementById('settings-vertical').value,
                                                                            order: document.getElementById('settings-order').value
                                                                          })
                                                                          })">Set Settings</button>
        </div>
    </div>
    <div class="container">
        <!--
        <div class="section">
            <button class="danger" onclick="fetch(window.location.origin + '/selftest', {method: 'GET'})">Reboot</button>
        </div>
        -->
        <div class="section">
            <strong>System</strong> <br>
            <button onclick="mode('System', {choice: 'self-test'})">Self Test</button>
            <button onclick="mode('System', {choice: 'update'})">Update</button>
            <button onclick="mode('System', {choice: 'service-restart'})">Restart Service</button>
            <br>
            <button class="danger" onclick="mode('System', {choice: 'reboot'})">Reboot</button>
            <button class="danger" onclick="mode('System', {choice: 'shutdown'})">Shutdown</button>
        </div>
    </div>

</body>
</html>