Hugging Face's logo

Spaces:
sametay
/
anycoder-aa9f58b6
Running

App Files Community
sametay commited on
Commit
dca61cd
·
verified ·
1 Parent(s): 634f68d

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +419 -567
index.html CHANGED
@@ -3,20 +3,21 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Dosya Nerede? - Akıllı Dosya Bulucu</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
- <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
9
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
  <style>
11
  body {
12
  font-family: 'Inter', sans-serif;
13
- background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
14
- min-height: 100vh;
15
  }
16
 
17
  /* Custom Scrollbar */
18
  ::-webkit-scrollbar {
19
  width: 8px;
 
20
  }
21
  ::-webkit-scrollbar-track {
22
  background: #1e293b;
@@ -34,334 +35,224 @@
34
  background: rgba(30, 41, 59, 0.7);
35
  backdrop-filter: blur(12px);
36
  -webkit-backdrop-filter: blur(12px);
37
- border: 1px solid rgba(255, 255, 255, 0.08);
38
- }
39
-
40
- .glass-panel {
41
- background: rgba(15, 23, 42, 0.6);
42
- backdrop-filter: blur(8px);
43
  border: 1px solid rgba(255, 255, 255, 0.05);
44
  }
45
 
46
- /* Animations */
47
- @keyframes float {
48
- 0% { transform: translateY(0px); }
49
- 50% { transform: translateY(-10px); }
50
- 100% { transform: translateY(0px); }
51
- }
52
-
53
- @keyframes pulse-glow {
54
- 0%, 100% { box-shadow: 0 0 15px rgba(99, 102, 241, 0.2); }
55
- 50% { box-shadow: 0 0 25px rgba(99, 102, 241, 0.5); }
56
- }
57
-
58
- @keyframes scan-line {
59
- 0% { top: 0%; opacity: 0; }
60
- 10% { opacity: 1; }
61
- 90% { opacity: 1; }
62
- 100% { top: 100%; opacity: 0; }
63
  }
64
 
65
- .animate-float {
66
- animation: float 6s ease-in-out infinite;
 
 
 
67
  }
68
 
69
- .animate-scan {
 
70
  position: relative;
71
- overflow: hidden;
72
  }
73
- .animate-scan::after {
74
  content: '';
75
  position: absolute;
 
76
  left: 0;
77
- right: 0;
78
  height: 2px;
79
- background: linear-gradient(to right, transparent, #6366f1, transparent);
80
- animation: scan-line 2s linear infinite;
81
- box-shadow: 0 0 10px #6366f1;
 
 
 
 
 
 
82
  }
83
 
84
- /* File Type Icons Colors */
85
- .type-pdf { color: #ef4444; }
86
- .type-img { color: #10b981; }
87
- .type-doc { color: #3b82f6; }
88
- .type-code { color: #f59e0b; }
89
- .type-zip { color: #8b5cf6; }
90
- .type-audio { color: #ec4899; }
91
- .type-video { color: #06b6d4; }
 
 
 
 
 
 
 
92
 
93
  /* Loader */
94
  .loader {
95
- border: 3px solid rgba(255,255,255,0.1);
96
- border-left-color: #6366f1;
97
- border-radius: 50%;
98
- width: 24px;
99
- height: 24px;
100
- animation: spin 1s linear infinite;
101
  }
102
- @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
103
-
104
- /* Folder Tree Lines */
105
- .tree-line {
106
- position: absolute;
107
- left: 14px;
108
- top: 28px;
109
- bottom: 0;
110
- width: 2px;
111
- background: #334155;
112
  }
113
  </style>
114
  </head>
115
- <body class="text-slate-200 overflow-x-hidden">
116
-
117
- <!-- Navbar -->
118
- <nav class="fixed w-full z-50 glass border-b border-white/5">
119
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
120
- <div class="flex items-center justify-between h-16">
121
- <div class="flex items-center gap-3">
122
- <div class="w-8 h-8 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-lg flex items-center justify-center shadow-lg shadow-indigo-500/30">
123
- <i class="fa-solid fa-folder-open text-white text-sm"></i>
124
- </div>
125
- <span class="font-bold text-xl tracking-tight text-white">Dosya<span class="text-indigo-400">Nerede</span>?</span>
126
  </div>
127
- <div class="hidden md:flex items-center space-x-8 text-sm font-medium text-slate-400">
128
- <a href="#" class="hover:text-white transition-colors">Ana Sayfa</a>
129
- <a href="#" class="hover:text-white transition-colors">Hakkında</a>
130
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-indigo-400 hover:text-indigo-300 transition-colors flex items-center gap-2">
131
- <i class="fa-solid fa-code"></i> Built with anycoder
132
- </a>
133
  </div>
134
- <div class="flex items-center gap-4">
135
- <button class="p-2 text-slate-400 hover:text-white transition-colors">
136
- <i class="fa-solid fa-bell"></i>
137
- </button>
138
- <div class="w-8 h-8 rounded-full bg-gradient-to-r from-pink-500 to-rose-500 flex items-center justify-center text-xs font-bold text-white shadow-lg">
139
- DN
140
- </div>
141
  </div>
 
 
 
142
  </div>
143
  </div>
144
- </nav>
145
 
146
  <!-- Main Content -->
147
- <main class="pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
148
 
149
- <!-- Hero Section -->
150
- <div class="text-center mb-12 animate-float">
151
- <h1 class="text-4xl md:text-6xl font-bold text-white mb-4 tracking-tight">
152
- Kaybolan dosyalarınızı <br>
153
- <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-cyan-400">saniyeler içinde bulun</span>
154
- </h1>
155
- <p class="text-slate-400 text-lg max-w-2xl mx-auto mb-8">
156
- Yapay zeka destekli indeksleme sistemi ile bilgisayarınızdaki her dosyayı anında tarayın ve konumlandırın.
157
- </p>
158
-
159
- <!-- Search Bar -->
160
- <div class="max-w-3xl mx-auto relative group z-20">
161
- <div class="absolute -inset-1 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-2xl blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
162
- <div class="relative flex items-center bg-slate-900 rounded-2xl border border-slate-700 shadow-2xl overflow-hidden">
163
- <div class="pl-6 text-slate-400">
164
- <i class="fa-solid fa-magnifying-glass text-xl"></i>
165
- </div>
166
- <input type="text" id="searchInput"
167
- class="w-full bg-transparent border-none text-white px-6 py-5 text-lg focus:ring-0 placeholder-slate-500"
168
- placeholder="Dosya adı, türü veya anahtar kelime ara... (örn: 'rapor', '.pdf', '2023')">
169
- <div class="pr-4 flex items-center gap-2">
170
- <span class="text-xs text-slate-500 border border-slate-700 rounded px-2 py-1 hidden sm:block">CTRL + K</span>
171
- <button id="searchBtn" class="bg-indigo-600 hover:bg-indigo-500 text-white px-6 py-2.5 rounded-xl font-medium transition-all shadow-lg shadow-indigo-500/25 flex items-center gap-2">
172
- <span>Ara</span>
173
- </button>
174
- </div>
175
  </div>
176
  </div>
177
-
178
- <!-- Quick Filters -->
179
- <div class="flex flex-wrap justify-center gap-3 mt-6">
180
- <button class="filter-btn px-4 py-2 rounded-full bg-slate-800/50 border border-slate-700 text-slate-300 text-sm hover:bg-slate-700 hover:border-indigo-500/50 transition-all flex items-center gap-2" data-type="pdf">
181
- <i class="fa-solid fa-file-pdf text-red-400"></i> PDF
182
- </button>
183
- <button class="filter-btn px-4 py-2 rounded-full bg-slate-800/50 border border-slate-700 text-slate-300 text-sm hover:bg-slate-700 hover:border-indigo-500/50 transition-all flex items-center gap-2" data-type="image">
184
- <i class="fa-solid fa-image text-green-400"></i> Resimler
185
- </button>
186
- <button class="filter-btn px-4 py-2 rounded-full bg-slate-800/50 border border-slate-700 text-slate-300 text-sm hover:bg-slate-700 hover:border-indigo-500/50 transition-all flex items-center gap-2" data-type="doc">
187
- <i class="fa-solid fa-file-word text-blue-400"></i> Dökümanlar
188
- </button>
189
- <button class="filter-btn px-4 py-2 rounded-full bg-slate-800/50 border border-slate-700 text-slate-300 text-sm hover:bg-slate-700 hover:border-indigo-500/50 transition-all flex items-center gap-2" data-type="video">
190
- <i class="fa-solid fa-film text-cyan-400"></i> Videolar
191
- </button>
192
- <button class="filter-btn px-4 py-2 rounded-full bg-slate-800/50 border border-slate-700 text-slate-300 text-sm hover:bg-slate-700 hover:border-indigo-500/50 transition-all flex items-center gap-2" data-type="code">
193
- <i class="fa-solid fa-code text-yellow-400"></i> Kod
194
- </button>
195
  </div>
196
- </div>
197
 
198
- <!-- Dashboard Grid -->
199
- <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
200
 
201
- <!-- Left Sidebar: Stats & Storage -->
202
- <div class="lg:col-span-3 space-y-6">
203
- <!-- Storage Card -->
204
- <div class="glass rounded-2xl p-6 relative overflow-hidden group">
205
- <div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
206
- <i class="fa-solid fa-hard-drive text-6xl text-indigo-400"></i>
207
- </div>
208
- <h3 class="text-slate-400 text-sm font-medium mb-1">Disk Kullanımı</h3>
209
- <div class="flex items-end gap-2 mb-4">
210
- <span class="text-3xl font-bold text-white">750</span>
211
- <span class="text-slate-400 mb-1">/ 1 TB</span>
212
- </div>
213
-
214
- <!-- Progress Bar -->
215
- <div class="w-full bg-slate-700/50 rounded-full h-2.5 mb-2 overflow-hidden">
216
- <div class="bg-gradient-to-r from-indigo-500 to-purple-500 h-2.5 rounded-full" style="width: 75%"></div>
217
- </div>
218
- <div class="flex justify-between text-xs text-slate-500">
219
- <span>%75 Kullanımda</span>
220
- <span>250 GB Boş</span>
221
- </div>
222
  </div>
 
223
 
224
- <!-- Categories -->
225
- <div class="glass rounded-2xl p-6">
226
- <h3 class="text-white font-semibold mb-4 flex items-center gap-2">
227
- <i class="fa-solid fa-chart-pie text-indigo-400"></i> Kategoriler
228
- </h3>
229
- <div class="space-y-3" id="categoryList">
230
- <!-- Populated by JS -->
231
- </div>
232
  </div>
 
233
 
234
- <!-- Recent Locations -->
235
- <div class="glass rounded-2xl p-6">
236
- <h3 class="text-white font-semibold mb-4 flex items-center gap-2">
237
- <i class="fa-solid fa-clock-rotate-left text-indigo-400"></i> Son Aramalar
238
- </h3>
239
- <ul class="space-y-3 text-sm text-slate-400">
240
- <li class="flex items-center gap-3 hover:text-white cursor-pointer transition-colors">
241
- <i class="fa-solid fa-magnifying-glass text-xs"></i> Q4_Finansal_Rapor.pdf
242
- </li>
243
- <li class="flex items-center gap-3 hover:text-white cursor-pointer transition-colors">
244
- <i class="fa-solid fa-magnifying-glass text-xs"></i> Pasaport_fotograf.jpg
245
- </li>
246
- <li class="flex items-center gap-3 hover:text-white cursor-pointer transition-colors">
247
- <i class="fa-solid fa-magnifying-glass text-xs"></i> index.html
248
- </li>
249
- </ul>
250
  </div>
251
  </div>
 
 
252
 
253
- <!-- Main Content: File Explorer -->
254
- <div class="lg:col-span-9">
255
- <div class="glass rounded-2xl border border-slate-700/50 min-h-[600px] flex flex-col">
 
 
 
 
 
 
256
 
257
- <!-- Toolbar -->
258
- <div class="p-4 border-b border-slate-700/50 flex flex-wrap items-center justify-between gap-4">
259
- <div class="flex items-center gap-2 text-sm breadcrumbs text-slate-400">
260
- <span class="hover:text-white cursor-pointer"><i class="fa-solid fa-house"></i></span>
261
- <i class="fa-solid fa-chevron-right text-xs"></i>
262
- <span class="hover:text-white cursor-pointer">Kullanıcı</span>
263
- <i class="fa-solid fa-chevron-right text-xs"></i>
264
- <span class="text-indigo-400 font-medium" id="currentLocation">Tüm Dosyalar</span>
265
- </div>
266
-
267
- <div class="flex items-center gap-3">
268
- <div class="flex bg-slate-800/50 rounded-lg p-1 border border-slate-700">
269
- <button class="p-1.5 rounded bg-slate-700 text-white shadow-sm" id="viewGrid">
270
- <i class="fa-solid fa-border-all"></i>
271
- </button>
272
- <button class="p-1.5 rounded text-slate-400 hover:text-white" id="viewList">
273
- <i class="fa-solid fa-list"></i>
274
- </button>
275
  </div>
276
- <button class="p-2 text-slate-400 hover:text-white transition-colors" title="Sırala">
277
- <i class="fa-solid fa-arrow-down-short-wide"></i>
278
- </button>
279
  </div>
280
  </div>
281
 
282
- <!-- File Grid -->
283
- <div class="p-6 flex-1 overflow-y-auto" id="fileContainer">
284
- <!-- Dynamic Content Here -->
285
- <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4" id="fileGrid">
286
- <!-- Files injected via JS -->
287
- </div>
288
- </div>
289
-
290
- <!-- Status Bar -->
291
- <div class="p-3 border-t border-slate-700/50 bg-slate-900/30 text-xs text-slate-500 flex justify-between items-center rounded-b-2xl">
292
- <span id="statusText">24,592 öğe bulundu</span>
293
- <div class="flex items-center gap-4">
294
- <span class="flex items-center gap-1"><div class="w-2 h-2 rounded-full bg-green-500"></div> Sistem Aktif</span>
295
- <span>v2.4.0</span>
296
  </div>
297
- </div>
298
- </div>
299
- </div>
300
- </div>
301
- </main>
302
 
303
- <!-- File Preview Modal -->
304
- <div id="previewModal" class="fixed inset-0 z-[100] hidden">
305
- <div class="absolute inset-0 bg-black/80 backdrop-blur-sm" id="modalBackdrop"></div>
306
- <div class="absolute inset-0 flex items-center justify-center p-4">
307
- <div class="bg-slate-900 border border-slate-700 w-full max-w-4xl rounded-2xl shadow-2xl overflow-hidden flex flex-col max-h-[90vh] transform transition-all scale-95 opacity-0" id="modalContent">
308
-
309
- <!-- Modal Header -->
310
- <div class="p-4 border-b border-slate-700 flex justify-between items-center bg-slate-800/50">
311
- <div class="flex items-center gap-3">
312
- <div id="modalIcon" class="text-2xl"></div>
313
- <div>
314
- <h3 class="text-white font-semibold text-lg" id="modalTitle">File Name</h3>
315
- <p class="text-xs text-slate-400" id="modalPath">/path/to/file</p>
316
  </div>
317
- </div>
318
- <div class="flex items-center gap-2">
319
- <button class="p-2 text-slate-400 hover:text-white hover:bg-slate-700 rounded-lg transition-colors" title="İndir">
320
- <i class="fa-solid fa-download"></i>
321
- </button>
322
- <button class="p-2 text-slate-400 hover:text-red-400 hover:bg-slate-700 rounded-lg transition-colors" title="Sil">
323
- <i class="fa-solid fa-trash"></i>
324
- </button>
325
- <button id="closeModal" class="p-2 text-slate-400 hover:text-white hover:bg-slate-700 rounded-lg transition-colors ml-2">
326
- <i class="fa-solid fa-xmark text-xl"></i>
327
- </button>
328
- </div>
329
- </div>
330
 
331
- <!-- Modal Body -->
332
- <div class="flex-1 overflow-auto p-0 bg-slate-950 flex relative">
333
- <!-- Sidebar Info -->
334
- <div class="w-64 bg-slate-900 border-r border-slate-800 p-6 hidden md:block space-y-6">
335
- <div>
336
- <label class="text-xs text-slate-500 uppercase font-bold tracking-wider">Tür</label>
337
- <p class="text-slate-300 mt-1" id="modalType">PDF Document</p>
338
- </div>
339
- <div>
340
- <label class="text-xs text-slate-500 uppercase font-bold tracking-wider">Boyut</label>
341
- <p class="text-slate-300 mt-1" id="modalSize">2.4 MB</p>
342
- </div>
343
- <div>
344
- <label class="text-xs text-slate-500 uppercase font-bold tracking-wider">Oluşturulma</label>
345
- <p class="text-slate-300 mt-1" id="modalDate">12 Ekim 2023</p>
346
- </div>
347
- <div>
348
- <label class="text-xs text-slate-500 uppercase font-bold tracking-wider">Etiketler</label>
349
- <div class="flex flex-wrap gap-2 mt-2" id="modalTags">
350
- <!-- Tags -->
351
  </div>
352
  </div>
353
-
354
- <div class="pt-4 border-t border-slate-800">
355
- <button class="w-full py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg text-sm font-medium transition-colors shadow-lg shadow-indigo-500/20">
356
- Konumu Aç
357
- </button>
358
- </div>
359
- </div>
360
 
361
- <!-- Preview Area -->
362
- <div class="flex-1 p-8 flex items-center justify-center bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMSIgY3k9IjEiIHI9IjEiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4wNSkiLz48L3N2Zz4=')]">
363
- <div id="previewContent" class="text-center">
364
- <!-- Dynamic Preview -->
 
 
 
365
  </div>
366
  </div>
367
  </div>
@@ -370,329 +261,290 @@
370
  </div>
371
 
372
  <script>
373
- // --- Data Generation ---
374
- const fileTypes = {
375
- pdf: { icon: 'fa-file-pdf', color: 'text-red-400', label: 'PDF Document' },
376
- image: { icon: 'fa-file-image', color: 'text-green-400', label: 'Image' },
377
- doc: { icon: 'fa-file-word', color: 'text-blue-400', label: 'Word Doc' },
378
- code: { icon: 'fa-file-code', color: 'text-yellow-400', label: 'Source Code' },
379
- video: { icon: 'fa-file-video', color: 'text-cyan-400', label: 'Video' },
380
- audio: { icon: 'fa-file-audio', color: 'text-pink-400', label: 'Audio' },
381
- zip: { icon: 'fa-file-zipper', color: 'text-purple-400', label: 'Archive' }
382
- };
383
-
384
- const folders = ['İş', 'Kişisel', 'Projeler', 'İndirilenler', 'Masaüstü', 'Taslaklar', 'Yedekler', 'Faturalar', 'Fotoğraflar'];
385
-
386
- const fileNames = {
387
- pdf: ['2023_Rapor', 'Fatura_001', 'Sozlesme_Taslak', 'CV_Guncel', 'Sunum_Final', 'E-Kitap', 'Manual_TR', 'Bilgilendirme'],
388
- image: ['IMG_2023_10', 'Profil_Foto', 'Ekran_Goruntusu', 'Tatil_Foto_1', 'Tasarim_v2', 'Logo_PNG', 'Scan_Doc', 'Wallpaper_4K'],
389
- doc: ['Toplanti_Notlari', 'Proje_Plani', 'Mektup_Taslak', 'Listeler', 'Hakkinda', 'Aciklama'],
390
- code: ['index', 'script', 'styles', 'app', 'server', 'config', 'utils', 'main'],
391
- video: ['Tanıtım_Video', 'Kayit_001', 'Film_Fragman', 'Egitim_Video', 'Zoom_Kaydi'],
392
- audio: ['Podcast_1', 'Sarki_Mix', 'Ses_Notu', 'Toplanti_Kaydi'],
393
- zip: ['Arsiv_2022', 'Proje_Dosyalari', 'Yedekleme', 'Eski_Calismalar']
394
- };
395
-
396
- const extensions = {
397
- pdf: 'pdf', image: 'jpg', doc: 'docx', code: 'js', video: 'mp4', audio: 'mp3', zip: 'zip'
398
- };
399
-
400
- // Generate Mock Data
401
- let files = [];
402
- for (let i = 0; i < 48; i++) {
403
- const typeKeys = Object.keys(fileTypes);
404
- const type = typeKeys[Math.floor(Math.random() * typeKeys.length)];
405
- const nameBase = fileNames[type][Math.floor(Math.random() * fileNames[type].length)];
406
- const folder = folders[Math.floor(Math.random() * folders.length)];
407
 
408
- files.push({
409
- id: i,
410
- name: `${nameBase}_${Math.floor(Math.random() * 100)}.${extensions[type]}`,
411
- type: type,
412
- size: (Math.random() * 50 + 0.5).toFixed(1) + (type === 'video' || type === 'zip' ? ' GB' : ' MB'),
413
- date: new Date(Date.now() - Math.floor(Math.random() * 10000000000)).toLocaleDateString('tr-TR'),
414
- path: `C:/Users/Admin/${folder}`,
415
- tags: [folder, type, '2023']
416
- });
417
- }
418
-
419
- // --- DOM Elements ---
420
- const fileGrid = document.getElementById('fileGrid');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
421
  const searchInput = document.getElementById('searchInput');
422
- const searchBtn = document.getElementById('searchBtn');
423
- const filterBtns = document.querySelectorAll('.filter-btn');
424
- const modal = document.getElementById('previewModal');
425
- const modalContent = document.getElementById('modalContent');
426
- const closeModal = document.getElementById('closeModal');
427
- const modalBackdrop = document.getElementById('modalBackdrop');
428
- const categoryList = document.getElementById('categoryList');
429
- const statusText = document.getElementById('statusText');
430
-
431
- // --- Render Functions ---
432
-
433
- function getFileIcon(type) {
434
- return `<i class="fa-solid ${fileTypes[type].icon} ${fileTypes[type].color} text-4xl mb-3 drop-shadow-lg"></i>`;
435
- }
436
 
437
- function renderFiles(data) {
438
- fileGrid.innerHTML = '';
 
 
 
439
 
440
- if (data.length === 0) {
441
- fileGrid.innerHTML = `
442
- <div class="col-span-full flex flex-col items-center justify-center py-20 text-slate-500">
443
- <i class="fa-regular fa-folder-open text-6xl mb-4 opacity-50"></i>
444
- <p class="text-lg">Dosya bulunamadı</p>
445
- </div>
446
- `;
447
- statusText.innerText = `0 öğe bulundu`;
448
- return;
449
- }
450
 
451
- statusText.innerText = `${data.length} öğe bulundu`;
452
 
453
- data.forEach((file, index) => {
454
- const card = document.createElement('div');
455
- card.className = `glass-panel p-4 rounded-xl cursor-pointer hover:bg-slate-800/80 transition-all duration-300 group hover:-translate-y-1 hover:shadow-xl hover:shadow-indigo-500/10 border border-transparent hover:border-indigo-500/30 animate-fade-in`;
456
- card.style.animationDelay = `${index * 0.05}s`;
457
-
458
- card.innerHTML = `
459
- <div class="flex flex-col items-center text-center h-full justify-between">
460
- <div class="mt-2 transform group-hover:scale-110 transition-transform duration-300">
461
- ${getFileIcon(file.type)}
462
- </div>
463
- <div class="w-full mt-4">
464
- <h4 class="text-white font-medium text-sm truncate w-full" title="${file.name}">${file.name}</h4>
465
- <div class="flex justify-between items-center mt-2 text-xs text-slate-500 border-t border-slate-700/50 pt-2">
466
- <span>${file.size}</span>
467
- <span class="bg-slate-800 px-1.5 py-0.5 rounded text-[10px] uppercase tracking-wide border border-slate-700">${file.type}</span>
468
- </div>
469
- </div>
470
- </div>
471
- `;
472
-
473
- card.addEventListener('click', () => openModal(file));
474
- fileGrid.appendChild(card);
475
- });
476
  }
477
 
478
- function renderCategories() {
479
- const counts = {};
480
- files.forEach(f => { counts[f.type] = (counts[f.type] || 0) + 1; });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
481
 
482
- categoryList.innerHTML = '';
483
- Object.keys(fileTypes).forEach(type => {
484
- const count = counts[type] || 0;
485
- const percent = Math.round((count / files.length) * 100);
 
 
486
 
487
- const item = document.createElement('div');
488
- item.className = 'group cursor-pointer';
489
- item.innerHTML = `
490
- <div class="flex justify-between text-xs mb-1">
491
- <span class="text-slate-300 flex items-center gap-2">
492
- <i class="fa-solid ${fileTypes[type].icon} ${fileTypes[type].color} w-4"></i>
493
- ${fileTypes[type].label}
494
- </span>
495
- <span class="text-slate-500">${count}</span>
496
- </div>
497
- <div class="w-full bg-slate-800 rounded-full h-1.5 overflow-hidden">
498
- <div class="bg-current ${fileTypes[type].color} h-1.5 rounded-full transition-all duration-1000" style="width: ${percent}%"></div>
499
- </div>
500
- `;
501
- item.addEventListener('click', () => {
502
- searchInput.value = `.${type}`;
503
- filterFiles(type);
504
- });
505
- categoryList.appendChild(item);
506
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
507
  }
508
 
509
- // --- Logic ---
510
 
511
- function filterFiles(query) {
512
- // If query is a specific type keyword from buttons
513
- const typeMap = {
514
- 'pdf': 'pdf', 'image': 'image', 'doc': 'doc',
515
- 'video': 'video', 'code': 'code'
516
- };
 
 
 
 
 
 
517
 
518
- let filtered = files;
 
 
 
 
519
 
520
- if (typeMap[query]) {
521
- filtered = files.filter(f => f.type === typeMap[query]);
522
- } else if (query.startsWith('.')) {
523
- // Extension search simulation
524
- const ext = query.substring(1);
525
- filtered = files.filter(f => f.type === ext);
526
- } else {
527
- // Text search
528
- const lowerQ = query.toLowerCase();
529
- filtered = files.filter(f =>
530
- f.name.toLowerCase().includes(lowerQ) ||
531
- f.path.toLowerCase().includes(lowerQ)
532
- );
533
- }
534
 
535
- // Add loading effect
536
- fileGrid.style.opacity = '0.5';
537
- setTimeout(() => {
538
- renderFiles(filtered);
539
- fileGrid.style.opacity = '1';
540
- }, 200);
541
  }
542
 
543
- // --- Modal Logic ---
544
 
545
- function openModal(file) {
546
- document.getElementById('modalTitle').innerText = file.name;
547
- document.getElementById('modalPath').innerText = file.path + '/' + file.name;
548
- document.getElementById('modalType').innerText = fileTypes[file.type].label;
549
- document.getElementById('modalSize').innerText = file.size;
550
- document.getElementById('modalDate').innerText = file.date;
 
 
 
 
 
551
 
552
- const iconContainer = document.getElementById('modalIcon');
553
- iconContainer.innerHTML = `<i class="fa-solid ${fileTypes[file.type].icon} ${fileTypes[file.type].color}"></i>`;
554
-
555
- const tagsContainer = document.getElementById('modalTags');
556
- tagsContainer.innerHTML = file.tags.map(t =>
557
- `<span class="px-2 py-1 bg-slate-800 text-slate-300 text-[10px] rounded border border-slate-700">#${t}</span>`
558
- ).join('');
559
-
560
- // Preview Content Simulation
561
- const preview = document.getElementById('previewContent');
562
- preview.innerHTML = ''; // Clear
563
-
564
- if (file.type === 'image') {
565
- // Generate a colored placeholder representing an image
566
- const color = Math.floor(Math.random()*16777215).toString(16);
567
- preview.innerHTML = `
568
- <div class="w-full h-96 bg-slate-800 rounded-lg flex items-center justify-center overflow-hidden relative group">
569
- <div class="absolute inset-0 bg-gradient-to-br from-slate-700 to-slate-900"></div>
570
- <i class="fa-solid fa-image text-6xl text-slate-600 relative z-10"></i>
571
- <div class="absolute bottom-4 right-4 text-xs text-slate-500">Resim Önizlemesi</div>
572
- </div>
573
- `;
574
- } else if (file.type === 'code') {
575
- preview.innerHTML = `
576
- <div class="w-full bg-slate-900 p-6 rounded-lg text-left font-mono text-sm text-slate-300 border border-slate-800 shadow-inner">
577
- <div class="text-purple-400">function <span class="text-blue-400">initSystem</span>() {</div>
578
- <div class="pl-4 text-slate-400">// Loading module: ${file.name}</div>
579
- <div class="pl-4 text-green-400">const <span class="text-white">data</span> = await fetch(<span class="text-yellow-300">'/api/data'</span>);</div>
580
- <div class="pl-4 text-purple-400">return <span class="text-white">data</span>.json();</div>
581
- <div class="text-purple-400">}</div>
582
- </div>
583
- `;
584
- } else if (file.type === 'pdf') {
585
- preview.innerHTML = `
586
- <div class="w-full bg-white p-8 rounded-lg text-slate-800 shadow-2xl max-w-lg mx-auto aspect-[3/4] flex flex-col">
587
- <div class="border-b-2 border-slate-200 pb-4 mb-4">
588
- <div class="h-4 w-1/3 bg-slate-200 rounded mb-2"></div>
589
- <div class="h-8 w-3/4 bg-slate-800 rounded"></div>
590
- </div>
591
- <div class="space-y-3">
592
- <div class="h-3 w-full bg-slate-100 rounded"></div>
593
- <div class="h-3 w-full bg-slate-100 rounded"></div>
594
- <div class="h-3 w-5/6 bg-slate-100 rounded"></div>
595
- <div class="h-3 w-full bg-slate-100 rounded"></div>
596
- <div class="h-3 w-4/6 bg-slate-100 rounded"></div>
597
- </div>
598
- <div class="mt-auto flex justify-center">
599
- <span class="text-xs text-slate-400 font-mono">PDF PREVIEW MOCKUP</span>
600
- </div>
601
- </div>
602
- `;
603
- } else {
604
- preview.innerHTML = `
605
- <div class="text-center">
606
- <i class="fa-solid ${fileTypes[file.type].icon} ${fileTypes[file.type].color} text-8xl mb-6 opacity-80"></i>
607
- <p class="text-slate-400">Bu dosya türü için önizleme kullanılamıyor.</p>
608
- <button class="mt-4 px-4 py-2 bg-slate-800 hover:bg-slate-700 rounded text-white text-sm transition-colors">
609
- Dosyayı İndir
610
- </button>
611
- </div>
612
- `;
613
- }
614
 
 
615
  modal.classList.remove('hidden');
616
- // Small delay for animation
617
  setTimeout(() => {
618
- modalContent.classList.remove('scale-95', 'opacity-0');
619
- modalContent.classList.add('scale-100', 'opacity-100');
 
620
  }, 10);
621
  }
622
 
623
- function hideModal() {
624
- modalContent.classList.remove('scale-100', 'opacity-100');
625
- modalContent.classList.add('scale-95', 'opacity-0');
 
 
 
 
 
 
626
  setTimeout(() => {
627
  modal.classList.add('hidden');
628
  }, 300);
629
  }
630
 
631
- // --- Event Listeners ---
632
-
633
- searchInput.addEventListener('input', (e) => filterFiles(e.target.value));
634
-
635
- searchBtn.addEventListener('click', () => {
636
- // Simulate search loading
637
- searchBtn.innerHTML = '<div class="loader"></div>';
638
- setTimeout(() => {
639
- searchBtn.innerHTML = '<span>Ara</span>';
640
- filterFiles(searchInput.value);
641
- }, 600);
642
- });
643
-
644
- filterBtns.forEach(btn => {
645
- btn.addEventListener('click', () => {
646
- // Toggle active state visually
647
- filterBtns.forEach(b => b.classList.remove('bg-indigo-600', 'text-white', 'border-indigo-500'));
648
- filterBtns.forEach(b => b.classList.add('bg-slate-800/50', 'text-slate-300', 'border-slate-700'));
649
-
650
- btn.classList.remove('bg-slate-800/50', 'text-slate-300', 'border-slate-700');
651
- btn.classList.add('bg-indigo-600', 'text-white', 'border-indigo-500');
652
-
653
- filterFiles(btn.dataset.type);
654
- });
655
- });
656
-
657
- closeModal.addEventListener('click', hideModal);
658
- modalBackdrop.addEventListener('click', hideModal);
659
-
660
- // Keyboard shortcuts
661
  document.addEventListener('keydown', (e) => {
662
- if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
663
- hideModal();
664
- }
665
- if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
666
- e.preventDefault();
667
- searchInput.focus();
668
- }
669
- });
670
-
671
- // View Toggles
672
- document.getElementById('viewGrid').addEventListener('click', function() {
673
- this.classList.add('bg-slate-700', 'text-white');
674
- this.classList.remove('text-slate-400');
675
- document.getElementById('viewList').classList.remove('bg-slate-700', 'text-white');
676
- document.getElementById('viewList').classList.add('text-slate-400');
677
-
678
- fileGrid.classList.remove('grid-cols-1');
679
- fileGrid.classList.add('grid-cols-2', 'md:grid-cols-3', 'lg:grid-cols-4');
680
- // Re-render to adjust internal layout if needed, here CSS grid handles it mostly
681
  });
682
 
683
- document.getElementById('viewList').addEventListener('click', function() {
684
- this.classList.add('bg-slate-700', 'text-white');
685
- this.classList.remove('text-slate-400');
686
- document.getElementById('viewGrid').classList.remove('bg-slate-700', 'text-white');
687
- document.getElementById('viewGrid').classList.add('text-slate-400');
688
-
689
- fileGrid.classList.remove('grid-cols-2', 'md:grid-cols-3', 'lg:grid-cols-4');
690
- fileGrid.classList.add('grid-cols-1');
691
- });
692
-
693
- // --- Initialization ---
694
- renderFiles(files);
695
- renderCategories();
 
 
 
696
 
697
  </script>
698
  </body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI Tools Explorer - Yapay Zeka Araçları Kütüphanesi</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
10
  <style>
11
  body {
12
  font-family: 'Inter', sans-serif;
13
+ background-color: #0f172a; /* Slate 900 */
14
+ color: #e2e8f0; /* Slate 200 */
15
  }
16
 
17
  /* Custom Scrollbar */
18
  ::-webkit-scrollbar {
19
  width: 8px;
20
+ height: 8px;
21
  }
22
  ::-webkit-scrollbar-track {
23
  background: #1e293b;
 
35
  background: rgba(30, 41, 59, 0.7);
36
  backdrop-filter: blur(12px);
37
  -webkit-backdrop-filter: blur(12px);
 
 
 
 
 
 
38
  border: 1px solid rgba(255, 255, 255, 0.05);
39
  }
40
 
41
+ .glass-card {
42
+ background: rgba(30, 41, 59, 0.6);
43
+ backdrop-filter: blur(8px);
44
+ border: 1px solid rgba(255, 255, 255, 0.05);
45
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
 
 
 
 
 
 
 
 
 
 
 
46
  }
47
 
48
+ .glass-card:hover {
49
+ transform: translateY(-5px);
50
+ background: rgba(30, 41, 59, 0.9);
51
+ border-color: rgba(99, 102, 241, 0.5); /* Indigo 500 */
52
+ box-shadow: 0 10px 30px -10px rgba(99, 102, 241, 0.3);
53
  }
54
 
55
+ /* Tab Animations */
56
+ .tab-btn {
57
  position: relative;
58
+ transition: all 0.3s ease;
59
  }
60
+ .tab-btn::after {
61
  content: '';
62
  position: absolute;
63
+ bottom: -2px;
64
  left: 0;
65
+ width: 0%;
66
  height: 2px;
67
+ background: #6366f1;
68
+ transition: width 0.3s ease;
69
+ }
70
+ .tab-btn.active::after {
71
+ width: 100%;
72
+ }
73
+ .tab-btn.active {
74
+ color: #fff;
75
+ background: rgba(99, 102, 241, 0.15);
76
  }
77
 
78
+ /* Grid Animation */
79
+ @keyframes fadeIn {
80
+ from { opacity: 0; transform: translateY(10px); }
81
+ to { opacity: 1; transform: translateY(0); }
82
+ }
83
+ .animate-fade-in {
84
+ animation: fadeIn 0.4s ease-out forwards;
85
+ }
86
+
87
+ /* Gradient Text */
88
+ .text-gradient {
89
+ background: linear-gradient(to right, #818cf8, #c084fc, #f472b6);
90
+ -webkit-background-clip: text;
91
+ -webkit-text-fill-color: transparent;
92
+ }
93
 
94
  /* Loader */
95
  .loader {
96
+ border-top-color: #6366f1;
97
+ -webkit-animation: spinner 1.5s linear infinite;
98
+ animation: spinner 1.5s linear infinite;
 
 
 
99
  }
100
+ @keyframes spinner {
101
+ 0% { transform: rotate(0deg); }
102
+ 100% { transform: rotate(360deg); }
 
 
 
 
 
 
 
103
  }
104
  </style>
105
  </head>
106
+ <body class="min-h-screen flex flex-col overflow-hidden">
107
+
108
+ <!-- Header -->
109
+ <header class="glass sticky top-0 z-50 border-b border-slate-700/50">
110
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
111
+ <div class="flex items-center gap-3">
112
+ <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg shadow-indigo-500/20">
113
+ <i class="fa-solid fa-robot text-white text-xl"></i>
 
 
 
114
  </div>
115
+ <div>
116
+ <h1 class="text-xl font-bold tracking-tight text-white">AI<span class="text-indigo-400">Explorer</span></h1>
117
+ <p class="text-xs text-slate-400">Yapay Zeka Araçları Kütüphanesi</p>
 
 
 
118
  </div>
119
+ </div>
120
+
121
+ <div class="hidden md:flex items-center gap-4">
122
+ <div class="relative">
123
+ <i class="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm"></i>
124
+ <input type="text" id="searchInput" placeholder="Araç ara..."
125
+ class="bg-slate-800/50 border border-slate-700 text-sm rounded-full pl-10 pr-4 py-2 w-64 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-all text-slate-200 placeholder-slate-500">
126
  </div>
127
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-xs font-medium text-slate-400 hover:text-white transition-colors border border-slate-700 px-3 py-1.5 rounded-full hover:bg-slate-800">
128
+ Built with anycoder
129
+ </a>
130
  </div>
131
  </div>
132
+ </header>
133
 
134
  <!-- Main Content -->
135
+ <main class="flex-1 flex flex-col md:flex-row max-w-7xl mx-auto w-full overflow-hidden">
136
 
137
+ <!-- Sidebar / Categories -->
138
+ <aside class="w-full md:w-64 glass border-r border-slate-700/50 flex flex-col z-40">
139
+ <div class="p-4 border-b border-slate-700/50">
140
+ <h2 class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">Kategoriler</h2>
141
+ <div class="space-y-1" id="categoryList">
142
+ <!-- Categories injected via JS -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
143
  </div>
144
  </div>
145
+
146
+ <div class="p-4 mt-auto hidden md:block">
147
+ <div class="bg-gradient-to-br from-indigo-900/50 to-purple-900/50 rounded-xl p-4 border border-indigo-500/20">
148
+ <h3 class="text-sm font-semibold text-white mb-1">Yeni Araçlar</h3>
149
+ <p class="text-xs text-indigo-200 mb-3">Veritabanı günlük güncellenmektedir.</p>
150
+ <button onclick="filterByTag('Yeni')" class="w-full py-1.5 text-xs bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg transition-colors">
151
+ Son Eklenenleri Gör
152
+ </button>
153
+ </div>
 
 
 
 
 
 
 
 
 
154
  </div>
155
+ </aside>
156
 
157
+ <!-- Content Area -->
158
+ <section class="flex-1 flex flex-col overflow-hidden relative bg-slate-900/50">
159
 
160
+ <!-- Mobile Search (Visible only on small screens) -->
161
+ <div class="md:hidden p-4 border-b border-slate-700/50">
162
+ <div class="relative">
163
+ <i class="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm"></i>
164
+ <input type="text" id="mobileSearchInput" placeholder="Araç ara..."
165
+ class="w-full bg-slate-800/50 border border-slate-700 text-sm rounded-full pl-10 pr-4 py-2 focus:outline-none focus:border-indigo-500 text-slate-200">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
166
  </div>
167
+ </div>
168
 
169
+ <!-- Tabs Navigation -->
170
+ <div class="px-6 py-4 border-b border-slate-700/50 overflow-x-auto no-scrollbar">
171
+ <div class="flex space-x-2" id="tabContainer">
172
+ <!-- Tabs injected via JS -->
 
 
 
 
173
  </div>
174
+ </div>
175
 
176
+ <!-- Grid View -->
177
+ <div class="flex-1 overflow-y-auto p-6 custom-scrollbar" id="scrollContainer">
178
+ <div id="toolsGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 pb-20">
179
+ <!-- Cards injected via JS -->
180
+ </div>
181
+
182
+ <!-- Empty State -->
183
+ <div id="emptyState" class="hidden flex flex-col items-center justify-center h-64 text-center">
184
+ <div class="w-16 h-16 bg-slate-800 rounded-full flex items-center justify-center mb-4">
185
+ <i class="fa-solid fa-ghost text-slate-500 text-2xl"></i>
186
+ </div>
187
+ <h3 class="text-lg font-medium text-white">Sonuç bulunamadı</h3>
188
+ <p class="text-slate-400 text-sm mt-1">Farklı bir arama terimi veya kategori deneyin.</p>
 
 
 
189
  </div>
190
  </div>
191
+ </section>
192
+ </main>
193
 
194
+ <!-- Detail Modal -->
195
+ <div id="detailModal" class="fixed inset-0 z-[100] hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
196
+ <!-- Backdrop -->
197
+ <div class="fixed inset-0 bg-slate-900/80 backdrop-blur-sm transition-opacity opacity-0" id="modalBackdrop"></div>
198
+
199
+ <div class="fixed inset-0 z-10 overflow-y-auto">
200
+ <div class="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
201
+ <!-- Modal Panel -->
202
+ <div class="relative transform overflow-hidden rounded-2xl bg-slate-800 border border-slate-700 text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-2xl opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" id="modalPanel">
203
 
204
+ <!-- Header Image/Gradient -->
205
+ <div class="h-32 bg-gradient-to-r from-indigo-600 to-purple-600 relative">
206
+ <button onclick="closeModal()" class="absolute top-4 right-4 bg-black/20 hover:bg-black/40 text-white rounded-full p-2 transition-colors">
207
+ <i class="fa-solid fa-times w-5 h-5 flex items-center justify-center"></i>
208
+ </button>
209
+ <div class="absolute -bottom-10 left-8">
210
+ <div class="w-20 h-20 rounded-xl bg-slate-800 border-4 border-slate-800 flex items-center justify-center shadow-lg" id="modalIconContainer">
211
+ <!-- Icon injected here -->
 
 
 
 
 
 
 
 
 
 
212
  </div>
 
 
 
213
  </div>
214
  </div>
215
 
216
+ <!-- Content -->
217
+ <div class="px-8 pt-12 pb-8">
218
+ <div class="flex justify-between items-start">
219
+ <div>
220
+ <h3 class="text-2xl font-bold text-white" id="modalTitle">Tool Name</h3>
221
+ <p class="text-indigo-400 text-sm font-medium mt-1" id="modalCategory">Category</p>
222
+ </div>
223
+ <div class="flex gap-2">
224
+ <span class="px-3 py-1 rounded-full bg-slate-700 text-slate-300 text-xs font-medium border border-slate-600" id="modalPricing">Free</span>
225
+ </div>
 
 
 
 
226
  </div>
 
 
 
 
 
227
 
228
+ <div class="mt-6">
229
+ <p class="text-slate-300 leading-relaxed" id="modalDescription">
230
+ Description goes here.
231
+ </p>
 
 
 
 
 
 
 
 
 
232
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
233
 
234
+ <div class="mt-6 grid grid-cols-2 gap-4">
235
+ <div class="bg-slate-700/30 p-4 rounded-xl border border-slate-700">
236
+ <h4 class="text-xs font-semibold text-slate-400 uppercase mb-2">Özellikler</h4>
237
+ <ul class="space-y-2" id="modalFeatures">
238
+ <!-- Features -->
239
+ </ul>
240
+ </div>
241
+ <div class="bg-slate-700/30 p-4 rounded-xl border border-slate-700">
242
+ <h4 class="text-xs font-semibold text-slate-400 uppercase mb-2">Kullanım Alanları</h4>
243
+ <ul class="space-y-2" id="modalUseCases">
244
+ <!-- Use Cases -->
245
+ </ul>
 
 
 
 
 
 
 
 
246
  </div>
247
  </div>
 
 
 
 
 
 
 
248
 
249
+ <div class="mt-8 flex justify-end gap-3">
250
+ <button onclick="closeModal()" class="px-4 py-2 rounded-lg text-slate-300 hover:text-white hover:bg-slate-700 transition-colors text-sm font-medium">
251
+ Kapat
252
+ </button>
253
+ <a href="#" target="_blank" id="modalVisitBtn" class="px-6 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-medium shadow-lg shadow-indigo-500/25 transition-all flex items-center gap-2">
254
+ Siteyi Ziyaret Et <i class="fa-solid fa-external-link-alt text-xs"></i>
255
+ </a>
256
  </div>
257
  </div>
258
  </div>
 
261
  </div>
262
 
263
  <script>
264
+ // --- DATASET: Comprehensive AI Tools ---
265
+ // Kategoriler: LLM, Image, Video, Audio, Code, Productivity, Business, Research, Design, Other
266
+ const toolsData = [
267
+ // LLMs & Chatbots
268
+ { id: 1, name: "ChatGPT", category: "LLM", url: "https://chat.openai.com", icon: "fa-comments", desc: "OpenAI tarafından geliştirilen, doğal dilde etkileşim kurabilen yapay zeka sohbet robotu.", pricing: "Freemium", features: ["Metin Üretimi", "Kod Yazma", "Taslak Oluşturma"], useCases: ["Müşteri Desteği", "İçerik Yazarlığı", "Öğrenme"] },
269
+ { id: 2, name: "Claude", category: "LLM", url: "https://claude.ai", icon: "fa-feather", desc: "Anthropic tarafından geliştirilen, güvenli ve yararlı olmaya odaklanmış yapay zeka asistanı.", pricing: "Freemium", features: ["Uzun Bağlam", "Güvenli Yanıtlar", "Doküman Analizi"], useCases: ["Araştırma", "Yaratıcı Yazarlık", "Veri Analizi"] },
270
+ { id: 3, name: "Google Gemini", category: "LLM", url: "https://gemini.google.com", icon: "fa-star", desc: "Google'ın çok modlu (metin, görsel, ses) yapay zeka modeli ve asistanı.", pricing: "Freemium", features: ["Google Entegrasyonu", "Gerçek Zamanlı Bilgi", "Görsel Analizi"], useCases: ["Arama", "Planlama", "Özetleme"] },
271
+ { id: 4, name: "Perplexity", category: "LLM", url: "https://www.perplexity.ai", icon: "fa-compass", desc: "Kaynaklarıyla birlikte yanıt veren yapay zeka arama motoru.", pricing: "Freemium", features: ["Kaynak Gösterme", "Gerçek Zamanlı Arama", "Odak Modları"], useCases: ["Araştırma", "Öğrenci Çalışmaları", "Haber Takibi"] },
272
+ { id: 5, name: "Mistral AI", category: "LLM", url: "https://mistral.ai", icon: "fa-wind", desc: "Açık kaynak modelleri ve güçlü API'leri ile öne çıkan Avrupalı AI firması.", pricing: "Freemium", features: ["Açık Kaynak Modeller", "Hızlı Yanıtlar", "API"], useCases: ["Geliştirme", "Entegrasyon", "Özelleştirme"] },
273
+ { id: 6, name: "HuggingChat", category: "LLM", url: "https://huggingface.co/chat", icon: "fa-face-smile", desc: "Hugging Face topluluğu tarafından desteklenen açık kaynak sohbet arayüzü.", pricing: "Free", features: ["Açık Modeller", "Topluluk Desteği", "Çeşitlilik"], useCases: ["Deney", "Test", "Açık Kaynak Projeler"] },
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
274
 
275
+ // Image Generation
276
+ { id: 7, name: "Midjourney", category: "Image", url: "https://www.midjourney.com", icon: "fa-palette", desc: "Sanatsal ve yüksek kaliteli görseller üretmek için kullanılan popüler AI aracı.", pricing: "Paid", features: ["Yüksek Çözünürlük", "Sanatsal Stil", "Discord Entegrasyonu"], useCases: ["Konsept Sanatı", "Tasarım", "İllüstrasyon"] },
277
+ { id: 8, name: "DALL-E 3", category: "Image", url: "https://openai.com/dall-e-3", icon: "fa-image", desc: "OpenAI'ın metin komutlarından gerçekçi görseller ve sanat eserleri oluşturan modeli.", pricing: "Freemium", features: ["Metin Anlama", "ChatGPT Entegrasyonu", "Yüksek Doğruluk"], useCases: ["Pazarlama", "İçerik Üretimi", "Eğitim"] },
278
+ { id: 9, name: "Stable Diffusion", category: "Image", url: "https://stability.ai", icon: "fa-layer-group", desc: "Stability AI tarafından geliştirilen, açık kaynak görsel üretim modeli.", pricing: "Freemium", features: ["Açık Kaynak", "Yerel Çalıştırma", "Özelleştirilebilir"], useCases: ["Oyun Geliştirme", "Sanat", "Mimari"] },
279
+ { id: 10, name: "Leonardo.ai", category: "Image", url: "https://leonardo.ai", icon: "fa-gamepad", desc: "Oyun varlıkları ve yaratıcı görseller için optimize edilmiş AI stüdyosu.", pricing: "Freemium", features: ["Varlık Üretimi", "Doku Oluşturma", "Model Eğitimi"], useCases: ["Oyun Tasarımı", "3D Doku", "Karakter Tasarımı"] },
280
+ { id: 11, name: "Adobe Firefly", category: "Image", url: "https://www.adobe.com/sensei/generative-ai/firefly.html", icon: "fa-sun", desc: "Adobe'un yaratıcı araçlarına entegre yapay zeka modeli.", pricing: "Freemium", features: ["Ticari Güvenlik", "Vektör Desteği", "Photoshop Entegrasyonu"], useCases: ["Grafik Tasarım", "Pazarlama", "Profesyonel İş Akışları"] },
281
+
282
+ // Video Generation
283
+ { id: 12, name: "Runway Gen-2", category: "Video", url: "https://runwayml.com", icon: "fa-film", desc: "Metin veya görselden video üretme, video düzenleme ve efekt ekleme aracı.", pricing: "Freemium", features: ["Metinden Video", "Video Stil Transferi", "Yeşil Ekran"], useCases: ["Film Yapımı", "Reklam", "Sosyal Medya"] },
284
+ { id: 13, name: "Pika Labs", category: "Video", url: "https://pika.art", icon: "fa-play-circle", desc: "Kolay kullanımlı arayüzüyle metinden ve görselden kısa videolar üreten platform.", pricing: "Freemium", features: ["Hızlı Üretim", "Basit Arayüz", "Animasyon"], useCases: ["Sosyal Medya", "Meme", "Taslak"] },
285
+ { id: 14, name: "Synthesia", category: "Video", url: "https://www.synthesia.io", icon: "fa-user-tie", desc: "Metni profesyonel sunum videolarına çeviren AI avatar teknolojisi.", pricing: "Paid", features: ["AI Avatarlar", "120+ Dil", "Şablonlar"], useCases: ["Eğitim Videoları", "İç İletişim", "Pazarlama"] },
286
+ { id: 15, name: "HeyGen", category: "Video", url: "https://www.heygen.com", icon: "fa-video", desc: "AI avatarları ve ses klonlama ile çok dilli video üretimi.", pricing: "Paid", features: ["Ses Klonlama", "Çok Dilli", "API"], useCases: ["E-öğrenme", "Satış Videoları", "Yerelleştirme"] },
287
+
288
+ // Audio & Music
289
+ { id: 16, name: "ElevenLabs", category: "Audio", url: "https://elevenlabs.io", icon: "fa-microphone", desc: "En gerçekçi metin-ses (TTS) ve ses klonlama teknolojisi.", pricing: "Freemium", features: ["Ses Klonlama", "Çoklu Ton", "Dubbing"], useCases: ["Sesli Kitap", "Podcast", "Oyun"] },
290
+ { id: 17, name: "Suno AI", category: "Audio", url: "https://www.suno.ai", icon: "fa-music", desc: "Metin istemlerinden tam şarkılar (sözler ve müzik) üreten AI.", pricing: "Freemium", features: ["Şarkı Yazımı", "Çeşitli Tarzlar", "Hızlı Üretim"], useCases: ["İçerik Müziği", "Yaratıcılık", "Eğlence"] },
291
+ { id: 18, name: "Udio", category: "Audio", url: "https://www.udio.com", icon: "fa-record-vinyl", desc: "Yüksek kaliteli müzik üretimi için tasarlanmış AI aracı.", pricing: "Freemium", features: ["Vokal Üretimi", "Enstrümantal", "Tarz Karışımı"], useCases: ["Müzik Prodüksiyonu", "Demo Kayıtlar"] },
292
+
293
+ // Coding
294
+ { id: 19, name: "GitHub Copilot", category: "Code", url: "https://github.com/features/copilot", icon: "fa-code", desc: "GitHub ve OpenAI işbirliğiyle geliştirilen yapay zeka çift programcısı.", pricing: "Paid", features: ["Kod Tamamlama", "Doğal Dil Anlama", "IDE Entegrasyonu"], useCases: ["Yazılım Geliştirme", "Öğrenme", "Hata Ayıklama"] },
295
+ { id: 20, name: "Cursor", category: "Code", url: "https://cursor.sh", icon: "fa-terminal", desc: "Yapay zeka destekli kod editörü. Kod tabanınızı tamamen anlar.", pricing: "Freemium", features: ["Kod Üretimi", "Kod Açıklama", "Hata Düzeltme"], useCases: ["Proje Geliştirme", "Refactoring"] },
296
+ { id: 21, name: "Codeium", category: "Code", url: "https://codeium.com", icon: "fa-laptop-code", desc: "Ücretsiz, hızlı ve bireysel kullanım için optimize edilmiş AI kod tamamlayıcı.", pricing: "Free", features: ["Hızlı Öneriler", "Ücretsiz Kullanım", "70+ Dil"], useCases: ["Hobi Projeleri", "Öğrenciler", "Hızlı Kodlama"] },
297
+
298
+ // Productivity & Business
299
+ { id: 22, name: "Notion AI", category: "Productivity", url: "https://www.notion.so/product/ai", icon: "fa-book", desc: "Notion çalışma alanınıza entegre edilmiş yapay zeka yazma asistanı.", pricing: "Paid", features: ["Özetleme", "Taslak Yazma", "Çeviri"], useCases: ["Not Alma", "Proje Yönetimi", "Wiki"] },
300
+ { id: 23, name: "Grammarly", category: "Productivity", url: "https://www.grammarly.com", icon: "fa-spell-check", desc: "Yazım, dil bilgisi ve ton kontrolü yapan yapay zeka asistanı.", pricing: "Freemium", features: ["Hata Düzeltme", "Ton Analizi", "Eklentiler"], useCases: ["E-posta", "Akademik Yazı", "Raporlar"] },
301
+ { id: 24, name: "Otter.ai", category: "Productivity", url: "https://otter.ai", icon: "fa-file-audio", desc: "Toplantıları gerçek zamanlı olarak transkribe eden ve özetleyen araç.", pricing: "Freemium", features: ["Canlı Transkripsiyon", "Konuşmacı Tanıma", "Otomatik Özet"], useCases: ["İş Toplantıları", "Röportaj", "Ders Notları"] },
302
+
303
+ // Design
304
+ { id: 25, name: "Canva Magic Studio", category: "Design", url: "https://www.canva.com/magic", icon: "fa-pen-nib", desc: "Canva'nın içerisindeki metinden görsele, yazı düzenleyici ve daha fazlasını sunan AI paketi.", pricing: "Freemium", features: ["Metinden Görsele", "Sihirli Yazı", "Animasyon"], useCases: ["Sosyal Medya", "Sunum", "Pazarlama"] },
305
+ { id: 26, name: "Figma AI", category: "Design", url: "https://www.figma.com/ai", icon: "fa-object-group", desc: "UI/UX tasarım sürecini hızlandıran yapay zeka özellikleri.", pricing: "Freemium", features: ["Otomatik Düzen", "İsimlendirme", "Arama"], useCases: ["Web Tasarım", "Mobil Uygulama", "Prototipleme"] },
306
+
307
+ // Research & Other
308
+ { id: 27, name: "Elicit", category: "Research", url: "https://elicit.org", icon: "fa-graduation-cap", desc: "Akademik makaleleri analiz eden ve özetleyen yapay zeka araştırma asistanı.", pricing: "Freemium", features: ["Makale Özeti", "Veri Çıkarma", "Sistematik İnceleme"], useCases: ["Akademik Araştırma", "Tez", "Bilimsel Yazı"] },
309
+ { id: 28, name: "Gamma", category: "Productivity", url: "https://gamma.app", icon: "fa-presentation-screen", desc: "Metin girişinden otomatik olarak sunum, web sayfası ve doküman oluşturan araç.", pricing: "Freemium", features: ["Tek Tıkla Tasarım", "Güzel Şablonlar", "Web Yayını"], useCases: ["Sunum", "Portfolyo", "Dokümantasyon"] },
310
+ { id: 29, name: "Replicate", category: "Code", url: "https://replicate.com", icon: "fa-server", desc: "Açık kaynak AI modellerini çalıştırmak için bulut API'si.", pricing: "Pay-as-you-go", features: ["Model API", "Özel Modeller", "Ölçeklenebilirlik"], useCases: ["Startup", "Üretim", "Deney"] },
311
+ { id: 30, name: "Copy.ai", category: "Productivity", url: "https://www.copy.ai", icon: "fa-copyright", desc: "Pazarlama metinleri ve kopya yazımı için optimize edilmiş AI yazar.", pricing: "Freemium", features: ["Blog Yazısı", "Sosyal Medya", "E-posta"], useCases: ["Pazarlama", "Satış", "İçerik Stratejisi"] }
312
+ ];
313
+
314
+ // --- STATE MANAGEMENT ---
315
+ let currentCategory = 'Tümü';
316
+ let currentTab = 'Tümü';
317
+ let searchQuery = '';
318
+
319
+ // --- DOM ELEMENTS ---
320
+ const categoryListEl = document.getElementById('categoryList');
321
+ const tabContainerEl = document.getElementById('tabContainer');
322
+ const toolsGridEl = document.getElementById('toolsGrid');
323
+ const emptyStateEl = document.getElementById('emptyState');
324
  const searchInput = document.getElementById('searchInput');
325
+ const mobileSearchInput = document.getElementById('mobileSearchInput');
 
 
 
 
 
 
 
 
 
 
 
 
 
326
 
327
+ // --- INITIALIZATION ---
328
+ document.addEventListener('DOMContentLoaded', () => {
329
+ renderCategories();
330
+ renderTabs();
331
+ renderTools();
332
 
333
+ // Search Listeners
334
+ searchInput.addEventListener('input', (e) => handleSearch(e.target.value));
335
+ mobileSearchInput.addEventListener('input', (e) => handleSearch(e.target.value));
336
+ });
 
 
 
 
 
 
337
 
338
+ // --- RENDER FUNCTIONS ---
339
 
340
+ function renderCategories() {
341
+ const categories = ['Tümü', ...new Set(toolsData.map(t => t.category))];
342
+
343
+ categoryListEl.innerHTML = categories.map(cat => `
344
+ <button onclick="setCategory('${cat}')"
345
+ class="w-full text-left px-4 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 flex items-center justify-between group
346
+ ${currentCategory === cat ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-500/30' : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200'}">
347
+ <span>${translateCategory(cat)}</span>
348
+ ${currentCategory === cat ? '<i class="fa-solid fa-chevron-right text-xs"></i>' : ''}
349
+ </button>
350
+ `).join('');
 
 
 
 
 
 
 
 
 
 
 
 
351
  }
352
 
353
+ function renderTabs() {
354
+ // Define sub-filters based on category
355
+ let tabs = ['Tümü'];
356
+ if (currentCategory === 'Tümü') {
357
+ tabs = ['Tümü', 'Popüler', 'Yeni', 'Ücretsiz'];
358
+ } else if (currentCategory === 'Image') {
359
+ tabs = ['Tümü', 'Gerçekçi', 'Sanatsal', '3D'];
360
+ } else if (currentCategory === 'LLM') {
361
+ tabs = ['Tümü', 'Sohbet', 'Arama', 'API'];
362
+ } else if (currentCategory === 'Code') {
363
+ tabs = ['Tümü', 'Tamamlama', 'Üretim', 'Hata Ayıklama'];
364
+ } else {
365
+ tabs = ['Tümü', 'Premium', 'Ücretsiz'];
366
+ }
367
+
368
+ tabContainerEl.innerHTML = tabs.map(tab => `
369
+ <button onclick="setTab('${tab}')"
370
+ class="tab-btn px-5 py-2 rounded-full text-sm font-medium whitespace-nowrap
371
+ ${currentTab === tab ? 'active text-white bg-slate-800' : 'text-slate-400 hover:text-slate-200'}">
372
+ ${tab}
373
+ </button>
374
+ `).join('');
375
+ }
376
 
377
+ function renderTools() {
378
+ // Filter Logic
379
+ let filtered = toolsData.filter(tool => {
380
+ const matchesCategory = currentCategory === 'Tümü' || tool.category === currentCategory;
381
+ const matchesSearch = tool.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
382
+ tool.desc.toLowerCase().includes(searchQuery.toLowerCase());
383
 
384
+ let matchesTab = true;
385
+ if (currentTab === 'Ücretsiz') matchesTab = tool.pricing.toLowerCase().includes('free');
386
+ if (currentTab === 'Popüler') matchesTab = ['ChatGPT', 'Midjourney', 'GitHub Copilot', 'Runway Gen-2'].includes(tool.name);
387
+ if (currentTab === 'Yeni') matchesTab = ['Suno AI', 'Udio', 'Claude', 'Pika Labs'].includes(tool.name);
388
+
389
+ return matchesCategory && matchesSearch && matchesTab;
 
 
 
 
 
 
 
 
 
 
 
 
 
390
  });
391
+
392
+ // UI Update
393
+ toolsGridEl.innerHTML = '';
394
+
395
+ if (filtered.length === 0) {
396
+ emptyStateEl.classList.remove('hidden');
397
+ } else {
398
+ emptyStateEl.classList.add('hidden');
399
+ filtered.forEach((tool, index) => {
400
+ const card = document.createElement('div');
401
+ card.className = 'glass-card rounded-xl p-5 flex flex-col h-full animate-fade-in cursor-pointer group relative overflow-hidden';
402
+ card.style.animationDelay = `${index * 50}ms`;
403
+ card.onclick = () => openModal(tool);
404
+
405
+ // Dynamic Icon Color based on category
406
+ const iconColors = {
407
+ 'LLM': 'text-blue-400 bg-blue-400/10',
408
+ 'Image': 'text-pink-400 bg-pink-400/10',
409
+ 'Video': 'text-purple-400 bg-purple-400/10',
410
+ 'Audio': 'text-yellow-400 bg-yellow-400/10',
411
+ 'Code': 'text-green-400 bg-green-400/10',
412
+ 'Productivity': 'text-orange-400 bg-orange-400/10',
413
+ 'Design': 'text-red-400 bg-red-400/10',
414
+ 'Research': 'text-teal-400 bg-teal-400/10',
415
+ 'Business': 'text-indigo-400 bg-indigo-400/10'
416
+ };
417
+ const iconClass = iconColors[tool.category] || 'text-slate-400 bg-slate-400/10';
418
+
419
+ card.innerHTML = `
420
+ <div class="flex justify-between items-start mb-4">
421
+ <div class="w-12 h-12 rounded-lg ${iconClass} flex items-center justify-center text-xl transition-transform group-hover:scale-110 duration-300">
422
+ <i class="fa-solid ${tool.icon}"></i>
423
+ </div>
424
+ <span class="text-[10px] uppercase font-bold tracking-wider px-2 py-1 rounded bg-slate-800 text-slate-400 border border-slate-700">
425
+ ${tool.pricing}
426
+ </span>
427
+ </div>
428
+ <h3 class="text-lg font-bold text-white mb-1 group-hover:text-indigo-400 transition-colors">${tool.name}</h3>
429
+ <p class="text-xs text-indigo-300 font-medium mb-3 uppercase tracking-wide">${translateCategory(tool.category)}</p>
430
+ <p class="text-sm text-slate-400 line-clamp-2 mb-4 flex-1">${tool.desc}</p>
431
+
432
+ <div class="flex items-center justify-between mt-auto pt-4 border-t border-slate-700/50">
433
+ <span class="text-xs text-slate-500 group-hover:text-slate-300 transition-colors">Detayları Gör</span>
434
+ <i class="fa-solid fa-arrow-right text-slate-500 group-hover:text-indigo-400 group-hover:translate-x-1 transition-all"></i>
435
+ </div>
436
+
437
+ <!-- Hover Glow Effect -->
438
+ <div class="absolute -bottom-10 -right-10 w-32 h-32 bg-indigo-500/20 rounded-full blur-3xl group-hover:bg-indigo-500/30 transition-all duration-500"></div>
439
+ `;
440
+ toolsGridEl.appendChild(card);
441
+ });
442
+ }
443
  }
444
 
445
+ // --- ACTIONS ---
446
 
447
+ function setCategory(cat) {
448
+ currentCategory = cat;
449
+ currentTab = 'Tümü'; // Reset tab on category change
450
+ renderCategories();
451
+ renderTabs();
452
+ renderTools();
453
+
454
+ // Mobile: Scroll to grid
455
+ if(window.innerWidth < 768) {
456
+ document.getElementById('scrollContainer').scrollIntoView({behavior: 'smooth'});
457
+ }
458
+ }
459
 
460
+ function setTab(tab) {
461
+ currentTab = tab;
462
+ renderTabs();
463
+ renderTools();
464
+ }
465
 
466
+ function handleSearch(query) {
467
+ searchQuery = query;
468
+ renderTools();
469
+ }
 
 
 
 
 
 
 
 
 
 
470
 
471
+ function filterByTag(tag) {
472
+ currentTab = tag;
473
+ renderTabs();
474
+ renderTools();
 
 
475
  }
476
 
477
+ // --- MODAL LOGIC ---
478
 
479
+ function openModal(tool) {
480
+ const modal = document.getElementById('detailModal');
481
+ const backdrop = document.getElementById('modalBackdrop');
482
+ const panel = document.getElementById('modalPanel');
483
+
484
+ // Populate Data
485
+ document.getElementById('modalTitle').innerText = tool.name;
486
+ document.getElementById('modalCategory').innerText = translateCategory(tool.category);
487
+ document.getElementById('modalDescription').innerText = tool.desc;
488
+ document.getElementById('modalPricing').innerText = tool.pricing;
489
+ document.getElementById('modalVisitBtn').href = tool.url;
490
 
491
+ // Icon
492
+ const iconContainer = document.getElementById('modalIconContainer');
493
+ iconContainer.innerHTML = `<i class="fa-solid ${tool.icon} text-3xl text-indigo-400"></i>`;
494
+
495
+ // Lists
496
+ const featuresList = document.getElementById('modalFeatures');
497
+ featuresList.innerHTML = tool.features.map(f => `<li class="flex items-center gap-2 text-sm text-slate-300"><i class="fa-solid fa-check text-green-400 text-xs"></i> ${f}</li>`).join('');
498
+
499
+ const useCasesList = document.getElementById('modalUseCases');
500
+ useCasesList.innerHTML = tool.useCases.map(u => `<li class="flex items-center gap-2 text-sm text-slate-300"><i class="fa-solid fa-lightbulb text-yellow-400 text-xs"></i> ${u}</li>`).join('');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
501
 
502
+ // Show Modal
503
  modal.classList.remove('hidden');
504
+ // Small delay for transition
505
  setTimeout(() => {
506
+ backdrop.classList.remove('opacity-0');
507
+ panel.classList.remove('opacity-0', 'translate-y-4', 'sm:translate-y-0', 'sm:scale-95');
508
+ panel.classList.add('opacity-100', 'translate-y-0', 'sm:scale-100');
509
  }, 10);
510
  }
511
 
512
+ function closeModal() {
513
+ const modal = document.getElementById('detailModal');
514
+ const backdrop = document.getElementById('modalBackdrop');
515
+ const panel = document.getElementById('modalPanel');
516
+
517
+ backdrop.classList.add('opacity-0');
518
+ panel.classList.remove('opacity-100', 'translate-y-0', 'sm:scale-100');
519
+ panel.classList.add('opacity-0', 'translate-y-4', 'sm:translate-y-0', 'sm:scale-95');
520
+
521
  setTimeout(() => {
522
  modal.classList.add('hidden');
523
  }, 300);
524
  }
525
 
526
+ // Close modal on backdrop click
527
+ document.getElementById('modalBackdrop').addEventListener('click', closeModal);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
528
  document.addEventListener('keydown', (e) => {
529
+ if (e.key === 'Escape') closeModal();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
530
  });
531
 
532
+ // --- HELPERS ---
533
+ function translateCategory(cat) {
534
+ const map = {
535
+ 'Tümü': 'Tüm Kategoriler',
536
+ 'LLM': 'Dil Modelleri (LLM)',
537
+ 'Image': 'Görsel Üretimi',
538
+ 'Video': 'Video Üretimi',
539
+ 'Audio': 'Ses & Müzik',
540
+ 'Code': 'Kodlama',
541
+ 'Productivity': 'Verimlilik',
542
+ 'Design': 'Tasarım',
543
+ 'Research': 'Araştırma',
544
+ 'Business': 'İş Dünyası'
545
+ };
546
+ return map[cat] || cat;
547
+ }
548
 
549
  </script>
550
  </body>