Update model card and add modAI + modHacker banner

admin/server.py

@@ -0,0 +1,440 @@
+from __future__ import annotations
+
+import json
+import logging
+import shutil
+import subprocess
+import threading
+from pathlib import Path
+from typing import Any, Dict, Optional, Tuple
+
+from flask import Flask, jsonify, render_template, request
+
+logger = logging.getLogger("modInteractive.admin")
+
+BASE_DIR = Path(__file__).resolve().parents[1]
+
+app = Flask(
+    __name__,
+    template_folder=str(Path(__file__).resolve().parent / "templates"),
+    static_folder=str(Path(__file__).resolve().parent / "static"),
+)
+
+_config: Optional[Any] = None
+_config_data: Dict[str, Any] = {}
+_config_path: Path = BASE_DIR / "config.json"
+
+
+def init(config: Any, config_path: str) -> None:
+    global _config, _config_data, _config_path
+
+    _config = config
+    _config_path = Path(config_path).expanduser().resolve()
+
+    try:
+        if hasattr(config, "reload"):
+            config.reload()
+        elif hasattr(config, "load"):
+            config.load()
+
+        data = getattr(config, "data", {})
+        _config_data = dict(data) if isinstance(data, dict) else {}
+    except Exception:
+        logger.exception("Admin config initialization failed")
+        _config_data = _read_config_file()
+
+
+@app.route("/")
+def index() -> str:
+    return render_template("index.html")
+
+
+@app.route("/favicon.ico")
+def favicon() -> tuple[str, int]:
+    return "", 204
+
+
+@app.route("/api/config", methods=["GET"])
+def get_config() -> Any:
+    data = _read_config_file()
+
+    if not data:
+        return jsonify({"error": "Config not found or empty"}), 404
+
+    return jsonify(data)
+
+
+@app.route("/api/config/update", methods=["POST"])
+def update_config() -> Any:
+    global _config_data
+
+    data = request.get_json(silent=True)
+
+    if not isinstance(data, dict):
+        return jsonify({"error": "JSON object required"}), 400
+
+    try:
+        if _config is not None and hasattr(_config, "update"):
+            _config.update(data, save=True)
+            _config_data = dict(_config.data)
+        else:
+            current = _read_config_file()
+            merged = _deep_merge(current, data)
+            _write_config_file(merged)
+            _config_data = merged
+
+        return jsonify(
+            {
+                "status": "ok",
+                "message": "Configuration updated",
+                "config": _config_data,
+            }
+        )
+
+    except Exception as exc:
+        logger.exception("Config update failed")
+        return jsonify({"error": str(exc)}), 500
+
+
+@app.route("/api/reload-config", methods=["POST"])
+def reload_config() -> Any:
+    global _config_data
+
+    try:
+        if _config is not None and hasattr(_config, "reload"):
+            _config.reload()
+            _config_data = dict(_config.data)
+        else:
+            _config_data = _read_config_file()
+
+        return jsonify(
+            {
+                "status": "ok",
+                "message": "Configuration reloaded",
+                "config": _config_data,
+            }
+        )
+
+    except Exception as exc:
+        logger.exception("Config reload failed")
+        return jsonify({"error": str(exc)}), 500
+
+
+@app.route("/api/status", methods=["GET"])
+def get_status() -> Any:
+    data = _current_config()
+    trigger_source = str(_nested_get(data, "trigger.source", "camera")).lower().strip()
+
+    status: Dict[str, Any] = {
+        "admin": "running",
+        "project_root": str(BASE_DIR),
+        "config_path": str(_config_path),
+        "trigger_source": trigger_source,
+        "opencv_available": False,
+        "opencv_version": None,
+        "camera_available": False,
+        "camera_resolution": None,
+        "pir_available": False,
+        "pir_gpio_pin": _safe_int(_nested_get(data, "pir.gpio_pin", 17), 17, 0, 27),
+        "pir_state": None,
+        "video_exists": False,
+        "video_path": None,
+        "mpv_available": shutil.which("mpv") is not None,
+        "mpv_path": shutil.which("mpv"),
+    }
+
+    if trigger_source == "camera":
+        _fill_camera_status(status, data)
+    elif trigger_source == "pir":
+        _fill_pir_status(status, data)
+
+    video_path = _resolve_video_path(str(_nested_get(data, "video.path", "videos/selamlama.mp4")))
+    status["video_path"] = str(video_path)
+    status["video_exists"] = video_path.is_file()
+
+    if video_path.is_file():
+        status["video_size_mb"] = round(video_path.stat().st_size / (1024 * 1024), 2)
+
+    return jsonify(status)
+
+
+@app.route("/api/test-video", methods=["POST"])
+def test_video() -> Any:
+    data = _current_config()
+    mpv_path = shutil.which(str(_nested_get(data, "video.player", "mpv")))
+
+    if not mpv_path:
+        return jsonify({"error": "mpv not installed. Install: sudo apt install mpv"}), 500
+
+    requested_video = None
+    body = request.get_json(silent=True)
+
+    if isinstance(body, dict):
+        requested_video = body.get("path")
+
+    video_value = str(requested_video or _nested_get(data, "video.path", "videos/selamlama.mp4"))
+    video_path = _resolve_video_path(video_value)
+
+    allowed, reason = _is_allowed_video_path(video_path)
+
+    if not allowed:
+        return jsonify({"error": reason}), 403
+
+    if not video_path.is_file():
+        return jsonify({"error": f"Video not found: {video_path}"}), 404
+
+    fullscreen = bool(_nested_get(data, "video.fullscreen", True))
+    volume = _safe_int(_nested_get(data, "video.volume", 90), 90, 0, 100)
+
+    command = [
+        mpv_path,
+        "--no-terminal",
+        "--really-quiet",
+        "--keep-open=no",
+        "--osd-level=0",
+        f"--volume={volume}",
+    ]
+
+    if fullscreen:
+        command.extend(["--fs", "--no-border", "--ontop", "--cursor-autohide=always"])
+
+    command.append(str(video_path))
+
+    try:
+        subprocess.Popen(
+            command,
+            stdin=subprocess.DEVNULL,
+            stdout=subprocess.DEVNULL,
+            stderr=subprocess.DEVNULL,
+            shell=False,
+            start_new_session=True,
+        )
+        return jsonify(
+            {
+                "status": "ok",
+                "message": "Video playback started",
+                "video": str(video_path),
+            }
+        )
+
+    except Exception as exc:
+        logger.exception("Test video failed")
+        return jsonify({"error": str(exc)}), 500
+
+
+@app.route("/api/logs", methods=["GET"])
+def get_logs() -> Any:
+    limit = _safe_int(request.args.get("limit", 100), 100, 1, 1000)
+    log_file = BASE_DIR / "logs" / "modinteractive.log"
+
+    if not log_file.exists():
+        return jsonify({"logs": []})
+
+    try:
+        lines = log_file.read_text(encoding="utf-8", errors="replace").splitlines()
+        return jsonify({"logs": lines[-limit:]})
+    except Exception as exc:
+        logger.exception("Reading logs failed")
+        return jsonify({"error": str(exc)}), 500
+
+
+def run_server(host: str = "0.0.0.0", port: int = 8080) -> None:
+    try:
+        logger.info("Admin panel starting on http://%s:%d", host, port)
+        app.run(
+            host=host,
+            port=int(port),
+            debug=False,
+            use_reloader=False,
+            threaded=True,
+        )
+    except Exception:
+        logger.exception("Admin panel failed to start")
+
+
+def start_admin_thread(config: Any, config_path: str) -> threading.Thread:
+    init(config, config_path)
+    host = str(config.get("admin.host", "0.0.0.0"))
+    port = _safe_int(config.get("admin.port", 8080), 8080, 1, 65535)
+
+    thread = threading.Thread(
+        target=run_server,
+        args=(host, port),
+        daemon=True,
+        name="modinteractive-admin-server",
+    )
+    thread.start()
+    logger.info("Admin panel thread started on port %d", port)
+    return thread
+
+
+def _fill_camera_status(status: Dict[str, Any], data: Dict[str, Any]) -> None:
+    try:
+        import cv2
+
+        status["opencv_available"] = True
+        status["opencv_version"] = cv2.__version__
+
+        camera_index = _normalize_camera_index(
+            _nested_get(data, "camera.index", 0)
+        )
+        camera_width = _safe_int(_nested_get(data, "camera.width", 640), 640, 1)
+        camera_height = _safe_int(_nested_get(data, "camera.height", 480), 480, 1)
+        camera_fps = _safe_int(_nested_get(data, "camera.fps", 15), 15, 1)
+        camera_backend = str(_nested_get(data, "camera.backend", "v4l2")).lower()
+
+        if camera_backend == "v4l2" and hasattr(cv2, "CAP_V4L2"):
+            cap = cv2.VideoCapture(camera_index, cv2.CAP_V4L2)
+        else:
+            cap = cv2.VideoCapture(camera_index)
+
+        try:
+            if cap.isOpened():
+                cap.set(cv2.CAP_PROP_FRAME_WIDTH, camera_width)
+                cap.set(cv2.CAP_PROP_FRAME_HEIGHT, camera_height)
+                cap.set(cv2.CAP_PROP_FPS, camera_fps)
+
+                ok, frame = cap.read()
+
+                if ok and frame is not None:
+                    status["camera_available"] = True
+                    status["camera_resolution"] = f"{frame.shape[1]}x{frame.shape[0]}"
+                else:
+                    status["camera_available"] = True
+                    status["camera_resolution"] = "opened but no frame"
+        finally:
+            cap.release()
+
+    except Exception as exc:
+        status["camera_error"] = str(exc)
+
+
+def _fill_pir_status(status: Dict[str, Any], data: Dict[str, Any]) -> None:
+    """Report PIR status without trying to claim GPIO already owned by the app.
+
+    The admin panel runs inside the same application process. When PIR mode is active,
+    the main loop already owns the GPIO line, so opening the same BCM pin again from
+    the status endpoint may produce "GPIO busy". For the dashboard we report the
+    configured pin and that the GPIO is controlled by the running app. The standalone
+    health check and tools/test_pir.py still perform real GPIO read tests.
+    """
+    status["pir_available"] = True
+    status["pir_state"] = "managed_by_application"
+    status["pir_note"] = "GPIO is controlled by the running modInteractive process"
+
+
+def _current_config() -> Dict[str, Any]:
+    if _config is not None:
+        try:
+            data = getattr(_config, "data", None)
+            if isinstance(data, dict):
+                return dict(data)
+        except Exception:
+            logger.debug("Could not read live config object", exc_info=True)
+
+    return _read_config_file()
+
+
+def _read_config_file() -> Dict[str, Any]:
+    try:
+        if not _config_path.exists():
+            return {}
+
+        data = json.loads(_config_path.read_text(encoding="utf-8"))
+
+        if isinstance(data, dict):
+            return data
+
+        return {}
+    except Exception:
+        logger.exception("Could not read config file")
+        return {}
+
+
+def _write_config_file(data: Dict[str, Any]) -> None:
+    _config_path.parent.mkdir(parents=True, exist_ok=True)
+    _config_path.write_text(
+        json.dumps(data, indent=2, ensure_ascii=False) + "\n",
+        encoding="utf-8",
+    )
+
+
+def _deep_merge(base: Dict[str, Any], override: Dict[str, Any]) -> Dict[str, Any]:
+    result = dict(base)
+
+    for key, value in override.items():
+        if isinstance(result.get(key), dict) and isinstance(value, dict):
+            result[key] = _deep_merge(result[key], value)
+        else:
+            result[key] = value
+
+    return result
+
+
+def _nested_get(data: Dict[str, Any], key_path: str, default: Any = None) -> Any:
+    value: Any = data
+
+    for key in key_path.split("."):
+        if isinstance(value, dict) and key in value:
+            value = value[key]
+        else:
+            return default
+
+    return value
+
+
+def _resolve_video_path(value: str) -> Path:
+    path = Path(value).expanduser()
+
+    if not path.is_absolute():
+        path = BASE_DIR / path
+
+    return path.resolve()
+
+
+def _is_allowed_video_path(path: Path) -> Tuple[bool, str]:
+    videos_dir = (BASE_DIR / "videos").resolve()
+
+    try:
+        path.relative_to(videos_dir)
+        return True, ""
+    except ValueError:
+        return False, f"Only files under videos directory are allowed: {videos_dir}"
+
+
+def _normalize_camera_index(value: Any) -> Any:
+    if isinstance(value, int):
+        return value
+
+    if isinstance(value, str):
+        stripped = value.strip()
+
+        if stripped.isdigit():
+            return int(stripped)
+
+        return stripped
+
+    try:
+        return int(value)
+    except (TypeError, ValueError):
+        return 0
+
+
+def _safe_int(
+    value: Any,
+    default: int,
+    minimum: Optional[int] = None,
+    maximum: Optional[int] = None,
+) -> int:
+    try:
+        number = int(value)
+    except (TypeError, ValueError):
+        number = default
+
+    if minimum is not None and number < minimum:
+        number = minimum
+
+    if maximum is not None and number > maximum:
+        number = maximum
+
+    return number

admin/static/app.js

@@ -0,0 +1,535 @@
+document.addEventListener("DOMContentLoaded", () => {
+    bindTabs();
+    bindForm();
+    bindButtons();
+    bindSensitivitySlider();
+
+    loadConfig();
+    loadStatus();
+    loadLogs();
+
+    window.setInterval(loadStatus, 8000);
+});
+
+function bindTabs() {
+    document.querySelectorAll(".tab").forEach((tab) => {
+        tab.addEventListener("click", () => {
+            const targetId = tab.dataset.tab;
+
+            document.querySelectorAll(".tab").forEach((item) => item.classList.remove("active"));
+            document.querySelectorAll(".tab-content").forEach((content) => content.classList.remove("active"));
+
+            tab.classList.add("active");
+
+            const target = document.getElementById(targetId);
+            if (target) {
+                target.classList.add("active");
+            }
+
+            if (targetId === "status") {
+                loadStatus();
+            }
+
+            if (targetId === "logs") {
+                loadLogs();
+            }
+        });
+    });
+}
+
+function bindForm() {
+    const form = document.getElementById("config-form");
+
+    if (!form) {
+        return;
+    }
+
+    form.addEventListener("submit", (event) => {
+        event.preventDefault();
+        saveConfig();
+    });
+}
+
+function bindButtons() {
+    const refreshStatus = document.getElementById("refresh-status");
+    const refreshLogs = document.getElementById("refresh-logs");
+    const testVideoButton = document.getElementById("test-video");
+    const reloadConfigButton = document.getElementById("reload-config");
+
+    if (refreshStatus) {
+        refreshStatus.addEventListener("click", loadStatus);
+    }
+
+    if (refreshLogs) {
+        refreshLogs.addEventListener("click", loadLogs);
+    }
+
+    if (testVideoButton) {
+        testVideoButton.addEventListener("click", testVideo);
+    }
+
+    if (reloadConfigButton) {
+        reloadConfigButton.addEventListener("click", async () => {
+            await loadConfig();
+            await loadStatus();
+        });
+    }
+}
+
+function bindSensitivitySlider() {
+    const slider = document.getElementById("motion-sensitivity");
+    const value = document.getElementById("motion-sensitivity-value");
+
+    if (!slider || !value) {
+        return;
+    }
+
+    slider.addEventListener("input", () => {
+        value.textContent = slider.value;
+    });
+}
+
+function showStatus(message, type = "info") {
+    const element = document.getElementById("save-status");
+
+    if (!element) {
+        return;
+    }
+
+    element.textContent = message;
+    element.className = `status-msg ${type}`;
+
+    window.setTimeout(() => {
+        element.className = "status-msg";
+    }, 6000);
+}
+
+async function apiFetch(url, options = {}) {
+    const response = await fetch(url, {
+        cache: "no-store",
+        ...options,
+    });
+
+    let data = {};
+
+    try {
+        data = await response.json();
+    } catch (_error) {
+        data = {};
+    }
+
+    if (!response.ok) {
+        const message = data.error || `${response.status} ${response.statusText}`;
+        throw new Error(message);
+    }
+
+    return data;
+}
+
+async function loadConfig() {
+    try {
+        const config = await apiFetch("/api/config");
+
+        setValue("trigger-source", getNested(config, "trigger.source", "pir"));
+
+        setValue("camera-index", getNested(config, "camera.index", 0));
+        setValue("camera-width", getNested(config, "camera.width", 640));
+        setValue("camera-height", getNested(config, "camera.height", 480));
+        setValue("camera-fps", getNested(config, "camera.fps", 15));
+
+        setValue("pir-gpio-pin", getNested(config, "pir.gpio_pin", 17));
+        setChecked("pir-active-high", getNested(config, "pir.active_high", true));
+        setChecked("pir-pull-up", getNested(config, "pir.pull_up", false));
+        setValue("pir-bounce-time", getNested(config, "pir.bounce_time_ms", 500));
+        setValue("pir-settle-seconds", getNested(config, "pir.settle_seconds", 30));
+        setValue("pir-poll-interval", getNested(config, "pir.poll_interval", 0.05));
+
+        const sensitivity = getNested(config, "detection.motion_sensitivity", 500);
+        setValue("motion-sensitivity", sensitivity);
+        setText("motion-sensitivity-value", sensitivity);
+
+        setValue("min-motion-area", getNested(config, "detection.min_motion_area", 1500));
+        setValue("cooldown-seconds", getNested(config, "detection.cooldown_seconds", 10));
+        setValue("frame-skip", getNested(config, "detection.frame_skip", 3));
+
+        setValue("video-path", getNested(config, "video.path", "videos/selamlama.mp4"));
+        setValue("video-volume", getNested(config, "video.volume", 90));
+        setChecked("video-fullscreen", getNested(config, "video.fullscreen", true));
+
+        updateHero(config);
+        showStatus("Ayarlar yüklendi", "success");
+    } catch (error) {
+        showStatus(`Ayarlar yüklenemedi: ${error.message}`, "error");
+    }
+}
+
+async function saveConfig() {
+    const config = {
+        system: {
+            log_level: "INFO",
+            project_name: "modInteractive",
+            version: "1.1.0",
+        },
+        trigger: {
+            source: readSelect("trigger-source", "pir", ["camera", "pir"]),
+        },
+        camera: {
+            index: readCameraIndex("camera-index", 0),
+            width: readInt("camera-width", 640, 160, 3840),
+            height: readInt("camera-height", 480, 120, 2160),
+            fps: readInt("camera-fps", 15, 1, 60),
+            backend: "v4l2",
+        },
+        pir: {
+            gpio_pin: readInt("pir-gpio-pin", 17, 0, 27),
+            active_high: readChecked("pir-active-high", true),
+            pull_up: readChecked("pir-pull-up", false),
+            bounce_time_ms: readInt("pir-bounce-time", 500, 0, 5000),
+            settle_seconds: readInt("pir-settle-seconds", 30, 0, 120),
+            poll_interval: readFloat("pir-poll-interval", 0.05, 0.01, 5),
+        },
+        detection: {
+            enabled: true,
+            mode: "motion",
+            motion_sensitivity: readInt("motion-sensitivity", 500, 1, 100000),
+            min_motion_area: readInt("min-motion-area", 1500, 1, 100000),
+            frame_skip: readInt("frame-skip", 3, 1, 30),
+            warmup_seconds: 2,
+            cooldown_seconds: readInt("cooldown-seconds", 10, 0, 600),
+        },
+        video: {
+            path: readString("video-path", "videos/selamlama.mp4"),
+            fullscreen: readChecked("video-fullscreen", true),
+            volume: readInt("video-volume", 90, 0, 100),
+            player: "mpv",
+        },
+        admin: {
+            enabled: true,
+            host: "0.0.0.0",
+            port: 8080,
+        },
+    };
+
+    try {
+        const data = await apiFetch("/api/config/update", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify(config),
+        });
+
+        if (data.status === "ok") {
+            updateHero(config);
+            showStatus("Ayarlar kaydedildi. Değişikliklerin tamamı için servisi restart et.", "success");
+            await loadStatus();
+        } else {
+            showStatus(data.error || "Ayar kaydetme başarısız", "error");
+        }
+    } catch (error) {
+        showStatus(`Kaydedilemedi: ${error.message}`, "error");
+    }
+}
+
+async function loadStatus() {
+    const container = document.getElementById("status-content");
+
+    if (!container) {
+        return;
+    }
+
+    try {
+        const status = await apiFetch("/api/status");
+        const source = status.trigger_source || "pir";
+        const items = [
+            {
+                label: "Trigger",
+                value: source === "pir" ? "PIR GPIO" : "Camera",
+                fail: false,
+            },
+            {
+                label: "PIR",
+                value: status.pir_available
+                    ? `GPIO ${status.pir_gpio_pin} • ${formatPirState(status.pir_state)}`
+                    : source === "pir"
+                        ? (status.pir_error || "Hazır değil")
+                        : "Kullanılmıyor",
+                fail: source === "pir" && !status.pir_available,
+            },
+            {
+                label: "Video",
+                value: status.video_exists
+                    ? `Hazır • ${status.video_size_mb || "?"} MB`
+                    : "Bulunamadı",
+                fail: !status.video_exists,
+            },
+            {
+                label: "mpv",
+                value: status.mpv_available ? "Hazır" : "Eksik",
+                fail: !status.mpv_available,
+            },
+            {
+                label: "Camera",
+                value: source === "camera"
+                    ? (status.camera_available ? "Hazır" : "Bulunamadı")
+                    : "Kullanılmıyor",
+                fail: source === "camera" && !status.camera_available,
+            },
+            {
+                label: "OpenCV",
+                value: status.opencv_available
+                    ? `Hazır ${status.opencv_version || ""}`
+                    : source === "camera"
+                        ? "Eksik"
+                        : "PIR modunda gerekmez",
+                fail: source === "camera" && !status.opencv_available,
+            },
+            {
+                label: "Video Path",
+                value: status.video_path || "N/A",
+                fail: false,
+            },
+            {
+                label: "Config",
+                value: status.config_path || "N/A",
+                fail: false,
+            },
+        ];
+
+        container.innerHTML = items.map((item) => createStatusItem(item.label, item.value, item.fail)).join("");
+    } catch (error) {
+        container.innerHTML = createStatusItem("Hata", error.message, true);
+    }
+}
+
+async function loadLogs() {
+    const logContent = document.getElementById("log-content");
+    const logContainer = document.getElementById("log-container");
+
+    if (!logContent) {
+        return;
+    }
+
+    try {
+        const data = await apiFetch("/api/logs?limit=180");
+        const logs = Array.isArray(data.logs) ? data.logs : [];
+
+        logContent.textContent = logs.length > 0 ? logs.join("\n") : "Log bulunamadı.";
+
+        if (logContainer) {
+            logContainer.scrollTop = logContainer.scrollHeight;
+        }
+    } catch (error) {
+        logContent.textContent = `Log okunamadı: ${error.message}`;
+    }
+}
+
+async function testVideo() {
+    const button = document.getElementById("test-video");
+
+    if (!button) {
+        return;
+    }
+
+    const originalText = button.textContent;
+    button.textContent = "Test ediliyor...";
+    button.disabled = true;
+
+    try {
+        const data = await apiFetch("/api/test-video", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+                path: readString("video-path", "videos/selamlama.mp4"),
+            }),
+        });
+
+        showStatus(data.message || "Video başlatıldı", "success");
+    } catch (error) {
+        showStatus(`Video testi başarısız: ${error.message}`, "error");
+    } finally {
+        window.setTimeout(() => {
+            button.textContent = originalText || "Test Video";
+            button.disabled = false;
+        }, 1500);
+    }
+}
+
+function createStatusItem(label, value, fail = false) {
+    const className = fail ? "status-card fail" : "status-card ok";
+
+    return `
+        <div class="${className}">
+            <span class="label">${escapeHtml(String(label))}</span>
+            <span class="value">${escapeHtml(String(value))}</span>
+        </div>
+    `;
+}
+
+function updateHero(config) {
+    setText("hero-source", String(getNested(config, "trigger.source", "pir")).toUpperCase());
+    setText("hero-video", getNested(config, "video.path", "videos/selamlama.mp4"));
+}
+
+function formatPirState(value) {
+    if (value === true) {
+        return "HIGH";
+    }
+
+    if (value === false) {
+        return "LOW";
+    }
+
+    if (value === "managed_by_application") {
+        return "Uygulama yönetiyor";
+    }
+
+    if (value === null || typeof value === "undefined") {
+        return "Bilinmiyor";
+    }
+
+    return String(value);
+}
+
+function getNested(object, path, fallback) {
+    const parts = path.split(".");
+    let value = object;
+
+    for (const key of parts) {
+        if (value && Object.prototype.hasOwnProperty.call(value, key)) {
+            value = value[key];
+        } else {
+            return fallback;
+        }
+    }
+
+    return value;
+}
+
+function setValue(id, value) {
+    const element = document.getElementById(id);
+
+    if (element) {
+        element.value = value;
+    }
+}
+
+function setText(id, value) {
+    const element = document.getElementById(id);
+
+    if (element) {
+        element.textContent = value;
+    }
+}
+
+function setChecked(id, value) {
+    const element = document.getElementById(id);
+
+    if (element) {
+        element.checked = Boolean(value);
+    }
+}
+
+function readString(id, fallback) {
+    const element = document.getElementById(id);
+
+    if (!element) {
+        return fallback;
+    }
+
+    const value = String(element.value || "").trim();
+    return value || fallback;
+}
+
+function readSelect(id, fallback, allowed) {
+    const value = readString(id, fallback).toLowerCase();
+
+    if (Array.isArray(allowed) && allowed.includes(value)) {
+        return value;
+    }
+
+    return fallback;
+}
+
+function readCameraIndex(id, fallback) {
+    const value = readString(id, String(fallback));
+
+    if (/^\d+$/.test(value)) {
+        return Number.parseInt(value, 10);
+    }
+
+    return value;
+}
+
+function readChecked(id, fallback) {
+    const element = document.getElementById(id);
+
+    if (!element) {
+        return fallback;
+    }
+
+    return Boolean(element.checked);
+}
+
+function normalizeNumeric(value) {
+    return String(value || "").trim().replace(",", ".");
+}
+
+function readInt(id, fallback, minimum, maximum) {
+    const element = document.getElementById(id);
+
+    if (!element) {
+        return fallback;
+    }
+
+    let value = Number.parseInt(normalizeNumeric(element.value), 10);
+
+    if (Number.isNaN(value)) {
+        value = fallback;
+    }
+
+    if (typeof minimum === "number" && value < minimum) {
+        value = minimum;
+    }
+
+    if (typeof maximum === "number" && value > maximum) {
+        value = maximum;
+    }
+
+    return value;
+}
+
+function readFloat(id, fallback, minimum, maximum) {
+    const element = document.getElementById(id);
+
+    if (!element) {
+        return fallback;
+    }
+
+    let value = Number.parseFloat(normalizeNumeric(element.value));
+
+    if (Number.isNaN(value)) {
+        value = fallback;
+    }
+
+    if (typeof minimum === "number" && value < minimum) {
+        value = minimum;
+    }
+
+    if (typeof maximum === "number" && value > maximum) {
+        value = maximum;
+    }
+
+    return value;
+}
+
+function escapeHtml(value) {
+    return value
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+}

admin/static/style.css

@@ -0,0 +1,658 @@
+:root {
+    --bg: #08111f;
+    --panel: rgba(15, 23, 42, 0.86);
+    --panel-strong: rgba(15, 23, 42, 0.96);
+    --card: rgba(255, 255, 255, 0.08);
+    --card-border: rgba(148, 163, 184, 0.18);
+    --text: #f8fafc;
+    --muted: #94a3b8;
+    --muted-2: #64748b;
+    --green: #22c55e;
+    --green-soft: rgba(34, 197, 94, 0.14);
+    --blue: #38bdf8;
+    --red: #fb7185;
+    --yellow: #fbbf24;
+    --input: rgba(2, 6, 23, 0.54);
+    --shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
+    --radius: 24px;
+    --sidebar: 290px;
+    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+html {
+    min-height: 100%;
+    background: var(--bg);
+}
+
+body {
+    min-height: 100vh;
+    margin: 0;
+    color: var(--text);
+    background:
+        radial-gradient(circle at top left, rgba(34, 197, 94, 0.22), transparent 30rem),
+        radial-gradient(circle at top right, rgba(56, 189, 248, 0.18), transparent 28rem),
+        linear-gradient(135deg, #020617 0%, #0f172a 50%, #111827 100%);
+}
+
+button, input, select {
+    font: inherit;
+}
+
+.shell {
+    width: min(1440px, 100%);
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: var(--sidebar) minmax(0, 1fr);
+    min-height: 100vh;
+}
+
+.sidebar {
+    position: sticky;
+    top: 0;
+    height: 100vh;
+    padding: 28px 20px;
+    border-right: 1px solid rgba(148, 163, 184, 0.16);
+    background: rgba(2, 6, 23, 0.42);
+    backdrop-filter: blur(20px);
+}
+
+.brand {
+    display: flex;
+    gap: 14px;
+    align-items: center;
+    color: var(--text);
+    text-decoration: none;
+    margin-bottom: 30px;
+}
+
+.brand-mark {
+    width: 48px;
+    height: 48px;
+    display: grid;
+    place-items: center;
+    border-radius: 16px;
+    background: linear-gradient(135deg, var(--green), var(--blue));
+    color: #02130a;
+    font-weight: 950;
+    font-size: 28px;
+    box-shadow: 0 16px 40px rgba(34, 197, 94, 0.25);
+}
+
+.brand strong,
+.brand small {
+    display: block;
+}
+
+.brand small {
+    color: var(--muted);
+    margin-top: 2px;
+}
+
+.nav-tabs {
+    display: grid;
+    gap: 10px;
+}
+
+.tab {
+    width: 100%;
+    border: 1px solid transparent;
+    border-radius: 18px;
+    padding: 14px 16px;
+    background: transparent;
+    color: var(--muted);
+    text-align: left;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    transition: 160ms ease;
+}
+
+.tab:hover,
+.tab.active {
+    color: var(--text);
+    background: rgba(255, 255, 255, 0.08);
+    border-color: rgba(255, 255, 255, 0.10);
+}
+
+.tab.active {
+    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.25);
+}
+
+.sidebar-card {
+    margin-top: 28px;
+    padding: 16px;
+    border-radius: 20px;
+    background: var(--green-soft);
+    border: 1px solid rgba(34, 197, 94, 0.28);
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+}
+
+.sidebar-card strong,
+.sidebar-card small {
+    display: block;
+}
+
+.sidebar-card small {
+    color: #bbf7d0;
+    margin-top: 4px;
+}
+
+.pulse {
+    width: 12px;
+    height: 12px;
+    border-radius: 99px;
+    background: var(--green);
+    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
+    animation: pulse 1.6s infinite;
+    margin-top: 4px;
+}
+
+.main {
+    padding: 28px;
+    min-width: 0;
+}
+
+.hero {
+    min-height: 210px;
+    border-radius: 32px;
+    padding: clamp(22px, 4vw, 42px);
+    background:
+        linear-gradient(135deg, rgba(34, 197, 94, 0.24), rgba(56, 189, 248, 0.08)),
+        rgba(15, 23, 42, 0.72);
+    border: 1px solid rgba(148, 163, 184, 0.18);
+    box-shadow: var(--shadow);
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 24px;
+    overflow: hidden;
+    position: relative;
+}
+
+.hero::after {
+    content: "";
+    position: absolute;
+    right: -90px;
+    top: -120px;
+    width: 360px;
+    height: 360px;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(34, 197, 94, 0.20), transparent 70%);
+}
+
+.eyebrow {
+    color: #86efac;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    font-size: 12px;
+    font-weight: 800;
+    margin: 0 0 12px;
+}
+
+h1, h2, h3, p {
+    margin-top: 0;
+}
+
+h1 {
+    font-size: clamp(34px, 6vw, 64px);
+    line-height: 0.95;
+    letter-spacing: -0.06em;
+    margin-bottom: 16px;
+}
+
+.hero-text {
+    max-width: 680px;
+    color: #dbeafe;
+    font-size: 18px;
+    margin-bottom: 0;
+}
+
+.hero-status {
+    position: relative;
+    z-index: 1;
+    min-width: 230px;
+    padding: 20px;
+    border-radius: 22px;
+    background: rgba(2, 6, 23, 0.42);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+.hero-status span {
+    display: block;
+    color: var(--green);
+    font-size: 34px;
+    font-weight: 900;
+}
+
+.hero-status small {
+    color: var(--muted);
+    overflow-wrap: anywhere;
+}
+
+.tab-content {
+    display: none;
+    margin-top: 28px;
+}
+
+.tab-content.active {
+    display: block;
+}
+
+.section-title {
+    display: flex;
+    justify-content: space-between;
+    gap: 18px;
+    align-items: center;
+    margin-bottom: 18px;
+}
+
+.section-title h2 {
+    font-size: clamp(28px, 4vw, 42px);
+    letter-spacing: -0.04em;
+    margin-bottom: 6px;
+}
+
+.section-title p {
+    color: var(--muted);
+    margin-bottom: 0;
+}
+
+.form-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 18px;
+}
+
+.card {
+    padding: 22px;
+    border-radius: var(--radius);
+    background: var(--panel);
+    border: 1px solid var(--card-border);
+    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.22);
+}
+
+.card.wide {
+    grid-column: 1 / -1;
+}
+
+.card-head {
+    display: flex;
+    gap: 14px;
+    align-items: flex-start;
+    margin-bottom: 18px;
+}
+
+.icon {
+    width: 44px;
+    height: 44px;
+    display: grid;
+    place-items: center;
+    border-radius: 16px;
+    background: rgba(255, 255, 255, 0.08);
+    flex: 0 0 auto;
+}
+
+.card h3 {
+    margin-bottom: 4px;
+    letter-spacing: -0.02em;
+}
+
+.card p,
+.hint {
+    color: var(--muted);
+    margin: 0;
+}
+
+.hint {
+    margin-top: 14px;
+    font-size: 13px;
+    line-height: 1.5;
+    padding: 12px;
+    border-radius: 14px;
+    background: rgba(34, 197, 94, 0.08);
+    border: 1px solid rgba(34, 197, 94, 0.14);
+}
+
+.fields {
+    display: grid;
+    gap: 14px;
+}
+
+.fields.two {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.fields.three {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.field {
+    display: grid;
+    gap: 8px;
+    color: #dbeafe;
+    font-size: 14px;
+    font-weight: 700;
+    margin-bottom: 14px;
+}
+
+.field span {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+}
+
+.field b {
+    color: var(--green);
+    font-variant-numeric: tabular-nums;
+}
+
+input,
+select {
+    width: 100%;
+    min-height: 48px;
+    border: 1px solid rgba(148, 163, 184, 0.20);
+    border-radius: 16px;
+    background: var(--input);
+    color: var(--text);
+    padding: 12px 14px;
+    outline: none;
+    transition: 140ms ease;
+}
+
+select {
+    appearance: none;
+    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
+    background-position: calc(100% - 18px) 20px, calc(100% - 12px) 20px;
+    background-size: 6px 6px, 6px 6px;
+    background-repeat: no-repeat;
+    padding-right: 38px;
+}
+
+input:focus,
+select:focus {
+    border-color: rgba(34, 197, 94, 0.70);
+    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
+}
+
+input[type="range"] {
+    padding: 0;
+    min-height: 38px;
+    accent-color: var(--green);
+}
+
+.switch-row {
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+
+.switch {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    min-height: 42px;
+    color: #e2e8f0;
+    cursor: pointer;
+    user-select: none;
+}
+
+.switch input {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.switch span {
+    width: 48px;
+    height: 28px;
+    border-radius: 99px;
+    background: rgba(148, 163, 184, 0.22);
+    border: 1px solid rgba(148, 163, 184, 0.22);
+    position: relative;
+    transition: 160ms ease;
+}
+
+.switch span::after {
+    content: "";
+    position: absolute;
+    width: 22px;
+    height: 22px;
+    top: 2px;
+    left: 2px;
+    border-radius: 50%;
+    background: #f8fafc;
+    transition: 160ms ease;
+}
+
+.switch input:checked + span {
+    background: var(--green);
+}
+
+.switch input:checked + span::after {
+    transform: translateX(20px);
+}
+
+.video-switch {
+    margin-top: 30px;
+}
+
+.btn {
+    border: 0;
+    border-radius: 16px;
+    min-height: 48px;
+    padding: 0 18px;
+    font-weight: 850;
+    cursor: pointer;
+    color: var(--text);
+    background: rgba(255, 255, 255, 0.10);
+    transition: 160ms ease;
+}
+
+.btn:hover {
+    transform: translateY(-1px);
+    filter: brightness(1.08);
+}
+
+.btn.primary {
+    background: linear-gradient(135deg, var(--green), #14b8a6);
+    color: #03140b;
+}
+
+.btn.secondary {
+    background: rgba(56, 189, 248, 0.14);
+    color: #dff8ff;
+    border: 1px solid rgba(56, 189, 248, 0.28);
+}
+
+.btn.ghost {
+    background: rgba(255, 255, 255, 0.07);
+    border: 1px solid rgba(255, 255, 255, 0.10);
+}
+
+.btn.full {
+    width: 100%;
+}
+
+.save-bar {
+    grid-column: 1 / -1;
+    position: sticky;
+    bottom: 16px;
+    z-index: 5;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 14px;
+    padding: 14px;
+    border-radius: 22px;
+    background: rgba(2, 6, 23, 0.82);
+    border: 1px solid rgba(148, 163, 184, 0.20);
+    backdrop-filter: blur(18px);
+    box-shadow: var(--shadow);
+}
+
+.status-msg {
+    color: var(--muted);
+    font-weight: 700;
+}
+
+.status-msg.success {
+    color: #86efac;
+}
+
+.status-msg.error {
+    color: #fecdd3;
+}
+
+.status-msg.info {
+    color: #bae6fd;
+}
+
+.status-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 16px;
+}
+
+.status-card {
+    padding: 18px;
+    border-radius: 20px;
+    background: var(--panel);
+    border: 1px solid var(--card-border);
+}
+
+.status-card .label {
+    color: var(--muted);
+    font-size: 13px;
+    font-weight: 700;
+}
+
+.status-card .value {
+    margin-top: 8px;
+    display: block;
+    color: var(--text);
+    font-size: 18px;
+    font-weight: 850;
+    overflow-wrap: anywhere;
+}
+
+.status-card.ok {
+    border-color: rgba(34, 197, 94, 0.28);
+}
+
+.status-card.fail {
+    border-color: rgba(251, 113, 133, 0.35);
+}
+
+.status-card.fail .value {
+    color: #fecdd3;
+}
+
+.log-panel {
+    border-radius: 24px;
+    border: 1px solid var(--card-border);
+    background: #020617;
+    overflow: auto;
+    max-height: 70vh;
+    box-shadow: var(--shadow);
+}
+
+#log-content {
+    margin: 0;
+    padding: 20px;
+    color: #bbf7d0;
+    font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+    white-space: pre-wrap;
+}
+
+@keyframes pulse {
+    70% {
+        box-shadow: 0 0 0 14px rgba(34, 197, 94, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
+    }
+}
+
+@media (max-width: 980px) {
+    .shell {
+        display: block;
+    }
+
+    .sidebar {
+        position: static;
+        height: auto;
+        padding: 16px;
+        border-right: 0;
+        border-bottom: 1px solid rgba(148, 163, 184, 0.16);
+    }
+
+    .nav-tabs {
+        display: flex;
+        overflow-x: auto;
+        padding-bottom: 4px;
+    }
+
+    .tab {
+        width: auto;
+        min-width: 126px;
+        justify-content: center;
+        white-space: nowrap;
+    }
+
+    .sidebar-card {
+        display: none;
+    }
+
+    .main {
+        padding: 16px;
+    }
+
+    .hero {
+        min-height: auto;
+        display: block;
+    }
+
+    .hero-status {
+        margin-top: 18px;
+        min-width: 0;
+    }
+
+    .form-grid,
+    .status-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 620px) {
+    .fields.two,
+    .fields.three {
+        grid-template-columns: 1fr;
+    }
+
+    .card,
+    .hero {
+        border-radius: 22px;
+    }
+
+    .save-bar {
+        left: 12px;
+        right: 12px;
+        display: grid;
+    }
+
+    .save-bar .btn {
+        width: 100%;
+    }
+
+    h1 {
+        font-size: 38px;
+    }
+}

admin/templates/index.html

@@ -0,0 +1,267 @@
+<!doctype html>
+<html lang="tr">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+    <meta name="theme-color" content="#0f172a">
+    <title>modInteractive Admin</title>
+    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='16' fill='%230f172a'/%3E%3Cpath d='M16 42V22l16 10 16-10v20' fill='none' stroke='%2322c55e' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}?v=20260627">
+</head>
+<body>
+    <div class="shell">
+        <aside class="sidebar">
+            <a class="brand" href="/">
+                <span class="brand-mark">m</span>
+                <span>
+                    <strong>modInteractive</strong>
+                    <small>Pi5 Kiosk Control</small>
+                </span>
+            </a>
+
+            <nav class="nav-tabs" aria-label="Admin tabs">
+                <button class="tab active" type="button" data-tab="config">
+                    <span>⚙️</span> Ayarlar
+                </button>
+                <button class="tab" type="button" data-tab="status">
+                    <span>📡</span> Durum
+                </button>
+                <button class="tab" type="button" data-tab="logs">
+                    <span>🧾</span> Loglar
+                </button>
+            </nav>
+
+            <div class="sidebar-card">
+                <span class="pulse"></span>
+                <div>
+                    <strong>PIR-first mode</strong>
+                    <small>GPIO hareket algılayınca video başlar.</small>
+                </div>
+            </div>
+        </aside>
+
+        <main class="main">
+            <header class="hero">
+                <div>
+                    <p class="eyebrow">Cafeler • Mağazalar • Kiosk ekranlar</p>
+                    <h1>Motion Triggered HDMI Video Display</h1>
+                    <p class="hero-text">PIR sensör veya kamera ile Raspberry Pi 5 üzerinde tam ekran video tetikleme paneli.</p>
+                </div>
+                <div class="hero-status">
+                    <span id="hero-source">PIR</span>
+                    <small id="hero-video">videos/selamlama.mp4</small>
+                </div>
+            </header>
+
+            <section id="config" class="tab-content active">
+                <div class="section-title">
+                    <div>
+                        <h2>Ayarlar</h2>
+                        <p>PIR, kamera, video ve bekleme davranışlarını buradan yönet.</p>
+                    </div>
+                    <button type="button" class="btn ghost" id="reload-config">Yenile</button>
+                </div>
+
+                <form id="config-form" class="form-grid">
+                    <article class="card wide">
+                        <div class="card-head">
+                            <span class="icon">🎛️</span>
+                            <div>
+                                <h3>Tetik Kaynağı</h3>
+                                <p>Varsayılan kullanım PIR sensör, kamera opsiyonel.</p>
+                            </div>
+                        </div>
+
+                        <label class="field">
+                            <span>Source</span>
+                            <select name="trigger.source" id="trigger-source">
+                                <option value="pir">PIR GPIO sensor</option>
+                                <option value="camera">Camera motion detection</option>
+                            </select>
+                        </label>
+                    </article>
+
+                    <article class="card">
+                        <div class="card-head">
+                            <span class="icon">📡</span>
+                            <div>
+                                <h3>PIR Sensor</h3>
+                                <p>GPIO pin ve sinyal davranışı.</p>
+                            </div>
+                        </div>
+
+                        <div class="fields two">
+                            <label class="field">
+                                <span>BCM GPIO Pin</span>
+                                <input type="number" name="pir.gpio_pin" id="pir-gpio-pin" min="0" max="27" step="1" inputmode="numeric">
+                            </label>
+
+                            <label class="field">
+                                <span>Bounce Time ms</span>
+                                <input type="number" name="pir.bounce_time_ms" id="pir-bounce-time" min="0" max="5000" step="50" inputmode="numeric">
+                            </label>
+
+                            <label class="field">
+                                <span>Warmup Seconds</span>
+                                <input type="number" name="pir.settle_seconds" id="pir-settle-seconds" min="0" max="120" step="1" inputmode="numeric">
+                            </label>
+
+                            <label class="field">
+                                <span>Poll Interval Seconds</span>
+                                <input type="number" name="pir.poll_interval" id="pir-poll-interval" min="0.01" max="5" step="0.01" inputmode="decimal">
+                            </label>
+                        </div>
+
+                        <div class="switch-row">
+                            <label class="switch">
+                                <input type="checkbox" name="pir.active_high" id="pir-active-high">
+                                <span></span>
+                                Active high
+                            </label>
+
+                            <label class="switch">
+                                <input type="checkbox" name="pir.pull_up" id="pir-pull-up">
+                                <span></span>
+                                Internal pull-up
+                            </label>
+                        </div>
+
+                        <div class="hint">
+                            SR602 için genelde Active high açık, Internal pull-up kapalı kalır.
+                        </div>
+                    </article>
+
+                    <article class="card">
+                        <div class="card-head">
+                            <span class="icon">🎬</span>
+                            <div>
+                                <h3>Video</h3>
+                                <p>HDMI ekrana basılacak dosya.</p>
+                            </div>
+                        </div>
+
+                        <label class="field">
+                            <span>Video Path</span>
+                            <input type="text" name="video.path" id="video-path" placeholder="videos/selamlama.mp4" autocomplete="off">
+                        </label>
+
+                        <div class="fields two">
+                            <label class="field">
+                                <span>Volume</span>
+                                <input type="number" name="video.volume" id="video-volume" min="0" max="100" step="1" inputmode="numeric">
+                            </label>
+
+                            <label class="switch video-switch">
+                                <input type="checkbox" name="video.fullscreen" id="video-fullscreen">
+                                <span></span>
+                                Fullscreen playback
+                            </label>
+                        </div>
+
+                        <button type="button" class="btn secondary full" id="test-video">Test Video</button>
+                    </article>
+
+                    <article class="card">
+                        <div class="card-head">
+                            <span class="icon">🧠</span>
+                            <div>
+                                <h3>Algılama</h3>
+                                <p>PIR için cooldown, kamera için hareket eşiği.</p>
+                            </div>
+                        </div>
+
+                        <label class="field range-field">
+                            <span>Motion Sensitivity <b id="motion-sensitivity-value">-</b></span>
+                            <input type="range" name="detection.motion_sensitivity" id="motion-sensitivity" min="1" max="100000" step="1">
+                        </label>
+
+                        <div class="fields two">
+                            <label class="field">
+                                <span>Minimum Motion Area</span>
+                                <input type="number" name="detection.min_motion_area" id="min-motion-area" min="1" max="100000" step="1" inputmode="numeric">
+                            </label>
+
+                            <label class="field">
+                                <span>Cooldown Seconds</span>
+                                <input type="number" name="detection.cooldown_seconds" id="cooldown-seconds" min="0" max="600" step="1" inputmode="numeric">
+                            </label>
+
+                            <label class="field">
+                                <span>Frame Skip</span>
+                                <input type="number" name="detection.frame_skip" id="frame-skip" min="1" max="30" step="1" inputmode="numeric">
+                            </label>
+                        </div>
+                    </article>
+
+                    <article class="card">
+                        <div class="card-head">
+                            <span class="icon">📷</span>
+                            <div>
+                                <h3>Kamera</h3>
+                                <p>Kamera moduna geçersen kullanılır.</p>
+                            </div>
+                        </div>
+
+                        <label class="field">
+                            <span>Camera Device Index</span>
+                            <input type="text" name="camera.index" id="camera-index" placeholder="0" autocomplete="off">
+                        </label>
+
+                        <div class="fields three">
+                            <label class="field">
+                                <span>Width</span>
+                                <input type="number" name="camera.width" id="camera-width" min="160" max="3840" step="1" inputmode="numeric">
+                            </label>
+
+                            <label class="field">
+                                <span>Height</span>
+                                <input type="number" name="camera.height" id="camera-height" min="120" max="2160" step="1" inputmode="numeric">
+                            </label>
+
+                            <label class="field">
+                                <span>FPS</span>
+                                <input type="number" name="camera.fps" id="camera-fps" min="1" max="60" step="1" inputmode="numeric">
+                            </label>
+                        </div>
+                    </article>
+
+                    <div class="save-bar">
+                        <div id="save-status" class="status-msg" role="status" aria-live="polite">Hazır</div>
+                        <button type="submit" class="btn primary">Ayarları Kaydet</button>
+                    </div>
+                </form>
+            </section>
+
+            <section id="status" class="tab-content">
+                <div class="section-title">
+                    <div>
+                        <h2>Sistem Durumu</h2>
+                        <p>Kamera/PIR, video player, GPIO ve dosya durumu.</p>
+                    </div>
+                    <button type="button" class="btn ghost" id="refresh-status">Durumu Yenile</button>
+                </div>
+
+                <div id="status-content" class="status-grid">
+                    <div class="status-card loading">Yükleniyor...</div>
+                </div>
+            </section>
+
+            <section id="logs" class="tab-content">
+                <div class="section-title">
+                    <div>
+                        <h2>Loglar</h2>
+                        <p>Son uygulama hareketleri ve hatalar.</p>
+                    </div>
+                    <button type="button" class="btn ghost" id="refresh-logs">Logları Yenile</button>
+                </div>
+
+                <div id="log-container" class="log-panel">
+                    <pre id="log-content">Loading logs...</pre>
+                </div>
+            </section>
+        </main>
+    </div>
+
+    <script src="{{ url_for('static', filename='app.js') }}?v=20260627"></script>
+</body>
+</html>

apply_modern_admin_patch.sh

@@ -0,0 +1,26 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+SRC_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+TARGETS=("/opt/modInteractive" "$HOME/modInteractive")
+
+sudo systemctl stop modinteractive 2>/dev/null || true
+pkill mpv 2>/dev/null || true
+rm -f /tmp/modinteractive-mpv.sock
+
+for target in "${TARGETS[@]}"; do
+  if [[ -d "$target" ]]; then
+    mkdir -p "$target/admin/templates" "$target/admin/static"
+    cp "$SRC_DIR/admin/templates/index.html" "$target/admin/templates/index.html"
+    cp "$SRC_DIR/admin/static/app.js" "$target/admin/static/app.js"
+    cp "$SRC_DIR/admin/static/style.css" "$target/admin/static/style.css"
+    cp "$SRC_DIR/admin/server.py" "$target/admin/server.py"
+    echo "patched $target"
+  fi
+done
+
+python3 -m py_compile /opt/modInteractive/admin/server.py
+
+echo "OK: modern admin patch applied"
+echo "Start manually: cd /opt/modInteractive && /opt/modInteractive/venv/bin/python main.py --source pir"
+echo "Or service: sudo systemctl restart modinteractive"