interwu
Version:
Client for Secure Remote Interview Monitoring.
255 lines (243 loc) • 8.18 kB
HTML
<html>
<head>
<meta charset="UTF-8" />
<title>InterView Monitor</title>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div id="title-bar" class="title-bar">
<div class="title-bar-left">
<svg
class="title-bar-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 20.25h12m-7.5-3v3m3-3v3m-10.125-3h17.25c.621 0 1.125-.504 1.125-1.125V4.875c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125z"
/>
</svg>
</div>
<div class="title-bar-controls">
<button id="minimize-btn" class="title-bar-btn minimize">
<svg
viewBox="0 0 12 12"
fill="none"
stroke="currentColor"
stroke-width="1"
>
<line x1="2" y1="6" x2="10" y2="6"></line>
</svg>
</button>
<button id="maximize-btn" class="title-bar-btn maximize">
<svg
viewBox="0 0 12 12"
fill="none"
stroke="currentColor"
stroke-width="1"
>
<rect x="2" y="2" width="8" height="8"></rect>
</svg>
</button>
<button id="close-btn" class="title-bar-btn close">
<svg
viewBox="0 0 12 12"
fill="none"
stroke="currentColor"
stroke-width="1"
>
<line x1="2" y1="2" x2="10" y2="10"></line>
<line x1="10" y1="2" x2="2" y2="10"></line>
</svg>
</button>
</div>
</div>
<div id="code-entry-container" class="code-entry-container">
<div class="code-entry-card">
<svg
class="logo"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 20.25h12m-7.5-3v3m3-3v3m-10.125-3h17.25c.621 0 1.125-.504 1.125-1.125V4.875c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125z"
/>
</svg>
<h1 class="title">InterView Monitor</h1>
<p class="subtitle">
Enter your 6-digit code to connect to the interview session
</p>
<div class="code-input-container">
<div class="code-input-group">
<input
type="text"
class="code-input"
maxlength="1"
pattern="[0-9]"
inputmode="numeric"
/>
<input
type="text"
class="code-input"
maxlength="1"
pattern="[0-9]"
inputmode="numeric"
/>
<input
type="text"
class="code-input"
maxlength="1"
pattern="[0-9]"
inputmode="numeric"
/>
<input
type="text"
class="code-input"
maxlength="1"
pattern="[0-9]"
inputmode="numeric"
/>
<input
type="text"
class="code-input"
maxlength="1"
pattern="[0-9]"
inputmode="numeric"
/>
<input
type="text"
class="code-input"
maxlength="1"
pattern="[0-9]"
inputmode="numeric"
/>
</div>
<p class="paste-hint">You can also paste a 6-digit code</p>
</div>
<button id="submit-btn" class="submit-btn" disabled>Connect</button>
</div>
</div>
<div id="dashboard-container" class="dashboard-container">
<header class="dashboard-header">
<div class="header-left">
<svg
class="header-logo"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 20.25h12m-7.5-3v3m3-3v3m-10.125-3h17.25c.621 0 1.125-.504 1.125-1.125V4.875c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125z"
/>
</svg>
<div class="status-indicator">
<div id="status-dot" class="status-dot"></div>
<span id="status-text">Disconnected</span>
</div>
</div>
<div class="header-right">
<div id="code-display" class="code-display">------</div>
<div id="viewer-count" class="status-indicator" style="display: none">
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
<span id="viewer-count-text">0 viewers</span>
</div>
<button id="toggle-logs-btn" class="toggle-logs-btn">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M12 5v14M5 12h14"></path>
</svg>
<span>Show Logs</span>
</button>
<button id="disconnect-btn" class="disconnect-btn">Disconnect</button>
</div>
</header>
<main class="dashboard-content">
<div class="dashboard-layout">
<section class="stats-section">
<div class="stats-grid">
<div class="stat-card">
<div id="total-displays" class="stat-value">0</div>
<div class="stat-label">Total Displays</div>
</div>
<div class="stat-card">
<div id="active-displays" class="stat-value">0</div>
<div class="stat-label">Active Displays</div>
</div>
<div class="stat-card">
<div id="internal-displays" class="stat-value">0</div>
<div class="stat-label">Internal Displays</div>
</div>
<div class="stat-card">
<div id="external-displays" class="stat-value">0</div>
<div class="stat-label">External Displays</div>
</div>
<div class="stat-card">
<div id="inactive-displays" class="stat-value">0</div>
<div class="stat-label">Inactive Displays</div>
</div>
</div>
</section>
<section class="monitor-preview-section">
<div class="preview-container">
<div id="monitor-list" class="monitor-list">
<!-- Monitor items -->
</div>
</div>
</section>
</div>
</main>
<!-- Sliding Log Panel -->
<div id="logs-panel" class="logs-panel">
<div class="logs-header">
<h2 class="logs-title">Connection Log</h2>
<button id="close-logs-btn" class="close-logs-btn">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
<div class="logs-content">
<div id="log-container" class="log-container">
<!-- Logs -->
</div>
</div>
</div>
</div>
<script src="./renderer.js"></script>
</body>
</html>