224 lines
11 KiB
HTML
224 lines
11 KiB
HTML
<!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>Atlus Desktop</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500&display=swap" rel="stylesheet">
|
|
<!-- xterm.js -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.min.css">
|
|
<!-- Atlus CSS -->
|
|
<link rel="stylesheet" href="/css/variables.css">
|
|
<link rel="stylesheet" href="/css/shell.css">
|
|
<link rel="stylesheet" href="/css/dock.css">
|
|
<link rel="stylesheet" href="/css/panel.css">
|
|
<link rel="stylesheet" href="/css/stage.css">
|
|
<link rel="stylesheet" href="/css/keyboard.css">
|
|
<link rel="stylesheet" href="/css/apps/terminal.css">
|
|
<link rel="stylesheet" href="/css/apps/files.css">
|
|
<link rel="stylesheet" href="/css/apps/services.css">
|
|
<link rel="stylesheet" href="/css/apps/tasks.css">
|
|
<link rel="stylesheet" href="/css/apps/settings.css">
|
|
<link rel="stylesheet" href="/css/apps/packages.css">
|
|
<link rel="stylesheet" href="/css/apps/editor.css">
|
|
<link rel="stylesheet" href="/css/apps/xdisplay.css">
|
|
</head>
|
|
<body>
|
|
<!-- ================================================================= -->
|
|
<!-- LEFT DOCK -->
|
|
<!-- ================================================================= -->
|
|
<aside id="dock" class="dock">
|
|
<div class="dock-top">
|
|
<button class="dock-item dock-logo" data-action="system-menu" title="System">
|
|
<span class="dock-icon">A</span>
|
|
<span class="dock-label">Atlus</span>
|
|
</button>
|
|
</div>
|
|
<nav class="dock-apps">
|
|
<button class="dock-item" data-app="terminal">
|
|
<span class="dock-icon">>_</span>
|
|
<span class="dock-label">Terminal</span>
|
|
</button>
|
|
<button class="dock-item" data-app="files">
|
|
<span class="dock-icon">📁</span>
|
|
<span class="dock-label">Files</span>
|
|
</button>
|
|
<button class="dock-item" data-app="services">
|
|
<span class="dock-icon">⚙</span>
|
|
<span class="dock-label">Services</span>
|
|
</button>
|
|
<button class="dock-item" data-app="tasks">
|
|
<span class="dock-icon">📊</span>
|
|
<span class="dock-label">Tasks</span>
|
|
</button>
|
|
<button class="dock-item" data-app="network">
|
|
<span class="dock-icon">🌐</span>
|
|
<span class="dock-label">Network</span>
|
|
</button>
|
|
<button class="dock-item" data-app="packages">
|
|
<span class="dock-icon">📦</span>
|
|
<span class="dock-label">Packages</span>
|
|
</button>
|
|
<button class="dock-item" data-app="xdisplay">
|
|
<span class="dock-icon">🖥</span>
|
|
<span class="dock-label">Display</span>
|
|
</button>
|
|
<div class="dock-separator"></div>
|
|
<button class="dock-item" data-app="asi-bridge">
|
|
<span class="dock-icon">🔭</span>
|
|
<span class="dock-label">ASI Bridge</span>
|
|
</button>
|
|
</nav>
|
|
<div class="dock-bottom">
|
|
<button class="dock-item" data-app="settings">
|
|
<span class="dock-icon">⚙</span>
|
|
<span class="dock-label">Settings</span>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- ================================================================= -->
|
|
<!-- CENTER STAGE -->
|
|
<!-- ================================================================= -->
|
|
<main id="stage" class="stage">
|
|
<!-- Tab bar -->
|
|
<div class="stage-tabbar" id="tabBar">
|
|
<div class="stage-tabs" id="stageTabs"></div>
|
|
<div class="stage-controls">
|
|
<button class="layout-btn active" data-layout="single" title="Single pane">
|
|
<svg width="16" height="16" viewBox="0 0 16 16"><rect x="1" y="1" width="14" height="14" rx="2" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
|
|
</button>
|
|
<button class="layout-btn" data-layout="split" title="Split view">
|
|
<svg width="16" height="16" viewBox="0 0 16 16"><rect x="1" y="1" width="14" height="14" rx="2" fill="none" stroke="currentColor" stroke-width="1.5"/><line x1="8" y1="1" x2="8" y2="15" stroke="currentColor" stroke-width="1.5"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- App panes -->
|
|
<div class="stage-panes" id="stagePanes">
|
|
<div class="stage-pane pane-primary" id="paneA">
|
|
<div class="pane-titlebar">
|
|
<div class="pane-dots">
|
|
<span class="dot dot-red"></span>
|
|
<span class="dot dot-amber"></span>
|
|
<span class="dot dot-green"></span>
|
|
</div>
|
|
<span class="pane-title" id="paneTitleA"></span>
|
|
</div>
|
|
<div class="pane-content" id="paneContentA">
|
|
<!-- Welcome state -->
|
|
<div class="welcome-screen" id="welcomeScreen">
|
|
<div class="welcome-logo">A</div>
|
|
<div class="welcome-text">Select an app from the dock to get started.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="stage-pane pane-secondary hidden" id="paneB">
|
|
<div class="pane-titlebar">
|
|
<div class="pane-dots">
|
|
<span class="dot dot-red"></span>
|
|
<span class="dot dot-amber"></span>
|
|
<span class="dot dot-green"></span>
|
|
</div>
|
|
<span class="pane-title" id="paneTitleB"></span>
|
|
</div>
|
|
<div class="pane-content" id="paneContentB"></div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- ================================================================= -->
|
|
<!-- RIGHT PANEL -->
|
|
<!-- ================================================================= -->
|
|
<aside id="panel" class="panel">
|
|
<!-- System info -->
|
|
<div class="panel-section panel-info">
|
|
<div class="panel-hostname" id="panelHostname">---</div>
|
|
<div class="panel-datetime">
|
|
<div class="panel-date" id="panelDate"></div>
|
|
<div class="panel-time" id="panelTime"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Update notification -->
|
|
<div class="panel-section panel-updates hidden" id="panelUpdates"></div>
|
|
|
|
<!-- Desktop Apps (tray) -->
|
|
<div class="panel-section panel-tray hidden" id="panelTray">
|
|
<div class="panel-section-title">DESKTOP APPS</div>
|
|
<div id="panelTrayApps" class="panel-tray-list"></div>
|
|
</div>
|
|
|
|
<!-- Network -->
|
|
<div class="panel-section panel-network">
|
|
<div class="panel-section-title">NETWORK</div>
|
|
<div id="panelNetwork" class="panel-net-list"></div>
|
|
</div>
|
|
|
|
<!-- Stats -->
|
|
<div class="panel-section panel-stats">
|
|
<div class="panel-section-title">SYSTEM</div>
|
|
<div class="stat-row">
|
|
<span class="stat-label">CPU</span>
|
|
<span class="stat-value" id="statCpu">--%</span>
|
|
<div class="stat-bar"><div class="stat-bar-fill" id="statCpuBar"></div></div>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="stat-label">MEM</span>
|
|
<span class="stat-value" id="statMem">--</span>
|
|
<div class="stat-bar"><div class="stat-bar-fill" id="statMemBar"></div></div>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="stat-label">DISK</span>
|
|
<span class="stat-value" id="statDisk">--%</span>
|
|
<div class="stat-bar"><div class="stat-bar-fill" id="statDiskBar"></div></div>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="stat-label">TEMP</span>
|
|
<span class="stat-value" id="statTemp">--°C</span>
|
|
<div class="stat-bar"><div class="stat-bar-fill" id="statTempBar"></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Services -->
|
|
<div class="panel-section panel-services">
|
|
<div class="panel-section-title">SERVICES</div>
|
|
<div id="panelServices" class="panel-service-list"></div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- ================================================================= -->
|
|
<!-- System menu overlay -->
|
|
<!-- ================================================================= -->
|
|
<div class="system-menu hidden" id="systemMenu">
|
|
<div class="system-menu-content">
|
|
<button class="system-menu-item" data-action="lock">Lock Screen</button>
|
|
<button class="system-menu-item" data-action="logout">Log Out</button>
|
|
<div class="system-menu-sep"></div>
|
|
<button class="system-menu-item" data-action="reboot">Reboot</button>
|
|
<button class="system-menu-item system-menu-danger" data-action="shutdown">Shut Down</button>
|
|
<div class="system-menu-sep"></div>
|
|
<div class="system-menu-about">Atlus v0.1.0</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ================================================================= -->
|
|
<!-- Scripts -->
|
|
<!-- ================================================================= -->
|
|
<script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.min.js"></script>
|
|
<script src="/js/atlus.js"></script>
|
|
<script src="/js/keyboard.js"></script>
|
|
<script src="/js/apps/terminal.js"></script>
|
|
<script src="/js/apps/files.js"></script>
|
|
<script src="/js/apps/services.js"></script>
|
|
<script src="/js/apps/tasks.js"></script>
|
|
<script src="/js/apps/settings.js"></script>
|
|
<script src="/js/apps/packages.js"></script>
|
|
<script src="/js/apps/editor.js"></script>
|
|
<script src="/js/apps/xdisplay.js"></script>
|
|
<script src="/js/apps/asi_bridge.js"></script>
|
|
</body>
|
|
</html>
|