hmn/src/templates/src/time-machine.html

{{ template "landing_page.html" . }} {{ define "content" }}

<style>
  body {
    /* 
    This is too light for accessiblity imo. I'll darken them a bit and see how Ben feels
    about it. -- Jake 5/26/2023
    background: linear-gradient(15deg, #b4c4fe, #eb8cbf ); */
    background: linear-gradient(15deg, #7391fd, #e25ca4);
  }

  .user-options,
  header form,
  header .menu-bar .wiki,
  header .menu-bar .library {
    display: none !important;
  }

  header {
    border-bottom-color: white;
    margin-bottom: 0 !important;
  }

  .hmn-logo {
    background-color: rgba(255, 255, 255, 0.1) !important;
  }

  header a,
  footer a {
    color: white !important;
  }

  header .submenu {
    background-color: #000080;
  }

  #top-container {
    margin: 3rem 0;
  }

  #logo {
    width: 16rem;
  }

  h1,
  h2,
  h3 {
    font-family: "MohaveHMN", sans-serif;
    margin-bottom: 0;
    font-weight: normal;
  }

  /* '95-esque styles */
  .frame {
    width: 100%;
    background: #c0c0c0;
    border-width: 1px;
    border-color: #ffffff #000000 #000000 #ffffff;
    border-style: solid;
    padding: 1px;
    margin-bottom: 2rem;
  }

  .frame ol,
  .frame ul {
    padding-left: 5px;
  }

  .frame ul {
    list-style: disc;
  }

  .frame strong {
    font-weight: bold;
  }

  .frame .title {
    padding: 6px;
    width: 100%;
    background: #000080;
    color: #fff;
  }

  .frame .body {
    padding: 6px;
    color: black;
  }

  .frame * {
    font-family: "MS Sans Serif"; /* Can someone with a Mac confirm this font is available?
                                           Despite the name, it appears to be pre-installed:
           https://en.wikipedia.org/wiki/List_of_typefaces_included_with_macOS  */
  }

  .frame p {
    margin-bottom: 1rem;
  }

  .frame .image_copy {
    display: flex;
  }

  .frame .image {
    width: 40%;
    flex: 1 0 auto;
  }

  .frame .copy {
    padding-left: 10px;
  }

  .frame img {
    border: 4px solid white;
  }
</style>

<div class="center-layout mw7 ph3 ph0-ns flex flex-column g3">
  <div id="top-container">
    <div class="title"><h1 class="center mb4">Time Machine</h1></div>
    <div class="frame">
      <div class="title">Overview</div>
      <div class="body">
        <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. But those old computers worked just fine! The Time
          Machine project is a chance to revisit those old devices and see what
          they were actually like 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 class="frame">
      <div class="title">How To Participate</div>
      <div class="body">
        <ol>
          <li>
            <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>
          </li>
          <li>
            <p>
              <strong>Upload the video somewhere.</strong> Upload to Google
              Drive, Dropbox, or even YouTube - anywhere we can download it
              from.
            </p>
          </li>
          <li>
            <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>
          </li>
        </ol>
        <p>
          At the end of the summer, we’ll compile all the submissions into a
          final report.
        </p>
      </div>
    </div>

    <div class="frame">
      <div class="title">Example Submission</div>
      <div class="body mt1">
        <div class="image_copy">
          <div class="image">
            <img
              src="https://handmade-network.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Febaabb39-ec9e-4d10-8e50-2099b06b3e29%2FUntitled.png?id=cc736ce6-079f-4b4c-91fe-dcd046fe95a5&table=block&spaceId=81085921-8dca-40db-a20f-e6b9092d2ce2&width=2000&userId=&cache=v2"
              alt=""
            />
          </div>
          <div class="copy">
            <p><strong>Description</strong></p>
            <p>
              This is the iPod Touch I got when I was 13. It was my first major
              tech purchase and an early device in the iOS lineup. When I
              purchased this I think it was running iOS 3; at this point it has
              iOS 5. I was pleased to see that the battery still holds a charge
              quite well, and it consistently runs at about 30 to 60 frames per
              second.
            </p>
            <p>
              In the video you can see several built-in apps. Media playback
              still works great, and scrubbing around in songs is instantaneous.
              App switching works well. The calculator launches instantly (as
              you would hope). I was shocked to see that the old Google Maps app
              still works - apparently they have kept their old tile-based map
              servers online. It even gave me public transit directions.
            </p>
            <p>
              Overall, I would say this device feels only a hair slower than my
              current iPhone.
            </p>
            <p><strong>Device Info</strong></p>
            <p>iPod Touch 3rd gen, model MC008LL</p>
            <ul>
              <li><p>Release year: 2009</p></li>
              <li><p>Processor: 600MHz Samsung S5L8922, single-core</p></li>
              <li><p>Memory: 256MB LPDDR2 @ 200 MHz</p></li>
              <li><p>Operating system: iOS 5</p></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{{ end }}