71 lines
3.7 KiB
HTML
71 lines
3.7 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<title>Signup</title>
|
||
<style>
|
||
:root { --bg:#0b0b10; --panel:#151823; --text:#e8e8ea; --muted:#a7adbb; --brand:#7c5cff; }
|
||
* { box-sizing:border-box; }
|
||
body {
|
||
margin:0; font:16px/1.45 system-ui, -apple-system, Segoe UI, Inter, Roboto, sans-serif;
|
||
color:var(--text);
|
||
background: radial-gradient(900px 600px at 20% -10%, #1e2240 0%, #0b0b10 55%) fixed;
|
||
min-height:100dvh; display:grid; place-items:center; padding:24px;
|
||
font-family: "Zilla Slab", serif;
|
||
}
|
||
.card { width:100%; max-width:560px; background:var(--panel);
|
||
border:1px solid rgba(255,255,255,.06); border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.35); overflow:hidden; }
|
||
.media { aspect-ratio:16/9; background:#222735; display:grid; place-items:center; border-bottom:1px solid rgba(255,255,255,.05); }
|
||
.media svg { width:35%; max-width:180px; opacity:.85; }
|
||
.content { padding:20px clamp(18px,3.5vw,28px) 24px; }
|
||
h1 { margin:0 0 6px; font-size:clamp(20px,2.3vw,28px); }
|
||
p.lead { color:var(--muted); margin:0 0 14px; }
|
||
form { display:grid; gap:12px; margin-top:10px; }
|
||
.row { display:flex; gap:10px; }
|
||
input[type="email"]{
|
||
flex:1; background:#0f1220; color:var(--text); border:1px solid rgba(255,255,255,.12);
|
||
border-radius:12px; padding:14px; outline:none;
|
||
}
|
||
input[type="email"]:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(124,92,255,.15) }
|
||
button{ background:var(--brand); color:#fff; border:0; padding:14px 18px; border-radius:12px; font-weight:600; cursor:pointer }
|
||
.hint{ color:var(--muted); font-size:13px }
|
||
.msg{ margin-top:6px; font-size:14px }
|
||
.msg.success{ color:#6de39b } .msg.error{ color:#ff6b81 }
|
||
</style>
|
||
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
|
||
|
||
<script defer src="https://umami.mycod.in/script.js" data-website-id="951c3ca0-5510-46a2-a2f1-e69d55796403"></script>
|
||
</head>
|
||
<body>
|
||
<main class="card" aria-labelledby="title">
|
||
<div class="media" aria-hidden="true">
|
||
<img src="Mesh-Life_500x500.png" width="72%" style="padding:20px;">
|
||
</div>
|
||
<div class="content">
|
||
<h1 id="title">Be first to know</h1>
|
||
<p class="lead">Drop your email below. We’ll ping you when we launch.</p>
|
||
<form id="signup" novalidate>
|
||
<div class="row">
|
||
<input id="email" name="email" type="email" inputmode="email" placeholder="your@email.com" required autocomplete="email">
|
||
<button id="submitBtn" type="submit">Notify me</button>
|
||
</div>
|
||
<div id="msg" class="msg" role="status" aria-live="polite"></div>
|
||
</form>
|
||
</div>
|
||
</main>
|
||
<script>
|
||
const form=document.getElementById('signup');const email=document.getElementById('email');const msg=document.getElementById('msg');
|
||
const valid=v=>/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
|
||
form.addEventListener('submit',async e=>{e.preventDefault();msg.textContent='';const val=email.value.trim();
|
||
if(!valid(val)){msg.textContent='Invalid email';msg.className='msg error';return;}
|
||
try{const r=await fetch('/api/subscribe',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:val})});
|
||
if(!r.ok)throw new Error();
|
||
msg.textContent='Thanks! You’re on the list.';msg.className='msg success';form.reset();}
|
||
catch{msg.textContent='Error saving email';msg.className='msg error';}});
|
||
</script>
|
||
</body>
|
||
</html> |