Spaces:

EricaLuvGemma
/

ProjectX

Runtime error

File size: 68,977 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>TreyOS</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

  * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

  :root {
    --bg: #eef0f8;
    --surface: rgba(255,255,255,0.72);
    --surface-hover: rgba(255,255,255,0.9);
    --border: rgba(255,255,255,0.6);
    --text: #1a1d2e;
    --text-secondary: #6b7280;
    --accent: #6366f1;
    --accent2: #818cf8;
    --accent3: #a5b4fc;
    --danger: #ef4444;
    --success: #22c55e;
    --shadow: 0 4px 24px rgba(99,102,241,0.10);
    --shadow-lg: 0 8px 40px rgba(99,102,241,0.16);
    --radius: 20px;
    --radius-sm: 12px;
    --blur: blur(20px);
    --font: 'Inter', system-ui, sans-serif;
    --dock-h: 90px;
  }

  html, body {
    height: 100%; width: 100%;
    font-family: var(--font);
    background: var(--bg);
    overflow: hidden;
    color: var(--text);
  }

  /* ─── SPLASH ─── */
  #splash {
    position: fixed; inset: 0; z-index: 9999;
    background: linear-gradient(145deg, #dde3f8 0%, #eef0fb 40%, #d8dcf5 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 28px;
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  #splash.hidden { opacity: 0; transform: scale(1.04); pointer-events: none; }
  .splash-logo {
    width: 120px; height: 120px;
    background: rgba(255,255,255,0.6);
    backdrop-filter: var(--blur);
    border-radius: 50%;
    border: 2px solid rgba(99,102,241,0.3);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 60px rgba(99,102,241,0.25), 0 0 120px rgba(99,102,241,0.1);
    animation: pulse 2s ease-in-out infinite;
  }
  @keyframes pulse {
    0%,100% { box-shadow: 0 0 60px rgba(99,102,241,0.25), 0 0 120px rgba(99,102,241,0.1); }
    50% { box-shadow: 0 0 80px rgba(99,102,241,0.4), 0 0 160px rgba(99,102,241,0.15); }
  }
  .splash-t { font-size: 14px; color: #6366f1; font-weight: 500; }
  .splash-t span { color: var(--text); font-weight: 700; }
  .splash-bar { width: 200px; height: 4px; background: rgba(99,102,241,0.15); border-radius: 99px; overflow: hidden; }
  .splash-fill { height: 100%; background: linear-gradient(90deg, #6366f1, #818cf8); border-radius: 99px; animation: load 1.8s ease forwards; }
  @keyframes load { from { width: 0 } to { width: 100% } }
  .splash-sub { font-size: 12px; color: var(--text-secondary); }

  /* ─── WALLPAPER ─── */
  #os {
    position: fixed; inset: 0;
    background: linear-gradient(160deg, #c7d2fe 0%, #e0e7ff 30%, #f0f4ff 60%, #dde8ff 100%);
    display: flex; flex-direction: column;
    overflow: hidden;
  }

  /* ─── STATUS BAR ─── */
  .statusbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 20px 4px;
    font-size: 12px; font-weight: 600;
    color: #1a1d2e;
    flex-shrink: 0;
  }
  .statusbar-right { display: flex; gap: 6px; align-items: center; }
  .sb-icon { font-size: 11px; }

  /* ─── SCREENS ─── */
  .screen { display: none; flex: 1; overflow: hidden; flex-direction: column; }
  .screen.active { display: flex; }

  /* HOME SCREEN */
  #screen-home {
    padding: 8px 0 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .home-widgets {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px; padding: 8px 16px 4px;
  }
  .widget {
    background: var(--surface);
    backdrop-filter: var(--blur);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow);
  }
  .widget-welcome { grid-column: span 1; }
  .widget-welcome .greeting { font-size: 11px; color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
  .widget-welcome h2 { font-size: 20px; font-weight: 700; line-height: 1.2; margin: 4px 0 8px; }
  .widget-welcome h2 span { color: var(--accent); }
  .widget-ai {
    display: flex; align-items: center; gap: 8px;
    background: rgba(99,102,241,0.08); border-radius: 10px;
    padding: 8px 10px; font-size: 11px; color: var(--text-secondary);
  }
  .ai-orb {
    width: 22px; height: 22px; border-radius: 50%;
    background: conic-gradient(from 0deg, #6366f1, #818cf8, #a5b4fc, #6366f1);
    flex-shrink: 0; animation: spin 4s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  .widget-time { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; }
  .widget-time .clock { font-size: 32px; font-weight: 300; letter-spacing: -1px; }
  .widget-time .date-str { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }

  .widget-sys { grid-column: span 2; }
  .sys-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
  .stat-item label { font-size: 10px; color: var(--text-secondary); font-weight: 500; display: block; margin-bottom: 4px; }
  .stat-bar { height: 5px; background: rgba(99,102,241,0.12); border-radius: 99px; overflow: hidden; }
  .stat-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
  .stat-val { font-size: 12px; font-weight: 600; margin-top: 3px; }

  .home-search {
    margin: 12px 16px 4px;
    display: flex; align-items: center; gap: 10px;
    background: var(--surface); backdrop-filter: var(--blur);
    border: 1px solid var(--border); border-radius: 50px;
    padding: 12px 18px; box-shadow: var(--shadow);
  }
  .home-search input {
    border: none; background: transparent; font-size: 14px;
    font-family: var(--font); color: var(--text); width: 100%;
    outline: none;
  }
  .home-search input::placeholder { color: var(--text-secondary); }
  .search-ai { width: 22px; height: 22px; background: linear-gradient(135deg, var(--accent), var(--accent2)); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }

  .app-section { padding: 12px 16px; }
  .section-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; }
  .app-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .app-icon-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
  .app-icon {
    width: 60px; height: 60px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; box-shadow: var(--shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    position: relative; overflow: hidden;
  }
  .app-icon:active { transform: scale(0.9); }
  .app-icon::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(145deg, rgba(255,255,255,0.35) 0%, transparent 60%);
    border-radius: inherit;
  }
  .app-label { font-size: 11px; font-weight: 500; color: var(--text); text-align: center; }

  .ai-files    { background: linear-gradient(145deg, #3b82f6, #60a5fa); }
  .ai-browser  { background: linear-gradient(145deg, #10b981, #34d399); }
  .ai-editor   { background: linear-gradient(145deg, #1a1d2e, #374151); }
  .ai-settings { background: linear-gradient(145deg, #6b7280, #9ca3af); }
  .ai-video    { background: linear-gradient(145deg, #8b5cf6, #a78bfa); }
  .ai-gallery  { background: linear-gradient(145deg, #f59e0b, #fbbf24); }
  .ai-terminal { background: linear-gradient(145deg, #111827, #1f2937); }
  .ai-docker   { background: linear-gradient(145deg, #0ea5e9, #38bdf8); }

  /* ─── FILE MANAGER ─── */
  #screen-files { background: #f8f9ff; }
  .app-header {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px 8px;
    background: rgba(248,249,255,0.95);
    backdrop-filter: var(--blur);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    flex-shrink: 0;
  }
  .app-header-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
  .app-header h1 { font-size: 18px; font-weight: 700; flex: 1; }
  .header-btn { width: 34px; height: 34px; border-radius: 10px; background: rgba(0,0,0,0.06); border: none; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; }

  .files-layout { display: flex; flex: 1; overflow: hidden; }
  .files-sidebar {
    width: 140px; flex-shrink: 0;
    padding: 10px 8px;
    overflow-y: auto;
    border-right: 1px solid rgba(0,0,0,0.06);
  }
  .sidebar-section { margin-bottom: 16px; }
  .sidebar-label { font-size: 10px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; padding: 0 4px 6px; display: block; }
  .sidebar-item {
    display: flex; align-items: center; gap: 7px;
    padding: 8px 8px; border-radius: 10px; cursor: pointer;
    font-size: 12px; font-weight: 500; color: var(--text);
    transition: background 0.15s;
  }
  .sidebar-item:hover, .sidebar-item.active { background: rgba(99,102,241,0.1); color: var(--accent); }
  .sidebar-item .si-icon { font-size: 14px; }

  .storage-stat { margin: 8px; padding: 10px; background: rgba(99,102,241,0.08); border-radius: 12px; }
  .storage-stat .st-label { font-size: 10px; color: var(--text-secondary); }
  .storage-stat .st-bar { height: 4px; background: rgba(0,0,0,0.1); border-radius: 99px; margin: 5px 0; overflow: hidden; }
  .storage-stat .st-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); width: 50%; border-radius: 99px; }
  .storage-stat .st-val { font-size: 11px; font-weight: 600; }

  .files-main { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 12px; }
  .quick-access { margin-bottom: 16px; }
  .qa-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .qa-item {
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    padding: 12px; cursor: pointer; transition: transform 0.15s;
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    backdrop-filter: var(--blur);
  }
  .qa-item:active { transform: scale(0.97); }
  .qa-icon { font-size: 22px; }
  .qa-name { font-size: 12px; font-weight: 600; }
  .qa-count { font-size: 10px; color: var(--text-secondary); }

  .file-list { display: flex; flex-direction: column; gap: 2px; }
  .file-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 10px; border-radius: 12px; cursor: pointer;
    transition: background 0.12s;
  }
  .file-row:hover, .file-row:active { background: rgba(99,102,241,0.07); }
  .file-icon { font-size: 22px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(0,0,0,0.04); flex-shrink: 0; }
  .file-info { flex: 1; min-width: 0; }
  .file-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .file-meta { font-size: 10px; color: var(--text-secondary); margin-top: 1px; }
  .file-menu { font-size: 16px; color: var(--text-secondary); padding: 4px; border-radius: 6px; cursor: pointer; }

  /* ─── EDITOR ─── */
  #screen-editor { background: #0d1117; color: #e6edf3; }
  #screen-editor .app-header { background: #161b22; border-bottom-color: #30363d; }
  #screen-editor .app-header h1 { color: #e6edf3; }
  #screen-editor .header-btn { background: rgba(255,255,255,0.08); color: #e6edf3; }
  .editor-layout { display: flex; flex: 1; overflow: hidden; flex-direction: column; }
  .editor-tabs { display: flex; background: #161b22; border-bottom: 1px solid #30363d; overflow-x: auto; flex-shrink: 0; }
  .editor-tab { padding: 9px 14px; font-size: 12px; color: #8b949e; cursor: pointer; white-space: nowrap; border-right: 1px solid #30363d; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
  .editor-tab.active { color: #e6edf3; background: #0d1117; border-bottom: 2px solid var(--accent); }
  .editor-body { display: flex; flex: 1; overflow: hidden; }

  .code-area { flex: 1; overflow: auto; padding: 16px; font-family: 'Courier New', monospace; font-size: 13px; line-height: 1.7; color: #e6edf3; position: relative; }
  .code-line { display: flex; gap: 16px; }
  .ln { color: #3d444d; min-width: 24px; text-align: right; user-select: none; }
  .kw { color: #ff7b72; }
  .fn { color: #d2a8ff; }
  .str { color: #a5d6ff; }
  .cm { color: #8b949e; font-style: italic; }
  .num { color: #79c0ff; }
  .editor-terminal { height: 130px; background: #010409; border-top: 1px solid #30363d; padding: 10px 14px; font-family: 'Courier New', monospace; font-size: 12px; color: #7ee787; overflow-y: auto; flex-shrink: 0; }
  .term-line { margin-bottom: 2px; }
  .term-prompt { color: #56d364; }
  .term-input { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
  .term-input input { background: transparent; border: none; color: #e6edf3; font-family: inherit; font-size: 12px; flex: 1; outline: none; }

  /* ─── SETTINGS ─── */
  #screen-settings { background: #f8f9ff; }
  .settings-list { overflow-y: auto; flex: 1; padding: 10px 16px; }
  .settings-section { margin-bottom: 20px; }
  .settings-section-title { font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; padding: 0 4px; }
  .settings-card { background: var(--surface); backdrop-filter: var(--blur); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow); }
  .settings-row {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 14px; border-bottom: 1px solid rgba(0,0,0,0.05); cursor: pointer;
    transition: background 0.12s;
  }
  .settings-row:last-child { border-bottom: none; }
  .settings-row:hover { background: rgba(99,102,241,0.04); }
  .sr-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
  .sr-label { flex: 1; font-size: 13px; font-weight: 500; }
  .sr-value { font-size: 12px; color: var(--text-secondary); }
  .sr-arrow { color: var(--text-secondary); font-size: 12px; }
  .toggle { width: 40px; height: 22px; background: #d1d5db; border-radius: 11px; position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0; }
  .toggle.on { background: var(--accent); }
  .toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: white; border-radius: 50%; transition: left 0.2s; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
  .toggle.on::after { left: 20px; }

  .theme-row { display: flex; gap: 8px; padding: 12px 14px; flex-wrap: wrap; }
  .theme-dot { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: border 0.15s; }
  .theme-dot.active { border-color: #1a1d2e; }

  .server-info { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; box-shadow: var(--shadow); }
  .info-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 12px; border-bottom: 1px solid rgba(0,0,0,0.04); }
  .info-row:last-child { border-bottom: none; }
  .info-key { color: var(--text-secondary); }
  .info-val { font-weight: 600; font-family: 'Courier New', monospace; }

  /* ─── VIDEO ─── */
  #screen-video { background: #000; color: white; }
  #screen-video .app-header { background: rgba(0,0,0,0.8); border-bottom-color: rgba(255,255,255,0.1); }
  #screen-video .app-header h1 { color: white; }
  #screen-video .header-btn { background: rgba(255,255,255,0.12); color: white; }
  .video-player-area { width: 100%; background: #111; position: relative; overflow: hidden; flex-shrink: 0; aspect-ratio: 16/9; }
  .video-thumb { width: 100%; height: 100%; object-fit: cover; opacity: 0; }
  .video-overlay {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
  }
  .video-play-btn {
    width: 64px; height: 64px; background: rgba(255,255,255,0.2); backdrop-filter: blur(8px);
    border-radius: 50%; border: 2px solid rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 24px; transition: transform 0.15s;
  }
  .video-play-btn:hover { transform: scale(1.08); }
  .video-controls { padding: 14px 16px; background: #111; }
  .video-progress { height: 4px; background: rgba(255,255,255,0.2); border-radius: 99px; margin-bottom: 12px; overflow: hidden; }
  .video-fill { height: 100%; background: var(--accent2); width: 35%; border-radius: 99px; }
  .video-ctrl-row { display: flex; align-items: center; gap: 16px; }
  .vc-btn { background: none; border: none; color: white; font-size: 18px; cursor: pointer; padding: 4px; }
  .vc-time { font-size: 12px; color: rgba(255,255,255,0.7); flex: 1; }
  .video-list { flex: 1; overflow-y: auto; padding: 8px 12px; }
  .video-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 8px;
    border-radius: 12px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: background 0.12s;
  }
  .video-item:hover { background: rgba(255,255,255,0.05); }
  .video-thumb-mini { width: 72px; height: 44px; background: #222; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
  .vi-name { font-size: 13px; font-weight: 500; margin-bottom: 3px; }
  .vi-meta { font-size: 11px; color: rgba(255,255,255,0.4); }

  /* ─── GALLERY ─── */
  #screen-gallery { background: #f8f9ff; }
  .gallery-toolbar { display: flex; gap: 8px; padding: 8px 16px; border-bottom: 1px solid rgba(0,0,0,0.06); overflow-x: auto; flex-shrink: 0; }
  .gallery-tab { padding: 6px 14px; border-radius: 50px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; background: transparent; border: 1.5px solid rgba(0,0,0,0.1); color: var(--text-secondary); transition: all 0.15s; }
  .gallery-tab.active { background: var(--accent); color: white; border-color: var(--accent); }
  .gallery-grid { flex: 1; overflow-y: auto; padding: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
  .gallery-cell {
    aspect-ratio: 1; border-radius: 6px; overflow: hidden;
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; cursor: pointer;
    transition: opacity 0.15s;
    position: relative;
  }
  .gallery-cell:active { opacity: 0.8; }
  .gallery-cell .cell-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.3)); }

  /* ─── BROWSER ─── */
  #screen-browser { background: #f1f3f9; }
  .browser-bar {
    display: flex; align-items: center; gap: 8px; padding: 8px 12px;
    background: rgba(241,243,249,0.95); border-bottom: 1px solid rgba(0,0,0,0.08); flex-shrink: 0;
  }
  .url-bar {
    flex: 1; background: white; border: 1.5px solid rgba(0,0,0,0.1);
    border-radius: 50px; padding: 8px 14px; font-size: 13px;
    font-family: var(--font); outline: none; color: var(--text);
  }
  .url-bar:focus { border-color: var(--accent); }
  .browser-btn { width: 32px; height: 32px; border-radius: 8px; background: rgba(0,0,0,0.06); border: none; font-size: 14px; cursor: pointer; }
  .browser-tabs { display: flex; gap: 2px; padding: 6px 12px 0; overflow-x: auto; flex-shrink: 0; }
  .btab { padding: 6px 12px 7px; background: rgba(0,0,0,0.06); border-radius: 10px 10px 0 0; font-size: 12px; cursor: pointer; white-space: nowrap; }
  .btab.active { background: white; }
  .browser-content { flex: 1; background: white; overflow: hidden; position: relative; }
  .browser-mock { padding: 20px; }
  .bm-hero { width: 100%; height: 120px; background: linear-gradient(135deg, #6366f1, #818cf8); border-radius: 12px; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; font-weight: 700; }
  .bm-card { background: #f8f9ff; border: 1px solid rgba(0,0,0,0.08); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
  .bm-card h3 { font-size: 13px; font-weight: 600; margin-bottom: 5px; }
  .bm-card p { font-size: 11px; color: var(--text-secondary); line-height: 1.5; }

  /* ─── DOCK ─── */
  .dock-spacer { height: var(--dock-h); flex-shrink: 0; }
  .dock {
    position: fixed; bottom: 0; left: 0; right: 0;
    height: var(--dock-h);
    padding: 8px 12px 18px;
    display: flex; align-items: flex-end; justify-content: space-around;
    z-index: 100;
  }
  .dock-bg {
    position: absolute; inset: 0;
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(30px);
    border-top: 1px solid rgba(255,255,255,0.6);
  }
  .dock-item {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    cursor: pointer;
  }
  .dock-icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    transition: transform 0.15s ease;
    position: relative; overflow: hidden;
  }
  .dock-icon::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(145deg, rgba(255,255,255,0.3) 0%, transparent 60%);
  }
  .dock-icon:active { transform: scale(0.88) translateY(-4px); }
  .dock-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text); opacity: 0.4; }
  .dock-dot.active { opacity: 1; background: var(--accent); }

  .notch {
    width: 36px; height: 4px; background: rgba(0,0,0,0.2); border-radius: 99px;
    margin: 0 auto 8px; display: none;
  }

  /* Animations */
  @keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .screen.active { animation: slideUp 0.25s ease; }

  /* Scrollbar */
  ::-webkit-scrollbar { width: 3px; height: 3px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 99px; }

  .hidden { display: none !important; }
</style>
</head>
<body>

<!-- SPLASH -->
<div id="splash">
  <div class="splash-logo">
    <svg width="60" height="60" viewBox="0 0 60 60" fill="none">
      <path d="M12 30 Q20 10 30 20 Q40 30 48 18" stroke="url(#sg)" stroke-width="5" stroke-linecap="round" fill="none"/>
      <path d="M12 42 Q24 22 36 32 Q44 40 50 30" stroke="url(#sg2)" stroke-width="5" stroke-linecap="round" fill="none"/>
      <defs>
        <linearGradient id="sg" x1="12" y1="20" x2="48" y2="20" gradientUnits="userSpaceOnUse">
          <stop stop-color="#6366f1"/><stop offset="1" stop-color="#a5b4fc"/>
        </linearGradient>
        <linearGradient id="sg2" x1="12" y1="36" x2="50" y2="36" gradientUnits="userSpaceOnUse">
          <stop stop-color="#818cf8"/><stop offset="1" stop-color="#c7d2fe"/>
        </linearGradient>
      </defs>
    </svg>
  </div>
  <div>
    <div class="splash-t"><span>TreyOS</span></div>
  </div>
  <div class="splash-bar"><div class="splash-fill"></div></div>
  <div class="splash-sub">Loading your experience...</div>
</div>

<!-- OS SHELL -->
<div id="os">
  <!-- Status Bar -->
  <div class="statusbar">
    <span id="sb-time">10:30</span>
    <div class="statusbar-right">
      <span class="sb-icon">▲▲▲▲</span>
      <span class="sb-icon">⊕</span>
      <span class="sb-icon">🔋</span>
      <span>100%</span>
    </div>
  </div>

  <!-- HOME SCREEN -->
  <div class="screen active" id="screen-home">
    <div class="home-widgets">
      <div class="widget widget-welcome">
        <div class="greeting">Good morning</div>
        <h2>Welcome to<br><span>TreyOS</span></h2>
        <div class="widget-ai">
          <div class="ai-orb"></div>
          <span>How can I help you?</span>
        </div>
      </div>
      <div class="widget widget-time">
        <div class="clock" id="clock">10:30</div>
        <div class="date-str" id="datestr">Sun, Jun 28</div>
      </div>
      <div class="widget widget-sys">
        <div class="section-label" style="margin-bottom:10px">System</div>
        <div class="sys-stats">
          <div class="stat-item">
            <label>CPU</label>
            <div class="stat-bar"><div class="stat-fill" id="cpu-bar" style="width:0%"></div></div>
            <div class="stat-val" id="cpu-val">—</div>
          </div>
          <div class="stat-item">
            <label>RAM</label>
            <div class="stat-bar"><div class="stat-fill" id="ram-bar" style="width:0%"></div></div>
            <div class="stat-val" id="ram-val">—</div>
          </div>
          <div class="stat-item">
            <label>Disk</label>
            <div class="stat-bar"><div class="stat-fill" id="disk-bar" style="width:0%"></div></div>
            <div class="stat-val" id="disk-val">—</div>
          </div>
        </div>
      </div>
    </div>

    <div class="home-search">
      <span>🔍</span>
      <input type="text" placeholder="Search apps, files, and more...">

    </div>

    <div class="app-section">
      <div class="section-label">Core Apps</div>
      <div class="app-grid">
        <div class="app-icon-wrap" onclick="openApp('files')">
          <div class="app-icon ai-files">📁</div>
          <div class="app-label">Files</div>
        </div>
        <div class="app-icon-wrap" onclick="openApp('browser')">
          <div class="app-icon ai-browser">🌐</div>
          <div class="app-label">Browser</div>
        </div>
        <div class="app-icon-wrap" onclick="openApp('editor')">
          <div class="app-icon ai-editor">💻</div>
          <div class="app-label">Editor</div>
        </div>
        <div class="app-icon-wrap" onclick="openApp('settings')">
          <div class="app-icon ai-settings">⚙️</div>
          <div class="app-label">Settings</div>
        </div>
        <div class="app-icon-wrap" onclick="openApp('video')">
          <div class="app-icon ai-video">▶️</div>
          <div class="app-label">Videos</div>
        </div>
        <div class="app-icon-wrap" onclick="openApp('gallery')">
          <div class="app-icon ai-gallery">🖼️</div>
          <div class="app-label">Gallery</div>
        </div>
        <div class="app-icon-wrap" onclick="openApp('terminal')">
          <div class="app-icon ai-terminal" style="font-family:monospace;font-size:20px;color:#56d364">$_</div>
          <div class="app-label">Terminal</div>
        </div>

      </div>
    </div>
    <div class="dock-spacer"></div>
  </div>

  <!-- FILE MANAGER -->
  <div class="screen" id="screen-files">
    <div class="app-header">
      <div class="app-icon-wrap" onclick="goHome()" style="cursor:pointer">
        <div style="font-size:20px">‹</div>
      </div>
      <div class="app-header-icon ai-files" style="font-size:18px">📁</div>
      <h1>Files</h1>
      <button class="header-btn">🔍</button>
      <button class="header-btn">⋮</button>
    </div>
    <div class="files-layout">
      <div class="files-sidebar">
        <div class="sidebar-section">
          <span class="sidebar-label">Browse</span>
          <div class="sidebar-item active" onclick="loadFiles('/')"><span class="si-icon">🏠</span> Root</div>
          <div class="sidebar-item" onclick="loadFiles('/app')"><span class="si-icon">⚙️</span> App</div>
          <div class="sidebar-item" onclick="loadFiles('/trey/backend')"><span class="si-icon">🐍</span> Backend</div>
          <div class="sidebar-item" onclick="loadFiles('/trey/frontend')"><span class="si-icon">🌐</span> Frontend</div>
          <div class="sidebar-item" onclick="loadFiles('/tmp')"><span class="si-icon">🗂️</span> Temp</div>
        </div>
        <div class="sidebar-section">
          <span class="sidebar-label">Locations</span>
          <div class="sidebar-item" onclick="loadFiles('/')"><span class="si-icon">💾</span> /</div>
          <div class="sidebar-item" onclick="loadFiles('/app')"><span class="si-icon">📦</span> /app</div>
          <div class="sidebar-item" onclick="loadFiles('/tmp')"><span class="si-icon">🗂️</span> /tmp</div>
          <div class="sidebar-item" onclick="loadFiles('/home')"><span class="si-icon">🏠</span> /home</div>
        </div>
        <div class="storage-stat">
          <div class="st-label">Storage</div>
          <div class="st-bar"><div class="st-fill"></div></div>
          <div class="st-val" id="storage-val">— GB</div>
        </div>
      </div>
      <div class="files-main" id="files-main">
        <div id="files-breadcrumb" style="font-size:11px;color:var(--text-secondary);padding:2px 2px 10px;font-family:monospace">/</div>
        <div id="files-content">
          <div style="text-align:center;padding:40px 0;color:var(--text-secondary);font-size:13px">Loading filesystem...</div>
        </div>
        <div style="height:80px"></div>
      </div>
    </div>
    <div class="dock-spacer"></div>
  </div>

  <!-- CODE EDITOR -->
  <div class="screen" id="screen-editor">
    <div class="app-header">
      <div onclick="goHome()" style="cursor:pointer;font-size:20px;color:#e6edf3;padding:4px">‹</div>
      <div class="app-header-icon ai-terminal" style="font-size:16px;font-family:monospace;font-weight:700;color:#56d364">$_</div>
      <h1>Editor</h1>
      <button class="header-btn">⊕</button>
      <button class="header-btn">⋮</button>
    </div>
    <div class="editor-layout">
      <div class="editor-tabs" id="editor-tabs">
        <div class="editor-tab active">Terminal</div>
      </div>
      <div class="editor-body">
        <div class="code-area" id="code-area" style="display:none"></div>
      </div>
      <div class="editor-terminal" id="editor-terminal">
        <div class="term-input">
          <span class="term-prompt">$</span>
          <input type="text" id="term-input" placeholder="Connecting to terminal...">
        </div>
      </div>
    </div>
    <div class="dock-spacer"></div>
  </div>

  <!-- SETTINGS -->
  <div class="screen" id="screen-settings">
    <div class="app-header">
      <div onclick="goHome()" style="cursor:pointer;font-size:20px;padding:4px">‹</div>
      <div class="app-header-icon ai-settings" style="font-size:18px">⚙️</div>
      <h1>Settings</h1>
    </div>
    <div class="settings-list">
      <div class="settings-section">
        <div class="settings-section-title">Appearance</div>
        <div class="settings-card">
          <div class="settings-row">
            <div class="sr-icon" style="background:#f0f4ff">🎨</div>
            <div class="sr-label">Accent Color</div>
            <div class="theme-row" style="padding:0;gap:6px">
              <div class="theme-dot active" style="background:#6366f1" onclick="setAccent('#6366f1',this)"></div>
              <div class="theme-dot" style="background:#ec4899" onclick="setAccent('#ec4899',this)"></div>
              <div class="theme-dot" style="background:#10b981" onclick="setAccent('#10b981',this)"></div>
              <div class="theme-dot" style="background:#f59e0b" onclick="setAccent('#f59e0b',this)"></div>
            </div>
          </div>
          <div class="settings-row">
            <div class="sr-icon" style="background:#f0f4ff">🌙</div>
            <div class="sr-label">Dark Mode</div>
            <div class="toggle" id="dark-toggle" onclick="this.classList.toggle('on')"></div>
          </div>
          <div class="settings-row">
            <div class="sr-icon" style="background:#f0f4ff">🖼️</div>
            <div class="sr-label">Wallpaper</div>
            <div class="sr-value">Periwinkle</div>
            <div class="sr-arrow">›</div>
          </div>
        </div>
      </div>

      <div class="settings-section">
        <div class="settings-section-title">System</div>
        <div class="settings-card">
          <div class="settings-row">
            <div class="sr-icon" style="background:#fff0f0">🔒</div>
            <div class="sr-label">Security</div>
            <div class="sr-arrow">›</div>
          </div>
          <div class="settings-row">
            <div class="sr-icon" style="background:#f0fff4">👥</div>
            <div class="sr-label">Users</div>
            <div class="sr-value">1 active</div>
            <div class="sr-arrow">›</div>
          </div>
          <div class="settings-row">
            <div class="sr-icon" style="background:#f0f0ff">🐳</div>
            <div class="sr-label">Docker</div>
            <div class="toggle on" onclick="this.classList.toggle('on')"></div>
          </div>
          <div class="settings-row">
            <div class="sr-icon" style="background:#fffbf0">💾</div>
            <div class="sr-label">Storage</div>
            <div class="sr-value">128 / 256 GB</div>
            <div class="sr-arrow">›</div>
          </div>
        </div>
      </div>

      <div class="settings-section">
        <div class="settings-section-title">Server Info</div>
        <div class="server-info">
          <div class="info-row"><span class="info-key">Hostname</span><span class="info-val" id="info-hostname">—</span></div>
          <div class="info-row"><span class="info-key">OS</span><span class="info-val" id="info-os">—</span></div>
          <div class="info-row"><span class="info-key">Kernel</span><span class="info-val" id="info-kernel">—</span></div>
          <div class="info-row"><span class="info-key">Uptime</span><span class="info-val" id="info-uptime">—</span></div>
          <div class="info-row"><span class="info-key">TreyOS</span><span class="info-val">v1.0.0</span></div>
          <div class="info-row"><span class="info-key">IP</span><span class="info-val" id="info-ip">—</span></div>
        </div>
      </div>

      <div class="settings-section">
        <div class="settings-section-title">About</div>
        <div class="settings-card">
          <div class="settings-row">
            <div class="sr-icon" style="background:#f0f4ff">ℹ️</div>
            <div class="sr-label">TreyOS Version</div>
            <div class="sr-value">1.0.0</div>
          </div>
          <div class="settings-row">
            <div class="sr-icon" style="background:#f0f4ff">📦</div>
            <div class="sr-label">App Store</div>
            <div class="sr-arrow">›</div>
          </div>
        </div>
      </div>
      <div style="height:80px"></div>
    </div>
    <div class="dock-spacer"></div>
  </div>

  <!-- VIDEO PLAYER -->
  <div class="screen" id="screen-video">
    <div class="app-header">
      <div onclick="goHome()" style="cursor:pointer;font-size:20px;color:white;padding:4px">‹</div>
      <div class="app-header-icon ai-video" style="font-size:18px">▶️</div>
      <h1>Videos</h1>
      <button class="header-btn">⋮</button>
    </div>
    <div class="video-player-area">
      <div class="video-overlay">
        <div class="video-play-btn">▶</div>
      </div>
      <div id="video-now-playing" style="position:absolute;bottom:0;left:0;right:0;padding:10px 14px;background:linear-gradient(transparent,rgba(0,0,0,0.7));display:none">
        <div id="video-title" style="font-size:13px;font-weight:600;color:white"></div>
        <div id="video-info" style="font-size:10px;color:rgba(255,255,255,0.6)"></div>
      </div>
    </div>
    <div class="video-controls">
      <div class="video-progress"><div class="video-fill"></div></div>
      <div class="video-ctrl-row">
        <button class="vc-btn">⏮</button>
        <button class="vc-btn">⏪</button>
        <button class="vc-btn" style="font-size:24px">▶</button>
        <button class="vc-btn">⏩</button>
        <button class="vc-btn">⏭</button>
        <span class="vc-time">3:29 / 9:56</span>
        <button class="vc-btn">📋</button>
        <button class="vc-btn">⛶</button>
      </div>
    </div>
    <div class="video-list" id="video-list">
      <div style="text-align:center;padding:40px 0;color:rgba(255,255,255,0.3);font-size:13px">Loading videos...</div>
    </div>
    <div class="dock-spacer"></div>
  </div>

  <!-- GALLERY -->
  <div class="screen" id="screen-gallery">
    <div class="app-header">
      <div onclick="goHome()" style="cursor:pointer;font-size:20px;padding:4px">‹</div>
      <div class="app-header-icon ai-gallery" style="font-size:18px">🖼️</div>
      <h1>Gallery</h1>
      <button class="header-btn">🔍</button>
      <button class="header-btn">⋮</button>
    </div>
    <div class="gallery-toolbar">
      <div class="gallery-tab active">All</div>
      <div class="gallery-tab">Photos</div>
      <div class="gallery-tab">Videos</div>
      <div class="gallery-tab">Screenshots</div>
      <div class="gallery-tab">Downloads</div>
    </div>
    <div class="gallery-grid" id="gallery-grid">
      <div style="grid-column:span 3;text-align:center;padding:40px 0;color:var(--text-secondary);font-size:13px">Loading images...</div>
    </div>
    <div class="dock-spacer"></div>
  </div>

  <!-- BROWSER -->
  <div class="screen" id="screen-browser">
    <div class="app-header">
      <div onclick="goHome()" style="cursor:pointer;font-size:20px;padding:4px">‹</div>
      <div class="app-header-icon ai-browser" style="font-size:18px">🌐</div>
      <h1>Browser</h1>
      <button class="header-btn">⊕</button>
    </div>
    <div class="browser-tabs">
      <div class="btab active">🌐 New Tab</div>
<div class="btab">⊕</div>
    </div>
    <div class="browser-bar">
      <button class="browser-btn">‹</button>
      <button class="browser-btn">›</button>
      <input class="url-bar" type="text" value="https://localhost:8000" placeholder="Search or enter URL">
      <button class="browser-btn">↻</button>
    </div>
    <div class="browser-content" style="display:flex;align-items:center;justify-content:center;flex:1;background:#1a1a2e;">
      <div style="text-align:center;color:rgba(255,255,255,0.3)">
        <div style="font-size:32px;margin-bottom:12px">🌐</div>
        <div style="font-size:13px">Enter a URL above and press Enter</div>
        <div style="font-size:11px;margin-top:6px;opacity:0.6">Browser requires Playwright backend</div>
      </div>
    </div>
    <div class="dock-spacer"></div>
  </div>


  <!-- TERMINAL -->
  <div class="screen" id="screen-terminal">
    <div class="app-header" style="background:#161b22;border-bottom-color:#30363d;">
      <div onclick="goHome()" style="cursor:pointer;font-size:20px;color:#e6edf3;padding:4px">‹</div>
      <div class="app-header-icon ai-terminal" style="font-family:monospace;font-size:14px;font-weight:700;color:#56d364">$_</div>
      <h1 style="color:#e6edf3">Terminal</h1>
    </div>
    <div style="flex:1;display:flex;flex-direction:column;background:#010409;overflow:hidden;">
      <div id="terminal-output" style="flex:1;overflow-y:auto;padding:12px 14px;font-family:'Courier New',monospace;font-size:13px;color:#7ee787;"></div>
      <div style="display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid #30363d;background:#0d1117;">
        <span style="color:#56d364;font-family:monospace;font-size:13px">$</span>
        <input id="terminal-input" type="text" placeholder="Connecting..."
          style="flex:1;background:transparent;border:none;color:#e6edf3;font-family:'Courier New',monospace;font-size:13px;outline:none;">
      </div>
    </div>
    <div class="dock-spacer"></div>
  </div>

  <!-- DOCK -->
  <div class="dock">
    <div class="dock-bg"></div>
    <div class="dock-item" onclick="openApp('home')">
      <div class="dock-icon ai-files">🏠</div>
      <div class="dock-dot" id="dot-home"></div>
    </div>
    <div class="dock-item" onclick="openApp('files')">
      <div class="dock-icon ai-files">📁</div>
      <div class="dock-dot" id="dot-files"></div>
    </div>
    <div class="dock-item" onclick="openApp('editor')">
      <div class="dock-icon ai-terminal" style="font-family:monospace;font-size:16px;color:#56d364">$_</div>
      <div class="dock-dot" id="dot-editor"></div>
    </div>
    <div class="dock-item" onclick="openApp('browser')">
      <div class="dock-icon ai-browser">🌐</div>
      <div class="dock-dot" id="dot-browser"></div>
    </div>
    <div class="dock-item" onclick="openApp('terminal')">
      <div class="dock-icon ai-terminal" style="font-family:monospace;font-size:18px;color:#56d364">$_</div>
      <div class="dock-dot" id="dot-terminal"></div>
    </div>
    <div class="dock-item" onclick="openApp('settings')">
      <div class="dock-icon ai-settings">⚙️</div>
      <div class="dock-dot" id="dot-settings"></div>
    </div>
  </div>
</div>

<script>
  // Clock
  function updateClock() {
    const now = new Date();
    const t = now.toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'});
    const d = now.toLocaleDateString([], {weekday:'short',month:'short',day:'numeric'});
    document.getElementById('clock').textContent = t;
    document.getElementById('datestr').textContent = d;
    document.getElementById('sb-time').textContent = t;
  }
  updateClock();
  setInterval(updateClock, 10000);

  // Splash
  setTimeout(() => {
    document.getElementById('splash').classList.add('hidden');
  }, 2000);

  // Navigation
  let current = 'home';
  function openApp(id) {
    document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
    document.querySelectorAll('.dock-dot').forEach(d => d.classList.remove('active'));
    const target = id === 'home' ? 'screen-home' : `screen-${id}`;
    const el = document.getElementById(target);
    if (el) el.classList.add('active');
    const dot = document.getElementById(`dot-${id}`);
    if (dot) dot.classList.add('active');
    const homeDot = document.getElementById('dot-home');
    if (id === 'home' && homeDot) homeDot.classList.add('active');
    current = id;
  }
  function goHome() { openApp('home'); }

  // Gallery tabs
  document.querySelectorAll('.gallery-tab').forEach(tab => {
    tab.addEventListener('click', () => {
      document.querySelectorAll('.gallery-tab').forEach(t => t.classList.remove('active'));
      tab.classList.add('active');
    });
  });

  // Accent color
  function setAccent(color, el) {
    document.documentElement.style.setProperty('--accent', color);
    document.querySelectorAll('.theme-dot').forEach(d => d.classList.remove('active'));
    el.classList.add('active');
  }

  // ── BACKEND ───────────────────────────────────────────────────────────────
  const API = window.location.origin;
  const WS  = API.replace(/^http/, 'ws');

  // ── UTILS ─────────────────────────────────────────────────────────────────
  function formatBytes(b) {
    if (!b) return '0 B';
    if (b > 1e9) return (b/1e9).toFixed(1)+' GB';
    if (b > 1e6) return (b/1e6).toFixed(1)+' MB';
    if (b > 1e3) return (b/1e3).toFixed(1)+' KB';
    return b+' B';
  }

  function fileIcon(ext) {
    const m = {'.pdf':'📕','.doc':'📘','.docx':'📘','.xls':'📗','.xlsx':'📗',
      '.jpg':'🖼️','.jpeg':'🖼️','.png':'🖼️','.gif':'🖼️','.webp':'🖼️',
      '.mp4':'🎬','.mkv':'🎬','.mov':'🎬','.webm':'🎬','.avi':'🎬',
      '.mp3':'🎵','.wav':'🎵','.flac':'🎵','.ogg':'🎵',
      '.py':'🐍','.js':'📜','.ts':'📜','.json':'📋','.sh':'⚡',
      '.zip':'📦','.tar':'📦','.gz':'📦','.txt':'📝','.md':'📝',
      '.html':'🌐','.css':'🎨','.env':'🔐','.yml':'⚙️','.yaml':'⚙️'};
    return m[ext] || '📄';
  }

  function isImage(ext) {
    return ['.jpg','.jpeg','.png','.gif','.webp','.bmp','.svg'].includes(ext);
  }
  function isVideo(ext) {
    return ['.mp4','.mkv','.webm','.mov','.avi','.m4v'].includes(ext);
  }

  // ── SYSTEM STATS ──────────────────────────────────────────────────────────
  function connectSystemStats() {
    const ws = new WebSocket(`${WS}/ws/system?interval=3`);
    ws.onmessage = e => {
      try {
        const msg = JSON.parse(e.data);
        if (msg.type !== 'stats') return;
        const { cpu, memory, disk } = msg.data;

        // Home screen bars
        const cb = document.getElementById('cpu-bar');   if(cb) cb.style.width = cpu.percent+'%';
        const cv = document.getElementById('cpu-val');   if(cv) cv.textContent = cpu.percent+'%';
        const rb = document.getElementById('ram-bar');   if(rb) rb.style.width = memory.percent+'%';
        const rv = document.getElementById('ram-val');   if(rv) rv.textContent = memory.used_gb+' GB';
        const db = document.getElementById('disk-bar');  if(db) db.style.width = disk.percent+'%';
        const dv = document.getElementById('disk-val');  if(dv) dv.textContent = disk.used_gb+' GB';

        // Settings server info
        const d = msg.data;
        const set = (id, v) => { const el = document.getElementById(id); if(el) el.textContent = v; };
        set('info-hostname', d.hostname);
        set('info-os', d.os);
        set('info-kernel', d.os);
        set('info-uptime', d.uptime);

        // Files sidebar storage
        const sf = document.getElementById('storage-fill');
        const sv = document.getElementById('storage-val');
        if(sf) sf.style.width = disk.percent+'%';
        if(sv) sv.textContent = `${disk.used_gb} / ${disk.total_gb} GB`;
      } catch(_) {}
    };
    ws.onclose = () => setTimeout(connectSystemStats, 5000);
    ws.onerror = () => ws.close();
  }
  connectSystemStats();

  // ── FILE MANAGER ──────────────────────────────────────────────────────────
  let currentPath = '/';

  async function loadFiles(path) {
    path = path || '/';
    currentPath = path;

    const breadcrumb = document.getElementById('files-breadcrumb');
    const content    = document.getElementById('files-content');
    if (!content) return;

    if (breadcrumb) breadcrumb.textContent = path;
    content.innerHTML = '<div style="text-align:center;padding:30px 0;color:var(--text-secondary);font-size:12px">Loading...</div>';

    try {
      const res = await fetch(`${API}/api/files?path=${encodeURIComponent(path)}`);
      if (!res.ok) throw new Error(await res.text());
      const data = await res.json();

      if (!data.entries.length) {
        content.innerHTML = '<div style="text-align:center;padding:30px 0;color:var(--text-secondary);font-size:12px">Empty folder</div>';
        return;
      }

      // Back button if not root
      let html = '';
      if (data.parent && path !== '/') {
        html += `<div class="file-row" onclick="loadFiles('${data.parent}')">
          <div class="file-icon">⬆️</div>
          <div class="file-info"><div class="file-name">..</div><div class="file-meta">Parent directory</div></div>
        </div>`;
      }

      html += data.entries.map(e => {
        const click = e.type === 'dir'
          ? `loadFiles('${e.path.replace(/'/g,"\\'")}')` 
          : `openFile('${e.path.replace(/'/g,"\\'")}','${e.extension||''}')`;
        return `<div class="file-row" onclick="${click}">
          <div class="file-icon">${e.type === 'dir' ? '📁' : fileIcon(e.extension)}</div>
          <div class="file-info">
            <div class="file-name">${e.name}</div>
            <div class="file-meta">${e.type === 'dir' ? 'Folder' : formatBytes(e.size)} • ${e.modified ? e.modified.split('T')[0] : ''}</div>
          </div>
          <div class="file-menu">⋮</div>
        </div>`;
      }).join('');

      content.innerHTML = '<div class="file-list">'+html+'</div>';
    } catch(err) {
      content.innerHTML = `<div style="text-align:center;padding:30px;color:#ef4444;font-size:12px">Error: ${err.message}</div>`;
    }
  }

  function openFile(path, ext) {
    if (isImage(ext)) {
      window.open(`${API}/api/files/download?path=${encodeURIComponent(path)}`, '_blank');
    } else if (isVideo(ext)) {
      openApp('video');
      playVideo(path);
    } else {
      // Open in editor
      openApp('editor');
      loadFileInEditor(path);
    }
  }

  // ── GALLERY ───────────────────────────────────────────────────────────────
  async function loadGallery(filterExt = null) {
    const grid = document.getElementById('gallery-grid');
    if (!grid) return;
    grid.innerHTML = '<div style="grid-column:span 3;text-align:center;padding:30px 0;color:var(--text-secondary);font-size:12px">Scanning for images...</div>';

    try {
      // Search entire filesystem for images
      const exts = filterExt
        ? [filterExt]
        : ['.jpg','.jpeg','.png','.gif','.webp','.bmp'];

      const results = [];
      for (const ext of exts) {
        const res = await fetch(`${API}/api/files/search?path=/&query=${ext}&limit=30`);
        if (res.ok) {
          const data = await res.json();
          results.push(...data.results.filter(r => r.type === 'file' && isImage(r.extension)));
        }
      }

      if (!results.length) {
        grid.innerHTML = '<div style="grid-column:span 3;text-align:center;padding:40px 0;color:var(--text-secondary);font-size:13px">No images found on this system</div>';
        return;
      }

      grid.innerHTML = results.map(img => `
        <div class="gallery-cell" onclick="window.open('${API}/api/files/download?path=${encodeURIComponent(img.path)}','_blank')"
          style="background:#1a1a2e;position:relative;">
          <img src="${API}/api/files/download?path=${encodeURIComponent(img.path)}"
            style="width:100%;height:100%;object-fit:cover;position:absolute;inset:0;"
            onerror="this.style.display='none'"
            loading="lazy">
          <div class="cell-overlay"></div>
        </div>`).join('');
    } catch(err) {
      grid.innerHTML = `<div style="grid-column:span 3;text-align:center;padding:30px;color:#ef4444;font-size:12px">Error: ${err.message}</div>`;
    }
  }

  // Gallery tab filtering
  document.querySelectorAll('.gallery-tab').forEach((tab, i) => {
    tab.addEventListener('click', () => {
      document.querySelectorAll('.gallery-tab').forEach(t => t.classList.remove('active'));
      tab.classList.add('active');
    });
  });

  // ── VIDEO PLAYER ──────────────────────────────────────────────────────────
  async function loadVideoLibrary() {
    const list = document.getElementById('video-list');
    if (!list) return;
    list.innerHTML = '<div style="text-align:center;padding:20px;color:rgba(255,255,255,0.3);font-size:12px">Scanning for videos...</div>';

    try {
      const res = await fetch(`${API}/api/files/search?path=/&query=.mp4&limit=20`);
      const data = await res.json();
      const videos = data.results.filter(r => isVideo(r.extension));

      // Also search for mkv and webm
      const res2 = await fetch(`${API}/api/files/search?path=/&query=.mkv&limit=10`);
      const data2 = await res2.json();
      videos.push(...data2.results.filter(r => isVideo(r.extension)));

      if (!videos.length) {
        list.innerHTML = '<div style="text-align:center;padding:40px;color:rgba(255,255,255,0.3);font-size:13px">No videos found on this system</div>';
        return;
      }

      list.innerHTML = '<div style="font-size:11px;font-weight:600;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:0.06em;padding:8px 8px 4px">Library</div>'
        + videos.map(v => `
        <div class="video-item" onclick="playVideo('${v.path.replace(/'/g,"\\'")}','${v.name}')">
          <div class="video-thumb-mini">🎬</div>
          <div>
            <div class="vi-name">${v.name}</div>
            <div class="vi-meta">${formatBytes(v.size)} • ${v.modified ? v.modified.split('T')[0] : ''}</div>
          </div>
        </div>`).join('');
    } catch(err) {
      list.innerHTML = `<div style="text-align:center;padding:20px;color:#ef4444;font-size:12px">Error: ${err.message}</div>`;
    }
  }

  function playVideo(path, name) {
    const url = `${API}/api/files/download?path=${encodeURIComponent(path)}`;
    const overlay = document.querySelector('.video-overlay');
    const area = document.querySelector('.video-player-area');
    // Remove old video element
    const old = area.querySelector('video');
    if (old) old.remove();
    // Create real video element
    const vid = document.createElement('video');
    vid.src = url;
    vid.controls = false;
    vid.style = 'position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000';
    area.appendChild(vid);
    if (overlay) overlay.style.display = 'none';
    // Update now playing
    document.getElementById('video-title').textContent = name || path.split('/').pop();
    document.getElementById('video-now-playing').style.display = 'block';
    vid.play();
    // Wire play button
    document.querySelector('.video-play-btn').onclick = () => vid.paused ? vid.play() : vid.pause();
  }

  // ── EDITOR / TERMINAL ─────────────────────────────────────────────────────
  async function loadFileInEditor(path) {
    const area = document.getElementById('code-area');
    if (!area) return;
    area.style.display = 'block';
    area.textContent = 'Loading...';
    try {
      const res = await fetch(`${API}/api/files/read?path=${encodeURIComponent(path)}`);
      const data = await res.json();
      area.textContent = data.content;
    } catch(e) {
      area.textContent = 'Could not read file.';
    }
  }

  // Terminal WebSocket
  let termWs = null;
  let termReady = false;

  function connectTerminal() {
    const terminal = document.getElementById('editor-terminal');
    const input    = document.getElementById('term-input');
    if (!input) return;

    termWs = new WebSocket(`${WS}/ws/terminal?cwd=/`);

    termWs.onopen = () => {
      termReady = true;
      input.placeholder = 'Enter command...';
    };

    termWs.onmessage = e => {
      try {
        const msg = JSON.parse(e.data);
        const text = msg.data || msg.message || '';
        if (!text && msg.type === 'prompt') {
          input.placeholder = `${msg.cwd} $`;
          return;
        }
        if (text) {
          const line = document.createElement('div');
          line.className = 'term-line';
          line.style.whiteSpace = 'pre-wrap';
          line.textContent = text;
          terminal.insertBefore(line, input.parentElement);
          terminal.scrollTop = terminal.scrollHeight;
        }
        if (msg.type === 'prompt') input.placeholder = `${msg.cwd || '/'} $`;
      } catch(_) {}
    };

    termWs.onclose = () => {
      termReady = false;
      input.placeholder = 'Disconnected — reconnecting...';
      setTimeout(connectTerminal, 3000);
    };

    input.addEventListener('keydown', ev => {
      if (ev.key !== 'Enter') return;
      const cmd = input.value.trim();
      if (!cmd) return;
      const echo = document.createElement('div');
      echo.className = 'term-line';
      echo.style.color = '#56d364';
      echo.textContent = '$ ' + cmd;
      terminal.insertBefore(echo, input.parentElement);
      if (termReady) termWs.send(JSON.stringify({ type: 'command', data: cmd }));
      input.value = '';
    });
  }
  connectTerminal();

  // ── NAVIGATION ────────────────────────────────────────────────────────────
  function openApp(id) {
    document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
    document.querySelectorAll('.dock-dot').forEach(d => d.classList.remove('active'));
    const target = id === 'home' ? 'screen-home' : `screen-${id}`;
    const el = document.getElementById(target);
    if (el) el.classList.add('active');
    const dot = document.getElementById(`dot-${id}`);
    if (dot) dot.classList.add('active');
    if (id === 'home') { const h = document.getElementById('dot-home'); if(h) h.classList.add('active'); }

    // Lazy-load each app on first open
    if (id === 'files')   loadFiles('/');
    if (id === 'terminal') initStandaloneTerminal();
    if (id === 'gallery') loadGallery();
    if (id === 'browser' && !browserWsReady) browserConnect();
    if (id === 'video')   loadVideoLibrary();
  }

  function goHome() { openApp('home'); }



  // ── EDITOR ────────────────────────────────────────────────────────────────
  const editorTabs = [];
  let editorActive = null;

  function editorNewFile() {
    const name = 'untitled-' + (editorTabs.length + 1) + '.txt';
    const tab = { name, path: null, content: '', dirty: false };
    editorTabs.push(tab);
    editorActivate(tab);
  }

  function editorActivate(tab) {
    editorActive = tab;
    renderEditorTabs();
    const code = document.getElementById('editor-code');
    const empty = document.getElementById('editor-empty');
    const pathBar = document.getElementById('editor-path-bar');
    const saveBtn = document.getElementById('editor-save-btn');
    if (code && empty) {
      code.style.display = 'block';
      empty.style.display = 'none';
      code.value = tab.content;
      code.oninput = () => {
        tab.content = code.value;
        if (!tab.dirty) { tab.dirty = true; renderEditorTabs(); }
      };
    }
    if (pathBar) {
      pathBar.textContent = tab.path || 'New File — unsaved';
      pathBar.style.display = 'block';
    }
    if (saveBtn) saveBtn.style.display = 'flex';
  }

  function renderEditorTabs() {
    const bar = document.getElementById('editor-tabs');
    if (!bar) return;
    bar.innerHTML = editorTabs.map((t, i) => `
      <div onclick="editorActivate(editorTabs[${i}])"
        style="padding:8px 14px;font-size:12px;cursor:pointer;white-space:nowrap;flex-shrink:0;
               border-right:1px solid #30363d;display:flex;align-items:center;gap:6px;
               background:${t===editorActive?'#0d1117':'transparent'};
               color:${t===editorActive?'#e6edf3':'#8b949e'};
               border-bottom:${t===editorActive?'2px solid #6366f1':'2px solid transparent'}">
        <span>${t.dirty?'●':''} ${t.name}</span>
        <span onclick="event.stopPropagation();editorCloseTab(${i})"
          style="color:#6e7681;font-size:14px;line-height:1;">×</span>
      </div>`).join('');
  }

  function editorCloseTab(i) {
    editorTabs.splice(i, 1);
    if (editorActive === editorTabs[i]) editorActive = editorTabs[i-1] || editorTabs[0] || null;
    if (!editorTabs.length) {
      editorActive = null;
      const code = document.getElementById('editor-code');
      const empty = document.getElementById('editor-empty');
      const pathBar = document.getElementById('editor-path-bar');
      const saveBtn = document.getElementById('editor-save-btn');
      if (code) code.style.display = 'none';
      if (empty) empty.style.display = 'flex';
      if (pathBar) pathBar.style.display = 'none';
      if (saveBtn) saveBtn.style.display = 'none';
    } else {
      editorActivate(editorActive || editorTabs[0]);
    }
    renderEditorTabs();
  }

  async function editorSave() {
    if (!editorActive) return;
    const code = document.getElementById('editor-code');
    if (code) editorActive.content = code.value;

    if (!editorActive.path) {
      const p = prompt('Save as (full path):', '/app/' + editorActive.name);
      if (!p) return;
      editorActive.path = p;
      editorActive.name = p.split('/').pop();
    }
    try {
      const res = await fetch(`${API}/api/files/write?path=${encodeURIComponent(editorActive.path)}&content=${encodeURIComponent(editorActive.content)}`, {method:'POST'});
      if (!res.ok) throw new Error(await res.text());
      editorActive.dirty = false;
      renderEditorTabs();
      document.getElementById('editor-path-bar').textContent = editorActive.path;
    } catch(e) {
      alert('Save failed: ' + e.message);
    }
  }

  async function editorOpenFile(path) {
    // Check if already open
    const existing = editorTabs.find(t => t.path === path);
    if (existing) { editorActivate(existing); return; }
    try {
      const res = await fetch(`${API}/api/files/read?path=${encodeURIComponent(path)}`);
      if (!res.ok) throw new Error(await res.text());
      const data = await res.json();
      const name = path.split('/').pop();
      const tab = { name, path, content: data.content, dirty: false };
      editorTabs.push(tab);
      editorActivate(tab);
    } catch(e) {
      alert('Cannot open file: ' + e.message);
    }
  }

  async function editorOpenPicker() {
    const picker = document.getElementById('editor-picker');
    if (!picker) return;
    picker.style.display = 'flex';
    picker.style.flexDirection = 'column';
    await editorPickerLoad('/');
    document.getElementById('editor-picker-path').addEventListener('keydown', async ev => {
      if (ev.key === 'Enter') await editorPickerLoad(ev.target.value);
    });
  }

  async function editorPickerLoad(path) {
    document.getElementById('editor-picker-path').value = path;
    const list = document.getElementById('editor-picker-list');
    list.innerHTML = '<div style="color:#8b949e;padding:8px;font-size:12px">Loading...</div>';
    try {
      const res = await fetch(`${API}/api/files?path=${encodeURIComponent(path)}`);
      const data = await res.json();
      const parent = data.parent;
      let html = parent ? `<div onclick="editorPickerLoad('${parent}')"
        style="padding:10px;color:#8b949e;font-family:monospace;font-size:12px;cursor:pointer;border-bottom:1px solid #21262d;">⬆ ..</div>` : '';
      html += data.entries.map(e => `
        <div onclick="${e.type==='dir' ? `editorPickerLoad('${e.path.replace(/'/g,"\'")}')` : `editorPickOpenFile('${e.path.replace(/'/g,"\'")}')` }"
          style="padding:10px 12px;font-size:13px;cursor:pointer;border-bottom:1px solid #21262d;
                 color:${e.type==='dir'?'#a5b4fc':'#e6edf3'};font-family:monospace;
                 display:flex;align-items:center;gap:8px;">
          ${e.type==='dir'?'📁':'📄'} ${e.name}
        </div>`).join('');
      list.innerHTML = html || '<div style="color:#6e7681;padding:12px;font-size:12px">Empty</div>';
    } catch(e) {
      list.innerHTML = `<div style="color:#ef4444;padding:12px;font-size:12px">${e.message}</div>`;
    }
  }

  function editorPickOpenFile(path) {
    document.getElementById('editor-picker').style.display = 'none';
    editorOpenFile(path);
  }
  window.editorPickOpenFile = editorPickOpenFile;
  window.editorPickerLoad = editorPickerLoad;

  // ── BROWSER (Playwright WebSocket) ────────────────────────────────────────
  let browserWs = null, browserWsReady = false;

  function browserConnect() {
    browserWs = new WebSocket(`${WS}/ws/browser`);
    browserWs.onopen = () => { browserWsReady = true; };
    browserWs.onmessage = e => {
      try {
        const msg = JSON.parse(e.data);
        if (msg.type === 'screenshot') {
          const shot = document.getElementById('browser-shot');
          const empty = document.getElementById('browser-empty');
          const loading = document.getElementById('browser-loading');
          const errEl = document.getElementById('browser-error');
          if (shot) { shot.src = 'data:image/jpeg;base64,' + msg.data; shot.style.display='block'; }
          if (empty) empty.style.display = 'none';
          if (loading) loading.style.display = 'none';
          if (errEl) errEl.style.display = 'none';
          const urlInput = document.getElementById('browser-url');
          if (urlInput && msg.url) urlInput.value = msg.url;
        } else if (msg.type === 'loading') {
          document.getElementById('browser-loading').style.display = 'block';
          document.getElementById('browser-shot').style.display = 'none';
          document.getElementById('browser-error').style.display = 'none';
        } else if (msg.type === 'error') {
          const errEl = document.getElementById('browser-error');
          if (errEl) { errEl.textContent = msg.message; errEl.style.display = 'block'; }
          document.getElementById('browser-loading').style.display = 'none';
        }
      } catch(_) {}
    };
    browserWs.onclose = () => { browserWsReady = false; setTimeout(browserConnect, 3000); };
    browserWs.onerror = () => browserWs.close();
  }

  function browserSend(msg) {
    if (browserWs && browserWsReady) browserWs.send(JSON.stringify(msg));
  }

  function browserNav(url) {
    if (!url) return;
    if (!url.startsWith('http')) url = 'https://' + url;
    document.getElementById('browser-url').value = url;
    browserSend({ type: 'navigate', url });
  }

  function browserNew() {
    document.getElementById('browser-url').value = '';
    document.getElementById('browser-shot').style.display = 'none';
    document.getElementById('browser-empty').style.display = 'flex';
    document.getElementById('browser-empty').style.flexDirection = 'column';
    document.getElementById('browser-empty').style.alignItems = 'center';
    document.getElementById('browser-empty').style.justifyContent = 'center';
  }

  function browserClick(ev) {
    const img = document.getElementById('browser-shot');
    if (!img) return;
    const rect = img.getBoundingClientRect();
    // Scale click coords to 390x700 viewport
    const x = Math.round((ev.clientX - rect.left) / rect.width  * 390);
    const y = Math.round((ev.clientY - rect.top)  / rect.height * 700);
    browserSend({ type: 'click', x, y });
  }

  document.getElementById('browser-url')?.addEventListener('keydown', ev => {
    if (ev.key === 'Enter') browserNav(ev.target.value.trim());
  });

  // Connect browser WebSocket when browser app is opened
  window.browserConnect = browserConnect;

  // ── STANDALONE TERMINAL ───────────────────────────────────────────────────
  let stermWs = null, stermReady = false, stermInit = false;

  function initStandaloneTerminal() {
    if (stermInit) return;
    stermInit = true;
    const out   = document.getElementById('terminal-output');
    const input = document.getElementById('terminal-input');

    function addLine(text, color) {
      const line = document.createElement('div');
      line.style.whiteSpace = 'pre-wrap';
      line.style.marginBottom = '2px';
      if (color) line.style.color = color;
      line.textContent = text;
      out.appendChild(line);
      out.scrollTop = out.scrollHeight;
    }

    function connect() {
      stermWs = new WebSocket(`${WS}/ws/terminal?cwd=/`);
      stermWs.onopen = () => { stermReady = true; input.placeholder = 'Enter command...'; };
      stermWs.onmessage = e => {
        try {
          const msg = JSON.parse(e.data);
          if (msg.type === 'welcome') { addLine(msg.message, '#a5b4fc'); return; }
          if (msg.type === 'prompt')  { input.placeholder = (msg.cwd || '/') + ' $'; return; }
          if (msg.type === 'output' && msg.data) addLine(msg.data);
          if (msg.type === 'error'  && msg.data) addLine(msg.data, '#ef4444');
        } catch(_) {}
      };
      stermWs.onclose = () => {
        stermReady = false;
        input.placeholder = 'Reconnecting...';
        setTimeout(connect, 3000);
      };
    }
    connect();

    input.addEventListener('keydown', ev => {
      if (ev.key !== 'Enter') return;
      const cmd = input.value.trim();
      if (!cmd) return;
      addLine('$ ' + cmd, '#56d364');
      if (stermReady) stermWs.send(JSON.stringify({ type: 'command', data: cmd }));
      input.value = '';
    });
  }

  // Init
  openApp('home');

</script>
</body>
</html>