{% extends 'layout.html' %}

{% block content %}
  <div class='hero'>
    <div id="face_container">
      <div class='currentFace'></div>
    </div>
    <div class='intro'>
      <div class='headline'>
        MegaPixels is an art project that explores the dark side of face recognition and the future of computer vision.
      </div>

      <div class='buttons'>
        <a href="/datasets/"><button class='important'>Explore Datasets</button></a><a href="/analyze/"><button class='normal'>Analyze Your Face</button></a>
      </div>

      <div class='under'>
        Made by Adam Harvey in partnership with Mozilla.<br/>
        <a href='/about/'>Read more about MegaPixels</a>
      </div>
    </div>
  </div>

  <section class='wide'>
    <h2>Facial Recognition Datasets</h2>
    <div class='right-sidebar'>
      <div class='meta'>
        <div><div class='gray'>Found</div><div>275 datasets</div></div>
        <div><div class='gray'>Created between</div><div>1993-2018</div></div>
        <div><div class='gray'>Smallest dataset</div><div>20 images</div></div>
        <div><div class='gray'>Largest dataset</div><div>10,000,000 images</div></div>
        <div><div class='gray'>Highest resolution faces</div><div>450x500 (Unconstrained College Students)</div></div>
        <div><div class='gray'>Lowest resolution faces</div><div>16x20 pixels (QMUL SurvFace)</div></div>
      </div>
    </div>

    <p>Regular Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Regular Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Regular Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </section>

  <section class='wide'>
    <h2>Dataset Portraits</h2>
    <p>
      We have prepared detailed studies of some of the more noteworthy datasets.
    </p>

    <div class="dataset-list">
    {% for dataset in datasets %}
      <a href="{{ dataset.url }}">
        <div class="dataset">
          {{ dataset.title }}
        </div>
      </a>
    {% endfor %}
    </div>
  </section>

{% endblock %}

{% block scripts %}
<script src="/assets/js/vendor/three.min.js"></script>
<script src="/assets/js/vendor/three.meshline.js"></script>
<script src="/assets/js/vendor/oktween.js"></script>
<script src="/assets/js/app/face.js"></script>
{% endblock %}