puik.tv

code/views/root.etlua

@@ -1,5 +1,82 @@
-<div class="root">
-    <video autoplay muted loop id="puikheid" style="position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%;">
-        <source src="data/play-tv.mp4" type="video/mp4">
-    </video>
+<style>
+
+body {
+  background-color: #222;
+}
+
+#container {
+  max-width: 1280px;
+  margin: auto;
+}
+
+#monitor {
+	background: #000;
+	position: relative;
+	border-top: 3px solid #888;
+	margin: 5%;
+	padding: 2% 2% 4% 2%;
+	border-radius: 10px;
+	border-bottom-left-radius: 50% 2%;
+	border-bottom-right-radius: 50% 2%;
+	transition: margin-right 1s;
+}
+
+#monitor:after {
+	content: '';
+	display: block;
+	position: absolute;
+	bottom: 3%;
+	left: 36%;
+	height: .5%;
+	width: 28%;
+	background: #ddd;
+	border-radius: 50%;
+	box-shadow: 0 0 3px 0 white;
+}
+
+#monitorscreen {
+	position: relative;
+    background-color: #777;
+	background-size: cover;
+	background-position: top center;
+	height: 0;
+	padding-bottom: 56.25%;
+	position: relative;
+	overflow: hidden;
+}
+
+
+@media all and (min-width: 960px) {
+	#monitor {
+		-webkit-animation: tvflicker .2s infinite alternate;
+		-moz-animation:    tvflicker .5s infinite alternate;
+		-o-animation:      tvflicker .5s infinite alternate;
+		animation:         tvflicker .5s infinite alternate;
+	}
+
+	@-webkit-keyframes tvflicker {
+	  0%   { box-shadow: 0 0 100px 0 rgba(200,235,255,0.4); }
+	  100% { box-shadow: 0 0 95px 0 rgba(200,230,255,0.45); }
+	}
+	@-moz-keyframes tvflicker {
+	  0%   { box-shadow: 0 0 100px 0 rgba(225,235,255,0.4); }
+	  100% { box-shadow: 0 0 60px 0 rgba(200,220,255,0.6); }
+	}
+	@-o-keyframes tvflicker {
+	  0%   { box-shadow: 0 0 100px 0 rgba(225,235,255,0.4); }
+	  100% { box-shadow: 0 0 60px 0 rgba(200,220,255,0.6); }
+	}
+	@keyframes tvflicker {
+	  0%   { box-shadow: 0 0 100px 0 rgba(225,235,255,0.4); }
+	  100% { box-shadow: 0 0 60px 0 rgba(200,220,255,0.6); }
+	}
+}
+</style>
+
+<div id="container">
+  <div id="monitor">
+    <div id="monitorscreen">
+<video id="video" autoplay="" muted="" loop="" style="width:100%;" src="https://puikheid.nl/data/play-tv.mp4"></video>
+</div>
+  </div>
 </div>