pi-hole/web
1
0
Fork 0
mirror of https://github.com/pi-hole/web.git synced 2024-12-06 19:36:21 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

First draft of animated logo using pure SVG + CSS

Browse Source
This commit is contained in:
DL6ER
2016-12-09 13:18:29 +01:00
parent 0d7252e3f6
commit 2b5e3f4da9
1 changed files with 53 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
php/loginpage.php
+53 -3
View File
@@ -1,8 +1,35 @@
<div class="row">
<div class="col-sm-12 col-sm-offset-0">
<center>
<svg width="60%" viewBox="-80 -20 260 140" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- style="border: 1px solid black;" > -->
<defs>
<style type="text/css">
<![CDATA[
.filtered{
filter: url(#svgfilter);
}
]]>
</style>
<filter id="svgfilter">
<feGaussianBlur in="SourceGraphic" stdDeviation="2,2" />
<feComponentTransfer>
<feFuncR type="linear" slope="0.5"/>
<feFuncG type="linear" slope="0.5"/>
<feFuncB type="linear" slope="0.5"/>
</feComponentTransfer>
</filter>
</defs>
<g class="filtered">
<image x="0" y="0" width="100" height="100" xlink:href="img/logo.svg"/>
</g>
<circle cx="50" cy="50" r="68" class="path" strokemiterlimit="10" stroke="black" stroke-width="4" fill="none" />
</svg>
<div class="page-header">Protected page</div>
</center>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<center>
<img src="img/lock.svg" width="60%">
<div class="page-header">Protected page</div>
<form action="" method="POST">
<div class="form-group <?php if($wrongpassword){ ?>has-error<?php } ?> input-lg">
<?php if($wrongpassword){ ?><label class="control-label" for="inputError"><i class="fa fa-times-circle-o"></i> Wrong password!</label><?php } ?>
@@ -17,3 +44,26 @@
</center>
</div>
</div>
<style type="text/css">
.path {
stroke-dasharray: 14.2,14.2;
animation-name: ckw;
/* Set animation to linear style (no acceleration) */
animation-duration: 18s; /* Determines spinning speed */
animation-timing-function: linear; /* Play the animation with the same speed from beginning to end */
animation-iteration-count: infinite; /* Never stop animation */
transform-origin: 50% 50%; /* get circle rolling around itself */
}
@keyframes ckw {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>