schedule.pug

doctype html
html(ng-app='app')

  head
    meta(charset='utf-8')
    title Schedule | IC HealthHack
    link(rel="icon",href="images/favicon.png")
    meta(name='description', content="Hub for participants of IC HealthHack 2017")
    meta(name='viewport', content='width=device-width, initial-scale=1.0')
    meta(name='theme-color', content='#40ad6a')
    link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css')
    link(href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css', rel='stylesheet')
    link(rel='stylesheet', href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css')
    link(rel='stylesheet', href='css/styles.css')
    link(rel='stylesheet', href='css/marquee.css')

  body.bg-faded(ng-controller='scheduleCtrl')

    include includes/navbar

    section#one
      .container
        .row
          .col-lg-10
            h2 Live Schedule
          .col-lg-2.text-right
            h2#currentTime Time
        br
      .container.wow.fadeInUp
        .card-group#schedule
          .col-lg-4(ng-repeat="r in records | orderBy:'startTime' | limitTo:3").no-padding
            .card
              img.card-img-top.img-fluid(ng-src='{{r.photo}}')
              .card-block
                h4.card-title {{r.title}}
                h6 {{r.startTime | date:'MMM d, y h:mm a'}}
                h6 {{r.location}}
              .bg-success.text-white.text-center.status(ng-if='r.ongoing')
                h6  Ongoing
              .bg-primary.text-white.text-center.status(ng-if='!r.ongoing')
                h6  Upcoming


      br
      .container.wow.fadeInUp
        .col-lg-12.ticker.bg-inverse.text-white.round
          .marquee.marquee-speed-slow#ticker(data-marquee="Announcements will go here")


    section#two.bg-alt
      .container
         h2 Up Next
      br
      .container.wow.fadeInUp
        .card-group#schedule
          .col-lg-4(ng-repeat="r in records | orderBy:'startTime' | startFrom:3").no-padding
            .card
              img.card-img-top.img-fluid(ng-src='{{r.photo}}')
              .card-block
                h5.card-title {{r.title}}
                h6 {{r.startTime | date:'MMM d, y h:mm a'}}
                h6 {{r.location}}
              .bg-success.text-white.text-center.status(ng-if='r.ongoing')
                h6  Ongoing

    include includes/contact

    // scripts loaded here
    script(src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js')
    script(src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js')
    script(src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js')
    script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js')
    script(src='https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js')
    script(src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js')
    script(src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.js')
    script(src='https://www.gstatic.com/firebasejs/3.6.6/firebase.js')
    script(src='js/moment.js')
    script(src='js/moment-timezone-2010-2020.min.js')
    script(src='js/scripts.js')
    script(src='js/app.js')
    script.
      function updateClock() {
        var time = moment().tz("Europe/London").format("hh:mm A");
        document.getElementById('currentTime').innerHTML = time;
        setTimeout(updateClock, 1000);
      }
      updateClock();