Initial push

2025-04-29 15:42:07 +02:00
commit 9bd02f156d
1 changed files with 119 additions and 0 deletions
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Webinterface</title>
+        <meta charset="utf-8">
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    </head>
+    <body>
+        <div class="container">
+            <div class="container hud" id="Control">
+                <div class="hud-header">Auto HUD</div>
+                <div class="hud-row">
+                    <div class="label">IP:</div>
+                    <div class="info">***.***.***.***</div>
+                </div>
+                <div class="hud-row">
+                    <div class="label">Station:</div>
+                    <div class="important">Mobile</div>
+                </div>
+                <div class="hud-row">
+                    <button class="btn btn-sm btn-success" id="LocationButton" style="width: 100px;" onclick="handleButtonPress(this)">Location</button>
+                    <button class="btn btn-sm btn-outline-secondary" id="CameraButton" style="width: 100px;" onclick="handleButtonPress(this)">Camera</button>
+                </div>
+            </div>
+        </div>
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    </body>
+
+    <style>
+         .hud {
+            position: fixed;
+            top: 20px;
+            left: 20px;
+            width: 240px;
+            background: rgba(0, 0, 0, 0.6);
+            border: 1px solid #444;
+            border-radius: 8px;
+            padding: 10px;
+            font-family: 'Courier New', monospace;
+            color: #ddd;
+            user-select: none;
+            z-index: 9999;
+        }
+
+        .hud-header {
+            display: flex;
+            justify-content: space-between;
+            font-size: 13px;
+            margin-bottom: 8px;
+            color: #eeeeee;
+        }
+
+        .hud-row {
+            display: flex;
+            justify-content: space-between;
+            font-size: 14px;
+            line-height: 1.2;
+            margin-bottom: 4px;
+        }
+
+        .label { color: #d6d6d6; }
+        .important   { color: rgb(255, 52, 52); }
+        .info   { color: #48f; }
+        .success   { color: #4f4; }
+        .info2   { color: #8cf; }
+
+        html, body {
+            height: 100%;
+            margin: 0;
+        }
+
+        body {
+            background-color: #fff;
+            background-image:
+                repeating-linear-gradient(
+                    to bottom,
+                    #ccc,
+                    #ccc 1px,
+                    transparent 1px,
+                    transparent 20px
+                ),
+                /* vertikale Linien */
+                repeating-linear-gradient(
+                    to right,
+                    #ccc,
+                    #ccc 1px,
+                    transparent 1px,
+                    transparent 20px
+                );
+        }
+    </style>
+
+    <script>
+        var logging = true;
+
+        function log(message){
+            if(logging)
+                console.log(message);
+        }
+
+        function button_switch(e){
+            log("Pressed Button: " + e.id);
+            buttonString = e.id == "LocationButton" ? "CameraButton" : "LocationButton";
+
+            let btn = document.getElementById(buttonString);
+            btn.classList.remove("btn-success");
+            btn.classList.add("btn-outline-secondary");
+            
+            e.classList.remove("btn-outline-secondary");
+            e.classList.add("btn-success");
+        }
+
+        function handleButtonPress(e){
+            if(e.classList.contains("btn-success")) return;
+            button_switch(e);
+        }
+
+    </script>
+</html>