alleswatikvoel/templates/index.html

173 lines
4.8 KiB
HTML
Raw Normal View History

2017-03-06 21:11:00 +01:00
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QAdwB3AHctbh3qAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QMFFQkN1CxOCgAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAXElEQVRo3u3YQRHAIAxFwVAT1L85gopgoNdc6D4DmZ1/y8hcFc3N+XafiCcuCQQEBAQEBAQEBAQEBAQEBATkV5BRVe0Pur3TIiAgICAgICAgICAgICAgICAgIB8dr84LFaZAYuYAAAAASUVORK5CYII=');
font-family: monospace;
font-size: 12pt;
}
body.loading #colourImage{
opacity: 0;
transition: opacity .4s;
}
#main svg{
z-index: -1;
position: absolute;
left:0;top:0;right:0;bottom: 0;
}
aside ul{
list-style: none;
}
aside ul li{
padding: 0.1em;
cursor: pointer;
}
aside ul li span{
background:#ff0;
transition: max-width 0.5s;
max-width: 0%;
display: inline-block;
overflow: visible;
}
aside ul li:hover span{
max-width: 100%;
}
aside ul li.selected span{
max-width: 100%;
}
aside#selects{
float:left;
}
aside#stats{
float:right;
}
#spinner{
display:none;
}
body.loading #spinner{
display: block;
animation: rotate 3s infinite linear;
}
/* Standard syntax */
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
</style>
</head>
<body>
<aside id='selects'>
<h3>Toon op basis van...</h3>
<h4>groep</h4>
<ul>
{% for group in groups %}
<li data-param="group" data-id="{{group.id}}"><span>{{group.name.replace(" ", "&nbsp;")}}</span></li>
{% end %}
</ul>
<h4>leeftijd</h4>
<ul>
{% for age in ages %}
<li data-param="age" data-id="{{age}}"><span>{{age}}&nbsp;jaar</span></li>
{% end %}
</ul>
<h4>emotie</h4>
<ul>
{% for emotion in emotions %}
<li data-param="emotion" data-id="{{emotion.id}}"><span>{{emotion.name}}</span></li>
{% end %}
</ul>
<ul>
<li data-param="no" data-id="thing"><span>toon&nbsp;alles</span></li>
</ul>
<!-- <h4>Kleur???</h4> -->
</aside>
<aside id='works'>
</aside>
<aside id='stats'>
<h4>Emoties</h4>
<h4>Licht/donker</h4>
</aside>
<div id='main'>
<svg viewBox="-160 -160 320 320" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:100%">
<defs>
<mask id="mask1" x="0" y="0" width="100" height="100" >
<circle r='155' cx="0" cy="0" style='fill:white;' />
<circle r='50' cx="0" cy="0" style="fill:black" />
</mask>
</defs>
<circle r='155' cx="0" cy="0" style='stroke:none;fill:rgba(0,0,0,0.1);mask: url(#mask1);' />
</svg>
<svg id="spinner" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1000 1000" style="width:5%;height:5%;top:47.5%;left:47.5%;">
<g><path d="M500,964.2c-130.9,0-253.9-51-346.5-143.5C61,728.1,10,605.1,10,474.2c0-92.7,26-182.9,75.2-261C133.1,137.3,200.7,76,280.8,35.8l41.2,82.1c-65.1,32.6-120.1,82.5-159,144.2c-40,63.4-61.1,136.6-61.1,212c0,219.5,178.6,398.1,398.1,398.1c219.5,0,398.1-178.6,398.1-398.1c0-75.3-21.1-148.6-61.1-212c-38.9-61.7-93.9-111.6-159-144.2l41.2-82.1C799.3,76,866.9,137.3,914.8,213.2c49.2,78.1,75.2,168.3,75.2,261c0,130.9-51,253.9-143.5,346.5C753.9,913.2,630.9,964.2,500,964.2z"/></g>
</svg>
<svg viewBox="-160 -160 320 320" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:100%" id="colourImage">
</svg>
</div>
<script type="text/javascript">
function updateProgress(evt)
{
console.log(evt);
}
function transferComplete(evt, r)
{
// console.log(evt);
var div = document.createElement('div');
div.innerHTML = evt.target.response;
document.getElementById('colourImage').innerHTML = div.children[0].innerHTML;
document.body.classList.remove('loading');
}
function transferFailed(evt)
{
console.log(evt);
}
function transferCanceled(evt)
{
console.log(evt);
}
var links = document.getElementById('selects').getElementsByTagName("li");
for(let link of links)
{
link.onclick = function() {
document.body.classList.add('loading');
// document.getElementById('colourImage').innerHTML = "";
console.log('click',this.dataset.param, this.dataset.id);
var oReq = new XMLHttpRequest();
oReq.addEventListener("progress", updateProgress);
oReq.addEventListener("load", transferComplete);
oReq.addEventListener("error", transferFailed);
oReq.addEventListener("abort", transferCanceled);
oReq.open("GET", "/colours?"+this.dataset.param+"="+this.dataset.id+"&elId=colourImage");
oReq.send()
for(let unsetLink of links) {
unsetLink.classList.remove('selected');
}
this.classList.add('selected');
}.bind(link)
}
// var colourImage = document.getElementById('colourImage');
// var i = 0;
// for(let circle of colourImage.children) {
// i++;
// // console.log(circle);
// setTimeout(function() {
// this.remove();
// }.bind(circle), i * 3);
// }
</script>
</body>
</html>