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

<section id="hero" class="IndexHero">
  <img class="IndexHero-logo" title="Uppy" alt="Uppy" src="<%- config.logo_medium %>">
  <h1 class="IndexHero-title">
    Sleek, modular open source JavaScript file uploader
  </h1>
  <div class="IndexHero-description">
    <%- config.description %>
  </div>
  <div class="IndexHero-buttons">
    <a href="/docs/" class="button button--cta">Get Started</a>
    <a href="https://github.com/transloadit/uppy" class="button button--secondary">
      Uppy on GitHub
      <span class="GithubStars">★ <%- partial('partials/generated_stargazers') %></span>
    </a>
  </div>
</section>

<section class="IndexLogos">
  <div class="IndexLogos-container">
    <h2 class="IndexLogos-title">Integrates well with</h2>
    <div class="IndexLogos-logos">
      <a class="IndexLogos-item IndexLogos-item--js" href="/docs/" title="Vanilla JS">
        <%- inline_svg('/images/integrations/js.svg') %>
      </a>
      <a class="IndexLogos-item IndexLogos-item--react" href="/docs/react/" title="React">
        <%- inline_svg('/images/integrations/react.svg') %>
      </a>
      <a class="IndexLogos-item IndexLogos-item--vue" href="/docs/vue/" title="Vue.js">
        <%- inline_svg('/images/integrations/vue.svg') %>
      </a>
      <a class="IndexLogos-item IndexLogos-item--svelte" href="/docs/svelte" title="Svelte">
        <%- inline_svg('/images/integrations/svelte.svg') %>
      </a>
    </div>
  </div>
</section>

<section class="IndexDemo">
  <div class="IndexDemo-tabContent">
    <div class="TabPane TabPane--active" id="live-demo">
      <div class="IndexDemo-uppyWrapper">
        <div class="IndexDemo-uppy" id="demo"></div>
      </div>
    </div> <!-- /live-demo -->

    <div class="TabPane" id="video">
      <div class="IndexDemo-video">
        <video autoplay loop muted playsinline>
          <source src="/images/uppy-2-0-demo-aug-2021.mp4" type="video/mp4">
          Your browser does not support the video tag, you can <a href="/images/uppy-2-0-demo-aug-2021.mp4">download the video</a>
          to watch it.
        </video>
      </div>
    </div> <!-- /video -->

    <div class="TabPane" id="code">
      <div class="IndexDemo-code">
        <%- partial('partials/frontpage-code-sample') %>
      </div>
    </div> <!-- /code -->
  </div>

  <ul class="Tabs">
    <li class="Tabs-item">
      <a class="Tabs-link Tabs-link--active" href="#live-demo">
        <span class="Tabs-icon">
          <svg width="11" height="15" viewBox="0 0 11 15">
            <path d="M0 0v12.5L3.667 9l3.143 6 2.619-1.5L5.762 8 11 7.5z" fill-rule="evenodd" />
          </svg>
        </span>
        Live demo
      </a>
    </li>
    <li class="Tabs-item">
      <a class="Tabs-link" href="#video">
        <span class="Tabs-icon">
          <svg width="19" height="19" viewBox="0 0 19 19">
            <path
              d="M9.5 19a9.5 9.5 0 1 1 0-19 9.5 9.5 0 0 1 0 19zm0-2a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zM14 9.5l-6.75 3.897V5.603L14 9.5z"
              fill-rule="nonzero" />
          </svg>
        </span>
        Video
      </a>
    </li>
    <li class="Tabs-item">
      <a class="Tabs-link" href="#code">
        <span class="Tabs-icon">
          <svg width="29" height="17" viewBox="0 0 29 17">
            <path
              d="M8.45 5.748L2.402 8.484 8.45 11.22v2.16L.17 9.6V7.44l8.28-3.78v2.088zm11.34 5.544l6.048-2.736L19.79 5.82V3.66l8.28 3.78V9.6l-8.28 3.78v-2.088zm-9.7 5.308L15.85.4h2.16l-5.76 16.2h-2.16z"
              fill-rule="nonzero" />
          </svg>
        </span>
        Code
      </a>
    </li>
  </ul>
</section>

<section class="IndexFeatures">
  <h2>Features</h2>
  <ul class="IndexFeatures-list">
    <li><strong>Lightweight</strong> and modular, plugin-based architecture, easy on dependencies <img width="16" align="absmiddle" src="/images/emojis/zap.png" /></li>
    <li>Large uploads survive network hiccups thanks to <strong>resumable file uploads</strong> via the open <strong><a href="https://tus.io/">tus</a></strong> standard</li>
    <li><img width="16" align="absmiddle" src="/images/emojis/battery.png" /> Saves battery and data plan by letting users pick files from <strong>Webcam, Dropbox, Google Drive and Instagram</strong>, while letting servers do the heavy lifting via <strong><a href="/docs/companion/">Companion</a></strong></li>
    <li>Works great with the file encoding and processing backend from <strong><a href="https://transloadit.com/">Transloadit</a></strong>, but also works great without <img width="16" align="absmiddle" src="/images/emojis/transloadit.png" /></li>
    <li><strong>Open source and driven by the community</strong> We listen closely and adjust the project based on your feedback <img width="16" align="absmiddle" src="/images/emojis/heart.png" /></li>
    <li><strong>Sleek user interface <img width="16" align="absmiddle" src="/images/emojis/sparkles.png" /></strong></li>
    <li>File recovery (after a browser crash or accidental navigation) via <strong><a href="/docs/golden-retriever/">Golden Retriever</a></strong></li>
    <li>Speaks <strong><a href="/docs/locales/#List-of-locale-packs">multiple languages</a></strong> (i18n) <img width="16" align="absmiddle" src="/images/emojis/earth_africa.png" /></li>
    <li>Built with accessibility in mind</li>
    <li><strong>Free to the world, forever</strong></li>
    <li>Cute as a puppy, also accepts cat pictures <img width="16" align="absmiddle" src="/images/emojis/dog.png" /></li>
  </ul>
</section>

<section class="IndexReviews">
  <ul class="IndexReviews-list">
    <li class="IndexReviews-item">
      <a class="IndexReviews-link" href="https://books.producthunt.com/bestof2017" target="_blank"
        rel="noreferrer noopener">
        <div class="IndexReviews-imgWrapper">
          <img class="IndexReviews-img" src="/images/testimonials/producthunt.png"
            srcset="/images/testimonials/producthunt@2x.png 2x" alt="Product Hunt">
        </div>
        The Best Product Launches
      </a>
    </li>

    <li class="IndexReviews-item">
      <a class="IndexReviews-link" href="https://stackshare.io/posts/top-developer-tools-2017" target="_blank" rel="noreferrer noopener">
        <div class="IndexReviews-imgWrapper">
          <img class="IndexReviews-img" src="/images/testimonials/stackshare.png" srcset="/images/testimonials/stackshare@2x.png 2x" alt="StackShare">
        </div>
        Top 10 tools of the year
      </a>
    </li>

    <li class="IndexReviews-item">
      <a class="IndexReviews-link" href="https://twitter.com/smashingmag/status/1097870169043546112" target="_blank" rel="noreferrer noopener">
        <div class="IndexReviews-imgWrapper">
          <img class="IndexReviews-img" src="/images/testimonials/smashing-magazine.png" srcset="/images/testimonials/smashing-magazine@2x.png 2x" alt="Smashing Magazine">
        </div>
        “Soooo useful”
      </a>
    </li>
  </ul>
</section>

<section class="IndexLogos IndexLogos--customers">
  <div class="IndexLogos-container">
    <h2 class="IndexLogos-title">Used by</h2>
    <div class="IndexLogos-logos">
      <a href="https://www.coursera.org/" class="IndexLogos-item IndexLogos-item--coursera">
        <%- inline_svg('/images/featured-customers/coursera.svg') %>
      </a>
      <a href="https://www.photobox.com/" class="IndexLogos-item IndexLogos-item--photobox">
        <%- inline_svg('/images/featured-customers/photobox.svg') %>
      </a>
      <a href="https://issuu.com/" class="IndexLogos-item IndexLogos-item--issuu">
        <%- inline_svg('/images/featured-customers/issuu.svg') %>
      </a>
      <a href="https://zulipchat.com/" class="IndexLogos-item IndexLogos-item--zulip">
        <%- inline_svg('/images/featured-customers/zulip.svg') %>
      </a>
    </div>
    <div class="IndexLogos-join">
      Using Uppy in your project? <a href="https://github.com/transloadit/uppy/issues/769" rel="noreferrer noopener" target="_blank">Let us know ›</a>
    </div>
  </div>
</section>

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

  <div class="on-the-githubs" data-event-source="repos/transloadit/uppy">Loading...</div>
</section>

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

<footer class="IndexFooter">
  <p><img class="IndexFooter-logo" title="Uppy" alt="Uppy" src="<%- config.logo_medium %>"></p>
  <p>Released under the <a href="http://opensource.org/licenses/MIT" rel="noreferrer noopener" target="_blank">MIT License</a> ⋅ <a href="/privacy-policy/">Privacy Policy</a></p>
  <p>© <%- date(Date.now(), 'YYYY') %> <a href="https://transloadit.com" target="_blank">Transloadit</a></p>
</footer>

<link href="https://releases.transloadit.com/uppy/v2.0.2/uppy.min.css" rel="stylesheet">
<script src="https://releases.transloadit.com/uppy/v2.0.2/uppy.min.js"></script>

<script>
  var TUS_ENDPOINT = 'https://tusd.tusdemo.net/files/'
  var COMPANION_ENDPOINT = 'http://localhost:3020'
  if (location.hostname === 'uppy.io') {
    COMPANION_ENDPOINT = '//companion.uppy.io'
  }

  var uppy = new Uppy.Core({ debug: true })
    .use(Uppy.Dashboard, {
      target: '#demo',
      inline: true,
      metaFields: [
        { id: 'license', name: 'License', placeholder: 'specify license' },
        { id: 'caption', name: 'Caption', placeholder: 'describe what the image is about' }
      ]
    })
    .use(Uppy.GoogleDrive, { target: Uppy.Dashboard, companionUrl: COMPANION_ENDPOINT })
    .use(Uppy.Instagram, { target: Uppy.Dashboard, companionUrl: COMPANION_ENDPOINT })
    .use(Uppy.Dropbox, { target: Uppy.Dashboard, companionUrl: COMPANION_ENDPOINT })
    // .use(Uppy.Box, { target: Uppy.Dashboard, companionUrl: COMPANION_ENDPOINT })
    .use(Uppy.Facebook, { target: Uppy.Dashboard, companionUrl: COMPANION_ENDPOINT })
    .use(Uppy.OneDrive, { target: Uppy.Dashboard, companionUrl: COMPANION_ENDPOINT })
    .use(Uppy.Webcam, { target: Uppy.Dashboard })
    .use(Uppy.Url, { target: Uppy.Dashboard, companionUrl: COMPANION_ENDPOINT })
    .use(Uppy.Tus, { endpoint: TUS_ENDPOINT})

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