Initial commit: CloudOps infrastructure platform

platform/app.py

@@ -0,0 +1,235 @@
+from flask import Flask, render_template, request, redirect, url_for, session, jsonify
+import os
+import subprocess
+import threading
+import uuid
+import time
+from config import MAIN_SERVER_IP, VM_HOST, VM_PORT, VM_KEY, VM_USER, RUNNING_ON_MAIN_SERVER
+from modules.auth import login_required
+from modules.backups import get_containers, get_local_backups, get_vm_backups
+from modules.commands import run_command, run_ssh_to_vm
+
+app = Flask(__name__)
+app.secret_key = 'navitrends-secret-key-2025'
+
+restore_jobs = {}
+
+
+def _stream_restore(job_id, cmd):
+    restore_jobs[job_id] = {'status': 'running', 'log': [], 'started': time.time()}
+    try:
+        proc = subprocess.Popen(
+            cmd, shell=True,
+            stdout=subprocess.PIPE, stderr=subprocess.STDOUT,
+            text=True, bufsize=1
+        )
+        for line in proc.stdout:
+            restore_jobs[job_id]['log'].append(line.rstrip())
+        proc.wait()
+        restore_jobs[job_id]['status'] = 'done' if proc.returncode == 0 else 'error'
+        restore_jobs[job_id]['returncode'] = proc.returncode
+    except Exception as e:
+        restore_jobs[job_id]['log'].append(f"ERROR: {e}")
+        restore_jobs[job_id]['status'] = 'error'
+
+
+@app.route('/')
+@login_required
+def dashboard():
+    containers = get_containers()
+    running_count = sum(1 for c in containers if 'Up' in c.get('status', ''))
+    backups = get_local_backups()
+    vm_backups = get_vm_backups()
+    return render_template('dashboard.html',
+                           containers=containers,
+                           running_count=running_count,
+                           backups=backups,
+                           vm_backups=vm_backups,
+                           main_server=MAIN_SERVER_IP)
+
+
+@app.route('/restore/start', methods=['POST'])
+@login_required
+def restore_start():
+    data = request.get_json()
+    if not data:
+        return jsonify({'error': 'No JSON body'}), 400
+
+    backup_source = data.get('backup_source', 'local')
+    backup_file   = data.get('backup_file', '').strip()
+    target        = data.get('target', 'local')
+    remote_ip     = data.get('remote_ip', '').strip()
+    remote_port   = str(data.get('remote_port', '22')).strip() or '22'
+    remote_user   = data.get('remote_user', 'root').strip() or 'root'
+    auth_method   = data.get('auth_method', 'key')
+    ssh_key_path  = data.get('ssh_key_path', VM_KEY).strip()
+    ssh_password  = data.get('ssh_password', '').strip()
+
+    if not backup_file:
+        return jsonify({'error': 'No backup file specified'}), 400
+
+    # ── Resolve backup archive path on THIS server ───────────────────────────
+    if backup_source == 'local':
+        # Local path depends on which server we're running on
+        if RUNNING_ON_MAIN_SERVER:
+            backup_path = f"/root/backups/{backup_file}"
+        else:
+            backup_path = f"/backups/main-server/{backup_file}"
+
+        if not os.path.exists(backup_path):
+            return jsonify({'error': f'Backup not found: {backup_path}'}), 400
+
+    else:
+        # "Other server" backup source — pull it to /tmp/ first
+        backup_path = f"/tmp/{backup_file}"
+        if not os.path.exists(backup_path):
+            if RUNNING_ON_MAIN_SERVER:
+                # Original logic: pull from VM via SSH tunnel (port 2223)
+                pull_cmd = (
+                    f"scp -i {VM_KEY} -P {VM_PORT} "
+                    f"-o StrictHostKeyChecking=no -o ConnectTimeout=15 "
+                    f"{VM_USER}@{VM_HOST}:/backups/main-server/{backup_file} "
+                    f"{backup_path}"
+                )
+            else:
+                # On VM: pull from main server's /root/backups/ via port 22
+                pull_cmd = (
+                    f"scp -i {VM_KEY} -P 22 "
+                    f"-o StrictHostKeyChecking=no -o ConnectTimeout=15 "
+                    f"{VM_USER}@{MAIN_SERVER_IP}:/root/backups/{backup_file} "
+                    f"{backup_path}"
+                )
+
+            result = subprocess.run(pull_cmd, shell=True, capture_output=True, text=True)
+            if result.returncode != 0:
+                return jsonify({'error': f'Failed to pull backup: {result.stderr}'}), 500
+
+    restore_script_local = os.path.join(
+        os.path.dirname(os.path.abspath(__file__)), 'restore-myapps.sh'
+    )
+    if not os.path.exists(restore_script_local):
+        return jsonify({'error': f'restore-myapps.sh not found at {restore_script_local}'}), 500
+
+    # ── Build command ────────────────────────────────────────────────────────
+    if target == 'local':
+        session_dir = f"/tmp/restore-session-{uuid.uuid4().hex[:8]}"
+        cmd = (
+            f"set -e && "
+            f"mkdir -p {session_dir} && "
+            f"echo '📂 Extracting backup locally...' && "
+            f"tar -xzf {backup_path} -C {session_dir} --strip-components=1 && "
+            f"cp {restore_script_local} {session_dir}/restore-myapps.sh && "
+            f"chmod +x {session_dir}/restore-myapps.sh && "
+            f"cd {session_dir} && "
+            f"bash restore-myapps.sh ; "
+            f"EXIT=$? ; rm -rf {session_dir} ; exit $EXIT"
+        )
+
+    else:
+        if not remote_ip:
+            return jsonify({'error': 'remote_ip is required for remote restore'}), 400
+
+        base_ssh_opts = f"-o StrictHostKeyChecking=no -o ConnectTimeout=15"
+
+        if auth_method == 'key':
+            if not ssh_key_path:
+                return jsonify({'error': 'ssh_key_path is required'}), 400
+            ssh_prefix = f"ssh -p {remote_port} -i {ssh_key_path} {base_ssh_opts}"
+            scp_prefix = f"scp -P {remote_port} -i {ssh_key_path} {base_ssh_opts}"
+        else:
+            if not ssh_password:
+                return jsonify({'error': 'ssh_password is required'}), 400
+            ssh_prefix = f"sshpass -p '{ssh_password}' ssh -p {remote_port} {base_ssh_opts}"
+            scp_prefix = f"sshpass -p '{ssh_password}' scp -P {remote_port} {base_ssh_opts}"
+
+        remote_dest = f"/backups/restore-session-{uuid.uuid4().hex[:8]}"
+
+        cmd = (
+            f"echo '🔗 Connecting to {remote_user}@{remote_ip}:{remote_port}...' && "
+            f"{ssh_prefix} {remote_user}@{remote_ip} 'mkdir -p {remote_dest}' && "
+            f"echo '✅ Connected.' && "
+
+            f"echo '📤 Copying backup archive to {remote_ip}:{remote_port}...' && "
+            f"{scp_prefix} {backup_path} {remote_user}@{remote_ip}:{remote_dest}/{backup_file} && "
+
+            f"echo '📤 Copying restore script...' && "
+            f"{scp_prefix} {restore_script_local} {remote_user}@{remote_ip}:{remote_dest}/restore-myapps.sh && "
+
+            f"echo '🚀 Running restore on {remote_ip}:{remote_port}...' && "
+            f"{ssh_prefix} {remote_user}@{remote_ip} "
+            f"'set -e && "
+            f"cd {remote_dest} && "
+            f"echo \"📂 Extracting backup...\" && "
+            f"tar -xzf {backup_file} --strip-components=1 && "
+            f"chmod +x restore-myapps.sh && "
+            f"bash restore-myapps.sh' ; "
+
+            f"EXIT=$? ; "
+            f"{ssh_prefix} {remote_user}@{remote_ip} 'rm -rf {remote_dest}' 2>/dev/null ; "
+            f"exit $EXIT"
+        )
+
+    job_id = str(uuid.uuid4())
+    t = threading.Thread(target=_stream_restore, args=(job_id, cmd), daemon=True)
+    t.start()
+
+    return jsonify({'job_id': job_id, 'status': 'started'})
+
+
+@app.route('/restore/status/<job_id>')
+@login_required
+def restore_status_poll(job_id):
+    job = restore_jobs.get(job_id)
+    if not job:
+        return jsonify({'error': 'Job not found'}), 404
+    return jsonify({
+        'status':  job['status'],
+        'log':     job['log'],
+        'elapsed': round(time.time() - job.get('started', time.time()))
+    })
+
+
+@app.route('/api/backups')
+@login_required
+def api_backups():
+    return jsonify({'local': get_local_backups(), 'vm': get_vm_backups()})
+
+
+@app.route('/api/containers')
+@login_required
+def api_containers():
+    containers = get_containers()
+    return jsonify({
+        'containers': containers,
+        'running': sum(1 for c in containers if 'Up' in c.get('status', ''))
+    })
+
+
+@app.route('/server/status')
+@login_required
+def server_status():
+    stdout, stderr = run_command("uptime")
+    if stderr or not stdout:
+        return jsonify({'status': 'offline', 'error': stderr or 'Failed'})
+    return jsonify({'status': 'online', 'info': stdout.strip()})
+
+
+@app.route('/login', methods=['GET', 'POST'])
+def login():
+    error = ''
+    if request.method == 'POST':
+        if request.form.get('password') == 'admin123':
+            session['logged_in'] = True
+            return redirect(url_for('dashboard'))
+        error = 'Wrong password'
+    return render_template('login.html', error=error)
+
+
+@app.route('/logout')
+def logout():
+    session.pop('logged_in', None)
+    return redirect(url_for('login'))
+
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=5000, debug=False)

platform/modules/__init__.py

@@ -0,0 +1 @@
+# Modules package

platform/modules/auth.py

@@ -0,0 +1,10 @@
+from functools import wraps
+from flask import session, redirect, url_for
+
+def login_required(f):
+    @wraps(f)
+    def decorated_function(*args, **kwargs):
+        if not session.get('logged_in'):
+            return redirect(url_for('login'))
+        return f(*args, **kwargs)
+    return decorated_function

platform/modules/backups.py

@@ -0,0 +1,105 @@
+import os
+import glob
+import subprocess
+from config import RUNNING_ON_MAIN_SERVER, VM_HOST, VM_PORT, VM_KEY, VM_USER, MAIN_SERVER_IP
+
+
+def run_command(cmd):
+    try:
+        result = subprocess.run(cmd, shell=True, capture_output=True, text=True, timeout=30)
+        return result.stdout, result.stderr
+    except Exception as e:
+        return '', str(e)
+
+
+def get_local_backups():
+    """
+    On main server → /root/backups/  (backups of the main server, stored locally)
+    On VM          → /backups/main-server/  (backups of the main server, stored on VM)
+    """
+    if RUNNING_ON_MAIN_SERVER:
+        path = "/root/backups/myapps-backup-*.tar.gz"
+    else:
+        path = "/backups/main-server/myapps-backup-*.tar.gz"
+
+    stdout, _ = run_command(f"ls -t {path} 2>/dev/null | head -20")
+    files = []
+    if stdout:
+        for line in stdout.strip().split('\n'):
+            line = line.strip()
+            if line:
+                files.append(os.path.basename(line))
+    return files
+
+
+def get_vm_backups():
+    """
+    On main server → SSH into VM (via tunnel port 2223) to list /backups/main-server/
+    On VM          → SSH into main server (port 22) to list /root/backups/
+    """
+    backups = []
+
+    if RUNNING_ON_MAIN_SERVER:
+        # Original logic — unchanged
+        try:
+            cmd = (
+                f"ssh -i {VM_KEY} -p {VM_PORT} "
+                f"-o StrictHostKeyChecking=no -o ConnectTimeout=10 "
+                f"{VM_USER}@{VM_HOST} "
+                f"'ls -t /backups/main-server/myapps-backup-*.tar.gz 2>/dev/null | head -20'"
+            )
+            stdout, _ = run_command(cmd)
+            if stdout:
+                for line in stdout.strip().split('\n'):
+                    line = line.strip()
+                    if line and '.tar.gz' in line:
+                        backups.append(os.path.basename(line))
+        except Exception as e:
+            print(f"[backups] Error fetching VM backups: {e}")
+
+    else:
+        # Running on VM → SSH into main server to list its local backups
+        try:
+            cmd = (
+                f"ssh -i {VM_KEY} -p 22 "
+                f"-o StrictHostKeyChecking=no -o ConnectTimeout=10 "
+                f"{VM_USER}@{MAIN_SERVER_IP} "
+                f"'ls -t /root/backups/myapps-backup-*.tar.gz 2>/dev/null | head -20'"
+            )
+            stdout, _ = run_command(cmd)
+            if stdout:
+                for line in stdout.strip().split('\n'):
+                    line = line.strip()
+                    if line and '.tar.gz' in line:
+                        backups.append(os.path.basename(line))
+        except Exception as e:
+            print(f"[backups] Error fetching main server backups from VM: {e}")
+
+    return backups
+
+
+def get_containers():
+    """
+    On main server → local docker ps  (original, unchanged)
+    On VM          → SSH into main server to get its containers
+    """
+    if RUNNING_ON_MAIN_SERVER:
+        stdout, _ = run_command(
+            "docker ps -a --format '{{.Names}}|{{.Status}}' 2>/dev/null"
+        )
+    else:
+        cmd = (
+            f"ssh -i {VM_KEY} -p 22 "
+            f"-o StrictHostKeyChecking=no -o ConnectTimeout=10 "
+            f"{VM_USER}@{MAIN_SERVER_IP} "
+            f"\"docker ps -a --format '{{{{.Names}}}}|{{{{.Status}}}}' 2>/dev/null\""
+        )
+        stdout, _ = run_command(cmd)
+
+    containers = []
+    if stdout:
+        for line in stdout.strip().split('\n'):
+            if '|' in line:
+                name, status = line.split('|', 1)
+                containers.append({'name': name.strip(), 'status': status.strip()})
+    return containers

platform/modules/commands.py

@@ -0,0 +1,38 @@
+import subprocess
+from config import RUNNING_ON_MAIN_SERVER, MAIN_SERVER_IP
+
+def run_command(command):
+    """Run command on main server (directly or via SSH)"""
+    if RUNNING_ON_MAIN_SERVER:
+        try:
+            result = subprocess.run(command, shell=True, capture_output=True, text=True, timeout=30)
+            return result.stdout, result.stderr
+        except subprocess.TimeoutExpired:
+            return "", "Command timeout"
+        except Exception as e:
+            return "", str(e)
+    else:
+        ssh_cmd = [
+            "ssh",
+            "-o", "StrictHostKeyChecking=no",
+            "-o", "ConnectTimeout=10",
+            "-o", "BatchMode=yes",
+            f"root@{MAIN_SERVER_IP}",
+            command
+        ]
+        try:
+            result = subprocess.run(ssh_cmd, capture_output=True, text=True, timeout=30)
+            return result.stdout, result.stderr
+        except subprocess.TimeoutExpired:
+            return "", "Connection timeout"
+        except Exception as e:
+            return "", str(e)
+
+def run_ssh_to_vm(command):
+    """Run command on VM via reverse tunnel"""
+    from config import VM_PASSWORD
+    import os
+    
+    cmd = f"sshpass -p '{VM_PASSWORD}' ssh -p 2223 -o StrictHostKeyChecking=no -o ConnectTimeout=5 root@localhost '{command}'"
+    result = os.popen(cmd).read()
+    return result

platform/static/css/style.css

@@ -0,0 +1,645 @@
+/* Modern Design System */
+:root {
+    --primary: #2563eb;
+    --primary-dark: #1d4ed8;
+    --primary-light: #3b82f6;
+    --primary-soft: #eff6ff;
+    --secondary: #64748b;
+    --accent: #f59e0b;
+    --success: #10b981;
+    --warning: #f59e0b;
+    --danger: #ef4444;
+    --dark: #0f172a;
+    --gray-dark: #334155;
+    --gray: #64748b;
+    --gray-light: #e2e8f0;
+    --light: #f8fafc;
+    --white: #ffffff;
+    --sidebar-width: 280px;
+    --radius-sm: 8px;
+    --radius-md: 12px;
+    --radius-lg: 16px;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: #f1f5f9;
+    color: var(--dark);
+    line-height: 1.5;
+}
+
+.app {
+    display: flex;
+    min-height: 100vh;
+}
+
+/* Sidebar */
+.sidebar {
+    width: var(--sidebar-width);
+    background: var(--white);
+    position: fixed;
+    height: 100vh;
+    overflow-y: auto;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    border-right: 1px solid var(--gray-light);
+    z-index: 100;
+}
+
+.sidebar-header {
+    padding: 32px 24px;
+    border-bottom: 1px solid var(--gray-light);
+    margin-bottom: 24px;
+}
+
+.sidebar-header h2 {
+    font-size: 22px;
+    font-weight: 700;
+    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    margin-bottom: 6px;
+}
+
+.sidebar-header p {
+    font-size: 13px;
+    color: var(--gray);
+    font-weight: 500;
+}
+
+.nav-menu {
+    padding: 0 16px;
+}
+
+.nav-item {
+    padding: 12px 16px;
+    margin: 4px 0;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    color: var(--gray-dark);
+    font-weight: 500;
+    font-size: 14px;
+}
+
+.nav-item:hover {
+    background: var(--primary-soft);
+    color: var(--primary);
+}
+
+.nav-item.active {
+    background: var(--primary-soft);
+    color: var(--primary);
+    font-weight: 600;
+}
+
+.nav-icon {
+    width: 20px;
+    font-size: 16px;
+    text-align: center;
+}
+
+/* Main Content */
+.main-content {
+    flex: 1;
+    margin-left: var(--sidebar-width);
+    padding: 32px 40px;
+}
+
+/* Top Bar */
+.top-bar {
+    background: var(--white);
+    padding: 20px 28px;
+    border-radius: var(--radius-lg);
+    margin-bottom: 28px;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+    border: 1px solid var(--gray-light);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.top-bar h3 {
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--dark);
+}
+
+.server-status {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.status-indicator {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--gray);
+}
+
+.status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+}
+
+.status-dot.online {
+    background: var(--success);
+    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
+}
+
+.status-dot.offline {
+    background: var(--danger);
+    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
+}
+
+/* Buttons */
+.btn {
+    padding: 8px 18px;
+    border: none;
+    border-radius: var(--radius-md);
+    font-size: 13px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.btn-primary {
+    background: var(--primary);
+    color: white;
+}
+
+.btn-primary:hover {
+    background: var(--primary-dark);
+    transform: translateY(-1px);
+}
+
+.btn-danger {
+    background: var(--danger);
+    color: white;
+}
+
+.btn-danger:hover {
+    background: #dc2626;
+    transform: translateY(-1px);
+}
+
+.btn-secondary {
+    background: var(--gray-light);
+    color: var(--gray-dark);
+    border: 1px solid transparent;
+}
+
+.btn-secondary:hover {
+    background: var(--white);
+    border-color: var(--gray-light);
+}
+
+/* Cards */
+.card {
+    background: var(--white);
+    border-radius: var(--radius-lg);
+    padding: 24px 28px;
+    margin-bottom: 24px;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+    border: 1px solid var(--gray-light);
+    transition: all 0.2s;
+}
+
+.card:hover {
+    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
+}
+
+.card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    padding-bottom: 16px;
+    border-bottom: 2px solid var(--gray-light);
+}
+
+.card-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--dark);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+/* Container Cards */
+.containers-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 16px;
+}
+
+.container-card {
+    background: var(--light);
+    border-radius: var(--radius-md);
+    padding: 16px 20px;
+    transition: all 0.2s;
+    border: 1px solid var(--gray-light);
+}
+
+.container-card.running {
+    border-left: 4px solid var(--success);
+}
+
+.container-card.stopped {
+    border-left: 4px solid var(--danger);
+}
+
+.container-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
+    background: var(--white);
+}
+
+.container-name {
+    font-weight: 600;
+    font-size: 15px;
+    margin-bottom: 8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+}
+
+.container-name span {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.container-status {
+    font-size: 12px;
+    color: var(--gray);
+    margin-top: 6px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+/* Badges */
+.badge {
+    padding: 4px 12px;
+    border-radius: 20px;
+    font-size: 11px;
+    font-weight: 600;
+}
+
+.badge-running {
+    background: rgba(16, 185, 129, 0.1);
+    color: var(--success);
+}
+
+.badge-stopped {
+    background: rgba(239, 68, 68, 0.1);
+    color: var(--danger);
+}
+
+/* Stats Grid */
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 16px;
+}
+
+.stat-card {
+    text-align: center;
+    padding: 20px;
+    background: var(--light);
+    border-radius: var(--radius-md);
+    transition: all 0.2s;
+    border: 1px solid var(--gray-light);
+}
+
+.stat-card:hover {
+    background: var(--white);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
+}
+
+.stat-number {
+    font-size: 32px;
+    font-weight: 700;
+    color: var(--primary);
+    margin-bottom: 8px;
+}
+
+.stat-label {
+    font-size: 13px;
+    color: var(--gray);
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+}
+
+/* Two Column */
+.two-column {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 28px;
+}
+
+.two-column h3 {
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 12px;
+    color: var(--dark);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.two-column p {
+    font-size: 13px;
+    color: var(--gray);
+    margin-bottom: 16px;
+}
+
+/* Select */
+select {
+    padding: 10px 14px;
+    border: 1px solid var(--gray-light);
+    border-radius: var(--radius-md);
+    font-size: 13px;
+    font-weight: 500;
+    background: var(--white);
+    cursor: pointer;
+    width: 100%;
+    color: var(--dark);
+    margin-bottom: 16px;
+}
+
+select:hover {
+    border-color: var(--primary);
+}
+
+select:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+}
+
+/* Backup List */
+.backup-list {
+    max-height: 320px;
+    overflow-y: auto;
+}
+
+.backup-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 16px;
+    background: var(--light);
+    border-radius: var(--radius-md);
+    margin-bottom: 8px;
+    transition: all 0.2s;
+    border: 1px solid var(--gray-light);
+}
+
+.backup-item:hover {
+    background: var(--white);
+    border-color: var(--primary);
+    transform: translateX(4px);
+}
+
+.backup-date {
+    font-family: monospace;
+    font-size: 12px;
+    color: var(--dark);
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.backup-size {
+    font-size: 11px;
+    color: var(--gray);
+    font-weight: 500;
+    background: var(--gray-light);
+    padding: 2px 8px;
+    border-radius: 20px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+/* Restore Status */
+.restore-status {
+    margin-top: 24px;
+    padding: 14px 20px;
+    border-radius: var(--radius-md);
+    display: none;
+    font-size: 13px;
+    font-weight: 500;
+}
+
+.restore-status.success {
+    background: rgba(16, 185, 129, 0.08);
+    color: var(--success);
+    border-left: 3px solid var(--success);
+}
+
+.restore-status.error {
+    background: rgba(239, 68, 68, 0.08);
+    color: var(--danger);
+    border-left: 3px solid var(--danger);
+}
+
+.restore-status.warning {
+    background: rgba(245, 158, 11, 0.08);
+    color: var(--accent);
+    border-left: 3px solid var(--accent);
+}
+
+/* Footer */
+.footer {
+    text-align: center;
+    padding: 24px 0 0;
+    color: var(--gray);
+    font-size: 12px;
+    margin-top: 40px;
+    border-top: 1px solid var(--gray-light);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--gray-light);
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--primary);
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--primary-dark);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .sidebar {
+        transform: translateX(-100%);
+    }
+    .main-content {
+        margin-left: 0;
+        padding: 20px;
+    }
+    .two-column {
+        grid-template-columns: 1fr;
+    }
+    .containers-grid {
+        grid-template-columns: 1fr;
+    }
+    .top-bar {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 12px;
+    }
+}
+/* ─── Add these to your existing style.css ─────────────────────────────── */
+
+/* Restore form layout */
+.restore-form { display: flex; flex-direction: column; gap: 0; }
+
+.form-section {
+    border-bottom: 1px solid var(--border, #e5e7eb);
+    padding: 20px 0;
+}
+.form-section-title {
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: 0.07em;
+    text-transform: uppercase;
+    color: var(--gray, #6b7280);
+    margin-bottom: 14px;
+}
+
+/* Radio cards */
+.radio-group {
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+.radio-card {
+    cursor: pointer;
+    flex: 1;
+    min-width: 180px;
+}
+.radio-card input[type="radio"] { display: none; }
+.radio-body {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 14px 16px;
+    border: 2px solid var(--border, #e5e7eb);
+    border-radius: 12px;
+    background: var(--light, #f9fafb);
+    transition: border-color 0.15s, background 0.15s;
+}
+.radio-card input:checked + .radio-body {
+    border-color: var(--primary, #6366f1);
+    background: #eef2ff;
+}
+.radio-icon { font-size: 22px; }
+.radio-label { font-weight: 600; font-size: 14px; }
+.radio-desc  { font-size: 12px; color: var(--gray, #6b7280); }
+.radio-desc code { background: #e5e7eb; padding: 1px 5px; border-radius: 4px; font-size: 11px; }
+
+/* Small radio cards (auth method) */
+.radio-card.small .radio-body { padding: 10px 14px; gap: 8px; }
+.radio-card.small .radio-label { font-size: 13px; }
+
+/* Form controls */
+.form-group { margin-bottom: 14px; }
+.form-label {
+    display: block;
+    font-size: 13px;
+    font-weight: 500;
+    margin-bottom: 6px;
+    color: var(--dark, #111827);
+}
+.form-control {
+    width: 100%;
+    padding: 10px 14px;
+    border: 1px solid var(--border, #e5e7eb);
+    border-radius: 10px;
+    font-size: 14px;
+    background: #fff;
+    box-sizing: border-box;
+    transition: border-color 0.15s;
+}
+.form-control:focus {
+    outline: none;
+    border-color: var(--primary, #6366f1);
+}
+.form-row {
+    display: flex;
+    gap: 14px;
+}
+.form-row .form-group { flex: 1; }
+
+/* Buttons */
+.btn-lg { padding: 14px 28px; font-size: 15px; font-weight: 600; }
+.btn-sm { padding: 5px 12px; font-size: 12px; }
+
+/* Log console */
+.log-console {
+    background: #0f172a;
+    border-radius: 10px;
+    padding: 16px;
+    font-family: 'Courier New', monospace;
+    font-size: 12.5px;
+    line-height: 1.6;
+    max-height: 420px;
+    overflow-y: auto;
+    color: #e2e8f0;
+}
+.log-line { white-space: pre-wrap; word-break: break-all; }
+
+/* Backup list items */
+.backup-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 14px;
+    border-radius: 8px;
+    margin-bottom: 8px;
+    background: var(--light, #f9fafb);
+    gap: 10px;
+    flex-wrap: wrap;
+}
+.backup-date { font-size: 13px; font-family: monospace; word-break: break-all; }

platform/static/js/main.js

@@ -0,0 +1,216 @@
+// Navigation
+document.querySelectorAll('.nav-item').forEach(item => {
+    item.addEventListener('click', () => {
+        const page = item.dataset.page;
+        document.querySelectorAll('.nav-item').forEach(nav => nav.classList.remove('active'));
+        item.classList.add('active');
+        document.querySelectorAll('.page').forEach(p => p.style.display = 'none');
+        const pageElement = document.getElementById(page + '-page');
+        if (pageElement) pageElement.style.display = 'block';
+        const titles = {'dashboard': 'Dashboard Overview', 'restore': 'Restore Actions', 'backups': 'Backup Management', 'settings': 'Platform Settings'};
+        const titleElement = document.getElementById('page-title');
+        if (titleElement) titleElement.textContent = titles[page];
+    });
+});
+
+function checkServerStatus() {
+    fetch('/server/status')
+        .then(res => res.json())
+        .then(data => {
+            const statusText = document.getElementById('server-status-text');
+            const statusDot = document.getElementById('server-status-dot');
+            if (statusText && statusDot) {
+                if (data.status === 'online') {
+                    statusText.innerHTML = data.info;
+                    statusDot.className = 'status-dot online';
+                } else {
+                    statusText.innerHTML = 'Offline';
+                    statusDot.className = 'status-dot offline';
+                }
+            }
+        })
+        .catch(() => {
+            const statusText = document.getElementById('server-status-text');
+            const statusDot = document.getElementById('server-status-dot');
+            if (statusText) statusText.innerHTML = 'Connection Failed';
+            if (statusDot) statusDot.className = 'status-dot offline';
+        });
+}
+
+// Backup functionality
+let backupEventSource = null;
+
+window.runBackupNow = function() {
+    if(confirm('⚠️ Run backup now? This will take a few minutes.')) {
+        const progressDiv = document.getElementById('backup-progress');
+        const progressBar = document.getElementById('backup-progress-bar');
+        const logDiv = document.getElementById('backup-log');
+        const runBtn = document.getElementById('runBackupBtn');
+        
+        if (progressDiv) progressDiv.style.display = 'block';
+        if (runBtn) {
+            runBtn.disabled = true;
+            runBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Running Backup...';
+        }
+        if (logDiv) logDiv.innerHTML = '';
+        
+        fetch('/backup/run')
+            .then(res => res.json())
+            .then(data => {
+                if (data.error) throw new Error(data.error);
+                
+                if (backupEventSource) backupEventSource.close();
+                backupEventSource = new EventSource('/backup/stream');
+                
+                backupEventSource.onmessage = function(event) {
+                    const data = JSON.parse(event.data);
+                    if (logDiv) {
+                        const line = document.createElement('div');
+                        line.textContent = data.line;
+                        logDiv.appendChild(line);
+                        logDiv.scrollTop = logDiv.scrollHeight;
+                    }
+                    
+                    if (data.complete) {
+                        backupEventSource.close();
+                        if (progressBar) progressBar.style.width = '100%';
+                        setTimeout(() => {
+                            if (progressDiv) progressDiv.style.display = 'none';
+                            if (runBtn) {
+                                runBtn.disabled = false;
+                                runBtn.innerHTML = '<i class="fas fa-play"></i> Run Backup Now';
+                            }
+                            refreshStatus();
+                        }, 2000);
+                    }
+                };
+            })
+            .catch(err => {
+                if (logDiv) logDiv.innerHTML = `<div style="color: red;">❌ Error: ${err.message}</div>`;
+                if (runBtn) {
+                    runBtn.disabled = false;
+                    runBtn.innerHTML = '<i class="fas fa-play"></i> Run Backup Now';
+                }
+            });
+    }
+};
+
+window.restoreLocal = function() {
+    const backup = document.getElementById('local-backup');
+    if (!backup) return;
+    const backupValue = backup.value;
+    if(confirm('⚠️ Restore from ' + backupValue.split('/').pop() + '?\n\nThis will overwrite current data on this server!')) {
+        const statusDiv = document.getElementById('restore-status');
+        if (statusDiv) {
+            statusDiv.style.display = 'block';
+            statusDiv.className = 'restore-status warning';
+            statusDiv.innerHTML = '<p>🔄 Starting restore from local backup...</p>';
+        }
+        
+        fetch('/restore/local?backup=' + encodeURIComponent(backupValue))
+            .then(res => res.json())
+            .then(data => {
+                if (statusDiv) {
+                    if (data.error) {
+                        statusDiv.className = 'restore-status error';
+                        statusDiv.innerHTML = '<p>❌ ' + data.error + '</p>';
+                    } else {
+                        statusDiv.className = 'restore-status success';
+                        statusDiv.innerHTML = '<p>✅ ' + data.status + '</p>';
+                    }
+                }
+            })
+            .catch(err => {
+                if (statusDiv) {
+                    statusDiv.className = 'restore-status error';
+                    statusDiv.innerHTML = '<p>❌ Restore failed: ' + err + '</p>';
+                }
+            });
+    }
+};
+
+window.disasterRestore = function() {
+    const backupFile = document.getElementById('vm-backup-select').value;
+    const targetIp = document.getElementById('target-ip').value;
+    const targetUser = document.getElementById('target-user').value || 'root';
+    const targetPassword = document.getElementById('target-password').value;
+    
+    if (!targetIp) {
+        alert('Please enter target server IP');
+        return;
+    }
+    
+    if(confirm(`⚠️ DISASTER RESTORE to ${targetIp}\n\nBackup: ${backupFile.split('/').pop()}\n\nThis will OVERWRITE containers on the target server! Continue?`)) {
+        const statusDiv = document.getElementById('disaster-status');
+        if (statusDiv) {
+            statusDiv.style.display = 'block';
+            statusDiv.className = 'restore-status warning';
+            statusDiv.innerHTML = '<p>🔄 Starting disaster restore to ' + targetIp + '...</p>';
+        }
+        
+        fetch('/disaster/restore', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                backup_file: backupFile,
+                target_ip: targetIp,
+                target_user: targetUser,
+                target_password: targetPassword
+            })
+        })
+        .then(res => res.json())
+        .then(data => {
+            if (statusDiv) {
+                if (data.error) {
+                    statusDiv.className = 'restore-status error';
+                    statusDiv.innerHTML = '<p>❌ ' + data.error + '</p>';
+                } else {
+                    statusDiv.className = 'restore-status success';
+                    statusDiv.innerHTML = '<p>✅ ' + data.status + '<br>Target: ' + data.target + '</p>';
+                }
+            }
+        })
+        .catch(err => {
+            if (statusDiv) {
+                statusDiv.className = 'restore-status error';
+                statusDiv.innerHTML = '<p>❌ Restore failed: ' + err + '</p>';
+            }
+        });
+    }
+};
+
+window.refreshStatus = function() { location.reload(); };
+window.refreshAll = function() { fetch('/server/status').then(() => location.reload()); };
+
+// Add backup panel to Backups page
+document.addEventListener('DOMContentLoaded', () => {
+    checkServerStatus();
+    
+    const backupsNav = document.querySelector('.nav-item[data-page="backups"]');
+    if (backupsNav) {
+        backupsNav.addEventListener('click', () => {
+            setTimeout(() => {
+                if (document.getElementById('backup-panel')) return;
+                const backupsPage = document.getElementById('backups-page');
+                if (backupsPage) {
+                    const backupPanel = document.createElement('div');
+                    backupPanel.id = 'backup-panel';
+                    backupPanel.className = 'card';
+                    backupPanel.innerHTML = `
+                        <div class="card-header"><div class="card-title"><span>📦</span><span>Manual Backup</span></div></div>
+                        <div style="padding: 20px; background: var(--primary-soft); border-radius: 12px;">
+                            <h3 style="margin-bottom: 10px;">Run Backup Now</h3>
+                            <p style="color: var(--gray); margin-bottom: 15px;">Manually trigger a backup of all containers</p>
+                            <button id="runBackupBtn" class="btn btn-primary" onclick="runBackupNow()"><i class="fas fa-play"></i> Run Backup Now</button>
+                            <div id="backup-progress" style="display: none; margin-top: 15px;">
+                                <div style="background: var(--gray-light); border-radius: 10px; overflow: hidden;"><div id="backup-progress-bar" style="width: 0%; height: 20px; background: var(--success); transition: width 0.3s;"></div></div>
+                                <div id="backup-log" style="margin-top: 10px; max-height: 200px; overflow-y: auto; background: #1e1e1e; color: #d4d4d4; padding: 10px; border-radius: 8px; font-family: monospace; font-size: 11px;"></div>
+                            </div>
+                        </div>
+                    `;
+                    backupsPage.insertBefore(backupPanel, backupsPage.firstChild);
+                }
+            }, 100);
+        });
+    }
+});

platform/templates/base.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Navitrends - Management Platform</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+</head>
+<body>
+    <div class="app">
+        <div class="sidebar">
+            <div class="sidebar-header">
+                <h2>Navitrends</h2>
+                <p>Management Platform</p>
+            </div>
+            <div class="nav-menu">
+                <div class="nav-item active" data-page="dashboard">
+                    <i class="fas fa-chart-line nav-icon"></i>
+                    <span>Dashboard</span>
+                </div>
+                <div class="nav-item" data-page="restore">
+                    <i class="fas fa-rotate-right nav-icon"></i>
+                    <span>Restore Actions</span>
+                </div>
+                <div class="nav-item" data-page="backups">
+                    <i class="fas fa-database nav-icon"></i>
+                    <span>Backups</span>
+                </div>
+                <div class="nav-item" data-page="settings">
+                    <i class="fas fa-sliders-h nav-icon"></i>
+                    <span>Settings</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="main-content">
+            <div class="top-bar">
+                <h3 id="page-title">Dashboard Overview</h3>
+                <div class="server-status">
+                    <div class="status-indicator">
+                        <span class="status-dot" id="server-status-dot"></span>
+                        <span id="server-status-text">Checking...</span>
+                    </div>
+                    <button class="btn btn-secondary" onclick="refreshStatus()">
+                        <i class="fas fa-sync-alt"></i> Refresh
+                    </button>
+                    <a href="/logout">
+                        <button class="btn btn-secondary">
+                            <i class="fas fa-sign-out-alt"></i> Logout
+                        </button>
+                    </a>
+                </div>
+            </div>
+
+            {% block content %}{% endblock %}
+
+            <div class="footer">
+                <i class="fas fa-shield-alt"></i> Navitrends Management Platform
+            </div>
+        </div>
+    </div>
+
+    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+</body>
+</html>

platform/templates/dashboard.html

@@ -0,0 +1,466 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+<div id="dashboard-page" class="page">
+    <div class="card">
+        <div class="card-header">
+            <div class="card-title"><span>📦</span><span>Application Status</span></div>
+            <span style="color:var(--gray);" id="container-count">{{ containers|length }} containers</span>
+        </div>
+        <div class="containers-grid" id="containers-grid">
+            {% for container in containers %}
+            <div class="container-card {% if 'Up' in container.status %}running{% else %}stopped{% endif %}">
+                <div class="container-name">
+                    <span>{{ container.name }}</span>
+                    <span class="badge {% if 'Up' in container.status %}badge-running{% else %}badge-stopped{% endif %}">
+                        {% if 'Up' in container.status %}Running{% else %}Stopped{% endif %}
+                    </span>
+                </div>
+                <div class="container-status">{{ container.status }}</div>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+
+    <div class="card">
+        <div class="card-header">
+            <div class="card-title"><span>📈</span><span>Quick Stats</span></div>
+        </div>
+        <div class="stats-grid">
+            <div class="stat-card">
+                <div class="stat-number" id="stat-total">{{ containers|length }}</div>
+                <div class="stat-label">Total Containers</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number" id="stat-running">{{ running_count }}</div>
+                <div class="stat-label">Running</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number" id="stat-local">{{ backups|length }}</div>
+                <div class="stat-label">Local Backups</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number" id="stat-vm">{{ vm_backups|length }}</div>
+                <div class="stat-label">VM Backups</div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="restore-page" class="page" style="display:none;">
+    <div class="card">
+        <div class="card-header">
+            <div class="card-title"><span>🔄</span><span>Restore Configuration</span></div>
+        </div>
+
+        <div class="restore-form">
+
+            <div class="form-section">
+                <div class="form-section-title">Step 1 — Select Backup Source</div>
+                <div class="radio-group">
+                    <label class="radio-card">
+                        <input type="radio" name="backup_source" value="local" checked onchange="updateBackupList()">
+                        <div class="radio-body">
+                            <span class="radio-icon">🖥️</span>
+                            <div>
+                                <div class="radio-label">Main Server (local)</div>
+                                <div class="radio-desc">Backups in <code>/root/backups/</code></div>
+                            </div>
+                        </div>
+                    </label>
+                    <label class="radio-card">
+                        <input type="radio" name="backup_source" value="vm" onchange="updateBackupList()">
+                        <div class="radio-body">
+                            <span class="radio-icon">💾</span>
+                            <div>
+                                <div class="radio-label">VM Backup Server</div>
+                                <div class="radio-desc">Backups in <code>/backups/main-server/</code></div>
+                            </div>
+                        </div>
+                    </label>
+                </div>
+
+                <div class="form-group" style="margin-top:14px;">
+                    <label class="form-label">Select Backup File</label>
+                    <select id="backup-file-select" class="form-control">
+                        <optgroup label="Main Server Backups" id="local-options">
+                            {% for b in backups %}
+                            <option value="{{ b }}" data-source="local">{{ b }}</option>
+                            {% else %}
+                            <option disabled>No local backups found</option>
+                            {% endfor %}
+                        </optgroup>
+                        <optgroup label="VM Backups" id="vm-options" style="display:none;">
+                            {% for b in vm_backups %}
+                            <option value="{{ b }}" data-source="vm">{{ b }}</option>
+                            {% else %}
+                            <option disabled>No VM backups found</option>
+                            {% endfor %}
+                        </optgroup>
+                    </select>
+                </div>
+            </div>
+
+            <div class="form-section">
+                <div class="form-section-title">Step 2 — Select Restore Target</div>
+                <div class="radio-group">
+                    <label class="radio-card">
+                        <input type="radio" name="restore_target" value="local" checked onchange="toggleRemoteFields()">
+                        <div class="radio-body">
+                            <span class="radio-icon">🎯</span>
+                            <div>
+                                <div class="radio-label">This Server ({{ main_server }})</div>
+                                <div class="radio-desc">Restore directly on the main server</div>
+                            </div>
+                        </div>
+                    </label>
+                    <label class="radio-card">
+                        <input type="radio" name="restore_target" value="remote" onchange="toggleRemoteFields()">
+                        <div class="radio-body">
+                            <span class="radio-icon">📡</span>
+                            <div>
+                                <div class="radio-label">Remote Machine (via SSH)</div>
+                                <div class="radio-desc">Restore on another server or the VM</div>
+                            </div>
+                        </div>
+                    </label>
+                </div>
+
+                <div id="remote-fields" style="display:none; margin-top:16px;">
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label class="form-label">Target IP / Hostname</label>
+                            <input type="text" id="remote-ip" class="form-control" placeholder="192.168.1.100 or localhost">
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label">SSH Port</label>
+                            <input type="text" id="remote-port" class="form-control" value="22" placeholder="22">
+                        </div>
+                    </div>
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label class="form-label">SSH User</label>
+                            <input type="text" id="remote-user" class="form-control" value="root">
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <label class="form-label">Authentication Method</label>
+                        <div class="radio-group" style="gap:10px;">
+                            <label class="radio-card small">
+                                <input type="radio" name="auth_method" value="key" checked onchange="toggleAuthFields()">
+                                <div class="radio-body">
+                                    <span>🔑</span>
+                                    <div class="radio-label">SSH Key</div>
+                                </div>
+                            </label>
+                            <label class="radio-card small">
+                                <input type="radio" name="auth_method" value="password" onchange="toggleAuthFields()">
+                                <div class="radio-body">
+                                    <span>🔒</span>
+                                    <div class="radio-label">Password</div>
+                                </div>
+                            </label>
+                        </div>
+                    </div>
+
+                    <div id="key-field" class="form-group">
+                        <label class="form-label">SSH Key Path (on this server)</label>
+                        <input type="text" id="ssh-key-path" class="form-control" value="/root/.ssh/contabo-key" placeholder="/root/.ssh/id_rsa">
+                    </div>
+                    <div id="password-field" class="form-group" style="display:none;">
+                        <label class="form-label">SSH Password</label>
+                        <input type="password" id="ssh-password" class="form-control" placeholder="SSH password">
+                    </div>
+                </div>
+            </div>
+
+            <div class="form-section" style="border:none; padding-top:0;">
+                <button class="btn btn-danger btn-lg" onclick="launchRestore()" id="restore-btn">
+                    🚀 Start Restore
+                </button>
+                <p style="color:var(--gray); font-size:13px; margin-top:8px;">
+                    ⚠️ Restore will skip containers that are already running and healthy.
+                </p>
+            </div>
+        </div>
+
+        <div id="restore-log-wrapper" style="display:none; margin-top:20px;">
+            <div class="card-header" style="margin-bottom:10px;">
+                <div class="card-title"><span>📋</span><span>Restore Log</span></div>
+                <span id="restore-status-badge" class="badge badge-running">Running...</span>
+            </div>
+            <div id="restore-log" class="log-console"></div>
+            <div style="color:var(--gray); font-size:12px; margin-top:8px;" id="restore-elapsed"></div>
+        </div>
+    </div>
+</div>
+
+<div id="backups-page" class="page" style="display:none;">
+    <div class="card">
+        <div class="card-header">
+            <div class="card-title"><span>💾</span><span>Available Backups</span></div>
+            <button class="btn btn-secondary" onclick="refreshBackupsList()">🔄 Refresh</button>
+        </div>
+        <div class="two-column">
+            <div>
+                <h3 style="margin-bottom:12px;">🖥️ Main Server <small style="color:var(--gray); font-size:13px;">/root/backups/</small></h3>
+                <div class="backup-list" id="local-backup-list">
+                    {% for b in backups %}
+                    <div class="backup-item">
+                        <div class="backup-date">{{ b }}</div>
+                        <button class="btn btn-secondary btn-sm" onclick="quickRestore('local','{{ b }}')">↩ Restore here</button>
+                    </div>
+                    {% else %}
+                    <div class="backup-item">No local backups found</div>
+                    {% endfor %}
+                </div>
+            </div>
+            <div>
+                <h3 style="margin-bottom:12px;">💾 VM Server <small style="color:var(--gray); font-size:13px;">/backups/main-server/</small></h3>
+                <div class="backup-list" id="vm-backup-list">
+                    {% for b in vm_backups %}
+                    <div class="backup-item">
+                        <div class="backup-date">{{ b }}</div>
+                        <button class="btn btn-secondary btn-sm" onclick="quickRestore('vm','{{ b }}')">↩ Restore here</button>
+                    </div>
+                    {% else %}
+                    <div class="backup-item">No VM backups found</div>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="settings-page" class="page" style="display:none;">
+    <div class="card">
+        <div class="card-header">
+            <div class="card-title"><span>⚙️</span><span>Platform Settings</span></div>
+        </div>
+        <div style="max-width:500px;">
+            <div class="form-group">
+                <label class="form-label">Main Server IP</label>
+                <input type="text" value="{{ main_server }}" readonly class="form-control" style="background:var(--light);">
+            </div>
+            <div class="form-group">
+                <label class="form-label">Platform Host</label>
+                <input type="text" value="Running on main server" readonly class="form-control" style="background:var(--light);">
+            </div>
+            <div class="form-group">
+                <label class="form-label">VM Backup Path</label>
+                <input type="text" value="/backups/main-server/" readonly class="form-control" style="background:var(--light);">
+            </div>
+            <button class="btn btn-secondary" onclick="refreshAll()">🔄 Refresh All Data</button>
+        </div>
+    </div>
+</div>
+
+<script>
+function updateBackupList() {
+    const source = document.querySelector('input[name="backup_source"]:checked').value;
+    const sel = document.getElementById('backup-file-select');
+    document.getElementById('local-options').style.display = source === 'local' ? '' : 'none';
+    document.getElementById('vm-options').style.display   = source === 'vm'    ? '' : 'none';
+    for (let opt of sel.options) {
+        if (!opt.disabled && opt.parentElement.style.display !== 'none') {
+            opt.selected = true;
+            break;
+        }
+    }
+}
+
+function toggleRemoteFields() {
+    const target = document.querySelector('input[name="restore_target"]:checked').value;
+    document.getElementById('remote-fields').style.display = target === 'remote' ? '' : 'none';
+}
+
+function toggleAuthFields() {
+    const method = document.querySelector('input[name="auth_method"]:checked').value;
+    document.getElementById('key-field').style.display      = method === 'key'      ? '' : 'none';
+    document.getElementById('password-field').style.display = method === 'password' ? '' : 'none';
+}
+
+function quickRestore(source, filename) {
+    showPage('restore');
+    document.querySelector(`input[name="backup_source"][value="${source}"]`).checked = true;
+    updateBackupList();
+    const sel = document.getElementById('backup-file-select');
+    for (let opt of sel.options) {
+        if (opt.value === filename) { opt.selected = true; break; }
+    }
+    document.querySelector('input[name="restore_target"][value="local"]').checked = true;
+    toggleRemoteFields();
+    window.scrollTo(0, 0);
+}
+
+let currentJobId = null;
+let pollInterval = null;
+
+async function launchRestore() {
+    const source = document.querySelector('input[name="backup_source"]:checked').value;
+    const file   = document.getElementById('backup-file-select').value;
+    const target = document.querySelector('input[name="restore_target"]:checked').value;
+
+    if (!file || file === 'undefined') {
+        alert('Please select a backup file.');
+        return;
+    }
+
+    const payload = {
+        backup_source: source,
+        backup_file:   file,
+        target:        target,
+    };
+
+    if (target === 'remote') {
+        payload.remote_ip   = document.getElementById('remote-ip').value.trim();
+        payload.remote_port = document.getElementById('remote-port').value.trim() || '22';
+        payload.remote_user = document.getElementById('remote-user').value.trim();
+        payload.auth_method = document.querySelector('input[name="auth_method"]:checked').value;
+        if (payload.auth_method === 'key') {
+            payload.ssh_key_path = document.getElementById('ssh-key-path').value.trim();
+        } else {
+            payload.ssh_password = document.getElementById('ssh-password').value;
+        }
+        if (!payload.remote_ip) {
+            alert('Please enter the target IP address.');
+            return;
+        }
+    }
+
+    if (!confirm(`Start restore of "${file}" → ${target === 'local' ? 'this server' : payload.remote_ip}:${payload.remote_port || 22}?`)) return;
+
+    const btn = document.getElementById('restore-btn');
+    btn.disabled = true;
+    btn.textContent = '⏳ Starting...';
+
+    document.getElementById('restore-log-wrapper').style.display = '';
+    document.getElementById('restore-log').innerHTML = '';
+    document.getElementById('restore-status-badge').className = 'badge badge-running';
+    document.getElementById('restore-status-badge').textContent = 'Running...';
+
+    try {
+        const res = await fetch('/restore/start', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify(payload)
+        });
+        const data = await res.json();
+        if (data.error) {
+            appendLog('❌ ERROR: ' + data.error);
+            btn.disabled = false;
+            btn.textContent = '🚀 Start Restore';
+            return;
+        }
+        currentJobId = data.job_id;
+        pollRestore();
+    } catch (e) {
+        appendLog('❌ Request failed: ' + e);
+        btn.disabled = false;
+        btn.textContent = '🚀 Start Restore';
+    }
+}
+
+function pollRestore() {
+    if (pollInterval) clearInterval(pollInterval);
+    let lastLine = 0;
+    pollInterval = setInterval(async () => {
+        if (!currentJobId) return;
+        try {
+            const res  = await fetch(`/restore/status/${currentJobId}`);
+            const data = await res.json();
+            const newLines = data.log.slice(lastLine);
+            newLines.forEach(l => appendLog(l));
+            lastLine = data.log.length;
+            document.getElementById('restore-elapsed').textContent = `⏱ Elapsed: ${data.elapsed}s`;
+            if (data.status !== 'running') {
+                clearInterval(pollInterval);
+                const badge = document.getElementById('restore-status-badge');
+                if (data.status === 'done') {
+                    badge.className = 'badge badge-running';
+                    badge.textContent = '✅ Done';
+                    badge.style.background = '#22c55e';
+                } else {
+                    badge.className = 'badge badge-stopped';
+                    badge.textContent = '❌ Error';
+                }
+                const btn = document.getElementById('restore-btn');
+                btn.disabled = false;
+                btn.textContent = '🚀 Start Restore';
+            }
+        } catch (e) { }
+    }, 1500);
+}
+
+function appendLog(line) {
+    const el = document.getElementById('restore-log');
+    const div = document.createElement('div');
+    div.className = 'log-line';
+    if (line.includes('✅'))  div.style.color = '#4ade80';
+    else if (line.includes('❌') || line.includes('ERROR')) div.style.color = '#f87171';
+    else if (line.includes('⚠️'))  div.style.color = '#fbbf24';
+    else if (line.includes('📌') || line.includes('Step')) div.style.color = '#60a5fa';
+    div.textContent = line;
+    el.appendChild(div);
+    el.scrollTop = el.scrollHeight;
+}
+
+async function refreshBackupsList() {
+    const res  = await fetch('/api/backups');
+    const data = await res.json();
+    const renderList = (items, containerId, source) => {
+        const el = document.getElementById(containerId);
+        if (!items.length) { el.innerHTML = '<div class="backup-item">No backups found</div>'; return; }
+        el.innerHTML = items.map(b => `
+            <div class="backup-item">
+                <div class="backup-date">${b}</div>
+                <button class="btn btn-secondary btn-sm" onclick="quickRestore('${source}','${b}')">↩ Restore here</button>
+            </div>`).join('');
+    };
+    renderList(data.local, 'local-backup-list', 'local');
+    renderList(data.vm,    'vm-backup-list',    'vm');
+    document.getElementById('stat-local').textContent = data.local.length;
+    document.getElementById('stat-vm').textContent    = data.vm.length;
+    const localOpts = document.getElementById('local-options');
+    const vmOpts    = document.getElementById('vm-options');
+    localOpts.innerHTML = data.local.length ? data.local.map(b => `<option value="${b}" data-source="local">${b}</option>`).join('') : '<option disabled>No local backups found</option>';
+    vmOpts.innerHTML = data.vm.length ? data.vm.map(b => `<option value="${b}" data-source="vm">${b}</option>`).join('') : '<option disabled>No VM backups found</option>';
+}
+
+async function refreshContainers() {
+    const res  = await fetch('/api/containers');
+    const data = await res.json();
+    document.getElementById('stat-total').textContent   = data.containers.length;
+    document.getElementById('stat-running').textContent = data.running;
+    document.getElementById('container-count').textContent = data.containers.length + ' containers';
+    const grid = document.getElementById('containers-grid');
+    grid.innerHTML = data.containers.map(c => {
+        const up = c.status.includes('Up');
+        return `<div class="container-card ${up ? 'running' : 'stopped'}">
+            <div class="container-name">
+                <span>${c.name}</span>
+                <span class="badge ${up ? 'badge-running' : 'badge-stopped'}">${up ? 'Running' : 'Stopped'}</span>
+            </div>
+            <div class="container-status">${c.status}</div>
+        </div>`;
+    }).join('');
+}
+
+function refreshAll() { refreshContainers(); refreshBackupsList(); }
+
+function showPage(pageId) {
+    document.querySelectorAll('.nav-item').forEach(nav => nav.classList.remove('active'));
+    document.querySelectorAll('.page').forEach(p => p.style.display = 'none');
+    document.getElementById(pageId + '-page').style.display = 'block';
+    const titles = {dashboard: 'Dashboard Overview', restore: 'Restore Actions', backups: 'Backup Management', settings: 'Platform Settings'};
+    const titleElement = document.getElementById('page-title');
+    if (titleElement) titleElement.textContent = titles[pageId];
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    checkServerStatus();
+});
+</script>
+{% endblock %}

platform/templates/login.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Navitrends — Login</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+        body {
+            font-family: 'Inter', sans-serif;
+            display: flex; justify-content: center; align-items: center;
+            min-height: 100vh;
+            background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
+        }
+        .login-card {
+            background: white; border-radius: 24px;
+            padding: 48px 40px; width: 380px;
+            text-align: center;
+            box-shadow: 0 25px 60px rgba(0,0,0,0.3);
+        }
+        h1 { font-size: 26px; font-weight: 700; color: #1e1b4b; }
+        p  { color: #6b7280; margin: 6px 0 28px; font-size: 14px; }
+        input {
+            width: 100%; padding: 13px 16px; margin-bottom: 12px;
+            border: 1.5px solid #e5e7eb; border-radius: 12px;
+            font-size: 14px; transition: border-color 0.15s;
+        }
+        input:focus { outline: none; border-color: #6366f1; }
+        button {
+            width: 100%; padding: 13px;
+            background: #6366f1; color: white;
+            border: none; border-radius: 12px;
+            font-size: 15px; font-weight: 600;
+            cursor: pointer; transition: background 0.15s;
+        }
+        button:hover { background: #4f46e5; }
+        .error { color: #ef4444; font-size: 13px; margin-bottom: 12px; }
+    </style>
+</head>
+<body>
+    <div class="login-card">
+        <h1>Navitrends</h1>
+        <p>Management Platform</p>
+        {% if error %}<div class="error">⚠️ {{ error }}</div>{% endif %}
+        <form method="post">
+            <input type="password" name="password" placeholder="Enter password" required autofocus>
+            <button type="submit">Login →</button>
+        </form>
+    </div>
+</body>
+</html>