44r0n7/pi-kit
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases 10 Wiki Activity

Revamp onboarding page styling

Browse Source
This commit is contained in:
Aaron
2025-12-13 13:51:25 -05:00
parent 8c06962f62
commit 50be46df45
2 changed files with 110 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
pikit-web/onboarding/index.html
View File

@@ -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>

131
pikit-web/onboarding/style.css
View File

@@ -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;
}