fix: use serve temporarily to regenerate dist based on user's .env

fix: typo in Dockerfile
fix: workaround npm multi-platform build bug
2026-01-21 00:50:28 +01:00 · 2026-01-20 22:19:43 +01:00 · 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
39 changed files with 6501 additions and 0 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,3 @@
+.env
+kittyurl-frontend/node_modules
+kittyurl-frontend/dist
--- a/.env.default
+++ b/.env.default
@@ -0,0 +1,7 @@
+PUBLIC_URL=https://example.com
+USE_SUBDOMAINS=true
+DEBUG=false
+
+# Frontend specific
+VITE_API_TARGET=https://pies.com
+VITE_ALLOWED_HOST=pies.com # for sub domens add . before host address
--- a/.gitea/workflows/01_docker.yaml
+++ b/.gitea/workflows/01_docker.yaml
@@ -0,0 +1,46 @@
+# Credits: https://www.vanmeeuwen.dev/blog/automating-docker-builds-with-gitea-actions
+# https://gitea.com/gitea/runner-images/src/branch/main/.gitea/workflows/release.yaml
+
+name: Build and push Docker image
+run-name: Build ${{  github.ref_name }} image
+
+on:
+  push:
+    tags:
+      - "*"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Login to registry
+        uses: docker/login-action@v2
+        with:
+          registry: gitea.7o7.cx
+          username: ${{ secrets.REGISTRY_USER }}
+          password: ${{ secrets.REGISTRY_PASSWORD }}
+
+      - 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:
+          REF_NAME: ${{ github.ref_name }}
+        run: |
+          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()
+        run: docker logout gitea.7o7.cx
--- a/.gitea/workflows/02_release.yaml
+++ b/.gitea/workflows/02_release.yaml
@@ -0,0 +1,35 @@
+# Credits: # https://gitea.com/gitea/runner-images/src/branch/main/.gitea/workflows/release.yaml
+name: Release new version
+run-name: Release ${{  github.ref_name }}
+
+on:
+  push:
+    tags:
+      - "*"
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    container: docker.io/thegeeklab/git-sv:2.0.9
+    steps:
+      - name: Install tools
+        run: |
+          apk add -q --update --no-cache nodejs
+      - name: Checkout repository
+        uses: actions/checkout@v6
+        with:
+          fetch-tags: true
+          fetch-depth: 0
+
+      - name: Create changelog
+        run: |
+          git sv current-version
+          git sv release-notes -t ${GITHUB_REF#refs/tags/} -o CHANGELOG.md
+          sed -i '1,2d' CHANGELOG.md # remove version
+          cat CHANGELOG.md
+
+      - name: Release
+        uses: https://github.com/akkuman/gitea-release-action@v1
+        with:
+          body_path: CHANGELOG.md
+          token: "${{ secrets.REPO_RW_TOKEN }}"
--- a/.gitea/workflows/99_changelog.yaml
+++ b/.gitea/workflows/99_changelog.yaml
@@ -0,0 +1,37 @@
+# Credit: https://gitea.com/gitea/helm-gitea/src/branch/main/.gitea/workflows/changelog.yml
+name: Update changelog
+run-name: Update changelog on push
+
+on:
+  push:
+    branches:
+      - master
+    tags:
+      - "*"
+
+jobs:
+  changelog:
+    runs-on: ubuntu-latest
+    container: docker.io/thegeeklab/git-sv:2.0.9
+    steps:
+      - name: Install tools
+        run: |
+          apk add -q --update --no-cache nodejs curl jq sed
+      - name: Checkout repository
+        uses: actions/checkout@v6
+        with:
+          fetch-depth: 0
+      - name: Generate upcoming changelog
+        run: |
+          git sv rn -o changelog.md
+          export RELEASE_NOTES=$(cat changelog.md)
+          export ISSUE_NUMBER=$(curl -s -H 'Authorization: token ${{ secrets.ISSUE_RW_TOKEN }}' "https://gitea.7o7.cx/api/v1/repos/kittyteam/kittyFE/issues?state=open&q=Changelog%20for%20upcoming%20version" | jq '.[].number')
+
+          echo $RELEASE_NOTES
+          JSON_DATA=$(echo "" | jq -Rs --arg title 'Changelog for upcoming version' --arg body "$(cat changelog.md)" '{title: $title, body: $body}')
+
+          if [ -z "$ISSUE_NUMBER" ]; then
+            curl -s -X POST "https://gitea.7o7.cx/api/v1/repos/kittyteam/kittyFE/issues" -H "Authorization: token ${{ secrets.ISSUE_RW_TOKEN }}" -H "Content-Type: application/json" -d "$JSON_DATA" > /dev/null
+          else
+            curl -s -X PATCH "https://gitea.7o7.cx/api/v1/repos/kittyteam/kittyFE/issues/$ISSUE_NUMBER" -H "Authorization: token ${{ secrets.ISSUE_RW_TOKEN }}" -H "Content-Type: application/json" -d "$JSON_DATA" > /dev/null
+          fi
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,8 @@
+################################################################################
+# This .gitignore file was automatically created by Microsoft(R) Visual Studio.
+################################################################################
+
+/.vs
+.node_modules
+/.gitignore
+/.env
--- a/30
+++ b/30
@@ -0,0 +1,30 @@
+# 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 i --force && npm cache clean --force
+COPY ./kittyurl-frontend/. ./
+RUN npm run build
+
+FROM node:24-trixie-slim AS production
+
+WORKDIR /app
+RUN addgroup --gid 1001 nodejs && \
+    adduser  --gid 1001 --uid 1001 nodejs
+COPY --from=builder --chown=nodejs:nodejs /app /app
+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", "serve", "--", "--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/.gitignore
+++ b/kittyurl-frontend/.gitignore
@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.node_modules
--- a/kittyurl-frontend/README.md
+++ b/kittyurl-frontend/README.md
@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
--- a/kittyurl-frontend/eslint.config.js
+++ b/kittyurl-frontend/eslint.config.js
@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])
--- a/kittyurl-frontend/index.html
+++ b/kittyurl-frontend/index.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <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.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.jpg" />
+
+
+</head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/kittyurl-frontend/package-lock.json
+++ b/kittyurl-frontend/package-lock.json
--- a/kittyurl-frontend/package.json
+++ b/kittyurl-frontend/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "kittyurl-frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "serve": "tsc -b && vite build && vite preview --port 6568"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.1.18",
+    "axios": "^1.13.2",
+    "js-cookie": "^3.0.5",
+    "js-sha512": "^0.9.0",
+    "lucide-react": "^0.562.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.11.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/js-cookie": "^3.0.6",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.23",
+    "eslint": "^9.39.1",
+    "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",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  }
+}
--- a/kittyurl-frontend/public/vite.svg
+++ b/kittyurl-frontend/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/kittyurl-frontend/src/App.css
+++ b/kittyurl-frontend/src/App.css
@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
--- a/kittyurl-frontend/src/App.tsx
+++ b/kittyurl-frontend/src/App.tsx
@@ -0,0 +1,81 @@
+import { useState } from 'react';
+import { Navbar } from './components/Navbar';
+import { Generator } from './components/Generator';
+import { LoginView } from './components/LoginView';
+import { HistoryView } from './components/HistoryView';
+import { KittyGame } from './components/KittyGame';
+import { FlappyCat } from './components/FlappyCat';
+import { useAuth } from './hooks/useAuth';
+
+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];
+};
+
+function App() {
+    const [url, setUrl] = useState('');
+    const [view, setView] = useState<View>('home');
+    const { isAuthenticated, logout } = useAuth();
+    const subdomain = getSubdomain();
+
+    /**
+     * STAN POCHODNY (Derived State)
+     * Rozwiązuje błąd "cascading renders". Jeśli użytkownik jest na subdomenie
+     * i nie jest zalogowany, automatycznie renderujemy widok logowania,
+     * ale nie nadpisujemy stanu 'view' w nieskończoność.
+     */
+    const activeView = (subdomain && !isAuthenticated) ? 'login' : view;
+
+    const renderView = () => {
+        switch (activeView) {
+            case 'login':
+                return (
+                    <LoginView
+                        onBack={() => setView('home')}
+                        onSuccess={() => setView('home')}
+                    />
+                );
+            case 'history':
+                // Strażnik dostępu dla widoku historii
+                if (!isAuthenticated) {
+                    return <LoginView onBack={() => setView('home')} onSuccess={() => setView('home')} />;
+                }
+                return <HistoryView onBack={() => setView('home')} />;
+            case 'jump-game':
+                return <KittyGame onBack={() => setView('home')} />;
+            case 'flappy-game':
+                return <FlappyCat onBack={() => setView('home')} />;
+            default:
+                return <Generator url={url} setUrl={setUrl} onGenerate={() => alert('Meow!')} />;
+        }
+    };
+
+    return (
+        <div className="min-h-screen bg-[#fff5f8] text-slate-700 font-sans">
+            <Navbar
+                onNavigate={(v: View) => setView(v)}
+                isAuthenticated={isAuthenticated}
+                onLogout={logout}
+            />
+            <main>
+                {/* Jeśli użytkownik jest zalogowany (SSO), activeView od razu 
+                  pokaże Generator, zamiast LoginView.
+                */}
+                {renderView()}
+            </main>
+        </div>
+    );
+}
+
+export default App;
--- a/kittyurl-frontend/src/assets/Ket.jpg
+++ b/kittyurl-frontend/src/assets/Ket.jpg
--- a/kittyurl-frontend/src/assets/kitty.jpg
+++ b/kittyurl-frontend/src/assets/kitty.jpg
--- a/kittyurl-frontend/src/assets/react.svg
+++ b/kittyurl-frontend/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/kittyurl-frontend/src/components/DetailedKitty.tsx
+++ b/kittyurl-frontend/src/components/DetailedKitty.tsx
@@ -0,0 +1,94 @@
+import React from 'react';
+
+interface DetailedKittyProps {
+    isJumping: boolean;
+    isNight: boolean;
+    isGameOver: boolean;
+}
+
+export const DetailedKitty: React.FC<DetailedKittyProps> = ({ isJumping, isNight, isGameOver }) => {
+    const mainColor = isGameOver ? (isNight ? '#475569' : '#cbd5e1') : (isNight ? '#f8fafc' : '#f472b6');
+    const stripeColor = isNight ? '#cbd5e1' : '#ec4899';
+    const earColor = isNight ? '#334155' : '#fbcfe8';
+
+    return (
+        <div className={`relative w-20 h-14 transition-all duration-200 ${isJumping ? '-rotate-6 scale-110' : ''}`}>
+
+            {/* OGON (Merdający) */}
+            <div
+                className="absolute -left-4 top-4 w-8 h-3 rounded-full origin-right rotate-[-20deg]"
+                style={{
+                    backgroundColor: mainColor,
+                    animation: !isGameOver ? 'tail-wag 0.8s ease-in-out infinite' : 'none'
+                }}
+            />
+
+            {/* TUŁÓW */}
+            <div className="absolute inset-0 rounded-[2rem] overflow-hidden" style={{ backgroundColor: mainColor }}>
+                {/* Paski na grzbiecie */}
+                <div className="absolute top-0 left-1/4 w-2 h-4 rounded-full opacity-30" style={{ backgroundColor: stripeColor }} />
+                <div className="absolute top-0 left-1/2 w-2 h-4 rounded-full opacity-30" style={{ backgroundColor: stripeColor }} />
+                <div className="absolute top-0 left-3/4 w-2 h-4 rounded-full opacity-30" style={{ backgroundColor: stripeColor }} />
+            </div>
+
+            {/* GŁOWA */}
+            <div className="absolute -right-4 -top-6 w-14 h-13 rounded-full shadow-sm" style={{ backgroundColor: mainColor }}>
+                {/* Uszy z wnętrzem */}
+                <div className="absolute -top-2 left-1 w-5 h-6 rounded-t-full rotate-[-15deg]" style={{ backgroundColor: mainColor }}>
+                    <div className="absolute inset-1 rounded-t-full" style={{ backgroundColor: earColor }} />
+                </div>
+                <div className="absolute -top-2 right-1 w-5 h-6 rounded-t-full rotate-[15deg]" style={{ backgroundColor: mainColor }}>
+                    <div className="absolute inset-1 rounded-t-full" style={{ backgroundColor: earColor }} />
+                </div>
+
+                {/* Oczy z błyskiem */}
+                <div className={`absolute top-5 left-3 w-2.5 h-2.5 rounded-full ${isGameOver ? 'bg-slate-400' : 'bg-slate-900'}`}>
+                    {!isGameOver && <div className="absolute top-0.5 left-0.5 w-1 h-1 bg-white rounded-full opacity-70" />}
+                </div>
+                <div className={`absolute top-5 right-3 w-2.5 h-2.5 rounded-full ${isGameOver ? 'bg-slate-400' : 'bg-slate-900'}`}>
+                    {!isGameOver && <div className="absolute top-0.5 left-0.5 w-1 h-1 bg-white rounded-full opacity-70" />}
+                </div>
+
+                {/* Wąsy */}
+                <div className="absolute top-7 -left-3 w-4 h-[1px] bg-slate-300 rotate-[10deg] opacity-50" />
+                <div className="absolute top-9 -left-3 w-4 h-[1px] bg-slate-300 rotate-[-5deg] opacity-50" />
+                <div className="absolute top-7 -right-3 w-4 h-[1px] bg-slate-300 rotate-[-10deg] opacity-50" />
+                <div className="absolute top-9 -right-3 w-4 h-[1px] bg-slate-300 rotate-[5deg] opacity-50" />
+
+                {/* Nosek i Pyszczek */}
+                <div className="absolute top-8 left-1/2 -translate-x-1/2 w-2 h-1.5 bg-pink-400 rounded-full" />
+            </div>
+
+            {/* ŁAPKI (Zintegrowane z animacją biegu) */}
+            {/* Przednia lewa */}
+            <div className="absolute bottom-[-10px] left-4 w-3 h-6 rounded-full origin-top"
+                style={{
+                    backgroundColor: mainColor,
+                    animation: !isJumping && !isGameOver ? 'kitty-walk 0.2s infinite' : 'none',
+                    transform: isJumping ? 'rotate(45deg)' : 'none'
+                }}>
+                <div className="absolute bottom-0 w-full h-2 bg-white rounded-full opacity-60" /> {/* Skarpetka */}
+            </div>
+
+            {/* Przednia prawa */}
+            <div className="absolute bottom-[-10px] left-8 w-3 h-6 rounded-full origin-top"
+                style={{
+                    backgroundColor: mainColor,
+                    animation: !isJumping && !isGameOver ? 'kitty-walk-alt 0.2s infinite' : 'none',
+                    transform: isJumping ? 'rotate(45deg)' : 'none'
+                }}>
+                <div className="absolute bottom-0 w-full h-2 bg-white rounded-full opacity-60" />
+            </div>
+
+            {/* Tylna lewa */}
+            <div className="absolute bottom-[-10px] right-4 w-3 h-6 rounded-full origin-top"
+                style={{
+                    backgroundColor: mainColor,
+                    animation: !isJumping && !isGameOver ? 'kitty-walk 0.2s infinite' : 'none',
+                    transform: isJumping ? 'rotate(-45deg)' : 'none'
+                }}>
+                <div className="absolute bottom-0 w-full h-2 bg-white rounded-full opacity-60" />
+            </div>
+        </div>
+    );
+};
--- a/kittyurl-frontend/src/components/FlappyCat.tsx
+++ b/kittyurl-frontend/src/components/FlappyCat.tsx
@@ -0,0 +1,318 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { ArrowLeft, Trophy, Sparkles } from 'lucide-react';
+
+// --- MODEL KOTA (Wizualizacja) ---
+interface DetailedKittyProps { isGameOver: boolean; }
+const DetailedKitty: React.FC<DetailedKittyProps> = ({ isGameOver }) => {
+    const mainColor = isGameOver ? '#cbd5e1' : '#f472b6';
+    const stripeColor = '#ec4899';
+    const earColor = '#fbcfe8';
+    return (
+        <div className="relative w-20 h-14">
+            <div className="absolute -left-4 top-4 w-8 h-3 rounded-full origin-right rotate-[-20deg]" style={{ backgroundColor: mainColor }} />
+            <div className="absolute inset-0 rounded-[2rem] overflow-hidden shadow-sm" style={{ backgroundColor: mainColor }}>
+                <div className="absolute top-0 left-1/4 w-2 h-4 rounded-full opacity-30" style={{ backgroundColor: stripeColor }} />
+            </div>
+            <div className="absolute -right-4 -top-6 w-14 h-13 rounded-full shadow-sm" style={{ backgroundColor: mainColor }}>
+                <div className="absolute -top-2 left-1 w-5 h-6 rounded-t-full rotate-[-15deg]" style={{ backgroundColor: mainColor }}>
+                    <div className="absolute inset-1 rounded-t-full" style={{ backgroundColor: earColor }} />
+                </div>
+                <div className="absolute -top-2 right-1 w-5 h-6 rounded-t-full rotate-[15deg]" style={{ backgroundColor: mainColor }}>
+                    <div className="absolute inset-1 rounded-t-full" style={{ backgroundColor: earColor }} />
+                </div>
+                <div className={`absolute top-5 left-3 w-2.5 h-2.5 rounded-full ${isGameOver ? 'bg-slate-500 flex items-center justify-center text-[10px]' : 'bg-slate-900'}`}>
+                    {isGameOver ? 'x' : <div className="absolute top-0.5 left-0.5 w-1 h-1 bg-white rounded-full opacity-70" />}
+                </div>
+                <div className={`absolute top-5 right-3 w-2.5 h-2.5 rounded-full ${isGameOver ? 'bg-slate-500 flex items-center justify-center text-[10px]' : 'bg-slate-900'}`}>
+                    {isGameOver ? 'x' : <div className="absolute top-0.5 left-0.5 w-1 h-1 bg-white rounded-full opacity-70" />}
+                </div>
+                <div className="absolute top-8 left-1/2 -translate-x-1/2 w-2 h-1.5 bg-pink-400 rounded-full" />
+            </div>
+        </div>
+    );
+};
+
+// --- KONFIGURACJA GRY ---
+const GAP_SIZE = 170;        // Przerwa między rurami
+const PIPE_WIDTH = 70;
+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);
+    const [highScore, setHighScore] = useState<number>(() => {
+        const saved = localStorage.getItem('flappyKittyHighScore');
+        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 }[]>([]);
+    const scoreRef = useRef(0);
+    const requestRef = useRef<number>(0);
+    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);
+        const currentHS = parseInt(localStorage.getItem('flappyKittyHighScore') || '0', 10);
+        if (scoreRef.current > currentHS) {
+            setHighScore(scoreRef.current);
+            localStorage.setItem('flappyKittyHighScore', scoreRef.current.toString());
+        }
+    }, []);
+
+    const startGame = useCallback(() => {
+        setIsPlaying(true);
+        setGameOver(false);
+        setScore(0);
+        scoreRef.current = 0;
+        kittyYRef.current = 150;
+        velocityRef.current = 0;
+        pipesRef.current = [];
+        spawnTimerRef.current = 0;
+        lastTimeRef.current = performance.now();
+        setDisplayKittyY(150);
+        setDisplayPipes([]);
+        setRotation(0);
+    }, []);
+
+    const flap = useCallback(() => {
+        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;
+
+            // Delta time w sekundach
+            const dt = (currentTime - lastTimeRef.current) / 1000;
+            lastTimeRef.current = currentTime;
+            const frameTime = Math.min(dt, 0.1); // Limit laga
+
+            // 1. Fizyka grawitacji
+            velocityRef.current += GRAVITY * frameTime;
+            kittyYRef.current += velocityRef.current * frameTime;
+
+            // Rotacja
+            setRotation(Math.min(Math.max(velocityRef.current * 0.12, -25), 90));
+
+            // Kolizja z sufitem/podłogą
+            if (kittyYRef.current > GAME_HEIGHT - 40 || kittyYRef.current < -50) {
+                endGame();
+                return;
+            }
+
+            // 2. Generowanie rur
+            spawnTimerRef.current += frameTime;
+            if (spawnTimerRef.current >= PIPE_SPAWN_RATE) {
+                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;
+            }
+
+            // 3. Ruch rur i kolizje
+            const updatedPipes = [];
+            for (const p of pipesRef.current) {
+                p.x -= PIPE_SPEED * frameTime;
+
+                // 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;
+                    }
+                }
+
+                // Naliczanie punktów
+                if (p.x < 50 && !p.passed) {
+                    p.passed = true;
+                    scoreRef.current += 1;
+                    setScore(scoreRef.current);
+                }
+
+                // Usuwanie starych rur
+                if (p.x > -PIPE_WIDTH - 50) updatedPipes.push(p);
+            }
+            pipesRef.current = updatedPipes;
+
+            // 4. Renderowanie
+            setDisplayKittyY(kittyYRef.current);
+            setDisplayPipes([...pipesRef.current]);
+
+            requestRef.current = requestAnimationFrame(update);
+        };
+
+        if (isPlaying && !gameOver) {
+            requestRef.current = requestAnimationFrame(update);
+        }
+        return () => cancelAnimationFrame(requestRef.current);
+    }, [isPlaying, gameOver, endGame]);
+
+    // Obsługa Spacji
+    useEffect(() => {
+        const handleKey = (e: KeyboardEvent) => {
+            if (e.code === 'Space') {
+                e.preventDefault(); // Tu można bezpiecznie użyć preventDefault dla klawiatury
+                handleAction();
+            }
+        };
+        window.addEventListener('keydown', handleKey);
+        return () => window.removeEventListener('keydown', handleKey);
+    }, [handleAction]);
+
+    return (
+        <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
+                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="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>
+
+                    {/* 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" />
+
+                    {/* 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>
+
+                    {/* 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>
+
+                    {/* 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>
+                    )}
+
+                    {/* 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
@@ -0,0 +1,483 @@
+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: (url: string) => void;
+    onGenerate: () => void;
+}
+
+interface GeneratorSettings {
+    length: number;
+    alphanum: boolean;
+    case: CaseType;
+    withSubdomain: boolean;
+}
+
+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>
+
+            <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>
+    );
+};
--- a/kittyurl-frontend/src/components/HistoryView.tsx
+++ b/kittyurl-frontend/src/components/HistoryView.tsx
@@ -0,0 +1,60 @@
+import { PawPrint, ExternalLink } from 'lucide-react';
+
+export const HistoryView = ({ onBack }: { onBack: () => void }) => (
+    <div className="max-w-4xl mx-auto px-4 py-6 sm:p-6 sm:pt-10">
+        {/* Przycisk powrotu - mniejszy margines na mobile */}
+        <button
+            onClick={onBack}
+            className="mb-6 sm:mb-8 flex items-center gap-2 text-pink-500 font-bold hover:scale-105 transition-transform text-sm sm:text-base"
+        >
+            <PawPrint size={18} /> Back to KittyURL
+        </button>
+
+        <div className="bg-white/80 backdrop-blur-md rounded-[2rem] sm:rounded-[2.5rem] p-5 sm:p-8 shadow-xl border-2 border-pink-50">
+            <h2 className="text-2xl sm:text-3xl font-black text-slate-800 mb-6 sm:mb-8 flex items-center gap-2">
+                Recent Paws <span className="text-xl sm:text-2xl">🐾</span>
+            </h2>
+
+            <div className="overflow-hidden rounded-2xl border border-pink-100">
+                {/* Widok Tabeli (widoczny od ekranów 'sm') */}
+                <table className="w-full text-left bg-white hidden sm:table">
+                    <thead className="bg-pink-50 text-pink-600">
+                        <tr>
+                            <th className="px-6 py-4 font-bold uppercase text-xs">Long URL</th>
+                            <th className="px-6 py-4 font-bold uppercase text-xs">Kitty URL</th>
+                        </tr>
+                    </thead>
+                    <tbody className="divide-y divide-pink-50">
+                        <tr className="hover:bg-pink-50/50 transition-colors">
+                            <td className="px-6 py-4 text-slate-400 truncate max-w-[300px]">
+                                https://very-long-link.com/cats/are/the/best/animals/in/the/world
+                            </td>
+                            <td className="px-6 py-4">
+                                <a href="#" className="font-bold text-pink-500 flex items-center gap-2 hover:underline">
+                                    kitty.url/meow <ExternalLink size={14} />
+                                </a>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+
+                {/* Widok Mobilny (Lista kart zamiast tabeli - widoczny tylko na małych ekranach) */}
+                <div className="sm:hidden divide-y divide-pink-50 bg-white">
+                    <div className="p-4 space-y-2">
+                        <div className="text-[10px] font-bold text-pink-400 uppercase tracking-wider">Long URL</div>
+                        <div className="text-slate-500 text-sm truncate">
+                            https://very-long-link.com/cats/are/the/best/animals/in/the/world
+                        </div>
+                        <div className="pt-2">
+                            <div className="text-[10px] font-bold text-pink-400 uppercase tracking-wider mb-1">Kitty URL</div>
+                            <a href="#" className="font-bold text-pink-500 flex items-center gap-1 text-sm">
+                                kitty.url/meow <ExternalLink size={14} />
+                            </a>
+                        </div>
+                    </div>
+                    {/* Tutaj możesz mapować kolejne wpisy historii tak samo jak wyżej */}
+                </div>
+            </div>
+        </div>
+    </div>
+);
--- a/kittyurl-frontend/src/components/KittyGame.tsx
+++ b/kittyurl-frontend/src/components/KittyGame.tsx
@@ -0,0 +1,301 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { ArrowLeft, Trophy, Sparkles, Moon, Sun } from 'lucide-react';
+
+// --- MODEL KOTA (Bez zmian) ---
+interface DetailedKittyProps {
+    isJumping: boolean;
+    isNight: boolean;
+    isGameOver: boolean;
+}
+
+const DetailedKitty: React.FC<DetailedKittyProps> = ({ isJumping, isNight, isGameOver }) => {
+    const mainColor = isGameOver ? (isNight ? '#475569' : '#cbd5e1') : (isNight ? '#f8fafc' : '#f472b6');
+    const stripeColor = isNight ? '#cbd5e1' : '#ec4899';
+    const earColor = isNight ? '#334155' : '#fbcfe8';
+
+    return (
+        <div className={`relative w-20 h-14 transition-all duration-200 ${isJumping ? '-rotate-6 scale-110' : ''}`}>
+            <div className="absolute -left-4 top-4 w-8 h-3 rounded-full origin-right rotate-[-20deg]"
+                style={{ backgroundColor: mainColor, animation: !isGameOver ? 'tail-wag 0.8s ease-in-out infinite' : 'none' }} />
+            <div className="absolute inset-0 rounded-[2rem] overflow-hidden shadow-sm" style={{ backgroundColor: mainColor }}>
+                <div className="absolute top-0 left-1/4 w-2 h-4 rounded-full opacity-30" style={{ backgroundColor: stripeColor }} />
+                <div className="absolute top-0 left-1/2 w-2 h-4 rounded-full opacity-30" style={{ backgroundColor: stripeColor }} />
+            </div>
+            <div className="absolute -right-4 -top-6 w-14 h-13 rounded-full shadow-sm" style={{ backgroundColor: mainColor }}>
+                <div className="absolute -top-2 left-1 w-5 h-6 rounded-t-full rotate-[-15deg]" style={{ backgroundColor: mainColor }}>
+                    <div className="absolute inset-1 rounded-t-full" style={{ backgroundColor: earColor }} />
+                </div>
+                <div className="absolute -top-2 right-1 w-5 h-6 rounded-t-full rotate-[15deg]" style={{ backgroundColor: mainColor }}>
+                    <div className="absolute inset-1 rounded-t-full" style={{ backgroundColor: earColor }} />
+                </div>
+                <div className={`absolute top-5 left-3 w-2.5 h-2.5 rounded-full ${isGameOver ? 'bg-slate-500 text-[10px] flex items-center justify-center' : 'bg-slate-900'}`}>
+                    {isGameOver ? 'x' : <div className="absolute top-0.5 left-0.5 w-1 h-1 bg-white rounded-full opacity-70" />}
+                </div>
+                <div className={`absolute top-5 right-3 w-2.5 h-2.5 rounded-full ${isGameOver ? 'bg-slate-500 text-[10px] flex items-center justify-center' : 'bg-slate-900'}`}>
+                    {isGameOver ? 'x' : <div className="absolute top-0.5 left-0.5 w-1 h-1 bg-white rounded-full opacity-70" />}
+                </div>
+                <div className="absolute top-8 left-1/2 -translate-x-1/2 w-2 h-1.5 bg-pink-400 rounded-full" />
+            </div>
+            {/* Łapki */}
+            <div className="absolute bottom-[-10px] left-4 w-3 h-6 rounded-full origin-top"
+                style={{ backgroundColor: mainColor, animation: !isJumping && !isGameOver ? 'kitty-walk 0.2s infinite' : 'none', transform: isJumping ? 'rotate(45deg)' : 'none' }}>
+                <div className="absolute bottom-0 w-full h-2 bg-white rounded-full opacity-60" />
+            </div>
+            <div className="absolute bottom-[-10px] right-5 w-3 h-6 rounded-full origin-top"
+                style={{ backgroundColor: mainColor, animation: !isJumping && !isGameOver ? 'kitty-walk-alt 0.2s infinite' : 'none', transform: isJumping ? 'rotate(-45deg)' : 'none' }}>
+                <div className="absolute bottom-0 w-full h-2 bg-white rounded-full opacity-60" />
+            </div>
+        </div>
+    );
+};
+
+// --- 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);
+    const [highScore, setHighScore] = useState<number>(() => {
+        const saved = localStorage.getItem('kittyHighScore');
+        return saved ? parseInt(saved, 10) : 0;
+    });
+
+    const [displayKittyY, setDisplayKittyY] = useState(0);
+    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(GAME_WIDTH);
+    const velocityRef = useRef(0);
+    const scoreRef = useRef(0);
+    const requestRef = useRef<number>(0);
+    const lastTimeRef = useRef<number>(0);
+
+    // 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);
+        const currentHS = parseInt(localStorage.getItem('kittyHighScore') || '0', 10);
+        if (scoreRef.current > currentHS) {
+            setHighScore(scoreRef.current);
+            localStorage.setItem('kittyHighScore', scoreRef.current.toString());
+        }
+    }, []);
+
+    const startGame = useCallback(() => {
+        setIsPlaying(true);
+        setGameOver(false);
+        setScore(0);
+        scoreRef.current = 0;
+        kittyYRef.current = 0;
+        obstacleXRef.current = GAME_WIDTH + 50;
+        velocityRef.current = 0;
+        lastTimeRef.current = performance.now();
+        setDisplayKittyY(0);
+        setDisplayObstacleX(GAME_WIDTH + 50);
+    }, []);
+
+    const jump = useCallback(() => {
+        if (kittyYRef.current <= GROUND_Y && !gameOver && isPlaying) {
+            velocityRef.current = JUMP_FORCE;
+        }
+    }, [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;
+
+            const dt = (currentTime - lastTimeRef.current) / 1000;
+            lastTimeRef.current = currentTime;
+            const frameTime = Math.min(dt, 0.1);
+
+            // Fizyka
+            velocityRef.current += GRAVITY * frameTime;
+            kittyYRef.current -= velocityRef.current * frameTime;
+
+            if (kittyYRef.current <= GROUND_Y) {
+                kittyYRef.current = GROUND_Y;
+                velocityRef.current = 0;
+            }
+
+            // Przeszkoda
+            const currentSpeed = INITIAL_SPEED + (scoreRef.current * SPEED_INCREMENT);
+            obstacleXRef.current -= currentSpeed * frameTime;
+
+            if (obstacleXRef.current < -80) {
+                obstacleXRef.current = GAME_WIDTH + 50;
+                scoreRef.current += 1;
+                setScore(scoreRef.current);
+            }
+
+            // Kolizja
+            if (obstacleXRef.current < 100 && obstacleXRef.current > 20 && kittyYRef.current < 45) {
+                endGame();
+                return;
+            }
+
+            setDisplayKittyY(kittyYRef.current);
+            setDisplayObstacleX(obstacleXRef.current);
+
+            requestRef.current = requestAnimationFrame(update);
+        };
+
+        if (isPlaying && !gameOver) {
+            requestRef.current = requestAnimationFrame(update);
+        }
+        return () => cancelAnimationFrame(requestRef.current);
+    }, [isPlaying, gameOver, endGame]);
+
+    useEffect(() => {
+        const handleKey = (e: KeyboardEvent) => {
+            if (e.code === 'Space') {
+                e.preventDefault();
+                handleAction();
+            }
+        };
+        window.addEventListener('keydown', handleKey);
+        return () => window.removeEventListener('keydown', handleKey);
+    }, [handleAction]);
+
+    return (
+        <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
+                style={{
+                    width: GAME_WIDTH,
+                    height: GAME_HEIGHT,
+                    transform: `scale(${scale})`,
+                    transformOrigin: 'top center',
+                    touchAction: 'none' // Zapobiega scrollowaniu na mobile
+                }}
+                className="relative shrink-0"
+            >
+                <div
+                    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}
+                >
+                    {/* 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 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/components/LoginView.tsx
+++ b/kittyurl-frontend/src/components/LoginView.tsx
@@ -0,0 +1,93 @@
+import { useState, type FormEvent } from 'react'; // Używamy type FormEvent
+import { Cat, ArrowLeft, Loader2, AlertCircle } from 'lucide-react';
+import { useAuth } from '../hooks/useAuth';
+
+interface LoginViewProps {
+    onBack: () => void;
+    onSuccess: () => void;
+}
+
+export const LoginView = ({ onBack, onSuccess }: LoginViewProps) => {
+    const [isSignUp, setIsSignUp] = useState(false);
+    const [name, setName] = useState('');
+    const [password, setPassword] = useState('');
+
+    const { signIn, signUp, loading, error, isAuthenticated } = useAuth();
+
+    const handleSubmit = async (e: FormEvent) => { // Zmieniono na FormEvent
+        e.preventDefault();
+        const result = isSignUp
+            ? await signUp(name, password)
+            : await signIn(name, password);
+
+        if (result) {
+            onSuccess();
+        }
+    };
+
+    return (
+        <div className="flex flex-col items-center justify-center min-h-[80vh] px-4">
+            <div className="bg-white p-10 rounded-[3rem] shadow-2xl border-4 border-pink-100 w-full max-w-md relative">
+                <div className="absolute -top-10 left-1/2 -translate-x-1/2 bg-pink-400 p-4 rounded-full shadow-lg text-white">
+                    <Cat size={40} />
+                </div>
+
+                <h2 className="text-3xl font-black text-pink-500 text-center mb-8 mt-4">
+                    {isSignUp ? 'Create Kitty Account' : 'Kitty Login'}
+                </h2>
+
+                {error && (
+                    <div className="mb-6 p-4 bg-red-50 border-2 border-red-100 rounded-2xl text-red-500 text-sm font-bold flex items-center gap-2">
+                        <AlertCircle size={18} /> {error}
+                    </div>
+                )}
+
+                {isAuthenticated && (
+                    <div className="mb-6 p-4 bg-green-50 border-2 border-green-100 rounded-2xl text-green-600 text-sm font-bold text-center">
+                        Success! Meow! 🐾
+                    </div>
+                )}
+
+                <form onSubmit={handleSubmit} className="space-y-4">
+                    <input
+                        type="text"
+                        placeholder="Username or Email"
+                        className="w-full p-4 bg-pink-50 border-2 border-pink-100 rounded-2xl outline-none focus:border-pink-300 transition-all"
+                        value={name}
+                        onChange={(e) => setName(e.target.value)}
+                        required
+                    />
+                    <input
+                        type="password"
+                        placeholder="Secret Password"
+                        className="w-full p-4 bg-pink-50 border-2 border-pink-100 rounded-2xl outline-none focus:border-pink-300 transition-all"
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        required
+                    />
+
+                    <button
+                        type="submit"
+                        disabled={loading}
+                        className="w-full bg-pink-500 hover:bg-pink-600 disabled:bg-pink-300 text-white py-4 rounded-2xl font-bold shadow-lg transition-all active:scale-95 flex items-center justify-center gap-2"
+                    >
+                        {loading ? <Loader2 className="animate-spin" /> : (isSignUp ? 'Register Now' : 'Meow In!')}
+                    </button>
+                </form>
+
+                <div className="mt-6 text-center">
+                    <button
+                        onClick={() => setIsSignUp(!isSignUp)}
+                        className="text-pink-400 text-sm font-bold hover:underline"
+                    >
+                        {isSignUp ? 'Already have an account? Log in' : 'New here? Create an account'}
+                    </button>
+                </div>
+
+                <button onClick={onBack} className="w-full mt-4 text-pink-200 text-xs font-bold flex items-center justify-center gap-2">
+                    <ArrowLeft size={14} /> Back to home
+                </button>
+            </div>
+        </div>
+    );
+};
--- a/kittyurl-frontend/src/components/Navbar.tsx
+++ b/kittyurl-frontend/src/components/Navbar.tsx
@@ -0,0 +1,73 @@
+import { History as HistoryIcon, LogIn, LogOut, Gamepad2, Wind, Cat } from 'lucide-react';
+import type { View } from '../App';
+
+interface NavbarProps {
+    onNavigate: (view: View) => void;
+    isAuthenticated: boolean;
+    onLogout: () => void;
+}
+
+export const Navbar = ({ onNavigate, isAuthenticated, onLogout }: NavbarProps) => (
+    <nav className="max-w-5xl mx-auto py-4 px-4 flex items-center justify-between gap-4">
+        {/* LEWA STRONA: Przycisk Home w stylu Kitty */}
+        <button
+            onClick={() => onNavigate('home')}
+            className="flex items-center gap-2 px-4 py-2 bg-pink-500 hover:bg-pink-600 rounded-full font-black text-white transition-all active:scale-95 shadow-lg shadow-pink-200"
+        >
+            <Cat size={20} fill="currentColor" />
+            <span className="text-lg tracking-tighter">KittyURL</span>
+        </button>
+
+        {/* PRAWA STRONA: Pozostałe przyciski zgrupowane w divie */}
+        <div className="flex flex-wrap justify-end gap-2 sm:gap-3">
+            {/* Przycisk Jump Game */}
+            <button
+                onClick={() => onNavigate('jump-game')}
+                className="flex items-center gap-2 px-3 py-2 sm:px-4 bg-pink-100 hover:bg-pink-200 rounded-full font-bold text-pink-600 transition-all active:scale-95 text-sm sm:text-base"
+            >
+                <Gamepad2 size={18} />
+                <span className="hidden md:inline">Jump</span>
+            </button>
+
+            {/* Przycisk Flappy Cat */}
+            <button
+                onClick={() => onNavigate('flappy-game')}
+                className="flex items-center gap-2 px-3 py-2 sm:px-4 bg-blue-100 hover:bg-blue-200 rounded-full font-bold text-blue-600 transition-all active:scale-95 text-sm sm:text-base"
+            >
+                <Wind size={18} />
+                <span className="hidden md:inline">Flappy</span>
+            </button>
+
+            {/* Przycisk History */}
+            <button
+                onClick={() => onNavigate('history')}
+                className="flex items-center gap-2 px-3 py-2 sm:px-4 bg-white rounded-full font-bold text-pink-500 border border-pink-100 transition-all active:scale-95 text-sm sm:text-base"
+            >
+                <HistoryIcon size={18} />
+                <span className="hidden md:inline">History</span>
+            </button>
+
+            {/* Logowanie / Wylogowanie */}
+            {isAuthenticated ? (
+                <button
+                    onClick={() => {
+                        onLogout();
+                        onNavigate('home');
+                    }}
+                    className="flex items-center gap-2 px-3 py-2 sm:px-4 bg-pink-50 hover:bg-pink-100 rounded-full font-bold text-pink-500 border-2 border-pink-200 transition-all active:scale-95 text-sm sm:text-base"
+                >
+                    <LogOut size={18} />
+                    <span className="hidden md:inline">Logout</span>
+                </button>
+            ) : (
+                <button
+                    onClick={() => onNavigate('login')}
+                    className="flex items-center gap-2 px-4 py-2 bg-pink-500 hover:bg-pink-600 rounded-full font-bold text-white transition-all active:scale-95 text-sm sm:text-base shadow-lg shadow-pink-200"
+                >
+                    <LogIn size={18} />
+                    <span className="hidden sm:inline">Sign In</span>
+                </button>
+            )}
+        </div>
+    </nav>
+);
--- a/kittyurl-frontend/src/context/AuthContext.tsx
+++ b/kittyurl-frontend/src/context/AuthContext.tsx
@@ -0,0 +1,6 @@
+// src/context/AuthContext.ts
+import { createContext } from 'react';
+import type { AuthContextType } from '../types/auth';
+
+// Eksportujemy tylko "pusty" kontekst
+export const AuthContext = createContext<AuthContextType | undefined>(undefined);
--- a/kittyurl-frontend/src/context/AuthProvider.tsx
+++ b/kittyurl-frontend/src/context/AuthProvider.tsx
@@ -0,0 +1,79 @@
+import { useState, useCallback, type ReactNode } from 'react';
+import { AuthContext } from './AuthContext';
+import { sha512 } from '../utils/crypto';
+
+// Nazwa klucza w localStorage (musi być spójna z Generator.tsx)
+const TOKEN_KEY = 'jwt_token';
+
+// Adres API
+const API_BASE = import.meta.env.VITE_API_TARGET || 'https://ktty.is';
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+    // Inicjalizacja stanu
+    const [token, setToken] = useState<string | null>(() => localStorage.getItem(TOKEN_KEY));
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const authRequest = useCallback(async (endpoint: 'signIn' | 'signUp', name: string, pass: string) => {
+        setLoading(true);
+        setError(null);
+
+        try {
+            const hashedPassword = await sha512(pass);
+
+            const response = await fetch(`${API_BASE}/api/v1/user/${endpoint}`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ name, password: hashedPassword }),
+            });
+
+            const data = await response.json();
+
+            if (!response.ok) {
+                throw new Error(data?.message || data?.error || 'Błąd autoryzacji');
+            }
+
+            if (data?.token) {
+                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);
+            return null;
+        } finally {
+            setLoading(false);
+        }
+    }, []);
+
+    // ZMODYFIKOWANA FUNKCJA LOGOUT
+    const logout = useCallback(() => {
+        // 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 (
+        <AuthContext.Provider value={{
+            isAuthenticated: !!token,
+            token,
+            loading,
+            error,
+            signIn: (n, p) => authRequest('signIn', n, p),
+            signUp: (n, p) => authRequest('signUp', n, p),
+            logout
+        }}>
+            {children}
+        </AuthContext.Provider>
+    );
+}
--- a/kittyurl-frontend/src/hooks/useAuth.ts
+++ b/kittyurl-frontend/src/hooks/useAuth.ts
@@ -0,0 +1,11 @@
+// src/hooks/useAuth.ts
+import { useContext } from 'react';
+import { AuthContext } from '../context/AuthContext';
+
+export const useAuth = () => {
+    const context = useContext(AuthContext);
+    if (!context) {
+        throw new Error('useAuth must be used within an AuthProvider');
+    }
+    return context;
+};
--- a/kittyurl-frontend/src/index.css
+++ b/kittyurl-frontend/src/index.css
@@ -0,0 +1,108 @@
+@import "tailwindcss";
+
+/* Jeśli powyższy import nie działa (używasz Tailwind v3), użyj tych trzech linii: */
+/* @tailwind base; @tailwind components; @tailwind utilities; */
+
+:root {
+    background-color: #fff5f8;
+}
+
+body {
+    margin: 0;
+        font-family: 'Inter', system-ui, -apple-system, sans-serif;
+}
+
+#root {
+    width: 100%;
+}
+/* Animacja chodzenia - przednie i tylne łapki poruszają się naprzemiennie */
+@keyframes kitty-walk {
+    0%, 100% {
+        transform: rotate(-20deg);
+    }
+
+    50% {
+        transform: rotate(20deg);
+    }
+}
+
+@keyframes kitty-walk-alt {
+    0%, 100% {
+        transform: rotate(20deg);
+    }
+
+    50% {
+        transform: rotate(-20deg);
+    }
+}
+
+/* Merdanie ogonkiem */
+@keyframes tail-wag {
+    0%, 100% {
+        transform: rotate(0deg);
+    }
+
+    50% {
+        transform: rotate(15deg);
+    }
+}
+
+/* Delikatne pulsowanie ciała (oddychanie) */
+@keyframes kitty-breathe {
+    0%, 100% {
+        transform: scaleY(1);
+    }
+
+    50% {
+        transform: scaleY(1.05);
+    }
+}
+
+/* Animacja łapek podczas skoku (podkurczanie) */
+.legs-jump {
+    transform: rotate(45deg) translateY(-5px) !important;
+}
+/* Animacja oddychania tułowia */
+@keyframes kitty-breathe {
+  0%, 100% { transform: scaleY(1); }
+  50% { transform: scaleY(1.03); }
+}
+
+/* Animacja chodzenia łapek - naprzemienna */
+@keyframes kitty-walk {
+  0%, 100% { transform: rotate(-25deg); }
+  50% { transform: rotate(25deg); }
+}
+
+@keyframes kitty-walk-alt {
+  0%, 100% { transform: rotate(25deg); }
+  50% { transform: rotate(-25deg); }
+}
+
+/* Merdanie ogonkiem */
+@keyframes tail-wag {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(20deg); }
+}
+@keyframes kitty-walk {
+  0%, 100% { transform: rotate(-30deg) translateY(0); }
+  50% { transform: rotate(30deg) translateY(-2px); }
+}
+
+@keyframes kitty-walk-alt {
+  0%, 100% { transform: rotate(30deg) translateY(-2px); }
+  50% { transform: rotate(-30deg) translateY(0); }
+}
+
+@keyframes tail-wag {
+  0%, 100% { transform: rotate(-20deg); }
+  50% { transform: rotate(10deg); }
+}
+
+@keyframes kitty-breathe {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.02); }
+}
+.animate-spin-slow {
+    animation: animate-spin-slow 8s linear infinite;
+}
--- a/kittyurl-frontend/src/main.tsx
+++ b/kittyurl-frontend/src/main.tsx
@@ -0,0 +1,15 @@
+// src/main.tsx
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+// ZMIANA: Importujemy z AuthProvider, a nie z AuthContext
+import { AuthProvider } from './context/AuthProvider';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+    <React.StrictMode>
+        <AuthProvider>
+            <App />
+        </AuthProvider>
+    </React.StrictMode>
+);  
--- a/kittyurl-frontend/src/types/auth.ts
+++ b/kittyurl-frontend/src/types/auth.ts
@@ -0,0 +1,17 @@
+// src/types/auth.ts
+export interface AuthResponse {
+    token?: string;
+    message?: string;
+    error?: string;
+    status?: string;
+}
+
+export interface AuthContextType {
+    isAuthenticated: boolean;
+    token: string | null;
+    loading: boolean;
+    error: string | null;
+    signIn: (name: string, pass: string) => Promise<AuthResponse | null>;
+    signUp: (name: string, pass: string) => Promise<AuthResponse | null>;
+    logout: () => void;
+}     
--- a/kittyurl-frontend/src/utils/authUtils.ts
+++ b/kittyurl-frontend/src/utils/authUtils.ts
@@ -0,0 +1,17 @@
+// src/utils/authUtils.ts
+
+export interface AuthResponse {
+    token?: string;
+    message?: string;
+    error?: string;
+}
+
+/**
+ * Bezpieczne haszowanie SHA-512
+ */
+export async function sha512(message: string): Promise<string> {
+    const msgUint8 = new TextEncoder().encode(message);
+    const hashBuffer = await crypto.subtle.digest('SHA-512', msgUint8);
+    const hashArray = Array.from(new Uint8Array(hashBuffer));
+    return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
+}
--- a/kittyurl-frontend/src/utils/crypto.ts
+++ b/kittyurl-frontend/src/utils/crypto.ts
@@ -0,0 +1,7 @@
+// src/utils/crypto.ts
+export async function sha512(message: string): Promise<string> {
+    const msgUint8 = new TextEncoder().encode(message);
+    const hashBuffer = await crypto.subtle.digest('SHA-512', msgUint8);
+    const hashArray = Array.from(new Uint8Array(hashBuffer));
+    return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
+}
--- a/kittyurl-frontend/tsconfig.app.json
+++ b/kittyurl-frontend/tsconfig.app.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
--- a/kittyurl-frontend/tsconfig.json
+++ b/kittyurl-frontend/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+
+  ]
+}
--- a/kittyurl-frontend/tsconfig.node.json
+++ b/kittyurl-frontend/tsconfig.node.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/kittyurl-frontend/vite.config.ts
+++ b/kittyurl-frontend/vite.config.ts
@@ -0,0 +1,54 @@
+import { defineConfig, loadEnv, type PluginOption } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default defineConfig(({ mode }) => {
+    const envDirectory = path.resolve(__dirname, '..');
+    const env = loadEnv(mode, envDirectory, '');
+
+    const backendTarget = env.VITE_API_TARGET;
+
+    return {
+        envDir: envDirectory,
+        plugins: [
+            react() as PluginOption,
+            tailwindcss() as PluginOption,
+        ],
+        server: {
+            port: 6568,
+            host: true, // Pozwala na dostęp przez IP w sieci lokalnej
+            // Jeśli testujesz subdomeny lokalnie (np. app.local.ktty.is), dodaj to:
+            allowedHosts: [
+                '.ktty.is',
+                'localhost',
+                '127.0.0.1',
+
+            ],
+            // vite.config.ts
+            proxy: {
+                '/api': {
+                    target: backendTarget,
+                    changeOrigin: true,
+                    secure: false,
+                    cookieDomainRewrite: {
+                        "*": ""
+                    },                    
+                },
+            },
+        },
+        preview: {
+            port: 6568,
+            allowedHosts: true,
+        },
+        resolve: {
+            alias: {
+                '@': path.resolve(__dirname, './src'),
+            },
+        },
+    }
+})
Author	SHA1	Message	Date
sherl	447ea1c761	fix: use serve temporarily to regenerate dist based on user's .env All checks were successful Build and push Docker image / build (push) Successful in 33s Details Release new version / release (push) Successful in 27s Details Update changelog / changelog (push) Successful in 25s Details	2026-01-21 00:50:28 +01:00
sherl	89b332f620	fix: typo in Dockerfile All checks were successful Update changelog / changelog (push) Successful in 26s Details	2026-01-20 22:19:43 +01:00
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
Pc	ad76294d73	test: cookie test All checks were successful Update changelog / changelog (push) Successful in 27s Details	2026-01-06 14:54:04 +01:00
Pc	5dd751600c	test:v2 All checks were successful Update changelog / changelog (push) Successful in 28s Details	2026-01-04 16:15:08 +01:00
Pc	13909c46f6	test: testing All checks were successful Update changelog / changelog (push) Successful in 28s Details	2026-01-04 14:36:29 +01:00
Pc	3c1d66ba48	fix: subdomain fix All checks were successful Update changelog / changelog (push) Successful in 31s Details	2026-01-04 14:07:16 +01:00
Pc	c765c92f89	feat: added cookies to use subdomains All checks were successful Update changelog / changelog (push) Successful in 27s Details	2026-01-04 13:56:00 +01:00
Pc	dae3479680	fix: not adding subdomain address to fetch api All checks were successful Update changelog / changelog (push) Successful in 28s Details	2026-01-04 13:43:04 +01:00
Pc	549da339e4	fix: login in works in subdomain All checks were successful Update changelog / changelog (push) Successful in 28s Details	2026-01-04 13:33:15 +01:00
Pc	4fa55b4caf	test: subdomaind api All checks were successful Update changelog / changelog (push) Successful in 26s Details	2026-01-03 19:00:48 +01:00
Pc	fc0ee5a4d6	fix: typo fix All checks were successful Update changelog / changelog (push) Successful in 26s Details	2026-01-03 18:43:12 +01:00
Pc	1d1379c776	feat: domain redirection All checks were successful Update changelog / changelog (push) Successful in 35s Details	2026-01-03 18:31:52 +01:00
Pc	95f449a3d2	fix: vite config allowedhost read from .env All checks were successful Update changelog / changelog (push) Successful in 26s Details	2026-01-03 15:54:50 +01:00
Pc	ceeb2cccaf	fix: typo fix All checks were successful Update changelog / changelog (push) Successful in 26s Details	2025-12-31 18:13:16 +01:00
Nom4ne	c85aa78a76	Merge pull request 'fix: typo fix in image path' (#5 ) from RWD into master All checks were successful Update changelog / changelog (push) Successful in 26s Details Reviewed-on: #5	2025-12-31 17:58:57 +01:00
Pc	4d5f5d9605	fix: typo fix in image path	2025-12-31 17:58:34 +01:00
Nom4ne	1822a46e9f	Merge pull request 'feat: opengraph icons' (#4 ) from RWD into master All checks were successful Update changelog / changelog (push) Successful in 26s Details Reviewed-on: #4	2025-12-31 17:44:29 +01:00
Pc	fbac1f34c4	feat: opengraph icons	2025-12-31 17:41:26 +01:00
Nom4ne	0e2633b331	Merge pull request 'feat: responsive desing' (#3 ) from RWD into master All checks were successful Update changelog / changelog (push) Successful in 25s Details Reviewed-on: #3	2025-12-31 16:28:27 +01:00
Pc	de9486bece	feat: responsive desing feat: load api from .env	2025-12-31 13:28:27 +01:00
Nom4ne	311d3d75e9	Merge pull request 'chore: add docker support and gitea workflows' (#1 ) from docker_workflows into master All checks were successful Update changelog / changelog (push) Successful in 26s Details Reviewed-on: #1	2025-12-31 12:09:50 +01:00
sherl	a650b3710e	chore: add basic opengraph for embeds	2025-12-31 05:47:02 +01:00
sherl	42d2a26082	chore: add Dockerfile and dockerignore	2025-12-31 05:46:30 +01:00
sherl	99db834fde	chore: add gitea workflows	2025-12-31 05:12:21 +01:00
Pc	336fead573	fix: game render	2025-12-30 20:44:37 +01:00
Pc	b423cb8f1f	fix: speed calculated based by user monitor hz	2025-12-30 20:41:01 +01:00
Pc	933c34a67e	fix: static fps 60	2025-12-30 20:30:11 +01:00
Pc	d32c5133b5	fix: games packets + static preview port	2025-12-30 20:22:40 +01:00
Pc	502543d6ac	fix: games physics	2025-12-30 19:33:28 +01:00
Pc	bca5fc03a8	feat: sign in sign up with all views	2025-12-30 18:32:13 +01:00
Pc	a30a6168ba	feat: singin singup	2025-12-30 18:30:25 +01:00
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>