<div id="hero">
  <div class="inner">
    <ul id="nav">
      <li><a href="/guide/" class="nav-link">Guide</a></li>
      <li><a href="/api/" class="nav-link">API</a></li>
      <li><a href="/examples/" class="nav-link">Examples</a></li>
      <li><a href="/blog" class="nav-link">Blog</a></li>
      <%- partial('partials/community_dropdown') %>
    </ul>
    <div id="logo-wrap">
      <img id="logo" width="200" class="emoji dog" title="puppy" src="<%- config.logo_large %>">
      <h1><%- config.title %></h1>
    </div>
    <p class="desc">
      <strong>
        <%- config.subtitle %> <img align="absmiddle" width="18" height="18" class="emoji dog" title="puppy" src="/images/emojis/dog.png">
      </strong>
      <br />
      <br />
      <%- config.description %>
    </p>
    <p class="buttons">
      <a href="/guide/installation.html" class="button">Install v<%- theme.uppy_version %></a>
    </p>
    <ul id="social">
      <li><a href="https://twitter.com/uppyjs" class="twitter-follow-button" data-show-count="false" data-dnt="true">Follow @uppyjs</a></li>
      <li><iframe src="http://ghbtns.com/github-btn.html?user=transloadit&repo=uppy&type=watch&count=true"
    allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe></li>

      <li id="buildbadge">
       <span class="wrapper">
         <a href="https://travis-ci.org/transloadit/uppy"><img src="https://travis-ci.org/transloadit/uppy.svg" alt="Build Status"></a>
       </span>
      </li>
    </ul>
  </div>
  <div class="down"><img src="/images/down.png"></div>
</div>

<div id="example">
  <h2>10 Second Example</h2>
  <div class="block">
    <figure class="highlight lang-html"><table><tbody><tr><td class="gutter"><pre>1
2
3
4
</pre></td><td class="code"><pre><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"demo"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">p</span>&gt;</span>{{message}}<span class="tag">&lt;/<span class="title">p</span>&gt;</span>
  <span class="tag">&lt;<span class="title">input</span> <span class="attribute">v-model</span>=<span class="value">"message"</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
</pre></td></tr></tbody></table></figure>
  </div>

  <div class="sign">+</div>

  <div class="block">
    <figure class="highlight lang-js"><table><tbody><tr><td class="gutter"><pre>1
2
3
4
5
6
</pre></td><td class="code"><pre><span class="keyword">var</span> demo = <span class="keyword">new</span> Uppy({
  el: <span class="string">'#demo'</span>,
  data: {
    message: <span class="string">'Hello Uppy!'</span>
  }
})
</pre></td></tr></tbody></table></figure>
  </div>

  <div class="sign">=</div>

  <div class="block result">
    <div id="demo">
      <p>{{message}}</p>
      <input v-model="message">
    </div>
    <script>
    var demo = new Uppy({
      el: '#demo',
      data: {
        message: 'Hello Uppy!'
      }
    })
    </script>
  </div>
</div>
<div id="features">
  <div class="feats">
    <% for (var k in site.data.features) { var v = site.data.features[k]; %>
      <div class="feat">
        <h2><span class="icon <%- v.icon %>"></span><%- v.title %></h2>
        <p> <%- v.description %></p>
      </div>
    <% } %>
  </div>
</div>
<div id="design_goals">
  <h2>Design Goals:</h2>
  <ul>
    <% for (var k in site.data.design_goals) { var v = site.data.design_goals[k]; %>
    <li>
      <%- v %>
    </li>
    <% } %>
  </ul>
</div>
<div id="footer">
  <a class="start" href="/guide/index.html">Get Started</a>
  <p>Released under the <a href="http://opensource.org/licenses/MIT" target="_blank">MIT License</a></p>
  <p>This site borrows heavily from Evan You's excellent <a href="https://github.com/vuejs/vuejs.org">Vue.js</a> (<a href="https://github.com/transloadit/uppy/blob/master/website/VUEORG_LICENSE">LICENSE</a>)</p>
  <p>Copyright (c) <%- date(Date.now(), 'YYYY') %> <a href="https://transloadit.com" target="_blank">Transloadit</a></p>
</div>

<!-- Twitter follow button script -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
