Hugging Face's logo

Spaces:
ultronek01
/
gomegle
Running

App Files Community
ultronek01 commited on
Commit
c7c7d9d
·
verified ·
1 Parent(s): 84c8178

proč je nahoře nějaký komentář ? oprav to - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +581 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Gomegle
3
- emoji: 📊
4
  colorFrom: green
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: gomegle
3
+ emoji: 🐳
4
  colorFrom: green
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,581 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Gomegle - Chat s náhodnými ľuďmi</title>
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ .typing-indicator::after {
12
+ content: "...";
13
+ animation: typing 1.5s infinite;
14
+ display: inline-block;
15
+ width: 0;
16
+ }
17
+
18
+ @keyframes typing {
19
+ 0% { content: "."; }
20
+ 33% { content: ".."; }
21
+ 66% { content: "..."; }
22
+ }
23
+
24
+ .chat-messages {
25
+ scrollbar-width: thin;
26
+ scrollbar-color: #4B5563 #1F2937;
27
+ }
28
+
29
+ .chat-messages::-webkit-scrollbar {
30
+ width: 6px;
31
+ }
32
+
33
+ .chat-messages::-webkit-scrollbar-track {
34
+ background: #1F2937;
35
+ }
36
+
37
+ .chat-messages::-webkit-scrollbar-thumb {
38
+ background-color: #4B5563;
39
+ border-radius: 3px;
40
+ }
41
+
42
+ .pulse-animation {
43
+ animation: pulse 2s infinite;
44
+ }
45
+
46
+ @keyframes pulse {
47
+ 0% { opacity: 0.6; }
48
+ 50% { opacity: 1; }
49
+ 100% { opacity: 0.6; }
50
+ }
51
+ </style>
52
+ </head>
53
+ <body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">
54
+ <!-- Header -->
55
+ <header class="bg-gray-800 py-4 px-6 shadow-lg">
56
+ <div class="container mx-auto flex justify-between items-center">
57
+ <div class="flex items-center space-x-2">
58
+ <i class="fas fa-comments text-[#ae00eb] text-2xl"></i>
59
+ <h1 class="text-xl font-bold">Gomegle</h1>
60
+ </div>
61
+ <div class="flex items-center space-x-4">
62
+ <button id="theme-toggle" class="text-gray-300 hover:text-white">
63
+ <i class="fas fa-moon"></i>
64
+ </button>
65
+ <button id="info-btn" class="text-gray-300 hover:text-white">
66
+ <i class="fas fa-info-circle"></i>
67
+ </button>
68
+ </div>
69
+ </div>
70
+ </header>
71
+
72
+ <!-- Main Content -->
73
+ <main class="flex-grow container mx-auto px-4 py-8 flex flex-col">
74
+ <!-- Connection Status -->
75
+ <div id="status-container" class="mb-6 text-center">
76
+ <div id="disconnected-view" class="bg-gray-800 rounded-lg p-6 shadow-lg">
77
+ <div class="flex flex-col items-center">
78
+ <i class="fas fa-user-friends text-5xl text-blue-400 mb-4"></i>
79
+ <h2 class="text-2xl font-bold mb-2">Chcete chatovať?</h2>
80
+ <p class="text-gray-400 mb-6">Kliknite na tlačidlo nižšie pre spojenie s náhodným človekom</p>
81
+ <button id="connect-btn" class="bg-[#ae00eb] hover:bg-[#9a00d1] text-white font-bold py-3 px-8 rounded-full transition-all transform hover:scale-105 flex items-center">
82
+ <i class="fas fa-random mr-2"></i> Nájsť partnera
83
+ </button>
84
+ </div>
85
+ </div>
86
+
87
+ <div id="connecting-view" class="hidden bg-gray-800 rounded-lg p-6 shadow-lg">
88
+ <div class="flex flex-col items-center">
89
+ <div class="relative mb-4">
90
+ <div class="w-16 h-16 rounded-full bg-blue-900 opacity-60 pulse-animation"></div>
91
+ <div class="w-16 h-16 rounded-full bg-blue-700 opacity-80 pulse-animation absolute top-0 left-0" style="animation-delay: 0.5s;"></div>
92
+ <div class="w-16 h-16 rounded-full bg-blue-500 pulse-animation absolute top-0 left-0" style="animation-delay: 1s;"></div>
93
+ <i class="fas fa-search absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-xl"></i>
94
+ </div>
95
+ <h2 class="text-2xl font-bold mb-2">Hľadáme niekoho...</h2>
96
+ <p class="text-gray-400 mb-4">Čakajte kým vás spojíme s náhodným partnerom</p>
97
+ <button id="cancel-connect-btn" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-6 rounded-full transition-all">
98
+ Zrušiť
99
+ </button>
100
+ </div>
101
+ </div>
102
+
103
+ <div id="connected-view" class="hidden bg-gray-800 rounded-lg p-6 shadow-lg">
104
+ <div class="flex flex-col items-center">
105
+ <div class="relative mb-4">
106
+ <div class="w-16 h-16 rounded-full bg-green-900 opacity-60"></div>
107
+ <div class="w-16 h-16 rounded-full bg-green-700 opacity-80 absolute top-0 left-0"></div>
108
+ <div class="w-16 h-16 rounded-full bg-green-500 absolute top-0 left-0"></div>
109
+ <i class="fas fa-check absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-xl"></i>
110
+ </div>
111
+ <h2 class="text-2xl font-bold mb-2">Pripojené!</h2>
112
+ <p class="text-gray-400 mb-4">Teraz chatujete s náhodným človekom</p>
113
+ <div class="flex space-x-4">
114
+ <button id="disconnect-btn" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-6 rounded-full transition-all">
115
+ <i class="fas fa-times mr-2"></i> Odpojiť
116
+ </button>
117
+ <button id="new-partner-btn" class="bg-[#ae00eb] hover:bg-[#9a00d1] text-white font-bold py-2 px-6 rounded-full transition-all">
118
+ <i class="fas fa-sync-alt mr-2"></i> Nový partner
119
+ </button>
120
+ </div>
121
+ </div>
122
+ </div>
123
+ </div>
124
+
125
+ <!-- Chat Container -->
126
+ <div id="chat-container" class="hidden flex-grow flex flex-col bg-gray-800 rounded-lg shadow-lg overflow-hidden">
127
+ <!-- Messages -->
128
+ <div id="chat-messages" class="flex-grow p-4 overflow-y-auto chat-messages max-h-96">
129
+ <!-- Messages will be inserted here by JavaScript -->
130
+ <div id="welcome-message" class="text-center py-8 text-gray-400">
131
+ <i class="fas fa-comment-dots text-4xl mb-4"></i>
132
+ <p class="text-lg">Pozdravte svojho nového chatovacieho partnera!</p>
133
+ <p class="text-sm mt-2">Správy sú end-to-end šifrované</p>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- Typing Indicator -->
138
+ <div id="typing-indicator" class="hidden bg-gray-700 px-4 py-2 text-sm text-gray-400">
139
+ <span class="typing-indicator">Partner píše...</span>
140
+ </div>
141
+
142
+ <!-- Message Input -->
143
+ <div class="bg-gray-700 p-4">
144
+ <div class="flex items-center">
145
+ <input type="text" id="message-input" placeholder="Napíšte svoju správu..." class="flex-grow bg-gray-600 text-white rounded-l-full py-3 px-4 focus:outline-none focus:ring-2 focus:ring-[#ae00eb]">
146
+ <button id="send-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-r-full transition-all">
147
+ <i class="fas fa-paper-plane"></i>
148
+ </button>
149
+ </div>
150
+ <div class="flex justify-between mt-2 text-xs text-gray-400">
151
+ <div>
152
+ <button id="emoji-btn" class="hover:text-blue-400 mr-3">
153
+ <i class="far fa-smile"></i> Emoji
154
+ </button>
155
+ <button id="attachment-btn" class="hover:text-[#ae00eb]">
156
+ <i class="fas fa-paperclip"></i> Attach
157
+ </button>
158
+ </div>
159
+ <div>
160
+ <span id="char-count">0/500</span>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ </div>
165
+
166
+ <!-- Interests Selection (Hidden by default) -->
167
+ <div id="interests-container" class="hidden mt-6 bg-gray-800 rounded-lg p-6 shadow-lg">
168
+ <h3 class="text-xl font-bold mb-4">Select your interests to find better matches</h3>
169
+ <div class="flex flex-wrap gap-2 mb-6">
170
+ <button class="interest-tag bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-full transition-all">
171
+ Music
172
+ </button>
173
+ <button class="interest-tag bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-full transition-all">
174
+ Gaming
175
+ </button>
176
+ <button class="interest-tag bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-full transition-all">
177
+ Movies
178
+ </button>
179
+ <button class="interest-tag bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-full transition-all">
180
+ Sports
181
+ </button>
182
+ <button class="interest-tag bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-full transition-all">
183
+ Technology
184
+ </button>
185
+ <button class="interest-tag bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-full transition-all">
186
+ Travel
187
+ </button>
188
+ <button class="interest-tag bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-full transition-all">
189
+ Food
190
+ </button>
191
+ <button class="interest-tag bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-full transition-all">
192
+ Art
193
+ </button>
194
+ </div>
195
+ <div class="flex justify-end">
196
+ <button id="save-interests-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-full transition-all">
197
+ Save Interests
198
+ </button>
199
+ </div>
200
+ </div>
201
+ </main>
202
+
203
+ <!-- Footer -->
204
+ <footer class="bg-gray-800 py-4 px-6">
205
+ <div class="container mx-auto text-center text-gray-400 text-sm">
206
+ <p>Gomegle &copy; 2023 | <a href="#" class="hover:text-[#ae00eb]">Podmienky</a> | <a href="#" class="hover:text-[#ae00eb]">Ochrana súkromia</a> | <a href="#" class="hover:text-[#ae00eb]">Bezpečnosť</a></p>
207
+ <p class="mt-2">Spojte sa s náhodnými ľuďmi po celom svete</p>
208
+ </div>
209
+ </footer>
210
+
211
+ <!-- Info Modal -->
212
+ <div id="info-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
213
+ <div class="bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4 shadow-xl">
214
+ <div class="flex justify-between items-center mb-4">
215
+ <h3 class="text-xl font-bold">O Gomegle</h3>
216
+ <button id="close-info-modal" class="text-gray-400 hover:text-white">
217
+ <i class="fas fa-times"></i>
218
+ </button>
219
+ </div>
220
+ <div class="space-y-4">
221
+ <p>Gomegle vás spája s náhodnými ľuďmi pre anonymné konverzácie.</p>
222
+ <p><strong>Ako to funguje:</strong></p>
223
+ <ol class="list-decimal list-inside space-y-2">
224
+ <li>Kliknite na "Nájsť partnera" pre začatie vyhľadávania</li>
225
+ <li>Spojíme vás s náhodným používateľom</li>
226
+ <li>Chatujte anonymne (žiadne osobné údaje sa nezdieľajú)</li>
227
+ <li>Kliknite na "Odpojiť" pre ukončenie chatu</li>
228
+ </ol>
229
+ <div class="bg-gray-700 p-3 rounded-lg">
230
+ <p class="text-sm"><i class="fas fa-exclamation-triangle text-yellow-400 mr-2"></i> Pamätajte byť zdvorilí a dodržiavať pravidlá komunity.</p>
231
+ </div>
232
+ </div>
233
+ </div>
234
+ </div>
235
+
236
+ <script>
237
+ // DOM Elements
238
+ const connectBtn = document.getElementById('connect-btn');
239
+ const cancelConnectBtn = document.getElementById('cancel-connect-btn');
240
+ const disconnectBtn = document.getElementById('disconnect-btn');
241
+ const newPartnerBtn = document.getElementById('new-partner-btn');
242
+ const messageInput = document.getElementById('message-input');
243
+ const sendBtn = document.getElementById('send-btn');
244
+ const chatMessages = document.getElementById('chat-messages');
245
+ const typingIndicator = document.getElementById('typing-indicator');
246
+ const charCount = document.getElementById('char-count');
247
+ const emojiBtn = document.getElementById('emoji-btn');
248
+ const attachmentBtn = document.getElementById('attachment-btn');
249
+ const infoBtn = document.getElementById('info-btn');
250
+ const closeInfoModal = document.getElementById('close-info-modal');
251
+ const infoModal = document.getElementById('info-modal');
252
+ const themeToggle = document.getElementById('theme-toggle');
253
+ const interestsContainer = document.getElementById('interests-container');
254
+ const saveInterestsBtn = document.getElementById('save-interests-btn');
255
+
256
+ // Status views
257
+ const disconnectedView = document.getElementById('disconnected-view');
258
+ const connectingView = document.getElementById('connecting-view');
259
+ const connectedView = document.getElementById('connected-view');
260
+ const chatContainer = document.getElementById('chat-container');
261
+ const welcomeMessage = document.getElementById('welcome-message');
262
+
263
+ // State
264
+ let isConnected = false;
265
+ let isTyping = false;
266
+ let typingTimeout;
267
+ let partnerTyping = false;
268
+ let partnerTypingInterval;
269
+
270
+ // WebSocket connection
271
+ let socket;
272
+ let userId = Math.random().toString(36).substring(2, 15);
273
+ let partnerId = null;
274
+
275
+ // Initialize
276
+ function init() {
277
+ // Set up event listeners
278
+ connectBtn.addEventListener('click', startConnection);
279
+ cancelConnectBtn.addEventListener('click', cancelConnection);
280
+ disconnectBtn.addEventListener('click', disconnect);
281
+ newPartnerBtn.addEventListener('click', findNewPartner);
282
+ messageInput.addEventListener('input', handleTyping);
283
+ messageInput.addEventListener('keypress', (e) => {
284
+ if (e.key === 'Enter' && messageInput.value.trim() !== '') {
285
+ sendMessage();
286
+ }
287
+ });
288
+ sendBtn.addEventListener('click', sendMessage);
289
+ infoBtn.addEventListener('click', () => infoModal.classList.remove('hidden'));
290
+ closeInfoModal.addEventListener('click', () => infoModal.classList.add('hidden'));
291
+ themeToggle.addEventListener('click', toggleTheme);
292
+ saveInterestsBtn.addEventListener('click', saveInterests);
293
+
294
+ // Set up character count
295
+ messageInput.addEventListener('input', updateCharCount);
296
+ updateCharCount();
297
+
298
+ // Set up interest tags
299
+ document.querySelectorAll('.interest-tag').forEach(tag => {
300
+ tag.addEventListener('click', () => {
301
+ tag.classList.toggle('bg-gray-700');
302
+ tag.classList.toggle('bg-blue-600');
303
+ });
304
+ });
305
+
306
+ // Check for saved theme preference
307
+ if (localStorage.getItem('theme') === 'dark' ||
308
+ (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
309
+ document.documentElement.classList.add('dark');
310
+ themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
311
+ } else {
312
+ document.documentElement.classList.remove('dark');
313
+ themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
314
+ }
315
+ }
316
+
317
+ // Theme toggle
318
+ function toggleTheme() {
319
+ if (document.documentElement.classList.contains('dark')) {
320
+ document.documentElement.classList.remove('dark');
321
+ localStorage.setItem('theme', 'light');
322
+ themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
323
+ } else {
324
+ document.documentElement.classList.add('dark');
325
+ localStorage.setItem('theme', 'dark');
326
+ themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
327
+ }
328
+ }
329
+
330
+ // Start connection
331
+ function startConnection() {
332
+ disconnectedView.classList.add('hidden');
333
+ connectingView.classList.remove('hidden');
334
+
335
+ // Connect to WebSocket server
336
+ socket = new WebSocket('wss://your-websocket-server.com/chat');
337
+
338
+ socket.onopen = function(e) {
339
+ console.log("Connected to WebSocket server");
340
+ connectingView.classList.add('hidden');
341
+ connectedView.classList.remove('hidden');
342
+ chatContainer.classList.remove('hidden');
343
+ isConnected = true;
344
+
345
+ // Send connection request
346
+ socket.send(JSON.stringify({
347
+ type: 'connect',
348
+ userId: userId
349
+ }));
350
+ };
351
+
352
+ socket.onmessage = function(event) {
353
+ const message = JSON.parse(event.data);
354
+
355
+ switch(message.type) {
356
+ case 'connected':
357
+ partnerId = message.partnerId;
358
+ welcomeMessage.classList.remove('hidden');
359
+ break;
360
+
361
+ case 'message':
362
+ addMessage("Partner", message.text, false);
363
+ break;
364
+
365
+ case 'typing':
366
+ if (message.isTyping) {
367
+ typingIndicator.classList.remove('hidden');
368
+ } else {
369
+ typingIndicator.classList.add('hidden');
370
+ }
371
+ break;
372
+
373
+ case 'disconnected':
374
+ addSystemMessage("Partner has disconnected");
375
+ setTimeout(disconnect, 2000);
376
+ break;
377
+ }
378
+ };
379
+
380
+ socket.onclose = function(event) {
381
+ if (event.wasClean) {
382
+ addSystemMessage(`Connection closed cleanly, code=${event.code} reason=${event.reason}`);
383
+ } else {
384
+ addSystemMessage('Connection died');
385
+ }
386
+ disconnect();
387
+ };
388
+
389
+ socket.onerror = function(error) {
390
+ addSystemMessage(`WebSocket error: ${error.message}`);
391
+ disconnect();
392
+ };
393
+ }
394
+
395
+ // Cancel connection
396
+ function cancelConnection() {
397
+ connectingView.classList.add('hidden');
398
+ disconnectedView.classList.remove('hidden');
399
+ }
400
+
401
+ // Disconnect
402
+ function disconnect() {
403
+ isConnected = false;
404
+
405
+ // Notify server about disconnection
406
+ if (socket) {
407
+ socket.send(JSON.stringify({
408
+ type: 'disconnect',
409
+ partnerId: partnerId
410
+ }));
411
+ socket.close();
412
+ }
413
+
414
+ connectedView.classList.add('hidden');
415
+ chatContainer.classList.add('hidden');
416
+ disconnectedView.classList.remove('hidden');
417
+
418
+ // Clear chat messages
419
+ while (chatMessages.firstChild) {
420
+ chatMessages.removeChild(chatMessages.firstChild);
421
+ }
422
+
423
+ // Reset welcome message
424
+ welcomeMessage.classList.remove('hidden');
425
+
426
+ // Clear typing indicators
427
+ clearTimeout(typingTimeout);
428
+ typingIndicator.classList.add('hidden');
429
+
430
+ // Reset partner ID
431
+ partnerId = null;
432
+ }
433
+
434
+ // Find new partner
435
+ function findNewPartner() {
436
+ disconnect();
437
+ startConnection();
438
+ }
439
+
440
+ // Handle typing
441
+ function handleTyping() {
442
+ if (!isTyping && isConnected && socket) {
443
+ isTyping = true;
444
+ socket.send(JSON.stringify({
445
+ type: 'typing',
446
+ isTyping: true,
447
+ to: partnerId
448
+ }));
449
+ }
450
+
451
+ // Reset the typing indicator after 3 seconds of inactivity
452
+ clearTimeout(typingTimeout);
453
+ typingTimeout = setTimeout(() => {
454
+ if (isTyping) {
455
+ isTyping = false;
456
+ socket.send(JSON.stringify({
457
+ type: 'typing',
458
+ isTyping: false,
459
+ to: partnerId
460
+ }));
461
+ }
462
+ }, 3000);
463
+ }
464
+
465
+ // Simulate partner typing (for demo purposes)
466
+ function simulatePartnerTyping() {
467
+ partnerTypingInterval = setInterval(() => {
468
+ if (Math.random() > 0.7) { // 30% chance partner starts typing
469
+ partnerTyping = true;
470
+ typingIndicator.classList.remove('hidden');
471
+
472
+ setTimeout(() => {
473
+ if (partnerTyping) {
474
+ partnerTyping = false;
475
+ typingIndicator.classList.add('hidden');
476
+
477
+ // Add a random message from the partner
478
+ const messages = [
479
+ "Hi there! How are you?",
480
+ "What brings you to RandomChat today?",
481
+ "Nice to meet you!",
482
+ "Do you come here often? 😄",
483
+ "What are your interests?",
484
+ "The weather is nice today, isn't it?",
485
+ "Have you tried the new chat features?"
486
+ ];
487
+
488
+ addMessage(mockUsers[Math.floor(Math.random() * mockUsers.length)].name, messages[Math.floor(Math.random() * messages.length)], false);
489
+ }
490
+ }, 1000 + Math.random() * 3000);
491
+ }
492
+ }, 8000); // Check every 8 seconds
493
+ }
494
+
495
+ // Send message
496
+ function sendMessage() {
497
+ const message = messageInput.value.trim();
498
+ if (message === '' || !isConnected || !socket) return;
499
+
500
+ // Add message to chat
501
+ addMessage("You", message, true);
502
+
503
+ // Send message via WebSocket
504
+ socket.send(JSON.stringify({
505
+ type: 'message',
506
+ text: message,
507
+ to: partnerId
508
+ }));
509
+
510
+ // Clear input
511
+ messageInput.value = '';
512
+ updateCharCount();
513
+ }
514
+
515
+ // Add message to chat
516
+ function addMessage(sender, text, isUser) {
517
+ // Hide welcome message if it's the first message
518
+ if (welcomeMessage && !welcomeMessage.classList.contains('hidden')) {
519
+ welcomeMessage.classList.add('hidden');
520
+ }
521
+
522
+ const messageDiv = document.createElement('div');
523
+ messageDiv.className = `mb-4 flex ${isUser ? 'justify-end' : 'justify-start'}`;
524
+
525
+ const messageContent = document.createElement('div');
526
+ messageContent.className = `max-w-xs lg:max-w-md px-4 py-2 rounded-lg ${isUser ? 'bg-blue-600 rounded-tr-none' : 'bg-gray-700 rounded-tl-none'}`;
527
+
528
+ if (!isUser) {
529
+ const senderName = document.createElement('div');
530
+ senderName.className = 'text-xs font-semibold text-blue-300 mb-1';
531
+ senderName.textContent = sender;
532
+ messageContent.appendChild(senderName);
533
+ }
534
+
535
+ const messageText = document.createElement('div');
536
+ messageText.className = 'text-white';
537
+ messageText.textContent = text;
538
+ messageContent.appendChild(messageText);
539
+
540
+ const time = document.createElement('div');
541
+ time.className = `text-xs mt-1 text-right ${isUser ? 'text-blue-200' : 'text-gray-400'}`;
542
+
543
+ const now = new Date();
544
+ time.textContent = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
545
+ messageContent.appendChild(time);
546
+
547
+ messageDiv.appendChild(messageContent);
548
+ chatMessages.appendChild(messageDiv);
549
+
550
+ // Scroll to bottom
551
+ chatMessages.scrollTop = chatMessages.scrollHeight;
552
+ }
553
+
554
+ // Update character count
555
+ function updateCharCount() {
556
+ const count = messageInput.value.length;
557
+ charCount.textContent = `${count}/500`;
558
+
559
+ if (count > 450) {
560
+ charCount.classList.add('text-yellow-400');
561
+ charCount.classList.remove('text-gray-400');
562
+ } else if (count > 490) {
563
+ charCount.classList.add('text-red-400');
564
+ charCount.classList.remove('text-yellow-400');
565
+ } else {
566
+ charCount.classList.add('text-gray-400');
567
+ charCount.classList.remove('text-yellow-400', 'text-red-400');
568
+ }
569
+ }
570
+
571
+ // Save interests
572
+ function saveInterests() {
573
+ interestsContainer.classList.add('hidden');
574
+ // In a real app, we'd save the selected interests to the server
575
+ }
576
+
577
+ // Initialize the app
578
+ init();
579
+ </script>
580
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ultronek01/gomegle" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
581
+ </html>