Style submit and thank-you pages

src/templates/src/layouts/timemachine_base.html

@@ -144,13 +144,37 @@
   }
 
   .win95-btn {
-    width: 5.6rem;
+    min-width: 5.6rem;
+    height: 1.4375rem; /* 23px */
     border-width: 2px;
     border-style: solid;
     border-color: #fff #333 #333 #fff;
     border-image: url('{{ dataimg "timemachine/win95-border-btn.gif" }}') 4;
     text-align: center;
     cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: normal;
+    padding: 0 1rem !important;
+  }
+
+  .win95-btn:active {
+    border-image: url('{{ dataimg "timemachine/win95-border-btn-pressed.gif" }}') 4;
+    padding-top: 2px !important;
+  }
+
+  .win95-input {
+    border-width: 2px;
+    border-style: solid;
+    border-image: url('{{ dataimg "timemachine/win95-border-input.gif" }}') 4;
+    outline: none;
+    background-color: white !important;
+    resize: vertical; /* only applies to textareas so whatever */
+  }
+
+  .less-spacing p {
+    margin: 0.2rem 0;
   }
 </style>
 

src/templates/src/time_machine_form.html

@@ -1,48 +0,0 @@
-{{ template "timemachine_base.html" . }}
-
-{{ define "frame title" }}
-  <div class="title">
-    {{ . }}
-    <img class="frame-close" src="{{ dataimg "timemachine/win95-close.gif" }}">
-  </div>
-{{ end }}
-
-{{ define "content" }}
-<div class="center-layout content mw7 ph3 flex flex-column g3">
-	<div class="frame mv4">
-		{{ template "frame title" "Hello" }}
-		<form class="post-content" action="" method="POST">
-			{{ csrftoken .Session }}
-			<input type="url" name="media_url" required />
-			<textarea name="device_info" required></textarea>
-			<textarea name="description" required></textarea>
-			<input class="win95-btn" type="submit" value="Submit" />
-		</form>
-	</div>
-</div>
-<script>
-	let form = document.querySelector("form");
-	let mediaUrl = document.querySelector("[name=media_url]");
-	let deviceInfo = document.querySelector("[name=device_info]");
-	let description = document.querySelector("[name=description]");
-	let submitBtn = document.querySelector("[type=submit]");
-
-	function saveData() {
-		localStorage.setItem("tm_media_url", mediaUrl.value);
-		localStorage.setItem("tm_device_info", deviceInfo.value);
-		localStorage.setItem("tm_description", description.value);
-	}
-	form.addEventListener("submit", function() {
-		saveData();
-		submitBtn.disabled = true;
-	});
-
-	document.addEventListener("visibilitychange", function() {
-		saveData();
-	});
-
-	mediaUrl.value = localStorage.getItem("tm_media_url") ?? "";
-	deviceInfo.value = localStorage.getItem("tm_device_info") ?? "";
-	description.value = localStorage.getItem("tm_description") ?? "";
-</script>
-{{ end }}

src/templates/src/time_machine_form_done.html

@@ -1,21 +0,0 @@
-{{ template "timemachine_base.html" . }}
-
-{{ define "frame title" }}
-  <div class="title">
-    {{ . }}
-    <img class="frame-close" src="{{ dataimg "timemachine/win95-close.gif" }}">
-  </div>
-{{ end }}
-
-{{ define "content" }}
-<div class="center-layout content mw7 ph3 flex flex-column g3">
-	<div class="frame">
-		Thank you for your submission
-	</div>
-</div>
-<script>
-	localStorage.removeItem("tm_media_url");
-	localStorage.removeItem("tm_device_info");
-	localStorage.removeItem("tm_description");
-</script>
-{{ end }}

src/templates/src/timemachine.html

@@ -76,6 +76,9 @@
               </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>
@@ -93,7 +96,6 @@
             </div>
             <div class="flex justify-end g3">
               <div class="win95-btn"><u>Y</u>es</div>
-              <div class="win95-btn"><u>A</u>bsolutely</div>
             </div>
           </div>
         </div>

src/templates/src/timemachine_submit.html

@@ -0,0 +1,106 @@
+{{ template "timemachine_base.html" . }}
+
+{{ define "frame title" }}
+  <div class="title">
+    {{ . }}
+    <img class="frame-close" src="{{ dataimg "timemachine/win95-close.gif" }}">
+  </div>
+{{ end }}
+
+{{ define "content" }}
+<div class="center-layout content mw7 ph3 flex flex-column g3">
+  <div class="frame mv3 mv4-ns mw6 margin-center">
+    {{ template "frame title" "Submit A Video" }}
+    <form class="post-content" action="" method="POST">
+      {{ csrftoken .Session }}
+      <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-media.png" }}">
+            </div>
+            <div class="flex flex-column flex-grow-1 g1">
+              <strong>Video URL</strong>
+              <input
+                class="win95-input"
+                type="url"
+                name="media_url"
+                required
+              >
+              <div class="f7 less-spacing">
+                <p>
+                  Take video of yourself using an old device. The video should:
+                </p>
+                <ul>
+                  <li>Show the entire device so viewers have necessary context</li>
+                  <li>Clearly show the contents of the device's screen</li>
+                  <li>Have minimal editing, no commentary, and clear sound</li>
+                </ul>
+                <p>
+                  Upload the video somewhere publicly accessible, then share the link here. We can download videos from file-sharing services or any video service supported by youtube-dl.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="flex g3">
+            <div class="flex-shrink-0">
+              <img class="pixelated" src="{{ dataimg "timemachine/win95-checklist.png" }}">
+            </div>
+            <div class="flex flex-column flex-grow-1 g1">
+              <strong>Device Info</strong>
+              <textarea class="win95-input h4" name="device_info" required></textarea>
+              <div class="f7 less-spacing">
+                <p>
+                  Include specific info about the device such as its model number, release year, CPU speed, amount of memory, etc.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="flex g3">
+            <div class="flex-shrink-0">
+              <img class="pixelated" src="{{ dataimg "timemachine/win95-scroll.png" }}">
+            </div>
+            <div class="flex flex-column flex-grow-1 g1">
+              <strong>Description</strong>
+              <textarea class="win95-input h4" name="description" required></textarea>
+              <div class="f7 less-spacing">
+                <p>
+                  What's the story behind this device? When did you get it? What did you use it for? Is it in good shape? Is there anything interesting or notable about it?
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="mt3 flex justify-end g3">
+          <button class="win95-btn" type="submit" value="Submit"><u>S</u>ubmit</button>
+        </div>
+      </div>
+    </form>
+  </div>
+</div>
+<script>
+  let form = document.querySelector("form");
+  let mediaUrl = document.querySelector("[name=media_url]");
+  let deviceInfo = document.querySelector("[name=device_info]");
+  let description = document.querySelector("[name=description]");
+  let submitBtn = document.querySelector("[type=submit]");
+
+  function saveData() {
+    localStorage.setItem("tm_media_url", mediaUrl.value);
+    localStorage.setItem("tm_device_info", deviceInfo.value);
+    localStorage.setItem("tm_description", description.value);
+  }
+  form.addEventListener("submit", function() {
+    saveData();
+    submitBtn.disabled = true;
+  });
+
+  document.addEventListener("visibilitychange", function() {
+    saveData();
+  });
+
+  mediaUrl.value = localStorage.getItem("tm_media_url") ?? "";
+  deviceInfo.value = localStorage.getItem("tm_device_info") ?? "";
+  description.value = localStorage.getItem("tm_description") ?? "";
+</script>
+{{ end }}

src/templates/src/timemachine_thanks.html

@@ -0,0 +1,36 @@
+{{ template "timemachine_base.html" . }}
+
+{{ define "frame title" }}
+  <div class="title">
+    {{ . }}
+    <img class="frame-close" src="{{ dataimg "timemachine/win95-close.gif" }}">
+  </div>
+{{ end }}
+
+{{ define "content" }}
+<div class="center-layout content mw7 ph3 flex flex-column g3">
+  <div class="mv5 flex justify-center">
+    <div class="frame mw6">
+      {{ template "frame title" "Submission Complete" }}
+      <div class="pa3 flex g3">
+        <div class="flex-shrink-0">
+          <img class="pixelated" src="{{ dataimg "timemachine/win95-check.png" }}">
+        </div>
+        <div class="flex flex-column flex-grow-1 g3">
+          <div>
+            Thank you for your submission! We will review it and get it published on the site soon.
+          </div>
+          <div class="flex justify-end g3">
+            <a class="win95-btn" href="{{ .TimeMachineUrl }}"><u>O</u>K</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  localStorage.removeItem("tm_media_url");
+  localStorage.removeItem("tm_device_info");
+  localStorage.removeItem("tm_description");
+</script>
+{{ end }}

src/website/staticpages.go

@@ -87,21 +87,3 @@ func Conferences(c *RequestContext) ResponseData {
 	res.MustWriteTemplate("conferences.html", getBaseDataAutocrumb(c, "Conferences"), c.Perf)
 	return res
 }
-
-func TimeMachine(c *RequestContext) ResponseData {
-	baseData := getBaseDataAutocrumb(c, "Time Machine")
-	baseData.OpenGraphItems = []templates.OpenGraphItem{
-		{Property: "og:title", Value: "Time Machine"},
-		{Property: "og:site_name", Value: "Handmade Network"},
-		{Property: "og:type", Value: "website"},
-		{Property: "og:image", Value: hmnurl.BuildPublic("timemachine/opengraph.png", true)},
-		{Property: "og:description", Value: "This summer, dig out your old devices and see what they were actually like to use."},
-		{Property: "og:url", Value: hmnurl.BuildTimeMachine()},
-		{Name: "twitter:card", Value: "summary_large_image"},
-		{Name: "twitter:image", Value: hmnurl.BuildPublic("timemachine/twittercard.png", true)},
-	}
-
-	var res ResponseData
-	res.MustWriteTemplate("time-machine.html", baseData, c.Perf)
-	return res
-}

src/website/time_machine.go

@@ -7,12 +7,40 @@ import (
 	"git.handmade.network/hmn/hmn/src/email"
 	"git.handmade.network/hmn/hmn/src/hmnurl"
 	"git.handmade.network/hmn/hmn/src/oops"
+	"git.handmade.network/hmn/hmn/src/templates"
 )
 
+func TimeMachine(c *RequestContext) ResponseData {
+	baseData := getBaseDataAutocrumb(c, "Time Machine")
+	baseData.OpenGraphItems = []templates.OpenGraphItem{
+		{Property: "og:title", Value: "Time Machine"},
+		{Property: "og:site_name", Value: "Handmade Network"},
+		{Property: "og:type", Value: "website"},
+		{Property: "og:image", Value: hmnurl.BuildPublic("timemachine/opengraph.png", true)},
+		{Property: "og:description", Value: "This summer, dig out your old devices and see what they were actually like to use."},
+		{Property: "og:url", Value: hmnurl.BuildTimeMachine()},
+		{Name: "twitter:card", Value: "summary_large_image"},
+		{Name: "twitter:image", Value: hmnurl.BuildPublic("timemachine/twittercard.png", true)},
+	}
+
+	type TemplateData struct {
+		templates.BaseData
+		SubmitUrl string
+	}
+	tmpl := TemplateData{
+		BaseData:  baseData,
+		SubmitUrl: hmnurl.BuildTimeMachineForm(),
+	}
+
+	var res ResponseData
+	res.MustWriteTemplate("timemachine.html", tmpl, c.Perf)
+	return res
+}
+
 func TimeMachineForm(c *RequestContext) ResponseData {
 	var res ResponseData
 	res.MustWriteTemplate(
-		"time_machine_form.html",
+		"timemachine_submit.html",
 		getBaseDataAutocrumb(c, "Time Machine"),
 		c.Perf,
 	)
@@ -49,10 +77,19 @@ func TimeMachineFormSubmit(c *RequestContext) ResponseData {
 }
 
 func TimeMachineFormDone(c *RequestContext) ResponseData {
+	type TemplateData struct {
+		templates.BaseData
+		TimeMachineUrl string
+	}
+	tmpl := TemplateData{
+		BaseData:       getBaseDataAutocrumb(c, "Time Machine"),
+		TimeMachineUrl: hmnurl.BuildTimeMachine(),
+	}
+
 	var res ResponseData
 	res.MustWriteTemplate(
-		"time_machine_form_done.html",
+		"timemachine_thanks.html",
-		getBaseDataAutocrumb(c, "Time Machine"),
+		tmpl,
 		c.Perf,
 	)
 	return res