144 lines
5.1 KiB
HTML
144 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Re-Commander — Telepresence Mode</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<div id="status-dot"></div>
|
|
<h1>Re<span>-Commander</span> — Telepresence</h1>
|
|
<span id="status-label">Connecting…</span>
|
|
<span id="hotword-indicator"></span>
|
|
<button id="btn-back-home" style="margin-left: auto; padding: 5px 12px; font-size: 12px;">← Back to Home</button>
|
|
</header>
|
|
|
|
<div class="main">
|
|
|
|
<!-- ── LEFT PANEL ── -->
|
|
<div class="left-panel">
|
|
|
|
<!-- Telepresence Controls -->
|
|
<div class="section">
|
|
<div class="section-title">Presence Controls</div>
|
|
<div class="row">
|
|
<label>User Name</label>
|
|
<input type="text" id="user-name" placeholder="Your name">
|
|
</div>
|
|
<div class="row">
|
|
<label>Status</label>
|
|
<select id="presence-status">
|
|
<option value="active">Active</option>
|
|
<option value="away">Away</option>
|
|
<option value="busy">Busy</option>
|
|
<option value="offline">Offline</option>
|
|
</select>
|
|
</div>
|
|
<button id="btn-start-telepresence" style="width:100%;">🔴 Start Broadcasting</button>
|
|
</div>
|
|
|
|
<!-- Head Navigation -->
|
|
<div class="section">
|
|
<div class="section-title">Head Navigation</div>
|
|
<div style="display:flex; gap:16px; align-items:center; margin-bottom:8px;">
|
|
<div class="arrow-pad">
|
|
<div></div>
|
|
<button id="btn-up" title="Look up (↑)">UP</button>
|
|
<div></div>
|
|
<button id="btn-left" title="Look left (←)">←</button>
|
|
<div></div>
|
|
<button id="btn-right" title="Look right (→)">→</button>
|
|
<div></div>
|
|
<button id="btn-down" title="Look down (↓)">↓</button>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Say -->
|
|
<div class="section">
|
|
<div class="section-title">Say</div>
|
|
<div class="field">
|
|
<textarea id="say-text" rows="2" placeholder="Hello! I am present via telepresence."></textarea>
|
|
</div>
|
|
<div class="controls-row">
|
|
<button id="btn-say">🎤 Say</button>
|
|
<button id="btn-say-cancel" class="danger">✕ Stop</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Audio Settings -->
|
|
<div class="section">
|
|
<div class="section-title">Audio</div>
|
|
<div class="row">
|
|
<label>Microphone Level</label>
|
|
<input type="range" id="mic-level" min="0" max="1" step="0.05" value="0.75">
|
|
</div>
|
|
<div class="row">
|
|
<label>Speaker Volume</label>
|
|
<input type="range" id="speaker-volume" min="0" max="1" step="0.05" value="0.75">
|
|
<span id="volume-label" style="min-width:32px;text-align:right;font-size:12px;">75%</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /left-panel -->
|
|
|
|
<!-- ── CENTER PANEL ── -->
|
|
<div class="center-panel">
|
|
|
|
<!-- Camera feed (main telepresence view) -->
|
|
<div id="camera-wrap">
|
|
<img id="camera-feed" alt="Jibo camera" style="display:none;">
|
|
<div id="camera-no-feed">
|
|
<div style="font-size:40px;">📹</div>
|
|
<div>Telepresence View</div>
|
|
<div style="font-size:11px;color:var(--muted);">Start broadcasting to see live camera feed</div>
|
|
</div>
|
|
<div id="click-dot"></div>
|
|
</div>
|
|
|
|
<!-- Remote View / User Info -->
|
|
<div class="controls-row" style="justify-content:center; gap:10px; margin-top:20px; flex-direction: column; align-items: center;">
|
|
<div id="remote-status" style="font-size:13px;color:var(--text);padding:10px;background:var(--surface2);border-radius:6px;border:1px solid var(--border);min-width:300px;text-align:center;">
|
|
Waiting to start telepresence...
|
|
</div>
|
|
<button id="btn-video-start" style="flex-basis: auto;">▶ Start Video</button>
|
|
<button id="btn-video-stop" class="danger" style="flex-basis: auto;">■ Stop</button>
|
|
</div>
|
|
|
|
</div><!-- /center-panel -->
|
|
|
|
<!-- ── RIGHT PANEL ── -->
|
|
<div class="right-panel">
|
|
<div class="tabs">
|
|
<button class="tab-btn active" data-tab="tab-participants">Participants</button>
|
|
<button class="tab-btn" data-tab="tab-log">Log</button>
|
|
</div>
|
|
|
|
<!-- Participants tab -->
|
|
<div class="tab-panel active" id="tab-participants">
|
|
<div class="section-title">Remote Users</div>
|
|
<div id="participants-list" style="font-size:12px;">
|
|
<div style="color:var(--muted);">No remote users connected</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Log tab -->
|
|
<div class="tab-panel" id="tab-log" style="padding:0;display:flex;flex-direction:column;flex:1;">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-bottom:1px solid var(--border);">
|
|
<span class="section-title" style="margin:0;">Session Log</span>
|
|
<button id="btn-clear-log" style="font-size:11px;padding:3px 8px;">Clear</button>
|
|
</div>
|
|
<div id="event-log"></div>
|
|
</div>
|
|
|
|
</div><!-- /right-panel -->
|
|
</div>
|
|
|
|
<script src="telepresence.js"></script>
|
|
</body>
|
|
</html>
|