<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <% include templates/styletemplate.ejs %>
    <% include templates/scripttemplate.ejs %>


    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug 
    <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">-->

    <style>
          	/* GLOBAL STYLES
      -------------------------------------------------- */
      /* Padding below the footer and lighter body text */

      body {
        padding-bottom: 40px;
        color: #5a5a5a;
      }


      /* CUSTOMIZE THE NAVBAR
      -------------------------------------------------- */

      /* Special class on .container surrounding .navbar, used for positioning it into place. */
      .navbar-wrapper {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: 20;
      }

      /* Flip around the padding for proper display in narrow viewports */
      .navbar-wrapper > .container {
        padding-right: 0;
        padding-left: 0;
      }
      .navbar-wrapper .navbar {
        padding-right: 15px;
        padding-left: 15px;
      }
      .navbar-wrapper .navbar .container {
        width: auto;
      }


      /* CUSTOMIZE THE CAROUSEL
      -------------------------------------------------- */

      /* Carousel base class */
      .carousel {
        height: 500px;
        margin-bottom: 60px;
      }
      /* Since positioning the image, we need to help out the caption */
      .carousel-caption {
        z-index: 10;
      }

      /* Declare heights because of positioning of img element */
      .carousel .item {
        height: 500px;
        background-color: #777;
      }
      .carousel-inner > .item > img {
        position: absolute;
        top: 0;
        left: 0;
        min-width: 100%;
        height: 500px;
      }

        /*Contact form*/

      #contact .section-heading {
          color: #fff
      }
      #contact .form-group {
          margin-bottom: 25px
      }
      #contact .form-group input,
      #contact .form-group textarea {
          padding: 20px
      }
      #contact .form-group input.form-control {
          height: auto
      }
      #contact .form-group textarea.form-control {
          height: 236px
      }
      #contact .form-control:focus {
          border-color: #fed136;
          box-shadow: none
      }
      #contact::-webkit-input-placeholder {
          font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
          text-transform: uppercase;
          font-weight: 700;
          color: #bbb
      }
      #contact:-moz-placeholder {
          font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
          text-transform: uppercase;
          font-weight: 700;
          color: #bbb
      }
      #contact::-moz-placeholder {
          font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
          text-transform: uppercase;
          font-weight: 700;
          color: #bbb
      }
      #contact:-ms-input-placeholder {
          font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
          text-transform: uppercase;
          font-weight: 700;
          color: #bbb
      }
      #contact .text-danger {
          color: #e74c3c
      }

      /*Parallax */
      body { margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;}

      .parallax {
        position:relative;
        z-index:1;
        height:450px;
        -webkit-box-shadow: inset 0px -6px 5px rgba(50, 50, 50, 0.75);
        moz-box-shadow: inset 0px -6px 5px rgba(50, 50, 50, 0.75);
        box-shadow: inset 0px -6px 5px rgba(50, 50, 50, 0.75);
      }

      #trans1 {
        background: url('/public/assets/banners/parlx-banner-1.png') no-repeat fixed;
        background-position: center top;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        height: 10rem;
      }

      #trans2 {
        background: url('/public/assets/banners/parlx-banner-2.png') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
      }

      #trans3 {
        background: url('public/assets/contact-bg.jpg') no-repeat top center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        /*height:550px;*/
      }

      .txt {
        font-size:45px;
        color:#000;
        width:auto;
        background:#F9B802;
        background:rgba(249, 184, 2, 0.60);
        padding:5px 10px;
      }
      .txt.right {
        margin: 150px 100px 0 0;
        float:right;
        text-align:right;
      }
      .txt.left {
        float:left;
        text-align:left;
        margin: 150px 0 0 100px;
      }

      .txt.sub {
        background:#000;
        background:rgba(0,0,0,0.60);
        font-size:25px;
        color:#ccc;
        margin: 0 100px 0 100px;
      }
      .content {
        box-sizing:border-box;-moz-box-sizing:border-box;
        position:relative;
        z-index:2;
        background:#FFF;
        width:100%;

        margin:0;
        padding:10px 20px;
        -webkit-box-shadow: 0px 6px 5px rgba(50, 50, 50, 0.75);
        -moz-box-shadow: 0px 6px 5px rgba(50, 50, 50, 0.75);
        box-shadow: 0px 6px 5px rgba(50, 50, 50, 0.75);
        text-align:left;
      }

      .content.right {
        text-align:right;
      }
      .content.center {
        text-align:center;
      }

      .content h2 { padding:0 25px; }
      .content p { padding:0 50px; }
  

    </style>

  </head>
  <body>
  <% include templates/header.ejs %>
    <!-- <h1><%= title %></h1>-->

    <%#<!--<img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">-->
    <!--<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
                <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>-->

    #%>


      <!-- Carousel
      ================================================== -->
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img class="first-slide" src="public/assets/banners/fcc-banner-1.png" alt="First slide">
            <div class="container">
              <div class="carousel-caption">
                <div class="carousel-left-group">
                  <h1>CoDr - FCC data visualizer</h1>
                  <p>&nbsp;</p>
                  <p>CoDr uses the FreeCodeCamp open database and takes the insights from it to the next level.</p>
                </div>
                <p><a class="btn btn-lg btn-primary" href="/signup" role="button">Sign up today</a></p>
              </div>
            </div>
          </div>
          <div class="item">
            <img class="second-slide" src="public/assets/banners/fcc-banner-2.png" alt="Second slide" style="opacity:0.5">
            <div class="container">
              <div class="carousel-caption">
                <h1>Integrate the data in your apps.</h1>
                <p>&nbsp;</p><p>&nbsp;</p>
                <p><a class="btn btn-lg btn-info" href="/help" role="button">Learn more</a></p>
              </div>
            </div>
          </div>
          <div class="item">
            <img class="third-slide" src="public/assets/banners/fcc-banner-3.png" alt="Third slide">
            <div class="container">
              <div class="carousel-caption">
                <h1>Do you have more questions ?</h1>
                <p>&nbsp;</p><p>&nbsp;</p>
                <p><a class="btn btn-lg btn-info" href="#contact" role="button">Contact us</a></p>
              </div>
            </div>
          </div>
        </div>
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div><!-- /.carousel -->


      <!-- Marketing messaging and featurettes
      ================================================== -->
      <!-- Wrap the rest of the page in another container to center all the content. -->

      <div class="container marketing">

        <!-- Three columns of text below the carousel -->
        <div class="row">
          <div class="col-lg-4">
            <i class="fa fa-pie-chart featurette-big-icon" aria-hidden="true"></i>
            <h2>Visualization</h2>
            <p>Gain insights more easier from the FreeCodeCamp database: see visualizations made with D3.js based on different metrics and save your favorites.</p>
            <p><a class="btn btn-default" href="/dashboard" role="button">View details &raquo;</a></p>
          </div><!-- /.col-lg-4 -->
          <div class="col-lg-4">
            <i class="fa fa-code featurette-big-icon" aria-hidden="true"></i>
            <h2>REST API</h2>
            <p>Use the data in your application. You will have access to the FCC dataset in relational format, indexed and aggregated. I/O limits may apply.</p>
            <p><a class="btn btn-default" href="/help" role="button">View details &raquo;</a></p>
          </div><!-- /.col-lg-4 -->
          <div class="col-lg-4">
            <i class="fa fa-database featurette-big-icon" aria-hidden="true"></i>
            <h2>Explore the database</h2>
            <p>Access through our interface to a filterable database. Check what is so cool about our database and what our REST API offers in a more user-friendly way.</p>
            <p><a class="btn btn-default" href="/datafiltering" role="button">View details &raquo;</a></p>
          </div><!-- /.col-lg-4 -->
        </div><!-- /.row -->

      </div><!-- /.container -->

        <!-- START THE FEATURETTES -->

        <hr class="featurette-divider">

        
        <div class="parallax" id="trans1">
          <div class="txt right">
            Based on<br/>
            FCC Data
          </div>
          <div style="clear:both;"></div>
          <div class="txt right sub">
            The data is used to visualize how coders learn.
          </div>
        </div>
        <div class="content">
          
          <h2>&nbsp;</h2>
          
          <div style="clear:both;"></div>
        </div>
        <div class="parallax" id="trans2">
          <div class="txt left">
            Powered by D3.js
          </div>
          <div style="clear:both;"></div>
          <div class="txt left sub">
            
            New and interesting insights
          </div>
        </div>

        <div class="content center">
          <h2>Want to know more ?</h2>
          <p>Leave a message or check our <a href="/about">about page</a></p>
          <div style="clear:both;"></div>
        </div>
        <div class="parallax" id="trans3">
          <!-- <div class="txt left">
            Another fast moving Metro
          </div> -->
          <div style="clear:both;"></div>
          <!-- <div class="txt left sub">
            &middot; Gateshead Interchange Metro Station<br/>
            &middot; Some people too
          </div> -->
          <div class="container" id="contact">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <h2 class="section-heading">Send us a message</h2>
                        <p>&nbsp;</p>
                    </div>
                </div>
                <div class="row" style="margin-bottom: 5rem">
                  <div class="row" style="margin-bottom: 5rem">
                    <div class="col-lg-12">
                      <form name="sentMessage" id="contactForm" method="post" action="/contact">
                        <div class="row">
                          <div class="col-md-6">
                            <div class="form-group">
                              <input type="text" class="form-control" placeholder="Your Name *" name="name" required data-validation-required-message="Please enter your name.">
                              <p class="help-block text-danger"></p>
                            </div>
                            <div class="form-group">
                              <input type="email" class="form-control" placeholder="Your Email *" name="email" required data-validation-required-message="Please enter your email address.">
                              <p class="help-block text-danger"></p>
                            </div>
                            <div class="form-group">
                              <input type="tel" class="form-control" placeholder="Your Phone *" name="phone" required data-validation-required-message="Please enter your phone number.">
                              <p class="help-block text-danger"></p>
                            </div>
                          </div>
                          <div class="col-md-6">
                            <div class="form-group">
                              <textarea class="form-control" placeholder="Your Message *" name="message" required data-validation-required-message="Please enter a message."></textarea>
                              <p class="help-block text-danger"></p>
                            </div>
                          </div>
                          <div class="clearfix"></div>
                          <div class="col-lg-12 text-center">
                            <div id="success"></div>
                            <button type="submit" class="btn btn-xl btn-primary" value="Contact">Send Message</button>
                          </div>
                        </div>
                      </form>
                    </div>
                  </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
          $("#contactForm").submit(function(e)
          {
            var postData = $(this).serialize();
            var formURL = $(this).attr("action");
            var met=$(this).attr("method");
            $.ajax(
                    {
                      url : formURL,
                      type: met,
                      data : postData,
                      datatype: "json",
                      success:function(response)
                      {
                        //   $(".col-md-6").append(JSON.stringify(response,null,3));
                       $(".messageLog").append('<h1>'+JSON.stringify(response)+'</h1>');
                      },
                      error: function(jqXHR, textStatus, errorThrown)
                      {
                        $(".messageLog").wrapInner('<h1>'+JSON.stringify(errorThrown)+'</h1>');
                      }
                    });
            e.preventDefault();	//STOP default action
          });
        </script>
        <div class="messageLog">
        </div>
        <!-- /END THE FEATURETTES --->
        <hr>


        <!-- FOOTER -->
        <div class="container marketing">
        <footer>
          <p class="pull-right">
            
            <a href="#"><i class="fa fa-chevron-up" aria-hidden="true"></i>Back to top</a>
          </p>
          <p>&copy; 2016 TW-DALi team &middot; Check it out on Github: <a href="https://github.com/xR86/tw-project">xR86/tw-project</a></p>
        </footer>
        </div><!-- /.container -->


      <!-- Bootstrap core JavaScript
    ================================================== -->

    <!-- Placed at the end of the document so the pages load faster -->

    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug 
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>-->

    <!-- parralax -->
    <script>
      $(document).ready(function() {
        var origheight = $("#trans1").height();
        var height = $(window).height();
        if (height > origheight) {
          $("#trans1").height(height);
        }
        
        $(window).scroll(function(){
          var x = $(this).scrollTop();
          $('#trans1').css('background-position','center -'+parseInt(x/20)+'px');
        });
        
      });

    </script>
     
  </body>
</html>
