yggdrasil/server/templates/home.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yggdrasil — Home</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static', filename='retro.css') }}">
</head>
<body>
    <nav>
        <a href="{{ url_for('home') }}">Home</a>
        <a href="{{ url_for('sensors_page') }}">Sensors</a>
        <a href="{{ url_for('notes_page') }}">Notes</a>
        <a href="{{ url_for('notifications_page') }}">Notifications{% if unread_notifications %} <span class="nav-badge">{{ unread_notifications }}</span>{% endif %}</a>
        <a href="{{ url_for('api_docs') }}">API</a>
        <a href="{{ url_for('logout') }}">Log out</a>
        <img class="nav-logo" src="{{ url_for('static', filename='yggdrasil-logo.png') }}" alt="Yggdrasil logo">
    </nav>
    <h1>Yggdrasil</h1>
    <div class="panel">
        <p>Welcome, <span class="hl">{{ user.username }}</span>! You are logged in{% if user.is_admin %} as <b class="hl">administrator</b>{% endif %}.</p>
        <p>Select an item from the menu:</p>
        <ul class="mc-menu">
            <li><a href="{{ url_for('sensors_page') }}"><span class="mc-key">1</span>Sensors — charts and readouts</a></li>
            <li><a href="{{ url_for('notes_page') }}"><span class="mc-key">2</span>Notes — title, text and checklists</a></li>
            <li><a href="{{ url_for('notifications_page') }}"><span class="mc-key">3</span>Notifications{% if unread_notifications %} ({{ unread_notifications }} new){% endif %}</a></li>
            <li><a href="{{ url_for('api_docs') }}"><span class="mc-key">4</span>API — documentation</a></li>
            <li><a href="{{ url_for('logout') }}"><span class="mc-key">0</span>Log out</a></li>
        </ul>
        <p class="hint">Tip: press <b>1</b>, <b>2</b>, <b>3</b>, <b>4</b> or <b>0</b> to navigate.</p>
    </div>
    <img class="logo" src="{{ url_for('static', filename='yggdrasil-logo.png') }}" alt="Yggdrasil logo">
    <footer class="statusbar">
        <span>{{ user.username }}@yggdrasil:~$</span>
    </footer>
    <script>
        // Numbered menu hotkeys, Midnight Commander style.
        // Ignored while typing in a form field.
        document.addEventListener('keydown', (e) => {
            if (e.ctrlKey || e.metaKey || e.altKey) return;
            const tag = (document.activeElement && document.activeElement.tagName) || '';
            if (/^(INPUT|TEXTAREA|SELECT)$/.test(tag)) return;
            const targets = {
                '1': "{{ url_for('sensors_page') }}",
                '2': "{{ url_for('notes_page') }}",
                '3': "{{ url_for('notifications_page') }}",
                '4': "{{ url_for('api_docs') }}",
                '0': "{{ url_for('logout') }}"
            };
            if (targets[e.key]) window.location.href = targets[e.key];
        });
    </script>
</body>
</html>