From fb911524405db082674e404048b816d4d6019121 Mon Sep 17 00:00:00 2001
From: Henri Bergius <henri.bergius@iki.fi>
Date: Tue, 5 Dec 2017 22:10:25 +0100
Subject: [PATCH] Add alien alarm screen

---
 README.md              |  1 +
 alien-alarm/alien.svg  | 54 +++++++++++++++++++++++++++++++
 alien-alarm/index.html | 72 ++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 127 insertions(+)
 create mode 100644 alien-alarm/alien.svg
 create mode 100644 alien-alarm/index.html

diff --git a/README.md b/README.md
index d4811a6..cc744c1 100644
--- a/README.md
+++ b/README.md
@@ -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 status](http://c-flo.cbrp3.c-base.org/bar-status/)
 * [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:
 
diff --git a/alien-alarm/alien.svg b/alien-alarm/alien.svg
new file mode 100644
index 0000000..a97550f
--- /dev/null
+++ b/alien-alarm/alien.svg
@@ -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>
diff --git a/alien-alarm/index.html b/alien-alarm/index.html
new file mode 100644
index 0000000..a805c92
--- /dev/null
+++ b/alien-alarm/index.html
@@ -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>