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)
|
||||
}
|
||||
|
||||
var RegexTimeMachine = regexp.MustCompile("^/time-machine$")
|
||||
|
||||
func BuildTimeMachine() string {
|
||||
defer CatchPanic()
|
||||
return Url("/time-machine", nil)
|
||||
}
|
||||
|
||||
// QUESTION(ben): Can we change these routes?
|
||||
|
||||
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.RegexJamRecap2023_Visibility, JamRecap2023_Visibility)
|
||||
|
||||
hmnOnly.GET(hmnurl.RegexTimeMachine, TimeMachine)
|
||||
|
||||
hmnOnly.GET(hmnurl.RegexStaffRolesIndex, StaffRolesIndex)
|
||||
hmnOnly.GET(hmnurl.RegexStaffRole, StaffRole)
|
||||
|
||||
|
|
|
|||
|
|
@ -87,3 +87,9 @@ func Conferences(c *RequestContext) ResponseData {
|
|||
res.MustWriteTemplate("conferences.html", getBaseDataAutocrumb(c, "Conferences"), c.Perf)
|
||||
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