130 lines
3 KiB
HTML
130 lines
3 KiB
HTML
|
<!DOCTYPE HTML>
|
||
|
<html>
|
||
|
<head>
|
||
|
<meta charset="utf-8">
|
||
|
<title>Snapchat Wall</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="/snaps/approved/IMAGE_HERE" alt="" />
|
||
|
</center>
|
||
|
</div>
|
||
|
</div><!--
|
||
|
<div id="right">
|
||
|
<div id="infos">
|
||
|
<center><h1>Social Wall</h1></center>
|
||
|
<br /><br />
|
||
|
<div id="infotext">
|
||
|
</div>
|
||
|
<div id="othertext">
|
||
|
Other text...<br />
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>-->
|
||
|
<div style="clear:both"></div>
|
||
|
|
||
|
<script type="text/javascript">
|
||
|
var exampleSocket = new WebSocket("ws://127.0.0.1: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) {
|
||
|
console.log("WS Message:");
|
||
|
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>
|