Updated version in updateNotifier

fixed an error where app wouldnt launch
Merge branch 'main' of https://git.waifuboard.app/ItsSkaiya/WaifuBoard
2025-12-17 16:37:56 -05:00 · 2025-12-17 21:32:34 +01:00 · 2025-12-17 13:00:35 -05:00 · 2025-12-17 13:00:15 -05:00
21 changed files with 2617 additions and 791 deletions
--- a/desktop/main.js
+++ b/desktop/main.js
@@ -1,12 +1,64 @@
 const { app, BrowserWindow, ipcMain } = require('electron');
 const { fork } = require('child_process');
 const path = require('path');
+const log = require('electron-log');
+
+log.transports.file.level = 'info';
+log.format = '[{y}-{m}-{d} {h}:{i}:{s}.{ms}] [{level}] {text}';

 let win;
 let backend;
+const net = require('net');
+
+function waitForServer(port, host = '127.0.0.1', timeout = 10000) {
+    return new Promise((resolve, reject) => {
+        const start = Date.now();
+
+        const check = () => {
+            const socket = new net.Socket();
+
+            socket
+                .once('connect', () => {
+                    socket.destroy();
+                    resolve();
+                })
+                .once('error', () => {
+                    socket.destroy();
+                    if (Date.now() - start > timeout) {
+                        reject(new Error('Backend timeout'));
+                    } else {
+                        setTimeout(check, 200);
+                    }
+                })
+                .connect(port, host);
+        };
+
+        check();
+    });
+}

 function startBackend() {
-    backend = fork(path.join(__dirname, 'server.js'));
+    backend = fork(path.join(__dirname, 'server.js'), [], {
+        stdio: ['pipe', 'pipe', 'pipe', 'ipc'],
+        env: {
+            ...process.env,
+            IS_PACKAGED: app.isPackaged ? 'true' : 'false'
+        }
+    });
+
+    log.info('Starting backend process...');
+
+    backend.stdout.on('data', (data) => {
+        log.info(`[Backend]: ${data.toString().trim()}`);
+    });
+
+    backend.stderr.on('data', (data) => {
+        log.error(`[Backend ERROR]: ${data.toString().trim()}`);
+    });
+
+    backend.on('exit', (code) => {
+        log.warn(`Backend process exited with code: ${code}`);
+    });
 }

 function createWindow() {
@@ -23,19 +75,47 @@ function createWindow() {
    });

    win.setMenu(null);
+
    win.loadURL('http://localhost:54322');
+
+    win.on('closed', () => {
+        win = null;
+    });
 }

 ipcMain.on("win:minimize", () => win.minimize());
-ipcMain.on("win:maximize", () => win.maximize());
+ipcMain.on("win:maximize", () => {
+    if (win.isMaximized()) {
+        win.unmaximize();
+    } else {
+        win.maximize();
+    }
+});
 ipcMain.on("win:close", () => win.close());

-app.whenReady().then(() => {
+process.on('uncaughtException', (err) => {
+    log.error('Critical unhandled error in Main:', err);
+});
+
+app.whenReady().then(async () => {
+    log.info('--- Application Started ---');
+    console.log("Logs location:", log.transports.file.getFile().path);
    startBackend();
+    await waitForServer(54322);
    createWindow();
+
+    app.on('activate', () => {
+        if (BrowserWindow.getAllWindows().length === 0) createWindow();
+    });
 });

 app.on('window-all-closed', () => {
-    if (backend) backend.kill();
+    log.info('Closing all windows...');
+    if (backend) {
+        backend.kill();
+        log.info('Backend process terminated.');
+    }
+    if (process.platform !== 'darwin') {
        app.quit();
+    }
 });
--- a/desktop/package-lock.json
+++ b/desktop/package-lock.json
@@ -11,10 +11,11 @@
      "dependencies": {
        "@fastify/static": "^8.3.0",
        "@ryuziii/discord-rpc": "^1.0.1-rc.1",
-        "bcrypt": "^6.0.0",
+        "bcryptjs": "^3.0.3",
        "bindings": "^1.5.0",
        "cheerio": "^1.1.2",
        "dotenv": "^17.2.3",
+        "electron-log": "^5.4.3",
        "fastify": "^5.6.2",
        "jsonwebtoken": "^9.0.3",
        "node-addon-api": "^8.5.0",
@@ -1972,18 +1973,13 @@
      ],
      "license": "MIT"
    },
-    "node_modules/bcrypt": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/bcrypt/-/bcrypt-6.0.0.tgz",
-      "integrity": "sha512-cU8v/EGSrnH+HnxV2z0J7/blxH8gq7Xh2JFT6Aroax7UohdmiJJlxApMxtKfuI7z68NvvVcmR78k2LbT6efhRg==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "dependencies": {
-        "node-addon-api": "^8.3.0",
-        "node-gyp-build": "^4.8.4"
-      },
-      "engines": {
-        "node": ">= 18"
+    "node_modules/bcryptjs": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-3.0.3.tgz",
+      "integrity": "sha512-GlF5wPWnSa/X5LKM1o0wz0suXIINz1iHRLvTS+sLyi7XPbe5ycmYI3DlZqVGZZtDgl4DmasFg7gOB3JYbphV5g==",
+      "license": "BSD-3-Clause",
+      "bin": {
+        "bcrypt": "bin/bcrypt"
      }
    },
    "node_modules/bindings": {
@@ -3402,6 +3398,15 @@
        "node": ">= 10.0.0"
      }
    },
+    "node_modules/electron-log": {
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/electron-log/-/electron-log-5.4.3.tgz",
+      "integrity": "sha512-sOUsM3LjZdugatazSQ/XTyNcw8dfvH1SYhXWiJyfYodAAKOZdHs0txPiLDXFzOZbhXgAgshQkshH2ccq0feyLQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
    "node_modules/electron-publish": {
      "version": "26.0.11",
      "resolved": "https://registry.npmjs.org/electron-publish/-/electron-publish-26.0.11.tgz",
@@ -5365,17 +5370,6 @@
        "node": "^20.17.0 || >=22.9.0"
      }
    },
-    "node_modules/node-gyp-build": {
-      "version": "4.8.4",
-      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.4.tgz",
-      "integrity": "sha512-LA4ZjwlnUblHVgq0oBF3Jl/6h/Nvs5fzBLwdEF4nuxnFdsfajde4WfxtJr3CaiH+F6ewcIB/q4jQ4UzPyid+CQ==",
-      "license": "MIT",
-      "bin": {
-        "node-gyp-build": "bin.js",
-        "node-gyp-build-optional": "optional.js",
-        "node-gyp-build-test": "build-test.js"
-      }
-    },
    "node_modules/node-gyp/node_modules/chownr": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
--- a/desktop/package.json
+++ b/desktop/package.json
@@ -4,10 +4,8 @@
  "description": "",
  "main": "main.js",
  "scripts": {
-    "build": "tsc",
-    "start": "tsc && node server.js",
-    "electron": "tsc && electron .",
-    "dist": "npm run build && electron-builder"
+    "start": "tsc && electron .",
+    "dist": "tsc && electron-builder"
  },
  "keywords": [],
  "author": "",
@@ -16,10 +14,11 @@
  "dependencies": {
    "@fastify/static": "^8.3.0",
    "@ryuziii/discord-rpc": "^1.0.1-rc.1",
-    "bcrypt": "^6.0.0",
+    "bcryptjs": "^3.0.3",
    "bindings": "^1.5.0",
    "cheerio": "^1.1.2",
    "dotenv": "^17.2.3",
+    "electron-log": "^5.4.3",
    "fastify": "^5.6.2",
    "jsonwebtoken": "^9.0.3",
    "node-addon-api": "^8.5.0",
@@ -50,7 +49,11 @@
      "public/assets/*"
    ],
    "extraResources": [
-      "./.env"
+      {
+        "from": "C:\\Users\\synta\\AppData\\Local\\ms-playwright\\chromium_headless_shell-1200",
+        "to": "playwright/chromium"
+      },
+      ".env"
    ],
    "win": {
      "target": "portable",
--- a/desktop/server.js
+++ b/desktop/server.js
@@ -9,13 +9,14 @@ const { initDatabase } = require("./electron/shared/database");
 const { loadExtensions } = require("./electron/shared/extensions");
 const { init } = require("./electron/api/rpc/rpc.controller");
 const dotenv = require("dotenv");
-const envPath = process.resourcesPath
+
+const isPackaged = process.env.IS_PACKAGED === "true";
+
+const envPath = isPackaged
    ? path.join(process.resourcesPath, ".env")
    : path.join(__dirname, ".env");

-// Attempt to load it and log the result to be sure
-dotenv.config({ path: envPath });
-
+dotenv.config({ path: envPath, override: false });
 const viewsRoutes = require("./electron/views/views.routes");
 const animeRoutes = require("./electron/api/anime/anime.routes");
 const booksRoutes = require("./electron/api/books/books.routes");
--- a/desktop/src/api/user/user.service.ts
+++ b/desktop/src/api/user/user.service.ts
@@ -1,5 +1,5 @@
 import {queryAll, queryOne, run} from '../../shared/database';
-import bcrypt from 'bcrypt';
+import bcrypt from 'bcryptjs';

 const USER_DB_NAME = 'userdata';
 const SALT_ROUNDS = 10;
--- a/desktop/src/scripts/updateNotifier.js
+++ b/desktop/src/scripts/updateNotifier.js
@@ -1,6 +1,6 @@
 const Gitea_OWNER = "ItsSkaiya";
 const Gitea_REPO = "WaifuBoard";
-const CURRENT_VERSION = "v2.0.0-rc.0";
+const CURRENT_VERSION = "v2.0.0-rc.1";
 const UPDATE_CHECK_INTERVAL = 5 * 60 * 1000;

 let currentVersionDisplay;
--- a/desktop/src/shared/headless.js
+++ b/desktop/src/shared/headless.js
@@ -1,14 +1,44 @@
-const { chromium } = require("playwright-chromium");
+const path = require("path");
+const fs = require("fs");
+const { chromium } = require("playwright-core");
+
 let browser;
 let context;
 const BLOCK_LIST = [
    "google-analytics", "doubleclick", "facebook", "twitter",
    "adsystem", "analytics", "tracker", "pixel", "quantserve", "newrelic"
 ];
+
+function isPackaged() {
+    return process.env.IS_PACKAGED === "true";
+}
+
+function getChromiumPath() {
+    if (isPackaged()) {
+        return path.join(
+            process.resourcesPath,
+            "playwright",
+            "chromium",
+            "chrome-headless-shell-win64",
+            "chrome-headless-shell.exe"
+        );
+    }
+
+    return chromium.executablePath();
+}
+
 async function initHeadless() {
    if (browser) return;
+
+    const exePath = getChromiumPath();
+
+    if (!fs.existsSync(exePath)) {
+        throw new Error("Chromium not found: " + exePath);
+    }
+
    browser = await chromium.launch({
        headless: true,
+        executablePath: exePath,
        args: [
            "--no-sandbox",
            "--disable-setuid-sandbox",
--- a/docker/views/anime/anime.html
+++ b/docker/views/anime/anime.html
@@ -1,22 +1,33 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
    <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link
+            rel="icon"
+            href="/public/assets/waifuboards.ico"
+            type="image/x-icon"
+        />
        <title>WaifuBoard</title>
-    <link rel="stylesheet" href="/views/css/globals.css">
-    <link rel="stylesheet" href="/views/css/components/anilist-modal.css">
-    <link rel="stylesheet" href="/views/css/components/hero.css">
-    <link rel="stylesheet" href="/views/css/anime/anime.css">
-    <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
+        <link rel="stylesheet" href="/views/css/globals.css" />
+        <link rel="stylesheet" href="/views/css/components/anilist-modal.css" />
+        <link rel="stylesheet" href="/views/css/components/hero.css" />
+        <link rel="stylesheet" href="/views/css/anime/anime.css" />
+        <link
+            rel="stylesheet"
+            href="/views/css/components/updateNotifier.css"
+        />
        <script src="/src/scripts/titlebar.js"></script>
-    <link rel="stylesheet" href="/views/css/components/titlebar.css">
+        <link rel="stylesheet" href="/views/css/components/titlebar.css" />
    </head>
    <body>
        <div id="titlebar">
            <div class="title-left">
-        <img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
+                <img
+                    class="app-icon"
+                    src="/public/assets/waifuboards.ico"
+                    alt=""
+                />
                <span class="app-title">WaifuBoard</span>
            </div>
            <div class="title-right">
@@ -36,12 +47,13 @@

        <div class="modal-overlay" id="add-list-modal">
            <div class="modal-content modal-list">
-        <button class="modal-close" onclick="closeAddToListModal()">✕</button>
+                <button class="modal-close" onclick="closeAddToListModal()">
+                    ✕
+                </button>
                <h2 class="modal-title" id="modal-title">Add to List</h2>

                <div class="modal-body">
                    <div class="modal-fields-grid">
-
                        <div class="form-group">
                            <label>Status</label>
                            <select id="entry-status" class="form-input">
@@ -56,55 +68,118 @@

                        <div class="form-group">
                            <label>Episodes Watched</label>
-                    <input type="number" id="entry-progress" class="form-input" min="0" placeholder="0">
+                            <input
+                                type="number"
+                                id="entry-progress"
+                                class="form-input"
+                                min="0"
+                                placeholder="0"
+                            />
                        </div>

                        <div class="form-group">
                            <label>Your Score (0-10)</label>
-                    <input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
+                            <input
+                                type="number"
+                                id="entry-score"
+                                class="form-input"
+                                min="0"
+                                max="10"
+                                step="0.1"
+                                placeholder="Optional"
+                            />
                        </div>

                        <div class="form-group full-width">
                            <div class="date-group">
                                <div class="date-input-pair">
-                            <label for="entry-start-date">Start Date</label>
-                            <input type="date" id="entry-start-date" class="form-input">
+                                    <label for="entry-start-date"
+                                        >Start Date</label
+                                    >
+                                    <input
+                                        type="date"
+                                        id="entry-start-date"
+                                        class="form-input"
+                                    />
                                </div>
                                <div class="date-input-pair">
                                    <label for="entry-end-date">End Date</label>
-                            <input type="date" id="entry-end-date" class="form-input">
+                                    <input
+                                        type="date"
+                                        id="entry-end-date"
+                                        class="form-input"
+                                    />
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
-                    <label for="entry-repeat-count">Rewatch Count</label>
-                    <input type="number" id="entry-repeat-count" class="form-input" min="0">
+                            <label for="entry-repeat-count"
+                                >Rewatch Count</label
+                            >
+                            <input
+                                type="number"
+                                id="entry-repeat-count"
+                                class="form-input"
+                                min="0"
+                            />
                        </div>

                        <div class="form-group notes-group">
                            <label for="entry-notes">Notes</label>
-                    <textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
+                            <textarea
+                                id="entry-notes"
+                                class="form-input notes-textarea"
+                                rows="4"
+                                placeholder="Personal notes..."
+                            ></textarea>
                        </div>

                        <div class="form-group checkbox-group">
-                    <input type="checkbox" id="entry-is-private" class="form-checkbox">
-                    <label for="entry-is-private">Mark as Private</label>
+                            <input
+                                type="checkbox"
+                                id="entry-is-private"
+                                class="form-checkbox"
+                            />
+                            <label for="entry-is-private"
+                                >Mark as Private</label
+                            >
                        </div>
-
                    </div>
                </div>

                <div class="modal-actions">
-            <button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button>
-            <button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
-            <button class="btn-primary" onclick="saveToList()">Save Changes</button>
+                    <button
+                        class="btn-danger"
+                        id="modal-delete-btn"
+                        onclick="deleteFromList()"
+                    >
+                        Remove
+                    </button>
+                    <button
+                        class="btn-secondary"
+                        onclick="closeAddToListModal()"
+                    >
+                        Cancel
+                    </button>
+                    <button class="btn-primary" onclick="saveToList()">
+                        Save Changes
+                    </button>
                </div>
            </div>
        </div>

        <a href="/anime" class="back-btn">
-    <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
+            <svg
+                width="20"
+                height="20"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2.5"
+                viewBox="0 0 24 24"
+            >
+                <path d="M15 19l-7-7 7-7" />
+            </svg>
            Back to Home
        </a>

@@ -118,7 +193,7 @@
        <div class="content-container">
            <aside class="sidebar">
                <div class="poster-card">
-            <img id="poster" src="" alt="">
+                    <img id="poster" src="" alt="" />
                </div>

                <div class="info-grid">
@@ -157,7 +232,11 @@
                    <h1 class="anime-title" id="title">Loading...</h1>

                    <div class="meta-row">
-                <div class="pill extension-pill" id="extension-pill" style="display: none; background: #8b5cf6;"></div>
+                        <div
+                            class="pill extension-pill"
+                            id="extension-pill"
+                            style="display: none; background: #8b5cf6"
+                        ></div>
                        <div class="pill score" id="score">--% Score</div>
                        <div class="pill" id="year">----</div>
                        <div class="pill" id="genres">Action</div>
@@ -165,37 +244,95 @@

                    <div class="action-row">
                        <button class="btn-watch" id="watch-btn">
-                    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+                            <svg
+                                width="24"
+                                height="24"
+                                fill="currentColor"
+                                viewBox="0 0 24 24"
+                            >
+                                <path d="M8 5v14l11-7z" />
+                            </svg>
                            Start Watching
                        </button>
-                <button class="btn-secondary" id="add-to-list-btn" onclick="openAddToListModal()">+ Add to List</button>
+                        <button
+                            class="btn-secondary"
+                            id="add-to-list-btn"
+                            onclick="openAddToListModal()"
+                        >
+                            + Add to List
+                        </button>
                    </div>
                </div>

                <div class="description-box">
                    <div id="description-preview"></div>
-            <button id="read-more-btn" class="read-more-btn" style="display: none;" onclick="openModal()">
+                    <button
+                        id="read-more-btn"
+                        class="read-more-btn"
+                        style="display: none"
+                        onclick="openModal()"
+                    >
                        Read More
-                <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M19 9l-7 7-7-7"/></svg>
+                        <svg
+                            width="16"
+                            height="16"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            viewBox="0 0 24 24"
+                        >
+                            <path d="M19 9l-7 7-7-7" />
+                        </svg>
                    </button>
                </div>

                <div class="episodes-section">
                    <div class="episodes-header-row">
-                <div class="section-title" style="margin:0; border:none; padding:0;">
-                    <h2 style="font-size: 1.8rem; border-left: 4px solid #8b5cf6; padding-left: 1rem;">Episodes</h2>
+                        <div
+                            class="section-title"
+                            style="margin: 0; border: none; padding: 0"
+                        >
+                            <h2
+                                style="
+                                    font-size: 1.8rem;
+                                    border-left: 4px solid #8b5cf6;
+                                    padding-left: 1rem;
+                                "
+                            >
+                                Episodes
+                            </h2>
                        </div>
                        <div class="episode-search-wrapper">
-                    <input type="number" id="ep-search" class="episode-search-input" placeholder="Jump to Ep #" min="1">
+                            <input
+                                type="number"
+                                id="ep-search"
+                                class="episode-search-input"
+                                placeholder="Jump to Ep #"
+                                min="1"
+                            />
                        </div>
                    </div>

                    <div class="episodes-grid" id="episodes-grid"></div>

                    <div class="pagination-controls" id="pagination-controls">
-                <button class="page-btn" id="prev-page" onclick="changePage(-1)">Previous</button>
-                <span class="page-info" id="page-info">Page 1 of 1</span>
-                <button class="page-btn" id="next-page" onclick="changePage(1)">Next</button>
+                        <button
+                            class="page-btn"
+                            id="prev-page"
+                            onclick="changePage(-1)"
+                        >
+                            Previous
+                        </button>
+                        <span class="page-info" id="page-info"
+                            >Page 1 of 1</span
+                        >
+                        <button
+                            class="page-btn"
+                            id="next-page"
+                            onclick="changePage(1)"
+                        >
+                            Next
+                        </button>
                    </div>
                </div>
            </main>
@@ -203,7 +340,11 @@

        <div id="updateToast" class="hidden">
            <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
-    <a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">
+            <a
+                id="downloadButton"
+                href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
+                target="_blank"
+            >
                Click To Download
            </a>
        </div>
--- a/docker/views/css/anime/anime.css
+++ b/docker/views/css/anime/anime.css
@@ -53,16 +53,36 @@
    gap: 1.25rem;
 }

-.info-item h4 { margin: 0 0 0.25rem 0; font-size: 0.85rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
-.info-item span { font-weight: 600; font-size: 1rem; color: var(--text-primary); }
+.info-item h4 {
+    margin: 0 0 0.25rem 0;
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+.info-item span {
+    font-weight: 600;
+    font-size: 1rem;
+    color: var(--text-primary);
+}

 .character-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
 }
-.character-item { display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem; }
-.char-dot { width: 6px; height: 6px; background: var(--color-primary); border-radius: 50%; }
+.character-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    font-size: 0.95rem;
+}
+.char-dot {
+    width: 6px;
+    height: 6px;
+    background: var(--color-primary);
+    border-radius: 50%;
+}

 .main-content {
    display: flex;
@@ -99,7 +119,11 @@
    font-weight: 600;
    font-size: 0.95rem;
 }
-.pill.score { background: rgba(34, 197, 94, 0.2); color: #4ade80; border-color: rgba(34, 197, 94, 0.2); }
+.pill.score {
+    background: rgba(34, 197, 94, 0.2);
+    color: #4ade80;
+    border-color: rgba(34, 197, 94, 0.2);
+}

 .action-row {
    display: flex;
@@ -119,7 +143,9 @@
    display: flex;
    align-items: center;
    gap: 0.75rem;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition:
+        transform 0.2s,
+        box-shadow 0.2s;
 }

 .btn-watch:hover {
@@ -162,8 +188,21 @@
 .episodes-section {
    margin-top: 4rem;
 }
-.section-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.8rem; }
-.section-title::before { content: ''; width: 4px; height: 28px; background: var(--color-primary); border-radius: 2px; }
+.section-title {
+    font-size: 1.8rem;
+    font-weight: 800;
+    margin-bottom: 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+}
+.section-title::before {
+    content: "";
+    width: 4px;
+    height: 28px;
+    background: var(--color-primary);
+    border-radius: 2px;
+}

 .episodes-grid {
    display: grid;
@@ -191,8 +230,14 @@
 }

@keyframes slideUp {
-    from { opacity: 0; transform: translateY(60px); }
-    to { opacity: 1; transform: translateY(0); }
+    from {
+        opacity: 0;
+        transform: translateY(60px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }

@media (max-width: 1024px) {
@@ -201,11 +246,24 @@
        margin-top: -100px;
        padding: 0 1.5rem 4rem 1.5rem;
    }
-    .poster-card { width: 220px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
-    .main-content { text-align: center; align-items: center; }
-    .anime-title { font-size: 2.5rem; }
-    .meta-row { justify-content: center; }
-    .sidebar { display: none;  }
+    .poster-card {
+        width: 220px;
+        margin: 0 auto;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+    }
+    .main-content {
+        text-align: center;
+        align-items: center;
+    }
+    .anime-title {
+        font-size: 2.5rem;
+    }
+    .meta-row {
+        justify-content: center;
+    }
+    .sidebar {
+        display: none;
+    }
 }

 .read-more-btn {
@@ -221,7 +279,9 @@
    align-items: center;
    gap: 0.25rem;
 }
-.read-more-btn:hover { text-decoration: underline; }
+.read-more-btn:hover {
+    text-decoration: underline;
+}

 .episodes-header-row {
    display: flex;
@@ -261,7 +321,10 @@
 }

 .episode-search-input::-webkit-outer-spin-button,
-.episode-search-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+.episode-search-input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}

 .pagination-controls {
    display: flex;
@@ -295,3 +358,118 @@
    font-size: 0.9rem;
    font-weight: 500;
 }
+
+@media (max-width: 768px) {
+    .content-container,
+    .section,
+    .container {
+        width: 100%;
+        max-width: 100vw;
+        overflow-x: hidden;
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+
+    .content-container {
+        display: flex;
+        flex-direction: column;
+        margin-top: -50px;
+        padding: 1rem 1.25rem 4rem 1.25rem;
+        gap: 2rem;
+    }
+
+    .sidebar {
+        display: flex !important;
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
+        order: 1;
+    }
+
+    .poster-card {
+        width: 180px;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+        margin-bottom: 1rem;
+    }
+
+    .info-grid {
+        width: 100%;
+        padding: 1rem;
+    }
+
+    .main-content {
+        order: 2;
+        text-align: center;
+        align-items: center;
+    }
+
+    .anime-title {
+        font-size: 2.2rem;
+        line-height: 1.1;
+        margin-bottom: 1rem;
+    }
+
+    .meta-row {
+        justify-content: center;
+        gap: 0.5rem;
+    }
+
+    .pill {
+        padding: 0.4rem 0.8rem;
+        font-size: 0.8rem;
+    }
+
+    .action-row {
+        flex-direction: column;
+        width: 100%;
+        gap: 0.8rem;
+    }
+
+    .btn-watch,
+    .btn-secondary {
+        width: 100%;
+        justify-content: center;
+        padding: 1rem;
+    }
+
+    .description-box {
+        margin-top: 2rem;
+        padding: 1.25rem;
+        font-size: 1rem;
+        text-align: left;
+    }
+
+    .episodes-section {
+        margin-top: 3rem;
+        order: 3;
+    }
+
+    .episodes-header-row {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 1rem;
+    }
+
+    .episode-search-wrapper {
+        width: 100%;
+    }
+
+    .episode-search-input {
+        width: 100%;
+        text-align: left;
+    }
+
+    .episodes-grid {
+        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
+        gap: 0.75rem;
+    }
+
+    .episode-btn {
+        padding: 0.8rem 0.5rem;
+        font-size: 0.9rem;
+    }
+
+    .pagination-controls {
+        flex-wrap: wrap;
+    }
+}
--- a/docker/views/css/anime/watch.css
+++ b/docker/views/css/anime/watch.css
@@ -4,7 +4,11 @@
    left: 0;
    right: 0;
    padding: var(--spacing-lg) var(--spacing-xl);
-    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
+    background: linear-gradient(
+        180deg,
+        rgba(0, 0, 0, 0.8) 0%,
+        transparent 100%
+    );
    z-index: 1000;
    pointer-events: none;
 }
@@ -64,7 +68,11 @@
    box-shadow: var(--shadow-sm);
 }

-.control-group { display: flex; align-items: center; gap: var(--spacing-md); }
+.control-group {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+}

 .sd-toggle {
    display: flex;
@@ -87,11 +95,15 @@
    letter-spacing: 0.05em;
 }

-.sd-option.active { color: var(--color-text-primary); }
+.sd-option.active {
+    color: var(--color-text-primary);
+}

 .sd-bg {
    position: absolute;
-    top: 4px; left: 4px; bottom: 4px;
+    top: 4px;
+    left: 4px;
+    bottom: 4px;
    width: calc(50% - 4px);
    background: var(--color-primary);
    border-radius: var(--radius-full);
@@ -100,7 +112,9 @@
    z-index: 1;
 }

-.sd-toggle[data-state="dub"] .sd-bg { transform: translateX(100%); }
+.sd-toggle[data-state="dub"] .sd-bg {
+    transform: translateX(100%);
+}

 .source-select {
    appearance: none;
@@ -119,8 +133,15 @@
    transition: all var(--transition-base);
 }

-.source-select:hover { border-color: var(--color-primary); background-color: var(--color-bg-card); }
-.source-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-glow); }
+.source-select:hover {
+    border-color: var(--color-primary);
+    background-color: var(--color-bg-card);
+}
+.source-select:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px var(--color-primary-glow);
+}

 .video-container {
    aspect-ratio: 16/9;
@@ -128,14 +149,25 @@
    background: var(--color-bg-base);
    border-radius: var(--radius-xl);
    overflow: hidden;
-    box-shadow: var(--shadow-lg), 0 0 0 1px var(--glass-border);
+    box-shadow:
+        var(--shadow-lg),
+        0 0 0 1px var(--glass-border);
    position: relative;
    transition: box-shadow var(--transition-smooth);
 }

-.video-container:hover { box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-primary), var(--shadow-glow); }
+.video-container:hover {
+    box-shadow:
+        var(--shadow-lg),
+        0 0 0 1px var(--color-primary),
+        var(--shadow-glow);
+}

-#player { width: 100%; height: 100%; object-fit: contain; }
+#player {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}

 .loading-overlay {
    position: absolute;
@@ -150,16 +182,25 @@
 }

 .spinner {
-    width: 48px; height: 48px;
+    width: 48px;
+    height: 48px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
 }

-@keyframes spin { to { transform: rotate(360deg); } }
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}

-.loading-overlay p { color: var(--color-text-secondary); font-size: 0.95rem; font-weight: 500; }
+.loading-overlay p {
+    color: var(--color-text-secondary);
+    font-size: 0.95rem;
+    font-weight: 500;
+}

 .episode-controls {
    display: flex;
@@ -174,21 +215,49 @@
    box-shadow: var(--shadow-sm);
 }

-.episode-info h1 { font-size: 1.75rem; font-weight: 800; margin: 0 0 var(--spacing-xs); }
-.episode-info p { color: var(--color-primary); font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; }
-
-.navigation-buttons { display: flex; gap: var(--spacing-md); }
-
-.nav-btn {
-    display: flex; align-items: center; gap: var(--spacing-sm);
-    background: var(--color-bg-elevated); border: var(--border-subtle);
-    color: var(--color-text-primary); padding: 0.75rem 1.5rem;
-    border-radius: var(--radius-full); font-weight: 600; font-size: 0.9rem;
-    cursor: pointer; transition: all var(--transition-base);
+.episode-info h1 {
+    font-size: 1.75rem;
+    font-weight: 800;
+    margin: 0 0 var(--spacing-xs);
+}
+.episode-info p {
+    color: var(--color-primary);
+    font-weight: 600;
+    font-size: 1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
 }

-.nav-btn:hover:not(:disabled) { background: var(--color-primary); border-color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-glow); }
-.nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
+.navigation-buttons {
+    display: flex;
+    gap: var(--spacing-md);
+}
+
+.nav-btn {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    background: var(--color-bg-elevated);
+    border: var(--border-subtle);
+    color: var(--color-text-primary);
+    padding: 0.75rem 1.5rem;
+    border-radius: var(--radius-full);
+    font-weight: 600;
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: all var(--transition-base);
+}
+
+.nav-btn:hover:not(:disabled) {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-glow);
+}
+.nav-btn:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+}

 .episode-carousel-compact {
    width: 100%;
@@ -258,10 +327,18 @@
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
-    mask-image: linear-gradient(to right, transparent, black var(--spacing-md), black calc(100% - var(--spacing-md)), transparent);
+    mask-image: linear-gradient(
+        to right,
+        transparent,
+        black var(--spacing-md),
+        black calc(100% - var(--spacing-md)),
+        transparent
+    );
 }

-.episode-carousel-compact-list::-webkit-scrollbar { display: none; }
+.episode-carousel-compact-list::-webkit-scrollbar {
+    display: none;
+}

 .carousel-item {
    flex: 0 0 200px;
@@ -290,12 +367,14 @@
 .carousel-item.active-ep-carousel {
    border-color: var(--color-primary);
    background: rgba(139, 92, 246, 0.15);
-    box-shadow: 0 0 0 2px var(--color-primary), var(--shadow-md);
+    box-shadow:
+        0 0 0 2px var(--color-primary),
+        var(--shadow-md);
    transform: scale(1.02);
 }

 .carousel-item.active-ep-carousel::after {
-    content: 'WATCHING';
+    content: "WATCHING";
    position: absolute;
    top: 0;
    right: 0;
@@ -391,7 +470,8 @@
    color: var(--color-primary);
 }

-.anime-details, .anime-extra-content {
+.anime-details,
+.anime-extra-content {
    max-width: 1600px;
    margin: var(--spacing-2xl) auto;
 }
@@ -425,9 +505,17 @@
    text-align: left;
 }

-.cover-image { width: 220px; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
+.cover-image {
+    width: 220px;
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-lg);
+}

-.details-content h1 { font-size: 1.5rem; font-weight: 800; margin-bottom: var(--spacing-md); }
+.details-content h1 {
+    font-size: 1.5rem;
+    font-weight: 800;
+    margin-bottom: var(--spacing-md);
+}

 .meta-badge {
    background: rgba(139, 92, 246, 0.12);
@@ -439,8 +527,15 @@
    border: 1px solid rgba(139, 92, 246, 0.2);
 }

-.meta-badge.meta-score { background: var(--color-primary); color: white; }
-.details-description { font-size: 1rem; line-height: 1.7; color: var(--color-text-secondary); }
+.meta-badge.meta-score {
+    background: var(--color-primary);
+    color: white;
+}
+.details-description {
+    font-size: 1rem;
+    line-height: 1.7;
+    color: var(--color-text-secondary);
+}

 .characters-header {
    display: flex;
@@ -471,9 +566,15 @@
    border-radius: var(--radius-sm);
 }

-.expand-btn:hover { background: rgba(139, 92, 246, 0.1); }
-.expand-btn svg { transition: transform var(--transition-smooth); }
-.expand-btn[data-expanded="true"] svg { transform: rotate(180deg); }
+.expand-btn:hover {
+    background: rgba(139, 92, 246, 0.1);
+}
+.expand-btn svg {
+    transition: transform var(--transition-smooth);
+}
+.expand-btn[data-expanded="true"] svg {
+    transform: rotate(180deg);
+}

 .characters-carousel {
    display: flex;
@@ -495,7 +596,6 @@
 }

 .characters-carousel.expanded {
-
    height: auto;
    max-height: 3200px;
    overflow-y: auto;
@@ -519,15 +619,38 @@
    background: transparent;
 }

-.plyr--video { border-radius: var(--radius-xl); }
-.plyr__controls { background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, transparent 100%) !important; padding: 1rem 1.5rem 1.5rem !important; }
-.plyr--full-ui input[type=range] { color: var(--color-primary); }
-.plyr__control:hover { background: rgba(255,255,255,0.12) !important; }
-.plyr__menu__container { background: var(--glass-bg) !important; backdrop-filter: blur(16px); border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg) !important; }
+.plyr--video {
+    border-radius: var(--radius-xl);
+}
+.plyr__controls {
+    background: linear-gradient(
+        to top,
+        rgba(0, 0, 0, 0.9) 0%,
+        rgba(0, 0, 0, 0.5) 50%,
+        transparent 100%
+    ) !important;
+    padding: 1rem 1.5rem 1.5rem !important;
+}
+.plyr--full-ui input[type="range"] {
+    color: var(--color-primary);
+}
+.plyr__control:hover {
+    background: rgba(255, 255, 255, 0.12) !important;
+}
+.plyr__menu__container {
+    background: var(--glass-bg) !important;
+    backdrop-filter: blur(16px);
+    border: 1px solid var(--glass-border);
+    box-shadow: var(--shadow-lg) !important;
+}

@media (min-width: 1024px) {
-    .carousel-nav { display: flex; }
-    .watch-container { padding-top: 5rem; }
+    .carousel-nav {
+        display: flex;
+    }
+    .watch-container {
+        padding-top: 5rem;
+    }

    .details-cover {
        align-items: center;
@@ -540,64 +663,101 @@
 }

@media (max-width: 768px) {
-    .watch-container { padding: 4.5rem 1rem; }
-
-    .episode-carousel-compact-list {
-        padding: var(--spacing-sm) var(--spacing-md);
-    }
-    .carousel-header {
-        padding: 0 var(--spacing-md);
-    }
-    .carousel-item {
-        flex: 0 0 180px;
-        height: 100px;
-    }
-    .carousel-item-img-container { height: 60px; }
-    .carousel-item-info p { font-size: 0.95rem; }
-    .carousel-item.no-thumbnail {
-        flex: 0 0 140px;
-        height: 80px;
+    .watch-container {
+        padding: 5rem 1rem 2rem 1rem;
+        margin: 0;
+        width: 100%;
+        overflow-x: hidden;
    }

-    .details-container { flex-direction: column; text-align: center; }
+    .player-toolbar {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 1rem;
+        padding: 1rem;
+    }

-    .details-cover {
-        align-items: center;
+    .control-group {
+        justify-content: space-between;
        width: 100%;
    }
-    .details-cover h1 {
-        font-size: 2rem;
-        text-align: center;
-    }
-    .cover-image { width: 180px; margin: 0 auto; }

-    .episode-controls { flex-direction: column; gap: var(--spacing-md); }
-    .navigation-buttons { width: 100%; justify-content: center; }
-    .nav-btn { flex: 1; justify-content: center; }
+    .source-select {
+        width: 100%;
+        background-position: right 1.5rem center;
+    }
+
+    .episode-controls {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1.5rem;
+    }
+
+    .episode-info {
+        width: 100%;
+        text-align: left;
+    }
+
+    .episode-info h1 {
+        font-size: 1.4rem;
+        line-height: 1.3;
+    }
+
+    .navigation-buttons {
+        width: 100%;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 0.8rem;
+    }
+
+    .nav-btn {
+        justify-content: center;
+        padding: 0.8rem;
+        width: 100%;
+    }
+
+    .details-container {
+        flex-direction: column;
+        padding: 1.5rem;
+        gap: 2rem;
+    }
+
+    .details-cover {
+        flex-direction: row;
+        align-items: flex-start;
+        width: 100%;
+        gap: 1.5rem;
    }

    @media (max-width: 480px) {
-    .episode-info h1, .details-content h1 { font-size: 1.5rem; }
-
-    .carousel-item {
-        flex: 0 0 150px;
-        height: 90px;
-    }
-    .carousel-item-img-container { height: 50px; }
-    .carousel-item-info p { font-size: 0.9rem; }
-    .carousel-item.no-thumbnail {
-        flex: 0 0 120px;
-        height: 70px;
+        .details-cover {
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
        }

        .details-cover h1 {
-        font-size: 1.5rem;
+            text-align: center;
+        }
    }

-    .nav-btn span { display: none; }
+    .cover-image {
+        width: 140px;
+        flex-shrink: 0;
+        margin: 0 auto;
+    }
+
+    .details-content h1 {
+        font-size: 1.3rem;
+    }
+
+    .characters-carousel {
+        justify-content: center;
+        padding-bottom: 1rem;
+    }

    .character-card {
-
-        flex: 1 1 100%;
+        width: calc(50% - 0.75rem);
+        flex: 0 0 calc(50% - 0.75rem);
    }
 }
--- a/docker/views/css/books/book.css
+++ b/docker/views/css/books/book.css
@@ -1,28 +1,61 @@
 .back-btn {
    position: fixed;
-    top: 2rem; left: 2rem; z-index: 100;
-    display: flex; align-items: center; gap: 0.5rem;
+    top: 2rem;
+    left: 2rem;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
-    background: var(--color-glass-bg); backdrop-filter: blur(12px);
-    border: var(--border-subtle); border-radius: var(--radius-full);
-    color: white; text-decoration: none; font-weight: 600;
+    background: var(--color-glass-bg);
+    backdrop-filter: blur(12px);
+    border: var(--border-subtle);
+    border-radius: var(--radius-full);
+    color: white;
+    text-decoration: none;
+    font-weight: 600;
    transition: all 0.2s ease;
 }
-.back-btn:hover { background: rgba(255, 255, 255, 0.15); transform: translateX(-5px); }
+.back-btn:hover {
+    background: rgba(255, 255, 255, 0.15);
+    transform: translateX(-5px);
+}

 .hero-wrapper {
-    position: relative; width: 100%; height: 60vh; overflow: hidden;
+    position: relative;
+    width: 100%;
+    height: 60vh;
+    overflow: hidden;
+}
+.hero-background {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+}
+.hero-background img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    opacity: 0.4;
+    filter: blur(8px);
+    transform: scale(1.1);
 }
-.hero-background { position: absolute; inset: 0; z-index: 0; }
-.hero-background img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; filter: blur(8px); transform: scale(1.1); }
 .hero-overlay {
-    position: absolute; inset: 0; z-index: 1;
-    background: linear-gradient(to bottom, transparent 0%, var(--color-bg-base) 100%);
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    background: linear-gradient(
+        to bottom,
+        transparent 0%,
+        var(--color-bg-base) 100%
+    );
 }

 .content-container {
-    position: relative; z-index: 10;
-    max-width: 1600px; margin: -350px auto 0 auto;
+    position: relative;
+    z-index: 10;
+    max-width: 1600px;
+    margin: -350px auto 0 auto;
    padding: 0 3rem 4rem 3rem;
    display: grid;
    grid-template-columns: 260px 1fr;
@@ -31,7 +64,9 @@
    animation: slideUp 0.8s ease;
 }

-.hero-content { display: none; }
+.hero-content {
+    display: none;
+}

 .sidebar {
    display: flex;
@@ -44,43 +79,105 @@
 }

 .poster-card {
-    width: 100%; aspect-ratio: 2/3; border-radius: var(--radius-lg);
-    overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.8);
+    width: 100%;
+    aspect-ratio: 2/3;
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #1a1a1a;
 }
-.poster-card img { width: 100%; height: 100%; object-fit: cover; }
+.poster-card img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}

 .info-grid {
-    background: var(--color-bg-elevated); border: var(--border-subtle);
-    border-radius: var(--radius-md); padding: 1.25rem;
-    display: flex; flex-direction: column; gap: 1rem;
+    background: var(--color-bg-elevated);
+    border: var(--border-subtle);
+    border-radius: var(--radius-md);
+    padding: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+.info-item h4 {
+    margin: 0 0 0.25rem 0;
+    font-size: 0.8rem;
+    color: var(--color-text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+.info-item span {
+    font-weight: 600;
+    font-size: 0.95rem;
 }
-.info-item h4 { margin: 0 0 0.25rem 0; font-size: 0.8rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
-.info-item span { font-weight: 600; font-size: 0.95rem; }

 .main-content {
-    display: flex; flex-direction: column;
+    display: flex;
+    flex-direction: column;
    padding-top: 4rem;
    justify-content: flex-start;
 }

-.book-header { margin-bottom: 1.5rem; }
-.book-title { font-size: 3.5rem; font-weight: 900; line-height: 1.1; margin: 0 0 1rem 0; text-shadow: 0 4px 30px rgba(0,0,0,0.8); }
-
-.meta-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
-.pill { padding: 0.4rem 1rem; background: rgba(255,255,255,0.1); border-radius: 99px; font-size: 0.9rem; font-weight: 600; border: var(--border-subtle); backdrop-filter: blur(10px); }
-.pill.score { background: rgba(34, 197, 94, 0.2); color: #4ade80; border-color: rgba(34, 197, 94, 0.2); }
-
-#description { display: none; }
-#year { display: none; }
-
-.action-row { display: flex; gap: 1rem; }
-.btn-primary {
-    padding: 0.8rem 2rem; background: white; color: black; border: none; border-radius: 99px;
-    font-weight: 800; cursor: pointer; transition: transform 0.2s;
+.book-header {
+    margin-bottom: 1.5rem;
+}
+.book-title {
+    font-size: 3.5rem;
+    font-weight: 900;
+    line-height: 1.1;
+    margin: 0 0 1rem 0;
+    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
+}
+
+.meta-row {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+    flex-wrap: wrap;
+}
+.pill {
+    padding: 0.4rem 1rem;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 99px;
+    font-size: 0.9rem;
+    font-weight: 600;
+    border: var(--border-subtle);
+    backdrop-filter: blur(10px);
+}
+.pill.score {
+    background: rgba(34, 197, 94, 0.2);
+    color: #4ade80;
+    border-color: rgba(34, 197, 94, 0.2);
+}
+
+#description {
+    display: none;
+}
+#year {
+    display: none;
+}
+
+.action-row {
+    display: flex;
+    gap: 1rem;
+}
+.btn-primary {
+    padding: 0.8rem 2rem;
+    background: white;
+    color: black;
+    border: none;
+    border-radius: 99px;
+    font-weight: 800;
+    cursor: pointer;
+    transition: transform 0.2s;
+}
+.btn-primary:hover {
+    transform: scale(1.05);
 }
-.btn-primary:hover { transform: scale(1.05); }

 .btn-secondary {
    padding: 0.8rem 2rem;
@@ -108,28 +205,59 @@
    transition: 0.2s;
    backdrop-filter: blur(10px);
 }
-.btn-blur:hover { background: rgba(255,255,255,0.2); }
+.btn-blur:hover {
+    background: rgba(255, 255, 255, 0.2);
+}

-.chapters-section { margin-top: 1rem; }
-.section-title { display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.8rem; margin-bottom: 1.5rem; }
-.section-title h2 { font-size: 1.5rem; margin: 0; border-left: 4px solid var(--color-primary); padding-left: 1rem; }
+.chapters-section {
+    margin-top: 1rem;
+}
+.section-title {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    padding-bottom: 0.8rem;
+    margin-bottom: 1.5rem;
+}
+.section-title h2 {
+    font-size: 1.5rem;
+    margin: 0;
+    border-left: 4px solid var(--color-primary);
+    padding-left: 1rem;
+}

 .chapters-table-wrapper {
-    background: var(--color-bg-elevated); border-radius: var(--radius-md);
-    border: 1px solid rgba(255,255,255,0.05); overflow: hidden;
+    background: var(--color-bg-elevated);
+    border-radius: var(--radius-md);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    overflow: hidden;
+}
+.chapters-table {
+    width: 100%;
+    border-collapse: collapse;
+    text-align: left;
 }
-.chapters-table { width: 100%; border-collapse: collapse; text-align: left; }
 .chapters-table th {
-    padding: 0.8rem 1.2rem; background: rgba(255,255,255,0.03);
-    color: var(--color-text-secondary); font-weight: 600; font-size: 0.85rem;
-    text-transform: uppercase; letter-spacing: 0.5px;
+    padding: 0.8rem 1.2rem;
+    background: rgba(255, 255, 255, 0.03);
+    color: var(--color-text-secondary);
+    font-weight: 600;
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
 }
 .chapters-table td {
-    padding: 1rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,0.05);
-    color: var(--color-text-primary); font-size: 0.95rem;
+    padding: 1rem 1.2rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    color: var(--color-text-primary);
+    font-size: 0.95rem;
+}
+.chapters-table tr:last-child td {
+    border-bottom: none;
+}
+.chapters-table tr:hover {
+    background: var(--color-bg-elevated-hover);
 }
-.chapters-table tr:last-child td { border-bottom: none; }
-.chapters-table tr:hover { background: var(--color-bg-elevated-hover); }

 .filter-select {
    appearance: none;
@@ -159,36 +287,261 @@
 }

 .read-btn-small {
-    background: var(--color-primary); color: white; border: none;
-    padding: 0.4rem 0.9rem; border-radius: 6px; font-weight: 600; cursor: pointer;
-    font-size: 0.8rem; transition: 0.2s;
+    background: var(--color-primary);
+    color: white;
+    border: none;
+    padding: 0.4rem 0.9rem;
+    border-radius: 6px;
+    font-weight: 600;
+    cursor: pointer;
+    font-size: 0.8rem;
+    transition: 0.2s;
+}
+.read-btn-small:hover {
+    background: #7c3aed;
 }
-.read-btn-small:hover { background: #7c3aed; }

 .pagination-controls {
-    display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; align-items: center;
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    margin-top: 1.5rem;
+    align-items: center;
 }
 .page-btn {
-    background: var(--color-bg-elevated); border: 1px solid rgba(255,255,255,0.1);
-    color: white; padding: 0.5rem 1rem; border-radius: 8px; cursor: pointer; font-size: 0.9rem;
+    background: var(--color-bg-elevated);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: white;
+    padding: 0.5rem 1rem;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 0.9rem;
+}
+.page-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+.page-btn:hover:not(:disabled) {
+    border-color: var(--color-primary);
 }
-.page-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-.page-btn:hover:not(:disabled) { border-color: var(--color-primary); }

-@keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(40px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}

@media (max-width: 1024px) {
-    .hero-wrapper { height: 40vh; }
-    .content-container { grid-template-columns: 1fr; margin-top: -80px; padding: 0 1.5rem 4rem 1.5rem; }
-    .poster-card { display: none; }
-
-    .main-content { padding-top: 0; align-items: center; text-align: center; }
-    .book-title { font-size: 2.2rem; }
-    .meta-row { justify-content: center; }
-    .action-row { justify-content: center; width: 100%; }
-    .btn-primary, .btn-blur { flex: 1; justify-content: center; }
-
-    .sidebar { display: none; }
-    .chapters-table th:nth-child(3), .chapters-table td:nth-child(3) { display: none; }
-    .chapters-table th:nth-child(4), .chapters-table td:nth-child(4) { display: none; }
+    .hero-wrapper {
+        height: 40vh;
+    }
+    .content-container {
+        grid-template-columns: 1fr;
+        margin-top: -80px;
+        padding: 0 1.5rem 4rem 1.5rem;
+    }
+    .poster-card {
+        display: none;
+    }
+
+    .main-content {
+        padding-top: 0;
+        align-items: center;
+        text-align: center;
+    }
+    .book-title {
+        font-size: 2.2rem;
+    }
+    .meta-row {
+        justify-content: center;
+    }
+    .action-row {
+        justify-content: center;
+        width: 100%;
+    }
+    .btn-primary,
+    .btn-blur {
+        flex: 1;
+        justify-content: center;
+    }
+
+    .sidebar {
+        display: none;
+    }
+    .chapters-table th:nth-child(3),
+    .chapters-table td:nth-child(3) {
+        display: none;
+    }
+    .chapters-table th:nth-child(4),
+    .chapters-table td:nth-child(4) {
+        display: none;
+    }
+}
+
+@media (max-width: 768px) {
+    .hero-wrapper {
+        height: 35vh;
+    }
+
+    .content-container {
+        display: flex;
+        flex-direction: column;
+        margin-top: -60px;
+        padding: 0 1rem 3rem 1rem;
+        gap: 1.5rem;
+    }
+
+    .sidebar {
+        display: flex !important;
+        position: static;
+        width: 100%;
+        align-items: center;
+        order: 1;
+    }
+
+    .poster-card {
+        display: block !important;
+        width: 160px;
+        margin: 0 auto;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
+        border: 2px solid rgba(255, 255, 255, 0.15);
+    }
+
+    .info-grid {
+        display: none;
+    }
+
+    .main-content {
+        order: 2;
+        padding-top: 0;
+        text-align: center;
+        align-items: center;
+    }
+
+    .book-title {
+        font-size: 2rem;
+        line-height: 1.2;
+        margin-bottom: 0.8rem;
+    }
+
+    .meta-row {
+        justify-content: center;
+        gap: 0.5rem;
+    }
+
+    .pill {
+        padding: 0.3rem 0.8rem;
+        font-size: 0.8rem;
+    }
+
+    .action-row {
+        flex-direction: column;
+        width: 100%;
+        gap: 0.8rem;
+    }
+
+    .btn-primary,
+    .btn-secondary,
+    .btn-blur {
+        width: 100%;
+        justify-content: center;
+        padding: 0.9rem;
+    }
+
+    .chapters-table-wrapper {
+        background: transparent;
+        border: none;
+    }
+
+    .chapters-table thead {
+        display: none;
+    }
+
+    .chapters-table tbody,
+    .chapters-table tr,
+    .chapters-table td {
+        display: block;
+        width: 100%;
+    }
+
+    .chapters-table tr {
+        background: var(--color-bg-elevated);
+        border: 1px solid rgba(255, 255, 255, 0.05);
+        border-radius: 12px;
+        margin-bottom: 0.8rem;
+        padding: 1rem;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .chapters-table td {
+        padding: 0;
+        border: none;
+        text-align: left;
+    }
+
+    .chapters-table td:nth-child(1) {
+        font-size: 1rem;
+        font-weight: 700;
+        color: white;
+    }
+
+    .chapters-table td:nth-child(2) {
+        font-size: 0.8rem;
+        color: var(--color-text-secondary);
+        order: 3;
+    }
+
+    .chapters-table td:last-child {
+        margin-top: 0.5rem;
+        order: 4;
+    }
+
+    .chapters-table td:last-child,
+    .chapters-table td:nth-child(4) {
+        display: block !important;
+        width: 100%;
+        margin-top: 1rem;
+        padding-top: 0.75rem;
+        border-top: 1px solid rgba(255, 255, 255, 0.05);
+    }
+
+    .read-btn-small {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        padding: 0.8rem;
+        font-size: 0.95rem;
+        background: var(--color-primary);
+        border: none;
+        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
+    }
+
+    .chapters-table td:nth-child(3) {
+        display: block !important;
+        font-size: 0.8rem;
+        color: var(--color-text-secondary);
+        margin-bottom: 0.25rem;
+    }
+
+    .chapters-table td:nth-child(3)::before {
+        content: "Provider: ";
+        font-weight: 700;
+        color: #555;
+    }
+
+    .read-btn-small {
+        width: 100%;
+        padding: 0.7rem;
+        background: rgba(255, 255, 255, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+    }
 }
--- a/docker/views/css/books/reader.css
+++ b/docker/views/css/books/reader.css
@@ -4,11 +4,15 @@
    --bg-hover: #252530;
 }

-.hidden { display: none !important; }
+.hidden {
+    display: none !important;
+}

 .top-bar {
    position: fixed;
-    top: 0; left: 0; right: 0;
+    top: 0;
+    left: 0;
+    right: 0;
    height: 64px;
    background: rgba(10, 10, 15, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
@@ -107,7 +111,9 @@
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    transition:
+        transform 0.2s ease,
+        box-shadow 0.2s ease;
    cursor: pointer;
    display: block;
 }
@@ -160,7 +166,9 @@
    box-shadow: var(--shadow-lg);
    object-fit: contain;
    cursor: pointer;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    transition:
+        transform 0.2s ease,
+        box-shadow 0.2s ease;
 }

 .double-container img:hover {
@@ -174,7 +182,7 @@
    padding: 3rem 2.5rem;
    line-height: var(--ln-line-height, 1.8);
    font-size: var(--ln-font-size, 18px);
-    font-family: var(--ln-font-family, 'Georgia', serif);
+    font-family: var(--ln-font-family, "Georgia", serif);
    color: var(--ln-text-color, #e5e7eb);
    text-align: var(--ln-text-align, left);
 }
@@ -183,7 +191,9 @@
    margin-bottom: 1.5em;
 }

-.ln-content h1, .ln-content h2, .ln-content h3 {
+.ln-content h1,
+.ln-content h2,
+.ln-content h3 {
    margin-top: 2em;
    margin-bottom: 1em;
    font-weight: 700;
@@ -297,7 +307,7 @@
 .control label span {
    color: var(--color-text-primary);
    font-weight: 600;
-    font-family: 'JetBrains Mono', monospace;
+    font-family: "JetBrains Mono", monospace;
    font-size: 0.8125rem;
 }

@@ -338,7 +348,9 @@ input[type="range"]::-moz-range-thumb {
    transition: all 0.2s;
 }

-select, input[type="color"], input[type="number"] {
+select,
+input[type="color"],
+input[type="number"] {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius-md);
@@ -350,11 +362,15 @@ select, input[type="color"], input[type="number"] {
    border: 1px solid var(--border-subtle);
 }

-select:hover, input[type="color"]:hover, input[type="number"]:hover {
+select:hover,
+input[type="color"]:hover,
+input[type="number"]:hover {
    border-color: var(--color-primary);
 }

-select:focus, input[type="color"]:focus, input[type="number"]:focus {
+select:focus,
+input[type="color"]:focus,
+input[type="number"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow);
@@ -454,7 +470,9 @@ input[type="color"] {
 }

@keyframes spin {
-    to { transform: rotate(360deg); }
+    to {
+        transform: rotate(360deg);
+    }
 }

 .loading-container {
@@ -545,3 +563,53 @@ input[type="color"] {
    margin: 0 auto;
    display: block;
 }
+
+@media (max-width: 768px) {
+    #reader {
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+
+        padding-top: 64px;
+    }
+
+    .manga-container {
+        width: 100% !important;
+        max-width: 100% !important;
+        gap: 0 !important;
+    }
+
+    .page-img {
+        width: 100% !important;
+        max-width: 100% !important;
+        height: auto !important;
+        border-radius: 0 !important;
+        box-shadow: none !important;
+    }
+
+    .page-img.longstrip-fit {
+        width: 100% !important;
+        max-width: 100% !important;
+        margin: 0 !important;
+    }
+
+    .double-container {
+        flex-direction: column !important;
+        gap: 0 !important;
+        width: 100% !important;
+    }
+
+    .double-container img {
+        width: 100% !important;
+        max-width: 100% !important;
+        border-radius: 0 !important;
+    }
+
+    .fit-height,
+    .fit-screen {
+        width: 100% !important;
+        height: auto !important;
+        max-height: none !important;
+        max-width: 100% !important;
+        object-fit: contain !important;
+    }
+}
--- a/docker/views/css/components/anilist-modal.css
+++ b/docker/views/css/components/anilist-modal.css
@@ -171,7 +171,7 @@
 }

 .form-checkbox:checked::after {
-    content: '✓';
+    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
@@ -194,14 +194,18 @@
    z-index: 10;
 }

-.btn-primary, .btn-secondary, .btn-danger {
+.btn-primary,
+.btn-secondary,
+.btn-danger {
    padding: 0.8rem 1.5rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
-    transition: transform 0.2s, background 0.2s;
+    transition:
+        transform 0.2s,
+        background 0.2s;
    flex: none;
 }

@@ -243,26 +247,89 @@
    opacity: 1;
 }

-@media (max-width: 900px) {
+@media (max-width: 600px) {
    .modal-content {
-        max-width: 95%;
-    }
-    .modal-fields-grid {
-        grid-template-columns: repeat(2, 1fr);
-    }
-    .form-group.notes-group {
-        grid-column: 1 / -1;
-    }
-    .form-group.checkbox-group {
-        grid-column: 1 / -1;
-        align-self: auto;
-    }
-    .modal-actions {
-        padding: 1rem 1.5rem;
-    }
-    .modal-title, .modal-body {
-        padding-left: 1.5rem;
-        padding-right: 1.5rem;
-    }
+        width: 100%;
+        height: 100%;
+        max-height: 100vh;
+        border-radius: 0;
+        display: flex;
+        flex-direction: column;
    }

+    .modal-title {
+        font-size: 1.4rem;
+        padding: 1rem;
+
+        padding-right: 3rem;
+    }
+
+    .modal-close {
+        top: 0.8rem;
+        right: 0.8rem;
+        width: 40px;
+        height: 40px;
+        background: rgba(255, 255, 255, 0.08);
+    }
+
+    .modal-body {
+        padding: 0 1rem;
+    }
+
+    .modal-fields-grid {
+        display: flex;
+        flex-direction: column;
+        gap: 1.2rem;
+        padding: 1rem 0;
+    }
+
+    .form-group,
+    .form-group.notes-group,
+    .form-group.checkbox-group,
+    .form-group.full-width {
+        grid-column: auto;
+        width: 100%;
+    }
+
+    .date-group {
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .notes-textarea {
+        min-height: 120px;
+    }
+
+    .modal-actions {
+        flex-direction: column;
+        gap: 0.8rem;
+        padding: 1rem;
+        background: var(--color-bg-elevated);
+    }
+
+    .btn-primary,
+    .btn-secondary,
+    .btn-danger {
+        width: 100%;
+        padding: 1rem;
+        margin: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 1rem;
+    }
+
+    .btn-primary {
+        order: 1;
+    }
+    .btn-secondary {
+        order: 2;
+    }
+    .btn-danger {
+        order: 3;
+        margin-top: 0.5rem;
+        background: rgba(239, 68, 68, 0.2);
+        color: #f87171;
+        border: 1px solid rgba(239, 68, 68, 0.3);
+    }
+}
--- a/docker/views/css/components/hero.css
+++ b/docker/views/css/components/hero.css
@@ -23,7 +23,12 @@
 .hero-vignette {
    position: absolute;
    inset: 0;
-    background: radial-gradient(circle at center, transparent 0%, var(--color-bg-base) 120%),
+    background:
+        radial-gradient(
+            circle at center,
+            transparent 0%,
+            var(--color-bg-base) 120%
+        ),
        linear-gradient(to top, var(--color-bg-base) 10%, transparent 60%);
    z-index: 1;
 }
@@ -106,8 +111,18 @@
 .hero-overlay {
    position: absolute;
    inset: 0;
-    background: radial-gradient(circle at center, transparent 0%, var(--color-bg-base) 120%),
-    linear-gradient(to top, var(--color-bg-base) 10%, rgba(9,9,11,0.8) 25%, transparent 60%);
+    background:
+        radial-gradient(
+            circle at center,
+            transparent 0%,
+            var(--color-bg-base) 120%
+        ),
+        linear-gradient(
+            to top,
+            var(--color-bg-base) 10%,
+            rgba(9, 9, 11, 0.8) 25%,
+            transparent 60%
+        );
    z-index: 1;
 }

@@ -118,3 +133,86 @@
    border-radius: 6px;
    border: 1px solid rgba(34, 197, 94, 0.2);
 }
+
+@media (max-width: 768px) {
+    .hero-wrapper {
+        height: auto;
+        min-height: 85vh;
+    }
+
+    .hero-content {
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+
+        padding: 6rem 1.5rem 3rem 1.5rem;
+        gap: 2rem;
+    }
+
+    .hero-poster-card {
+        width: 150px;
+        height: 225px;
+
+        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
+        border: 2px solid rgba(255, 255, 255, 0.15);
+        margin-bottom: 0.5rem;
+    }
+
+    .hero-text {
+        width: 100%;
+        margin-bottom: 0;
+    }
+
+    .hero-title {
+        font-size: 2.2rem;
+        line-height: 1.1;
+        margin-bottom: 0.8rem;
+
+        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.9);
+    }
+
+    .hero-meta {
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: 0.8rem;
+        font-size: 0.9rem;
+    }
+
+    .hero-desc {
+        font-size: 1rem;
+        line-height: 1.5;
+
+        -webkit-line-clamp: 3;
+        max-width: 100%;
+        padding: 0 0.5rem;
+    }
+
+    .hero-buttons {
+        flex-direction: column;
+        width: 100%;
+        gap: 1rem;
+    }
+
+    .hero-buttons .btn-primary,
+    .hero-buttons .btn-blur {
+        width: 100%;
+        justify-content: center;
+        padding: 1rem;
+    }
+
+    .hero-overlay {
+        background:
+            radial-gradient(
+                circle at center,
+                transparent 0%,
+                var(--color-bg-base) 140%
+            ),
+            linear-gradient(
+                to top,
+                var(--color-bg-base) 15%,
+                rgba(0, 0, 0, 0.8) 40%,
+                rgba(0, 0, 0, 0.6) 100%
+            );
+    }
+}
--- a/docker/views/css/components/navbar.css
+++ b/docker/views/css/components/navbar.css
@@ -8,7 +8,11 @@
    align-items: center;
    justify-content: space-between;
    padding: 0 3rem;
-    background: linear-gradient(to bottom, rgba(9, 9, 11, 0.9) 0%, rgba(9, 9, 11, 0) 100%);
+    background: linear-gradient(
+        to bottom,
+        rgba(9, 9, 11, 0.9) 0%,
+        rgba(9, 9, 11, 0) 100%
+    );
    transition: background 0.3s;
 }

@@ -211,7 +215,9 @@
    min-width: 260px;
    display: none;
    flex-direction: column;
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(139, 92, 246, 0.1);
+    box-shadow:
+        0 20px 40px rgba(0, 0, 0, 0.6),
+        0 0 0 1px rgba(139, 92, 246, 0.1);
    z-index: 9999;
    overflow: hidden;
    animation: dropdownSlide 0.2s ease-out;
@@ -416,3 +422,105 @@
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
 }
+
+@media (max-width: 768px) {
+    .navbar {
+        padding: 0 1rem;
+        height: 60px;
+        gap: 0.5rem;
+
+        z-index: 1002;
+        background: rgba(9, 9, 11, 0.95);
+    }
+
+    .nav-brand {
+        min-width: auto;
+        font-size: 0;
+    }
+
+    .brand-icon {
+        width: 32px;
+        height: 32px;
+    }
+
+    .search-wrapper {
+        flex: 1;
+        width: auto;
+    }
+
+    .search-input {
+        padding: 0.5rem 1rem 0.5rem 2.2rem;
+        font-size: 0.9rem;
+    }
+
+    .search-icon {
+        left: 10px;
+    }
+
+    #nav-avatar {
+        width: 32px;
+        height: 32px;
+    }
+
+    .nav-center {
+        position: absolute;
+        top: 60px;
+        left: 0;
+        right: 0;
+
+        display: flex;
+        background: rgba(9, 9, 11, 0.98);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        padding: 0.5rem 1rem;
+
+        overflow-x: auto;
+        white-space: nowrap;
+        justify-content: flex-start;
+        gap: 0.5rem;
+
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+        z-index: 1001;
+
+        border-radius: 0;
+        border: none;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    }
+
+    .nav-center::-webkit-scrollbar {
+        display: none;
+    }
+
+    .nav-button {
+        flex-shrink: 0;
+        padding: 0.4rem 1rem;
+        font-size: 0.85rem;
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(255, 255, 255, 0.05);
+    }
+
+    .nav-button.active {
+        background: var(--color-primary);
+        border-color: var(--color-primary);
+    }
+
+    .search-results {
+        position: fixed;
+        top: 110px;
+        left: 0;
+        right: 0;
+        width: 100vw;
+        border-radius: 0;
+        max-height: calc(100vh - 120px);
+    }
+
+    .nav-dropdown {
+        position: fixed;
+        top: 70px;
+        right: 1rem;
+        left: 1rem;
+        width: auto;
+        min-width: auto;
+        z-index: 9999;
+    }
+}
--- a/docker/views/css/globals.css
+++ b/docker/views/css/globals.css
@@ -57,7 +57,7 @@ body {
    padding: 0;
    background-color: var(--color-bg-base);
    color: var(--color-text-primary);
-    font-family: 'Inter', system-ui, sans-serif;
+    font-family: "Inter", system-ui, sans-serif;
    overflow-x: hidden;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
@@ -299,3 +299,95 @@ body {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
 }
+
+Here is the CSS you need to add to the very bottom of your file.
+
+I have targeted the specific classes you provided (.card, .section, .back-btn) to make them touch-friendly, and I added a specific section to fix the "Who's exploring?" screen from your screenshot.
+1. First: The HTML Tag (Crucial)
+
+Ensure this is in your HTML <head> or the CSS below will not work:
+HTML
+
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+2. The CSS Update
+
+Copy and paste this entire block to the bottom of your CSS file:
+CSS
+
+@media (max-width: 768px) {
+    :root {
+        --nav-height: 60px;
+        --spacing-2xl: 1.5rem;
+    }
+
+    .section {
+        padding: 1.25rem 1rem;
+    }
+
+    .section-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1rem;
+    }
+
+    .section-title {
+        font-size: 1.5rem;
+    }
+
+    .back-btn {
+        top: 1rem;
+        left: 1rem;
+        padding: 0.6rem 1.2rem;
+        font-size: 0.9rem;
+
+        position: absolute;
+    }
+
+    .scroll-btn {
+        display: none !important;
+    }
+
+    .carousel {
+        padding: 0.5rem 0;
+
+        padding-right: 1.5rem;
+    }
+
+    .card {
+        min-width: 160px;
+        width: 160px;
+        flex: 0 0 160px;
+    }
+
+    .card-content h3 {
+        font-size: 0.9rem;
+    }
+
+    .profile-selection-container,
+    main {
+        width: 90% !important;
+        margin: 0 auto;
+        padding-top: 20vh;
+        text-align: center;
+    }
+
+    h1 {
+        font-size: 2rem !important;
+        line-height: 1.2;
+    }
+
+    .profile-card img,
+    .user-avatar {
+        width: 140px !important;
+        height: 140px !important;
+    }
+
+    .btn-primary,
+    .btn-blur,
+    .add-user-btn {
+        width: 100%;
+        justify-content: center;
+        padding: 1rem;
+    }
+}
--- a/docker/views/css/list.css
+++ b/docker/views/css/list.css
@@ -33,7 +33,9 @@
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
-    transition: transform 0.3s, box-shadow 0.3s;
+    transition:
+        transform 0.3s,
+        box-shadow 0.3s;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
 }

@@ -54,7 +56,6 @@
    font-weight: 600;
 }

-/* --- Filtros mejorados --- */
 .filters-section {
    display: flex;
    gap: 1.5rem;
@@ -159,7 +160,9 @@
 }

@keyframes spin {
-    to { transform: rotate(360deg); }
+    to {
+        transform: rotate(360deg);
+    }
 }

 .empty-state {
@@ -236,16 +239,15 @@
 }

 .list-grid.list-view .item-poster {
-    /* Cambiar el ancho y alto */
-    width: 120px; /* Antes: 100px */
-    height: 180px; /* Antes: 150px */
+    width: 120px;
+    height: 180px;
    aspect-ratio: auto;
    border-radius: 8px;
    margin: 1rem;
 }

 .item-content {
-    padding: 1rem; /* Antes: 1.2rem */
+    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
@@ -262,7 +264,7 @@
 }

 .item-title {
-    font-size: 1rem; /* Antes: 1.1rem */
+    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    white-space: nowrap;
@@ -281,16 +283,16 @@

 .item-meta {
    display: flex;
-    gap: 0.3rem; /* Antes: 0.75rem. Espacio entre los pills */
-    margin-bottom: 0.5rem; /* Antes: 0.8rem */
+    gap: 0.3rem;
+    margin-bottom: 0.5rem;
    flex-wrap: wrap;
-    /* Añadir: Asegura que si se envuelven, lo hagan con poco margen vertical */
+
    line-height: 1.4;
 }

 .meta-pill {
-    font-size: 0.65rem; /* Antes: 0.7rem */
-    padding: 0.15rem 0.4rem; /* Antes: 0.25rem 0.6rem. Reduce el padding interno */
+    font-size: 0.65rem;
+    padding: 0.15rem 0.4rem;
    border-radius: 999px;
    font-weight: 700;
    white-space: nowrap;
@@ -364,7 +366,6 @@
    border-radius: 4px;
 }

-/* --- Botón de edición flotante --- */
 .edit-icon-btn {
    position: absolute;
    top: 1rem;
@@ -382,7 +383,10 @@
    align-items: center;
    justify-content: center;
    opacity: 0;
-    transition: opacity 0.3s, transform 0.2s, background 0.2s;
+    transition:
+        opacity 0.3s,
+        transform 0.2s,
+        background 0.2s;
 }

 .list-item:hover .edit-icon-btn {
@@ -412,74 +416,92 @@
    transform: none;
 }

-/* --- Modal de Edición Mejorado (Estilo Anilist + AMOLED) --- */
-
-@media (max-width: 550px) {
-    /* Layout de lista (card view) */
-    .list-grid {
-        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    }
-    .list-grid.list-view .list-item {
-        flex-direction: column;
-        align-items: flex-start;
-        padding-right: 0;
-    }
-    .list-grid.list-view .item-poster {
-        width: 100%;
-        height: auto;
-        margin: 0;
-        border-radius: 0;
-        aspect-ratio: 16/9;
-    }
-    .list-grid.list-view .item-content {
-        flex-direction: column;
+@media (max-width: 768px) {
+    .container {
        padding: 1rem;
-    }
-    .list-grid.list-view .item-content > div:first-child {
-        flex-basis: auto;
-    }
-    .list-grid.list-view .edit-icon-btn {
-        position: absolute;
-        top: 1rem;
-        right: 1rem;
-        opacity: 1;
-        background: rgba(18, 18, 21, 0.8);
+        width: 100%;
    }

-    /* Modal en móvil */
-    .modal-content {
-        margin: 0.5rem;
-        width: auto;
+    .header-section {
+        margin-top: 1rem;
+        margin-bottom: 1.5rem;
    }
-    .modal-fields-grid {
+
+    .page-title {
+        font-size: 2rem;
+        text-align: center;
+        margin-bottom: 1.5rem;
+    }
+
+    .stats-row {
        grid-template-columns: 1fr;
        gap: 1rem;
-        padding-bottom: 0;
    }
-    .form-group.notes-group,
-    .form-group.checkbox-group {
-        grid-column: auto;
+
+    .stat-card {
+        padding: 1rem;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
    }
-    .modal-actions {
-        flex-direction: column;
-        align-items: stretch;
-    }
-    .btn-danger {
-        margin-right: 0;
-        order: 3;
-    }
-    .btn-secondary {
+
+    .stat-value {
+        font-size: 1.8rem;
        order: 2;
    }
-    .btn-primary {
+
+    .stat-label {
+        font-size: 1rem;
        order: 1;
    }
+
+    .filters-section {
+        flex-direction: column;
+        padding: 1rem;
+        gap: 1rem;
    }

-.edit-btn-card {
-    display: none;
+    .filter-group {
+        min-width: 100%;
    }

-.item-poster-link {
-    z-index: 1;
+    .filter-select {
+        width: 100%;
+        padding: 0.8rem;
+    }
+
+    .view-toggle {
+        width: 100%;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+    }
+
+    .view-btn {
+        justify-content: center;
+    }
+
+    .list-grid {
+        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+        gap: 1rem;
+    }
+
+    .item-title {
+        font-size: 0.9rem;
+    }
+
+    .item-meta {
+        gap: 0.2rem;
+    }
+
+    .meta-pill {
+        font-size: 0.6rem;
+        padding: 0.1rem 0.3rem;
+    }
+
+    .edit-icon-btn {
+        opacity: 1;
+        background: rgba(0, 0, 0, 0.6);
+        width: 35px;
+        height: 35px;
+    }
 }
--- a/docker/views/css/marketplace.css
+++ b/docker/views/css/marketplace.css
@@ -128,7 +128,10 @@
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
-    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
+    transition:
+        background 0.2s,
+        transform 0.2s,
+        box-shadow 0.2s;
    margin-top: auto;
    text-transform: uppercase;
    letter-spacing: 0.5px;
@@ -228,10 +231,14 @@
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 450px;
-    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8), 0 0 20px var(--color-primary-glow);
+    box-shadow:
+        0 15px 50px rgba(0, 0, 0, 0.8),
+        0 0 20px var(--color-primary-glow);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateY(-50px);
-    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease-in-out;
+    transition:
+        transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
+        opacity 0.3s ease-in-out;
    opacity: 0;
 }

@@ -264,14 +271,15 @@
 }

 .modal-button {
-
    padding: 0.6rem 1.5rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
-    transition: background 0.2s, transform 0.2s;
+    transition:
+        background 0.2s,
+        transform 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
 }
@@ -293,3 +301,103 @@
    background: #ef4444;
    transform: scale(1.02);
 }
+
+@media (max-width: 768px) {
+    .section-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1rem;
+    }
+
+    .filter-controls {
+        width: 100%;
+        overflow-x: auto;
+        white-space: nowrap;
+        padding-bottom: 0.5rem;
+
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+    }
+
+    .filter-controls::-webkit-scrollbar {
+        display: none;
+    }
+
+    .filter-select {
+        flex-shrink: 0;
+        padding: 0.6rem 2.2rem 0.6rem 1rem;
+        font-size: 0.9rem;
+    }
+
+    .marketplace-grid {
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+        gap: 0.75rem;
+    }
+
+    .extension-card {
+        padding: 0.75rem;
+        min-height: auto;
+    }
+
+    .extension-icon {
+        width: 40px;
+        height: 40px;
+    }
+
+    .extension-name {
+        font-size: 1rem;
+    }
+
+    .extension-status-badge {
+        font-size: 0.65rem;
+    }
+
+    .extension-card:hover {
+        transform: none;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+    }
+
+    .extension-action-button {
+        padding: 0.5rem;
+        font-size: 0.8rem;
+    }
+
+    .modal-content {
+        width: 95%;
+        max-width: none;
+        padding: 1.5rem;
+
+        position: absolute;
+        bottom: 0;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        transform: translateY(100%);
+        margin-bottom: 0;
+    }
+
+    .modal-overlay:not(.hidden) .modal-content {
+        transform: translateY(0);
+    }
+
+    #modalTitle {
+        font-size: 1.3rem;
+        margin-bottom: 1rem;
+    }
+
+    #modalMessage {
+        font-size: 0.95rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .modal-actions {
+        flex-direction: column;
+        gap: 0.75rem;
+    }
+
+    .modal-button {
+        width: 100%;
+        padding: 0.8rem;
+        justify-content: center;
+        display: flex;
+    }
+}
--- a/docker/views/css/schedule/schedule.css
+++ b/docker/views/css/schedule/schedule.css
@@ -361,3 +361,97 @@ html.electron body {
        transform: rotate(360deg);
    }
 }
+
+@media (max-width: 768px) {
+    body {
+        height: auto;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+
+    .calendar-wrapper {
+        padding: 1rem;
+        height: auto;
+        overflow: visible;
+        display: block;
+    }
+
+    .calendar-controls {
+        flex-direction: column;
+        gap: 1rem;
+        padding-bottom: 1rem;
+    }
+
+    .month-selector {
+        width: 100%;
+        justify-content: space-between;
+        gap: 0.5rem;
+    }
+
+    .month-title {
+        font-size: 1.5rem;
+        min-width: auto;
+        text-align: center;
+        flex: 1;
+    }
+
+    .controls-right {
+        width: 100%;
+        justify-content: center;
+    }
+
+    .calendar-board {
+        border: none;
+        background: transparent;
+        box-shadow: none;
+        overflow: visible;
+    }
+
+    .weekdays-grid {
+        display: none;
+    }
+
+    .days-grid {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        background: transparent;
+        height: auto;
+        overflow: visible;
+    }
+
+    .day-cell.empty {
+        display: none;
+    }
+
+    .day-cell {
+        border: 1px solid var(--border-subtle);
+        border-radius: var(--radius-lg);
+        background: var(--color-bg-elevated);
+        min-height: auto;
+        padding: 1rem;
+    }
+
+    .day-cell:nth-child(7n) {
+        border-right: 1px solid var(--border-subtle);
+    }
+
+    .day-header {
+        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        padding-bottom: 0.5rem;
+        margin-bottom: 0.8rem;
+    }
+
+    .day-number {
+        background: rgba(255, 255, 255, 0.05);
+    }
+
+    .anime-chip {
+        padding: 12px;
+        font-size: 0.95rem;
+    }
+
+    .cell-backdrop {
+        display: none;
+    }
+}
--- a/docker/views/css/users.css
+++ b/docker/views/css/users.css
@@ -10,15 +10,29 @@
 .background-gradient {
    position: fixed;
    inset: 0;
-    background: radial-gradient(ellipse at top, rgba(139, 92, 246, 0.15) 0%, transparent 60%),
-    radial-gradient(ellipse at bottom right, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
+    background:
+        radial-gradient(
+            ellipse at top,
+            rgba(139, 92, 246, 0.15) 0%,
+            transparent 60%
+        ),
+        radial-gradient(
+            ellipse at bottom right,
+            rgba(59, 130, 246, 0.1) 0%,
+            transparent 50%
+        );
    z-index: 0;
    animation: gradientShift 10s ease infinite;
 }

@keyframes gradientShift {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.7; }
+    0%,
+    100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.7;
+    }
 }

 .content-container {
@@ -80,9 +94,8 @@
    box-shadow: 0 20px 40px rgba(139, 92, 246, 0.3);
 }

-/* Badge de contraseña protegida */
 .user-card.has-password::after {
-    content: '🔒';
+    content: "🔒";
    position: absolute;
    top: 10px;
    left: 10px;
@@ -116,7 +129,11 @@
    display: flex;
    align-items: center;
    justify-content: center;
-    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
+    background: linear-gradient(
+        135deg,
+        rgba(139, 92, 246, 0.1) 0%,
+        rgba(59, 130, 246, 0.05) 100%
+    );
 }

 .user-avatar-placeholder svg {
@@ -131,7 +148,12 @@
    left: 0;
    right: 0;
    padding: 1rem 1.5rem;
-    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 50%, transparent 100%);
+    background: linear-gradient(
+        to top,
+        rgba(0, 0, 0, 0.95) 0%,
+        rgba(0, 0, 0, 0.7) 50%,
+        transparent 100%
+    );
    transform: translateY(100%);
    transition: transform 0.3s ease;
 }
@@ -168,7 +190,9 @@
    justify-content: center;
    cursor: pointer;
    opacity: 0;
-    transition: opacity 0.3s, background 0.2s;
+    transition:
+        opacity 0.3s,
+        background 0.2s;
    z-index: 20;
 }

@@ -205,7 +229,6 @@
    box-shadow: 0 10px 30px var(--color-primary-glow);
 }

-/* Modal Styles */
 .modal {
    display: none;
    position: fixed;
@@ -438,7 +461,6 @@ input[type="file"] {
    color: white;
 }

-/* Estilos para modal de password */
 .password-modal-content {
    padding: 1.5rem;
 }
@@ -461,7 +483,6 @@ input[type="file"] {
    margin-top: 0.1rem;
 }

-/* ESTILOS PARA MODAL DE ACCIONES INDIVIDUALES */
 .manage-actions-modal {
    display: flex;
    flex-direction: column;
@@ -673,10 +694,13 @@ input[type="file"] {
    border: 1px solid rgba(59, 130, 246, 0.4);
 }

-/* Animations */
@keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }

@keyframes fadeInDown {
@@ -720,22 +744,121 @@ input[type="file"] {
 }

@keyframes shimmer {
-    0% { background-position: 200% 0; }
-    100% { background-position: -200% 0; }
+    0% {
+        background-position: 200% 0;
+    }
+    100% {
+        background-position: -200% 0;
+    }
 }

-/* Responsive */
@media (max-width: 768px) {
+    .page-wrapper {
+        padding: 1rem;
+
+        align-items: flex-start;
+        padding-top: 2rem;
+    }
+
+    .header-section {
+        margin-bottom: 2rem;
+    }
+
    .page-title {
-        font-size: 2.5rem;
+        font-size: 2.2rem;
+        line-height: 1.1;
    }

    .users-grid {
-        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-        gap: 1.5rem;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 0.75rem;
+        max-width: 100%;
+    }
+
+    .user-name {
+        font-size: 1.1rem;
+        font-weight: 800;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
+    }
+
+    .user-config-btn {
+        width: 44px;
+        height: 44px;
+        top: 5px;
+        right: 5px;
+        background: rgba(0, 0, 0, 0.6);
+        opacity: 1 !important;
+    }
+
+    .user-config-btn svg {
+        width: 20px;
+        height: 20px;
+    }
+
+    .btn-add-user {
+        width: 100%;
+        padding: 1.25rem;
+        font-size: 1.1rem;
+        margin-bottom: 3rem;
+    }
+}
+
+@media (max-width: 380px) {
+    .users-grid {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+
+    .user-card {
+        aspect-ratio: 16/9;
+    }
+}
+
+@media (hover: none) {
+    .user-info {
+        transform: translateY(0);
+        background: linear-gradient(
+            to top,
+            rgba(0, 0, 0, 0.95) 0%,
+            rgba(0, 0, 0, 0.6) 50%,
+            transparent 100%
+        );
+        padding: 1rem;
+    }
+
+    .user-card:hover {
+        transform: none;
+        border-color: rgba(255, 255, 255, 0.1);
+    }
+
+    .user-card:active {
+        transform: scale(0.97);
+        border-color: var(--color-primary);
+    }
+}
+
+@media (max-width: 768px) {
+    .modal {
+        align-items: flex-end;
    }

    .modal-content {
+        width: 100%;
+        max-width: 100%;
+        border-radius: 20px 20px 0 0;
+        max-height: 85vh;
        padding: 1.5rem;
+        overflow-y: auto;
+    }
+
+    .form-group input[type="text"],
+    .form-group input[type="password"] {
+        padding: 1.2rem;
+        font-size: 16px;
+    }
+
+    .btn-primary,
+    .btn-secondary {
+        padding: 1.2rem;
    }
 }
--- a/docker/views/users.html
+++ b/docker/views/users.html
@@ -1,18 +1,31 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
    <head>
-  <meta charset="UTF-8">
+        <meta charset="UTF-8" />
        <title>WaifuBoard - Users</title>
-  <link rel="stylesheet" href="/views/css/globals.css">
-  <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
-  <link rel="stylesheet" href="/views/css/components/titlebar.css">
-  <link rel="stylesheet" href="/views/css/users.css">
-  <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
+        <link rel="stylesheet" href="/views/css/globals.css" />
+        <link
+            rel="stylesheet"
+            href="/views/css/components/updateNotifier.css"
+        />
+        <link rel="stylesheet" href="/views/css/components/titlebar.css" />
+        <link rel="stylesheet" href="/views/css/users.css" />
+        <link
+            rel="icon"
+            href="/public/assets/waifuboards.ico"
+            type="image/x-icon"
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="/src/scripts/titlebar.js"></script>
    </head>
    <body>
-<div id="titlebar"> <div class="title-left">
-  <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
+        <div id="titlebar">
+            <div class="title-left">
+                <img
+                    class="app-icon"
+                    src="/public/assets/waifuboards.ico"
+                    alt=""
+                />
                <span class="app-title">WaifuBoard</span>
            </div>
            <div class="title-right">
@@ -31,11 +44,17 @@
                    <p class="page-subtitle">Select your profile to continue</p>
                </div>

-    <div class="users-grid" id="usersGrid">
-    </div>
+                <div class="users-grid" id="usersGrid"></div>

                <button class="btn-add-user" id="btnAddUser">
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <svg
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
                        <line x1="12" y1="5" x2="12" y2="19"></line>
                        <line x1="5" y1="12" x2="19" y2="12"></line>
                    </svg>
@@ -50,7 +69,14 @@
                <div class="modal-header">
                    <h2>Create New User</h2>
                    <button class="modal-close" id="closeCreateModal">
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <svg
+                            width="24"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                        >
                            <line x1="18" y1="6" x2="6" y2="18"></line>
                            <line x1="6" y1="6" x2="18" y2="18"></line>
                        </svg>
@@ -59,25 +85,52 @@
                <form id="createUserForm">
                    <div class="form-group">
                        <label for="username">Username</label>
-        <input type="text" id="username" name="username" required maxlength="20" placeholder="Enter your name">
+                        <input
+                            type="text"
+                            id="username"
+                            name="username"
+                            required
+                            maxlength="20"
+                            placeholder="Enter your name"
+                        />
                    </div>
                    <div class="form-group">
                        <label>Profile Picture</label>
                        <div class="avatar-upload-area" id="avatarUploadArea">
                            <div class="avatar-preview" id="avatarPreview">
-            <svg class="avatar-preview-placeholder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+                                <svg
+                                    class="avatar-preview-placeholder"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2"
+                                >
+                                    <path
+                                        d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"
+                                    ></path>
                                    <circle cx="12" cy="7" r="4"></circle>
                                </svg>
                            </div>
-          <p class="avatar-upload-text">Click to upload or drag and drop</p>
-          <p class="avatar-upload-hint">PNG, JPG, GIF... up to 50 MB</p>
+                            <p class="avatar-upload-text">
+                                Click to upload or drag and drop
+                            </p>
+                            <p class="avatar-upload-hint">
+                                PNG, JPG, GIF... up to 50 MB
+                            </p>
                        </div>
-        <input type="file" id="avatarInput" accept="image/*">
+                        <input type="file" id="avatarInput" accept="image/*" />
                    </div>
                    <div class="modal-actions">
-        <button type="button" class="btn-secondary" id="cancelCreate">Cancel</button>
-        <button type="submit" class="btn-primary">Create User</button>
+                        <button
+                            type="button"
+                            class="btn-secondary"
+                            id="cancelCreate"
+                        >
+                            Cancel
+                        </button>
+                        <button type="submit" class="btn-primary">
+                            Create User
+                        </button>
                    </div>
                </form>
            </div>
@@ -85,18 +138,24 @@

        <div class="modal" id="modalUserActions">
            <div class="modal-overlay"></div>
-  <div class="modal-content" style="max-width: 400px;">
+            <div class="modal-content" style="max-width: 400px">
                <div class="modal-header">
                    <h2 id="actionsModalTitle">Manage Profile</h2>
                    <button class="modal-close" id="closeActionsModal">
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <svg
+                            width="24"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                        >
                            <line x1="18" y1="6" x2="6" y2="18"></line>
                            <line x1="6" y1="6" x2="18" y2="18"></line>
                        </svg>
                    </button>
                </div>
-    <div id="actionsModalContent">
-    </div>
+                <div id="actionsModalContent"></div>
            </div>
        </div>

@@ -106,7 +165,14 @@
                <div class="modal-header">
                    <h2>Edit Profile</h2>
                    <button class="modal-close" id="closeEditModal">
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <svg
+                            width="24"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                        >
                            <line x1="18" y1="6" x2="6" y2="18"></line>
                            <line x1="6" y1="6" x2="18" y2="18"></line>
                        </svg>
@@ -115,25 +181,57 @@
                <form id="editUserForm">
                    <div class="form-group">
                        <label for="editUsername">Username</label>
-        <input type="text" id="editUsername" name="username" required maxlength="20" placeholder="Enter your new name">
+                        <input
+                            type="text"
+                            id="editUsername"
+                            name="username"
+                            required
+                            maxlength="20"
+                            placeholder="Enter your new name"
+                        />
                    </div>
                    <div class="form-group">
                        <label>Profile Picture</label>
-        <div class="avatar-upload-area" id="editAvatarUploadArea">
+                        <div
+                            class="avatar-upload-area"
+                            id="editAvatarUploadArea"
+                        >
                            <div class="avatar-preview" id="editAvatarPreview">
-            <svg class="avatar-preview-placeholder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+                                <svg
+                                    class="avatar-preview-placeholder"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2"
+                                >
+                                    <path
+                                        d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"
+                                    ></path>
                                    <circle cx="12" cy="7" r="4"></circle>
                                </svg>
                            </div>
-          <p class="avatar-upload-text">Click to upload or drag and drop</p>
+                            <p class="avatar-upload-text">
+                                Click to upload or drag and drop
+                            </p>
                            <p class="avatar-upload-hint">PNG, JPG up to 5MB</p>
                        </div>
-        <input type="file" id="editAvatarInput" accept="image/*">
+                        <input
+                            type="file"
+                            id="editAvatarInput"
+                            accept="image/*"
+                        />
                    </div>
                    <div class="modal-actions">
-        <button type="button" class="btn-secondary" id="cancelEdit">Cancel</button>
-        <button type="submit" class="btn-primary">Save Changes</button>
+                        <button
+                            type="button"
+                            class="btn-secondary"
+                            id="cancelEdit"
+                        >
+                            Cancel
+                        </button>
+                        <button type="submit" class="btn-primary">
+                            Save Changes
+                        </button>
                    </div>
                </form>
            </div>
@@ -145,14 +243,20 @@
                <div class="modal-header">
                    <h2>AniList Integration</h2>
                    <button class="modal-close" id="closeAniListModal">
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <svg
+                            width="24"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                        >
                            <line x1="18" y1="6" x2="6" y2="18"></line>
                            <line x1="6" y1="6" x2="18" y2="18"></line>
                        </svg>
                    </button>
                </div>
-    <div id="aniListContent">
-    </div>
+                <div id="aniListContent"></div>
            </div>
        </div>

@@ -167,7 +271,9 @@
                Click To Download
            </a>
        </div>
-<script>localStorage.removeItem("token")</script>
+        <script>
+            localStorage.removeItem("token");
+        </script>
        <script src="/src/scripts/updateNotifier.js"></script>
        <script src="/src/scripts/users.js"></script>
    </body>
Author	SHA1	Message	Date
itsskaiya	7490f269b0	Updated version in updateNotifier	2025-12-17 16:37:56 -05:00
lenafx	c7f919fe18	fixed an error where app wouldnt launch	2025-12-17 21:32:34 +01:00
itsskaiya	7c85d91b85	Merge branch 'main' of https://git.waifuboard.app/ItsSkaiya/WaifuBoard	2025-12-17 13:00:35 -05:00
itsskaiya	c11a1eed35	Docker server has responsiveness now	2025-12-17 13:00:15 -05:00