mirror of
https://github.com/OpenSquawk/OpenSquawk
synced 2026-05-15 03:25:40 +08:00
167 lines
7.5 KiB
HTML
167 lines
7.5 KiB
HTML
<!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">
|
||
<style>
|
||
/* --- Basic reset for email --- */
|
||
html,body{margin:0!important;padding:0!important;background:#0b1020; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; }
|
||
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:none;
|
||
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:20px;"></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/login?mode=register" 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/login?mode=register" 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:<fstrong> 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><br>
|
||
<small>If you prefer no more emails: <a href="{{UNSUBSCRIBE_URL}}" target="_blank" rel="noopener">Unsubscribe</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>
|