Hugging Face's logo

Spaces:
MMD-Coder
/
chat
Running

App Files Community
MMD-Coder commited on
Commit
90d0fff
·
verified ·
1 Parent(s): e6d7a49

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +564 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Chat
3
- emoji: 📈
4
  colorFrom: pink
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: chat
3
+ emoji: 🐳
4
  colorFrom: pink
5
+ colorTo: gray
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,564 @@
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
+ <!DOCTYPE html>
2
+ <html lang="en" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Persian Video Chat | چت تصویری پارسی</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ /* Custom styles for RTL/LTR switching */
11
+ .rtl {
12
+ direction: rtl;
13
+ text-align: right;
14
+ }
15
+ .ltr {
16
+ direction: ltr;
17
+ text-align: left;
18
+ }
19
+ /* Video container styling */
20
+ .video-container {
21
+ position: relative;
22
+ padding-bottom: 56.25%; /* 16:9 aspect ratio */
23
+ height: 0;
24
+ overflow: hidden;
25
+ }
26
+ .video-container video {
27
+ position: absolute;
28
+ top: 0;
29
+ left: 0;
30
+ width: 100%;
31
+ height: 100%;
32
+ object-fit: cover;
33
+ }
34
+ /* Custom scrollbar */
35
+ .custom-scrollbar::-webkit-scrollbar {
36
+ width: 6px;
37
+ }
38
+ .custom-scrollbar::-webkit-scrollbar-track {
39
+ background: #f1f1f1;
40
+ }
41
+ .custom-scrollbar::-webkit-scrollbar-thumb {
42
+ background: #888;
43
+ border-radius: 3px;
44
+ }
45
+ .custom-scrollbar::-webkit-scrollbar-thumb:hover {
46
+ background: #555;
47
+ }
48
+ /* Animation for new messages */
49
+ @keyframes slideIn {
50
+ from {
51
+ transform: translateY(10px);
52
+ opacity: 0;
53
+ }
54
+ to {
55
+ transform: translateY(0);
56
+ opacity: 1;
57
+ }
58
+ }
59
+ .message-animation {
60
+ animation: slideIn 0.3s ease-out;
61
+ }
62
+ </style>
63
+ </head>
64
+ <body class="bg-gray-100 font-sans">
65
+ <!-- Language Toggle -->
66
+ <div class="fixed top-4 right-4 z-50">
67
+ <button id="languageToggle" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-full shadow-lg flex items-center">
68
+ <i class="fas fa-language mr-2"></i>
69
+ <span id="currentLanguage">English</span>
70
+ </button>
71
+ </div>
72
+
73
+ <!-- Main Container -->
74
+ <div class="container mx-auto px-4 py-8 max-w-7xl">
75
+ <!-- Header -->
76
+ <header class="text-center mb-8">
77
+ <h1 id="mainTitle" class="text-4xl font-bold text-blue-800 mb-2">Persian Video Chat</h1>
78
+ <p id="mainSubtitle" class="text-gray-600">Connect with people around the world</p>
79
+ </header>
80
+
81
+ <!-- Main Content -->
82
+ <div class="flex flex-col lg:flex-row gap-6">
83
+ <!-- Video Chat Section -->
84
+ <div class="lg:w-2/3 bg-white rounded-xl shadow-lg overflow-hidden">
85
+ <div class="p-4 bg-blue-700 text-white">
86
+ <h2 id="videoTitle" class="text-xl font-semibold"><i class="fas fa-video mr-2"></i>Video Chat</h2>
87
+ </div>
88
+
89
+ <!-- Video Containers -->
90
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 p-4">
91
+ <div class="video-container bg-black rounded-lg">
92
+ <video id="localVideo" autoplay muted></video>
93
+ <div id="localVideoLabel" class="absolute bottom-2 left-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded text-sm">You</div>
94
+ </div>
95
+ <div class="video-container bg-black rounded-lg">
96
+ <video id="remoteVideo" autoplay></video>
97
+ <div id="remoteVideoLabel" class="absolute bottom-2 left-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded text-sm">Stranger</div>
98
+ </div>
99
+ </div>
100
+
101
+ <!-- Video Controls -->
102
+ <div class="p-4 bg-gray-100 flex flex-wrap justify-center gap-4">
103
+ <button id="startChatBtn" class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-full flex items-center">
104
+ <i class="fas fa-play mr-2"></i>
105
+ <span id="startChatText">Start Chat</span>
106
+ </button>
107
+ <button id="nextBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-full flex items-center">
108
+ <i class="fas fa-random mr-2"></i>
109
+ <span id="nextText">Next</span>
110
+ </button>
111
+ <button id="micToggle" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-full flex items-center">
112
+ <i class="fas fa-microphone mr-2"></i>
113
+ <span id="micText">Mic On</span>
114
+ </button>
115
+ <button id="camToggle" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-full flex items-center">
116
+ <i class="fas fa-video mr-2"></i>
117
+ <span id="camText">Cam On</span>
118
+ </button>
119
+ <button id="reportBtn" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-full flex items-center">
120
+ <i class="fas fa-flag mr-2"></i>
121
+ <span id="reportText">Report</span>
122
+ </button>
123
+ </div>
124
+ </div>
125
+
126
+ <!-- Chat Section -->
127
+ <div class="lg:w-1/3 bg-white rounded-xl shadow-lg overflow-hidden flex flex-col">
128
+ <div class="p-4 bg-blue-700 text-white">
129
+ <h2 id="chatTitle" class="text-xl font-semibold"><i class="fas fa-comments mr-2"></i>Text Chat</h2>
130
+ </div>
131
+
132
+ <!-- Messages Container -->
133
+ <div id="messagesContainer" class="flex-1 p-4 overflow-y-auto custom-scrollbar bg-gray-50">
134
+ <div class="text-center text-gray-500 py-4" id="welcomeMessage">
135
+ <i class="fas fa-comment-dots text-2xl mb-2"></i>
136
+ <p id="welcomeText">Start chatting with your match!</p>
137
+ </div>
138
+
139
+ <!-- Sample messages (will be populated dynamically) -->
140
+ <div id="messagesList"></div>
141
+ </div>
142
+
143
+ <!-- Chat Input -->
144
+ <div class="p-4 bg-gray-100 border-t">
145
+ <div class="flex gap-2">
146
+ <input id="messageInput" type="text" placeholder="Type your message..." class="flex-1 px-4 py-2 rounded-full border focus:outline-none focus:ring-2 focus:ring-blue-500">
147
+ <button id="sendMessageBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-full">
148
+ <i class="fas fa-paper-plane"></i>
149
+ </button>
150
+ </div>
151
+ <div class="mt-2 flex justify-between text-sm text-gray-500">
152
+ <div id="typingIndicator" class="invisible">
153
+ <i class="fas fa-pencil-alt mr-1"></i>
154
+ <span id="typingText">Stranger is typing...</span>
155
+ </div>
156
+ <div>
157
+ <button id="translateToggle" class="text-blue-600 hover:underline">
158
+ <i class="fas fa-exchange-alt mr-1"></i>
159
+ <span id="translateText">Translate</span>
160
+ </button>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- Features Section -->
168
+ <section class="mt-12">
169
+ <h2 id="featuresTitle" class="text-2xl font-bold text-center mb-6 text-blue-800">Our Features</h2>
170
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
171
+ <div class="bg-white p-6 rounded-xl shadow-md text-center">
172
+ <div class="text-blue-600 text-4xl mb-4">
173
+ <i class="fas fa-globe"></i>
174
+ </div>
175
+ <h3 id="feature1Title" class="text-xl font-semibold mb-2">Global Connections</h3>
176
+ <p id="feature1Desc" class="text-gray-600">Meet people from all around the world and make new friends.</p>
177
+ </div>
178
+ <div class="bg-white p-6 rounded-xl shadow-md text-center">
179
+ <div class="text-blue-600 text-4xl mb-4">
180
+ <i class="fas fa-shield-alt"></i>
181
+ </div>
182
+ <h3 id="feature2Title" class="text-xl font-semibold mb-2">Safe Environment</h3>
183
+ <p id="feature2Desc" class="text-gray-600">Our moderation system keeps the platform safe for everyone.</p>
184
+ </div>
185
+ <div class="bg-white p-6 rounded-xl shadow-md text-center">
186
+ <div class="text-blue-600 text-4xl mb-4">
187
+ <i class="fas fa-language"></i>
188
+ </div>
189
+ <h3 id="feature3Title" class="text-xl font-semibold mb-2">Language Support</h3>
190
+ <p id="feature3Desc" class="text-gray-600">Chat in Persian or English with built-in translation.</p>
191
+ </div>
192
+ </div>
193
+ </section>
194
+ </div>
195
+
196
+ <!-- Footer -->
197
+ <footer class="bg-gray-800 text-white py-8 mt-12">
198
+ <div class="container mx-auto px-4 max-w-7xl">
199
+ <div class="flex flex-col md:flex-row justify-between">
200
+ <div class="mb-6 md:mb-0">
201
+ <h3 id="footerTitle" class="text-xl font-bold mb-4">Persian Video Chat</h3>
202
+ <p id="footerDesc" class="text-gray-400">Connecting people through video and text chat.</p>
203
+ </div>
204
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
205
+ <div>
206
+ <h4 class="font-semibold mb-3" id="linksTitle">Links</h4>
207
+ <ul class="space-y-2">
208
+ <li><a href="#" class="text-gray-400 hover:text-white" id="homeLink">Home</a></li>
209
+ <li><a href="#" class="text-gray-400 hover:text-white" id="aboutLink">About</a></li>
210
+ <li><a href="#" class="text-gray-400 hover:text-white" id="privacyLink">Privacy</a></li>
211
+ <li><a href="#" class="text-gray-400 hover:text-white" id="termsLink">Terms</a></li>
212
+ </ul>
213
+ </div>
214
+ <div>
215
+ <h4 class="font-semibold mb-3" id="contactTitle">Contact</h4>
216
+ <ul class="space-y-2">
217
+ <li class="text-gray-400" id="emailText">Email: [email protected]</li>
218
+ <li class="text-gray-400" id="supportText">Support: [email protected]</li>
219
+ </ul>
220
+ </div>
221
+ <div>
222
+ <h4 class="font-semibold mb-3" id="socialTitle">Social</h4>
223
+ <div class="flex space-x-4">
224
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-telegram text-xl"></i></a>
225
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram text-xl"></i></a>
226
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter text-xl"></i></a>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
232
+ <p id="copyrightText">&copy; 2023 Persian Video Chat. All rights reserved.</p>
233
+ </div>
234
+ </div>
235
+ </footer>
236
+
237
+ <!-- Report Modal -->
238
+ <div id="reportModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
239
+ <div class="bg-white rounded-xl p-6 w-full max-w-md">
240
+ <div class="flex justify-between items-center mb-4">
241
+ <h3 id="reportModalTitle" class="text-xl font-semibold">Report User</h3>
242
+ <button id="closeReportModal" class="text-gray-500 hover:text-gray-700">
243
+ <i class="fas fa-times"></i>
244
+ </button>
245
+ </div>
246
+ <div class="mb-4">
247
+ <p id="reportReasonText" class="mb-2">Reason for reporting:</p>
248
+ <select id="reportReason" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
249
+ <option value="inappropriate" id="reportOption1">Inappropriate behavior</option>
250
+ <option value="spam" id="reportOption2">Spam or advertising</option>
251
+ <option value="harassment" id="reportOption3">Harassment</option>
252
+ <option value="other" id="reportOption4">Other</option>
253
+ </select>
254
+ </div>
255
+ <div id="reportDetailsContainer" class="mb-4 hidden">
256
+ <label for="reportDetails" id="reportDetailsLabel" class="block mb-2">Please provide details:</label>
257
+ <textarea id="reportDetails" rows="3" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
258
+ </div>
259
+ <div class="flex justify-end gap-3">
260
+ <button id="cancelReportBtn" class="px-4 py-2 border rounded-lg hover:bg-gray-100">Cancel</button>
261
+ <button id="submitReportBtn" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">Submit Report</button>
262
+ </div>
263
+ </div>
264
+ </div>
265
+
266
+ <script>
267
+ // Language management
268
+ const translations = {
269
+ en: {
270
+ mainTitle: "Persian Video Chat",
271
+ mainSubtitle: "Connect with people around the world",
272
+ videoTitle: "Video Chat",
273
+ localVideoLabel: "You",
274
+ remoteVideoLabel: "Stranger",
275
+ startChatText: "Start Chat",
276
+ nextText: "Next",
277
+ micText: "Mic On",
278
+ camText: "Cam On",
279
+ reportText: "Report",
280
+ chatTitle: "Text Chat",
281
+ welcomeText: "Start chatting with your match!",
282
+ typingText: "Stranger is typing...",
283
+ translateText: "Translate",
284
+ featuresTitle: "Our Features",
285
+ feature1Title: "Global Connections",
286
+ feature1Desc: "Meet people from all around the world and make new friends.",
287
+ feature2Title: "Safe Environment",
288
+ feature2Desc: "Our moderation system keeps the platform safe for everyone.",
289
+ feature3Title: "Language Support",
290
+ feature3Desc: "Chat in Persian or English with built-in translation.",
291
+ footerTitle: "Persian Video Chat",
292
+ footerDesc: "Connecting people through video and text chat.",
293
+ linksTitle: "Links",
294
+ homeLink: "Home",
295
+ aboutLink: "About",
296
+ privacyLink: "Privacy",
297
+ termsLink: "Terms",
298
+ contactTitle: "Contact",
299
+ emailText: "Email: [email protected]",
300
+ supportText: "Support: [email protected]",
301
+ socialTitle: "Social",
302
+ copyrightText: "© 2023 Persian Video Chat. All rights reserved.",
303
+ reportModalTitle: "Report User",
304
+ reportReasonText: "Reason for reporting:",
305
+ reportOption1: "Inappropriate behavior",
306
+ reportOption2: "Spam or advertising",
307
+ reportOption3: "Harassment",
308
+ reportOption4: "Other",
309
+ reportDetailsLabel: "Please provide details:",
310
+ currentLanguage: "English"
311
+ },
312
+ fa: {
313
+ mainTitle: "چت تصویری پارسی",
314
+ mainSubtitle: "با افراد از سراسر جهان ارتباط برقرار کنید",
315
+ videoTitle: "چت تصویری",
316
+ localVideoLabel: "شما",
317
+ remoteVideoLabel: "فرد مقابل",
318
+ startChatText: "شروع چت",
319
+ nextText: "فرد بعدی",
320
+ micText: "میکروفون روشن",
321
+ camText: "دوربین روشن",
322
+ reportText: "گزارش",
323
+ chatTitle: "چت متنی",
324
+ welcomeText: "گفتگو با فرد مقابل را شروع کنید!",
325
+ typingText: "فرد مقابل در حال تایپ است...",
326
+ translateText: "ترجمه",
327
+ featuresTitle: "ویژگی های ما",
328
+ feature1Title: "ارتباطات جهانی",
329
+ feature1Desc: "با افراد از سراسر جهان ملاقات کنید و دوستان جدیدی پیدا کنید.",
330
+ feature2Title: "محیط امن",
331
+ feature2Desc: "سیستم نظارتی ما این پلتفرم را برای همه امن نگه می دارد.",
332
+ feature3Title: "پشتیبانی از زبان",
333
+ feature3Desc: "به فارسی یا انگلیسی چت کنید با قابلیت ترجمه داخلی.",
334
+ footerTitle: "چت تصویری پارسی",
335
+ footerDesc: "ارتباط افراد از طریق چت تصویری و متنی.",
336
+ linksTitle: "لینک ها",
337
+ homeLink: "خانه",
338
+ aboutLink: "درباره ما",
339
+ privacyLink: "حریم خصوصی",
340
+ termsLink: "قوانین",
341
+ contactTitle: "تماس",
342
+ emailText: "ایمیل: [email protected]",
343
+ supportText: "پشتیبانی: [email protected]",
344
+ socialTitle: "شبکه های اجتماعی",
345
+ copyrightText: "© 2023 چت تصویری پارسی. تمام حقوق محفوظ است.",
346
+ reportModalTitle: "گزارش کاربر",
347
+ reportReasonText: "دلیل گزارش:",
348
+ reportOption1: "رفتار نامناسب",
349
+ reportOption2: "اسپم یا تبلیغات",
350
+ reportOption3: "آزار و اذیت",
351
+ reportOption4: "سایر",
352
+ reportDetailsLabel: "لطفاً جزئیات را ارائه دهید:",
353
+ currentLanguage: "فارسی"
354
+ }
355
+ };
356
+
357
+ let currentLang = 'en';
358
+
359
+ // Toggle language
360
+ document.getElementById('languageToggle').addEventListener('click', function() {
361
+ currentLang = currentLang === 'en' ? 'fa' : 'en';
362
+ document.documentElement.dir = currentLang === 'fa' ? 'rtl' : 'ltr';
363
+ document.documentElement.lang = currentLang;
364
+ updateLanguage();
365
+ });
366
+
367
+ function updateLanguage() {
368
+ const elements = document.querySelectorAll('[id]');
369
+ elements.forEach(element => {
370
+ const id = element.id;
371
+ if (translations[currentLang][id]) {
372
+ if (element.tagName === 'INPUT' && element.placeholder) {
373
+ element.placeholder = translations[currentLang][id];
374
+ } else {
375
+ element.textContent = translations[currentLang][id];
376
+ }
377
+ }
378
+ });
379
+
380
+ // Update language toggle button text
381
+ document.getElementById('currentLanguage').textContent = translations[currentLang].currentLanguage;
382
+ }
383
+
384
+ // Report modal functionality
385
+ const reportModal = document.getElementById('reportModal');
386
+ const openReportBtn = document.getElementById('reportBtn');
387
+ const closeReportModal = document.getElementById('closeReportModal');
388
+ const cancelReportBtn = document.getElementById('cancelReportBtn');
389
+ const reportReason = document.getElementById('reportReason');
390
+ const reportDetailsContainer = document.getElementById('reportDetailsContainer');
391
+
392
+ openReportBtn.addEventListener('click', () => {
393
+ reportModal.classList.remove('hidden');
394
+ });
395
+
396
+ closeReportModal.addEventListener('click', () => {
397
+ reportModal.classList.add('hidden');
398
+ });
399
+
400
+ cancelReportBtn.addEventListener('click', () => {
401
+ reportModal.classList.add('hidden');
402
+ });
403
+
404
+ reportReason.addEventListener('change', (e) => {
405
+ if (e.target.value === 'other') {
406
+ reportDetailsContainer.classList.remove('hidden');
407
+ } else {
408
+ reportDetailsContainer.classList.add('hidden');
409
+ }
410
+ });
411
+
412
+ document.getElementById('submitReportBtn').addEventListener('click', () => {
413
+ alert(currentLang === 'en' ? 'Thank you for your report. We will review it shortly.' : 'از گزارش شما متشکریم. به زودی آن را بررسی خواهیم کرد.');
414
+ reportModal.classList.add('hidden');
415
+ });
416
+
417
+ // Chat functionality
418
+ const messageInput = document.getElementById('messageInput');
419
+ const sendMessageBtn = document.getElementById('sendMessageBtn');
420
+ const messagesList = document.getElementById('messagesList');
421
+ const typingIndicator = document.getElementById('typingIndicator');
422
+
423
+ let typingTimer;
424
+
425
+ messageInput.addEventListener('input', () => {
426
+ typingIndicator.classList.remove('invisible');
427
+ clearTimeout(typingTimer);
428
+ typingTimer = setTimeout(() => {
429
+ typingIndicator.classList.add('invisible');
430
+ }, 2000);
431
+ });
432
+
433
+ function addMessage(text, isLocal) {
434
+ const messageDiv = document.createElement('div');
435
+ messageDiv.classList.add('mb-4', 'message-animation');
436
+
437
+ if (isLocal) {
438
+ messageDiv.classList.add('text-right');
439
+ messageDiv.innerHTML = `
440
+ <div class="inline-block bg-blue-100 text-blue-900 rounded-lg px-4 py-2 max-w-xs md:max-w-md">
441
+ ${text}
442
+ </div>
443
+ <div class="text-xs text-gray-500 mt-1">${currentLang === 'en' ? 'You' : 'شما'}</div>
444
+ `;
445
+ } else {
446
+ messageDiv.classList.add('text-left');
447
+ messageDiv.innerHTML = `
448
+ <div class="inline-block bg-gray-200 text-gray-800 rounded-lg px-4 py-2 max-w-xs md:max-w-md">
449
+ ${text}
450
+ </div>
451
+ <div class="text-xs text-gray-500 mt-1">${currentLang === 'en' ? 'Stranger' : 'فرد مقابل'}</div>
452
+ `;
453
+ }
454
+
455
+ messagesList.appendChild(messageDiv);
456
+ messagesContainer.scrollTop = messagesContainer.scrollHeight;
457
+
458
+ // Hide welcome message after first message
459
+ document.getElementById('welcomeMessage').classList.add('hidden');
460
+ }
461
+
462
+ sendMessageBtn.addEventListener('click', sendMessage);
463
+ messageInput.addEventListener('keypress', (e) => {
464
+ if (e.key === 'Enter') {
465
+ sendMessage();
466
+ }
467
+ });
468
+
469
+ function sendMessage() {
470
+ const text = messageInput.value.trim();
471
+ if (text) {
472
+ addMessage(text, true);
473
+ messageInput.value = '';
474
+
475
+ // Simulate response after 1-3 seconds
476
+ setTimeout(() => {
477
+ const responses = currentLang === 'en' ? [
478
+ "Hi there! How are you?",
479
+ "Nice to meet you!",
480
+ "Where are you from?",
481
+ "What do you like to do for fun?"
482
+ ] : [
483
+ "سلام! حالتون چطوره؟",
484
+ "خوشوقتم!",
485
+ "اهل کجایید؟",
486
+ "برای تفریح چه کارهایی دوست دارید انجام بدید؟"
487
+ ];
488
+
489
+ const randomResponse = responses[Math.floor(Math.random() * responses.length)];
490
+ addMessage(randomResponse, false);
491
+ }, 1000 + Math.random() * 2000);
492
+ }
493
+ }
494
+
495
+ // Video controls
496
+ let micOn = true;
497
+ let camOn = true;
498
+
499
+ document.getElementById('micToggle').addEventListener('click', () => {
500
+ micOn = !micOn;
501
+ document.getElementById('micText').textContent = micOn ?
502
+ (currentLang === 'en' ? 'Mic On' : 'میکروفون روشن') :
503
+ (currentLang === 'en' ? 'Mic Off' : 'میکروفون خاموش');
504
+ document.getElementById('micToggle').classList.toggle('bg-gray-600');
505
+ document.getElementById('micToggle').classList.toggle('bg-red-600');
506
+ });
507
+
508
+ document.getElementById('camToggle').addEventListener('click', () => {
509
+ camOn = !camOn;
510
+ document.getElementById('camText').textContent = camOn ?
511
+ (currentLang === 'en' ? 'Cam On' : 'دوربین روشن') :
512
+ (currentLang === 'en' ? 'Cam Off' : 'دوربین خاموش');
513
+ document.getElementById('camToggle').classList.toggle('bg-gray-600');
514
+ document.getElementById('camToggle').classList.toggle('bg-red-600');
515
+
516
+ // Simulate video on/off
517
+ const video = document.getElementById('localVideo');
518
+ if (camOn) {
519
+ video.style.opacity = '1';
520
+ } else {
521
+ video.style.opacity = '0';
522
+ video.style.backgroundColor = '#000';
523
+ }
524
+ });
525
+
526
+ // Start chat simulation
527
+ document.getElementById('startChatBtn').addEventListener('click', () => {
528
+ // Simulate connecting to a stranger
529
+ document.getElementById('startChatBtn').classList.add('hidden');
530
+ document.getElementById('nextBtn').classList.remove('hidden');
531
+
532
+ // Simulate video feed
533
+ setTimeout(() => {
534
+ document.getElementById('remoteVideo').style.backgroundColor = '#333';
535
+ document.getElementById('remoteVideo').style.opacity = '1';
536
+
537
+ // Add welcome message
538
+ addMessage(currentLang === 'en' ?
539
+ "Hello! Nice to meet you. How are you today?" :
540
+ "سلام! خوشوقتم. امروز حالتون چطوره؟", false);
541
+ }, 1500);
542
+ });
543
+
544
+ // Next stranger
545
+ document.getElementById('nextBtn').addEventListener('click', () => {
546
+ // Reset chat
547
+ document.getElementById('remoteVideo').style.opacity = '0';
548
+ document.getElementById('messagesList').innerHTML = '';
549
+ document.getElementById('welcomeMessage').classList.remove('hidden');
550
+
551
+ // Show start button again
552
+ document.getElementById('startChatBtn').classList.remove('hidden');
553
+ document.getElementById('nextBtn').classList.add('hidden');
554
+ });
555
+
556
+ // Initialize
557
+ updateLanguage();
558
+ document.getElementById('nextBtn').classList.add('hidden');
559
+
560
+ // Simulate local video (would be real in a production app)
561
+ document.getElementById('localVideo').style.backgroundColor = '#333';
562
+ </script>
563
+ <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=MMD-Coder/chat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
564
+ </html>