---
navigable: true
title: Cammie
---

<section id="cammie-section" class="hero is-fullheight">
  <!-- Hero header: will stick at the top -->


  <!--
  <div id="cammie-body">
    <div id="left" class="ctrl">
      <%= fa 'chevron-left', size: '2x' %>
    </div>

    <div id="right" class="ctrl">
      <%= fa 'chevron-right', size: '2x' %>
    </div>

    <div id="up" class="ctrl">
      <%= fa 'chevron-up', size: '2x' %>
    </div>

    <div id="down" class="ctrl">
      <%= fa 'chevron-down', size: '2x' %>
    </div>
  </div>
  -->

  <div id="cammie-body">
    <img id="cammie-feed" src="https://kelder.zeus.ugent.be/webcam/video/mjpg.cgi?profileid=2">
    <div id="cammie-ctrls">
      <div class="top-row row">
        <div class="column ctrl diag left" data-x="-10" data-y="10">
          <%= fa 'chevron-circle-left' %>
        </div>
        <div class="column ctrl center" data-x="0" data-y="10">
          <%= fa 'chevron-circle-up' %>
        </div>
        <div class="column ctrl diag right" data-x="10" data-y="10">
          <%= fa 'chevron-circle-up' %>
        </div>
      </div>

      <div class="row middle-row">
        <div class="column ctrl left" data-x="-10" data-y="0">
          <%= fa 'chevron-circle-left' %>
        </div>
        <div class="column center">&nbsp;</div>
        <div class="column ctrl right" data-x="10" data-y="0">
          <%= fa 'chevron-circle-right' %>
        </div>
      </div>
      <div class="row bottom-row">
        <div class="column ctrl diag left" data-x="-10" data-y="-10">
          <%= fa 'chevron-circle-down' %>
        </div>
        <div class="column ctrl center" data-x="0" data-y="-10">
          <%= fa 'chevron-circle-down' %>
        </div>
        <div class="column ctrl diag right" data-x="10" data-y="-10">
          <%= fa 'chevron-circle-right' %>
        </div>
      </div>
    </div>
  </div>
  <!-- Hero footer: will stick at the bottom -->
  <div class="hero-foot">
    <nav class="tabs is-boxed is-fullwidth">
      <div class="container">
        <ul>
          <li><a>Kleine Tafel</a></li>
          <li><a>Grote Tafel</a></li>
          <li><a>Zetel</a></li>
        </ul>
      </div>
    </nav>
  </div>
</section>


<%= asset :js, :cammie %>