Kiosk Event Schedule — A Concept

<main>
  <section v-for="(day, index) in schedule">
    <header>
      Day {{index+1}} &mdash; {{day.date | date}}
    </header>
    <ul>
      <li v-for="slot in day.agenda" v-bind:class="{ current: checkTime(slot.range[0], slot.range[1]) }">
        <h3><b>{{slot.display.h}}</b>{{slot.display.m}}{{slot.display.a}}</h3>
        <div v-html="slot.desc"></div>
        <div><small v-html="slot.location"></small></div>
      </li>
      <li class="after-hours">
        <div>
          <b>Day {{index+1}}</b>
          <br />Before / After Hours
          <br /><small><small>Click the Event Scroller</small></small>
        </div>
      </li>
    </ul>
  </section>
</main>
<aside>
  <div class="clock">
    <h3>{{time}}</h3>
  </div>
  <div class="control" v-bind:class="{ show: showTimeTraveller }">
    <header v-on:click="showTimeTraveller = !showTimeTraveller">
      <div><b>Event Scroller</b></div>
      <button><span>_</span></button>
    </header>
    <div>
      <p><input type="range" min="0" max="23.9" step="0.1" v-model="now" id="traveler" /></p>
      <p>To-do: Multi-day Traversing</p>
    </div>
  </div>
  <h1>Coinvention</h1>
  <svg class="logo" viewBox="0 0 300 300">
    <path d=""></path>
    <path d="M177.832 138.417 C 162.089 155.760,169.908 184.435,192.333 191.598 C 220.200 200.501,244.954 171.302,231.731 145.126 C 230.159 142.014,225.344 135.864,224.868 136.360 C 224.457 136.787,220.000 144.673,220.000 144.974 C 220.000 145.171,220.521 146.057,221.158 146.944 C 229.404 158.421,225.273 174.618,212.513 180.845 C 191.460 191.117,170.367 166.950,183.391 147.478 C 184.305 146.111,185.004 144.878,184.943 144.739 C 184.482 143.671,180.119 136.338,179.945 136.336 C 179.823 136.335,178.872 137.271,177.832 138.417 M219.344 264.250 L 219.333 277.000 220.828 277.000 L 222.323 277.000 222.411 268.046 L 222.500 259.093 231.654 268.713 C 236.688 274.004,240.851 278.333,240.904 278.333 C 240.957 278.333,241.000 272.558,241.000 265.500 L 241.000 252.667 239.500 252.667 L 238.000 252.667 237.996 261.750 L 237.991 270.833 234.903 267.667 C 233.205 265.925,229.012 261.575,225.585 258.000 L 219.355 251.500 219.344 264.250 M322.000 264.333 L 322.000 277.000 323.495 277.000 L 324.989 277.000 325.078 267.992 L 325.167 258.985 334.288 268.576 C 339.305 273.851,343.542 278.217,343.705 278.278 C 343.873 278.341,344.000 272.859,344.000 265.528 L 344.000 252.667 342.339 252.667 L 340.677 252.667 340.589 261.679 L 340.500 270.692 331.500 261.208 C 326.550 255.992,322.387 251.711,322.250 251.695 C 322.112 251.680,322.000 257.367,322.000 264.333 M66.000 252.437 C 53.266 255.346,52.827 273.841,65.412 277.192 C 67.774 277.820,71.216 277.787,73.295 277.116 L 75.000 276.565 75.000 273.140 L 75.000 269.715 73.103 270.858 C 68.374 273.705,62.785 271.013,62.401 265.704 C 61.905 258.847,69.321 255.118,74.250 259.745 L 75.000 260.450 75.000 256.923 L 75.000 253.396 73.454 252.869 C 71.276 252.127,68.150 251.946,66.000 252.437 M93.927 252.324 C 81.719 254.530,79.781 272.189,91.251 276.708 C 100.075 280.183,109.551 274.686,109.955 265.858 C 110.375 256.687,103.220 250.645,93.927 252.324 M295.095 252.799 C 281.361 257.271,284.693 277.455,299.167 277.455 C 315.817 277.455,316.308 252.926,299.667 252.435 C 297.643 252.375,295.993 252.506,295.095 252.799 M119.667 264.833 L 119.667 277.000 122.500 277.000 L 125.333 277.000 125.333 264.833 L 125.333 252.667 122.500 252.667 L 119.667 252.667 119.667 264.833 M136.000 264.833 L 136.000 277.000 138.827 277.000 L 141.654 277.000 141.744 269.457 L 141.833 261.914 148.142 269.457 L 154.451 277.000 157.059 277.000 L 159.667 277.000 159.667 264.833 L 159.667 252.667 156.840 252.667 L 154.013 252.667 153.923 260.237 L 153.833 267.807 147.500 260.246 L 141.167 252.685 138.583 252.676 L 136.000 252.667 136.000 264.833 M167.976 253.417 C 168.137 253.829,170.249 259.342,172.669 265.667 C 175.089 271.992,177.208 277.525,177.377 277.963 C 177.547 278.401,177.757 278.688,177.844 278.600 C 178.049 278.396,187.665 253.249,187.666 252.917 C 187.667 252.477,184.416 252.635,184.250 253.083 C 184.165 253.313,182.700 257.294,180.994 261.930 C 179.289 266.567,177.790 270.242,177.663 270.097 C 177.536 269.952,176.022 265.972,174.299 261.252 L 171.167 252.670 169.425 252.668 C 167.754 252.667,167.695 252.697,167.976 253.417 M196.333 264.833 L 196.333 277.000 202.667 277.000 L 209.000 277.000 209.000 275.667 L 209.000 274.333 204.167 274.333 L 199.333 274.333 199.333 269.833 L 199.333 265.333 204.167 265.333 L 209.000 265.333 209.000 263.833 L 209.000 262.333 204.167 262.333 L 199.333 262.333 199.333 258.833 L 199.333 255.333 204.167 255.333 L 209.000 255.333 209.000 254.000 L 209.000 252.667 202.667 252.667 L 196.333 252.667 196.333 264.833 M249.667 254.000 L 249.667 255.333 252.667 255.333 L 255.667 255.333 255.667 266.167 L 255.667 277.000 257.167 277.000 L 258.667 277.000 258.667 266.167 L 258.667 255.333 261.667 255.333 L 264.667 255.333 264.667 254.000 L 264.667 252.667 257.167 252.667 L 249.667 252.667 249.667 254.000 M273.333 264.833 L 273.333 277.000 274.833 277.000 L 276.333 277.000 276.333 264.833 L 276.333 252.667 274.833 252.667 L 273.333 252.667 273.333 264.833 M302.916 256.001 C 310.287 259.257,310.697 269.590,303.611 273.515 C 299.685 275.690,294.425 274.521,291.627 270.852 C 285.599 262.949,293.906 252.022,302.916 256.001 M99.836 258.288 C 102.658 259.570,104.178 262.320,103.933 265.704 C 103.314 274.263,90.353 274.263,89.734 265.704 C 89.316 259.925,94.715 255.962,99.836 258.288 " transform="translate(159.603449, 185.823334) rotate(180.000000) translate(-159.603449, -185.823334)"></path>
  </svg>
</aside>