168 lines
7.6 KiB
HTML
168 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>HELIOS Remote - Next-Gen Control Center</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div id="app" class="app-container">
|
|
<!-- Sidebar Navigation -->
|
|
<aside class="sidebar">
|
|
<div class="brand">
|
|
<div class="logo-icon">⚡</div>
|
|
<h1>HELIOS Remote</h1>
|
|
</div>
|
|
|
|
<div class="device-section">
|
|
<div class="section-title">REMOTE TARGET PCS</div>
|
|
<div id="deviceList" class="device-list">
|
|
<div class="device-card active" id="device-8201b455">
|
|
<div class="device-status online"></div>
|
|
<div class="device-info">
|
|
<div class="device-name">Office Workstation</div>
|
|
<div class="device-sub">DESKTOP-HELIOS • 1920x1080</div>
|
|
</div>
|
|
<span class="badge">ONLINE</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sidebar-footer">
|
|
<div class="connection-stat">
|
|
<span class="dot green"></span> TLS 1.3 Encrypted
|
|
</div>
|
|
<div class="session-info">Relay: 127.0.0.1:4000</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Display & Control Area -->
|
|
<main class="main-content">
|
|
<!-- Top Control Bar -->
|
|
<header class="top-bar">
|
|
<div class="target-title">
|
|
<span class="active-icon">🖥️</span>
|
|
<span id="activeDeviceTitle">Office Workstation (Active Session)</span>
|
|
</div>
|
|
|
|
<div class="control-tools">
|
|
<div class="tool-group">
|
|
<button id="wolBtn" class="btn wol-btn" title="Send Wake-on-LAN Magic Packet">⚡ WOL Boot</button>
|
|
</div>
|
|
|
|
<div class="tool-group">
|
|
<label for="monitorSelect">Display:</label>
|
|
<select id="monitorSelect" class="styled-select">
|
|
<option value="1">Display #1 (Primary 4K)</option>
|
|
<option value="2" selected>Display #2 (FHD 1080p)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="tool-group">
|
|
<input type="text" id="clipboardInput" placeholder="Clipboard Sync text..." class="styled-input">
|
|
<button id="sendClipboardBtn" class="btn secondary">Sync</button>
|
|
</div>
|
|
|
|
<div class="tool-group stats-group">
|
|
<span class="stat-pill ai" id="aiStat">🤖 AI: Optimal</span>
|
|
<span class="stat-pill" id="cpuStat">CPU: 24%</span>
|
|
<span class="stat-pill" id="ramStat">RAM: 42%</span>
|
|
<span class="stat-pill gpu" id="gpuStat">GPU: 35% (58°C)</span>
|
|
<span class="stat-pill docker" id="dockerStat">Docker: 2 Active</span>
|
|
<span class="stat-pill" id="fpsStat">FPS: 60</span>
|
|
</div>
|
|
|
|
</div>
|
|
</header>
|
|
|
|
|
|
<!-- Screen Viewport Canvas & Terminal Drawer -->
|
|
<section class="viewport-container">
|
|
<div class="canvas-wrapper">
|
|
<canvas id="remoteCanvas" width="1920" height="1080" tabindex="0"></canvas>
|
|
<div id="overlayBanner" class="overlay-banner">
|
|
<div class="spinner"></div>
|
|
<div id="overlayText">Connecting to HELIOS Relay Pipeline...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Remote Terminal Console Drawer -->
|
|
<div class="terminal-drawer">
|
|
<div class="terminal-header">
|
|
<span>💻 REMOTE SSH TERMINAL CONSOLE</span>
|
|
<button id="toggleTerminalBtn" class="btn-icon">_</button>
|
|
</div>
|
|
<div id="terminalOutput" class="terminal-output">
|
|
<div class="term-line system">HELIOS Terminal Engine v3.0 Ready. Type commands below...</div>
|
|
</div>
|
|
<div class="terminal-input-bar">
|
|
<span class="prompt">$</span>
|
|
<input type="text" id="terminalInput" placeholder="Enter shell command (e.g. hostname, uptime, ls)..." autocomplete="off">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Glassmorphism Authentication Modal Overlay -->
|
|
<div id="authModal" class="auth-overlay">
|
|
<div class="auth-card">
|
|
<div class="auth-header">
|
|
<div class="brand">
|
|
<span class="logo-icon">⚡</span>
|
|
<h2>HELIOS Remote Secure Login</h2>
|
|
</div>
|
|
<p>Enter your credentials to access the remote desktop dashboard</p>
|
|
</div>
|
|
|
|
<!-- Login Form -->
|
|
<form id="loginForm" class="auth-form">
|
|
<div class="input-group">
|
|
<label for="loginEmail">Email Address</label>
|
|
<input type="email" id="loginEmail" placeholder="admin@helios.remote" required autocomplete="username">
|
|
</div>
|
|
<div class="input-group">
|
|
<label for="loginPassword">Password</label>
|
|
<input type="password" id="loginPassword" placeholder="••••••••" required autocomplete="current-password">
|
|
</div>
|
|
<button type="submit" class="btn auth-btn">Sign In</button>
|
|
<div id="loginError" class="auth-error"></div>
|
|
<div class="auth-toggle">
|
|
<span>Don't have an account?</span>
|
|
<a href="#" id="showRegisterBtn">Register Here</a>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Registration Form (Hidden by default) -->
|
|
<form id="registerForm" class="auth-form hidden">
|
|
<div class="input-group">
|
|
<label for="regUsername">Full Name / Username</label>
|
|
<input type="text" id="regUsername" placeholder="John Doe" required>
|
|
</div>
|
|
<div class="input-group">
|
|
<label for="regEmail">Email Address</label>
|
|
<input type="email" id="regEmail" placeholder="user@helios.remote" required autocomplete="email">
|
|
</div>
|
|
<div class="input-group">
|
|
<label for="regPassword">Password</label>
|
|
<input type="password" id="regPassword" placeholder="••••••••" required autocomplete="new-password">
|
|
</div>
|
|
<button type="submit" class="btn auth-btn accent">Create Account</button>
|
|
<div id="registerError" class="auth-error"></div>
|
|
<div class="auth-toggle">
|
|
<span>Already have an account?</span>
|
|
<a href="#" id="showLoginBtn">Sign In Here</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
|
|
</body>
|
|
</html>
|