{{ template "timemachine_base.html" . }}

{{ define "content" }}

<div class="center-layout content mw7 ph3 flex flex-column g3">
  <div>
    <div class="mv5 flex justify-center">
      <img
        class="pixelated drop-shadow"
        src="{{ static "timemachine/splash.gif" }}"
        alt="Time Machine"
      >
    </div>

    <div class="frame mv4">
      {{ template "frame title" "Overview" }}
      <div class="post-content pa3 flex g3">
        <div class="flex-shrink-0">
          <img class="pixelated" src="{{ dataimg "timemachine/win95-computer.png" }}">
        </div>
        <div>
          <p>
            This summer, we're digging out old devices and seeing what they were actually like to use.
          </p>
          <p>
            Our phones today are far more powerful than our desktop computers from decades ago. And yet, those old computers worked just fine! The Time Machine project is an opportunity to boot up those old devices and see how they feel to use.
          </p>
          <p>
            As our hardware has improved, how has the user experience changed? Which parts have stayed the same? Which parts have gotten worse? There's only one way to find out.
          </p>
        </div>
      </div>
    </div>

    <div class="frame mv4">
      {{ template "frame title" "How To Participate" }}
      <div class="post-content pa3">
        <div class="flex flex-column g3">
          <div class="flex g3">
            <div class="flex-shrink-0">
              <img class="pixelated" src="{{ dataimg "timemachine/win95-camera.png" }}">
            </div>
            <div>
              <p>
                <strong>Take video of yourself using an older device.</strong> Any personal device from any time period is great. We're particularly interested in the history of day-to-day devices like personal computers and mobile phones.
              </p>
            </div>
          </div>
          <div class="flex g3">
            <div class="flex-shrink-0">
              <img class="pixelated" src="{{ dataimg "timemachine/win95-upload.png" }}">
            </div>
            <div>
              <p>
                <strong>Upload the video somewhere.</strong> Upload to Google Drive, Dropbox, or even YouTube - anywhere we can download it from.
              </p>
            </div>
          </div>
          <div class="flex g3">
            <div class="flex-shrink-0">
              <img class="pixelated" src="{{ dataimg "timemachine/win95-pad.png" }}">
            </div>
            <div>
              <p>
                <strong>Send us the video link + extra info.</strong> Tell us about this device, when you got it, what specs it has, and anything else you think is interesting. We'll get the video posted here on the website for everyone to see.
              </p>
              <p>
                At the end of the summer, we'll compile all the submissions into a final report.
              </p>
            </div>
          </div>
          <div class="flex justify-end g3">
            <a class="win95-btn" href="{{ .SubmitUrl }}"><u>S</u>ubmit Your Own</a>
          </div>
        </div>
      </div>
    </div>

    <div class="mv5 flex justify-center">
      <div class="frame mw6">
        {{ template "frame title" "New Videos" }}
        <div class="pa3 flex g3">
          <div class="flex-shrink-0">
            <img class="pixelated" src="{{ dataimg "timemachine/win95-info.png" }}">
          </div>
          <div class="flex flex-column flex-grow-1 g3">
            <div>
              {{ if eq .NumSubmissions 1 }}
                {{ .NumSubmissions }} video has been submitted! Would you like to see it?
              {{ else }}
                {{ .NumSubmissions }} videos have been submitted! Would you like to see them?
              {{ end }}
            </div>
            <div class="flex justify-end g3">
              <a href="{{ .SubmissionsUrl }}"><div class="win95-btn"><u>Y</u>es</div></a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="mv4">
      {{ template "timemachine_submission.html" .FeaturedSubmission }}
    </div>
  </div>
</div>
{{ end }}
