mirror of
https://github.com/arkorty/B.Tech-Project-III.git
synced 2026-04-19 12:41:48 +00:00
init
This commit is contained in:
144
thirdeye/meet_extension/popup.html
Normal file
144
thirdeye/meet_extension/popup.html
Normal file
@@ -0,0 +1,144 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>ThirdEye Meet</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
width: 320px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
font-size: 13px;
|
||||
background: #0f172a;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
.header {
|
||||
background: #1e293b;
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border-bottom: 1px solid #334155;
|
||||
}
|
||||
.logo { font-weight: 700; font-size: 15px; color: #38bdf8; }
|
||||
.badge {
|
||||
font-size: 10px;
|
||||
background: #0ea5e9;
|
||||
color: white;
|
||||
padding: 2px 6px;
|
||||
border-radius: 9999px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.section { padding: 12px 16px; border-bottom: 1px solid #1e293b; }
|
||||
.status-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.status-dot {
|
||||
width: 10px; height: 10px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.status-dot.idle { background: #475569; }
|
||||
.status-dot.recording { background: #ef4444; animation: pulse 1.2s infinite; }
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; } 50% { opacity: 0.4; }
|
||||
}
|
||||
.meeting-id {
|
||||
font-size: 11px;
|
||||
color: #94a3b8;
|
||||
font-family: monospace;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.stat { font-size: 11px; color: #64748b; }
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 9px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.btn:hover { opacity: 0.85; }
|
||||
.btn-start { background: #0ea5e9; color: white; }
|
||||
.btn-stop { background: #ef4444; color: white; }
|
||||
.btn-disabled { background: #334155; color: #64748b; cursor: not-allowed; }
|
||||
label { display: block; font-size: 11px; color: #94a3b8; margin-bottom: 3px; }
|
||||
input {
|
||||
width: 100%;
|
||||
background: #1e293b;
|
||||
border: 1px solid #334155;
|
||||
color: #e2e8f0;
|
||||
border-radius: 5px;
|
||||
padding: 6px 8px;
|
||||
font-size: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
input:focus { outline: none; border-color: #0ea5e9; }
|
||||
.save-btn {
|
||||
background: #1e293b;
|
||||
border: 1px solid #334155;
|
||||
color: #94a3b8;
|
||||
border-radius: 5px;
|
||||
padding: 5px 10px;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
}
|
||||
.save-btn:hover { border-color: #0ea5e9; color: #0ea5e9; }
|
||||
.not-meet {
|
||||
padding: 24px 16px;
|
||||
text-align: center;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
}
|
||||
.not-meet strong { display: block; color: #94a3b8; margin-bottom: 6px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<span class="logo">👁 ThirdEye</span>
|
||||
<span class="badge">Meet</span>
|
||||
</div>
|
||||
|
||||
<div id="not-meet" class="not-meet" style="display:none;">
|
||||
<strong>Not on Google Meet</strong>
|
||||
Open a meeting at meet.google.com to start recording.
|
||||
</div>
|
||||
|
||||
<div id="meet-ui" style="display:none;">
|
||||
<div class="section">
|
||||
<div class="status-row">
|
||||
<div>
|
||||
<span class="status-dot idle" id="status-dot"></span>
|
||||
<span id="status-label">Idle</span>
|
||||
</div>
|
||||
<span class="stat" id="chunks-label">0 chunks sent</span>
|
||||
</div>
|
||||
<div class="meeting-id" id="meeting-id-label">Meeting ID: —</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<button class="btn btn-start" id="main-btn">▶ Start Recording</button>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<label>Backend URL</label>
|
||||
<input type="text" id="backend-url" placeholder="http://localhost:8000" />
|
||||
<label>Group ID</label>
|
||||
<input type="text" id="group-id" placeholder="meet_sessions" />
|
||||
<label>Ingest Secret</label>
|
||||
<input type="password" id="ingest-secret" placeholder="thirdeye_meet_secret_change_me" />
|
||||
<button class="save-btn" id="save-btn">Save Settings</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="popup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user