Spaces:
Running
Running
| <html lang="tr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Tools Explorer - Yapay Zeka Araçları Kütüphanesi</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #0f172a; /* Slate 900 */ | |
| color: #e2e8f0; /* Slate 200 */ | |
| } | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #1e293b; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #475569; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #64748b; | |
| } | |
| /* Glassmorphism Utilities */ | |
| .glass { | |
| background: rgba(30, 41, 59, 0.7); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .glass-card { | |
| background: rgba(30, 41, 59, 0.6); | |
| backdrop-filter: blur(8px); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .glass-card:hover { | |
| transform: translateY(-5px); | |
| background: rgba(30, 41, 59, 0.9); | |
| border-color: rgba(99, 102, 241, 0.5); /* Indigo 500 */ | |
| box-shadow: 0 10px 30px -10px rgba(99, 102, 241, 0.3); | |
| } | |
| /* Tab Animations */ | |
| .tab-btn { | |
| position: relative; | |
| transition: all 0.3s ease; | |
| } | |
| .tab-btn::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -2px; | |
| left: 0; | |
| width: 0%; | |
| height: 2px; | |
| background: #6366f1; | |
| transition: width 0.3s ease; | |
| } | |
| .tab-btn.active::after { | |
| width: 100%; | |
| } | |
| .tab-btn.active { | |
| color: #fff; | |
| background: rgba(99, 102, 241, 0.15); | |
| } | |
| /* Grid Animation */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .animate-fade-in { | |
| animation: fadeIn 0.4s ease-out forwards; | |
| } | |
| /* Gradient Text */ | |
| .text-gradient { | |
| background: linear-gradient(to right, #818cf8, #c084fc, #f472b6); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| /* Loader */ | |
| .loader { | |
| border-top-color: #6366f1; | |
| -webkit-animation: spinner 1.5s linear infinite; | |
| animation: spinner 1.5s linear infinite; | |
| } | |
| @keyframes spinner { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex flex-col overflow-hidden"> | |
| <!-- Header --> | |
| <header class="glass sticky top-0 z-50 border-b border-slate-700/50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between"> | |
| <div class="flex items-center gap-3"> | |
| <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"> | |
| <i class="fa-solid fa-robot text-white text-xl"></i> | |
| </div> | |
| <div> | |
| <h1 class="text-xl font-bold tracking-tight text-white">AI<span class="text-indigo-400">Explorer</span></h1> | |
| <p class="text-xs text-slate-400">Yapay Zeka Araçları Kütüphanesi</p> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center gap-4"> | |
| <div class="relative"> | |
| <i class="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm"></i> | |
| <input type="text" id="searchInput" placeholder="Araç ara..." | |
| 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"> | |
| </div> | |
| <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"> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-1 flex flex-col md:flex-row max-w-7xl mx-auto w-full overflow-hidden"> | |
| <!-- Sidebar / Categories --> | |
| <aside class="w-full md:w-64 glass border-r border-slate-700/50 flex flex-col z-40"> | |
| <div class="p-4 border-b border-slate-700/50"> | |
| <h2 class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">Kategoriler</h2> | |
| <div class="space-y-1" id="categoryList"> | |
| <!-- Categories injected via JS --> | |
| </div> | |
| </div> | |
| <div class="p-4 mt-auto hidden md:block"> | |
| <div class="bg-gradient-to-br from-indigo-900/50 to-purple-900/50 rounded-xl p-4 border border-indigo-500/20"> | |
| <h3 class="text-sm font-semibold text-white mb-1">Yeni Araçlar</h3> | |
| <p class="text-xs text-indigo-200 mb-3">Veritabanı günlük güncellenmektedir.</p> | |
| <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"> | |
| Son Eklenenleri Gör | |
| </button> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Content Area --> | |
| <section class="flex-1 flex flex-col overflow-hidden relative bg-slate-900/50"> | |
| <!-- Mobile Search (Visible only on small screens) --> | |
| <div class="md:hidden p-4 border-b border-slate-700/50"> | |
| <div class="relative"> | |
| <i class="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm"></i> | |
| <input type="text" id="mobileSearchInput" placeholder="Araç ara..." | |
| 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"> | |
| </div> | |
| </div> | |
| <!-- Tabs Navigation --> | |
| <div class="px-6 py-4 border-b border-slate-700/50 overflow-x-auto no-scrollbar"> | |
| <div class="flex space-x-2" id="tabContainer"> | |
| <!-- Tabs injected via JS --> | |
| </div> | |
| </div> | |
| <!-- Grid View --> | |
| <div class="flex-1 overflow-y-auto p-6 custom-scrollbar" id="scrollContainer"> | |
| <div id="toolsGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 pb-20"> | |
| <!-- Cards injected via JS --> | |
| </div> | |
| <!-- Empty State --> | |
| <div id="emptyState" class="hidden flex flex-col items-center justify-center h-64 text-center"> | |
| <div class="w-16 h-16 bg-slate-800 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fa-solid fa-ghost text-slate-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-white">Sonuç bulunamadı</h3> | |
| <p class="text-slate-400 text-sm mt-1">Farklı bir arama terimi veya kategori deneyin.</p> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Detail Modal --> | |
| <div id="detailModal" class="fixed inset-0 z-[100] hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true"> | |
| <!-- Backdrop --> | |
| <div class="fixed inset-0 bg-slate-900/80 backdrop-blur-sm transition-opacity opacity-0" id="modalBackdrop"></div> | |
| <div class="fixed inset-0 z-10 overflow-y-auto"> | |
| <div class="flex min-h-full items-center justify-center p-4 text-center sm:p-0"> | |
| <!-- Modal Panel --> | |
| <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"> | |
| <!-- Header Image/Gradient --> | |
| <div class="h-32 bg-gradient-to-r from-indigo-600 to-purple-600 relative"> | |
| <button onclick="closeModal()" class="absolute top-4 right-4 bg-black/20 hover:bg-black/40 text-white rounded-full p-2 transition-colors"> | |
| <i class="fa-solid fa-times w-5 h-5 flex items-center justify-center"></i> | |
| </button> | |
| <div class="absolute -bottom-10 left-8"> | |
| <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"> | |
| <!-- Icon injected here --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Content --> | |
| <div class="px-8 pt-12 pb-8"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white" id="modalTitle">Tool Name</h3> | |
| <p class="text-indigo-400 text-sm font-medium mt-1" id="modalCategory">Category</p> | |
| </div> | |
| <div class="flex gap-2"> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <p class="text-slate-300 leading-relaxed" id="modalDescription"> | |
| Description goes here. | |
| </p> | |
| </div> | |
| <div class="mt-6 grid grid-cols-2 gap-4"> | |
| <div class="bg-slate-700/30 p-4 rounded-xl border border-slate-700"> | |
| <h4 class="text-xs font-semibold text-slate-400 uppercase mb-2">Özellikler</h4> | |
| <ul class="space-y-2" id="modalFeatures"> | |
| <!-- Features --> | |
| </ul> | |
| </div> | |
| <div class="bg-slate-700/30 p-4 rounded-xl border border-slate-700"> | |
| <h4 class="text-xs font-semibold text-slate-400 uppercase mb-2">Kullanım Alanları</h4> | |
| <ul class="space-y-2" id="modalUseCases"> | |
| <!-- Use Cases --> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-8 flex justify-end gap-3"> | |
| <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"> | |
| Kapat | |
| </button> | |
| <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"> | |
| Siteyi Ziyaret Et <i class="fa-solid fa-external-link-alt text-xs"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // --- DATASET: Comprehensive AI Tools --- | |
| // Kategoriler: LLM, Image, Video, Audio, Code, Productivity, Business, Research, Design, Other | |
| const toolsData = [ | |
| // LLMs & Chatbots | |
| { 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"] }, | |
| { 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"] }, | |
| { 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"] }, | |
| { 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"] }, | |
| { 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"] }, | |
| { 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"] }, | |
| // Image Generation | |
| { 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"] }, | |
| { 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"] }, | |
| { 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"] }, | |
| { 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ı"] }, | |
| { 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ı"] }, | |
| // Video Generation | |
| { 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"] }, | |
| { 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"] }, | |
| { 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"] }, | |
| { 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"] }, | |
| // Audio & Music | |
| { 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"] }, | |
| { 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"] }, | |
| { 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"] }, | |
| // Coding | |
| { 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"] }, | |
| { 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"] }, | |
| { 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"] }, | |
| // Productivity & Business | |
| { 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"] }, | |
| { 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"] }, | |
| { 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ı"] }, | |
| // Design | |
| { 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"] }, | |
| { 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"] }, | |
| // Research & Other | |
| { 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ı"] }, | |
| { 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"] }, | |
| { 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"] }, | |
| { 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"] } | |
| ]; | |
| // --- STATE MANAGEMENT --- | |
| let currentCategory = 'Tümü'; | |
| let currentTab = 'Tümü'; | |
| let searchQuery = ''; | |
| // --- DOM ELEMENTS --- | |
| const categoryListEl = document.getElementById('categoryList'); | |
| const tabContainerEl = document.getElementById('tabContainer'); | |
| const toolsGridEl = document.getElementById('toolsGrid'); | |
| const emptyStateEl = document.getElementById('emptyState'); | |
| const searchInput = document.getElementById('searchInput'); | |
| const mobileSearchInput = document.getElementById('mobileSearchInput'); | |
| // --- INITIALIZATION --- | |
| document.addEventListener('DOMContentLoaded', () => { | |
| renderCategories(); | |
| renderTabs(); | |
| renderTools(); | |
| // Search Listeners | |
| searchInput.addEventListener('input', (e) => handleSearch(e.target.value)); | |
| mobileSearchInput.addEventListener('input', (e) => handleSearch(e.target.value)); | |
| }); | |
| // --- RENDER FUNCTIONS --- | |
| function renderCategories() { | |
| const categories = ['Tümü', ...new Set(toolsData.map(t => t.category))]; | |
| categoryListEl.innerHTML = categories.map(cat => ` | |
| <button onclick="setCategory('${cat}')" | |
| 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 | |
| ${currentCategory === cat ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-500/30' : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200'}"> | |
| <span>${translateCategory(cat)}</span> | |
| ${currentCategory === cat ? '<i class="fa-solid fa-chevron-right text-xs"></i>' : ''} | |
| </button> | |
| `).join(''); | |
| } | |
| function renderTabs() { | |
| // Define sub-filters based on category | |
| let tabs = ['Tümü']; | |
| if (currentCategory === 'Tümü') { | |
| tabs = ['Tümü', 'Popüler', 'Yeni', 'Ücretsiz']; | |
| } else if (currentCategory === 'Image') { | |
| tabs = ['Tümü', 'Gerçekçi', 'Sanatsal', '3D']; | |
| } else if (currentCategory === 'LLM') { | |
| tabs = ['Tümü', 'Sohbet', 'Arama', 'API']; | |
| } else if (currentCategory === 'Code') { | |
| tabs = ['Tümü', 'Tamamlama', 'Üretim', 'Hata Ayıklama']; | |
| } else { | |
| tabs = ['Tümü', 'Premium', 'Ücretsiz']; | |
| } | |
| tabContainerEl.innerHTML = tabs.map(tab => ` | |
| <button onclick="setTab('${tab}')" | |
| class="tab-btn px-5 py-2 rounded-full text-sm font-medium whitespace-nowrap | |
| ${currentTab === tab ? 'active text-white bg-slate-800' : 'text-slate-400 hover:text-slate-200'}"> | |
| ${tab} | |
| </button> | |
| `).join(''); | |
| } | |
| function renderTools() { | |
| // Filter Logic | |
| let filtered = toolsData.filter(tool => { | |
| const matchesCategory = currentCategory === 'Tümü' || tool.category === currentCategory; | |
| const matchesSearch = tool.name.toLowerCase().includes(searchQuery.toLowerCase()) || | |
| tool.desc.toLowerCase().includes(searchQuery.toLowerCase()); | |
| let matchesTab = true; | |
| if (currentTab === 'Ücretsiz') matchesTab = tool.pricing.toLowerCase().includes('free'); | |
| if (currentTab === 'Popüler') matchesTab = ['ChatGPT', 'Midjourney', 'GitHub Copilot', 'Runway Gen-2'].includes(tool.name); | |
| if (currentTab === 'Yeni') matchesTab = ['Suno AI', 'Udio', 'Claude', 'Pika Labs'].includes(tool.name); | |
| return matchesCategory && matchesSearch && matchesTab; | |
| }); | |
| // UI Update | |
| toolsGridEl.innerHTML = ''; | |
| if (filtered.length === 0) { | |
| emptyStateEl.classList.remove('hidden'); | |
| } else { | |
| emptyStateEl.classList.add('hidden'); | |
| filtered.forEach((tool, index) => { | |
| const card = document.createElement('div'); | |
| card.className = 'glass-card rounded-xl p-5 flex flex-col h-full animate-fade-in cursor-pointer group relative overflow-hidden'; | |
| card.style.animationDelay = `${index * 50}ms`; | |
| card.onclick = () => openModal(tool); | |
| // Dynamic Icon Color based on category | |
| const iconColors = { | |
| 'LLM': 'text-blue-400 bg-blue-400/10', | |
| 'Image': 'text-pink-400 bg-pink-400/10', | |
| 'Video': 'text-purple-400 bg-purple-400/10', | |
| 'Audio': 'text-yellow-400 bg-yellow-400/10', | |
| 'Code': 'text-green-400 bg-green-400/10', | |
| 'Productivity': 'text-orange-400 bg-orange-400/10', | |
| 'Design': 'text-red-400 bg-red-400/10', | |
| 'Research': 'text-teal-400 bg-teal-400/10', | |
| 'Business': 'text-indigo-400 bg-indigo-400/10' | |
| }; | |
| const iconClass = iconColors[tool.category] || 'text-slate-400 bg-slate-400/10'; | |
| card.innerHTML = ` | |
| <div class="flex justify-between items-start mb-4"> | |
| <div class="w-12 h-12 rounded-lg ${iconClass} flex items-center justify-center text-xl transition-transform group-hover:scale-110 duration-300"> | |
| <i class="fa-solid ${tool.icon}"></i> | |
| </div> | |
| <span class="text-[10px] uppercase font-bold tracking-wider px-2 py-1 rounded bg-slate-800 text-slate-400 border border-slate-700"> | |
| ${tool.pricing} | |
| </span> | |
| </div> | |
| <h3 class="text-lg font-bold text-white mb-1 group-hover:text-indigo-400 transition-colors">${tool.name}</h3> | |
| <p class="text-xs text-indigo-300 font-medium mb-3 uppercase tracking-wide">${translateCategory(tool.category)}</p> | |
| <p class="text-sm text-slate-400 line-clamp-2 mb-4 flex-1">${tool.desc}</p> | |
| <div class="flex items-center justify-between mt-auto pt-4 border-t border-slate-700/50"> | |
| <span class="text-xs text-slate-500 group-hover:text-slate-300 transition-colors">Detayları Gör</span> | |
| <i class="fa-solid fa-arrow-right text-slate-500 group-hover:text-indigo-400 group-hover:translate-x-1 transition-all"></i> | |
| </div> | |
| <!-- Hover Glow Effect --> | |
| <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> | |
| `; | |
| toolsGridEl.appendChild(card); | |
| }); | |
| } | |
| } | |
| // --- ACTIONS --- | |
| function setCategory(cat) { | |
| currentCategory = cat; | |
| currentTab = 'Tümü'; // Reset tab on category change | |
| renderCategories(); | |
| renderTabs(); | |
| renderTools(); | |
| // Mobile: Scroll to grid | |
| if(window.innerWidth < 768) { | |
| document.getElementById('scrollContainer').scrollIntoView({behavior: 'smooth'}); | |
| } | |
| } | |
| function setTab(tab) { | |
| currentTab = tab; | |
| renderTabs(); | |
| renderTools(); | |
| } | |
| function handleSearch(query) { | |
| searchQuery = query; | |
| renderTools(); | |
| } | |
| function filterByTag(tag) { | |
| currentTab = tag; | |
| renderTabs(); | |
| renderTools(); | |
| } | |
| // --- MODAL LOGIC --- | |
| function openModal(tool) { | |
| const modal = document.getElementById('detailModal'); | |
| const backdrop = document.getElementById('modalBackdrop'); | |
| const panel = document.getElementById('modalPanel'); | |
| // Populate Data | |
| document.getElementById('modalTitle').innerText = tool.name; | |
| document.getElementById('modalCategory').innerText = translateCategory(tool.category); | |
| document.getElementById('modalDescription').innerText = tool.desc; | |
| document.getElementById('modalPricing').innerText = tool.pricing; | |
| document.getElementById('modalVisitBtn').href = tool.url; | |
| // Icon | |
| const iconContainer = document.getElementById('modalIconContainer'); | |
| iconContainer.innerHTML = `<i class="fa-solid ${tool.icon} text-3xl text-indigo-400"></i>`; | |
| // Lists | |
| const featuresList = document.getElementById('modalFeatures'); | |
| 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(''); | |
| const useCasesList = document.getElementById('modalUseCases'); | |
| 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(''); | |
| // Show Modal | |
| modal.classList.remove('hidden'); | |
| // Small delay for transition | |
| setTimeout(() => { | |
| backdrop.classList.remove('opacity-0'); | |
| panel.classList.remove('opacity-0', 'translate-y-4', 'sm:translate-y-0', 'sm:scale-95'); | |
| panel.classList.add('opacity-100', 'translate-y-0', 'sm:scale-100'); | |
| }, 10); | |
| } | |
| function closeModal() { | |
| const modal = document.getElementById('detailModal'); | |
| const backdrop = document.getElementById('modalBackdrop'); | |
| const panel = document.getElementById('modalPanel'); | |
| backdrop.classList.add('opacity-0'); | |
| panel.classList.remove('opacity-100', 'translate-y-0', 'sm:scale-100'); | |
| panel.classList.add('opacity-0', 'translate-y-4', 'sm:translate-y-0', 'sm:scale-95'); | |
| setTimeout(() => { | |
| modal.classList.add('hidden'); | |
| }, 300); | |
| } | |
| // Close modal on backdrop click | |
| document.getElementById('modalBackdrop').addEventListener('click', closeModal); | |
| document.addEventListener('keydown', (e) => { | |
| if (e.key === 'Escape') closeModal(); | |
| }); | |
| // --- HELPERS --- | |
| function translateCategory(cat) { | |
| const map = { | |
| 'Tümü': 'Tüm Kategoriler', | |
| 'LLM': 'Dil Modelleri (LLM)', | |
| 'Image': 'Görsel Üretimi', | |
| 'Video': 'Video Üretimi', | |
| 'Audio': 'Ses & Müzik', | |
| 'Code': 'Kodlama', | |
| 'Productivity': 'Verimlilik', | |
| 'Design': 'Tasarım', | |
| 'Research': 'Araştırma', | |
| 'Business': 'İş Dünyası' | |
| }; | |
| return map[cat] || cat; | |
| } | |
| </script> | |
| </body> | |
| </html> |