Kiosk Mode GUI

First Gui elements
fpvout · May 21, 2021 · 23aad5c · 23aad5c
1 parent 3f378f8
commit 23aad5c
Show file tree

Hide file tree

Showing 22 changed files with 14,418 additions and 0 deletions.
diff --git a/html/css/all.css b/html/css/all.css
diff --git a/html/css/main.css b/html/css/main.css
@@ -0,0 +1,153 @@
+body {
+	margin: 0 auto;
+	font-family: Tahoma, Verdana, Arial, sans-serif;
+	color: white;
+	height: 100vh;
+	width: 100vw;
+}
+
+.container {
+	position:relative;
+	height: 100%;
+	width: 100%;
+	background-image: url('../wallpaper.png');
+	background-repeat: no-repeat;
+	-webkit-background-size: cover;
+	background-position: center;
+}
+
+.box-power {
+	position: absolute;
+	background: red;
+	width: 100px;
+	height: 100px;
+	bottom: 10px;
+	right: 10px;
+	text-align:center;
+	vertical-align: middle;
+	line-height: 100px;
+	font-size: 50px;
+	border-radius: 10px;
+}
+
+.box-power:active {
+	background-color:orange;
+}
+
+.box-menu {
+	position: absolute;
+	background: #555;
+	width: 100px;
+	height: 100px;
+	top: 10px;
+	left: 10px;  
+	text-align:center;
+	vertical-align: middle;
+	line-height: 100px;
+	font-size: 50px;
+	border-radius: 10px;
+}
+.box-menu:active {
+	background-color:#888;
+}
+
+.menu {
+	position: absolute;
+	background: rgba(128, 128, 128, 0.6);;
+	top: 10px;
+	left: 120px;  
+	font-size: 50px;
+	line-height: 80px;
+	border-radius: 10px;
+	padding : 10px 30px 10px 10px;
+}
+
+.box-terminal {
+	position: absolute;
+	background: #555;
+	width: 100px;
+	height: 100px;
+	bottom: 10px;
+	left: 10px;
+	text-align:center;
+	vertical-align: middle;
+	line-height: 100px;
+	font-size: 50px;
+	border-radius: 10px;
+}
+.box-terminal:active {
+	background-color:#888;
+}
+
+.box-screen {
+	position: absolute;
+	background: #555;
+	width: 100px;
+	height: 100px;
+	bottom: 10px;
+	left: 120px;
+	text-align:center;
+	vertical-align: middle;
+	line-height: 100px;
+	font-size: 50px;
+	border-radius: 10px;
+}
+.box-screen:active {
+	background-color:#888;
+}
+
+.box-battery {
+	position: absolute;
+	width: 100px;
+	height: 100px;
+	top:10px;
+	right:10px;
+	text-align:center;
+	vertical-align: middle;
+	line-height: 100px;
+	font-size: 50px
+}
+.icon {
+	background-color: #555;
+	color: #fff;
+	display: inline-block;
+	outline: none;
+	text-align: center;
+	text-decoration: none;
+	border-radius: 5px;
+	width: 100px;
+	height: 100px;
+	line-height: 100px;
+	margin: 10px
+}
+.icon:active {
+	background-color: #55f;
+}
+
+.box-clock {
+	position: absolute;
+	width: 100px;
+	height: 100px;
+	top: 10px;
+	right: 120px;
+	text-align: center;
+	vertical-align: middle;
+}
+
+.clock_time {
+	font: 25px Arial, Helvetica, sans-serif;
+	font-weight: bolder;
+	color: #fff;
+	text-shadow: 0px 2px 5px #000;
+	width: 100px;
+	text-align: center;
+	margin-top: 25px;
+}
+
+.clock_date {
+	font: 18px Arial, Helvetica, sans-serif;
+	color: #00adee;
+	text-shadow: 0px 2px 3px #000;
+	width: 100px;
+	text-align: center;
+}
diff --git a/html/get_time.php b/html/get_time.php
@@ -0,0 +1,19 @@
+<?php
+
+$tz = 'Europe/Zurich';
+
+$timestamp = time();
+
+$dt = new DateTime("now", new DateTimeZone($tz)); //first argument "must" be a string
+$dt->setTimestamp($timestamp); //adjust the object to correct timestamp
+
+$time = $dt->format('H:i');
+
+$date = $dt->format('d.m.Y');
+?>
+<div class="clock_time">
+<?php echo $time; ?>
+</div>
+<div class="clock_date">
+<?php echo $date; ?>
+</div>
diff --git a/html/index.html b/html/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>DIGIVIEW</title>
+<link href="css/all.css" rel="stylesheet">
+<link href="css/main.css" rel="stylesheet">
+<script src="js/jquery-3.6.0.min.js"></script>
+<script src="js/main.js"></script>
+
+</head>
+<body>
+
+	<div class="container">
+		<div class="box-power"><i class="fas fa-power-off"></i></div>
+		<div id="menu-button" class="box-menu"><i class="fas fa-bars"></i></div>
+		<div id="power-button" class="box-battery"><i class="fas fa-battery-three-quarters"></i></div>
+		<!--<div class="box-terminal"><i class="fas fa-terminal"></i></div>
+		<div class="box-screen"><i class="fas fa-expand-alt"></i></div>-->
+		<div id="menu" class="menu">
+			<i id="terminal-button" class="fas fa-terminal icon"></i>Terminal<br />
+			<i id="expand-button" class="fas fa-expand-alt icon"></i>Expand
+		</div>
+	<!--<div class="box-clock"></div>-->
+	</div>
+</body>
+</html>
+
diff --git a/html/js/jquery-3.6.0.min.js b/html/js/jquery-3.6.0.min.js
diff --git a/html/js/main.js b/html/js/main.js
@@ -0,0 +1,46 @@
+$(document).ready(function(){
+
+	//------------------------------------------------------------------------------------------------
+	// Menu
+	$('#menu').hide();
+	$('#menu-button').mousedown(
+	function(e) {
+		if ($('#menu').is(':hidden')) {
+			$('#menu').fadeIn();
+		}else{
+			$('#menu').fadeOut();
+		}
+	});
+
+	$('#power-button').mousedown(
+	function(e) {
+		$('#menu').fadeOut();
+	});
+
+	$('#terminal-button').mousedown(
+	function(e) {
+		$('#menu').fadeOut();
+	});
+
+	$('#expand-button').mousedown(
+	function(e) {
+		$('#menu').fadeOut();
+	});
+
+/*	var drawClock = function()
+	{
+		$('.box-clock').load('get_time.php', function() {
+		});
+	}
+	
+	drawClock();
+	
+	var auto_refresh_normal = setInterval(
+		function()
+		{
+			drawClock();
+		}, 10000
+	);
+*/
+
+})
diff --git a/html/wallpaper.png b/html/wallpaper.png
diff --git a/html/webfonts/fa-brands-400.eot b/html/webfonts/fa-brands-400.eot