277 lines
No EOL
7 KiB
HTML
277 lines
No EOL
7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Alles wat ik voel - Stine Jensen - Ruben van de Ven - St. Jan</title>
|
|
<style type="text/css">
|
|
body{
|
|
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QAdwB3AHctbh3qAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QMFFQkN1CxOCgAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAXElEQVRo3u3YQRHAIAxFwVAT1L85gopgoNdc6D4DmZ1/y8hcFc3N+XafiCcuCQQEBAQEBAQEBAQEBAQEBATkV5BRVe0Pur3TIiAgICAgICAgICAgICAgICAgIB8dr84LFaZAYuYAAAAASUVORK5CYII=');
|
|
font-family: monospace;
|
|
font-size: 12pt;
|
|
height:100%;
|
|
margin:0;
|
|
}
|
|
body.loading #colourImage{
|
|
opacity: 0;
|
|
transition: opacity .4s;
|
|
}
|
|
#main svg{
|
|
z-index: -1;
|
|
position: absolute;
|
|
left:0;top:0;right:0;bottom: 0;
|
|
}
|
|
#main svg circle:hover{
|
|
stroke:yellow;
|
|
}
|
|
svg.hoverTitles text{
|
|
/*display:none;*/
|
|
opacity: 0.2;
|
|
}
|
|
svg.hoverTitles path:hover + text{
|
|
/*display:block;*/
|
|
opacity: 1;
|
|
z-index:9;
|
|
font-size:110%;
|
|
/*fill:yellow;*/
|
|
}
|
|
aside{
|
|
padding:0.3em;
|
|
}
|
|
aside ul{
|
|
list-style: none;
|
|
}
|
|
aside ul li{
|
|
padding: 0.1em;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
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;
|
|
margin-bottom: 3em;
|
|
}
|
|
|
|
aside#works{
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
position: fixed;
|
|
bottom: -2em;
|
|
transition: bottom 0.5s ease;
|
|
left: 0;
|
|
right: 0;
|
|
/*justify-content: center; /*Screws up with overflow-y*/
|
|
/*height: 1em;*/
|
|
}
|
|
aside#works:hover{
|
|
bottom:0;
|
|
}
|
|
aside#works img, aside#works .group{
|
|
margin-right: 0.4em;
|
|
flex: 0 0 auto;
|
|
height:4em;
|
|
/*transition: height 0.5s ease;*/
|
|
cursor: pointer;
|
|
box-shadow: 0 0 0.2em rgba(0,0,0,0.5);
|
|
}
|
|
aside#works:hover img{
|
|
/*height:7em;*/
|
|
}
|
|
aside#works .group{
|
|
background: black;
|
|
color: white;
|
|
padding: 1.5em;
|
|
box-sizing: border-box;
|
|
}
|
|
aside#works .group:hover{
|
|
background:yellow;
|
|
color:black;
|
|
}
|
|
|
|
aside#stats{
|
|
float:right;
|
|
text-align: center;
|
|
padding-right:1em;
|
|
}
|
|
aside#stats svg{
|
|
width:20em;
|
|
height:20em;
|
|
}
|
|
|
|
#spinner{
|
|
display:none;
|
|
}
|
|
body.loading #spinner{
|
|
display: block;
|
|
animation: rotate 3s infinite linear;
|
|
}
|
|
|
|
#detail{
|
|
position:absolute;
|
|
width:20em;
|
|
margin-left:-10em;
|
|
background:rgba(0,0,0,0.8);
|
|
border-radius: 1em;
|
|
display: none;
|
|
overflow: hidden;
|
|
padding:0;
|
|
}
|
|
#detail.active{
|
|
display:block;
|
|
}
|
|
#detail img{
|
|
width:100%;
|
|
}
|
|
|
|
/* Standard syntax */
|
|
@keyframes rotate {
|
|
from {transform: rotate(0deg);}
|
|
to {transform: rotate(360deg);}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<aside id='selects'>
|
|
<h3>Alles wat ik voel</h3>
|
|
<!-- <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(" ", " ")}}</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 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:95%">
|
|
<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:95%" id="colourImage">
|
|
</svg>
|
|
</div>
|
|
|
|
<div id='detail'><img id='detail-img' src=''></div>
|
|
|
|
<script type="text/javascript">
|
|
function updateProgress(evt)
|
|
{
|
|
console.log(evt);
|
|
}
|
|
function transferComplete(evt, r)
|
|
{
|
|
var div = document.createElement('div');
|
|
div.innerHTML = evt.target.response;
|
|
document.getElementById('colourImage').innerHTML = div.children[0].innerHTML;
|
|
document.getElementById('works').innerHTML = div.children[1].innerHTML;
|
|
document.getElementById('stats').innerHTML = div.children[2].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");
|
|
|
|
function loadResults(type, value)
|
|
{
|
|
document.body.classList.add('loading');
|
|
// document.getElementById('colourImage').innerHTML = "";
|
|
var oReq = new XMLHttpRequest();
|
|
oReq.addEventListener("progress", updateProgress);
|
|
oReq.addEventListener("load", transferComplete);
|
|
oReq.addEventListener("error", transferFailed);
|
|
oReq.addEventListener("abort", transferCanceled);
|
|
oReq.open("GET", "/colours?"+type+"="+value);
|
|
oReq.send()
|
|
|
|
for(let unsetLink of links) {
|
|
if(unsetLink.dataset.param == type && unsetLink.dataset.id == value) {
|
|
unsetLink.classList.add('selected');
|
|
} else {
|
|
unsetLink.classList.remove('selected');
|
|
}
|
|
}
|
|
}
|
|
|
|
for(let link of links)
|
|
{
|
|
link.onclick = function() {
|
|
loadResults(this.dataset.param, this.dataset.id);
|
|
}.bind(link)
|
|
}
|
|
|
|
loadResults("no", "thing");
|
|
|
|
function triggerover(layerId, el)
|
|
{
|
|
let url = '/images/'+layerId+'.png';
|
|
let position = el.getBoundingClientRect();
|
|
let detailEl = document.getElementById('detail');
|
|
document.getElementById('detail-img').src = url;
|
|
|
|
|
|
el.onmouseout = triggerout;
|
|
// show below icon if higher item, otherwise above it.
|
|
if(el.attributes.cy.value <= 0) {
|
|
detailEl.style.top = (position.top + position.height + window.scrollY) + 'px';
|
|
detailEl.style.bottom = 'auto';
|
|
} else {
|
|
detailEl.style.top = 'auto';
|
|
detailEl.style.bottom = 'calc(100% - ' + ( position.top + window.scrollY ) + 'px)';
|
|
}
|
|
detailEl.style.left = (position.left - position.width/2) + 'px';
|
|
detailEl.classList.add('active');
|
|
}
|
|
|
|
function triggerout()
|
|
{
|
|
document.getElementById('detail').classList.remove('active');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |