privacy statement

Author: battermann

src/App.tsx

@@ -6,6 +6,7 @@ import { LevelOverview } from "./components/LevelOverview";
 import { LevelSummaryScreen } from "./components/LevelSummaryScreen";
 import { MemorizationScreen } from "./components/MemorizationScreen";
 import { MobileMenuDialog } from "./components/MobileMenuDialog";
+import { PrivacyDialog } from "./components/PrivacyDialog";
 import { ProblemResultScreen } from "./components/ProblemResultScreen";
 import { ReconstructionScreen } from "./components/ReconstructionScreen";
 import { SettingsDialog } from "./components/SettingsDialog";
@@ -228,6 +229,7 @@ export default function App() {
   const [summarySaved, setSummarySaved] = useState(false);
   const [pendingExitRoute, setPendingExitRoute] = useState<Route | null>(null);
   const [settingsOpen, setSettingsOpen] = useState(false);
+  const [privacyOpen, setPrivacyOpen] = useState(false);
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const sessionRef = useRef<TrainingSession | null>(null);
   const appStateRef = useRef<AppState>(appState);
@@ -774,6 +776,12 @@ export default function App() {
         ) : null}
       </main>
 
+      <footer className="app-footer">
+        <button type="button" className="footer-link" onClick={() => setPrivacyOpen(true)}>
+          Privacy / Datenschutz
+        </button>
+      </footer>
+
       <SettingsDialog
         open={settingsOpen}
         theme={settings.theme}
@@ -799,7 +807,9 @@ export default function App() {
         onHome={backHome}
         onChooseLevel={chooseSelectedLevel}
         onOpenSettings={() => setSettingsOpen(true)}
+        onOpenPrivacy={() => setPrivacyOpen(true)}
       />
+      <PrivacyDialog open={privacyOpen} onClose={() => setPrivacyOpen(false)} />
       <ConfirmDialog
         open={pendingExitRoute !== null}
         title="Leave training?"

src/components/MobileMenuDialog.tsx

@@ -1,4 +1,4 @@
-import { FaCog, FaHome, FaLayerGroup, FaTimes } from "react-icons/fa";
+import { FaCog, FaHome, FaLayerGroup, FaShieldAlt, FaTimes } from "react-icons/fa";
 import { useModalDismiss } from "../hooks/useModalDismiss";
 
 type MobileMenuDialogProps = {
@@ -8,6 +8,7 @@ type MobileMenuDialogProps = {
   onHome: () => void;
   onChooseLevel: () => void;
   onOpenSettings: () => void;
+  onOpenPrivacy: () => void;
 };
 
 export function MobileMenuDialog({
@@ -17,6 +18,7 @@ export function MobileMenuDialog({
   onHome,
   onChooseLevel,
   onOpenSettings,
+  onOpenPrivacy,
 }: MobileMenuDialogProps) {
   const { handleBackdropClick } = useModalDismiss(open, onClose);
 
@@ -39,6 +41,11 @@ export function MobileMenuDialog({
     onOpenSettings();
   }
 
+  function handlePrivacy(): void {
+    onClose();
+    onOpenPrivacy();
+  }
+
   return (
     <div className="modal-backdrop" role="presentation" onMouseDown={handleBackdropClick}>
       <section
@@ -71,6 +78,10 @@ export function MobileMenuDialog({
             <FaCog aria-hidden="true" />
             Settings
           </button>
+          <button type="button" className="btn-with-icon" onClick={handlePrivacy}>
+            <FaShieldAlt aria-hidden="true" />
+            Privacy / Datenschutz
+          </button>
         </div>
       </section>
     </div>

src/components/PrivacyDialog.tsx

@@ -0,0 +1,76 @@
+import { FaTimes } from "react-icons/fa";
+import { useModalDismiss } from "../hooks/useModalDismiss";
+
+type PrivacyDialogProps = {
+  open: boolean;
+  onClose: () => void;
+};
+
+export function PrivacyDialog({ open, onClose }: PrivacyDialogProps) {
+  const { handleBackdropClick } = useModalDismiss(open, onClose);
+
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <div className="modal-backdrop" role="presentation" onMouseDown={handleBackdropClick}>
+      <section
+        className="modal-dialog privacy-dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="privacy-dialog-title"
+      >
+        <button
+          type="button"
+          className="modal-close"
+          onClick={onClose}
+          aria-label="Close privacy notice"
+        >
+          <FaTimes aria-hidden="true" />
+        </button>
+
+        <h2 id="privacy-dialog-title">Privacy / Datenschutz</h2>
+
+        <div className="privacy-content">
+          <p>
+            This app is a static GitHub Pages site. It has no account system, no backend,
+            no advertising, and no analytics.
+          </p>
+
+          <h3>Local data</h3>
+          <p>
+            Training progress and settings are stored only in your browser via
+            localStorage. They are not sent to this app&apos;s developer.
+          </p>
+
+          <h3>Hosting</h3>
+          <p>
+            The site is hosted by GitHub Pages. When you open it, GitHub may process
+            technical data such as IP address, browser information, request time, and
+            requested files to deliver and secure the site.
+          </p>
+
+          <h3>Contact</h3>
+          <p>
+            Responsible: Leif Battermann. Contact is available through the{" "}
+            <a
+              href="https://github.com/battermann/go-visualization-trainer"
+              target="_blank"
+              rel="noreferrer"
+            >
+              GitHub repository
+            </a>
+            .
+          </p>
+        </div>
+
+        <div className="button-row modal-actions">
+          <button type="button" className="primary" onClick={onClose}>
+            Done
+          </button>
+        </div>
+      </section>
+    </div>
+  );
+}

src/styles.css

@@ -79,6 +79,27 @@ body {
   display: block;
 }
 
+.app-footer {
+  display: flex;
+  justify-content: center;
+  margin-top: 18px;
+}
+
+.footer-link {
+  padding: 4px 6px;
+  border-color: transparent;
+  background: transparent;
+  color: #9faabd;
+  font-size: 0.9rem;
+}
+
+.footer-link:not(:disabled):hover {
+  border-color: transparent;
+  background: transparent;
+  color: #dcecff;
+  text-decoration: underline;
+}
+
 .panel {
   background:
     radial-gradient(circle at 92% 0%, rgba(224, 176, 109, 0.08), transparent 26%),
@@ -921,6 +942,25 @@ a:hover {
   width: min(100%, 560px);
 }
 
+.privacy-dialog {
+  width: min(100%, 560px);
+}
+
+.privacy-content {
+  display: grid;
+  gap: 10px;
+}
+
+.privacy-content h3 {
+  margin: 6px 0 0;
+  color: #f3f6fb;
+  font-size: 0.96rem;
+}
+
+.privacy-content p {
+  margin: 0;
+}
+
 .settings-section {
   padding: 14px 0;
   border-top: 1px solid #2c3644;
@@ -1190,6 +1230,7 @@ a:hover {
 :root.theme-light .home-section-note,
 :root.theme-light .source-credit,
 :root.theme-light .empty-state,
+:root.theme-light .footer-link,
 :root.theme-light .timer,
 :root.theme-light .color-toggle button,
 :root.theme-light .board-wrap h3,
@@ -1217,6 +1258,7 @@ a:hover {
 :root.theme-light .screen-facts dt,
 :root.theme-light .progress-label,
 :root.theme-light .recommendation-band span,
+:root.theme-light .privacy-content h3,
 :root.theme-light .settings-section h3 {
   color: #586578;
 }
@@ -1226,6 +1268,7 @@ a:hover {
 :root.theme-light .recommendation-band strong,
 :root.theme-light .timer strong,
 :root.theme-light .score-callout strong,
+:root.theme-light .privacy-dialog h2,
 :root.theme-light .settings-section h3 {
   color: #20242a;
 }
@@ -1340,6 +1383,10 @@ a:hover {
   color: #174f82;
 }
 
+:root.theme-light .footer-link:not(:disabled):hover {
+  color: #244e77;
+}
+
 :root.board-style-original .go-board {
   background: #d7a864;
   border: none;