mirror of
https://github.com/OpenSquawk/OpenSquawk
synced 2026-08-10 11:33:26 +08:00
add invites html
This commit is contained in:
itsrubberduck
163
public/docs/invites.html
Normal file
163
public/docs/invites.html
Normal file
@@ -0,0 +1,163 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" style="margin:0;padding:0;background:#0b1020;">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="color-scheme" content="dark light">
|
||||
<meta name="supported-color-schemes" content="dark light">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>OpenSquawk Classroom – Invite</title>
|
||||
<style>
|
||||
/* --- Basic reset for email --- */
|
||||
html,body{margin:0!important;padding:0!important;background:#0b1020;}
|
||||
img{border:0;outline:none;text-decoration:none;max-width:100%;height:auto;display:block;}
|
||||
table{border-collapse:collapse!important;}
|
||||
a{color:#22d3ee;text-decoration:none;}
|
||||
/* --- Container --- */
|
||||
.wrapper{width:100%;background:#0b1020;}
|
||||
.container{max-width:640px;margin:0 auto;}
|
||||
/* --- Card / glass look --- */
|
||||
.card{
|
||||
background:rgba(255,255,255,0.06);
|
||||
border:1px solid rgba(255,255,255,0.12);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-radius:16px;
|
||||
box-shadow:0 30px 100px rgba(5,12,32,.45);
|
||||
}
|
||||
/* --- Text --- */
|
||||
.text{color:#e5f2ff;}
|
||||
.muted{color:rgba(255,255,255,.65);}
|
||||
.chip{
|
||||
display:inline-block;
|
||||
padding:6px 10px;
|
||||
border-radius:9999px;
|
||||
font-size:12px; letter-spacing:.12em; text-transform:uppercase;
|
||||
color:#e6fbff; border:1px solid rgba(255,255,255,.15);
|
||||
background:rgba(255,255,255,.08);
|
||||
}
|
||||
h1,h2,h3,p{margin:0;}
|
||||
h1{color:#fff;font-size:28px;line-height:1.2;font-weight:700;}
|
||||
h2{color:#22d3ee;font-size:18px;line-height:1.4;font-weight:600;}
|
||||
p{color:#dbe7ff;font-size:16px;line-height:1.6;}
|
||||
small{font-size:12px;color:rgba(255,255,255,.55);}
|
||||
/* --- Button --- */
|
||||
.btn{
|
||||
display:inline-block; padding:14px 20px; border-radius:14px;
|
||||
background:#06b6d4; color:#fff!important; font-weight:700; text-align:center;
|
||||
box-shadow:0 0 40px rgba(34,211,238,.25);
|
||||
}
|
||||
.btn:hover{background:#22d3ee;}
|
||||
/* --- Code pill --- */
|
||||
.code{
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
|
||||
font-size:16px; letter-spacing:.08em; color:#eaffff;
|
||||
padding:12px 14px; border-radius:12px; text-align:center;
|
||||
background:rgba(34,211,238,.15);
|
||||
border:1px solid rgba(34,211,238,.35);
|
||||
}
|
||||
/* --- Spacing helpers --- */
|
||||
.px{padding-left:24px;padding-right:24px;}
|
||||
.py{padding-top:24px;padding-bottom:24px;}
|
||||
.mt8{margin-top:8px;} .mt12{margin-top:12px;} .mt16{margin-top:16px;}
|
||||
.mt20{margin-top:20px;} .mt24{margin-top:24px;} .mt28{margin-top:28px;}
|
||||
.mb0{margin-bottom:0;}
|
||||
/* --- Mobile --- */
|
||||
@media (max-width: 600px){
|
||||
.px{padding-left:18px;padding-right:18px;}
|
||||
h1{font-size:24px;}
|
||||
p{font-size:15px;}
|
||||
}
|
||||
</style>
|
||||
<!--[if mso]>
|
||||
<style>
|
||||
.card{background:#12182d;border:1px solid #1f2a44;}
|
||||
</style>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body class="wrapper">
|
||||
<!-- Preheader (hidden in most clients) -->
|
||||
<div style="display:none;max-height:0;overflow:hidden;opacity:0;color:transparent;">
|
||||
Your invite code for OpenSquawk Classroom – listen to radio calls and type the correct info. Works without a sim.
|
||||
</div>
|
||||
|
||||
<table role="presentation" width="100%" bgcolor="#0b1020">
|
||||
<tr><td align="center">
|
||||
<table role="presentation" class="container" width="100%" cellpadding="0" cellspacing="0">
|
||||
<!-- Header -->
|
||||
<tr><td class="px" style="padding-top:32px;padding-bottom:16px;">
|
||||
<table role="presentation" width="100%">
|
||||
<tr>
|
||||
<td align="left">
|
||||
<div class="chip">Invite · Classroom</div>
|
||||
<div style="height:10px;"></div>
|
||||
<h1>OpenSquawk</h1>
|
||||
<p class="muted" style="margin-top:6px;">Live AI ATC · in development</p>
|
||||
</td>
|
||||
<td align="right" style="vertical-align:top;">
|
||||
<!-- optional logo placeholder -->
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td></tr>
|
||||
|
||||
<!-- Hero / Card -->
|
||||
<tr><td class="px">
|
||||
<table role="presentation" width="100%" class="card">
|
||||
<tr><td class="py px">
|
||||
<h2>Welcome to the Classroom (alpha)</h2>
|
||||
<p class="mt12">Thanks for joining the waitlist! Here’s your personal invite code for first access to <strong>OpenSquawk Classroom</strong>:</p>
|
||||
|
||||
<div class="mt16 code">{{INVITE_CODE}}</div>
|
||||
|
||||
<p class="mt20">Classroom is a pre-stage of our main product <strong>Live ATC</strong>. You can <strong>listen to real-world style radio calls</strong> and <strong>type the details correctly</strong> — it works <em>without</em> a simulator.</p>
|
||||
|
||||
<p class="mt16">We’re working hard on <strong>Live ATC</strong> — the core experience that connects to flight sims and adds voice input, building on everything you practise in Classroom.</p>
|
||||
|
||||
<div class="mt20" align="center">
|
||||
<!-- Bulletproof-ish CTA -->
|
||||
<!--[if mso]>
|
||||
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" href="https://opensquawk.de/classroom" style="height:48px;v-text-anchor:middle;width:320px;" arcsize="20%" stroke="f" fillcolor="#06b6d4">
|
||||
<w:anchorlock/>
|
||||
<center style="color:#ffffff;font-family:Segoe UI, Arial, sans-serif;font-size:16px;font-weight:bold;">
|
||||
Register and get started
|
||||
</center>
|
||||
</v:roundrect>
|
||||
<![endif]-->
|
||||
<!--[if !mso]><!-- -->
|
||||
<a class="btn" href="https://opensquawk.de/classroom" target="_blank" rel="noopener">
|
||||
Register and get started
|
||||
</a>
|
||||
<!--<![endif]-->
|
||||
</div>
|
||||
|
||||
<p class="mt24">We’d love your feedback — simply reply to this email or use the form:</p>
|
||||
<p class="mt8"><a href="https://opensquawk.de/feedback" target="_blank" rel="noopener">opensquawk.de/feedback</a></p>
|
||||
|
||||
<p class="mt16">Questions? Ping me (Nick) on <strong>Discord</strong> or reply here.</p>
|
||||
|
||||
<p class="mt24"><strong>Note on language:</strong> we’re a small team of friends & colleagues from Germany who kicked this off. We plan to develop primarily in <strong>English</strong> so the international community can join and lead the conversation soon.</p>
|
||||
|
||||
<p class="mt24"><strong>PS:</strong> Thanks for being among the first — your early notes will directly shape the roadmap.</p>
|
||||
</td></tr>
|
||||
</table>
|
||||
</td></tr>
|
||||
|
||||
<!-- Footer -->
|
||||
<tr><td class="px" style="padding-top:18px;padding-bottom:38px;">
|
||||
<table role="presentation" width="100%">
|
||||
<tr>
|
||||
<td align="left">
|
||||
<small>© OpenSquawk · Not for real-world aviation.</small><br>
|
||||
<small><a href="https://opensquawk.de/feedback" target="_blank" rel="noopener">Feedback</a> · <a href="mailto:info@opensquawk.de">info@opensquawk.de</a></small>
|
||||
</td>
|
||||
<td align="right">
|
||||
<small class="muted">Built with an open stack</small>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td></tr>
|
||||
</table>
|
||||
</td></tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user