-
Notifications
You must be signed in to change notification settings - Fork 0
/
homepage.mustache
34 lines (34 loc) · 6.74 KB
/
homepage.mustache
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html>
<head>
<style>
fieldset,form,label,legend,input,select,textarea,option{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:baseline}*{box-sizing:border-box}:root{--nf-main-color: #4A90E2;--nf-main-color-faded: #EDF4FC;--nf-main-color-hover-color: #3B7CC8;--nf-success-border-color: #17C37B;--nf-error-border-color: #EFADB5;--nf-error-bg-color: #FEF7F8}form.normform label,form.normform input,form.normform textarea,form.normform select{display:block;position:relative;width:100%}form.normform input,form.normform textarea,form.normform .select-dropdown,form.normform .select-listed,form.normform input[type=checkbox]+label,form.normform input[type=radio]+label{margin-bottom:20px}form.normform fieldset{border:1px solid lightgrey;border-radius:2px;box-shadow:0 2px 8px 0 rgba(0,0,0,0.05);margin:20px 0;padding:20px 20px 0}form.normform legend{color:grey;font-size:80%;padding:0 10px;text-transform:uppercase}form.normform label{font-size:90%;margin-bottom:5px}form.normform input[type=text]:valid:not(:placeholder-shown),form.normform input[type=email]:valid:not(:placeholder-shown),form.normform input[type=password]:valid:not(:placeholder-shown),form.normform input[type=number]:valid:not(:placeholder-shown),form.normform textarea:valid:not(:placeholder-shown){border-color:var(--nf-success-border-color);border-left:5px solid var(--nf-success-border-color);-webkit-transition:none;transition:none}form.normform input,form.normform textarea,form.normform select,form.normform input[type=checkbox]+label,form.normform input[type=radio]+label{border:1px solid lightgrey;border-left:5px solid lightgrey;border-radius:5px;outline:none;padding:10px 15px}form.normform input:required,form.normform textarea:required,form.normform select:required{border-left:5px solid #EFADB5}form.normform input:focus,form.normform input[type=checkbox]:focus+label,form.normform input[type=radio]:focus+label,form.normform textarea:focus,form.normform select:focus{border-color:var(--nf-main-color);box-shadow:0 2px 5px 0 rgba(0,0,0,0.1)}form.normform input:invalid:not(:focus):not(:placeholder-shown),form.normform input:invalid:focus:not(:placeholder-shown){background:var(--nf-error-bg-color);border-color:var(--nf-error-border-color)}form.normform input:invalid:focus:not(:placeholder-shown) ~ .requirements{max-height:150px;padding:0 0 10px 10px}form.normform .requirements{color:red;font-size:80%;font-style:italic;max-height:0;overflow:hidden;padding:0 0 0 10px;position:relative;-ms-transition:.28s;-webkit-transition:.28s;top:-10px;transition:.28s}form.normform select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:white;margin:0;padding-right:40px}form.normform .select-dropdown{background:white;display:block;position:relative}form.normform .select-dropdown:after{background:none;border-color:lightgrey;border-style:solid;border-width:3px 3px 0 0;content:'';display:block;height:6px;position:absolute;right:15px;top:calc(50% - 6px);-webkit-transform:rotate(135deg);transform:rotate(135deg);width:6px}form.normform input[type=checkbox],form.normform input[type=radio],form.normform input[type=checkbox]+label,form.normform input[type=radio]+label{cursor:pointer;display:inline-block}form.normform input[type=checkbox]+label,form.normform input[type=radio]+label{border:1px solid lightgrey;font-size:100%;padding-left:30px;position:relative}form.normform input[type=checkbox]+label:before,form.normform input[type=radio]+label:before{background:white;border-radius:2px;border:1px solid black;content:'';height:9px;left:10px;position:absolute;top:calc(50% - 5px);width:9px}form.normform input[type=radio]+label:before{border-radius:100px}form.normform input[type=radio]:checked+label:before{background:var(--nf-main-color);border-color:var(--nf-main-color)}form.normform input[type=checkbox]+label:after{color:white;content:'✓';display:none;font-size:14px;font-weight:bold;left:11px;position:absolute;text-shadow:0 1px 2px rgba(0,0,0,0.4);top:calc(50% - 10px)}form.normform input[type=radio]+label:after{background:white;border-radius:100px;box-shadow:0 1px 2px rgba(0,0,0,0.4);content:'';display:none;position:absolute;width:5px;height:5px;left:13px;top:calc(50% - 2px)}form.normform input[type=radio]:checked+label:after{display:block}form.normform input[type=checkbox]:focus+label,form.normform input[type=radio]:focus+label{border-color:var(--nf-main-color)}form.normform input[type=checkbox]:checked+label,form.normform input[type=radio]:checked+label{background:var(--nf-main-color-faded);border-color:var(--nf-main-color)}form.normform input[type=checkbox]:checked+label:before{background:var(--nf-main-color);border-color:var(--nf-main-color)}form.normform input[type=checkbox]:checked+label:after{display:block}form.normform input[type=checkbox],form.normform input[type=radio]{margin-right:5px;position:absolute;width:auto;z-index:-1}form.normform input[type=submit],form.normform input[type=reset]{border-radius:4px;cursor:pointer;display:inline-block;margin:0;padding:12px 15px;position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;top:0}form.normform input[type=submit]:hover,form.normform input[type=reset]:hover{box-shadow:0 5px 10px 0 rgba(0,0,0,0.1)}form.normform input[type=submit]:focus{border-color:rgba(0,0,0,0.6)}form.normform input[type=reset]:focus{border-color:var(--nf-main-color)}form.normform input[type="submit"]{background:var(--nf-main-color);border:1px solid #4A90E2;color:white}form.normform input[type=submit]:hover{background:var(--nf-main-color-hover-color)}form.normform input[type="reset"]{background:white;border:1px solid lightgrey;color:grey}form.normform .inline-buttons{display:-webkit-box;display:flex}form.normform .inline-buttons input:first-of-type{margin-right:10px}form.normform .inline-buttons input[type=submit],form.normform .inline-buttons input[type=reset]{width:50%}
form.normform input[type="submit"] {margin-bottom:20px}
</style>
</head>
</body>
<form class="normform" action="post" method="POST" enctype="application/x-www-form-urlencoded">
<fieldset>
<legend>new proxy</legend>
<label for=new.name>Name:</label>
<input type="text" name=new.name placeholder="foo...">
<label for=new.pub>SSH pubkey:</label>
<input type="text" name=new.pub placeholder="ssh-ed25519 AAAA...">
<input type="submit" name=action value="Add new">
<br>
</fieldset>
<fieldset>
{{#proxies}}
<legend>SSH proxy {{name}}</legend>
<label for="name.{{name}}" >Name:</label>
<input type="text" name="name.{{name}}" placeholder="Name..." value="{{name}}">
<label for="pub.{{name}}">SSH pubkey:</label>
<input type="text" name="pub.{{name}}" placeholder="ssh-ed25519 AAAA..." value="{{pubkey}}">
<div class="inline-buttons">
<input type="submit" name="action" value="Remove {{name}}">
<input type="submit" name="action" value="Update {{name}}">
</div>
</fieldset>
{{/proxies}}
</form>
</body>
</html>