84 lines
3.6 KiB
HTML
84 lines
3.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Examples</title>
|
|
<meta name="description" content="Videos people have made here, each with the script it was filmed from.">
|
|
<link rel="stylesheet" href="/assets/app.css">
|
|
<style>
|
|
.ex{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:18px;
|
|
display:grid;grid-template-columns:minmax(200px,320px) 1fr;gap:24px;align-items:start}
|
|
@media(max-width:700px){.ex{grid-template-columns:1fr}}
|
|
.ex video{width:100%;border-radius:10px;background:#000;border:1px solid var(--line);max-height:560px}
|
|
.ex h3{margin:0 0 4px;font-size:20px}
|
|
.ex .kind{font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
|
|
.ex .about{color:var(--muted);margin:0 0 12px}
|
|
.ex ol{margin:0;padding-left:22px}
|
|
.ex ol li{margin-bottom:8px}
|
|
.ex details summary{cursor:pointer;color:var(--accent);font-size:14.5px;margin-bottom:10px}
|
|
.cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
|
|
<header class="page">
|
|
<h1 id="h1">See what it makes</h1>
|
|
<p id="lead">Each of these was written, voiced and filmed here. The script is beside the video it became.</p>
|
|
</header>
|
|
|
|
<section>
|
|
<div class="msg" id="msg"></div>
|
|
<div id="list"><p style="color:var(--muted)">Loading the examples…</p></div>
|
|
</section>
|
|
|
|
<section id="ctawrap" style="display:none">
|
|
<div class="card cta">
|
|
<div style="flex:1;min-width:240px">
|
|
<b>Want to make one?</b><br>
|
|
<span style="color:var(--muted)">We are letting people in a few at a time.</span>
|
|
</div>
|
|
<a class="btn" href="/join.html" style="text-decoration:none">Join the waiting list</a>
|
|
</div>
|
|
</section>
|
|
|
|
<footer id="foot"></footer>
|
|
</div>
|
|
|
|
<script src="/assets/app.js"></script>
|
|
<script>
|
|
navBar("demo");
|
|
|
|
function words(site) {
|
|
if (site && site.key === "book") {
|
|
document.getElementById("h1").textContent = "A book, on screen";
|
|
document.getElementById("lead").textContent = "Scenes filmed from a manuscript: the screenplay lines are beside the film they became.";
|
|
}
|
|
document.getElementById("foot").textContent = ((site && site.name) || "PayToLaugh") + (site && site.tagline ? " · " + site.tagline : "");
|
|
}
|
|
words(Site.get());
|
|
|
|
(async function () {
|
|
var r = await api("demo_list", {});
|
|
words(Site.get());
|
|
var box = document.getElementById("list");
|
|
if (!r || !r.ok) { box.innerHTML = ""; showMsg("msg", (r && r.error) || "The examples could not be loaded."); return; }
|
|
if (!Session.token()) document.getElementById("ctawrap").style.display = "block";
|
|
if (!r.examples.length) { box.innerHTML = '<p style="color:var(--muted)">Examples are on their way.</p>'; return; }
|
|
box.innerHTML = r.examples.map(function (x) {
|
|
return '<div class="ex"><div><video controls preload="metadata" playsinline'
|
|
+ (x.poster ? ' poster="' + esc(x.poster) + '"' : '') + ' src="' + esc(x.video) + '"></video></div>'
|
|
+ '<div><div class="kind">' + (x.kind === "book" ? "from a book" : "a pet with opinions") + '</div>'
|
|
+ '<h3>' + esc(x.title) + '</h3>'
|
|
+ (x.note ? '<p class="about">' + esc(x.note) + '</p>' : '')
|
|
+ (x.script.length
|
|
? '<details' + (x.script.length <= 6 ? ' open' : '') + '><summary>The script, ' + x.script.length + (x.script.length === 1 ? ' line' : ' lines') + '</summary><ol>'
|
|
+ x.script.map(function (l) { return '<li>' + esc(l) + '</li>'; }).join("") + '</ol></details>'
|
|
: '')
|
|
+ '</div></div>';
|
|
}).join("");
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|