SocialDragon/socialdragon/templates/index.html
2017-05-12 14:04:18 +02:00

132 lines
3.1 KiB
HTML
Executable file

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>{{.title}}</title>
<style type="text/css">
@import 'https://fonts.googleapis.com/css?family=Roboto';
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: Roboto, "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #FFF;
text-transform: uppercase;
background: url('/static/img/bg.gif') 50% 0 no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#left {
/*min-width:40%;*/
width:100%;
height:100%;
float:left;
}
#right {
float:right;
width:42%;
overflow:hidden;
height:600px;
margin-top:auto;
margin-bottom:auto;
padding-top:7%;
padding-right:4%;
text-align:center;
}
#image {
vertical-align: middle;
margin-top: 0;
max-width: 100%;
overflow: hidden;
height: 100%;
}
h1 {
font-size: 60px;
}
#infotext {
font-size: 30px;
}
#othertext {
font-size: 26px;
}
</style>
</head>
<body>
<div id="left">
<div id="image">
<center>
<img style="max-height: 100%; background: green; display: inline-block; vertical-align: middle;" id="snapwall_image" src="" alt="" />
</center>
</div>
</div>
<div id="right">
<div id="infos">
<center><h1>HTL Ball 2017</h1></center>
<br /><br />
<div id="infotext">
Snapchat: HTLBall17
</div>
<div id="othertext">
Lorem ipsum dolor sit...<br />
</div>
</div>
</div>
<div style="clear:both"></div>
<script type="text/javascript">
var exampleSocket = new WebSocket("ws://192.168.2.108:8000/ws");
exampleSocket.onopen = function (event) {
console.log("WS: Connection open!");
console.log("Proto: " + exampleSocket.protocol);
exampleSocket.send("Here's some text that the server is urgently awaiting!");
};
exampleSocket.onmessage = function (event) {
IT = JSON.parse(event.data);
document.getElementById("snapwall_image").src = IT["Path"];
console.log(event.data);
}
</script>
<script type="text/javascript">
/*
var currentImage;
function HTTPGetRequest() {
if (!window.XMLHttpRequest) {
return;
}
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var parts = xmlhttp.responseText.split(" ");
if(parts[0] == "l") { // landscape pic
document.getElementById("image").style.marginTop = '-140px';
document.getElementById("left").style.paddingLeft = '1%';
document.getElementById("left").style.minWidth = '52%';
} else if(parts[0] == "p") { // portrait pic
document.getElementById("image").style.marginTop = '0px';
}
if(parts[1] != currentImage) { // if new image different from current image
document.getElementById("snapwall_image").src = parts[1];
currentImage = xmlhttp.responseText;
}
}
}
xmlhttp.open("GET","image.txt",true);
xmlhttp.send();
}
setInterval(function() {
HTTPGetRequest();
}, 7000); // 7 seconds
*/
</script>
</body>
</html>