templates/stream.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="refresh" content="300">
  <!-- Enters full screen mode if installed as app on IOS/Android Devices -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
  <title>FutureBoard</title>

  <!-- load vendor js -->
  <script src='/static/vendor/socket.io.js' charset="UTF-8" type="text/javascript"></script>
  <script src='/static/vendor/jquery.min.js' charset="UTF-8" type="text/javascript"></script>

  <!-- load Materialize CSS -->
  <link rel="stylesheet" type="text/css" href="/static/vendor/materialize.min.css">
  <!-- load Materialize js -->
  <script src='/static/vendor/materialize.min.js' charset="UTF-8" type="text/javascript"></script>
  <!-- load Materialize icons -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="/static/css/stream-only.css">

  <!-- load board components-->
  <script src='/static/js/board_carousel.js' charset="UTF-8" type="text/javascript"></script>
  <!-- load board js -->
  <script src='/static/js/init_socket.js' charset="UTF-8" type="text/javascript"></script>

</head>

<body>
  <div class="row">
    <div class="col s12">
      <!-- navigation bar -->
      <nav class="col s12 wave">
        <div class="nav-wrapper">
          <a href="/" class="brand-logo"><i class="material-icons hide-on-small-only">fast_forward</i>FutureBoard</a>
          <ul id="nav-mobile" class="right">

            <li>
               <div id="clock" class="hide-on-med-and-down">
                  <p class="unit" id="hours"></p>
                  <p class="unit" id="minutes"></p>
                  <p class="unit" id="seconds"></p>
                  <p class="unit" id="ampm"></p>
                </div>
            </li>
            <li class="hide-on-med-and-down">
                <p class="unit" id="dateToday"></p>
            </li>
           </ul>
        </div>
      </nav>
      <div class="main-display ">
        <!-- main carousel -->
        <div id="slideshow" class="carousel carousel-slider moments">
        </div>
        <!-- vote and flag buttons -->
      </div>
      <div class="slideshow-buttons right-align">
        <div class="lables">
          <span id="votes" class="new badge" data-badge-caption=""></span>
        </div>
        <!-- vote button -->
        <a class="btn-floating waves-effect waves-light btn-large black hoverable plusOne"><i class="material-icons">plus_one</i></a>
      </div>
      <div class="flag-buttons left-align">
        <!-- flag button -->
        <a class="btn-floating waves-effect waves-light btn-large red hoverable flag"><i class="material-icons">flag</i></a>
      </div>
      </div>
    </div>

  <!-- load jQuery Clock for navbar-->
  <script src='/static/vendor/date.js' charset="UTF-8" type="text/javascript"></script>
  <script src="/static/js/clock.js" charset="utf-8"></script>
</body>

</html>