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

Fixes : Add some style

Browse Source
This commit is contained in:
amuthmann 2019-11-05 23:17:36 +01:00
parent 9e92201d82
commit f952bcd298
2 changed files with 66 additions and 40 deletions
pwnagotchi/ui/web
static/css
style.css
templates
index.html

81
pwnagotchi/ui/web/static/css/style.css

@ -1,42 +1,67 @@
.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;
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: 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 { div.status {
position: absolute; position: absolute;
top:0; top: 0;
left:0; left: 0;
width:100%; width: 100%;
} }

25
pwnagotchi/ui/web/templates/index.html

@ -1,26 +1,27 @@
<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>