From a6caf8e9bdef5edef848cee92e667d2531ec3e81 Mon Sep 17 00:00:00 2001 From: Ben Visness Date: Thu, 1 Jun 2023 20:42:02 -0500 Subject: [PATCH] Style submit and thank-you pages --- .../timemachine/win95-border-btn-pressed.gif | Bin 0 -> 86 bytes .../img/timemachine/win95-border-btn.gif | Bin 86 -> 86 bytes .../img/timemachine/win95-border-input.gif | Bin 0 -> 70 bytes src/templates/img/timemachine/win95-check.png | Bin 0 -> 462 bytes .../img/timemachine/win95-checklist.png | Bin 0 -> 371 bytes src/templates/img/timemachine/win95-media.png | Bin 0 -> 513 bytes .../img/timemachine/win95-scroll.png | Bin 0 -> 538 bytes .../src/layouts/timemachine_base.html | 26 ++++- src/templates/src/time_machine_form.html | 48 -------- src/templates/src/time_machine_form_done.html | 21 ---- .../{time-machine.html => timemachine.html} | 4 +- src/templates/src/timemachine_submit.html | 106 ++++++++++++++++++ src/templates/src/timemachine_thanks.html | 36 ++++++ src/website/staticpages.go | 18 --- src/website/time_machine.go | 43 ++++++- 15 files changed, 210 insertions(+), 92 deletions(-) create mode 100644 src/templates/img/timemachine/win95-border-btn-pressed.gif create mode 100644 src/templates/img/timemachine/win95-border-input.gif create mode 100644 src/templates/img/timemachine/win95-check.png create mode 100644 src/templates/img/timemachine/win95-checklist.png create mode 100644 src/templates/img/timemachine/win95-media.png create mode 100644 src/templates/img/timemachine/win95-scroll.png delete mode 100644 src/templates/src/time_machine_form.html delete mode 100644 src/templates/src/time_machine_form_done.html rename src/templates/src/{time-machine.html => timemachine.html} (97%) create mode 100644 src/templates/src/timemachine_submit.html create mode 100644 src/templates/src/timemachine_thanks.html diff --git a/src/templates/img/timemachine/win95-border-btn-pressed.gif b/src/templates/img/timemachine/win95-border-btn-pressed.gif new file mode 100644 index 0000000000000000000000000000000000000000..b343fed047ee6dcacd8a722bdc060566c6093d9c GIT binary patch literal 86 zcmZ?wbhEHbCMz`~#dQUOxSz%0$N>kgl? em*SK;qJ0OLw?==@oIBn1smI#Yhcq*6*EQ|~c%nUjpQII?XlXy?QQb!g;W0B&i UpYLKqA8*L@^q96RfPujp0H;k9>i_@% literal 0 HcmV?d00001 diff --git a/src/templates/img/timemachine/win95-check.png b/src/templates/img/timemachine/win95-check.png new file mode 100644 index 0000000000000000000000000000000000000000..b184ecc0723d5debc33c8ff6cdef666ee6488ce7 GIT binary patch literal 462 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnF3?v&v(vJfvmUKs7M+SzC{oH>NSwWJ?9znhg z3{`3j3=J&|48MRv4KElNN(~qoUL`OvSj}Ky5HFasE6@fgAr#;f;tHfepn;*Gq2d4k z{|62nkXBn23KU^13GxeOaCmkj4a7r(cf-L}y$d`3>nv{&oAv8Li@yDQF{cVU&86El zlbISOt^37XBX&{BVfUjo3-2&V?PQWFTrjJzw~pavgWGa;m%o!=2fZojP>E_~UDMFS zy&N-o8t!kLtf8R&V&dWESdqs|tMY?g_x`mDv){O|z}WSR^VvIz z-xf6r?Av5{#eqZr&F-^1n3_Lqe0_Z8f95cptHiCrOUftDnm{ Hr-UW|V<()^ literal 0 HcmV?d00001 diff --git a/src/templates/img/timemachine/win95-checklist.png b/src/templates/img/timemachine/win95-checklist.png new file mode 100644 index 0000000000000000000000000000000000000000..a973d8080a6ebfedde67e0fc3f5db31349690f95 GIT binary patch literal 371 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnF3?v&v(vJfvmUKs7M+SzC{oH>NSwWJ?9znhg z3{`3j3=J&|48MRv4KElNN(~qoUL`OvSj}Ky5HFasE6@fgAsXNl;tEpG&;TU=|NnpB zzyTl)6j-%?HOO$rk|4ie28U-i(m`sfBQ_}pb7j#x%_cx0 zKTj9O5RLQ62@0|tij{T9Py>Uf LtDnm{r-UW|rtN0@ literal 0 HcmV?d00001 diff --git a/src/templates/img/timemachine/win95-media.png b/src/templates/img/timemachine/win95-media.png new file mode 100644 index 0000000000000000000000000000000000000000..610361c70d988bd1c87c849a4fcd70db9b80451b GIT binary patch literal 513 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnF3?v&v(vJfvmUKs7M+SzC{oH>NSwWJ?9znhg z3{`3j3=J&|48MRv4KElNN(~qoUL`OvSj}Ky5HFasE6@fgAsXNl;tHgJ;Q#;s2M!!) zXlVHVAINL?{p`CukY+3i@(X5gcy=QV#7XjYcVSB7u1NuM*h@TpUD+S8Nik>{e`o*i z0~EUB>EaloalUkdW8M)39@oUnrTY$VFu$16e}Yw~sLAr+7VdZTEwd~xPh0VMX~fCT z%0^}H<}-v9)>S`?>&!4Rkk<`r_C4XaCF%a=xfjD(MVxfmo-H`Ax#cg50P76ZD|2{P zJggLEo9QU9a3|MA%MOR=rP7-v5}pODx-&g#0h8j2iE{cMG;U|y5oeXwYx{6?LHER) z_ovCc(Yw3gq;XRAdAoM0THyy*4{V&da=oI}cboF`=|2n>=zd}EIPm;SREbx7=G9Nk zTRPh;B(lA8O{&`JzxBw6s8glbfGSez?Ygj$)AtNSwWJ?9znhg z3{`3j3=J&|48MRv4KElNN(~qoUL`OvSj}Ky5HFasE6@fgAs65i;tEpG(D48N{{sgO z0NFqukk7#IA4vTF&#-CB!Z@H9V@Z%-FoVOh8)+a;lDE4HQyOvdr~Ie{z3z3Fk)A=zFTN5<1yvN_BO?=H#( zIh{INQ8(wQwViFXPBlZ^f97etZnn?_qJ7WMz-s`-$o}NTFLNi$&8o=hY+hdvoClrix!qTA**-GVW#r= z4K*eS#WK&UivrRm0jRMXFgl+5Gcz=7-RrU;R=C_PLnB5k5 zyk^NSGX(luwZt`|BqgyV)hf9t6-Y4{85mmV8kp%CnS~e_Secqx85`&tm{=JY6m3%p fM$wR)pOTqYiCY8n>pAa%8W=oX{an^LB{Ts56<56@ literal 0 HcmV?d00001 diff --git a/src/templates/src/layouts/timemachine_base.html b/src/templates/src/layouts/timemachine_base.html index 33509694..54daaf6f 100644 --- a/src/templates/src/layouts/timemachine_base.html +++ b/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; } diff --git a/src/templates/src/time_machine_form.html b/src/templates/src/time_machine_form.html deleted file mode 100644 index 76ccbeb9..00000000 --- a/src/templates/src/time_machine_form.html +++ /dev/null @@ -1,48 +0,0 @@ -{{ template "timemachine_base.html" . }} - -{{ define "frame title" }} -
- {{ . }} - -
-{{ end }} - -{{ define "content" }} -
-
- {{ template "frame title" "Hello" }} -
- {{ csrftoken .Session }} - - - - -
-
-
- -{{ end }} diff --git a/src/templates/src/time_machine_form_done.html b/src/templates/src/time_machine_form_done.html deleted file mode 100644 index e0144c38..00000000 --- a/src/templates/src/time_machine_form_done.html +++ /dev/null @@ -1,21 +0,0 @@ -{{ template "timemachine_base.html" . }} - -{{ define "frame title" }} -
- {{ . }} - -
-{{ end }} - -{{ define "content" }} -
-
- Thank you for your submission -
-
- -{{ end }} diff --git a/src/templates/src/time-machine.html b/src/templates/src/timemachine.html similarity index 97% rename from src/templates/src/time-machine.html rename to src/templates/src/timemachine.html index 635fbea5..34b89629 100644 --- a/src/templates/src/time-machine.html +++ b/src/templates/src/timemachine.html @@ -76,6 +76,9 @@

+
+ Submit your own +
@@ -93,7 +96,6 @@
Yes
-
Absolutely
diff --git a/src/templates/src/timemachine_submit.html b/src/templates/src/timemachine_submit.html new file mode 100644 index 00000000..ddd475eb --- /dev/null +++ b/src/templates/src/timemachine_submit.html @@ -0,0 +1,106 @@ +{{ template "timemachine_base.html" . }} + +{{ define "frame title" }} +
+ {{ . }} + +
+{{ end }} + +{{ define "content" }} +
+
+ {{ template "frame title" "Submit A Video" }} +
+ {{ csrftoken .Session }} +
+
+
+
+ +
+
+ Video URL + +
+

+ Take video of yourself using an old device. The video should: +

+
    +
  • Show the entire device so viewers have necessary context
    • +
  • Clearly show the contents of the device's screen
    • +
  • Have minimal editing, no commentary, and clear sound
    • +
+

+ 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. +

+
+
+
+
+
+ +
+
+ Device Info + +
+

+ Include specific info about the device such as its model number, release year, CPU speed, amount of memory, etc. +

+
+
+
+
+
+ +
+
+ Description + +
+

+ 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? +

+
+
+
+
+
+ +
+
+
+
+
+ +{{ end }} diff --git a/src/templates/src/timemachine_thanks.html b/src/templates/src/timemachine_thanks.html new file mode 100644 index 00000000..9dee23cb --- /dev/null +++ b/src/templates/src/timemachine_thanks.html @@ -0,0 +1,36 @@ +{{ template "timemachine_base.html" . }} + +{{ define "frame title" }} +
+ {{ . }} + +
+{{ end }} + +{{ define "content" }} +
+
+
+ {{ template "frame title" "Submission Complete" }} +
+
+ +
+
+
+ Thank you for your submission! We will review it and get it published on the site soon. +
+
+ OK +
+
+
+
+
+
+ +{{ end }} diff --git a/src/website/staticpages.go b/src/website/staticpages.go index e91cc73d..8262547f 100644 --- a/src/website/staticpages.go +++ b/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 -} diff --git a/src/website/time_machine.go b/src/website/time_machine.go index 7bd55fdb..f8031f08 100644 --- a/src/website/time_machine.go +++ b/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", - getBaseDataAutocrumb(c, "Time Machine"), + "timemachine_thanks.html", + tmpl, c.Perf, ) return res