Add alien alarm screen
This commit is contained in:
Henri Bergius
parent
7c26a3052e
commit
fb91152440
3 changed files with 127 additions and 0 deletions
|
|
@ -53,6 +53,7 @@ There are also screens available from c-beam:
|
||||||
* [bar historical data](http://c-flo.cbrp3.c-base.org/bar-history/)
|
* [bar historical data](http://c-flo.cbrp3.c-base.org/bar-history/)
|
||||||
* [bar status](http://c-flo.cbrp3.c-base.org/bar-status/)
|
* [bar status](http://c-flo.cbrp3.c-base.org/bar-status/)
|
||||||
* [internet traffic](http://c-flo.cbrp3.c-base.org/internet/)
|
* [internet traffic](http://c-flo.cbrp3.c-base.org/internet/)
|
||||||
|
* [alien alarm](http://c-flo.cbrp3.c-base.org/alien-alarm/)
|
||||||
|
|
||||||
There are also screens available from c-beam:
|
There are also screens available from c-beam:
|
||||||
|
|
||||||
|
|
|
||||||
54
alien-alarm/alien.svg
Normal file
54
alien-alarm/alien.svg
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
width="462px" height="336px" viewBox="0 0 462 336" enable-background="new 0 0 462 336" xml:space="preserve">
|
||||||
|
<rect x="84" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="126" y="42" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="84" y="84" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="42" y="126" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect y="84" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect y="42" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect y="126" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="42" y="168" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect y="168" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="42" y="210" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="84" y="126" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="84" y="168" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="84" y="210" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="84" y="252" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="42" y="294" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="126" y="84" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="168" y="84" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="210" y="84" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="252" y="84" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="294" y="42" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="336" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="294" y="84" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="336" y="84" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="420" y="84" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="420" y="42" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="420" y="126" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="420" y="168" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="336" y="126" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="336" y="168" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="336" y="210" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="378" y="126" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="378" y="168" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="378" y="210" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="336" y="252" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="378" y="294" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="126" y="210" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="168" y="210" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="210" y="210" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="252" y="210" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="294" y="210" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="126" y="168" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="168" y="168" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="210" y="168" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="252" y="168" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="294" y="168" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="168" y="126" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="210" y="126" fill="#000000" width="42" height="42"/>
|
||||||
|
<rect x="252" y="126" fill="#000000" width="42" height="42"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.4 KiB |
72
alien-alarm/index.html
Normal file
72
alien-alarm/index.html
Normal file
|
|
@ -0,0 +1,72 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>c-base alien alarm</title>
|
||||||
|
<link rel="stylesheet" href="../theme/c-base.css">
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
-webkit-animation-name: color;
|
||||||
|
-webkit-animation-duration: 0.6s;
|
||||||
|
-webkit-animation-iteration-count:infinite;
|
||||||
|
-webkit-animation-timing-function:ease-in-out;
|
||||||
|
-webkit-animation-direction: alternate;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 10vmin;
|
||||||
|
margin-top: 10vmin;
|
||||||
|
white-space: nowrap;
|
||||||
|
width: 100vw;
|
||||||
|
overflow: hidden;
|
||||||
|
color: black;
|
||||||
|
text-transform: lowercase;
|
||||||
|
line-height: 20vmin;
|
||||||
|
-webkit-animation-name: size;
|
||||||
|
-webkit-animation-duration: 0.6s;
|
||||||
|
-webkit-animation-iteration-count:infinite;
|
||||||
|
-webkit-animation-timing-function:ease-in-out;
|
||||||
|
-webkit-animation-direction: alternate;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
position: absolute;
|
||||||
|
left: 35vw;
|
||||||
|
top: 50vh;
|
||||||
|
width: 30vw;
|
||||||
|
-webkit-animation-name: move;
|
||||||
|
-webkit-animation-duration: 3s;
|
||||||
|
-webkit-animation-iteration-count:infinite;
|
||||||
|
-webkit-animation-timing-function:linear;
|
||||||
|
-webkit-animation-direction: alternate;
|
||||||
|
}
|
||||||
|
@-webkit-keyframes move {
|
||||||
|
from {
|
||||||
|
left: 10vw;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 60vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes color {
|
||||||
|
from {
|
||||||
|
background-color: hsl(0, 98%, 46%);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
background-color: hsl(35, 98%, 46%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes size {
|
||||||
|
from {
|
||||||
|
font-size: 10vmin;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
font-size: 16vmin;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Alien Alarm</h1>
|
||||||
|
<img src="alien.svg">
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in a new issue