Add work on the new Time Machine page
This commit is contained in:
parent
cace7fbcb1
commit
a1c5086190
|
|
@ -105,6 +105,13 @@ func BuildJamFeed2022() string {
|
||||||
return Url("/jam/2022/feed", nil)
|
return Url("/jam/2022/feed", nil)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var RegexTimeMachine = regexp.MustCompile("^/time-machine$")
|
||||||
|
|
||||||
|
func BuildTimeMachine() string {
|
||||||
|
defer CatchPanic()
|
||||||
|
return Url("/time-machine", nil)
|
||||||
|
}
|
||||||
|
|
||||||
// QUESTION(ben): Can we change these routes?
|
// QUESTION(ben): Can we change these routes?
|
||||||
|
|
||||||
var RegexLoginAction = regexp.MustCompile("^/login$")
|
var RegexLoginAction = regexp.MustCompile("^/login$")
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,178 @@
|
||||||
|
{{/*
|
||||||
|
This is a copy-paste from base.html because we want to preserve the unique
|
||||||
|
style of landing pages if we change base.html in the future.
|
||||||
|
*/}}
|
||||||
|
<!DOCTYPE html{{ if .OpenGraphItems }} prefix="og: http://ogp.me/ns#"{{ end }}>
|
||||||
|
<html lang="en-US">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="{{ static "visjam2023/favicon-16x16.png" }}">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="{{ static "visjam2023/favicon-32x32.png" }}">
|
||||||
|
|
||||||
|
{{ if .CanonicalLink }}<link rel="canonical" href="{{ .CanonicalLink }}">{{ end }}
|
||||||
|
{{ range .OpenGraphItems }}
|
||||||
|
{{ if .Property }}
|
||||||
|
<meta property="{{ .Property }}" content="{{ .Value }}" />
|
||||||
|
{{ else }}
|
||||||
|
<meta name="{{ .Name }}" content="{{ .Value }}" />
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
{{ if .Title }}
|
||||||
|
<title>{{ .Title }} | Handmade Network</title>
|
||||||
|
{{ else }}
|
||||||
|
<title>Handmade Network</title>
|
||||||
|
{{ end }}
|
||||||
|
<meta name="theme-color" content="#346ba6">
|
||||||
|
|
||||||
|
<script src="{{ static "js/templates.js" }}"></script>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="{{ static "fonts/mohave/stylesheet.css" }}">
|
||||||
|
<link href='https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,600' rel='stylesheet' type='text/css'>
|
||||||
|
<link href='https://fonts.googleapis.com/css?family=Fira+Mono:300,400,500,700' rel='stylesheet' type='text/css'>
|
||||||
|
<link rel="stylesheet" type="text/css" href="{{ static "style.css" }}">
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<script src="{{ static "js/carousel.js" }}"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="left white">
|
||||||
|
<div class="mt4-ns mw8 margin-center ph3-m ph4-l">
|
||||||
|
{{ template "header.html" . }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="jam-sections">
|
||||||
|
{{ block "content" . }}{{ end }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mw8 margin-center ph3-m ph4-l">
|
||||||
|
{{ template "footer.html" . }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,108 @@
|
||||||
|
{{ template "landing_page.html" . }} {{ define "content" }}
|
||||||
|
|
||||||
|
<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 }}
|
||||||
|
|
@ -67,6 +67,8 @@ func NewWebsiteRoutes(conn *pgxpool.Pool) http.Handler {
|
||||||
hmnOnly.GET(hmnurl.RegexJamFeed2023_Visibility, JamFeed2023_Visibility)
|
hmnOnly.GET(hmnurl.RegexJamFeed2023_Visibility, JamFeed2023_Visibility)
|
||||||
hmnOnly.GET(hmnurl.RegexJamRecap2023_Visibility, JamRecap2023_Visibility)
|
hmnOnly.GET(hmnurl.RegexJamRecap2023_Visibility, JamRecap2023_Visibility)
|
||||||
|
|
||||||
|
hmnOnly.GET(hmnurl.RegexTimeMachine, TimeMachine)
|
||||||
|
|
||||||
hmnOnly.GET(hmnurl.RegexStaffRolesIndex, StaffRolesIndex)
|
hmnOnly.GET(hmnurl.RegexStaffRolesIndex, StaffRolesIndex)
|
||||||
hmnOnly.GET(hmnurl.RegexStaffRole, StaffRole)
|
hmnOnly.GET(hmnurl.RegexStaffRole, StaffRole)
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -87,3 +87,9 @@ func Conferences(c *RequestContext) ResponseData {
|
||||||
res.MustWriteTemplate("conferences.html", getBaseDataAutocrumb(c, "Conferences"), c.Perf)
|
res.MustWriteTemplate("conferences.html", getBaseDataAutocrumb(c, "Conferences"), c.Perf)
|
||||||
return res
|
return res
|
||||||
}
|
}
|
||||||
|
|
||||||
|
func TimeMachine(c *RequestContext) ResponseData {
|
||||||
|
var res ResponseData
|
||||||
|
res.MustWriteTemplate("time-machine.html", getBaseDataAutocrumb(c, "Time Machine"), c.Perf)
|
||||||
|
return res
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue