-
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path360Meet.html
More file actions
254 lines (229 loc) · 13.9 KB
/
Copy path360Meet.html
File metadata and controls
254 lines (229 loc) · 13.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<!DOCTYPE html>
<html lang="en">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-89NN1P6CEV"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-89NN1P6CEV');
</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>360 — Meet</title>
<link rel="icon" type="image/png" href="/favicon-32x32.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="manifest.json" />
<meta name="theme-color" content="#3b82f6" />
<link rel="stylesheet" href="/assets/css/main.css" />
<link rel="stylesheet" href="/assets/css/wide.css" />
<link rel="stylesheet" href="/assets/css/gallium.css" />
<link rel="stylesheet" href="/assets/css/responsive.css" />
<link rel="stylesheet" href="/assets/css/cursor.css" />
<link rel="stylesheet" href="/assets/css/meet.css" />
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
</head>
<body>
<div class="cursor-dot"></div>
<div class="cursor-trail"></div>
<div class="cursor-crosshair"></div>
<div class="cursor-blob"></div>
<div class="auth-top-right">
<button id="signInBtn" class="auth-btn">Sign In</button>
<button id="signUpBtn" class="auth-btn">Sign Up</button>
<button id="signOutBtn" class="auth-btn" style="display:none;">Sign Out</button>
</div>
<button class="sidebar-toggle" id="sidebarToggle">☰ Menu</button>
<aside class="sidebar" id="sidebar"><span id="sidebar-slot"></span></aside>
<div class="overlay" id="overlay"></div>
<div class="settings-panel" id="settingsPanel">
<h3>Appearance</h3>
<div class="settings-label">Theme</div>
<div class="theme-swatches">
<div class="theme-option"><div class="swatch" data-theme="ocean"></div><span>Ocean</span></div>
<div class="theme-option"><div class="swatch" data-theme="midnight"></div><span>Midnight</span></div>
<div class="theme-option"><div class="swatch" data-theme="sunset"></div><span>Sunset</span></div>
<div class="theme-option"><div class="swatch" data-theme="mint"></div><span>Mint</span></div>
<div class="theme-option"><div class="swatch" data-theme="neon"></div><span>Neon</span></div>
<div class="theme-option"><div class="swatch" data-theme="mono"></div><span>Mono</span></div>
</div>
<div class="settings-label" style="margin-top:20px;">Mode</div>
<label style="display:flex;align-items:center;gap:10px;cursor:pointer;">
<span style="font-size:14px;">Dark mode</span>
<input type="checkbox" id="darkToggle" />
</label>
<h3 style="margin-top:25px;">Legal</h3>
<a href="/privacypolicy" class="legal-link">Privacy Policy</a>
<a href="/tos" class="legal-link">Terms of Service</a>
</div>
<div id="auth-popup" class="auth-popup hidden">
<div class="auth-box">
<h2>Account</h2>
<input id="auth-email" type="email" placeholder="Email" />
<input id="auth-password" type="password" placeholder="Password" />
<button id="auth-login-btn">Log In</button>
<button id="auth-signup-btn">Sign Up</button>
<p id="auth-error" class="auth-error"></p>
<button id="auth-close-btn" class="close-btn">Close</button>
</div>
</div>
<!-- ══ MEET PAGE ══ -->
<div class="meet-wrap">
<!-- Sign-in gate (shown when the user is not authenticated) -->
<div class="meet-card meet-gate" id="meet-gate" style="display:none;"></div>
<!-- Action lobby: New video call / New voice chat / Join meeting -->
<div id="meet-action-select" style="display:none;"></div>
<!-- Prepare room: camera/mic check, name (read-only), passcode -->
<div id="meet-prepare-screen" style="display:none;"></div>
</div>
<!-- Zoom-style call chamber -->
<div class="meet-call-room" id="meet-call-room">
<div class="meet-call-topbar">
<div class="meet-call-meta">
<button class="meet-call-room-code" id="meet-invite-btn" title="Copy invite link">
<span id="meet-lock-icon" style="display:none;">
<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
</span>
<span id="meet-call-room-code-label">—</span>
<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
</button>
<div class="meet-call-timer" id="meet-call-timer">0:00</div>
</div>
<div class="meet-participant-count">
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<span id="meet-participant-count-label">1</span>
</div>
</div>
<div class="meet-stage">
<div class="meet-stage-main" id="meet-stage-main"></div>
<div class="meet-stage-side" id="meet-stage-side"></div>
<!-- In-call chat drawer -->
<div class="meet-chat-panel" id="meet-chat-panel">
<div class="meet-chat-header">
<span>In-call chat</span>
<button class="meet-chat-close-btn" id="meet-chat-close-btn">
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<div class="meet-chat-messages" id="meet-chat-messages"></div>
<div class="meet-chat-input-row">
<input class="meet-input" id="meet-chat-input" placeholder="Message everyone" maxlength="500" />
<button class="meet-chat-send-btn" id="meet-chat-send-btn" title="Send">
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
</button>
</div>
</div>
</div>
<div class="meet-controls-bar">
<div class="meet-controls-group meet-controls-left">
<div class="meet-host-controls" id="meet-host-controls" style="display:none;">
<button class="meet-host-action-btn" id="meet-mute-all-btn">
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="1" y1="1" x2="23" y2="23"/><path d="M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6"/><path d="M17 16.95A7 7 0 0 1 5 12v-2"/><path d="M19 10v2a7 7 0 0 1-.11 1.23"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
<span class="meet-host-action-label">Mute all</span>
</button>
<button class="meet-host-action-btn" id="meet-cameras-off-btn">
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 16v1a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2"/><path d="M9.5 5H14a2 2 0 0 1 2 2v4.5"/><polygon points="23 7 16 12 23 17 23 7"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
<span class="meet-host-action-label">Cameras off</span>
</button>
</div>
<button class="meet-ctrl-btn" id="meet-mic-btn" title="Mute microphone"></button>
<button class="meet-ctrl-btn" id="meet-cam-btn" title="Turn off camera"></button>
<button class="meet-ctrl-btn" id="meet-screen-btn" title="Share screen">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
</button>
<button class="meet-ctrl-btn" id="meet-chat-btn" title="Chat">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>
<span class="meet-chat-badge" id="meet-chat-badge" style="display:none;"></span>
</button>
</div>
<div class="meet-controls-group meet-controls-right">
<button class="meet-ctrl-btn leave" id="meet-leave-btn" title="Leave meeting">
<svg viewBox="0 0 24 24" width="19" height="19" fill="currentColor" stroke="none"><path d="M12 9c-2.3 0-4.5.36-6.6 1.03a1.5 1.5 0 0 0-1 1.6l.34 2.5a1.5 1.5 0 0 0 1.2 1.27c1.1.2 2.2.36 3.06.36.66 0 1.2-.44 1.37-1.06l.3-1.1a1 1 0 0 1 1.1-.73c.66.1 1.34.13 2.23.13.9 0 1.57-.03 2.23-.13a1 1 0 0 1 1.1.73l.3 1.1c.17.62.71 1.06 1.37 1.06.87 0 1.96-.16 3.06-.36a1.5 1.5 0 0 0 1.2-1.27l.34-2.5a1.5 1.5 0 0 0-1-1.6A20.6 20.6 0 0 0 12 9z"/></svg>
</button>
</div>
</div>
</div>
<!-- Leave confirmation popup -->
<div class="meet-modal-overlay" id="meet-leave-confirm-modal">
<div class="meet-modal-card">
<div class="meet-modal-title">Leave the meeting?</div>
<p class="meet-modal-text">You can rejoin later with the same meeting code.</p>
<div class="meet-modal-actions">
<button class="meet-btn secondary" id="meet-leave-cancel-btn">Cancel</button>
<button class="meet-btn danger" id="meet-leave-confirm-btn">Leave meeting</button>
</div>
</div>
</div>
<!-- Screen-share permission popup (shown to the host only) -->
<div class="meet-modal-overlay" id="meet-screen-modal">
<div class="meet-modal-card">
<div class="meet-modal-title"><span id="meet-screen-modal-name"></span> wants to share their screen</div>
<p class="meet-modal-text">Everyone in the meeting will see their screen if you allow this.</p>
<p class="meet-modal-text" id="meet-screen-modal-note" style="display:none;"></p>
<div class="meet-modal-actions">
<button class="meet-btn secondary" id="meet-screen-deny-btn">Deny</button>
<button class="meet-btn" id="meet-screen-allow-btn">Allow</button>
</div>
</div>
</div>
<!-- Shown to the HOST when they try to share while someone else already is -->
<div class="meet-modal-overlay" id="meet-takeover-modal">
<div class="meet-modal-card">
<div class="meet-modal-title"><span id="meet-takeover-modal-name"></span> is currently sharing their screen</div>
<p class="meet-modal-text">You can ask them to stop, or take over immediately.</p>
<div class="meet-modal-actions three">
<button class="meet-btn" id="meet-takeover-ask-btn">Ask them to stop</button>
<button class="meet-btn danger" id="meet-takeover-force-btn">Force takeover</button>
<button class="meet-btn secondary" id="meet-takeover-cancel-btn">Cancel</button>
</div>
</div>
</div>
<!-- Shown to the current sharer when the host politely asks them to stop -->
<div class="meet-modal-overlay" id="meet-ask-stop-modal">
<div class="meet-modal-card">
<div class="meet-modal-title">The host asked you to stop sharing</div>
<p class="meet-modal-text">You can keep sharing if you're not finished yet.</p>
<div class="meet-modal-actions">
<button class="meet-btn secondary" id="meet-ask-stop-keep-btn">Keep sharing</button>
<button class="meet-btn danger" id="meet-ask-stop-confirm-btn">Stop sharing</button>
</div>
</div>
</div>
<script src="/assets/js/main.js"></script>
<script src="/assets/js/auth-fix.js"></script>
<script src="/assets/js/wide.js"></script>
<script src="/assets/js/gallium.js"></script>
<script src="/assets/js/cookie.js"></script>
<script src="/assets/js/cursor.js"></script>
<script src="/assets/js/meet.js?v=12"></script>
<script>
(function () {
document.getElementById('meet-invite-btn').onclick = () => Meet.copyInviteLink();
document.getElementById('meet-mic-btn').onclick = () => Meet.toggleMic();
document.getElementById('meet-cam-btn').onclick = () => Meet.toggleCam();
document.getElementById('meet-screen-btn').onclick = () => Meet.toggleScreenShare();
document.getElementById('meet-leave-btn').onclick = () => Meet.confirmLeave();
document.getElementById('meet-chat-btn').onclick = () => Meet.toggleChatPanel();
document.getElementById('meet-chat-close-btn').onclick = () => Meet.toggleChatPanel();
document.getElementById('meet-mute-all-btn').onclick = () => Meet.hostMuteAll();
document.getElementById('meet-cameras-off-btn').onclick = () => Meet.hostCamerasOff();
function sendChatFromInput() {
const input = document.getElementById('meet-chat-input');
if (!input.value.trim()) return;
Meet.sendChatMessage(input.value);
input.value = '';
}
document.getElementById('meet-chat-send-btn').onclick = sendChatFromInput;
document.getElementById('meet-chat-input').addEventListener('keydown', e => {
if (e.key === 'Enter') { e.preventDefault(); sendChatFromInput(); }
});
// supabaseClient is declared with `const` at the top level of main.js,
// so it's a shared global identifier (not a window property) by the
// time main.js's own <script> tag finishes running — which happens
// before this inline block runs, since script tags execute in order.
// No polling needed; just call straight through.
Meet.init();
})();
</script>
</body>
</html>