Martin Dvorak
67e2cefcfe
Frutiger Aero, closer to the mock: - The scene is water now: sun shafts through a bright surface, caustic patches, reeds on the left, a city silhouette on the right, and ten soap bubbles that actually rise (own keyframes, varied sizes/speeds/sway; the spans are display:none outside aero so they cost nothing elsewhere, and they sit still under reduced motion). - Pale blue glass at 0.8: still reads as glass, but dark navy text clears 4.5:1 over the water. The phone tab bar mixes the sheet glass instead of the page — in aero the page *is* the water, which left its labels at 3.9:1. - The aero page-level text (muted/subtle) is much darker for the same reason. - The PWA status bar follows the new water blue (#2fa7e6). The cookie notice is floating glass now (blurred backdrop, rim, shadow): as a plain card it read as part of the page background instead of a notice. Czech: "Tvoje mraznička" -> "Tvůj mrazák" (library title), test updated. Contrast: 0 below-minimum findings and 0 axe violations across every screen, all three themes. Version 0.2.1, SW -> freezmo-v55.
64 lines
2 KiB
TypeScript
64 lines
2 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useEffect, useState } from "react";
|
|
|
|
import { useI18n } from "@/lib/i18n";
|
|
|
|
const STORAGE_KEY = "freezmo.consent.v1";
|
|
|
|
/**
|
|
* The cookie notice. There are no cookies (see /cookies), so this is an
|
|
* honest "here is what we store in your browser" line, dismissed once and
|
|
* remembered. It sits below the immersive feeds in the stack (z-44) so it can
|
|
* never cover a study session, and above the phone tab bar.
|
|
*/
|
|
export function CookieConsent() {
|
|
const { t } = useI18n();
|
|
const [visible, setVisible] = useState(false);
|
|
|
|
useEffect(() => {
|
|
try {
|
|
setVisible(window.localStorage.getItem(STORAGE_KEY) === null);
|
|
} catch {
|
|
/* private mode: no storage, no banner */
|
|
}
|
|
}, []);
|
|
|
|
if (!visible) return null;
|
|
|
|
const dismiss = () => {
|
|
try {
|
|
window.localStorage.setItem(STORAGE_KEY, JSON.stringify({ at: Date.now() }));
|
|
} catch {
|
|
/* private mode */
|
|
}
|
|
setVisible(false);
|
|
};
|
|
|
|
return (
|
|
<div className="cookie-notice pointer-events-none fixed inset-x-0 bottom-[calc(env(safe-area-inset-bottom,0px)+5.25rem)] z-[44] flex justify-center px-4 sm:bottom-6">
|
|
<div
|
|
role="region"
|
|
aria-label={t("consent.title")}
|
|
/* Floating glass (blurred backdrop + rim + shadow): as a plain card it
|
|
read as part of the page background instead of a notice above it. */
|
|
className="glass-panel pointer-events-auto flex max-w-xl flex-wrap items-center gap-3 p-3"
|
|
>
|
|
<p className="min-w-0 flex-1 text-[12.5px] leading-snug text-[var(--text-muted)]">
|
|
{t("consent.body")}{" "}
|
|
<Link href="/cookies" className="font-semibold text-[var(--text)] underline decoration-dotted">
|
|
{t("consent.link")}
|
|
</Link>
|
|
</p>
|
|
<button
|
|
type="button"
|
|
onClick={dismiss}
|
|
className="btn-primary touch-target h-10 shrink-0 rounded-xl px-4 text-[13px] font-semibold"
|
|
>
|
|
{t("consent.ok")}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|