OfisNet commited on
Commit
9d4e714
·
verified ·
1 Parent(s): fb49027

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +802 -19
index.html CHANGED
@@ -1,19 +1,802 @@
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="tr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Modern AI Chat Uygulaması</title>
7
+ <!-- İkonlar için FontAwesome CDN -->
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+
10
+ <style>
11
+ /* --- GENEL AYARLAR & DEĞİŞKENLER --- */
12
+ :root {
13
+ --primary-color: #6c5ce7;
14
+ --secondary-color: #a29bfe;
15
+ --bg-color: #f0f2f5;
16
+ --sidebar-bg: #ffffff;
17
+ --chat-bg: #ffffff;
18
+ --text-color: #2d3436;
19
+ --text-light: #636e72;
20
+ --message-user-bg: #6c5ce7;
21
+ --message-user-text: #ffffff;
22
+ --message-bot-bg: #dfe6e9;
23
+ --message-bot-text: #2d3436;
24
+ --shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
25
+ --radius: 20px;
26
+ --transition: all 0.3s ease;
27
+ }
28
+
29
+ /* Karanlık Mod Değişkenleri */
30
+ [data-theme="dark"] {
31
+ --bg-color: #1e272e;
32
+ --sidebar-bg: #2d3436;
33
+ --chat-bg: #2d3436;
34
+ --text-color: #dfe6e9;
35
+ --text-light: #b2bec3;
36
+ --message-user-bg: #6c5ce7;
37
+ --message-user-text: #ffffff;
38
+ --message-bot-bg: #353b48;
39
+ --message-bot-text: #dfe6e9;
40
+ --shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
41
+ }
42
+
43
+ * {
44
+ margin: 0;
45
+ padding: 0;
46
+ box-sizing: border-box;
47
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
48
+ }
49
+
50
+ body {
51
+ background-color: var(--bg-color);
52
+ color: var(--text-color);
53
+ height: 100vh;
54
+ display: flex;
55
+ justify-content: center;
56
+ align-items: center;
57
+ overflow: hidden;
58
+ transition: background-color 0.3s;
59
+ }
60
+
61
+ /* --- ANA KONTEYNER --- */
62
+ .app-container {
63
+ width: 95%;
64
+ max-width: 1200px;
65
+ height: 90vh;
66
+ background-color: var(--sidebar-bg);
67
+ border-radius: var(--radius);
68
+ box-shadow: var(--shadow);
69
+ display: flex;
70
+ overflow: hidden;
71
+ position: relative;
72
+ }
73
+
74
+ /* --- SIDEBAR (YAN MENÜ) --- */
75
+ .sidebar {
76
+ width: 300px;
77
+ background-color: var(--sidebar-bg);
78
+ border-right: 1px solid rgba(0,0,0,0.05);
79
+ display: flex;
80
+ flex-direction: column;
81
+ transition: transform 0.3s ease;
82
+ z-index: 100;
83
+ }
84
+
85
+ .sidebar-header {
86
+ padding: 20px;
87
+ display: flex;
88
+ justify-content: space-between;
89
+ align-items: center;
90
+ }
91
+
92
+ .user-profile {
93
+ display: flex;
94
+ align-items: center;
95
+ gap: 15px;
96
+ }
97
+
98
+ .avatar {
99
+ width: 50px;
100
+ height: 50px;
101
+ border-radius: 50%;
102
+ object-fit: cover;
103
+ border: 2px solid var(--primary-color);
104
+ }
105
+
106
+ .user-info h3 {
107
+ font-size: 1.1rem;
108
+ font-weight: 600;
109
+ }
110
+
111
+ .user-info p {
112
+ font-size: 0.85rem;
113
+ color: var(--text-light);
114
+ }
115
+
116
+ .new-chat-btn {
117
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
118
+ color: white;
119
+ border: none;
120
+ padding: 12px 20px;
121
+ border-radius: 30px;
122
+ margin: 0 20px 20px;
123
+ cursor: pointer;
124
+ font-weight: 600;
125
+ display: flex;
126
+ align-items: center;
127
+ justify-content: center;
128
+ gap: 10px;
129
+ box-shadow: 0 4px 10px rgba(108, 92, 231, 0.3);
130
+ transition: transform 0.2s;
131
+ }
132
+
133
+ .new-chat-btn:hover {
134
+ transform: scale(1.02);
135
+ }
136
+
137
+ .contact-list {
138
+ flex: 1;
139
+ overflow-y: auto;
140
+ padding: 0 10px;
141
+ }
142
+
143
+ .contact-item {
144
+ display: flex;
145
+ align-items: center;
146
+ padding: 15px;
147
+ border-radius: 15px;
148
+ cursor: pointer;
149
+ transition: background-color 0.2s;
150
+ margin-bottom: 5px;
151
+ }
152
+
153
+ .contact-item:hover, .contact-item.active {
154
+ background-color: rgba(108, 92, 231, 0.1);
155
+ }
156
+
157
+ .contact-item img {
158
+ width: 40px;
159
+ height: 40px;
160
+ border-radius: 50%;
161
+ margin-right: 15px;
162
+ }
163
+
164
+ .contact-details {
165
+ flex: 1;
166
+ }
167
+
168
+ .contact-name {
169
+ font-weight: 600;
170
+ margin-bottom: 3px;
171
+ display: flex;
172
+ justify-content: space-between;
173
+ }
174
+
175
+ .last-msg {
176
+ font-size: 0.85rem;
177
+ color: var(--text-light);
178
+ white-space: nowrap;
179
+ overflow: hidden;
180
+ text-overflow: ellipsis;
181
+ max-width: 160px;
182
+ }
183
+
184
+ .anycoder-link {
185
+ text-align: center;
186
+ padding: 15px;
187
+ font-size: 0.75rem;
188
+ color: var(--text-light);
189
+ text-decoration: none;
190
+ border-top: 1px solid rgba(0,0,0,0.05);
191
+ }
192
+
193
+ .anycoder-link:hover {
194
+ color: var(--primary-color);
195
+ }
196
+
197
+ /* --- CHAT ALANI --- */
198
+ .chat-area {
199
+ flex: 1;
200
+ display: flex;
201
+ flex-direction: column;
202
+ background-color: var(--chat-bg);
203
+ position: relative;
204
+ }
205
+
206
+ .chat-header {
207
+ padding: 15px 25px;
208
+ background-color: var(--sidebar-bg);
209
+ border-bottom: 1px solid rgba(0,0,0,0.05);
210
+ display: flex;
211
+ justify-content: space-between;
212
+ align-items: center;
213
+ }
214
+
215
+ .chat-header-info {
216
+ display: flex;
217
+ align-items: center;
218
+ gap: 15px;
219
+ }
220
+
221
+ .back-btn {
222
+ display: none; /* Mobilde görünür olacak */
223
+ background: none;
224
+ border: none;
225
+ font-size: 1.2rem;
226
+ color: var(--text-color);
227
+ cursor: pointer;
228
+ }
229
+
230
+ .status-dot {
231
+ width: 10px;
232
+ height: 10px;
233
+ background-color: #00b894;
234
+ border-radius: 50%;
235
+ display: inline-block;
236
+ margin-right: 5px;
237
+ }
238
+
239
+ .theme-toggle {
240
+ background: none;
241
+ border: none;
242
+ color: var(--text-color);
243
+ font-size: 1.2rem;
244
+ cursor: pointer;
245
+ padding: 10px;
246
+ border-radius: 50%;
247
+ transition: var(--transition);
248
+ }
249
+
250
+ .theme-toggle:hover {
251
+ background-color: rgba(0,0,0,0.05);
252
+ }
253
+
254
+ /* --- MESAJLAR ALANI --- */
255
+ .messages-container {
256
+ flex: 1;
257
+ padding: 20px;
258
+ overflow-y: auto;
259
+ display: flex;
260
+ flex-direction: column;
261
+ gap: 15px;
262
+ scroll-behavior: smooth;
263
+ }
264
+
265
+ .message {
266
+ max-width: 70%;
267
+ padding: 12px 18px;
268
+ border-radius: 18px;
269
+ position: relative;
270
+ font-size: 0.95rem;
271
+ line-height: 1.5;
272
+ animation: fadeIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
273
+ word-wrap: break-word;
274
+ }
275
+
276
+ @keyframes fadeIn {
277
+ from { opacity: 0; transform: translateY(10px); }
278
+ to { opacity: 1; transform: translateY(0); }
279
+ }
280
+
281
+ .message.bot {
282
+ align-self: flex-start;
283
+ background-color: var(--message-bot-bg);
284
+ color: var(--message-bot-text);
285
+ border-bottom-left-radius: 5px;
286
+ }
287
+
288
+ .message.user {
289
+ align-self: flex-end;
290
+ background-color: var(--message-user-bg);
291
+ color: var(--message-user-text);
292
+ border-bottom-right-radius: 5px;
293
+ }
294
+
295
+ .message-time {
296
+ font-size: 0.7rem;
297
+ margin-top: 5px;
298
+ opacity: 0.7;
299
+ text-align: right;
300
+ }
301
+
302
+ /* --- YAZIYOR İNDİKATÖRÜ --- */
303
+ .typing-indicator {
304
+ display: none; /* Varsayılan gizli */
305
+ align-self: flex-start;
306
+ background-color: var(--message-bot-bg);
307
+ padding: 12px 18px;
308
+ border-radius: 18px;
309
+ border-bottom-left-radius: 5px;
310
+ margin-bottom: 10px;
311
+ gap: 5px;
312
+ align-items: center;
313
+ }
314
+
315
+ .dot {
316
+ width: 8px;
317
+ height: 8px;
318
+ background-color: var(--text-light);
319
+ border-radius: 50%;
320
+ animation: bounce 1.4s infinite ease-in-out both;
321
+ }
322
+
323
+ .dot:nth-child(1) { animation-delay: -0.32s; }
324
+ .dot:nth-child(2) { animation-delay: -0.16s; }
325
+
326
+ @keyframes bounce {
327
+ 0%, 80%, 100% { transform: scale(0); }
328
+ 40% { transform: scale(1); }
329
+ }
330
+
331
+ /* --- GİRİŞ ALANI --- */
332
+ .input-area {
333
+ padding: 20px;
334
+ background-color: var(--sidebar-bg);
335
+ border-top: 1px solid rgba(0,0,0,0.05);
336
+ display: flex;
337
+ align-items: flex-end;
338
+ gap: 10px;
339
+ }
340
+
341
+ .attach-btn {
342
+ background: none;
343
+ border: none;
344
+ color: var(--text-light);
345
+ font-size: 1.2rem;
346
+ cursor: pointer;
347
+ padding: 10px;
348
+ transition: color 0.3s;
349
+ }
350
+
351
+ .attach-btn:hover {
352
+ color: var(--primary-color);
353
+ }
354
+
355
+ .message-input {
356
+ flex: 1;
357
+ padding: 12px 15px;
358
+ border: 1px solid rgba(0,0,0,0.1);
359
+ border-radius: 25px;
360
+ background-color: var(--bg-color);
361
+ color: var(--text-color);
362
+ font-size: 1rem;
363
+ resize: none;
364
+ max-height: 120px;
365
+ outline: none;
366
+ transition: border-color 0.3s;
367
+ }
368
+
369
+ .message-input:focus {
370
+ border-color: var(--primary-color);
371
+ }
372
+
373
+ .send-btn {
374
+ width: 45px;
375
+ height: 45px;
376
+ border-radius: 50%;
377
+ background-color: var(--primary-color);
378
+ color: white;
379
+ border: none;
380
+ cursor: pointer;
381
+ display: flex;
382
+ justify-content: center;
383
+ align-items: center;
384
+ font-size: 1.1rem;
385
+ transition: transform 0.2s, background-color 0.3s;
386
+ box-shadow: 0 4px 10px rgba(108, 92, 231, 0.3);
387
+ }
388
+
389
+ .send-btn:hover {
390
+ transform: scale(1.05);
391
+ background-color: #5649c0;
392
+ }
393
+
394
+ .send-btn:disabled {
395
+ background-color: #ccc;
396
+ cursor: not-allowed;
397
+ transform: none;
398
+ box-shadow: none;
399
+ }
400
+
401
+ /* --- TOAST BİLDİRİMİ --- */
402
+ .toast {
403
+ position: absolute;
404
+ top: 20px;
405
+ left: 50%;
406
+ transform: translateX(-50%) translateY(-100px);
407
+ background-color: #ff7675;
408
+ color: white;
409
+ padding: 10px 20px;
410
+ border-radius: 20px;
411
+ opacity: 0;
412
+ transition: all 0.5s ease;
413
+ z-index: 1000;
414
+ box-shadow: 0 5px 15px rgba(0,0,0,0.2);
415
+ }
416
+
417
+ .toast.show {
418
+ transform: translateX(-50%) translateY(0);
419
+ opacity: 1;
420
+ }
421
+
422
+ /* --- YENİ MESAJ KUTUSU --- */
423
+ .new-message-popup {
424
+ position: absolute;
425
+ top: 50%;
426
+ left: 50%;
427
+ transform: translate(-50%, -50%);
428
+ background: var(--sidebar-bg);
429
+ padding: 30px;
430
+ border-radius: 20px;
431
+ box-shadow: 0 10px 40px rgba(0,0,0,0.2);
432
+ text-align: center;
433
+ display: none;
434
+ z-index: 200;
435
+ width: 80%;
436
+ max-width: 400px;
437
+ }
438
+
439
+ .new-message-popup h2 {
440
+ margin-bottom: 15px;
441
+ color: var(--primary-color);
442
+ }
443
+
444
+ .btn-group {
445
+ display: flex;
446
+ gap: 10px;
447
+ justify-content: center;
448
+ margin-top: 20px;
449
+ }
450
+
451
+ .secondary-btn {
452
+ background: transparent;
453
+ border: 2px solid var(--primary-color);
454
+ color: var(--primary-color);
455
+ padding: 8px 20px;
456
+ border-radius: 20px;
457
+ cursor: pointer;
458
+ font-weight: 600;
459
+ }
460
+
461
+ .secondary-btn:hover {
462
+ background: var(--primary-color);
463
+ color: white;
464
+ }
465
+
466
+ /* --- RESPONSIVE TASARIM --- */
467
+ @media (max-width: 768px) {
468
+ .app-container {
469
+ width: 100%;
470
+ height: 100%;
471
+ border-radius: 0;
472
+ }
473
+
474
+ .sidebar {
475
+ position: absolute;
476
+ height: 100%;
477
+ transform: translateX(-100%);
478
+ }
479
+
480
+ .sidebar.active {
481
+ transform: translateX(0);
482
+ }
483
+
484
+ .back-btn {
485
+ display: block;
486
+ }
487
+
488
+ .message {
489
+ max-width: 85%;
490
+ }
491
+ }
492
+ </style>
493
+ </head>
494
+ <body>
495
+
496
+ <div class="app-container">
497
+ <!-- Bildirim Kutusu -->
498
+ <div id="toast" class="toast">Lütfen bir mesaj giriniz!</div>
499
+
500
+ <!-- Yeni Mesaj Arayüzü -->
501
+ <div id="newMessagePopup" class="new-message-popup">
502
+ <h2>Yeni Sohbet Başlat</h2>
503
+ <p>Hangi konuda sohbet etmeyi tercih edersiniz?</p>
504
+ <div class="btn-group">
505
+ <button class="secondary-btn" onclick="startNewChat('Teknoloji')">Teknoloji</button>
506
+ <button class="secondary-btn" onclick="startNewChat('Eğlence')">Eğlence</button>
507
+ <button class="secondary-btn" onclick="startNewChat('Soru')">Soru Cevapla</button>
508
+ </div>
509
+ </div>
510
+
511
+ <!-- Sidebar -->
512
+ <aside class="sidebar" id="sidebar">
513
+ <div class="sidebar-header">
514
+ <div class="user-profile">
515
+ <!-- Kullanıcı Avatarı -->
516
+ <img src="https://picsum.photos/seed/user1/100/100" alt="Profil" class="avatar">
517
+ <div class="user-info">
518
+ <h3>Müşteri Hizmetleri</h3>
519
+ <p><span class="status-dot"></span>Çevrimiçi</p>
520
+ </div>
521
+ </div>
522
+ <button class="theme-toggle" id="themeToggle" title="Temayı Değiştir">
523
+ <i class="fas fa-moon"></i>
524
+ </button>
525
+ </div>
526
+
527
+ <button class="new-chat-btn" onclick="showNewChatPopup()">
528
+ <i class="fas fa-plus"></i> Yeni Sohbet
529
+ </button>
530
+
531
+ <div class="contact-list" id="contactList">
532
+ <!-- JS ile doldurulacak -->
533
+ </div>
534
+
535
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
536
+ Built with anycoder
537
+ </a>
538
+ </aside>
539
+
540
+ <!-- Chat Alanı -->
541
+ <main class="chat-area">
542
+ <header class="chat-header">
543
+ <div class="chat-header-info">
544
+ <button class="back-btn" id="backBtn">
545
+ <i class="fas fa-arrow-left"></i>
546
+ </button>
547
+ <img src="https://picsum.photos/seed/ai/100/100" alt="AI Avatar" class="avatar" id="chatAvatar">
548
+ <div>
549
+ <h3 id="chatName">AI Asistan</h3>
550
+ <p style="font-size: 0.8rem; color: var(--text-light);">Sürekli hazır</p>
551
+ </div>
552
+ </div>
553
+ <div class="header-actions">
554
+ <button class="theme-toggle" onclick="showNewChatPopup()">
555
+ <i class="fas fa-comment-dots"></i>
556
+ </button>
557
+ </div>
558
+ </header>
559
+
560
+ <div class="messages-container" id="messagesContainer">
561
+ <!-- Mesajlar buraya eklenecek -->
562
+ <div class="message bot">
563
+ Merhaba! Ben AI Chat Asistanı. Size nasıl yardımcı olabilirim?
564
+ <div class="message-time">Şimdi</div>
565
+ </div>
566
+ </div>
567
+
568
+ <!-- Yazıyor Göstergesi -->
569
+ <div class="typing-indicator" id="typingIndicator">
570
+ <div class="dot"></div>
571
+ <div class="dot"></div>
572
+ <div class="dot"></div>
573
+ </div>
574
+
575
+ <div class="input-area">
576
+ <button class="attach-btn" title="Dosya Ekle">
577
+ <i class="fas fa-paperclip"></i>
578
+ </button>
579
+ <textarea id="messageInput" class="message-input" placeholder="Bir mesaj yazın..." rows="1"></textarea>
580
+ <button class="send-btn" id="sendBtn">
581
+ <i class="fas fa-paper-plane"></i>
582
+ </button>
583
+ </div>
584
+ </main>
585
+ </div>
586
+
587
+ <script>
588
+ // --- DOM Elementleri Seçimi ---
589
+ const messageInput = document.getElementById('messageInput');
590
+ const sendBtn = document.getElementById('sendBtn');
591
+ const messagesContainer = document.getElementById('messagesContainer');
592
+ const typingIndicator = document.getElementById('typingIndicator');
593
+ const themeToggle = document.getElementById('themeToggle');
594
+ const contactList = document.getElementById('contactList');
595
+ const sidebar = document.getElementById('sidebar');
596
+ const backBtn = document.getElementById('backBtn');
597
+ const newMessagePopup = document.getElementById('newMessagePopup');
598
+ const toast = document.getElementById('toast');
599
+ const chatName = document.getElementById('chatName');
600
+ const chatAvatar = document.getElementById('chatAvatar');
601
+
602
+ // --- Durum Yönetimi ---
603
+ let isTyping = false;
604
+ let isDarkMode = false;
605
+
606
+ // --- Başlangıç Verileri ---
607
+ const initialContacts = [
608
+ { id: 1, name: "AI Asistan", lastMsg: "Harika bir gün dilerim!", img: "ai" },
609
+ { id: 2, name: "Teknik Destek", lastMsg: "Sorununuz çözüldü mü?", img: "tech" },
610
+ { id: 3, name: "Proje Ekip", lastMsg: "Toplantı saat 14:00'da.", img: "team" },
611
+ { id: 4, name: "Haberler", lastMsg: "Yeni özellikler eklendi.", img: "news" }
612
+ ];
613
+
614
+ // --- Başlatma ---
615
+ window.addEventListener('DOMContentLoaded', () => {
616
+ renderContacts();
617
+
618
+ // Otomatik yükseklik ayarı için input event listener
619
+ messageInput.addEventListener('input', function() {
620
+ this.style.height = 'auto';
621
+ this.style.height = (this.scrollHeight) + 'px';
622
+ if(this.value === '') this.style.height = 'auto';
623
+ });
624
+
625
+ // Enter tuşu gönderme
626
+ messageInput.addEventListener('keypress', (e) => {
627
+ if (e.key === 'Enter' && !e.shiftKey) {
628
+ e.preventDefault();
629
+ sendMessage();
630
+ }
631
+ });
632
+
633
+ sendBtn.addEventListener('click', sendMessage);
634
+ themeToggle.addEventListener('click', toggleTheme);
635
+ backBtn.addEventListener('click', closeSidebar);
636
+ });
637
+
638
+ // --- Tema Değiştirme ---
639
+ function toggleTheme() {
640
+ isDarkMode = !isDarkMode;
641
+ if (isDarkMode) {
642
+ document.documentElement.setAttribute('data-theme', 'dark');
643
+ themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
644
+ } else {
645
+ document.documentElement.removeAttribute('data-theme');
646
+ themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
647
+ }
648
+ }
649
+
650
+ // --- Sidebar İşlemleri ---
651
+ function renderContacts() {
652
+ contactList.innerHTML = '';
653
+ initialContacts.forEach(contact => {
654
+ const div = document.createElement('div');
655
+ div.className = 'contact-item';
656
+ div.onclick = () => switchChat(contact);
657
+ div.innerHTML = `
658
+ <img src="https://picsum.photos/seed/${contact.img}/100/100" alt="${contact.name}">
659
+ <div class="contact-details">
660
+ <div class="contact-name">
661
+ <span>${contact.name}</span>
662
+ </div>
663
+ <div class="last-msg">${contact.lastMsg}</div>
664
+ </div>
665
+ `;
666
+ contactList.appendChild(div);
667
+ });
668
+ }
669
+
670
+ function switchChat(contact) {
671
+ chatName.innerText = contact.name;
672
+ chatAvatar.src = `https://picsum.photos/seed/${contact.img}/100/100`;
673
+
674
+ // Mobilde sidebar'ı kapat
675
+ if (window.innerWidth <= 768) {
676
+ sidebar.classList.remove('active');
677
+ }
678
+
679
+ // Simüle edilmiş geçiş efekti
680
+ messagesContainer.innerHTML = `
681
+ <div class="message bot">
682
+ Merhaba, ${contact.name}! Size nasıl yardımcı olabilirim?
683
+ <div class="message-time">Şimdi</div>
684
+ </div>
685
+ `;
686
+ }
687
+
688
+ function closeSidebar() {
689
+ sidebar.classList.remove('active');
690
+ }
691
+
692
+ function showNewChatPopup() {
693
+ newMessagePopup.style.display = 'block';
694
+ }
695
+
696
+ function startNewChat(category) {
697
+ newMessagePopup.style.display = 'none';
698
+ chatName.innerText = "Yeni Sohbet: " + category;
699
+ chatAvatar.src = `https://picsum.photos/seed/${category}/100/100`;
700
+ messagesContainer.innerHTML = `
701
+ <div class="message bot">
702
+ Yeni ${category} sohbeti başlatıldı. İyi günler!
703
+ <div class="message-time">Şimdi</div>
704
+ </div>
705
+ `;
706
+ }
707
+
708
+ // --- Mesaj Gönderme Mantığı ---
709
+ function sendMessage() {
710
+ const text = messageInput.value.trim();
711
+
712
+ if (!text) {
713
+ showToast("Lütfen bir mesaj girin!");
714
+ return;
715
+ }
716
+
717
+ // Kullanıcı mesajını ekle
718
+ addMessage(text, 'user');
719
+ messageInput.value = '';
720
+ messageInput.style.height = 'auto'; // Yüksekliği sıfırla
721
+
722
+ // Yazıyor efekti
723
+ showTyping();
724
+
725
+ // Bot yanıtını simüle et (rastgele gecikme)
726
+ setTimeout(() => {
727
+ hideTyping();
728
+ const reply = generateBotReply(text);
729
+ addMessage(reply, 'bot');
730
+ }, 1500 + Math.random() * 1000);
731
+ }
732
+
733
+ function addMessage(text, sender) {
734
+ const msgDiv = document.createElement('div');
735
+ msgDiv.className = `message ${sender}`;
736
+
737
+ const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
738
+
739
+ msgDiv.innerHTML = `
740
+ ${text}
741
+ <div class="message-time">${time}</div>
742
+ `;
743
+
744
+ messagesContainer.appendChild(msgDiv);
745
+ scrollToBottom();
746
+ }
747
+
748
+ function scrollToBottom() {
749
+ messagesContainer.scrollTop = messagesContainer.scrollHeight;
750
+ }
751
+
752
+ function showTyping() {
753
+ isTyping = true;
754
+ typingIndicator.style.display = 'flex';
755
+ scrollToBottom();
756
+ }
757
+
758
+ function hideTyping() {
759
+ isTyping = false;
760
+ typingIndicator.style.display = 'none';
761
+ }
762
+
763
+ // --- Basit Bot Yanıt Mantığı ---
764
+ function generateBotReply(userText) {
765
+ const responses = [
766
+ "Bu çok ilginç bir nokta! Bunu daha fazla detaylandırmamı ister misiniz?",
767
+ "Anladım. Şu an size yardımcı olmaya çalışıyorum.",
768
+ "Harika bir fikir! Bunu uygulayabiliriz.",
769
+ "Hmm, buna benzer bir durumla daha önce karşılaştım.",
770
+ "Kesinlikle. Size başka bir sorunuz var mı?",
771
+ "Sanırım bu konuda fikirlerim kısıtlı ama yardımcı olmaya çalışıyorum.",
772
+ "Tamamdır, not aldım."
773
+ ];
774
+
775
+ // Bazı anahtar kelimelere özel yanıt
776
+ if (userText.includes('merhaba') || userText.includes('selam')) return "Merhaba! Size nasıl yardımcı olabilirim?";
777
+ if (userText.includes('nasılsın')) return "Ben bir yapay zekayım, o yüzden asla yorgun olmam! Siz nasılsınız?";
778
+ if (userText.includes('teşekkürler')) return "Rica ederim, memnuniyetle daima buradayım.";
779
+
780
+ // Rastgele yanıt
781
+ return responses[Math.floor(Math.random() * responses.length)];
782
+ }
783
+
784
+ // --- Toast Bildirimi ---
785
+ function showToast(message) {
786
+ toast.innerText = message;
787
+ toast.classList.add('show');
788
+ setTimeout(() => {
789
+ toast.classList.remove('show');
790
+ }, 3000);
791
+ }
792
+
793
+ // Mobilde sidebar açma için
794
+ document.querySelector('.header-actions button').addEventListener('click', () => {
795
+ if (window.innerWidth <= 768) {
796
+ sidebar.classList.add('active');
797
+ }
798
+ });
799
+
800
+ </script>
801
+ </body>
802
+ </html>