contour
clone your own copy | download snapshot

Snapshots | iceberg

Inside this repository

home-django.html
text/html

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="">&nbsp;</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>