Onboarding: center CTA, move CA download into install section

This commit is contained in:
Aaron
2025-12-13 14:36:29 -05:00
parent 08cf472bf7
commit 2cfb9779d6
2 changed files with 25 additions and 8 deletions

View File

@@ -19,13 +19,6 @@
can manage Pi-Kit safely. can manage Pi-Kit safely.
</p> </p>
<section class="actions">
<button id="continueBtn">Continue to secure dashboard</button>
<a class="ghost" id="downloadCa" href="http://pikit.local/assets/pikit-ca.crt" download>
Download Pi-Kit CA
</a>
</section>
<section class="steps"> <section class="steps">
<h3>Why switch to HTTPS?</h3> <h3>Why switch to HTTPS?</h3>
<ul> <ul>
@@ -46,7 +39,12 @@
<section class="steps"> <section class="steps">
<h3>Install the Pi-Kit CA (recommended, one-time)</h3> <h3>Install the Pi-Kit CA (recommended, one-time)</h3>
<div class="ca-download">
<p>This removes future warnings for the Pi-Kit dashboard.</p> <p>This removes future warnings for the Pi-Kit dashboard.</p>
<a class="ghost download-inline" id="downloadCa" href="http://pikit.local/assets/pikit-ca.crt" download>
Download Pi-Kit CA
</a>
</div>
<details> <details>
<summary>Windows</summary> <summary>Windows</summary>
<p>Run <strong>mmc</strong> → Add/Remove Snap-in → Certificates (Computer) → Trusted Root CAs → Import <em>pikit-ca.crt</em>.</p> <p>Run <strong>mmc</strong> → Add/Remove Snap-in → Certificates (Computer) → Trusted Root CAs → Import <em>pikit-ca.crt</em>.</p>
@@ -77,6 +75,10 @@
</details> </details>
</section> </section>
<section class="actions">
<button id="continueBtn">Go to secure dashboard</button>
</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> </main>

View File

@@ -136,6 +136,21 @@ a.ghost {
text-align: center; text-align: center;
} }
.ca-download {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.download-inline {
width: auto;
padding: 8px 12px;
font-size: 0.95rem;
background: rgba(255, 255, 255, 0.06);
}
button.copy { button.copy {
margin-left: 8px; margin-left: 8px;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);