155 lines
5.7 KiB
HTML
155 lines
5.7 KiB
HTML
{{ 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 URLs</strong>
|
|
<div id="media-inputs" class="flex flex-column g1">
|
|
<input
|
|
class="win95-input"
|
|
type="url"
|
|
name="media_url"
|
|
required
|
|
>
|
|
</div>
|
|
<div class="f7">
|
|
<a href="javascript:anotherVideo()">+ Add video</a>
|
|
</div>
|
|
<div class="f7 less-spacing">
|
|
<p>
|
|
Take videos of yourself using an old device. The videos should:
|
|
</p>
|
|
<ul>
|
|
<li>Show the entire device</li>
|
|
<li>Clearly show the contents of the device's screen</li>
|
|
<li>Have minimal editing and clear sound</li>
|
|
</ul>
|
|
<p>
|
|
Upload the videos somewhere publicly accessible, then share the link here. We can download videos from file-sharing services or any video service supported by youtube-dl. <a href="javascript:terms()">See licensing terms.</a>
|
|
</p>
|
|
<p>
|
|
If you have a comparable modern device, feel free to submit video of that as well!
|
|
</p>
|
|
<div id="terms" class="dn">
|
|
<div></div> <!-- now the hr is not the :first-child -->
|
|
<hr>
|
|
<p>By submitting this form, you are granting us permission to:</p>
|
|
<ul>
|
|
<li>Download copies of any submitted videos</li>
|
|
<li>Edit any submitted videos and publish them with attribution on our website and other promotional channels</li>
|
|
</ul>
|
|
<p>Submitted videos will not be used for any commercial purpose.</p>
|
|
</div>
|
|
</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 deviceInfo = document.querySelector("[name=device_info]");
|
|
let description = document.querySelector("[name=description]");
|
|
let submitBtn = document.querySelector("[type=submit]");
|
|
|
|
function mediaUrls() {
|
|
return document.querySelectorAll("[name=media_url]");
|
|
}
|
|
|
|
function saveData() {
|
|
const urls = Array.from(mediaUrls()).map(i => i.value);
|
|
localStorage.setItem("tm_media_url", JSON.stringify(urls));
|
|
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();
|
|
});
|
|
|
|
const urlsStr = localStorage.getItem("tm_media_url") ?? "";
|
|
let urls = [];
|
|
if (urlsStr[0] === "[") {
|
|
urls = JSON.parse(urlsStr);
|
|
} else if (urlsStr) {
|
|
urls = [urlsStr];
|
|
}
|
|
|
|
for (let i = 1; i < urls.length; i++) {
|
|
anotherVideo();
|
|
}
|
|
for (const [i, input] of mediaUrls().entries()) {
|
|
input.value = urls[i] ?? "";
|
|
}
|
|
|
|
deviceInfo.value = localStorage.getItem("tm_device_info") ?? "";
|
|
description.value = localStorage.getItem("tm_description") ?? "";
|
|
|
|
function terms() {
|
|
document.querySelector("#terms").classList.toggle("dn");
|
|
}
|
|
|
|
function anotherVideo() {
|
|
const input = document.createElement("input");
|
|
input.classList.add("win95-input");
|
|
input.type = "url";
|
|
input.name = "media_url";
|
|
document.querySelector("#media-inputs").appendChild(input);
|
|
}
|
|
</script>
|
|
{{ end }}
|