malte70/mapid
malte70/mapid
1
0
Fork 0
Code Issues Pull requests Activity

Style improvement for Web UI

Browse source
This commit is contained in:
Malte Bublitz 2023-10-26 15:31:58 +02:00
parent 8a4e851ec6
commit c4f3d29be0
Signed by: malte70
GPG key ID: 605DA5C729F9C184
3 changed files with 95 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
fifo-webui/command.php
View file

@ -1,6 +1,13 @@
<?php <?php
$f = fopen("/tmp/mapid.fifo", "w+"); define("FIFO", "/tmp/mapid");
if (!file_exists(FIFO))
die("<!DOCTYPE html>\n<meta charset=\"UTF-8\">\n<h3 style=\"color:red;\">Error: FIFO file “" . FIFO . "” does not exist!</h3><p>Is <tt>fifo_bridge.py</tt> running?</p>");
$f = fopen(FIFO, "w+");
switch ($_POST["cmd"]) { switch ($_POST["cmd"]) {
case "getty": case "getty":

56
fifo-webui/index.php
View file

@ -6,37 +6,43 @@ $Title = "MAPID-FIFO Web-UI";
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title> <title><?=$Title?></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head> </head>
<body> <body>
<header> <header>
<h1><?=$Title?></h1> <h1><?=$Title?></h1>
</header> </header>
<main> <main>
<form action="command.php" method="POST"> <section>
<input type="hidden" name="cmd" value="getty"> <form action="command.php" method="POST">
<button type="submit">Getty</button> <input type="hidden" name="cmd" value="getty">
</form> <button type="submit">Getty</button>
<hr> </form>
<form action="command.php" method="POST"> </section>
<input type="hidden" name="cmd" value="cls"> <section>
<button type="submit">Clear</button> <form action="command.php" method="POST">
</form> <input type="hidden" name="cmd" value="cls">
<hr> <button type="submit">Clear</button>
<form action="command.php" method="POST"> </form>
<input type="hidden" name="cmd" value="line"> </section>
<select name="line" height="1"> <section>
<option value="1">1</option> <form action="command.php" method="POST">
<option value="2">2</option> <input type="hidden" name="cmd" value="line">
</select> <select name="line" height="1">
<button type="submit">Select line</button> <option value="1">1</option>
</form> <option value="2">2</option>
<hr> </select>
<form action="command.php" method="POST"> <button type="submit">Select line</button>
<input type="hidden" name="cmd" value="echo"> </form>
<input type="text" name="text"> </section>
<button type="submit">Output</button> <section>
</form> <form action="command.php" method="POST">
<input type="hidden" name="cmd" value="echo">
<input type="text" name="text" placeholder="Text">
<button type="submit">Output</button>
</form>
</section>
</main> </main>
</body> </body>
</html> </html>

56
fifo-webui/style.css Normal file
View file

@ -0,0 +1,56 @@
*, *:before, *:after {
box-sizing: border-box;
}
h1 {
font: 2em "Source Serif Pro", serif;
margin: 1em 0 2em;
padding: .5em;
text-align: center;
}
main {
width: 25em;
max-width: 100%;
padding: .5em;
margin: 0 auto;
}
section {
margin: 0 0 2em;
}
input, select {
border-radius: 6px;
padding: 6px 14px;
/*background: #DFDEDF;*/
background: #efefef;
/*box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.1), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.5), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.12);*/
color: #6E6D70;
display: inline-block;
margin-right: .5em;
}
/* https://getcssscan.com/css-buttons-examples */
button {
/*display: flex;
flex-direction: column;
align-items: center;*/
padding: 6px 14px;
font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
border-radius: 6px;
border: none;
background: #6E6D70;
box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.1), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.5), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.12);
color: #DFDEDF;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
button:focus {
box-shadow: inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2), 0px 0.5px 1px rgba(0, 0, 0, 0.1), 0px 0px 0px 3.5px rgba(58, 108, 217, 0.5);
outline: 0;
}