Style submit and thank-you pages
This commit is contained in:
Ben Visness
parent
dcdbc67b6c
commit
a6caf8e9bd
Binary file not shown.
|
After Width: | Height: | Size: 86 B |
Binary file not shown.
|
Before Width: | Height: | Size: 86 B After Width: | Height: | Size: 86 B |
Binary file not shown.
|
After Width: | Height: | Size: 70 B |
Binary file not shown.
|
After Width: | Height: | Size: 462 B |
Binary file not shown.
|
After Width: | Height: | Size: 371 B |
Binary file not shown.
|
After Width: | Height: | Size: 513 B |
Binary file not shown.
|
After Width: | Height: | Size: 538 B |
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
|
@ -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 }}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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 }}
|
||||
|
|
@ -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 }}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue