103 lines
4.8 KiB
HTML
103 lines
4.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Join the waiting list</title>
|
|
<meta name="description" content="We are letting people in a few at a time. Leave your name, email and cell phone and we will send you an invitation.">
|
|
<link rel="stylesheet" href="/assets/app.css">
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
|
|
<header class="page">
|
|
<h1>Join the waiting list</h1>
|
|
<p>We are letting people in a few at a time. Leave your details and we will email you an
|
|
invitation when your place comes up. <a href="/demo.html">See what people have made</a>.</p>
|
|
</header>
|
|
|
|
<section style="max-width:560px">
|
|
<div class="card" id="formcard">
|
|
<div class="msg" id="msg"></div>
|
|
<form id="form" novalidate>
|
|
<div class="row">
|
|
<div class="field">
|
|
<label for="first">First name</label>
|
|
<input type="text" id="first" autocomplete="given-name" maxlength="60" required>
|
|
</div>
|
|
<div class="field">
|
|
<label for="last">Last name</label>
|
|
<input type="text" id="last" autocomplete="family-name" maxlength="60" required>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label for="email">Email address</label>
|
|
<span class="hint">Your invitation is sent here, and it is how you sign in.</span>
|
|
<input type="email" id="email" autocomplete="email" placeholder="you@example.com" required>
|
|
</div>
|
|
<div class="field">
|
|
<label for="phone">Cell phone (United States)</label>
|
|
<span class="hint">When you sign in we text a short code to this number. It has to be a US cell phone that can receive texts.</span>
|
|
<input type="text" id="phone" inputmode="tel" autocomplete="tel-national" placeholder="(555) 555-0142" maxlength="20" required>
|
|
</div>
|
|
<!-- Not for people. Left empty by anyone filling this in by hand. -->
|
|
<div style="position:absolute;left:-6000px" aria-hidden="true">
|
|
<label for="company">Company</label>
|
|
<input type="text" id="company" tabindex="-1" autocomplete="off">
|
|
</div>
|
|
<button class="btn" id="go" type="submit">Put me on the list</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="card" id="done" style="display:none">
|
|
<h2 style="margin:0 0 10px;font-size:22px">You are on the list.</h2>
|
|
<p style="margin:0;color:var(--muted)">We will email <b id="doneEmail"></b> when your place comes up.
|
|
The email has a link; open it and we text a code to your phone to finish signing in.
|
|
There is nothing else to do for now.</p>
|
|
</div>
|
|
|
|
<p class="note" style="margin-top:22px">
|
|
We use your phone number only to text sign-in codes, and your email only for your
|
|
invitation and your account. Message and data rates may apply to the texts.
|
|
</p>
|
|
</section>
|
|
|
|
<footer id="foot"></footer>
|
|
</div>
|
|
|
|
<script src="/assets/app.js"></script>
|
|
<script>
|
|
navBar("join");
|
|
(function () { var s = Site.get() || {}; document.getElementById("foot").textContent = (s.name || "PayToLaugh") + (s.tagline ? " · " + s.tagline : ""); })();
|
|
|
|
// Ten digits, shown the way people write them.
|
|
document.getElementById("phone").addEventListener("input", function () {
|
|
var d = this.value.replace(/\D/g, "");
|
|
if (d.length === 11 && d[0] === "1") d = d.slice(1);
|
|
d = d.slice(0, 10);
|
|
this.value = d.length > 6 ? "(" + d.slice(0, 3) + ") " + d.slice(3, 6) + "-" + d.slice(6)
|
|
: d.length > 3 ? "(" + d.slice(0, 3) + ") " + d.slice(3) : d;
|
|
});
|
|
|
|
document.getElementById("form").addEventListener("submit", async function (e) {
|
|
e.preventDefault();
|
|
hideMsg("msg");
|
|
var v = function (id) { return document.getElementById(id).value.trim(); };
|
|
var digits = v("phone").replace(/\D/g, "");
|
|
if (!v("first") || !v("last")) { showMsg("msg", "Please give your first and last name."); return; }
|
|
if (!/^[^@\s]+@[^@\s.]+\.[^@\s]+$/.test(v("email"))) { showMsg("msg", "That email address does not look right."); return; }
|
|
if (digits.length !== 10) { showMsg("msg", "Please give a US cell phone number, ten digits with the area code."); return; }
|
|
|
|
var btn = document.getElementById("go");
|
|
btn.disabled = true; btn.textContent = "One moment…";
|
|
var r = await api("waitlist_join", { first_name: v("first"), last_name: v("last"), email: v("email"),
|
|
phone: v("phone"), company: v("company") });
|
|
btn.disabled = false; btn.textContent = "Put me on the list";
|
|
if (!r || !r.ok) { showMsg("msg", (r && r.error) || "That did not work. Please try again."); return; }
|
|
document.getElementById("doneEmail").textContent = v("email");
|
|
document.getElementById("formcard").style.display = "none";
|
|
document.getElementById("done").style.display = "block";
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|