dvorakmortonxd/freezmo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Polish the API-key gate

Browse source 
- Add a theme toggle to the gate (sun/moon ghost button next to the help
  button); it switches instantly and persists to localStorage.
- Strengthen the corner glows so the stage reads atmospheric in both themes
  (bigger, slightly stronger radial gradients behind the card).
- Center the logo, heading, subtitle and footnote inside the card.
- Dark mode: replace the solid white logo tile with a subtle raised tile
  (thin border, light snowflake); make the card only slightly lighter than
  the near-black page with a low-opacity border and soft shadow.
- Disabled Continue keeps the primary fill at ~45% opacity with a crisp
  label instead of a faded muddy one; fully solid once text is entered.
- Bigger 36px corner buttons and a visible "How do I get a key?" text link
  under the input that opens the same modal.
- Shorten and balance the reassurance line.
- Help modal: step circles aligned to the first text line, emphasised
  free-tier callout with a check icon, underlined links with an
  external-link icon, muted medium-weight UI labels, 36px close button
  aligned to the title.
- Gate test extended to 44 checks (theme toggle, text link, modal polish).
This commit is contained in:
Martin Dvořák 2026-10-07 05:34:32 +00:00
commit fee59b9577
3 changed files with 143 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

30
app/globals.css
View file

@ -103,12 +103,15 @@
--sidebar-bottom: #f6f6f7;
--sidebar-edge: 0 1px 0 var(--hairline), 6px 0 16px -14px rgb(13 13 13 / 0.28);
/* API-key gate: near-white stage with soft blank glows, tinted input. */
--gate-base: #f7f7f8;
--gate-glow-a: rgb(64 74 90 / 0.1);
--gate-glow-b: rgb(96 108 124 / 0.07);
--gate-base: #f6f6f8;
--gate-glow-a: rgb(88 106 132 / 0.16);
--gate-glow-b: rgb(126 140 160 / 0.12);
--gate-card: #ffffff;
--gate-card-border: #e7e7e9;
--gate-callout-border: #d9d9dc;
--field: #f3f3f4;
--field-border: #e2e2e4;
--shadow-gate: 0 28px 70px -36px rgb(13 13 13 / 0.35), 0 1px 2px rgb(13 13 13 / 0.05);
--shadow-gate: 0 28px 70px -36px rgb(13 13 13 / 0.3), 0 1px 2px rgb(13 13 13 / 0.05);
--shadow-card: 0 1px 2px rgb(13 13 13 / 0.06), 0 1px 3px rgb(13 13 13 / 0.04);
--shadow-card-hover: 0 10px 28px -14px rgb(13 13 13 / 0.22), 0 1px 2px rgb(13 13 13 / 0.06);
}
@ -131,12 +134,15 @@
--sidebar-bottom: #151515;
--sidebar-edge: 0 1px 0 var(--hairline), 6px 0 16px -14px rgb(0 0 0 / 0.75);
/* API-key gate: near-black stage, monochrome glows, raised input. */
--gate-base: #0d0d0e;
--gate-glow-a: rgb(255 255 255 / 0.075);
--gate-glow-b: rgb(255 255 255 / 0.05);
--field: #383838;
--field-border: rgb(255 255 255 / 0.12);
--shadow-gate: 0 30px 80px -40px rgb(0 0 0 / 0.9), 0 1px 2px rgb(0 0 0 / 0.4);
--gate-base: #0c0c0d;
--gate-glow-a: rgb(255 255 255 / 0.14);
--gate-glow-b: rgb(255 255 255 / 0.09);
--gate-card: #171718;
--gate-card-border: rgb(255 255 255 / 0.08);
--gate-callout-border: rgb(255 255 255 / 0.2);
--field: #242425;
--field-border: rgb(255 255 255 / 0.1);
--shadow-gate: 0 30px 80px -40px rgb(0 0 0 / 0.85), 0 1px 2px rgb(0 0 0 / 0.4);
--shadow-card: 0 1px 2px rgb(0 0 0 / 0.25);
--shadow-card-hover: 0 10px 28px -16px rgb(0 0 0 / 0.55), 0 1px 2px rgb(0 0 0 / 0.3);
}
@ -191,8 +197,8 @@ body {
softest "blurred glow" available without extra layers. */
.gate-bg {
background:
radial-gradient(64rem 46rem at 112% -12%, var(--gate-glow-a), transparent 68%),
radial-gradient(58rem 42rem at -12% 112%, var(--gate-glow-b), transparent 70%),
radial-gradient(72rem 54rem at 108% -14%, var(--gate-glow-a), transparent 70%),
radial-gradient(64rem 48rem at -14% 112%, var(--gate-glow-b), transparent 72%),
var(--gate-base);
}