templates/home.mustache

﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Class Transcribe</title>

    <link rel="stylesheet" type="text/css" href="/stylesheets/style-responsive.css" />
    <link rel="stylesheet" type="text/css" href="/stylesheets/global.css">
    <link rel="stylesheet" type="text/css" href="/stylesheets/resetHome.css" />
    <link rel="stylesheet" type="text/css" href="/stylesheets/home.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/solid.css" integrity="sha384-r/k8YTFqmlOaqRkZuSiE9trsrDXkh07mRaoGBMoDcmA58OHILZPsk29i2BsFng1B" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/fontawesome.css" integrity="sha384-4aon80D8rXCGx9ayDt85LbyUHeMWd3UiBaWliBlJ53yzm9hqN21A+o1pqoyK04h+" crossorigin="anonymous">

    <script>
         var piwikServer = "{{piwikServer}}";
    </script>
 	<script src="/javascripts/libraries/header.js"></script>
</head>

<body>
<!-- {{> loginPartial}}
{{> adminPartial}} -->


<div class="container">

<!-- section start-page -->

  <header class="start-page parallax-background" id="home" role="banner">

    <div class="opacity"></div>
      <div class="content">
        <div class="text">
          <h1>Welcome to<br/>
          <span>Class Transcribe</span></h1>

          <div class="arrow-down"></div>

          <!-- login and signup button -->
          <div class="login-signup-container">
            <button class="login-home" onclick="window.location='/login'">Sign In To See Videos</button>
          </div>
        </div>
      </div>

  </header>


  <!-- section menu -->

  <nav class="menu" role=navigation>

    <div class="menu-content">

    <div class="logo">UIUC</div>

      <ul id="menu">
        <li><a href="#home">HOME</a></li>
        <li><a href="#about-us">ABOUT US</a></li> 
        {{! <li><a href="#courses">COURSES</a></li>}}
        <li><a href="#contact">CONTACT</a></li>
      </ul>
    </div>

  </nav>


  <!-- section about us -->

  <main class="about-us" id="about-us" role="main">

    <h2>ABOUT US</h2>

    <p class="title">ClassTranscribe is an open-source, web-based platform developed by students and faculty at the University of Illinois at Urbana-Champaign</p>

      <div class="column-one">

        <!--<div class="circle-one"></div>-->
        <p><i class="fas fa-question-circle"></i><p>
        <p>Our mission is to provide text-searchable lecture videos for all students</p>

      </div>

      <div class="column-two">

        <!--<div class="circle-two"></div>-->
        <p><i class="fas fa-comments"></i><p>
        <p>Captions are created using automated transcription and perfected with your help</p>

      </div>


      <div class="column-three">

        <!--<div class="circle-three"></div>-->
        <p><i class="fas fa-universal-access"></i></p>
          <p>We strive to meet modern accessibility standards to promote inclusive learning</p>

    </div>


  </main>

  <div class="clear"></div>

  <!-- courses-->
{{!
  <section class="courses" id="courses">


    <div class="courses-margin">

      <h2>COURSES</h2>

       {{{courseGrid close brace x3

   </section>
}}

   <div class="clear"></div>


    <!-- Contact-->

    <aside class="contact" id="contact" role="complementary">
      <div class="contact-margin">
        <h2>Contact</h2>
        <div class="content">

          <!-- <div class="form">

            <form action="#" method="post" enctype="text/plain">

            <input name="your-name" id="your-name" value="YOUR NAME" />
            <input name="your-email" id="your-email" value="YOUR E-MAIL" />

            <textarea id="message" name="message" >MESSAGE</textarea>

            <a >
              <div class="button">
                <span >SEND</span>
              </div>
            </a>

            </form>

          </div> -->


          <div class="contact-text">

            Questions? Comments? Let us know!
            <i class="fas fa-envelope"></i> <a href="mailto:classtranscribe@illinois.edu">ClassTranscribe@illinois.edu</a>

          </div>


        </div>
      </div>
    </aside>


    <footer class="footer" role="contentinfo">

      <div class="margin">

        <div class="menu-footer">

        <a href="#home">Home</a>

        </div>

          <div class="copyright"> &copy; 2016-2018 UIUC</div>

      </div>

    </footer>

</div>

  <!-- Scripts -->

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!-- jQuery -->
  <script src="/javascripts/libraries/jquery.parallax.js"></script> <!-- jQuery Parallax -->
  <script src="/javascripts/libraries/jquery.nicescroll.js"></script> <!-- jQuery NiceScroll -->
  <script src="/javascripts/libraries/jquery.sticky.js"></script> <!-- jQuery Stick Menu -->
  <script src="/javascripts/libraries/homeScript.js"></script> <!-- All script -->


</body>

</html>