{% extends 'templatevamp.html' %}

{% block title %}Home{% endblock %}

{% block head %}
<style type="text/css">
  html, body {
    height: 100%;
  }

  /** Navbar Fixed ========================================================== */
  .navbar-fixed-top {
    position: fixed !important;
  }
  .top-nav-expand .navbar-inner {
    background: transparent !important;
  }
  .top-nav-expand .navbar-brand {
    color: #5b0021 !important;
  }
  .top-nav-expand .nav>li>a {
    color: #5b0021 !important;
  }

  /** Intro ================================================================= */
  /**@media (min-width: 768px) {
    .intro, #form-section {
      height: 100% !important;
      padding: 0 !important;
    }
  }*/
  .intro, #form-section {
    display: table;
    width: 100%;
    height: auto;
    /**padding: 100px 0;*/
    padding: 70px 0 0;
    text-align: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
  }
  #form-section {
    margin-bottom: 70px;
  }
  .intro .body, #form-section .body {
    display: table-cell;
    vertical-align: middle;
  }

  /** Thumbs =============================================================== */
  /*
  .midlle-ellipsis::before, .midlle-ellipsis::after {
    display: inline-block;
    max-width: 50%;
    overflow: hidden;
    white-space: pre;
  }
  .midlle-ellipsis::before {
    content: attr(href);
    text-overflow: ellipsis;
  }
  .midlle-ellipsis::after {
    content: attr(href);
    text-overflow: clip;
    direction: rtl;
  }
  */

  /** Button Arrow Down ======================================================*/
  .btn {
    font-weight: 400;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    border-radius: 0;
  }
  .btn-circle {
    width: 70px;
    height: 70px;
    margin-top: 50px;
    padding: 7px 16px;
    border: 2px solid #5b0021;
    border-radius: 100%!important;
    font-size: 40px;
    background: 0 0;
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
  }
  .btn-circle, .btn-circle:hover, .btn-circle:active {
    border-color: #5b0021;
    color: #5b0021;
  }
  .btn-circle i.animated {
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
  }

  .important {
    color: #336699;
  }

  select[name^=type] {
      width: 100px !important;
  }
</style>
{% endblock %}

{% block content %}
<section class="intro text-center">
  <div class="body">
    <div class="container">
      <div class="col-sm-12 example">
        <div class="col-sm-12">
          <h1 style="margin: 0 0 35px;">How well is your webpage archived?</h1>
        </div>

        <div class="col-sm-4">
          <div class="frame">
            <div class="aspect"></div>
            <div class="inner">
              <a target="_blank" href="memento/check?url=https%3A%2F%2Fweb.archive.org%2Fweb%2F20161006233303%2Fhttp%3A%2F%2Fodu.edu%2Fcompsci"><img class="thumb" src="static/images/screenshots/http-cs-odu-edu.png" /></a>
            </div>
          </div>
          <br/>
          <a class="no-overflow" target="_blank" href="memento/check?url=https%3A%2F%2Fweb.archive.org%2Fweb%2F20161006233303%2Fhttp%3A%2F%2Fodu.edu%2Fcompsci">http://odu.edu/compsci</a><br/>
          Damage = 0.081
        </div>
        <div class="col-sm-4">
          <div class="frame">
            <div class="aspect"></div>
            <div class="inner">
              <a target="_blank" href="memento/check?url=https%3A%2F%2Fweb.archive.org%2Fweb%2F20020525205220%2Fhttp%3A%2F%2Fclarkjolley.com%2F"><img class="thumb" src="static/images/screenshots/https-web-archive-org-web-http-clarkjolley-com.png" /></a>
            </div>
          </div>
          <br/>
          <a class="no-overflow" target="_blank" href="memento/check?url=https%3A%2F%2Fweb.archive.org%2Fweb%2F20020525205220%2Fhttp%3A%2F%2Fclarkjolley.com%2F">http://clarkjolley.com</a><br/>
          Damage = 0.42
        </div>
        <div class="col-sm-4">
          <div class="frame">
            <div class="aspect"></div>
            <div class="inner">
              <a target="_blank" href="memento/check?url=https%3A%2F%2Fweb.archive.org%2Fweb%2F19981202033838%2Fhttp%3A%2F%2Falguard.state.al.us"><img class="thumb" src="static/images/screenshots/https-web-archive-org-web-http-alguard-state-al-us.png" /></a>
            </div>
          </div>
          <br/>
          <a class="no-overflow" target="_blank" href="memento/check?url=https%3A%2F%2Fweb.archive.org%2Fweb%2F19981202033838%2Fhttp%3A%2F%2Falguard.state.al.us">http://alguard.state.al.us</a><br/>
          Damage = 0.873
        </div>

        <!--<div class="col-sm-12">
          <a href="#form-section" class="btn btn-circle page-scroll">
            <i class="fa fa-angle-double-down animated"></i>
          </a>
        </div>-->
      </div>
    </div>
  </div>
</section>

<section id="form-section" class="text-center">
  <div class="body">
    <div class="container">
      <div class="col-sm-10 col-sm-offset-1">
        <div class="col-sm-10 col-sm-offset-1">
          <h1 style="margin: 0 0 35px;">Check the damage of your page</h1>
        </div>

        <div class="col-sm-10 col-sm-offset-1">
          <form class="news-letter" method="GET" action="/memento/check" role="form" data-toggle="validator">
            <div class="subscribe-hide">
              <div class="form-group">
                <div class="input-group">
                <input class="form-control" type="url" name="url" placeholder="http://www.somesite.com" required data-error="Your URI format is not correct. Consider adding a scheme (e.g: http://) to your URI." />
                <span class="input-group-btn">
                  <button class="btn btn-success" type="submit">Check &raquo;</button>
                </span>
                </div><!-- /input-group -->
                <div class="help-block with-errors">

                </div>
              </div>
              <div class="subscribe-error"></div>
            </div><!-- /.subscribe-hide -->
            <div class="subscribe-message"></div>
          </form><!-- /.news-letter -->
        </div>

        <div class="col-sm-10 col-sm-offset-1">
          <div style="margin-top: 20px;" class="alert alert-warning" role="alert">
            <strong>Note : </strong>The memento damage calculation will work on live webpages,
            but was designed to evaluate archived webpages or mementos. Discover mementos using
            <strong><a target="_blank" href="http://timetravel.mementoweb.org/">Time Travel</a></strong>.
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}

{% block tail %}
<script type="text/javascript">
  $('.example a').each(function() {
    $(this).attr('href', window.location.href + $(this).attr('href'));
  });

  /** $('img.thumb').elevateZoom({
    zoomType : "inner",
    cursor: "crosshair"
  }); */

  function processNoOverflow() {
    var hrefs = [], as = $('a.no-overflow');
    for(var i=0; i<as.length; i++) {
      hrefs.push($(as[i]).attr('href'));
    }

    for(var i=0; i<as.length; i++) {
      if ($(as[i]).innerWidth() > $(as[i]).parent().innerWidth()) {
        $(as[i]).addClass('midlle-ellipsis');
        $(as[i]).html('');
      } else {
        $(as[i]).removeClass('midlle-ellipsis');
        $(as[i]).html(hrefs[i]);
      }
    }
  }

  function centeredSearchBox() {
    var bodyH = $('body').outerHeight(true);
    var navbarH = $('.navbar').outerHeight(true);
    var footerH = $('.footer').outerHeight(true);

    var margin = 0;
    if(navbarH > footerH) margin = navbarH;
    else margin = footerH;

    $('#form-section').outerHeight(bodyH - 2 * margin, true)
  }

  $( window ).resize(function() {
    centeredSearchBox();
    processNoOverflow();
  });

  // centeredSearchBox();
  //processNoOverflow();

  $('.navbar').addClass('top-nav-expand');
  $(window).scroll(function () {
    if ($(window).scrollTop() > $('.intro .container').offset().top - 40) {
      $('.navbar').removeClass('top-nav-expand');
    } else {
      $('.navbar').addClass('top-nav-expand');
    }
  });
</script>
{% endblock %}