Add hybrid firmware download warning

Author: Sanrax

docs/cart-guides/dspico.md

@@ -50,7 +50,7 @@ If you do not want to, or are unable to, reflash the firmware (no PC, missing US
 
         The DSpico hybrid firmware only works on the original DS, DS Lite, and modded DSi/3DS consoles. It **does not function on stock, unmodified DSi or 3DS systems** - [firmware with the WRFUxxed exploit](#__tabbed_1_2) enabled is required for stock consoles.
 
-    1. Download the [DSpico Hybrid Firmware](https://github.com/coderkei/dspico-hybrid-fw/releases/download/1.4/DSpico_Hybrid_B9S-1.3_GCD.uf2) UF2 file.
+    1. Download the <a href="https://github.com/coderkei/dspico-hybrid-fw/releases/download/1.4/DSpico_Hybrid_B9S-1.3_GCD.uf2" onclick="document.getElementById('hybrid-firmware-warning').showModal(); return false;">DSpico Hybrid Firmware</a> UF2 file.
 
     1. Remove the DSpico from your console, and remove any MicroSD card in the cart.
 
@@ -60,6 +60,20 @@ If you do not want to, or are unable to, reflash the firmware (no PC, missing US
 
     1. Your DSpico is now flashed! Follow the Pico-Launcher setup guide below to prepare the SD card.
 
+    <dialog class="hybrid-firmware-warning" id="hybrid-firmware-warning" role="alertdialog" aria-labelledby="hybrid-firmware-warning-title" aria-describedby="hybrid-firmware-warning-description">
+      <header class="hybrid-firmware-warning__header">
+        <h2 id="hybrid-firmware-warning-title">This firmware doesn't work on stock DSi and 3DS systems!</h2>
+      </header>
+      <div class="hybrid-firmware-warning__body" id="hybrid-firmware-warning-description">
+        <p>Hybrid firmware will work on Original DS and DS Lite systems. It will not work on DSi or 3DS consoles unless they have custom firmware installed.</p>
+        <p>Please use the WRFUxxed tab for stock consoles, or skip flashing if your DSpico already has WRFUxxed firmware installed.</p>
+      </div>
+      <form method="dialog" class="hybrid-firmware-warning__actions">
+        <button type="submit" class="md-button hybrid-firmware-warning__back" autofocus>Back</button>
+        <a class="md-button md-button--primary" href="https://github.com/coderkei/dspico-hybrid-fw/releases/download/1.4/DSpico_Hybrid_B9S-1.3_GCD.uf2" download onclick="this.closest('dialog').close()">Understood, Continue</a>
+      </form>
+    </dialog>
+
 === "WRFUxxed Firmware"
 
     !!! warning "DSpico WRFUxxed firmware"

docs/stylesheets/extra.css

@@ -98,4 +98,127 @@
 .compact-table table th:last-child,
 .compact-table table td:last-child {
     border-right: none;
+}
+
+/* DSpico Hybrid Firmware Download Warning */
+
+.hybrid-firmware-warning {
+  --hybrid-warning-color: var(--md-primary-fg-color);
+
+  box-sizing: border-box;
+  width: min(32rem, calc(100% - 2rem));
+  max-height: calc(100vh - 2rem);
+  padding: 0;
+  overflow: auto;
+  color: var(--md-default-fg-color);
+  background-color: var(--md-default-bg-color);
+  border: 0.15rem solid var(--hybrid-warning-color);
+  border-radius: 0.2rem;
+  box-shadow: var(--md-shadow-z3);
+}
+
+.hybrid-firmware-warning[open] {
+  animation: hybrid-firmware-warning-in 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.hybrid-firmware-warning::backdrop {
+  background-color: rgba(0, 0, 0, 0.7);
+  animation: hybrid-firmware-warning-backdrop-in 160ms ease-out;
+}
+
+@keyframes hybrid-firmware-warning-in {
+  from {
+    opacity: 0;
+    transform: translateY(0.35rem) scale(0.985);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes hybrid-firmware-warning-backdrop-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hybrid-firmware-warning[open],
+  .hybrid-firmware-warning::backdrop {
+    animation: none;
+  }
+}
+
+.hybrid-firmware-warning__header {
+  padding: 0.5rem 0.75rem;
+  color: #fff;
+  background-color: var(--hybrid-warning-color);
+}
+
+.hybrid-firmware-warning__header h2 {
+  margin: 0;
+  color: inherit;
+  font-size: 0.85rem;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.hybrid-firmware-warning__body {
+  padding: 1rem;
+}
+
+.hybrid-firmware-warning__body p {
+  margin: 0;
+}
+
+.hybrid-firmware-warning__body p + p {
+  margin-top: 0.75rem;
+}
+
+.hybrid-firmware-warning__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.6rem;
+  padding: 0 1rem 1rem;
+}
+
+.hybrid-firmware-warning__back {
+  color: var(--md-default-fg-color) !important;
+  background-color: var(--md-default-fg-color--lightest) !important;
+  border-color: var(--md-default-fg-color--lighter) !important;
+}
+
+.hybrid-firmware-warning__back:focus {
+  color: var(--md-default-fg-color) !important;
+  background-color: var(--md-default-fg-color--lightest) !important;
+  border-color: var(--md-default-fg-color--lighter) !important;
+}
+
+.hybrid-firmware-warning__back:focus-visible {
+  outline: 0.1rem solid var(--md-accent-fg-color);
+  outline-offset: 0.1rem;
+}
+
+.hybrid-firmware-warning__back:hover {
+  color: var(--md-default-fg-color) !important;
+  background-color: var(--md-default-fg-color--lighter) !important;
+  border-color: var(--md-default-fg-color--light) !important;
+}
+
+@media screen and (max-width: 30rem) {
+  .hybrid-firmware-warning__actions {
+    flex-direction: column-reverse;
+  }
+
+  .hybrid-firmware-warning__actions .md-button {
+    width: 100%;
+    text-align: center;
+  }
 }