225 lines
6.2 KiB
HTML
225 lines
6.2 KiB
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-width: 2px;
|
||
border-color: #000000 #ffffff #ffffff #000000;
|
||
border-style: solid;
|
||
}
|
||
</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 }}
|