Commit 9944aed9 authored by JBG's avatar JBG

html files

parent 7c80d132
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="3600">
<style>
* {
margin: 0;
}
body {
background: #fff;
overflow: hidden;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
}
p, span {
position: absolute;
}
p {
font-size: 16px;
}
span {
top: 100px;
color: #aaa;
font-size: 10px;
}
.mountain {
position: absolute;
bottom: 0;
border-left: 160px solid transparent;
border-right: 150px solid transparent;
/* border-bottom: 180px solid #7ac1e4; */
border-bottom: 180px solid #000;
}
.mountain-top {
position: absolute;
right: -65px;
border-left: 69px solid transparent;
border-right: 65px solid transparent;
/* border-bottom: 77px solid #ceeaf6; */
border-bottom: 77px solid #aaa;
z-index: 2;
}
.mountain-cap-1, .mountain-cap-2, .mountain-cap-3 {
position: absolute;
top: 70px;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
/* border-top: 25px solid #ceeaf6; */
border-top: 25px solid #aaa;
}
.mountain-cap-1 { left: -55px; }
.mountain-cap-2 { left: -25px; }
.mountain-cap-3 { left: 5px; }
.cloud, .cloud:before, .cloud:after {
position: absolute;
width: 70px;
height: 30px;
background: #aaa;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
.cloud {
bottom: 100px;
-webkit-animation: cloud 50s infinite linear;
animation: cloud 50s infinite linear;
}
@-webkit-keyframes cloud {
0% { left: -100px; }
100% { left: 2000px; }
}
@keyframes cloud {
0% { left: -100px; }
100% { left: 2000px; }
}
.cloud:before {
content: '';
left: 50px;
}
.cloud:after {
content: '';
left: 25px;
top: -10px;
}
#scale {
position: absolute;
height: 100%;
width: 20px;
background: #000;
}
ol {
height: 100%;
}
li {
height: 33%;
border-bottom: 1px dotted #aaa;
padding-top: 20px;
padding-left: 20px;
}
.vertical-text.left {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
position: absolute;
right: -91px;
}
.vertical-text {
color: #fff;
width: 200px;
position: relative;
text-align: center;
overflow: visible;
text-transform: uppercase;
top: 50%;
white-space: nowrap;
font-size: 12px;
}
</style>
</head>
<body>
<div id="scale">
<h1 class="vertical-text left">URL Chattiness</h1>
<ol>
<li>High</li>
<li>Medium</li>
<li>Low</li>
</ol>
</div>
<script>
(function() {
var mountains = {};
// add a mountain to the DOM - JBG
var addMountain = function(obj) {
var mtnElem = document.createElement('div');
mtnElem.id = obj.url;
mtnElem.classList.add('mountain');
mtnElem.style.left = Math.floor((Math.random() * (window.innerWidth - 180)) + 1) + 'px';
mtnElem.style.opacity = Math.random() + .1;
var clearFix = document.createElement('div');
clearFix.style.clear = 'both';
var mtnTop = document.createElement('div');
mtnTop.classList.add('mountain-top');
var mtnCap1 = document.createElement('div');
mtnCap1.classList.add('mountain-cap-1');
var mtnCap2 = document.createElement('div');
mtnCap2.classList.add('mountain-cap-2');
var mtnCap3 = document.createElement('div');
mtnCap3.classList.add('mountain-cap-3');
var span = document.createElement('span');
span.innerHTML = obj.names;
span.style.top = (Math.floor(Math.random() * 100) - 10) + 'px';
var p = document.createElement('p');
p.innerHTML = obj.url;
p.style.top = (Math.floor(Math.random() * 200) - 100) + 'px';
document.body.appendChild(mtnElem);
mtnTop.appendChild(span);
mtnElem.appendChild(mtnTop);
mtnTop.appendChild(mtnCap1);
mtnTop.appendChild(mtnCap2);
mtnTop.appendChild(mtnCap3);
mtnTop.appendChild(p);
var mountain = { names: [ obj.name ], count: 0, date: obj.date };
mountains[obj.url] = mountain;
return mountain;
};
// Process an incoming ws obj - JBG
var process = function(obj) {
var mountain = mountains[obj.url];
if(!mountain) {
mountain = addMountain(obj);
} else {
if(mountain.names.indexOf(obj.name) == -1) {
mountain.names.push(obj.name);
if(mountain.names.length > 10) {
mountain.names = mountain.names.shift();
}
}
mountain.date = obj.date;
}
mountain.count += 1;
var mountElem = document.getElementById(obj.url);
var scale = (1 + (mountain.count / 100));
mountElem.style.transform = 'scale(' + scale + ', ' + scale + ')';
var span = mountElem.querySelector('span');
span.innerHTML = mountain.names;
};
// Websocket stuff - JBG
var ws = new WebSocket('ws://192.168.0.201:8000');
ws.onopen = function(e) {
console.log('Websocket open.');
};
ws.onclose = function(e) {
console.log('Websocket closed.');
};
ws.onerror = function(e) {
console.log('Websocket errored.');
};
ws.onmessage = function(e) {
//console.log(e.data);
var fr = new FileReader();
fr.onload = function() {
console.log(fr.result);
var obj = JSON.parse(fr.result);
process(obj);
};
fr.readAsText(e.data);
};
// Slowly shrink the mountains and remove them over time - JBG
setInterval(function() {
for(var url in mountains) {
var mountain = mountains[url];
var delta = new Date().getTime() - (mountain.date * 1000);
if(delta > 30000) {
var mountElem = document.getElementById(url);
mountain.count -= 1;
if(mountain.count < 0) {
mountElem.parentElement.removeChild(mountElem);
delete mountains[url];
} else {
var scale = mountain.count / 100;
mountElem.style.transform = 'scale(' + (1 + scale) + ', ' + (1 + scale) + ')';
}
}
}
}, 1000 * 60);
})();
</script>
<div class="cloud"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="3600">
<style>
* {
margin: 0;
}
body {
background: #fff;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
}
#images {
postion:absolute;
z-index: -1;
width: 100%;
height: 100%;
overflow: hidden;
}
img {
position: absolute;
opacity: 0.25;
}
p {
position: absolute;
font-weight: bold;
font-size: 32px;
margin: 10px;
}
</style>
</head>
<body>
<div id="images"></div>
<p></p>
<script>
(function() {
var images = [
"images/1931_lugosi_frankenstein.jpg",
"images/1_Fantasmagoriana.jpg",
"images/298px-Frankenstein_Meets_the_Wolf_Man_movie_poster.jpg",
"images/2_The_Vampyre_by_Polidori.jpg",
"images/393px-Frankconquers.jpg",
"images/450px-Frankenstein_day_of_the_beast.jpg",
"images/770px-Poster_-_Frankenstein_02.jpg",
"images/7_Inhabitant_of_the_Hollow_Earth.jpg",
"images/8_Castle_Frankenstein.jpeg",
"images/9_Frk_at_Museo_Nazionale_del_Cinema,_Turin.jpg",
"images/A&cfrank.jpg",
"images/A_Galvanised_Corpse.jpg",
"images/Black_frankenstein.jpg",
"images/Bride_gip.jpg",
"images/Brideoffrankenstein.jpg",
"images/Brideoffrankposter.jpg",
"images/Charles_Ogle_In_Frankenstein_1910.jpg",
"images/Curseoffrankenstein.jpg",
"images/Evilofrankenstein.jpg",
"images/Fleshforfrankensteinposter.jpg",
"images/Frankcreatedwoman.jpg",
"images/Frankenhooker.jpg",
"images/Frankenstein1910.jpg",
"images/Frankenstein_(2004_film).jpg",
"images/Frankenstein_Conquers_the_World_1965.jpg",
"images/Frankenstein_Cooke_1823.jpg",
"images/Frankenstein_engraving_1831.jpg",
"images/Frankensteinhouse.jpg",
"images/Frankenstein_kinetogram.jpg",
"images/Frankenstein_(miniseries).jpg",
"images/FRANKENSTEIN_MUST_BE_DESTROYED_POSTER.jpg",
"images/Frankenstein_observing_the first_stirrings_of_his_creature.jpg",
"images/Frankenstein_poster_1931.jpg",
"images/Frankenstein's_Army_DVD_cover.jpg",
"images/Frankenstein's_monster_(Boris_Karloff).jpg",
"images/FrankensteinTheTrueStory.jpg",
"images/Frankenstein-tv-1992.jpg",
"images/Frankenstein_Unbound_FilmPoster.jpeg",
"images/Frankenweenie_(1984_film)_poster.jpg",
"images/Galvani-frogs-legs-electricity.jpg",
"images/Gespensterbuch_Vol._1_-_Title_Page_Engraving.png",
"images/Giovanni_Aldini,_galvanism_experiments.jpg",
"images/Gothic-1986-poster.png",
"images/HotelTransylvania.jpg",
"images/HouseOfDracTC.jpg",
"images/House_of_Frankenstein_(Strange_and_Karloff).jpg",
"images/I_Frankenstein_Poster.jpg",
"images/Inhabitant_of_the_Hollow_Earth.jpg",
"images/I-was-teenage-frankenstein.jpg",
"images/L_Frankenstein.jpg",
"images/Life_preserving_coffin.jpg",
"images/Luigi_Galvani_Experiment.jpeg",
"images/MaryShelley.jpg",
"images/Mary_Shelley's_Frankenstein_(1994)_theatrical_poster.jpg",
"images/POSTER_-_MAD_MONSTER_PARTY.jpg",
"images/Revengetitle.jpg",
"images/Son_of_Frankenstein_movie_poster.jpg",
"images/Thebrideposter.jpg",
"images/The_Ghost_of_Frankenstein_movie_poster.jpg",
"images/The_Horror_of_Frankenstein_FilmPoster.jpeg",
"images/Victor_Frankenstein_2015.jpg",
"images/Young_Frankenstein_movie_poster.jpg"
];
var stories = {};
// Process an incoming ws obj - JBG
var process = function(obj) {
stories[obj.name] = obj.story;
};
// Websocket stuff - JBG
var ws = new WebSocket('ws://192.168.0.201:8000');
ws.onopen = function(e) {
console.log('Websocket open.');
};
ws.onclose = function(e) {
console.log('Websocket closed.');
};
ws.onerror = function(e) {
console.log('Websocket errored.');
};
ws.onmessage = function(e) {
//console.log(e.data);
var fr = new FileReader();
fr.onload = function() {
var obj = JSON.parse(fr.result);
process(obj);
};
fr.readAsText(e.data);
};
setInterval(function() {
showImages();
if(Object.keys(stories).length > 0) {
var keys = Object.keys(stories);
var index = Math.floor(keys.length * Math.random());
//console.log(index);
var key = keys[index];
var story = stories[key];
var p = document.querySelector('p');
p.innerHTML = story;
delete stories[key]
}
}, 1000 * 60 * 2);
setTimeout(function() {
showImages();
}, 1000 * 10);
var showImages = function() {
var imgElems = document.querySelectorAll('img');
for(var i = 0; i < imgElems.length; i++) {
var elem = imgElems[i];
elem.parentElement.removeChild(elem);
}
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = (d.innerWidth || e.clientWidth || g.clientWidth) - 160,
y = d.innerHeight || w.innerHeight || e.clientHeight|| g.clientHeight;
for(var i = 0; i < 5; i++) {
var img = images[Math.floor(images.length * Math.random())];
var div = document.querySelector('#images');
var image = document.createElement('img');
image.src = img;
image.style.top = '' + Math.random() * (y) + 'px';
image.style.left = '' + Math.random() * (x) + 'px';
div.appendChild(image);
}
}
})();
</script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment