From d0c0ac4e440b8a1e1253172493036aca8f390a4c Mon Sep 17 00:00:00 2001
From: itsrubberduck <frappes_remoter.2e@icloud.com>
Date: Sun, 5 Oct 2025 16:53:22 +0200
Subject: [PATCH] add invites html

---
 public/docs/invites.html | 163 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 163 insertions(+)
 create mode 100644 public/docs/invites.html
diff --git a/public/docs/invites.html b/public/docs/invites.html
new file mode 100644
index 0000000..1df2bc3
--- /dev/null
+++ b/public/docs/invites.html
@@ -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>
