From f952bcd2987a66e80ca882871cb67e5cf7f8aa9a Mon Sep 17 00:00:00 2001
From: amuthmann <amuthmann@pro-vision.de>
Date: Tue, 5 Nov 2019 23:17:36 +0100
Subject: [PATCH] Fixes #523: Add some style
---
pwnagotchi/ui/web/static/css/style.css | 81 +++++++++++++++++---------
pwnagotchi/ui/web/templates/index.html | 25 ++++----
2 files changed, 66 insertions(+), 40 deletions(-)
diff --git a/pwnagotchi/ui/web/static/css/style.css b/pwnagotchi/ui/web/static/css/style.css
index 060a984..b4ce854 100644
--- a/pwnagotchi/ui/web/static/css/style.css
+++ b/pwnagotchi/ui/web/static/css/style.css
@@ -1,42 +1,67 @@
-.block {
- -webkit-appearance: button;
- -moz-appearance: button;
- appearance: button;
-
- display: block;
- cursor: pointer;
- text-align: center;
+form {
+ margin-block-end: 0;
}
-img#ui {
- width:100%;
-}
-.full {
+.content {
position: absolute;
- top:0;
- left:0;
- width:100%;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
}
+/**
+ * make sure image is displayed without any blur
+ */
.pixelated {
- image-rendering:optimizeSpeed; /* Legal fallback */
- image-rendering:-moz-crisp-edges; /* Firefox */
- image-rendering:-o-crisp-edges; /* Opera */
- image-rendering:-webkit-optimize-contrast; /* Safari */
- image-rendering:optimize-contrast; /* CSS3 Proposed */
- image-rendering:crisp-edges; /* CSS4 Proposed */
- image-rendering:pixelated; /* CSS4 Proposed */
- -ms-interpolation-mode:nearest-neighbor; /* IE8+ */
+ image-rendering: optimizeSpeed; /* Legal fallback */
+ image-rendering: -moz-crisp-edges; /* Firefox */
+ image-rendering: -o-crisp-edges; /* Opera */
+ image-rendering: -webkit-optimize-contrast; /* Safari */
+ image-rendering: optimize-contrast; /* CSS3 Proposed */
+ image-rendering: crisp-edges; /* CSS4 Proposed */
+ image-rendering: pixelated; /* CSS4 Proposed */
+ -ms-interpolation-mode: nearest-neighbor; /* IE8+ */
}
-form.action {
- display:inline;
+.image-wrapper {
+ flex: 1;
+ position: relative;
+}
+
+.ui-image {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ max-width: 100vw;
+ height: 100%;
+ object-fit: contain;
+ object-position: 0 0;
+}
+
+.buttons-wrapper {
+ flex-shrink: 0;
+ display: flex;
+ flex-wrap: wrap;
+ padding: 0 16px;
+}
+
+.button {
+ border: 1px solid black;
+ border-radius: 4px;
+ font-size: 2em;
+ background: #f8b506;
+ margin: 16px;
}
div.status {
position: absolute;
- top:0;
- left:0;
- width:100%;
+ top: 0;
+ left: 0;
+ width: 100%;
}
\ No newline at end of file
diff --git a/pwnagotchi/ui/web/templates/index.html b/pwnagotchi/ui/web/templates/index.html
index 50ec1e2..c8e7032 100644
--- a/pwnagotchi/ui/web/templates/index.html
+++ b/pwnagotchi/ui/web/templates/index.html
@@ -1,26 +1,27 @@
<html>
<head>
- <title>{{ title }}</title>
- <link rel="stylesheet" type="text/css" href="/css/style.css"/>
+ <title>{{ title }}</title>
+ <link rel="stylesheet" type="text/css" href="/css/style.css"/>
</head>
<body>
-<div class="full pixelated">
- <img src="/ui" id="ui"/>
- <br/>
- <hr/>
-
+<div class="content">
+ <div class="image-wrapper">
+ <img class="ui-image pixelated" src="/ui" id="ui"/>
+ </div>
+ <div class="buttons-wrapper">
<form class="action" method="POST" action="/shutdown"
onsubmit="return confirm('This will halt the unit, continue?');">
- <input style="display:inline;" type="submit" class="block" value="Shutdown"/>
- <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+ <input type="submit" class="button" value="Shutdown"/>
+ <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
</form>
<form class="action" method="POST" action="/restart"
onsubmit="return confirm('This will restart the service in {{ other_mode }} mode, continue?');">
- <input style="display:inline;" type="submit" class="block" value="Restart in {{ other_mode }} mode"/>
- <input type="hidden" name="mode" value="{{ other_mode }}"/>
- <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+ <input type="submit" class="button" value="Restart in {{ other_mode }} mode"/>
+ <input type="hidden" name="mode" value="{{ other_mode }}"/>
+ <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
</form>
+ </div>
</div>
<script type="text/javascript" src="/js/refresh.js"></script>