Download raw (11.9 KB)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" media="all" href="styles-django.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* .date, .hour, .venue, .type, .contributor, .title, .note {
display: inline;
} */
body {
position: relative;
}
</style>
</head>
<body>
<header>
<section id="menu">
<div class="logo">
<a><img src="contour9-logo.png"/></a>
</div>
<nav>
<ul>
<li>
<a>Programme</a>
</li>
<li>
<a>Venue</a>
</li>
<li>
<a>Contributors</a>
</li>
<li>
<a>About</a>
</li>
</ul>
</nav>
</section>
<section id="timeline">
<span class="button full-moon">
<a href="">Full moon</a>
</span>
<figure>
<object data="timeline/timeline.svg" type="image/svg+xml"></object>
</figure>
</section>
<section id="time-travel">
<span class="button first-crescent">
<a href="">First crescent</a>
</span>
<span class="button last-crescent">
<a href="">Last crescent</a>
</span>
</section>
</header>
<main>
<section class="cycle loop content" id="full-moon">
<section class="loop-header">
<h3 class="loop-day-date">Fri. 17 May</h3>
<h3 class="loop-day-date">Sat. 18 May</h3>
<h3 class="loop-day-date">Sun. 19 May</h3>
</section>
<section class="loop-continuous">
<article id="thomas-more-installation-cadine-navarro" class="event">
<figure class="preview">
<img src="img/cloud/Cadine Navarro/IMG_6027.JPG">
</figure>
<time class="date">17 May → 31 May</time>
<span class="hour">10:00 - 16:00</span>
<span class="venue">Thomas More Hogeschool</span>
<span class="type">Installation </span>
<h4 class="title">Black Gold</h4>
<span class="contributor">Cadine Navarro</span>
</article>
<article id="thomas-more-installation-cadine-navarro" class="event">
<time class="date">17 May → 31 May</time>
<span class="hour">10:00 - 16:00</span>
<span class="venue">Thomas More Hogeschool</span>
<span class="type">Installation </span>
<span class="contributor">Maarten Vanden Eynde</span>
</article>
</section>
<section class="loop-days">
<section class="day" id="friday-17-may">
<article id="thomas-more-school-presentation" class="event" style="grid-row:2/span 12;">
<time datetime="2018-05-17T10:00">
<span class="date">Friday 17 May</span>
<span class="hour">10:00 - 16:00</span>
</time>
<span class="venue">Thomas More Hogeschool</span>
<span class="type">School presentations</span>
</article>
<article id="thomas-more-school-lecture-performance-mark-pozlep" class="event" style="grid-row:15/span 2;">
<figure class="preview">
<img src="img/cloud/Mark Pozlep/BFR_Mark Pozlep.jpg">
</figure>
<time class="date">Friday 17 May</time>
<span class="hour">16:30 - 18:00</span>
<span class="venue">Thomas More School to Zennegat</span>
<span class="type">Lecture performance</span>
<h4 class="title">Blueprint for revolution</h4>
<span class="contributor">Mark Pozlep</span>
</article>
<article id="zennegat-flotation-school" class="event" style="grid-row:18/span 4">
<figure class="preview">
<img src="img/cloud/Maria Lucia Cruz Correia/common-dreams.jpg">
</figure>
<time class="date">Friday 17 May</time>
<span class="hour">18:00 - 20:00</span>
<span class="venue">Zennegat</span>
<span class="type">Presentation from Flotation School</span>
<h4 class="title">Common Dreams “Flotation school“</h4>
<span class="contributor">Maria Lucia Cruz Correira</span>
</article>
<article id="nona-Presentation-picha" class="event" style="grid-row:24/span 2">
<figure class="preview">
<img src="img/cloud/Enough Room for Space/picha_logo.png">
</figure>
<time class="date">Fri. 17 May</time>
<span class="hour">21:00 - 22:00</span>
<span class="venue">Nona</span>
<span class="type">Presentation</span>
<span class="contributor">Picha / Narratives</span>
</article>
</section>
<section class="day" id="saturday-18-may">
<article id="nona-lecture-workshop-léopold-lambert" class="event" style="grid-row:4/span 4;">
<figure class="preview">
<img src="img/cloud/Léopold Lambert/TheFunambulistToxicAtmospheres1.JPG">
</figure>
<time class="date">Saturday 18 May</time>
<p class="hour">11:00 - 13:00</p>
<p class="venue">Nona - old foyer/cafe</p>
<p class="type">Lecture workshop</p>
<p class="title">Toxic Atmospheres</p>
<p class="contributor">Léopold Lambert</p>
</article>
<article id="nona-lunch-welcome-in-mechelen" class="event" style="grid-row:8/span 2;">
<time class="date">Saturday 18 May</time>
<p class="hour">13:00 - 14:00</p>
<p class="venue">Nona - new foyer</p>
<p class="type">Lunch by</p>
<p class="contributor">Welcome in Mechelen</p>
</article>
<article id="nona-film-screening-christian-nyampeta" class="event" style="grid-row:10/span 6;">
<time class="date">Saturday 18 May</time>
<p class="hour">14:00 - 17:00</p>
<p class="venue">Nona - old foyer/cafe</p>
<p class="type">Film screening + round table</p>
<p class="contributor">Christian Nyampeta</p>
</article>
<article id="ROJM-diner" class="event" style="grid-row:20/22;">
<time class="date">Saturday 18 May</time>
<p class="hour">19:00 - 20:00</p>
<p class="venue">ROJM</p>
<p class="type">Diner</p>
</article>
<article id="nona-film-screening-daniela-ortiz" class="event" style="grid-row:23/span 2;">
<figure class="preview">
<img src="img/cloud/Daniela Ortiz/Still_3.png">
</figure>
<time class="date">Saturday 18 May</time>
<p class="hour">20:30</p>
<p class="venue">Nona - old theater</p>
<p class="type">Film screening</p>
<p class="title">The empire of law</p>
<p class="contributor">Daniela Ortiz</p>
</article>
<article id="nona-concert-melvin-gibbs" class="event" style="grid-row:25/span 3;">
<time class="date">Saturday 18 May</time>
<p class="hour">21:30</p>
<p class="venue">Nona - new theater</p>
<p class="type">Concert</p>
<p class="contributor">Melvin Gibbs</p>
</article>
</section>
<section class="day" id="sunday-19-may">
<article id="nona-talk-picha-tradeoff" class="event" style="grid-row:10/span 8;">
<figure class="preview">
<img src="img/cloud/Enough Room for Space/mine-a-ciel-ouvert-noyee-de-banfora-2-lieu-dextraction-miniere-artisanale-2010-80x24048-cm.jpg">
</figure>
<time class="date">Sunday 19 May</time>
<p class="hour">14:00 - 18:00</p>
<p class="venue">Nona</p>
<p class="type">Lunar Talk </p>
<p class="title">"On Trade Off" project</p>
<p class="contributor">Picha / Enough Room for Space</p>
</article>
</section>
</section>
</section>
<!-- <section class="between-loops">
<div class="button last-crescent">
<a href="">Last
<br/>crescent</a>
</div>
<div class="accordeon">
<a href=""> </a>
</div>
</section> -->
</main>
<!-- <aside class="content" id="last-crescent">
<section class="day" id="friday-18-october">
<div class="bloc-date">
<time class="date">Friday 18 October</p>
</div>
<div class="content-continious">
</div>
</section>
<section class="day" id="saturday-19-october">
<div class="bloc-date">
<time class="date">Saturday 19 October</p>
</div>
<div class="content-continious">
</div>
</section>
<section class="day" id="sunday-20-october">
<div class="bloc-date">
<time class="date">Sunday 20 October</p>
</div>
<div class="content-continious">
</div>
</section>
</aside> -->
</main>
<script>
var entries = document.querySelectorAll('.event');
for (var i = 0; i < entries.length; i++) {
entries[i].addEventListener('click', function () {
this.classList.toggle('active');
var clone = this.cloneNode(true);
var container = document.querySelector('#container');
container.classList.add('active');
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
container.appendChild(clone);
});
}
var entries = document.querySelectorAll('.thumbnail');
for (var i = 0; i < entries.length; i++) {
entries[i].addEventListener('click', function (e) {
e.stopPropagation();
this.classList.toggle('active');
});
}
var entries = document.querySelectorAll('#last-crescent');
for (var i = 0; i < entries.length; i++) {
entries[i].addEventListener('click', function () {
this.classList.toggle('active');
});
}
</script>
<script src="raphael.min.js"></script>
<script>
function getTarget(segment) {
if (segment[0] == 'C') {
return [segment[5], segment[6]];
} else {
return [segment[1], segment[2]];
}
}
window.addEventListener('load', function () {
const timeline = document.querySelector('#timeline').contentDocument.rootElement,
paths = timeline.querySelectorAll('path'),
path = paths[5]; //document.querySelector('#timeline').contentDocument.createElement('path');
var segments = Raphael.parsePathString(paths[4].getAttribute('d'));
path.setAttribute("style", "stroke:#fff200; stroke-width:5.0;fill:none;");
s = 0;
loop = function () {
if (segments.length > 0) {
if (s > 0 && s == segments.length) {
s = 0;
loop();
} else if (segments[s][0] !== 'C') {
s++;
loop();
} else {
getTarget(segments[s])
path.setAttribute('d', 'M' + (getTarget(segments[s - 1])).join(' ') + segments[s].join(' ') + segments[s + 1].join(' '))
}
} else {
console.warn('Segments empty');
}
}
timeline.appendChild(path);
loop();
window.addEventListener('wheel', function (e) {
s += (e.deltaY > 0) ? 1 : -1;
loop();
})
});
</script>
</body>
</html>