scifijunkie/pwnagotchi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #535 from deveth0/deveth0-523-webui

Browse Source 
#523: Add some styling to webui
This commit is contained in:
evilsocket 2019-11-06 11:31:40 +01:00 committed by GitHub
commit 15fa7039e8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 87 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
pwnagotchi/ui/web/static/css/style.css
View File

@ -1,42 +1,68 @@
.block { form {
-webkit-appearance: button; margin-block-end: 0;
-moz-appearance: button;
appearance: button;
display: block;
cursor: pointer;
text-align: center;
} }
img#ui {
width:100%;
}
.full { .content {
position: absolute; position: absolute;
top:0; top: 0;
left:0; left: 0;
width:100%; width: 100vw;
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
display: flex;
flex-direction: column;
} }
/**
* make sure image is displayed without any blur
*/
.pixelated { .pixelated {
image-rendering:optimizeSpeed; /* Legal fallback */ image-rendering: optimizeSpeed; /* Legal fallback */
image-rendering:-moz-crisp-edges; /* Firefox */ image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering:-o-crisp-edges; /* Opera */ image-rendering: -o-crisp-edges; /* Opera */
image-rendering:-webkit-optimize-contrast; /* Safari */ image-rendering: -webkit-optimize-contrast; /* Safari */
image-rendering:optimize-contrast; /* CSS3 Proposed */ image-rendering: optimize-contrast; /* CSS3 Proposed */
image-rendering:crisp-edges; /* CSS4 Proposed */ image-rendering: crisp-edges; /* CSS4 Proposed */
image-rendering:pixelated; /* CSS4 Proposed */ image-rendering: pixelated; /* CSS4 Proposed */
-ms-interpolation-mode:nearest-neighbor; /* IE8+ */ -ms-interpolation-mode: nearest-neighbor; /* IE8+ */
} }
form.action { .image-wrapper {
display:inline; 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: 50% 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 { div.status {
position: absolute; position: absolute;
top:0; top: 0;
left:0; left: 0;
width:100%; width: 100%;
} }

17
pwnagotchi/ui/web/static/js/viewportHeight.js Normal file
View File

@ -0,0 +1,17 @@
/* https://css-tricks.com/the-trick-to-viewport-units-on-mobile/*/
var lastViewportHeight;
function updateViewportSize() {
// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
var vh = window.innerHeight * 0.01;
if (!lastViewportHeight || lastViewportHeight !== vh) {
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty("--vh", vh + "px");
lastViewportHeight = vh;
}
}
document.addEventListener("DOMContentLoaded", function() {
updateViewportSize();
});

26
pwnagotchi/ui/web/templates/index.html
View File

@ -1,29 +1,31 @@
<html> <html>
<head> <head>
<title>{{ title }}</title> <title>{{ title }}</title>
<link rel="stylesheet" type="text/css" href="/css/style.css"/> <link rel="stylesheet" type="text/css" href="/css/style.css"/>
</head> </head>
<body> <body>
<div class="full pixelated"> <div class="content">
<img src="/ui" id="ui"/> <div class="image-wrapper">
<br/> <img class="ui-image pixelated" src="/ui" id="ui"/>
<hr/> </div>
<div class="buttons-wrapper">
<form class="action" method="POST" action="/shutdown" <form class="action" method="POST" action="/shutdown"
onsubmit="return confirm('This will halt the unit, continue?');"> onsubmit="return confirm('This will halt the unit, continue?');">
<input style="display:inline;" type="submit" class="block" value="Shutdown"/> <input type="submit" class="button" value="Shutdown"/>
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/> <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
</form> </form>
<form class="action" method="POST" action="/restart" <form class="action" method="POST" action="/restart"
onsubmit="return confirm('This will restart the service in {{ other_mode }} mode, continue?');"> 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="submit" class="button" value="Restart in {{ other_mode }} mode"/>
<input type="hidden" name="mode" value="{{ other_mode }}"/> <input type="hidden" name="mode" value="{{ other_mode }}"/>
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/> <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
</form> </form>
</div>
</div> </div>
<script type="text/javascript" src="/js/refresh.js"></script> <script type="text/javascript" src="/js/refresh.js"></script>
<script type="text/javascript" src="/js/viewportHeight.js"></script>
</body> </body>
</html> </html>