t/ConnectionOnTheMoveWebinterface
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial push

Browse Source
This commit is contained in:
t
2025-04-29 15:42:07 +02:00
commit 9bd02f156d
1 changed files with 119 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webinterface.html
+119
View File
@@ -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>