From 50be46df459e5ca0d8ef4aa267132ac28db3b458 Mon Sep 17 00:00:00 2001
From: Aaron <aaron@pikit.local>
Date: Sat, 13 Dec 2025 13:51:25 -0500
Subject: [PATCH] Revamp onboarding page styling

---
 pikit-web/onboarding/index.html |  21 +++--
 pikit-web/onboarding/style.css  | 131 +++++++++++++++++++++++---------
 2 files changed, 110 insertions(+), 42 deletions(-)

diff --git a/pikit-web/onboarding/index.html b/pikit-web/onboarding/index.html
index 79a709f..ea16ff9 100644
--- a/pikit-web/onboarding/index.html
+++ b/pikit-web/onboarding/index.html
@@ -10,14 +10,21 @@
     <main class="card">
       <header>
         <div class="dot"></div>
-        <h1>Secure connection to your Pi-Kit</h1>
+        <h1>Welcome to your Pi-Kit</h1>
       </header>
 
-      <p>
-        You’re on your Pi-Kit. Everything stays on your local network. Let’s switch to the
-        secure (HTTPS) dashboard.
+      <p class="welcome">Great news — you’re already on your Pi-Kit and it’s responding.</p>
+      <p class="subtle">
+        Everything stays on your local network. Let’s move you to the secure (HTTPS) dashboard so you
+        can manage Pi-Kit safely.
       </p>
 
+      <div class="badges">
+        <span class="badge"><span class="dot"></span> Local-only traffic</span>
+        <span class="badge"><span class="dot"></span> Works for Pi-Kit & DietPi dashboards</span>
+        <span class="badge"><span class="dot"></span> HTTPS ready once trusted</span>
+      </div>
+
       <section class="actions">
         <button id="continueBtn">Continue to secure dashboard</button>
         <a class="ghost" id="downloadCa" href="/assets/pikit-ca.crt" download>Download Pi-Kit CA</a>
@@ -29,7 +36,7 @@
           <li>Brave/Chrome: click <strong>Advanced</strong> → <strong>Proceed</strong>.</li>
           <li>Firefox: click <strong>Advanced</strong> → <strong>Accept the Risk & Continue</strong>.</li>
         </ul>
-        <p>This is safe for your own Pi on your own network.</p>
+        <p>This warning is expected the first time. It’s safe for your own Pi on your own network.</p>
       </section>
 
       <section class="steps">
@@ -55,9 +62,7 @@
         </details>
       </section>
 
-      <p class="footnote">
-        Once trusted, this page will auto-forward you to the secure dashboard.
-      </p>
+      <p class="footnote">Once trusted, this page will auto-forward you to the secure dashboard.</p>
     </main>
 
     <script>
diff --git a/pikit-web/onboarding/style.css b/pikit-web/onboarding/style.css
index a53ed7b..ec4476f 100644
--- a/pikit-web/onboarding/style.css
+++ b/pikit-web/onboarding/style.css
@@ -1,14 +1,20 @@
 :root {
   color-scheme: dark;
-  --bg: #0c111a;
-  --panel: #131a24;
-  --text: #dce5f7;
-  --muted: #95a3c1;
-  --accent: #3dd598;
-  --border: #1f2734;
+  --bg: #070b15;
+  --panel: rgba(13, 18, 28, 0.9);
+  --panel-2: rgba(18, 26, 40, 0.7);
+  --text: #e9f0ff;
+  --muted: #9bb0ca;
+  --accent: #44d392;
+  --accent-2: #6cc9ff;
+  --border: #1b2538;
+  --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
+  --glow: 0 20px 70px rgba(68, 211, 146, 0.14);
 }
 
-* {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
@@ -17,37 +23,45 @@ body {
   min-height: 100vh;
   display: grid;
   place-items: center;
-  background: radial-gradient(120% 120% at 20% 20%, #162133, #0c111a 60%);
+  padding: 32px 22px;
+  background: radial-gradient(140% 140% at 12% 18%, #0f1625, #080c14 58%);
   color: var(--text);
   font-family: "DM Sans", "Inter", system-ui, -apple-system, sans-serif;
-  padding: 24px;
 }
 
 .card {
-  max-width: 720px;
+  max-width: 920px;
   width: 100%;
   background: var(--panel);
   border: 1px solid var(--border);
-  border-radius: 16px;
-  padding: 20px 22px 24px;
-  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.35);
+  border-radius: 18px;
+  padding: 28px 30px 32px;
+  box-shadow: var(--shadow), var(--glow);
+  backdrop-filter: blur(10px);
 }
 
 header {
   display: flex;
   align-items: center;
   gap: 12px;
-  margin-bottom: 12px;
+  margin-bottom: 8px;
 }
 
 h1 {
   margin: 0;
-  font-size: 1.35rem;
+  font-size: 1.7rem;
+  letter-spacing: 0.01em;
 }
 
 p {
-  margin: 8px 0;
+  margin: 10px 0;
   color: var(--muted);
+  line-height: 1.55;
+}
+
+.welcome {
+  font-size: 1.05rem;
+  color: var(--text);
 }
 
 .dot {
@@ -55,65 +69,108 @@ p {
   height: 12px;
   border-radius: 50%;
   background: var(--accent);
-  box-shadow: 0 0 12px var(--accent);
+  box-shadow: 0 0 14px var(--accent);
+}
+
+.badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin: 10px 0 4px;
+}
+
+.badge {
+  padding: 8px 12px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: var(--panel-2);
+  color: var(--text);
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.badge .dot {
+  width: 9px;
+  height: 9px;
+  box-shadow: none;
 }
 
 .actions {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
-  margin: 12px 0 4px;
+  margin: 18px 0 12px;
 }
 
 button,
 a.ghost {
   border: 1px solid var(--border);
-  background: var(--accent);
-  color: #0c111a;
-  padding: 10px 16px;
-  border-radius: 10px;
-  font-weight: 600;
+  background: linear-gradient(135deg, var(--accent), #2dbb7b);
+  color: #041008;
+  padding: 12px 18px;
+  border-radius: 12px;
+  font-weight: 700;
   cursor: pointer;
   text-decoration: none;
+  box-shadow: 0 10px 30px rgba(68, 211, 146, 0.22);
+  transition: transform 0.1s ease, box-shadow 0.2s ease, filter 0.2s ease;
+}
+
+button:hover,
+a.ghost:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 12px 36px rgba(68, 211, 146, 0.3);
+  filter: brightness(1.02);
 }
 
 button.ghost,
 a.ghost {
-  background: transparent;
+  background: rgba(255, 255, 255, 0.04);
   color: var(--text);
+  box-shadow: none;
 }
 
 button.copy {
   margin-left: 8px;
-  background: transparent;
+  background: rgba(255, 255, 255, 0.05);
   color: var(--text);
   border: 1px solid var(--border);
-  padding: 6px 10px;
+  padding: 7px 11px;
+  box-shadow: none;
+}
+
+.grid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  margin-top: 14px;
 }
 
 .steps {
-  margin: 12px 0;
-  padding: 10px 12px;
+  padding: 14px 15px;
   border: 1px solid var(--border);
   border-radius: 12px;
   background: rgba(255, 255, 255, 0.02);
 }
 
 .steps h3 {
-  margin: 0 0 6px;
+  margin: 0 0 8px;
+  letter-spacing: 0.01em;
 }
 
 ul {
-  margin: 6px 0 4px 18px;
+  margin: 6px 0 6px 18px;
   color: var(--text);
 }
 
 code {
   display: block;
-  background: #0b1018;
+  background: #0b111c;
   border: 1px solid var(--border);
-  padding: 10px;
-  border-radius: 10px;
+  padding: 12px;
+  border-radius: 12px;
   margin-top: 6px;
   color: var(--text);
   word-break: break-all;
@@ -126,6 +183,12 @@ summary {
 }
 
 .footnote {
-  font-size: 0.9rem;
+  font-size: 0.93rem;
   color: var(--muted);
+  margin-top: 12px;
+}
+
+.subtle {
+  color: var(--muted);
+  margin-top: 2px;
 }