From c4f3d29be040ad36aab856f0d88c1bc7a8f65ae6 Mon Sep 17 00:00:00 2001 From: Malte Bublitz Date: Thu, 26 Oct 2023 15:31:58 +0200 Subject: [PATCH] Style improvement for Web UI --- fifo-webui/command.php | 9 ++++++- fifo-webui/index.php | 56 +++++++++++++++++++++++------------------- fifo-webui/style.css | 56 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 95 insertions(+), 26 deletions(-) create mode 100644 fifo-webui/style.css diff --git a/fifo-webui/command.php b/fifo-webui/command.php index 9a68d78..8767574 100644 --- a/fifo-webui/command.php +++ b/fifo-webui/command.php @@ -1,6 +1,13 @@ \n\n

Error: FIFO file “" . FIFO . "” does not exist!

Is fifo_bridge.py running?

"); + + +$f = fopen(FIFO, "w+"); switch ($_POST["cmd"]) { case "getty": diff --git a/fifo-webui/index.php b/fifo-webui/index.php index 3aca885..b7193f0 100644 --- a/fifo-webui/index.php +++ b/fifo-webui/index.php @@ -6,37 +6,43 @@ $Title = "MAPID-FIFO Web-UI"; - + <?=$Title?> +

-
- - -
-
-
- - -
-
-
- - - -
-
-
- - - -
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + + +
+
+
+
+ + + +
+
diff --git a/fifo-webui/style.css b/fifo-webui/style.css new file mode 100644 index 0000000..f7baa8e --- /dev/null +++ b/fifo-webui/style.css @@ -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; +} \ No newline at end of file