{% extends "_base.html" %}
{% block head %}
<link rel="stylesheet" href="{{ CDN_URL }}css/fonts/font.pt.css?v1">
{% endblock %}
{% block content %}
<!-- Overview-->
<header id="overview" class="hero-unit compact">
  <div class="row-fluid">
    <hgroup class="span12">
      <h1 class="logo-mark xl">StoryMap<span><em>JS</em></span></h1>
      <h2 class="intro">Maps that tell stories.</h2>
      <p><a href="select/" class="btn btn-large btn-success" data-scroll="true">Make a storymap now</a></p>
      <!--<div class="alert alert-info">
        <p><i class="icon-warning-sign"></i> The StoryMap editor is currently not fully functional. We're working on a solution.</p> 
        <p>Published storymaps should be unaffected.</p>
      </div>-->
    </hgroup>
  </div>
</header>


<section id="demo">
  <div id="homepage-storymap">
  </div>
</section>
<script>
  var storymap = new VCO.StoryMap('homepage-storymap', '{{ static_url }}demo/demo.json');

  var e = $(window).height(),
  t = $("#homepage-storymap");
  t.height(e - 20);

  $(window).resize(function() {
     e = $(window).height();
     t.height(e - 20);
    storymap.updateDisplay();
  })
</script>


<section id="description" class="container">
  <h2>Introducing StoryMapJS</h2>
  <div class="row">
    <div class="span6">
      <p>
        StoryMapJS is a free tool to help you tell stories on the web that highlight the locations of a series of events. It is a new tool, yet stable in our development environment, and it has a <a href="{{ url_for('select') }}">friendly authoring tool.</a> It has two significant, related features:
      </p>
      <div id="storymap-features" style="margin-left: 20px;">
        <div><strong>Gigapixel</strong></div>
        <p>
          StoryMapJS can tell stories with large photographs, works of art, historic maps, and other image files. Because it works best with pixel-dense files, we call these "gigapixel" StoryMaps. <a href="{{ url_for('gigapixel') }}">Learn more.</a>
        </p>
        <div><strong>SnapMap</strong></div>
        <p><a href="http://snapmap.knightlab.com">SnapMap</a> is a tool to help you quickly create a StoryMap. It places your 20 most recent geo-tagged Instagrams on a map that can be shared instantly. You can also edit it in StoryMap's authoring tool, adding media from other sources.
        </p>
      </div>
      <p>
         We welcome feedback and bug reports: you can use our <a href="https://knightlab.zendesk.com/forums/22615078-StoryMapJS">support forum</a> to post questions, or email <a href="mailto:support@knightlab.zendesk.com">support@knightlab.zendesk.com</a>.
      </p>
      <p>
        StoryMapJS is <a href="https://github.com/NUKnightLab/StoryMapJS">open source</a> and offered under the MIT license.
      </p>
    </div>
    <div class="span6">
      <div class="well">
      <h4>Sign up for updates</h4>
      <p>Get updates, tips and news by email. No Spam.</p>
      <!-- MailChimp Signup Form-->
      <div id="mc_embed_signup">
        <form id="mc-embedded-subscribe-form" action="http://northwestern.us2.list-manage.com/subscribe/post?u=ccc3ef81b4c3c762eb7a7d2b4&amp;id=ff5b6c54e5" method="post" name="mc-embedded-subscribe-form" target="_blank" class="validate form-inline"><span class="mc-field-group">
            <input id="mce-EMAIL" type="email" value="" name="EMAIL" placeholder="Email" class="input-large required email"></span><span class="mc-field-group">
          <button id="mc-embedded-subscribe" type="submit" value="Subscribe" name="subscribe" class="btn">Subscribe</button>
          <div id="mce-responses" class="clear">
            <div id="mce-error-response" style="display: none;" class="response alert alert-error"></div>
            <div id="mce-success-response" style="display: none;" class="response alert alert-success"></div>
          </div>
          <div class="clear"></div>
        </form>
      </div>

      <h4>Stay connected with us on twitter</h4>
      <p>
        <iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/follow_button.html?screen_name=knightlab&amp;show_count=true" style="width:220px; height:20px;"></iframe>
      </p>
    </div>
    </div>
  </div>  </div>
</section>


<section id="examples" class="container">
  <h2>Examples</h2>
  <p>Have you made a StoryMap? <a href="https://knightlab.zendesk.com/forums/22615078-StoryMapJS">Let us know</a> and maybe we'll feature it here.</p>
  <div class="row">
  <h2>StoryMap</h2>
  
    <!--WaPo-->
    <div class="span3">
      <p>
        <a href="http://apps.washingtonpost.com/g/page/world/map-how-isis-is-carving-out-a-new-country/1095/" target="_blank"><img src="{{ STATIC_URL }}img/thumbnails/thumb_islamicstate.jpg" class="thumbnail">    
          <div style="height:33px; width:160px;">
            <img src="{{ static_url }}img/logos/logo_wapo.png" alt="Washington Post" style="max-width:160px; max-height:33px;">
          </div>
          <h3 style="color:#1dacd6;">
            How the Islamic State is Carving out a New Country
          </h3>
        </a>
      </p>
    </div>

    <!--Al Jazeera-->
    <div class="span3">
      <p>
        <a href="http://america.aljazeera.com/multimedia/2014/3/map-timeline-malaysiaairlinesflight370.html" target="_blank"><img src="{{ STATIC_URL }}img/thumbnails/ajam_flight_370.jpg" class="thumbnail">  
          <div style="height:33px; width:160px;">
            <img src="{{ static_url }}img/logos/logo_aljazeera.png" alt="Al Jazeera" style="max-width:160px; max-height:33px;">
          </div>
          <h3 style="color:#1dacd6;">
            Disappearance of Malaysia Airlines Flight MH370
          </h3>
        </a>
      </p>
    </div>

    <!--CNBC-->
    <div class="span3">
      <p>
        <a href="http://www.cnbc.com/id/101697417#." target="_blank"><img src="{{ static_url }}img/thumbnails/thumb_master.jpg" class="thumbnail">  
          <div style="height:33px; width:160px;">
            <img src="{{ static_url }}img/logos/logo_cnbc.png" alt="CNBC" style="max-width:160px; max-height:33px;">
          </div>
          <h3 style="color:#1dacd6;">
            The Life and Death of a Master of the Universe
          </h3>
        </a>
      </p>
    </div>

    <!--Houston Chronicle-->
    <div class="span3">
      <p>
        <a href="http://www.houstonchronicle.com/forgotten-homicides/" target="_blank"><img src="{{ static_url }}img/thumbnails/thumb_homicides.jpg" class="thumbnail">  
          <div style="height:33px; width:160px;">
            <img src="{{ static_url }}img/logos/logo_houston.png" alt="Houston Chronicle" style="max-width:160px; max-height:33px;">
          </div>
          <h3 style="color:#1dacd6;">
            Dead and Buried: Forgotten Homicides
          </h3>
        </a>
      </p>
    </div>

  </div>

  <div class="row">

    <!--The Times-->
    <div class="span3">
      <p>
        <a href="http://extras.thetimes.co.uk/public/2014/maps/25-02/Yanukovych_storymap.html" target="_blank"><img src="{{ STATIC_URL }}img/thumbnails/thetimes_victor_yanukovych.jpg" class="thumbnail">  
          <div style="height:33px; width:160px;">
            <img src="{{ static_url }}img/logos/logo_thetimes.png" alt="The Times" style="max-width:160px; max-height:33px;">
          </div>
          <h3 style="color:#1dacd6;">
            Yanukovych on the Run
          </h3>
        </a>
      </p>
    </div>    

    <!--Yahoo!-->
    <div class="span3">
      <p>
        <a href="http://cdn.knightlab.com/libs/storymapjs/latest/embed/?url=https%3A%2F%2Fwww.googledrive.com%2Fhost%2F0B45EeRGUhSinVmVqaWIxakhjcDQ%2Fpublished.json" target="_blank"><img src="{{ static_url }}img/thumbnails/thumb_fifa.jpg" class="thumbnail">
          <div style="height:33px; width:160px;">
            <img src="{{ static_url }}img/logos/logo_yahoo.jpg" alt="Yahoo! India" style="max-width:160px; max-height:33px;">
          </div>
          <h3 style="color:#1dacd6;">
            Football World Cup Complete Guide
          </h3>
        </a>
      </p>
    </div> 

    <!--Minn Post-->
    <div class="span3">
      <p>
        <a href="http://www.minnpost.com/stroll/2014/06/hockey-hip-hop-and-other-green-line-highlights" target="_blank"><img src="{{ static_url }}img/thumbnails/thumb_greenline.jpg" class="thumbnail">
          <div style="height:33px; width:160px;">
            <img src="{{ static_url }}img/logos/logo_minn.png" alt="Minn Post" style="max-width:160px; max-height:33px;">
          </div>
          <h3 style="color:#1dacd6;">
            Hockey, Hip-hop, and Other Green Line Highlights
          </h3>
        </a>
      </p>
    </div> 

    <!--Foreign Policy-->
    <div class="span3">
      <p>
        <a href="http://www.foreignpolicy.com/articles/2014/06/19/ISIS_iraq_map_obama_maliki_troops_mosul_tikrit" target="_blank"><img src="{{ static_url }}img/thumbnails/thumb_baghdad.jpg" class="thumbnail">
          <div style="height:33px; width:160px;">
            <img src="{{ static_url }}img/logos/logo_foreignpolicy.png" alt="Foreign Policy" style="max-width:160px; max-height:33px;">
          </div>
          <h3 style="color:#1dacd6;">
            ISIS's Road to Baghdad
          </h3>
        </a>
      </p>
    </div> 
  
  </div>


<div class="row">

    <!--La Stampa-->
    <div class="span3">
      <p>
        <a href="http://lastampa.it/medialab/webdoc/pantani" target="_blank"><img src="{{ STATIC_URL }}img/thumbnails/thumb_pantani.jpg" class="thumbnail">
          <div style="height:33px; width:160px;">
            <img src="{{ static_url }}img/logos/logo_lastampa.jpg" alt="La Stampa" style="max-width:160px; max-height:33px;">
          </div>
          <h3 style="color:#1dacd6;">
            Pantani: The Man of the Sea who Won in the Mountains
          </h3>
        </a>
      </p>
    </div> 

    <!--Radio Free Europe-->
    <div class="span3">
      <p>
        <a href="http://www.rferl.org/contentinfographics/moscows-coercive-diplomacy-russia-threats-in-europe/25370172.html" target="_blank"><img src="{{ static_url }}img/thumbnails/thumb_moscow.jpg" class="thumbnail">
          <div style="height:33px; width:160px;">
            <img src="{{ static_url }}img/logos/logo_radio.jpg" alt="Radio Free Europe" style="max-width:160px; max-height:33px;">
          </div>
          <h3 style="color:#1dacd6;">
            Moscow's Coercive Diplomacy
          </h3>
        </a>
      </p>
    </div> 

    <!--Marketplace-->
    <div class="span3">
      <p>
        <a href="http://www.marketplace.org/topics/mile-marker-zero" target="_blank"><img src="{{ static_url }}img/thumbnails/mile-marker-zero.jpg" class="thumbnail">
          <div style="height:33px; width:160px;">
            <img src="{{ static_url }}img/logos/logo_marketplace.jpg" alt="Marketplace" style="max-width:160px; max-height:33px;">
          </div>
          <h3 style="color:#1dacd6;">
            Charting the Impact of the Debt Ceiling Debate
          </h3>
        </a>
      </p>
    </div> 

    <!--KPBS-->
    <div class="span3">
      <p>
        <a href="http://www.kpbs.org/embedded/2014/feb/04/7946/" target="_blank"><img src="{{ static_url }}img/thumbnails/thumb_claude.jpg" class="thumbnail">
          <div style="height:33px; width:160px;">
            <img src="{{ static_url }}img/logos/logo_kpbs.png" alt="KPBS" style="max-width:160px; max-height:33px;">
          </div>
          <h3 style="color:#1dacd6;">
            Explore Christo and Jeanne-Claude's Works of Art
          </h3>
        </a>
      </p>
    </div> 

</div>

 <div class="row">

    <!--Star-Telegram-->
    <div class="span3">
      <p>
        <a href="http://cdn.knightlab.com/libs/storymapjs/latest/embed/?url=https://www.googledrive.com/host/0B4TakYGCSOR4RjNYaG5RcUJwdFU/published.json" target="_blank"><img src="{{ STATIC_URL }}img/thumbnails/thumb_chisholm.jpg" class="thumbnail">
          <div style="height:33px; width:160px;">
            <img src="{{ static_url }}img/logos/logo_star.jpg" alt="Fort Worth Star-Telegram" style="max-width:160px; max-height:33px;">
          </div>
          <h3 style="color:#1dacd6;">
            Chilsholm Trail Parkway
          </h3>
        </a>
      </p>
    </div>

    <!--Knight Lab-->
    <div class="span3">
      <p>
        <a href="{{ url_for('examples', name='sochi-2014-olympic-torch-relay') }}" target="_blank"><img src="{{ static_url }}img/thumbnails/sochi-torch-relay.jpg" class="thumbnail">
          <div style="height:33px; width:160px;">
            <img src="{{ static_url }}img/logos/logo_knightlab.png" alt="Knight Lab" style="max-width:160px; max-height:33px;">
          </div>
          <h3 style="color:#1dacd6;">
            Sochi 2014 Olympic Torch Relay Highlights
          </h3>
        </a>
      </p>
    </div>

   <!--JS Online-->
    <div class="span3">
      <p>
       <a href="http://www.jsonline.com/entertainment/dining/New-craft-breweries-241672361.html" target="_blank"><img src="{{ STATIC_URL }}img/thumbnails/wisconsin-breweries.jpg" class="thumbnail">
          <div style="height:33px; width:160px;">
            <img src="{{ static_url }}img/logos/logo_jsonline.jpg" alt="JS Online" style="max-width:160px; max-height:33px;">
          </div>
          <h3 style="color:#1dacd6;">
            Wisconsin's New Craft Breweries
          </h3>
        </a>
      </p>
    </div>

   <!--The Times-->
    <div class="span3">
      <p>
       <a href="http://extras.thetimes.co.uk/public/2014/maps/15-02/Ivory_Storymap.html" target="_blank"><img src="{{ STATIC_URL }}img/thumbnails/the_times_ivory.jpg" class="thumbnail">
          <div style="height:33px; width:160px;">
            <img src="{{ static_url }}img/logos/logo_thetimes.png" alt="The Times" style="max-width:160px; max-height:33px;">
          </div>
          <h3 style="color:#1dacd6;">
            A Key Ivory Trade Hub
          </h3>
        </a>
      </p>
    </div>

</div>
  
    <h2>Gigapixel</h2>
    
    <div class="span3">
      <p><a href="/examples/aryas-journey/" target="_blank"><img src="{{ static_url }}img/thumbnails/knightlab_arya.png" class="thumbnail"></a>
        <h3><a href="/examples/aryas-journey/" target="_blank">Game of Thrones: Arya's Journey</a></h3>
      </p>
    </div>
    
    <div class="span3">
      <p><a href="/examples/bosch-garden/" target="_blank"><img src="{{ static_url }}img/thumbnails/knightlab_bosch.png" class="thumbnail"></a>
        <h3><a href="/examples/bosch-garden/" target="_blank">Hieronymus Bosch: Garden of Earthly Delights</a></h3>
      </p>
    </div>
    
  </div>


</section>

{% include "_help.html" %}


{% endblock %}
