New design for new login page

This commit is contained in:
DL6ER
2016-12-13 15:38:03 +01:00
parent 27f80a2bf8
commit 5f83f6af2f
+52 -55
View File
@@ -1,65 +1,62 @@
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<center>
<svg width="100%" viewBox="-60 -5 220 140" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="max-width: 400px;"><!-- " border: 1px solid black;" > -->
<defs>
<style type="text/css">
<![CDATA[
.bluranddarken{
filter: url(#bluranddarken);
}
.blurslightly{
filter: url(#blurslightly);
}
]]>
</style>
<filter id="bluranddarken">
<!-- Add blur -->
<feGaussianBlur in="SourceGraphic" stdDeviation="3,3" />
<feComponentTransfer> <!-- Make it darker -->
<feFuncR type="linear" slope="0.5"/>
<feFuncG type="linear" slope="0.5"/>
<feFuncB type="linear" slope="0.5"/>
</feComponentTransfer>
</filter>
<filter id="blurslightly">
<feGaussianBlur in="SourceGraphic" stdDeviation="2,2" />
</filter>
</defs>
<g class="bluranddarken">
<image x="0" y="0" width="100" height="100" xlink:href="img/logo.svg"/>
</g>
<g class="blurslightly">
<text font-family="Verdana" x="-18" y="130" font-size="24" class="protected">Protected area</text>
</g>
<!--
M is moveto
A is a general elliptical arc command.
L is lineto
-->
</svg>
</center>
</div>
<div class="col-sm-12">
<center><img src="img/logo.svg" width="20%"></center>
</div>
<div class="col-sm-12">
<center><span class="logo-lg" style="font-size: 25px;"><b>Pi</b>-hole</span></center>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<div class="login-box">
<!-- <div class="col-sm-6 col-sm-offset-3">
<form action="" method="POST">
<div class="form-group <?php if($wrongpassword){ ?>has-error<?php } ?> input-group-lg">
<?php if($wrongpassword){ ?><center><label class="control-label" for="inputError"><i class="fa fa-times-circle-o"></i> Wrong password!</label></center><?php } ?>
<div class="input-group">
<input type="password" class="form-control " name="pw" placeholder="Enter password to unlock">
<span class="input-group-btn">
<button type="submit" class="btn btn-info btn-flat <?php if($wrongpassword){ ?>btn-danger<?php } ?>">Submit</button>
</span>
</div>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="Password">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
</div>
<div class="col-xs-4">
<button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
</div>
</form>
</center>
</div>
</center> -->
<div class="login-box-body">
<p class="login-box-msg">Sign in to start your session</p>
<?php if($wrongpassword){ ?>
<div class="form-group has-error login-box-msg">
<label class="control-label"><i class="fa fa-times-circle-o"></i> Wrong password!</label>
</div>
<?php } ?>
<form action="" method="post">
<div class="form-group has-feedback <?php if($wrongpassword){ ?>has-error<?php } ?> ">
<input type="password" name="pw" class="form-control" placeholder="Password">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-4 col-xs-offset-8">
<button type="submit" class="btn btn-primary btn-block btn-flat">Log In</button>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12">
<div class="box box-info collapsed-box box-solid">
<div class="box-header with-border">
<h3 class="box-title">Forgot password</h3>
<div class="box-tools pull-right"><button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button></div>
</div>
<div class="box-body">
After installing Pi-Hole for the first time, a password is generated and displayed to the user. The password cannot be retrived later on, but it is possible to set a new password (or explicitly disable the password) using the command <pre>sudo pihole -a -p newpassword</pre>
</div>
</div>
</div>
</div>
</form>
</div>
<br>
<style type="text/css">
.protected {