Init

2025-07-07 09:24:07 +00:00 · 2023-09-25 01:19:50 +03:00
commit 39e480b655
15 changed files with 786 additions and 0 deletions
--- a/templates/base.html
+++ b/templates/base.html
@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+<head>
+  {% block title %}Dashboard{% endblock %}
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='pure.css') }}">
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='layout.css') }}">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<body>
+
+<div id="layout" class="content pure-g">
+    <div id="nav" class="pure-u-1-3">
+        <a href="#" id="menuLink" class="nav-menu-button">Menu</a>
+
+        <div class="nav-inner">
+            <button onclick="location.href='/';" style="cursor:pointer;" class="primary-button pure-button">OutlineFleet</button>
+
+            <div class="pure-menu custom-restricted-width">
+                <ul class="pure-menu-list">
+                    <li class="pure-menu-item"><a href="/" class="pure-menu-link">Servers</a></li>
+                    <li class="pure-menu-item"><a href="#" class="pure-menu-link">Clients</a></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+  {% block content %}{% endblock %}
+</div>
+<!-- Script to make the Menu link work -->
+<!-- Just stripped down version of the js/ui.js script for the side-menu layout -->
+<script>
+    function getElements() {
+        return {
+            menu: document.getElementById('nav'),
+            menuLink: document.getElementById('menuLink')
+        };
+    }
+
+    function toggleClass(element, className) {
+        var classes = element.className.split(/\s+/);
+        var length = classes.length;
+        var i = 0;
+
+        for (; i < length; i++) {
+            if (classes[i] === className) {
+                classes.splice(i, 1);
+                break;
+            }
+        }
+        // The className is not found
+        if (length === classes.length) {
+            classes.push(className);
+        }
+
+        element.className = classes.join(' ');
+    }
+
+    function toggleMenu() {
+        var active = 'active';
+        var elements = getElements();
+
+        toggleClass(elements.menu, active);
+    }
+
+    function handleEvent(e) {
+        var elements = getElements();
+
+        if (e.target.id === elements.menuLink.id) {
+            toggleMenu();
+            e.preventDefault();
+        } else if (elements.menu.className.indexOf('active') !== -1) {
+            toggleMenu();
+        }
+    }
+
+    document.addEventListener('DOMContentLoaded', function () {
+        document.addEventListener('click', handleEvent);
+    });
+</script>
+{% if nt %}
+  <label>
+  <input type="checkbox" class="alertCheckbox" autocomplete="off" />
+  <div class="alert {% if nl == 'error' %}error{% else %}success{% endif %}">
+    <span class="alertText">{{nt}}
+    <br class="clear"/></span>
+  </div>
+</label>
+{% endif %}
+</body>
+</html>