uppy/website/themes/uppy/layout/index.ejs

<section id="hero" class="IndexHero">
  <header id="logo-wrap" class="IndexHero-header">
    <img id="logo" class="IndexHero-logo" title="Uppy" alt="Uppy" src="<%- config.logo_large %>">
    <h1 class="IndexHero-title"><%- config.title %></h1>

    <h2 class="IndexHero-tagline">
      The file uploader that <br>
      <span class="IndexHero-taglinePart js-IndexHero-taglinePart is-visible">loves to play fetch</span>
    </h2>

    <ul class="IndexHero-taglineList js-IndexHero-taglineList">
      <% site.data.taglines.forEach(function(tagline) {%>
        <li><%- tagline %></li>
      <% }); %>
    </ul>
  </header>

  <%- partial('partials/social') %>
</section>

<section id="example" class="IndexExample">
  <!-- <h2 class="IndexSection-title">Demo</h2> -->

  <div class="IndexExample-block">
    <video class="IndexExample-video"
           src="/images/uppy-demo.mp4"
           autoplay loop muted></video>
    <form id="upload-form">
      <input type="file">
    </form>
    <p class="TryMe-line">Try me: <button id="select-files" class="TryMe-btn">Select Files</button></p>
  </div>

  <div class="IndexExample-block">
    <%- partial('partials/frontpage-code-sample') %>
  </div>

  <a class="GetStartedBtn" href="/docs/">Get Started</a>
</section>

<section class="IndexAbout">
  <div class="IndexAbout-item">
    <img class="IndexAbout-icon" src="/images/traffic-light.svg">
    <h2 class="IndexSection-title">Work in progress</h2>
    <p><%- config.description %></p>
  </div>
  <div class="IndexAbout-item">
    <a href="https://transloadit.com"><img class="IndexAbout-icon" src="/images/transloadit-logo.png"></a>
    <h2 class="IndexSection-title">Open Source</h2>
    <p><%- config.descriptionWho %></p>
  </div>
</section>

<section class="IndexDesignGoals">
  <h2>Design Goals:</h2>
  <ul>
    <% for (var k in site.data.design_goals) { var v = site.data.design_goals[k]; %>
    <li>
      <%- v %>
    </li>
    <% } %>
  </ul>
</section>

<section class="IndexActivity">
  <h2>Activity Feed</h2>

  <div class="on-the-githubs" data-event-source="repos/transloadit/uppy">Loading...</div>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="//kvz.github.io/on-the-githubs/js/jquery.on-the-githubs.min.js"></script>
  <script type="text/javascript">
    $('.on-the-githubs').onthegithubs();
  </script>
</section>

<footer class="IndexFooter">
  <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>) (he <a href="https://twitter.com/youyuxi/status/672441843183960067">approves</a>)</p>
  <p>© <%- date(Date.now(), 'YYYY') %> <a href="https://transloadit.com" target="_blank">Transloadit</a></p>
</footer>

<link href="https://transloadit.edgly.net/releases/uppy/v0.24.1/dist/uppy.min.css" rel="stylesheet">
<script src="https://transloadit.edgly.net/releases/uppy/v0.24.1/dist/uppy.min.js"></script>

<script>
  var PROTOCOL = location.protocol === 'https:' ? 'https' : 'http'
  var TUS_ENDPOINT = PROTOCOL + '://master.tus.io/files/'
  
  var uppy = Uppy.Core({ debug: true, autoProceed: false })
  .use(Uppy.Dashboard, { 
    trigger: '#select-files',
    target: '#upload-form',
    replaceTargetContent: true,
    metaFields: [
      { id: 'license', name: 'License', placeholder: 'specify license' },
      { id: 'caption', name: 'Caption', placeholder: 'describe what the image is about' }
    ]
  })
  .use(Uppy.Tus, { endpoint: TUS_ENDPOINT})
  .run()

  uppy.on('success', (files) => {
    console.log(`Upload complete! We’ve uploaded these files: ${files}`)
  })
</script>