88 lines
3.5 KiB
HTML
88 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Artemis Cloud Workspace</title>
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
</head>
|
|
<body>
|
|
<!-- Header -->
|
|
<header class="app-header">
|
|
<div class="logo-group">
|
|
<span class="logo-badge">ARTEMIS</span>
|
|
<h1 class="title">Autonomous Mobile Agent Platform</h1>
|
|
</div>
|
|
<div class="header-actions">
|
|
<div id="userBadge" class="user-tag hidden">Not Logged In</div>
|
|
<button id="newSessionBtn" class="btn-primary hidden" style="width: auto; padding: 8px 16px;">+ New Session</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Auth Modal -->
|
|
<div id="authModal" class="modal-overlay">
|
|
<div class="auth-card">
|
|
<h2>Developer Login</h2>
|
|
<p>Enter your phone or email to receive a verification OTP code.</p>
|
|
|
|
<div id="otpStep1" class="input-group">
|
|
<input type="text" id="authIdentifier" class="input-field" placeholder="Email or Phone (e.g. user@example.com)">
|
|
<button id="sendOtpBtn" class="btn-primary">Send Verification Code</button>
|
|
</div>
|
|
|
|
<div id="otpStep2" class="input-group hidden">
|
|
<input type="text" id="otpCode" class="input-field" placeholder="6-digit OTP Code (dev: 123456)">
|
|
<button id="verifyOtpBtn" class="btn-primary">Verify & Launch</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Dual-Pane Workspace -->
|
|
<main class="workspace-container">
|
|
<!-- Left Pane: Cuttlefish Live Stream -->
|
|
<section class="pane">
|
|
<div class="pane-header">
|
|
<div class="pane-title">
|
|
<span>📱</span> Cuttlefish AVD Live Stream
|
|
</div>
|
|
<span id="deviceStatus" class="status-pill">Disconnected</span>
|
|
</div>
|
|
<div class="device-viewport">
|
|
<div class="device-frame">
|
|
<img id="deviceStreamImg" class="device-screen-live hidden" alt="Live Device Screen">
|
|
<iframe id="cuttlefishFrame" class="device-screen-live hidden" allow="autoplay"></iframe>
|
|
<div id="streamPlaceholder" class="screen-placeholder">
|
|
<svg width="48" height="48" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3"/>
|
|
</svg>
|
|
<p id="streamText">Start a session to stream emulator</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Right Pane: Artemis Agent Workspace -->
|
|
<section class="pane">
|
|
<div class="pane-header">
|
|
<div class="pane-title">
|
|
<span>🤖</span> Artemis Agent Stream
|
|
</div>
|
|
<span id="agentStatus" class="status-pill">Idle</span>
|
|
</div>
|
|
<div id="agentLogs" class="agent-logs">
|
|
<div class="log-entry">
|
|
<div class="meta">System</div>
|
|
<div>Welcome to Artemis. Log in and launch a session to start autonomous testing.</div>
|
|
</div>
|
|
</div>
|
|
<div class="chat-input-area">
|
|
<input type="text" id="taskInput" class="chat-input" placeholder="Give Artemis a command (e.g. 'Open Maps and find directions to SFO')...">
|
|
<button id="sendTaskBtn" class="btn-primary" style="width: auto; padding: 0 20px;">Run</button>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|