Puik./puikheid.nl
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

puik.tv

Browse Source
This commit is contained in:
dreamer 2021-05-15 01:45:47 +02:00
parent e9bb401170
commit 7c946cbb9d
1 changed files with 81 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
code/views/root.etlua
View File

@ -1,5 +1,82 @@
<div class="root"> <style>
<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"> body {
</video> 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> </div>