fix: workaround npm multi-platform build bug

rolls back build CI/CD to ARM64-only
feat: duration time based expiry date for links
2026-01-20 22:14:03 +01:00 · 2026-01-19 17:22:31 +01:00 · 2026-01-09 22:40:43 +01:00 · 2026-01-09 22:29:17 +01:00 · 2026-01-09 21:55:46 +01:00 · 2026-01-09 14:48:37 +01:00
16 changed files with 909 additions and 288 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -1 +1,2 @@
 .env
+kittyurl-frontend/node_modules
--- a/.gitea/workflows/01_docker.yaml
+++ b/.gitea/workflows/01_docker.yaml
@@ -17,12 +17,6 @@ jobs:
      - name: Checkout repository
        uses: actions/checkout@v4

-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
-      - name: Set up Docker BuildX
-        uses: docker/setup-buildx-action@v3
-
      - name: Login to registry
        uses: docker/login-action@v2
        with:
@@ -30,28 +24,23 @@ jobs:
          username: ${{ secrets.REGISTRY_USER }}
          password: ${{ secrets.REGISTRY_PASSWORD }}

-      - name: Set outputs
-        id: vars
+      - name: Build Docker image
+        env:
+          REF_NAME: ${{ github.ref_name }}
+        run: |
+          # Build the image with the commit hash tag
+          docker build --build-arg BUILD_IDENTIFIER=${REF_NAME} -t gitea.7o7.cx/kittyteam/kittyfe:master-${REF_NAME} .
+
+          # Tag the same image as "latest"
+          docker tag gitea.7o7.cx/kittyteam/kittyfe:master-${REF_NAME} gitea.7o7.cx/kittyteam/kittyfe:latest
+
+      - name: Push Docker images
        env:
          BRANCH_NAME: ${{ github.ref_name }}
+          SHORT_HASH: ${{ github.sha }}
        run: |
-          #echo branch_name="$BRANCH_NAME" | tee -a $GITHUB_OUTPUT
-          #echo short_hash=$(git rev-parse --short HEAD) | tee -a $GITHUB_OUTPUT
-          echo current_tag=$GITHUB_REF_NAME | tee -a $GITHUB_OUTPUT
-
-      - name: Build and push
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          platforms: |
-            linux/amd64
-            linux/arm64
-          pull: true
-          push: true
-          # Change when working on a different branch!
-          tags: |
-            gitea.7o7.cx/kittyteam/kittyfe:${{ steps.vars.outputs.current_tag }}
-            gitea.7o7.cx/kittyteam/kittyfe:latest
+          docker push gitea.7o7.cx/kittyteam/kittyfe:master-${REF_NAME}
+          docker push gitea.7o7.cx/kittyteam/kittyfe:latest

      - name: Log out from registry
        if: always()
--- a/15
+++ b/15
@@ -1,11 +1,17 @@
-# Credit: https://www.digitalocean.com/community/tutorials/how-to-build-a-node-js-application-with-docker
+# Credit:
+# https://www.digitalocean.com/community/tutorials/how-to-build-a-node-js-application-with-docker
+# https://stackoverflow.com/a/56941391
+#
+# Includes workaround for:
+# https://github.com/expo/expo/issues/33340
+# https://github.com/npm/cli/issues/4828

 FROM node:24-trixie-slim AS builder

 WORKDIR /app
 COPY ./kittyurl-frontend/package*.json ./
-RUN npm ci && npm cache clean --force
-COPY ./kittyurl-frontend/ .
+RUN npm ci && npm i --force && npm cache clean --force
+COPY ./kittyurl-frontend/. ./
 RUN npm run build

 FROM node:24-trixie-slim AS production
@@ -18,4 +24,7 @@ USER nodejs

 EXPOSE 6568

+# Since we don't know user's .env ahead of time, kittyFE needs to
+# rebuild itself every launch so that the changes in .env get reflected.
+# This is not ideal and we're looking into possible ways to improve this.
 CMD ["npm", "run", "preview", "--", "--host", "0.0.0.0", "--port", "6568"]
--- a/README.md
+++ b/README.md
@@ -1,2 +1,73 @@
 # kittyFE

+*Front-end for the [KittyURL](https://gitea.7o7.cx/kittyteam/kittyurl) project — create short and memorable URLs with ease!*
+
+## Goals
+
+Provide a responsive and modern user interface for:
+
+* Account management (login, register, history, settings)
+* Link creation (public landing page)
+* Dashboard link management (for logged-in users)
+* User management (admin panel)
+
+
+KittyFE is built with **Vite + React (TypeScript)** to integrate seamlessly with [kittyBE](https://gitea.7o7.cx/kittyteam/kittyBE) and is easily dockerizable.
+
+## Running kittyFE
+
+KittyFE has been verified to work on **Node v24.11.1**.
+
+### On bare metal
+
+Running the front-end is as simple as:
+
+1. **Install dependencies**
+
+   * To download the required dependencies:
+
+     ```sh
+     npm install
+     ```
+
+   * To install an exact copy of all dependencies (recommended for CI):
+
+     ```sh
+     npm ci
+     ```
+
+2. **Configure environment variables**
+
+   Copy the `.env.example` file to `.env` and customize it to your preferences.
+
+   **Example:** Tell the frontend where the backend API is located. Your `.env` file should look like this:
+
+   ```properties
+   VITE_API_TARGET=http://localhost:6567
+   ```
+
+   > **Important:** All environment variables exposed to Vite must start with `VITE_`. Make sure the URL matches your running instance of `kittyBE`.
+
+3. **Launch the development server**
+
+   ```sh
+   npm run dev
+   ```
+
+4. **Open the app**
+
+   Visit:
+
+   ```text
+   http://localhost:6568
+   ```
+
+   (or the port shown in your terminal output).
+
+### Building for production
+
+To create an optimized static production build:
+
+```sh
+npm run build
+```
--- a/kittyurl-frontend/index.html
+++ b/kittyurl-frontend/index.html
@@ -2,18 +2,18 @@
 <html lang="en">
 <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/assets/kitty.png" />
+    <link rel="icon" type="image/svg+xml" href="/src/assets/kitty.jpg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>kittyurl - shorten URLs with ease</title>
    <meta property="og:title" content="kittyurl shortener" />
    <meta property="og:type" content="website" />
    <meta property="og:description" content="Your go-to place for short and memorable URLs." />
-    <meta property="og:image" content="/src/assets/Ket.png" />
+    <meta property="og:image" content="/src/assets/Ket.jpg" />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="kittyurl shortener" />
    <meta name="twitter:description" content="Your go-to place for short and memorable URLs." />
-    <meta name="twitter:image" content="/src/assets/Ket.png" />
+    <meta name="twitter:image" content="/src/assets/Ket.jpg" />


 </head>
--- a/kittyurl-frontend/package-lock.json
+++ b/kittyurl-frontend/package-lock.json
@@ -29,6 +29,7 @@
        "eslint-plugin-react-hooks": "^7.0.1",
        "eslint-plugin-react-refresh": "^0.4.24",
        "globals": "^16.5.0",
+        "lightningcss": "^1.30.2",
        "postcss": "^8.5.6",
        "tailwindcss": "^4.1.18",
        "typescript": "~5.9.3",
@@ -67,7 +68,6 @@
      "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@babel/code-frame": "^7.27.1",
        "@babel/generator": "^7.28.5",
@@ -1610,7 +1610,6 @@
      "integrity": "sha512-vnDVpYPMzs4wunl27jHrfmwojOGKya0xyM3sH+UE5iv5uPS6vX7UIoh6m+vQc5LGBq52HBKPIn/zcSZVzeDEZg==",
      "devOptional": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "undici-types": "~7.16.0"
      }
@@ -1621,7 +1620,6 @@
      "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "csstype": "^3.2.2"
      }
@@ -1681,7 +1679,6 @@
      "integrity": "sha512-hM5faZwg7aVNa819m/5r7D0h0c9yC4DUlWAOvHAtISdFTc8xB86VmX5Xqabrama3wIPJ/q9RbGS1worb6JfnMg==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@typescript-eslint/scope-manager": "8.50.1",
        "@typescript-eslint/types": "8.50.1",
@@ -1933,7 +1930,6 @@
      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "bin": {
        "acorn": "bin/acorn"
      },
@@ -2093,7 +2089,6 @@
        }
      ],
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "baseline-browser-mapping": "^2.9.0",
        "caniuse-lite": "^1.0.30001759",
@@ -2442,7 +2437,6 @@
      "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.8.0",
        "@eslint-community/regexpp": "^4.12.1",
@@ -3598,7 +3592,6 @@
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=12"
      },
@@ -3625,7 +3618,6 @@
        }
      ],
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "nanoid": "^3.3.11",
        "picocolors": "^1.1.1",
@@ -3673,7 +3665,6 @@
      "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
      "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -3683,7 +3674,6 @@
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
      "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "scheduler": "^0.27.0"
      },
@@ -3702,9 +3692,9 @@
      }
    },
    "node_modules/react-router": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.11.0.tgz",
-      "integrity": "sha512-uI4JkMmjbWCZc01WVP2cH7ZfSzH91JAZUDd7/nIprDgWxBV1TkkmLToFh7EbMTcMak8URFRa2YoBL/W8GWnCTQ==",
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.12.0.tgz",
+      "integrity": "sha512-kTPDYPFzDVGIIGNLS5VJykK0HfHLY5MF3b+xj0/tTyNYL1gF1qs7u67Z9jEhQk2sQ98SUaHxlG31g1JtF7IfVw==",
      "license": "MIT",
      "dependencies": {
        "cookie": "^1.0.1",
@@ -3724,12 +3714,12 @@
      }
    },
    "node_modules/react-router-dom": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.11.0.tgz",
-      "integrity": "sha512-e49Ir/kMGRzFOOrYQBdoitq3ULigw4lKbAyKusnvtDu2t4dBX4AGYPrzNvorXmVuOyeakai6FUPW5MmibvVG8g==",
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.12.0.tgz",
+      "integrity": "sha512-pfO9fiBcpEfX4Tx+iTYKDtPbrSLLCbwJ5EqP+SPYQu1VYCXdy79GSj0wttR0U4cikVdlImZuEZ/9ZNCgoaxwBA==",
      "license": "MIT",
      "dependencies": {
-        "react-router": "7.11.0"
+        "react-router": "7.12.0"
      },
      "engines": {
        "node": ">=20.0.0"
@@ -3937,7 +3927,6 @@
      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
      "dev": true,
      "license": "Apache-2.0",
-      "peer": true,
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
@@ -4023,7 +4012,6 @@
      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.0.tgz",
      "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "esbuild": "^0.27.0",
        "fdir": "^6.5.0",
@@ -4145,7 +4133,6 @@
      "integrity": "sha512-0wZ1IRqGGhMP76gLqz8EyfBXKk0J2qo2+H3fi4mcUP/KtTocoX08nmIAHl1Z2kJIZbZee8KOpBCSNPRgauucjw==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "funding": {
        "url": "https://github.com/sponsors/colinhacks"
      }
--- a/kittyurl-frontend/package.json
+++ b/kittyurl-frontend/package.json
@@ -32,6 +32,7 @@
    "eslint-plugin-react-hooks": "^7.0.1",
    "eslint-plugin-react-refresh": "^0.4.24",
    "globals": "^16.5.0",
+    "lightningcss": "^1.30.2",
    "postcss": "^8.5.6",
    "tailwindcss": "^4.1.18",
    "typescript": "~5.9.3",
--- a/kittyurl-frontend/src/App.tsx
+++ b/kittyurl-frontend/src/App.tsx
@@ -11,6 +11,13 @@ export type View = 'home' | 'login' | 'history' | 'jump-game' | 'flappy-game';

 const getSubdomain = () => {
    const hostname = window.location.hostname;
+    // Handle localhost and 127.0.0.1 cases.
+    // For more advanced cases (like bare IP hosting)
+    // a regex may be necessary.
+    if (hostname === 'localhost' || hostname === '127.0.0.1') {
+        return null;
+    }
+    
    const parts = hostname.split('.');
    if (parts.length <= 2) return null;
    return parts[0];
--- a/kittyurl-frontend/src/assets/Ket.jpg
+++ b/kittyurl-frontend/src/assets/Ket.jpg
--- a/kittyurl-frontend/src/assets/Ket.png
+++ b/kittyurl-frontend/src/assets/Ket.png
--- a/kittyurl-frontend/src/assets/kitty.jpg
+++ b/kittyurl-frontend/src/assets/kitty.jpg
--- a/kittyurl-frontend/src/assets/kitty.png
+++ b/kittyurl-frontend/src/assets/kitty.png
--- a/kittyurl-frontend/src/components/FlappyCat.tsx
+++ b/kittyurl-frontend/src/components/FlappyCat.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { ArrowLeft, Trophy, Sparkles } from 'lucide-react';

-// --- MODEL KOTA ---
+// --- MODEL KOTA (Wizualizacja) ---
 interface DetailedKittyProps { isGameOver: boolean; }
 const DetailedKitty: React.FC<DetailedKittyProps> = ({ isGameOver }) => {
    const mainColor = isGameOver ? '#cbd5e1' : '#f472b6';
@@ -32,16 +32,20 @@ const DetailedKitty: React.FC<DetailedKittyProps> = ({ isGameOver }) => {
    );
 };

-// --- KONFIGURACJA NIEZALEŻNA OD FPS (Wartości na sekundę) ---
-const GAP_SIZE = 180;
+// --- KONFIGURACJA GRY ---
+const GAP_SIZE = 170;        // Przerwa między rurami
 const PIPE_WIDTH = 70;
-const PIPE_SPEED = 200;      // px/s
-const PIPE_SPAWN_RATE = 1.8; // sekundy
-const GRAVITY = 1400;        // px/s^2
-const FLAP_STRENGTH = -420;  // px/s
-const CANVAS_HEIGHT = 450;
+const PIPE_SPEED = 220;      // px/s
+const PIPE_SPAWN_RATE = 1.6; // co ile sekund rura
+const GRAVITY = 1400;        // siła grawitacji
+const FLAP_STRENGTH = -420;  // siła skoku
+
+// Logiczne wymiary gry (fizyka działa na tych wartościach, a ekran je tylko skaluje)
+const GAME_HEIGHT = 450;
+const GAME_WIDTH = 600;

 export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
+    // --- STANY ---
    const [isPlaying, setIsPlaying] = useState(false);
    const [gameOver, setGameOver] = useState(false);
    const [score, setScore] = useState(0);
@@ -50,10 +54,13 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
        return saved ? parseInt(saved, 10) : 0;
    });

+    // Stany do renderowania
    const [displayKittyY, setDisplayKittyY] = useState(150);
    const [displayPipes, setDisplayPipes] = useState<{ x: number; topHeight: number; id: number }[]>([]);
    const [rotation, setRotation] = useState(0);
+    const [scale, setScale] = useState(1); // Skala RWD

+    // --- REFS (FIZYKA) ---
    const kittyYRef = useRef(150);
    const velocityRef = useRef(0);
    const pipesRef = useRef<{ x: number; topHeight: number; id: number; passed?: boolean }[]>([]);
@@ -62,6 +69,26 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
    const lastTimeRef = useRef<number>(0);
    const spawnTimerRef = useRef<number>(0);

+    // --- RWD: Obliczanie skali ---
+    useEffect(() => {
+        const handleResize = () => {
+            const availableWidth = window.innerWidth - 32; // margines boczny
+            const availableHeight = window.innerHeight - 100; // miejsce na nagłówek
+
+            const scaleX = availableWidth / GAME_WIDTH;
+            const scaleY = availableHeight / GAME_HEIGHT;
+
+            // Dopasuj do ekranu, ale nie powiększaj powyżej 100% (żeby nie tracić jakości)
+            const newScale = Math.min(scaleX, scaleY, 1);
+            setScale(newScale);
+        };
+
+        window.addEventListener('resize', handleResize);
+        handleResize(); // Init
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    // --- LOGIKA GRY ---
    const endGame = useCallback(() => {
        setGameOver(true);
        setIsPlaying(false);
@@ -81,7 +108,7 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
        velocityRef.current = 0;
        pipesRef.current = [];
        spawnTimerRef.current = 0;
-        lastTimeRef.current = performance.now(); // Inicjalizacja czasu
+        lastTimeRef.current = performance.now();
        setDisplayKittyY(150);
        setDisplayPipes([]);
        setRotation(0);
@@ -91,64 +118,87 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
        if (isPlaying && !gameOver) velocityRef.current = FLAP_STRENGTH;
    }, [isPlaying, gameOver]);

+    // --- OBSŁUGA INPUTU (NAPRAWIONA) ---
+    const handleAction = useCallback((e?: React.SyntheticEvent) => {
+        // WAŻNE: Nie używamy e.preventDefault() tutaj, bo to powoduje błąd w Chrome.
+        // Zamiast tego CSS 'touch-action: none' blokuje scrollowanie.
+        if (e) {
+            e.stopPropagation();
+        }
+
+        if (!isPlaying || gameOver) {
+            startGame();
+        } else {
+            flap();
+        }
+    }, [isPlaying, gameOver, startGame, flap]);
+
+    // --- PĘTLA GRY ---
    useEffect(() => {
        const update = (currentTime: number) => {
            if (gameOver || !isPlaying) return;

-            // --- DYNAMICZNY DELTA TIME ---
-            // Obliczamy ile sekund upłynęło od ostatniej klatki (np. 0.0069s dla 144Hz)
+            // Delta time w sekundach
            const dt = (currentTime - lastTimeRef.current) / 1000;
            lastTimeRef.current = currentTime;
+            const frameTime = Math.min(dt, 0.1); // Limit laga

-            // Zabezpieczenie przed ogromnym skokiem fizyki przy lagu
-            const frameTime = Math.min(dt, 0.1);
-
-            // Fizyka grawitacji
+            // 1. Fizyka grawitacji
            velocityRef.current += GRAVITY * frameTime;
            kittyYRef.current += velocityRef.current * frameTime;

-            // Płynna rotacja zależna od prędkości pionowej
-            setRotation(Math.min(Math.max(velocityRef.current * 0.12, -20), 80));
+            // Rotacja
+            setRotation(Math.min(Math.max(velocityRef.current * 0.12, -25), 90));

-            // Kolizja z sufitem/ziemią
-            if (kittyYRef.current > CANVAS_HEIGHT - 40 || kittyYRef.current < -50) {
+            // Kolizja z sufitem/podłogą
+            if (kittyYRef.current > GAME_HEIGHT - 40 || kittyYRef.current < -50) {
                endGame();
                return;
            }

-            // Spawn rur
+            // 2. Generowanie rur
            spawnTimerRef.current += frameTime;
            if (spawnTimerRef.current >= PIPE_SPAWN_RATE) {
-                const topHeight = Math.random() * (220 - 70) + 70;
-                pipesRef.current.push({ x: 650, topHeight, id: Date.now() });
+                const minPipe = 60;
+                const maxPipe = GAME_HEIGHT - GAP_SIZE - minPipe;
+                const topHeight = Math.random() * (maxPipe - minPipe) + minPipe;
+
+                pipesRef.current.push({ x: GAME_WIDTH + 50, topHeight, id: Date.now() });
                spawnTimerRef.current = 0;
            }

-            // Ruch rur i kolizje
+            // 3. Ruch rur i kolizje
            const updatedPipes = [];
            for (const p of pipesRef.current) {
                p.x -= PIPE_SPEED * frameTime;

-                // Hitbox (z małym marginesem dla kota)
-                if (p.x < 100 && p.x + PIPE_WIDTH > 55) {
+                // Hitbox rury (marginesy dla łatwiejszej gry)
+                const hitXLeft = p.x + 5;
+                const hitXRight = p.x + PIPE_WIDTH - 5;
+
+                // Sprawdzenie czy kot jest w poziomie rury
+                if (hitXLeft < 100 && hitXRight > 55) {
+                    // Sprawdzenie czy kot uderzył w górę lub dół
+                    // (dodajemy marginesy bezpieczeństwa)
                    if (kittyYRef.current < p.topHeight || kittyYRef.current > p.topHeight + GAP_SIZE - 45) {
                        endGame();
                        return;
                    }
                }

-                // Punktacja
+                // Naliczanie punktów
                if (p.x < 50 && !p.passed) {
                    p.passed = true;
                    scoreRef.current += 1;
                    setScore(scoreRef.current);
                }

-                if (p.x > -PIPE_WIDTH) updatedPipes.push(p);
+                // Usuwanie starych rur
+                if (p.x > -PIPE_WIDTH - 50) updatedPipes.push(p);
            }
            pipesRef.current = updatedPipes;

-            // Update stanów do renderowania
+            // 4. Renderowanie
            setDisplayKittyY(kittyYRef.current);
            setDisplayPipes([...pipesRef.current]);

@@ -161,64 +211,108 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
        return () => cancelAnimationFrame(requestRef.current);
    }, [isPlaying, gameOver, endGame]);

+    // Obsługa Spacji
    useEffect(() => {
        const handleKey = (e: KeyboardEvent) => {
            if (e.code === 'Space') {
-                e.preventDefault();
-                if (!isPlaying || gameOver) startGame(); else flap();
+                e.preventDefault(); // Tu można bezpiecznie użyć preventDefault dla klawiatury
+                handleAction();
            }
        };
        window.addEventListener('keydown', handleKey);
        return () => window.removeEventListener('keydown', handleKey);
-    }, [isPlaying, gameOver, startGame, flap]);
+    }, [handleAction]);

    return (
-        <div className="flex flex-col items-center justify-center min-h-[75vh] p-4 font-sans select-none">
-            <button onClick={onBack} className="mb-6 flex items-center gap-2 text-pink-500 font-bold hover:scale-105 transition-all outline-none">
+        <div className="flex flex-col items-center justify-start pt-4 sm:justify-center min-h-[80vh] w-full font-sans select-none overflow-hidden">
+
+            <button
+                onClick={onBack}
+                className="z-50 mb-4 flex items-center gap-2 text-pink-500 font-bold hover:scale-105 transition-all outline-none px-4 py-2 bg-white/50 rounded-full cursor-pointer"
+            >
                <ArrowLeft size={20} /> Back to Menu
            </button>

+            {/* WRAPPER SKALUJĄCY GRĘ */}
            <div
-                className="relative w-full max-w-[600px] h-[450px] bg-sky-100 rounded-[3rem] shadow-2xl border-4 border-white overflow-hidden cursor-pointer"
-                onClick={() => { if (!isPlaying || gameOver) startGame(); else flap(); }}
+                style={{
+                    width: GAME_WIDTH,
+                    height: GAME_HEIGHT,
+                    transform: `scale(${scale})`,
+                    transformOrigin: 'top center',
+                    touchAction: 'none' // KLUCZOWE DLA MOBILE: blokuje gesty przeglądarki
+                }}
+                className="relative shrink-0"
            >
-                <div className="absolute top-10 left-10 text-white/40"><Sparkles size={40} /></div>
-                <div className="absolute top-40 right-20 text-white/30"><Sparkles size={60} /></div>
+                <div
+                    className="relative w-full h-full bg-sky-100 rounded-[3rem] shadow-2xl border-4 border-white overflow-hidden cursor-pointer"
+                    // KLUCZOWE: Używamy onPointerDown zamiast onTouchStart/onMouseDown
+                    onPointerDown={handleAction}
+                >
+                    {/* TŁO / DEKORACJE */}
+                    <div className="absolute top-10 left-10 text-white/40"><Sparkles size={40} /></div>
+                    <div className="absolute top-40 right-20 text-white/30"><Sparkles size={60} /></div>

-                <div className="absolute top-6 right-8 text-right z-30 font-black">
-                    <div className="text-pink-500 text-4xl">Score: {score}</div>
-                    <div className="text-pink-300 text-sm flex items-center justify-end gap-1"><Trophy size={14} /> Record: {highScore}</div>
-                </div>
+                    {/* CHMURY (Ozdoba) */}
+                    <div className="absolute bottom-10 left-10 w-24 h-8 bg-white/40 rounded-full" />
+                    <div className="absolute top-20 left-1/2 w-32 h-10 bg-white/40 rounded-full" />

-                <div className="absolute left-10 z-20" style={{ top: `${displayKittyY}px`, transform: `rotate(${rotation}deg)`, transition: 'transform 0.08s linear' }}>
-                    <DetailedKitty isGameOver={gameOver} />
-                </div>
+                    {/* HUD */}
+                    <div className="absolute top-6 right-8 text-right z-30 font-black pointer-events-none">
+                        <div className="text-pink-500 text-4xl drop-shadow-sm">Score: {score}</div>
+                        <div className="text-pink-300 text-sm flex items-center justify-end gap-1"><Trophy size={14} /> Record: {highScore}</div>
+                    </div>

-                {displayPipes.map(p => (
-                    <React.Fragment key={p.id}>
-                        <div className="absolute bg-[#e5c29f] border-x-4 border-b-8 border-[#d4ac87] rounded-b-3xl" style={{ left: p.x, top: 0, width: PIPE_WIDTH, height: p.topHeight }} />
-                        <div className="absolute bg-[#e5c29f] border-x-4 border-t-8 border-[#d4ac87] rounded-t-3xl" style={{ left: p.x, top: p.topHeight + GAP_SIZE, width: PIPE_WIDTH, height: CANVAS_HEIGHT - (p.topHeight + GAP_SIZE) }} />
-                    </React.Fragment>
-                ))}
+                    {/* GRACZ (KOT) */}
+                    <div className="absolute left-10 z-20 pointer-events-none" style={{ top: `${displayKittyY}px`, transform: `rotate(${rotation}deg)`, transition: 'transform 0.08s linear' }}>
+                        <DetailedKitty isGameOver={gameOver} />
+                    </div>

-                {!isPlaying && !gameOver && (
-                    <div className="absolute inset-0 bg-white/40 backdrop-blur-sm flex items-center justify-center z-40">
-                        <div className="bg-white p-10 rounded-[3rem] shadow-2xl text-center border-4 border-pink-100">
-                            <p className="text-3xl font-black text-pink-500 mb-6">Flappy Cat 🎈</p>
-                            <button className="bg-pink-500 text-white px-10 py-4 rounded-2xl font-black animate-bounce text-xl shadow-lg">START</button>
+                    {/* RURY */}
+                    {displayPipes.map(p => (
+                        <React.Fragment key={p.id}>
+                            {/* Górna rura */}
+                            <div className="absolute bg-[#e5c29f] border-x-4 border-b-8 border-[#d4ac87] rounded-b-3xl pointer-events-none"
+                                style={{ left: p.x, top: 0, width: PIPE_WIDTH, height: p.topHeight }} />
+
+                            {/* Dolna rura */}
+                            <div className="absolute bg-[#e5c29f] border-x-4 border-t-8 border-[#d4ac87] rounded-t-3xl pointer-events-none"
+                                style={{ left: p.x, top: p.topHeight + GAP_SIZE, width: PIPE_WIDTH, height: GAME_HEIGHT - (p.topHeight + GAP_SIZE) }} />
+                        </React.Fragment>
+                    ))}
+
+                    {/* EKRAN STARTOWY */}
+                    {!isPlaying && !gameOver && (
+                        <div className="absolute inset-0 bg-white/40 backdrop-blur-sm flex items-center justify-center z-40">
+                            <div className="bg-white p-10 rounded-[3rem] shadow-2xl text-center border-4 border-pink-100 mx-4 pointer-events-none">
+                                <p className="text-3xl font-black text-pink-500 mb-6">Flappy Cat 🎈</p>
+                                <p className="text-slate-400 mb-4 text-sm font-bold uppercase tracking-widest">Tap to Jump</p>
+                                <div className="bg-pink-500 text-white px-10 py-4 rounded-2xl font-black animate-bounce text-xl shadow-lg inline-block">START</div>
+                            </div>
                        </div>
-                    </div>
-                )}
+                    )}

-                {gameOver && (
-                    <div className="absolute inset-0 bg-pink-50/90 backdrop-blur-md flex flex-col items-center justify-center z-40 text-center">
-                        <h3 className="text-5xl font-black text-pink-600 mb-2">Oops! 😿</h3>
-                        <p className="font-bold text-3xl text-pink-400 mb-8">Score: {score}</p>
-                        <button className="bg-pink-500 text-white px-12 py-4 rounded-2xl font-black text-xl shadow-xl">TRY AGAIN</button>
-                    </div>
-                )}
+                    {/* GAME OVER */}
+                    {gameOver && (
+                        <div className="absolute inset-0 bg-pink-50/90 backdrop-blur-md flex flex-col items-center justify-center z-40 text-center">
+                            <h3 className="text-5xl font-black text-pink-600 mb-2">Oops! 😿</h3>
+                            <p className="font-bold text-3xl text-pink-400 mb-8">Score: {score}</p>
+                            <button className="bg-pink-500 text-white px-12 py-4 rounded-2xl font-black text-xl shadow-xl hover:bg-pink-600 transition-colors pointer-events-auto"
+                                onPointerDown={(e) => {
+                                    e.stopPropagation(); // Żeby kliknięcie w guzik nie podbiło kota w tle
+                                    startGame();
+                                }}
+                            >
+                                TRY AGAIN
+                            </button>
+                        </div>
+                    )}
+                </div>
            </div>

+            <div className="mt-4 text-xs text-slate-400 sm:hidden">
+                Tap anywhere to jump
+            </div>
        </div>
    );
 };
--- a/kittyurl-frontend/src/components/Generator.tsx
+++ b/kittyurl-frontend/src/components/Generator.tsx
@@ -1,60 +1,483 @@
-import React from 'react';
-import { PawPrint, Heart, Sparkles, Cat } from 'lucide-react';
+import React, { useState, useEffect } from 'react';
+import {
+    PawPrint, Heart, Sparkles, Cat, Hash,
+    Globe, BookOpen, Shield, Clock,
+    Settings2, AlertCircle, X, Save, RefreshCw, Copy, Check, ExternalLink,
+    User as UserIcon, Calendar, Hourglass
+} from 'lucide-react';
+
+const API_BASE = import.meta.env.VITE_API_TARGET;
+const TOKEN_KEY = 'jwt_token';
+
+type CaseType = 'upper' | 'lower' | 'mixed';
+
+// Mnożniki czasu w milisekundach
+const TIME_MULTIPLIERS: Record<string, number> = {
+    minutes: 60 * 1000,
+    hours: 60 * 60 * 1000,
+    days: 24 * 60 * 60 * 1000,
+    weeks: 7 * 24 * 60 * 60 * 1000,
+    months: 30 * 24 * 60 * 60 * 1000, // Przybliżenie
+};

 interface GeneratorProps {
    url: string;
-    setUrl: (val: string) => void;
+    setUrl: (url: string) => void;
    onGenerate: () => void;
 }

-export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate }) => (
-    <div className="max-w-[800px] mx-auto pt-10 sm:pt-16 px-4 flex flex-col items-center">
-        {/* Header - Skalowanie tekstu i ikony */}
-        <header className="text-center mb-8 sm:mb-12">
-            <h1 className="text-4xl sm:text-7xl font-black text-pink-500 mb-2 tracking-tighter flex items-center justify-center gap-2 sm:gap-4">
-                KittyURL <PawPrint className="w-8 h-8 sm:w-12 sm:h-12" fill="currentColor" />
-            </h1>
-            <p className="text-pink-300 text-lg sm:text-xl font-medium px-4">
-                Shorten KKKKKK your links with a purr!
-            </p>
-        </header>
+interface GeneratorSettings {
+    length: number;
+    alphanum: boolean;
+    case: CaseType;
+    withSubdomain: boolean;
+}

-        {/* Główna karta - mniejsze paddingi i zaokrąglenia na mobile */}
-        <div className="w-full bg-white rounded-[2rem] sm:rounded-[3rem] shadow-2xl shadow-pink-200/50 p-6 sm:p-10 border-4 border-white relative overflow-hidden">
-            <div className="mb-6">
-                <label className="block text-[10px] sm:text-xs font-black uppercase tracking-widest text-pink-300 mb-3 ml-2">
-                    Long URL to shorten
-                </label>
-                <div className="relative">
-                    <input
-                        type="url"
-                        placeholder="https://example.com/very-long-url"
-                        className="w-full p-4 sm:p-5 bg-pink-50/30 border-2 border-pink-100 rounded-xl sm:rounded-2xl outline-none focus:border-pink-400 focus:bg-white transition-all text-base sm:text-lg shadow-inner pr-12"
-                        value={url}
-                        onChange={(e) => setUrl(e.target.value)}
-                    />
-                    <Heart className="absolute right-4 top-1/2 -translate-y-1/2 text-pink-200 w-5 h-5 sm:w-6 sm:h-6" />
+interface LinkFormData {
+    uri: string;
+    subdomain: string;
+    privacy: boolean;
+    expiryDate: string;
+}
+
+interface LinkPayload {
+    remoteUrl: string;
+    uri: string;
+    subdomain?: string;
+    privacy: boolean;
+    expiryDate?: number;
+    userId?: string;
+}
+
+interface User {
+    id: string;
+    username: string;
+    email?: string;
+}
+
+export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate }) => {
+    const [user, setUser] = useState<User | null>(null);
+
+    const [formData, setFormData] = useState<LinkFormData>({
+        uri: '',
+        subdomain: '',
+        privacy: true,
+        expiryDate: ''
+    });
+
+    const [genSettings, setGenSettings] = useState<GeneratorSettings>({
+        length: 6,
+        alphanum: true,
+        case: 'mixed',
+        withSubdomain: false
+    });
+
+    // --- NOWE STANY DLA CZASU TRWANIA ---
+    const [expiryMode, setExpiryMode] = useState<'date' | 'duration'>('date');
+    const [durationValue, setDurationValue] = useState<string>(''); // Pusty string na start
+    const [durationUnit, setDurationUnit] = useState<string>('minutes');
+
+    const [loading, setLoading] = useState(false);
+    const [generatingUri, setGeneratingUri] = useState(false);
+    const [errorMsg, setErrorMsg] = useState<string | null>(null);
+    const [result, setResult] = useState<string | null>(null);
+    const [copied, setCopied] = useState(false);
+
+    const baseDomain = API_BASE.replace('api.', '').replace(/^https?:\/\//, '').split('/')[0];
+    const displayPrefix = genSettings.withSubdomain && formData.subdomain
+        ? `${formData.subdomain}.${baseDomain}`
+        : baseDomain;
+
+    const getAuthHeaders = () => {
+        const token = localStorage.getItem(TOKEN_KEY);
+        return {
+            'Content-Type': 'application/json',
+            ...(token ? { 'Authorization': `Bearer ${token}` } : {})
+        };
+    };
+
+    useEffect(() => {
+        const checkUser = async () => {
+            const token = localStorage.getItem(TOKEN_KEY);
+            if (!token) return;
+            try {
+                const res = await fetch(`${API_BASE}/api/v1/user/account`, {
+                    headers: getAuthHeaders()
+                });
+                if (res.ok) {
+                    const data = await res.json();
+                    setUser({
+                        id: data.id || data._id || data.userId,
+                        username: data.username || data.name || data.email || "User",
+                        email: data.email
+                    });
+                }
+            } catch {
+                console.log("API unreachable");
+            }
+        };
+        checkUser();
+    }, []);
+
+    // --- NOWY EFEKT: Przeliczanie czasu trwania na datę ---
+    // Uruchamia się automatycznie, gdy zmienisz liczbę, jednostkę lub tryb
+    useEffect(() => {
+        if (expiryMode === 'duration') {
+            const val = parseInt(durationValue);
+            if (!durationValue || isNaN(val) || val <= 0) {
+                // Jeśli pole jest puste lub 0, czyścimy datę wygaśnięcia
+                setFormData(prev => ({ ...prev, expiryDate: '' }));
+                return;
+            }
+
+            const multiplier = TIME_MULTIPLIERS[durationUnit] || TIME_MULTIPLIERS.minutes;
+            const msToAdd = val * multiplier;
+
+            const futureDate = new Date(Date.now() + msToAdd);
+
+            // Formatowanie do datetime-local z uwzględnieniem strefy czasowej
+            const offset = futureDate.getTimezoneOffset() * 60000;
+            const localISOTime = new Date(futureDate.getTime() - offset).toISOString().slice(0, 16);
+
+            setFormData(prev => ({ ...prev, expiryDate: localISOTime }));
+        }
+    }, [durationValue, durationUnit, expiryMode]);
+
+    const handleGenerateUri = async (type: 'random' | 'wordlist') => {
+        setGeneratingUri(true);
+        setErrorMsg(null);
+        try {
+            let endpoint = '';
+            const params = new URLSearchParams();
+            params.append('withSubdomain', genSettings.withSubdomain.toString());
+
+            if (type === 'random') {
+                endpoint = '/api/v1/link/short';
+                params.append('length', genSettings.length.toString());
+                params.append('alphanum', genSettings.alphanum.toString());
+                if (genSettings.case !== 'mixed') params.append('case', genSettings.case);
+            } else {
+                endpoint = '/api/v1/link/fromWordlist';
+            }
+
+            const response = await fetch(`${API_BASE}${endpoint}?${params.toString()}`);
+            const data = await response.json();
+            if (!response.ok) throw new Error(data.error || 'Generation failed');
+            setFormData(prev => ({ ...prev, uri: data.uri || data.shortUrl || "" }));
+        } catch (err: unknown) {
+            if (err instanceof Error) setErrorMsg(err.message);
+        } finally {
+            setGeneratingUri(false);
+        }
+    };
+
+    const handleSubmitToDb = async () => {
+        if (!url) {
+            setErrorMsg("Meow! I need a destination URL first! 🐾");
+            return;
+        }
+        if (!formData.uri) {
+            setErrorMsg("Please generate or write a short URI code!");
+            return;
+        }
+
+        setLoading(true);
+        setErrorMsg(null);
+        setResult(null);
+
+        try {
+            const payload: LinkPayload = {
+                remoteUrl: url,
+                uri: formData.uri,
+                privacy: formData.privacy,
+            };
+
+            if (genSettings.withSubdomain && formData.subdomain) {
+                payload.subdomain = formData.subdomain;
+            }
+
+            if (formData.expiryDate) {
+                payload.expiryDate = new Date(formData.expiryDate).getTime();
+            }
+
+            if (user?.id) payload.userId = user.id;
+
+            const response = await fetch(`${API_BASE}/api/v1/link/new`, {
+                method: 'POST',
+                headers: getAuthHeaders(),
+                body: JSON.stringify(payload)
+            });
+
+            const data = await response.json();
+            if (!response.ok) throw new Error(data.error || `Error ${response.status}`);
+
+            let finalLink = data.url;
+            if (!finalLink) {
+                const protocol = API_BASE.startsWith('https') ? 'https://' : 'http://';
+                finalLink = `${protocol}${displayPrefix}/${formData.uri}`;
+            }
+
+            setResult(finalLink);
+            onGenerate();
+        } catch (err: unknown) {
+            if (err instanceof Error) setErrorMsg(err.message);
+            else setErrorMsg("Something went wrong!");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const copyToClipboard = (text: string) => {
+        navigator.clipboard.writeText(text);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    };
+
+    return (
+        <div className="max-w-[800px] mx-auto pt-10 px-4 flex flex-col items-center pb-20 font-sans">
+            {/* Header */}
+            <header className="text-center mb-8 relative w-full flex flex-col items-center">
+                <div className={`mb-4 px-4 py-2 rounded-full text-xs font-bold flex items-center gap-2 transition-colors ${user ? 'bg-pink-100 text-pink-600' : 'bg-gray-100 text-gray-400'}`}>
+                    <UserIcon size={14} />
+                    {user ? `Logged in as ${user.username}` : 'Guest Mode (Anonymous)'}
                </div>
+                <h1 className="text-4xl sm:text-6xl font-black text-pink-500 mb-2 tracking-tighter flex items-center justify-center gap-2">
+                    KittyURL <PawPrint className="w-8 h-8 sm:w-10 sm:h-10" fill="currentColor" />
+                </h1>
+                <p className="text-pink-300 font-medium">Shorten your links with a purr!</p>
+            </header>
+
+            {/* Error Display */}
+            {errorMsg && (
+                <div className="w-full mb-6 animate-in fade-in slide-in-from-top-2">
+                    <div className="bg-red-50 border-2 border-red-200 p-4 rounded-2xl flex items-center gap-3 text-red-600 shadow-lg">
+                        <AlertCircle size={20} />
+                        <span className="font-bold text-sm flex-1">{errorMsg}</span>
+                        <button onClick={() => setErrorMsg(null)}><X size={20} /></button>
+                    </div>
+                </div>
+            )}
+
+            {/* Success Result Card */}
+            {result && (
+                <div className="w-full mb-8 animate-in zoom-in-95 duration-500">
+                    <div className="bg-gradient-to-r from-green-400 to-emerald-500 p-1 rounded-[2.5rem] shadow-2xl shadow-green-200">
+                        <div className="bg-white rounded-[2.3rem] p-6 flex flex-col sm:flex-row items-center gap-4">
+                            <div className="bg-green-100 p-3 rounded-full"><Check className="text-green-600 w-6 h-6" /></div>
+                            <div className="flex-1 text-center sm:text-left overflow-hidden w-full">
+                                <p className="text-[10px] font-black uppercase tracking-widest text-green-400 mb-1">Saved to Database!</p>
+                                <p className="text-xl font-black text-gray-700 truncate">{result}</p>
+                            </div>
+                            <div className="flex gap-2">
+                                <button onClick={() => copyToClipboard(result)} className="p-3 bg-gray-100 hover:bg-gray-200 rounded-xl transition-colors">
+                                    {copied ? <Check size={20} className="text-green-600" /> : <Copy size={20} className="text-gray-600" />}
+                                </button>
+                                <a href={result} target="_blank" rel="noreferrer" className="p-3 bg-pink-500 hover:bg-pink-600 text-white rounded-xl transition-colors">
+                                    <ExternalLink size={20} />
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            <div className="w-full bg-white rounded-[2.5rem] shadow-2xl shadow-pink-200/50 p-6 sm:p-8 border-4 border-white">
+
+                {/* 1. Destination URL */}
+                <div className="mb-8">
+                    <label className="flex items-center gap-2 text-[11px] font-black uppercase tracking-widest text-pink-400 mb-2 ml-1">
+                        <Settings2 size={12} /> 1. Destination URL
+                    </label>
+                    <div className="relative group">
+                        <input
+                            type="url"
+                            placeholder="https://very-long-link.com/..."
+                            className="w-full p-4 bg-pink-50/30 border-2 border-pink-100 rounded-2xl outline-none focus:border-pink-400 focus:bg-white transition-all text-pink-600 font-medium pr-12"
+                            value={url}
+                            onChange={(e) => setUrl(e.target.value)}
+                        />
+                        <Heart className="absolute right-4 top-1/2 -translate-y-1/2 text-pink-200 w-5 h-5 group-focus-within:text-pink-400 transition-colors" />
+                    </div>
+                </div>
+
+                {/* 2. Short Code Generation */}
+                <div className="mb-8 bg-pink-50/30 p-5 rounded-[2rem] border border-pink-100">
+                    <label className="flex items-center gap-2 text-[11px] font-black uppercase tracking-widest text-pink-400 mb-3 ml-1">
+                        <Sparkles size={12} /> 2. Generate Short Code (URI)
+                    </label>
+                    <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 mb-4">
+                        <div className="bg-white p-2 rounded-xl border border-pink-100">
+                            <label className="text-[9px] font-bold text-gray-400 uppercase block mb-1">Length</label>
+                            <input type="number" min="3" max="32" className="w-full font-bold text-pink-500 outline-none text-sm"
+                                value={genSettings.length} onChange={e => setGenSettings({ ...genSettings, length: +e.target.value })} />
+                        </div>
+                        <div className="bg-white p-2 rounded-xl border border-pink-100">
+                            <label className="text-[9px] font-bold text-gray-400 uppercase block mb-1">Case</label>
+                            <select className="w-full font-bold text-pink-500 outline-none text-sm bg-transparent"
+                                value={genSettings.case} onChange={e => setGenSettings({ ...genSettings, case: e.target.value as CaseType })}>
+                                <option value="mixed">Mixed</option>
+                                <option value="lower">Lower</option>
+                                <option value="upper">Upper</option>
+                            </select>
+                        </div>
+                        <button onClick={() => handleGenerateUri('random')} className="col-span-2 sm:col-span-1 bg-white hover:bg-pink-100 border-2 border-pink-200 text-pink-500 rounded-xl font-bold text-xs py-2 transition-all active:scale-95 flex flex-col items-center justify-center gap-1">
+                            <Hash size={16} /> {generatingUri ? '...' : 'Random'}
+                        </button>
+                        <button onClick={() => handleGenerateUri('wordlist')} className="col-span-2 sm:col-span-1 bg-white hover:bg-pink-100 border-2 border-pink-200 text-pink-500 rounded-xl font-bold text-xs py-2 transition-all active:scale-95 flex flex-col items-center justify-center gap-1">
+                            <BookOpen size={16} /> {generatingUri ? '...' : 'Sentence'}
+                        </button>
+                    </div>
+
+                    <div className="relative flex items-center">
+                        <div className="absolute left-4 flex items-center pointer-events-none z-10">
+                            <span className="text-pink-300 font-bold text-sm sm:text-lg">{displayPrefix}</span>
+                            <span className="text-pink-400 font-black text-lg mx-1">/</span>
+                        </div>
+                        <input
+                            type="text"
+                            placeholder="my-custom-uri"
+                            style={{ paddingLeft: `${displayPrefix.length * 9.5 + 40}px` }}
+                            className="w-full p-4 bg-white border-2 border-pink-200 rounded-2xl outline-none focus:border-pink-500 transition-all text-pink-600 font-black text-lg shadow-inner"
+                            value={formData.uri}
+                            onChange={(e) => setFormData({ ...formData, uri: e.target.value })}
+                        />
+                        {formData.uri && (
+                            <div className="absolute right-4 top-1/2 -translate-y-1/2">
+                                <Check size={18} className="text-green-500" />
+                            </div>
+                        )}
+                    </div>
+                </div>
+
+                {/* 3. Database Settings */}
+                <div className="mb-8 flex flex-col gap-4">
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+
+                        {/* ZMODYFIKOWANA SEKCJA: Expiry Date / Custom Duration */}
+                        <div className="bg-gray-50 p-4 rounded-2xl border border-gray-100 flex flex-col">
+                            <div className="flex items-center justify-between mb-2">
+                                <label className="flex items-center gap-2 text-[10px] font-black uppercase text-gray-400">
+                                    <Clock size={14} /> Expiry Time
+                                </label>
+                                {/* Przełącznik trybu */}
+                                <div className="flex bg-gray-200 rounded-lg p-0.5">
+                                    <button
+                                        onClick={() => setExpiryMode('date')}
+                                        className={`p-1.5 rounded-md transition-all ${expiryMode === 'date' ? 'bg-white text-pink-500 shadow-sm' : 'text-gray-400 hover:text-gray-600'}`}
+                                    >
+                                        <Calendar size={14} />
+                                    </button>
+                                    <button
+                                        onClick={() => setExpiryMode('duration')}
+                                        className={`p-1.5 rounded-md transition-all ${expiryMode === 'duration' ? 'bg-white text-pink-500 shadow-sm' : 'text-gray-400 hover:text-gray-600'}`}
+                                    >
+                                        <Hourglass size={14} />
+                                    </button>
+                                </div>
+                            </div>
+
+                            {expiryMode === 'date' ? (
+                                <>
+                                    <input
+                                        type="datetime-local"
+                                        className="w-full bg-white border border-gray-200 rounded-lg px-3 py-3 text-xs font-bold text-gray-600 outline-none focus:border-pink-400 mb-1"
+                                        value={formData.expiryDate}
+                                        onChange={e => setFormData({ ...formData, expiryDate: e.target.value })}
+                                    />
+                                    <p className="text-[8px] text-gray-400 uppercase pl-1">Pick specific date</p>
+                                </>
+                            ) : (
+                                <>
+                                    {/* NOWE: Custom Duration Inputs dla Mobile */}
+                                    <div className="flex gap-2 mb-1">
+                                        <input
+                                            type="number"
+                                            inputMode="numeric"
+                                            pattern="[0-9]*"
+                                            placeholder="45"
+                                            min="1"
+                                            className="w-1/2 bg-white border border-gray-200 rounded-lg px-3 py-3 text-sm font-bold text-pink-500 outline-none focus:border-pink-400 placeholder:text-gray-300 text-center"
+                                            value={durationValue}
+                                            onChange={(e) => setDurationValue(e.target.value)}
+                                        />
+                                        <select
+                                            className="w-1/2 bg-white border border-gray-200 rounded-lg px-2 py-3 text-xs font-bold text-gray-600 outline-none focus:border-pink-400"
+                                            value={durationUnit}
+                                            onChange={(e) => setDurationUnit(e.target.value)}
+                                        >
+                                            <option value="minutes">Minutes</option>
+                                            <option value="hours">Hours</option>
+                                            <option value="days">Days</option>
+                                            <option value="weeks">Weeks</option>
+                                            <option value="months">Months</option>
+                                        </select>
+                                    </div>
+                                    <p className="text-[8px] text-gray-400 uppercase truncate pl-1">
+                                        {formData.expiryDate
+                                            ? `Expires: ${new Date(formData.expiryDate).toLocaleString()}`
+                                            : 'Enter duration (e.g. 45 min)'}
+                                    </p>
+                                </>
+                            )}
+                        </div>
+
+                        <label className="flex items-center justify-between bg-gray-50 p-4 rounded-2xl border border-gray-100 cursor-pointer hover:bg-pink-50 transition-colors">
+                            <span className="flex items-center gap-2 text-[10px] font-black uppercase text-gray-400"><Shield size={14} /> Private Link</span>
+                            <input type="checkbox" className="accent-pink-500 w-5 h-5" checked={formData.privacy}
+                                onChange={e => setFormData({ ...formData, privacy: e.target.checked })} />
+                        </label>
+                    </div>
+
+                    {/* Subdomain Support Box */}
+                    <div className="bg-gray-50 p-4 rounded-2xl border border-gray-100">
+                        <label className="flex items-center justify-between cursor-pointer mb-2">
+                            <span className="flex items-center gap-2 text-[10px] font-black uppercase text-gray-400"><Globe size={14} /> Subdomain Support</span>
+                            <input
+                                type="checkbox"
+                                className="accent-pink-500 w-5 h-5"
+                                checked={genSettings.withSubdomain}
+                                onChange={e => {
+                                    setGenSettings({ ...genSettings, withSubdomain: e.target.checked });
+                                    if (!e.target.checked) setFormData(prev => ({ ...prev, subdomain: '' }));
+                                }}
+                            />
+                        </label>
+
+                        {genSettings.withSubdomain && (
+                            <div className="animate-in slide-in-from-top-2 duration-300 mt-3">
+                                <div className="relative">
+                                    <input
+                                        type="text"
+                                        placeholder="your-subdomain"
+                                        className="w-full p-3 bg-white border-2 border-pink-100 rounded-xl outline-none focus:border-pink-400 text-sm font-bold text-pink-600 pr-20"
+                                        value={formData.subdomain}
+                                        onChange={(e) => setFormData({ ...formData, subdomain: e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '') })}
+                                    />
+                                    <span className="absolute right-3 top-1/2 -translate-y-1/2 text-[10px] font-black text-pink-200">.{baseDomain}</span>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                </div>
+
+                {/* 4. Submit Button */}
+                <button
+                    onClick={handleSubmitToDb}
+                    disabled={loading}
+                    className="w-full bg-pink-500 hover:bg-pink-600 text-white font-black py-5 rounded-[1.8rem] transition-all shadow-xl shadow-pink-200 active:scale-[0.98] text-xl flex items-center justify-center gap-3 disabled:opacity-50"
+                >
+                    {loading ? (
+                        <>Saving... <RefreshCw className="animate-spin" /></>
+                    ) : (
+                        <>Save to Database <Save className="w-6 h-6" /></>
+                    )}
+                </button>
            </div>

-            <button
-                onClick={onGenerate}
-                className="w-full bg-pink-500 hover:bg-pink-600 text-white font-black py-4 sm:py-5 rounded-xl sm:rounded-[1.5rem] transition-all shadow-xl shadow-pink-100 active:scale-[0.98] text-lg sm:text-xl flex items-center justify-center gap-3 cursor-pointer"
-            >
-                <span className="hidden xs:inline">Generate Kitty Link</span>
-                <span className="xs:hidden">Generate</span>
-                <Sparkles className="w-5 h-5 sm:w-6 sm:h-6" />
-            </button>
+            <footer className="mt-12 text-center opacity-40">
+                <Cat className="mx-auto text-pink-300 mb-2 w-10 h-10" />
+                <p className="text-pink-300 font-black text-[10px] uppercase tracking-[0.2em]">KittyURL Generator v2.2</p>
+            </footer>
        </div>
-
-        {/* Sekcja "No links yet" - Skalowanie paddingu i ikony */}
-        <div className="w-full mt-10 sm:mt-16 text-center">
-            <div className="bg-pink-100/50 rounded-[2rem] sm:rounded-[2.5rem] border-4 border-dashed border-pink-200 p-8 sm:p-12">
-                <Cat className="mx-auto text-pink-200 mb-4 w-12 h-12 sm:w-16 sm:h-16" />
-                <p className="text-pink-300 font-bold text-sm sm:text-base px-2">
-                    No links generated yet. Feed me a URL! 🐾
-                </p>
-            </div>
-        </div>
-    </div>
-);
+    );
+};
--- a/kittyurl-frontend/src/components/KittyGame.tsx
+++ b/kittyurl-frontend/src/components/KittyGame.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { ArrowLeft, Trophy, Sparkles, Moon, Sun } from 'lucide-react';

-// --- MODEL KOTA (Animacje CSS zostają, bo są czasowe, nie klatkowe) ---
+// --- MODEL KOTA (Bez zmian) ---
 interface DetailedKittyProps {
    isJumping: boolean;
    isNight: boolean;
@@ -49,8 +49,13 @@ const DetailedKitty: React.FC<DetailedKittyProps> = ({ isJumping, isNight, isGam
    );
 };

-// --- GŁÓWNY KOMPONENT Z DYNAMICZNYM DELTA TIME ---
+// --- STAŁE WYMIARY LOGICZNE ---
+const GAME_WIDTH = 650;
+const GAME_HEIGHT = 340;
+
+// --- GŁÓWNY KOMPONENT ---
 export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
+    // Stany gry
    const [isPlaying, setIsPlaying] = useState(false);
    const [gameOver, setGameOver] = useState(false);
    const [score, setScore] = useState(0);
@@ -60,25 +65,46 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
    });

    const [displayKittyY, setDisplayKittyY] = useState(0);
-    const [displayObstacleX, setDisplayObstacleX] = useState(650);
+    const [displayObstacleX, setDisplayObstacleX] = useState(GAME_WIDTH);
+
+    // RWD State: Skala
+    const [scale, setScale] = useState(1);

    const isNight = Math.floor(score / 10) % 2 === 1;

    // Referencje fizyczne
    const kittyYRef = useRef(0);
-    const obstacleXRef = useRef(650);
+    const obstacleXRef = useRef(GAME_WIDTH);
    const velocityRef = useRef(0);
    const scoreRef = useRef(0);
    const requestRef = useRef<number>(0);
    const lastTimeRef = useRef<number>(0);

-    // STAŁE KONFIGURACYJNE (Wartości na sekundę - niezależne od Hz)
-    const GRAVITY = 1800;        // Kot spadnie o 1800px w ciągu sekundy (jeśli nie ma prędkości początkowej)
-    const JUMP_FORCE = -550;     // Prędkość startowa skoku
-    const INITIAL_SPEED = 380;   // Prędkość przeszkody w px/s
-    const SPEED_INCREMENT = 12;  // Przyspieszenie px/s na każdy punkt
+    // STAŁE KONFIGURACYJNE
+    const GRAVITY = 1800;
+    const JUMP_FORCE = -550;
+    const INITIAL_SPEED = 380;
+    const SPEED_INCREMENT = 12;
    const GROUND_Y = 0;

+    // --- RWD LOGIC ---
+    useEffect(() => {
+        const handleResize = () => {
+            const availableWidth = window.innerWidth - 32; // marginesy boczne
+            const availableHeight = window.innerHeight - 100; // miejsce na nagłówek
+
+            const scaleX = availableWidth / GAME_WIDTH;
+            const scaleY = availableHeight / GAME_HEIGHT;
+
+            // Skalujemy w dół jeśli ekran jest mały, ale max 1 (nie powiększamy na dużych ekranach)
+            setScale(Math.min(scaleX, scaleY, 1));
+        };
+
+        window.addEventListener('resize', handleResize);
+        handleResize();
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
    const endGame = useCallback(() => {
        setGameOver(true);
        setIsPlaying(false);
@@ -95,12 +121,11 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
        setScore(0);
        scoreRef.current = 0;
        kittyYRef.current = 0;
-        obstacleXRef.current = 700;
+        obstacleXRef.current = GAME_WIDTH + 50;
        velocityRef.current = 0;
-        // Kluczowe: inicjalizacja czasu startu
        lastTimeRef.current = performance.now();
        setDisplayKittyY(0);
-        setDisplayObstacleX(700);
+        setDisplayObstacleX(GAME_WIDTH + 50);
    }, []);

    const jump = useCallback(() => {
@@ -109,19 +134,23 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
        }
    }, [gameOver, isPlaying]);

+    // --- OBSŁUGA WEJŚCIA (Touch & Mouse) ---
+    const handleAction = useCallback((e?: React.SyntheticEvent) => {
+        // Nie używamy e.preventDefault() tutaj, bo CSS touch-action załatwia sprawę
+        if (e) e.stopPropagation();
+
+        if (!isPlaying || gameOver) startGame(); else jump();
+    }, [isPlaying, gameOver, startGame, jump]);
+
    useEffect(() => {
        const update = (currentTime: number) => {
            if (gameOver || !isPlaying) return;

-            // --- OBLICZANIE DELTA TIME (Dynamiczna szybkość) ---
-            // dt to czas w sekundach, jaki upłynął od ostatniej klatki (np. 0.016 dla 60Hz, 0.007 dla 144Hz)
            const dt = (currentTime - lastTimeRef.current) / 1000;
            lastTimeRef.current = currentTime;
-
-            // Zabezpieczenie przed "skokiem" (np. gdy użytkownik zmieni kartę w przeglądarce)
            const frameTime = Math.min(dt, 0.1);

-            // Fizyka kota (jednostki * czas)
+            // Fizyka
            velocityRef.current += GRAVITY * frameTime;
            kittyYRef.current -= velocityRef.current * frameTime;

@@ -130,24 +159,22 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
                velocityRef.current = 0;
            }

-            // Ruch przeszkody (prędkość * czas)
+            // Przeszkoda
            const currentSpeed = INITIAL_SPEED + (scoreRef.current * SPEED_INCREMENT);
            obstacleXRef.current -= currentSpeed * frameTime;

-            // Reset przeszkody
            if (obstacleXRef.current < -80) {
-                obstacleXRef.current = 750;
+                obstacleXRef.current = GAME_WIDTH + 50;
                scoreRef.current += 1;
                setScore(scoreRef.current);
            }

-            // Kolizja (strefa trafienia dopasowana do czasu)
+            // Kolizja
            if (obstacleXRef.current < 100 && obstacleXRef.current > 20 && kittyYRef.current < 45) {
                endGame();
                return;
            }

-            // Renderowanie wizualne
            setDisplayKittyY(kittyYRef.current);
            setDisplayObstacleX(obstacleXRef.current);

@@ -164,86 +191,111 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
        const handleKey = (e: KeyboardEvent) => {
            if (e.code === 'Space') {
                e.preventDefault();
-                if (!isPlaying || gameOver) startGame(); else jump();
+                handleAction();
            }
        };
        window.addEventListener('keydown', handleKey);
        return () => window.removeEventListener('keydown', handleKey);
-    }, [isPlaying, gameOver, startGame, jump]);
+    }, [handleAction]);

    return (
-        <div className="flex flex-col items-center justify-center min-h-[70vh] p-4 font-sans select-none">
-            <button onClick={onBack} className="mb-6 flex items-center gap-2 text-pink-500 font-bold hover:scale-105 transition-all outline-none">
+        <div className="flex flex-col items-center justify-start pt-8 sm:justify-center min-h-[80vh] w-full font-sans select-none overflow-hidden">
+
+            <button
+                onClick={onBack}
+                className="z-50 mb-6 flex items-center gap-2 text-pink-500 font-bold hover:scale-105 transition-all outline-none bg-white/50 px-4 py-2 rounded-full cursor-pointer"
+            >
                <ArrowLeft size={20} /> Back
            </button>

+            {/* KONTENER SKALOWANIA */}
            <div
-                className={`relative w-full max-w-[650px] h-[340px] rounded-[3.5rem] shadow-2xl border-4 transition-colors duration-1000 overflow-hidden cursor-pointer
-                ${isNight ? 'bg-slate-950 border-indigo-500 shadow-indigo-500/20' : 'bg-white border-pink-100 shadow-pink-200/50'}`}
-                onClick={() => { if (!isPlaying || gameOver) startGame(); else jump(); }}
+                style={{
+                    width: GAME_WIDTH,
+                    height: GAME_HEIGHT,
+                    transform: `scale(${scale})`,
+                    transformOrigin: 'top center',
+                    touchAction: 'none' // Zapobiega scrollowaniu na mobile
+                }}
+                className="relative shrink-0"
            >
-                {/* Niebo */}
-                <div className={`absolute top-10 left-12 transition-all duration-1000 ${isNight ? 'translate-y-0 opacity-100' : '-translate-y-20 opacity-0'}`}>
-                    <Moon className="text-indigo-200 fill-indigo-100" size={48} />
-                </div>
-                <div className={`absolute top-10 left-12 transition-all duration-1000 ${isNight ? '-translate-y-20 opacity-0' : 'translate-y-0 opacity-100'}`}>
-                    <Sun className="text-yellow-400 fill-yellow-200" size={48} />
-                </div>
-
-                {/* UI Score */}
-                <div className={`absolute top-6 right-8 text-right z-10 font-black transition-colors duration-1000 ${isNight ? 'text-indigo-100' : 'text-pink-500'}`}>
-                    <div className="text-3xl tracking-tighter">Score: {score}</div>
-                    <div className={`text-sm flex items-center justify-end gap-1 ${isNight ? 'text-indigo-400' : 'text-pink-300'}`}>
-                        <Trophy size={14} /> High: {highScore}
-                    </div>
-                </div>
-
-                {/* KOTEK */}
-                <div className="absolute left-10" style={{ bottom: `${displayKittyY + 48}px` }}>
-                    <DetailedKitty isJumping={displayKittyY > 2} isNight={isNight} isGameOver={gameOver} />
-                </div>
-
-                {/* PRZESZKODA */}
                <div
-                    className={`absolute bottom-12 w-14 h-14 rounded-full border-2 flex items-center justify-center animate-spin transition-colors duration-1000
-                    ${isNight ? 'bg-indigo-900 border-indigo-400 shadow-[0_0_15px_rgba(129,140,248,0.3)]' : 'bg-pink-100 border-pink-300'}`}
-                    style={{ left: `${displayObstacleX}px` }}
+                    className={`relative w-full h-full rounded-[3.5rem] shadow-2xl border-4 transition-colors duration-1000 overflow-hidden cursor-pointer
+                    ${isNight ? 'bg-slate-950 border-indigo-500 shadow-indigo-500/20' : 'bg-white border-pink-100 shadow-pink-200/50'}`}
+                    // Używamy onPointerDown zamiast onClick/onTouchStart
+                    onPointerDown={handleAction}
                >
-                    <div className={`w-10 h-1.5 rounded-full ${isNight ? 'bg-indigo-300' : 'bg-pink-400'} rotate-45`} />
-                    <div className={`absolute w-10 h-1.5 rounded-full ${isNight ? 'bg-indigo-300' : 'bg-pink-400'} -rotate-45`} />
-                </div>
+                    {/* Niebo */}
+                    <div className={`absolute top-10 left-12 transition-all duration-1000 ${isNight ? 'translate-y-0 opacity-100' : '-translate-y-20 opacity-0'}`}>
+                        <Moon className="text-indigo-200 fill-indigo-100" size={48} />
+                    </div>
+                    <div className={`absolute top-10 left-12 transition-all duration-1000 ${isNight ? '-translate-y-20 opacity-0' : 'translate-y-0 opacity-100'}`}>
+                        <Sun className="text-yellow-400 fill-yellow-200" size={48} />
+                    </div>

-                {/* Ziemia */}
-                <div className={`absolute bottom-0 w-full h-12 border-t-4 transition-colors duration-1000 flex items-center justify-around
-                ${isNight ? 'bg-slate-900 border-indigo-900 text-indigo-950' : 'bg-pink-50 border-pink-100 text-pink-100'}`}>
-                    {[...Array(10)].map((_, i) => <span key={i} className="text-2xl grayscale opacity-50">🐾</span>)}
-                </div>
-
-                {/* Ekrany start/stop */}
-                {!isPlaying && !gameOver && (
-                    <div className="absolute inset-0 bg-white/20 backdrop-blur-[4px] flex items-center justify-center z-20">
-                        <div className="bg-white p-12 rounded-[3.5rem] shadow-2xl flex flex-col items-center border-4 border-pink-100 transform hover:scale-105 transition-transform">
-                            <Sparkles className="text-yellow-400 mb-4 animate-pulse" size={50} />
-                            <button className="bg-pink-500 text-white px-12 py-5 rounded-2xl font-black text-2xl shadow-lg hover:bg-pink-600 transition-colors">
-                                START
-                            </button>
-                            <p className="mt-4 text-slate-400 font-bold text-sm uppercase tracking-widest">Click or Space</p>
+                    {/* UI Score */}
+                    <div className={`absolute top-6 right-8 text-right z-10 font-black transition-colors duration-1000 ${isNight ? 'text-indigo-100' : 'text-pink-500'}`}>
+                        <div className="text-3xl tracking-tighter">Score: {score}</div>
+                        <div className={`text-sm flex items-center justify-end gap-1 ${isNight ? 'text-indigo-400' : 'text-pink-300'}`}>
+                            <Trophy size={14} /> High: {highScore}
                        </div>
                    </div>
-                )}

-                {gameOver && (
-                    <div className={`absolute inset-0 backdrop-blur-md flex flex-col items-center justify-center text-center p-6 z-30 transition-colors duration-1000
-                    ${isNight ? 'bg-slate-950/90' : 'bg-pink-50/90'}`}>
-                        <h3 className={`text-6xl font-black mb-4 ${isNight ? 'text-white' : 'text-pink-600'}`}>Oh No! 😿</h3>
-                        <div className={`text-3xl font-bold mb-8 ${isNight ? 'text-indigo-300' : 'text-pink-400'}`}>Score: {score}</div>
-                        <button className="bg-pink-500 text-white border-4 border-white px-14 py-5 rounded-2xl font-black text-2xl hover:scale-110 transition-all shadow-xl active:scale-95">
-                            TRY AGAIN
-                        </button>
+                    {/* KOTEK */}
+                    <div className="absolute left-10 pointer-events-none" style={{ bottom: `${displayKittyY + 48}px` }}>
+                        <DetailedKitty isJumping={displayKittyY > 2} isNight={isNight} isGameOver={gameOver} />
                    </div>
-                )}
+
+                    {/* PRZESZKODA */}
+                    <div
+                        className={`absolute bottom-12 w-14 h-14 rounded-full border-2 flex items-center justify-center animate-spin transition-colors duration-1000 pointer-events-none
+                        ${isNight ? 'bg-indigo-900 border-indigo-400 shadow-[0_0_15px_rgba(129,140,248,0.3)]' : 'bg-pink-100 border-pink-300'}`}
+                        style={{ left: `${displayObstacleX}px` }}
+                    >
+                        <div className={`w-10 h-1.5 rounded-full ${isNight ? 'bg-indigo-300' : 'bg-pink-400'} rotate-45`} />
+                        <div className={`absolute w-10 h-1.5 rounded-full ${isNight ? 'bg-indigo-300' : 'bg-pink-400'} -rotate-45`} />
+                    </div>
+
+                    {/* Ziemia */}
+                    <div className={`absolute bottom-0 w-full h-12 border-t-4 transition-colors duration-1000 flex items-center justify-around pointer-events-none
+                    ${isNight ? 'bg-slate-900 border-indigo-900 text-indigo-950' : 'bg-pink-50 border-pink-100 text-pink-100'}`}>
+                        {[...Array(10)].map((_, i) => <span key={i} className="text-2xl grayscale opacity-50">🐾</span>)}
+                    </div>
+
+                    {/* EKRAN STARTOWY */}
+                    {!isPlaying && !gameOver && (
+                        <div className="absolute inset-0 bg-white/20 backdrop-blur-[4px] flex items-center justify-center z-20">
+                            <div className="bg-white p-12 rounded-[3.5rem] shadow-2xl flex flex-col items-center border-4 border-pink-100 transform hover:scale-105 transition-transform">
+                                <Sparkles className="text-yellow-400 mb-4 animate-pulse" size={50} />
+                                <button className="bg-pink-500 text-white px-12 py-5 rounded-2xl font-black text-2xl shadow-lg hover:bg-pink-600 transition-colors pointer-events-none">
+                                    START
+                                </button>
+                                <p className="mt-4 text-slate-400 font-bold text-sm uppercase tracking-widest">Tap or Space</p>
+                            </div>
+                        </div>
+                    )}
+
+                    {/* GAME OVER */}
+                    {gameOver && (
+                        <div className={`absolute inset-0 backdrop-blur-md flex flex-col items-center justify-center text-center p-6 z-30 transition-colors duration-1000
+                        ${isNight ? 'bg-slate-950/90' : 'bg-pink-50/90'}`}>
+                            <h3 className={`text-6xl font-black mb-4 ${isNight ? 'text-white' : 'text-pink-600'}`}>Oh No! 😿</h3>
+                            <div className={`text-3xl font-bold mb-8 ${isNight ? 'text-indigo-300' : 'text-pink-400'}`}>Score: {score}</div>
+                            <button
+                                className="bg-pink-500 text-white border-4 border-white px-14 py-5 rounded-2xl font-black text-2xl hover:scale-110 transition-all shadow-xl active:scale-95 pointer-events-auto"
+                                onPointerDown={(e) => { e.stopPropagation(); startGame(); }}
+                            >
+                                TRY AGAIN
+                            </button>
+                        </div>
+                    )}
+                </div>
            </div>

+            {/* Informacja dla mobile */}
+            <div className="mt-4 text-xs text-slate-400 sm:hidden">
+                Tap anywhere to jump
+            </div>
        </div>
    );
 };
--- a/kittyurl-frontend/src/context/AuthProvider.tsx
+++ b/kittyurl-frontend/src/context/AuthProvider.tsx
@@ -1,40 +1,18 @@
 import { useState, useCallback, type ReactNode } from 'react';
-import Cookies from 'js-cookie';
 import { AuthContext } from './AuthContext';
 import { sha512 } from '../utils/crypto';

-const TOKEN_KEY = 'ktty_shared_token';
+// Nazwa klucza w localStorage (musi być spójna z Generator.tsx)
+const TOKEN_KEY = 'jwt_token';

-const getCookieConfig = () => {
-    const hostname = window.location.hostname;
-
-    // Sprawdzamy, czy jesteśmy na localhost
-    const isLocal = hostname === 'localhost' || hostname === '127.0.0.1';
-
-    // Sprawdzamy, czy połączenie jest bezpieczne (HTTPS)
-    const isSecure = window.location.protocol === 'https:';
-
-    return {
-        // Na produkcji używamy domeny nadrzędnej z kropką, by działało na subdomenach
-        // Na localhost MUSI być undefined, inaczej przeglądarka odrzuci ciasteczko
-        domain: isLocal ? undefined : '.ktty.is',
-
-        // Atrybut Secure wymaga HTTPS. Na localhost wyłączamy, na produkcji włączamy.
-        secure: isSecure,
-
-        // 'Lax' jest bezpieczne i pozwala na współdzielenie w obrębie subdomen.
-        // Jeśli API jest na zupełnie innej domenie, rozważ 'None' (wymaga Secure: true).
-        sameSite: 'Lax' as const,
-
-        path: '/',
-        expires: 7
-    };
-};
+// Adres API
+const API_BASE = import.meta.env.VITE_API_TARGET || 'https://ktty.is';

 export function AuthProvider({ children }: { children: ReactNode }) {
-    const [token, setToken] = useState<string | null>(() => Cookies.get(TOKEN_KEY) || null);
+    // Inicjalizacja stanu
+    const [token, setToken] = useState<string | null>(() => localStorage.getItem(TOKEN_KEY));
    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState<string | null>(null); // DODANE
+    const [error, setError] = useState<string | null>(null);

    const authRequest = useCallback(async (endpoint: 'signIn' | 'signUp', name: string, pass: string) => {
        setLoading(true);
@@ -42,24 +20,26 @@ export function AuthProvider({ children }: { children: ReactNode }) {

        try {
            const hashedPassword = await sha512(pass);
-            const response = await fetch(`/api/v1/user/${endpoint}`, {
+
+            const response = await fetch(`${API_BASE}/api/v1/user/${endpoint}`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
-                credentials: 'include',
                body: JSON.stringify({ name, password: hashedPassword }),
            });

            const data = await response.json();

            if (!response.ok) {
-                throw new Error(data?.message || 'Błąd autoryzacji');
+                throw new Error(data?.message || data?.error || 'Błąd autoryzacji');
            }

            if (data?.token) {
-                Cookies.set(TOKEN_KEY, data.token, getCookieConfig());
+                localStorage.setItem(TOKEN_KEY, data.token);
                setToken(data.token);
            }
+
            return data;
+
        } catch (err: unknown) {
            const msg = err instanceof Error ? err.message : 'Wystąpił błąd';
            setError(msg);
@@ -69,11 +49,18 @@ export function AuthProvider({ children }: { children: ReactNode }) {
        }
    }, []);

+    // ZMODYFIKOWANA FUNKCJA LOGOUT
    const logout = useCallback(() => {
-        const config = getCookieConfig();
-        // When removing, you must match the domain and path used when setting
-        Cookies.remove(TOKEN_KEY, { domain: config.domain, path: config.path });
+        // 1. Usuwamy token z pamięci
+        localStorage.removeItem(TOKEN_KEY);
        setToken(null);
+
+        // 2. Wymuszamy odświeżenie aplikacji
+        // To jest "Hard Refresh", który czyści cały stan Reacta
+        window.location.reload();
+
+        // Opcjonalnie: Jeśli wolisz tylko przekierowanie na główną bez pełnego przeładowania (szybciej, ale zostawia stan w pamięci):
+        // window.location.href = '/'; 
    }, []);

    return (
Author	SHA1	Message	Date
sherl	f2948eeebe	fix: workaround npm multi-platform build bug Some checks failed Build and push Docker image / build (push) Failing after 1m26s Details Update changelog / changelog (push) Has been cancelled Details Release new version / release (push) Has been cancelled Details rolls back build CI/CD to ARM64-only	2026-01-20 22:14:03 +01:00
Pc	0afbdaf7f8	feat: duration time based expiry date for links All checks were successful Update changelog / changelog (push) Successful in 27s Details	2026-01-19 17:22:31 +01:00
Pc	efc2861ab4	fix: subdomain support, expiry date fix All checks were successful Update changelog / changelog (push) Successful in 26s Details	2026-01-09 22:40:43 +01:00
sherl	18e7baa73c	fix: introduce workaround for cross-platform docker image building Some checks failed Build and push Docker image / build (push) Failing after 3m59s Details Release new version / release (push) Successful in 28s Details Update changelog / changelog (push) Successful in 26s Details	2026-01-09 22:29:17 +01:00
sherl	c829cb2a6b	fix: docker packages and IP parsing for 127.0.0.1 Some checks failed Release new version / release (push) Successful in 27s Details Update changelog / changelog (push) Successful in 26s Details Build and push Docker image / build (push) Failing after 3m57s Details	2026-01-09 21:55:46 +01:00
Pc	9cba46e427	fix: optimized size of kitty photos All checks were successful Update changelog / changelog (push) Successful in 26s Details	2026-01-09 14:48:37 +01:00
Nom4ne	7beb46606f	Updated readme with the current state of app All checks were successful Update changelog / changelog (push) Successful in 25s Details	2026-01-07 23:52:13 +01:00
Pc	cc31de6c8d	fix: added interface that app.tsx uses Some checks failed Build and push Docker image / build (push) Failing after 4m0s Details Release new version / release (push) Successful in 28s Details Update changelog / changelog (push) Successful in 26s Details	2026-01-06 16:50:42 +01:00
Nom4ne	6383916101	Merge pull request 'Generator' (#7 ) from Generator into master All checks were successful Update changelog / changelog (push) Successful in 28s Details Reviewed-on: #7	2026-01-06 16:41:39 +01:00
Pc	2dbed7cc7e	fix: typo fix	2026-01-06 16:40:33 +01:00
Nom4ne	32ca131dde	Merge pull request 'feat: games are no working on moblie devices' (#6 ) from RWD into master All checks were successful Update changelog / changelog (push) Successful in 26s Details Reviewed-on: #6	2026-01-06 16:34:31 +01:00
Pc	4468148acb	feat: games are no working on moblie devices	2026-01-06 16:31:45 +01:00
Pc	99a164f088	feat: added random, word, custom generated links	2026-01-06 16:04:47 +01:00