Spaces:
Running
Running
## 1. PROJE GENEL BAKIŞ ### 1.1 Amaç AsistanTR kişisel asistan uygulaması için Flutter ve Firebase kullanarak hızlı prototip geliştirerek temel AI asistan işlevselliğini göstermek ve sınırlı entegrasyonlarla kullanıcı deneyimini test etmek. ### 1.2 Kapsam - Doğal dil işleme ile metin tabanlı sohbet arayüzü - Firebase backend ile gerçek zamanlı veri senkronizasyonu - Statik demo yanıtları ile sahte takvim ve e-posta entegrasyonları - Temel görev yönetimi ve hatırlatıcı simülasyonu - AI destekli e-posta özetleme gösterimi ### 1.3 Başarı Kriterleri - Konuşma AI'sı ile işlevsel Flutter sohbet arayüzü - Çalışan görev oluşturma ve yönetim akışı - Demo içeriği ile e-posta özetleme - Hatırlatıcı bildirim simülasyonu - Sorunsuz mobil kullanıcı etkileşim deneyimi ## 2. UI ÖZELLİKLERİ VE SAYFA YAPISI ### 2.1 Sayfa Sayısı ve Yapısı **Toplam Sayfa: 5 Ana Sayfa + 3 Modal/Alt Sayfa = 8 Ekran** ### 2.2 Ana Sayfalar **1. Splash Screen (Yükleme Sayfası)** - **Süre:** 2-3 saniye - **İçerik:** AsistanTR logosu, loading animasyonu - **Geçiş:** Otomatik olarak ana sohbet ekranına **2. Chat Interface (Ana Sohbet Ekranı)** - **Layout:** Full-screen chat interface - **Bileşenler:** - AppBar: "AsistanTR" başlığı + ayarlar butonu - Message List: ScrollView ile mesaj listesi - Message Input: Alt kısımda text field + gönder butonu - Floating Action Button: Sesli mesaj (gelecek versiyon) **3. Task List (Görev Listesi)** - **Layout:** ListView.builder - **Bileşenler:** - AppBar: "Görevlerim" + yeni görev ekleme butonu - Task Cards: Her görev için Card widget - Filter Tabs: Tümü, Bekleyen, Tamamlanan - FAB: Hızlı görev ekleme **4. Reminders (Hatırlatıcılar)** - **Layout:** Timeline view - **Bileşenler:** - AppBar: "Hatırlatıcılar" - Timeline List: Tarih/saat sıralı liste - Add Reminder Button: Yeni hatırlatıcı ekleme **5. Settings (Ayarlar)** - **Layout:** ListView - **Bileşenler:** - Profile Section: Kullanıcı bilgileri - Preferences: Bildirim ayarları, dil seçimi - About: Uygulama bilgileri, versiyon ### 2.3 Modal/Alt Sayfalar **6. Task Detail Modal** - **Tür:** BottomSheet veya Dialog - **İçerik:** Görev detayları, düzenleme formu **7. Email Summarize Modal** - **Tür:** Full-screen modal - **İçerik:** E-posta text input + özet sonucu **8. Add Reminder Modal** - **Tür:** Dialog - **İçerik:** Datetime picker + reminder content input ### 2.4 UI/UX Tasarım Özellikleri **Ana Tasarım Sistemi:** - **Material Design 3** (Material You) temaları - **Koyu/Açık tema** desteği - **Sistem dilini** otomatik algılama (Türkçe/İngilizce) - **Responsive tasarım** (tablet/telefon uyumlu) - **Accessibility** (erişilebilirlik) özellikleri - Initial Deployment
5e9ba78 verified | <html lang="tr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AsistanTR - Kişisel Asistan</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| }, | |
| secondary: { | |
| 50: '#fdf2f8', | |
| 100: '#fce7f3', | |
| 200: '#fbcfe8', | |
| 300: '#f9a8d4', | |
| 400: '#f472b6', | |
| 500: '#ec4899', | |
| 600: '#db2777', | |
| 700: '#be185d', | |
| 800: '#9d174d', | |
| 900: '#831843', | |
| } | |
| }, | |
| boxShadow: { | |
| 'material': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', | |
| 'material-dark': '0 4px 6px -1px rgba(0, 0, 0, 0.25), 0 2px 4px -1px rgba(0, 0, 0, 0.15)' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'); | |
| body { | |
| font-family: 'Roboto', sans-serif; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| overflow: hidden; | |
| height: 100vh; | |
| } | |
| .chat-container { | |
| height: calc(100vh - 80px); | |
| } | |
| .message-animation { | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .chat-bubble { | |
| max-width: 85%; | |
| transition: all 0.2s ease; | |
| } | |
| .chat-bubble:hover { | |
| transform: translateY(-2px); | |
| } | |
| .send-btn:hover { | |
| transform: scale(1.1); | |
| } | |
| .dark .material-shadow { | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.25), 0 2px 4px -1px rgba(0, 0, 0, 0.15); | |
| } | |
| .light .material-shadow { | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| } | |
| .typing-indicator { | |
| display: inline-block; | |
| position: relative; | |
| width: 50px; | |
| height: 20px; | |
| } | |
| .typing-indicator span { | |
| position: absolute; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: #9ca3af; | |
| animation-timing-function: cubic-bezier(0, 1, 1, 0); | |
| } | |
| .typing-indicator span:nth-child(1) { | |
| left: 8px; | |
| animation: typing1 0.6s infinite; | |
| } | |
| .typing-indicator span:nth-child(2) { | |
| left: 8px; | |
| animation: typing2 0.6s infinite; | |
| } | |
| .typing-indicator span:nth-child(3) { | |
| left: 32px; | |
| animation: typing2 0.6s infinite; | |
| } | |
| .typing-indicator span:nth-child(4) { | |
| left: 56px; | |
| animation: typing3 0.6s infinite; | |
| } | |
| @keyframes typing1 { | |
| 0% { transform: scale(0); } | |
| 100% { transform: scale(1); } | |
| } | |
| @keyframes typing2 { | |
| 0% { transform: translate(0, 0); } | |
| 100% { transform: translate(24px, 0); } | |
| } | |
| @keyframes typing3 { | |
| 0% { transform: scale(1); } | |
| 100% { transform: scale(0); } | |
| } | |
| .slide-up { | |
| animation: slideUp 0.3s ease-out; | |
| } | |
| @keyframes slideUp { | |
| from { transform: translateY(100%); opacity: 0; } | |
| to { transform: translateY(0); opacity: 1; } | |
| } | |
| .message-list { | |
| scrollbar-width: thin; | |
| scrollbar-color: #c5c5c5 #f0f0f0; | |
| } | |
| .dark .message-list { | |
| scrollbar-color: #4b5563 #1f2937; | |
| } | |
| .message-list::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .message-list::-webkit-scrollbar-track { | |
| background: #f0f0f0; | |
| } | |
| .dark .message-list::-webkit-scrollbar-track { | |
| background: #1f2937; | |
| } | |
| .message-list::-webkit-scrollbar-thumb { | |
| background-color: #c5c5c5; | |
| border-radius: 20px; | |
| } | |
| .dark .message-list::-webkit-scrollbar-thumb { | |
| background-color: #4b5563; | |
| } | |
| .quick-action-btn { | |
| transition: all 0.2s ease; | |
| } | |
| .quick-action-btn:hover { | |
| transform: translateY(-3px); | |
| opacity: 0.9; | |
| } | |
| .accessibility-high-contrast { | |
| filter: contrast(140%); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-300"> | |
| <!-- App Bar --> | |
| <header class="bg-primary-600 text-white dark:bg-gray-800 shadow-md"> | |
| <div class="max-w-4xl mx-auto px-4 py-3 flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-white flex items-center justify-center"> | |
| <span class="text-primary-600 font-bold">A</span> | |
| </div> | |
| <h1 class="text-xl font-bold">AsistanTR</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="theme-toggle" class="p-2 rounded-full hover:bg-primary-700 dark:hover:bg-gray-700 transition-colors"> | |
| <i class="fas fa-moon dark:hidden"></i> | |
| <i class="fas fa-sun hidden dark:inline"></i> | |
| </button> | |
| <button id="settings-btn" class="p-2 rounded-full hover:bg-primary-700 dark:hover:bg-gray-700 transition-colors"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Chat Container --> | |
| <main class="chat-container overflow-hidden max-w-4xl mx-auto"> | |
| <!-- Messages Container --> | |
| <div class="message-list h-[calc(100%-70px)] overflow-y-auto p-4 space-y-4"> | |
| <!-- Welcome message --> | |
| <div class="chat-bubble rounded-tl-2xl rounded-tr-2xl rounded-br-2xl bg-primary-100 dark:bg-gray-700 p-4 self-start message-animation"> | |
| <div class="flex items-start space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-primary-500 flex-shrink-0 flex items-center justify-center"> | |
| <i class="fas fa-robot text-white"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-primary-800 dark:text-primary-200">AsistanTR</p> | |
| <p class="text-gray-700 dark:text-gray-200 mt-1">Merhaba! Ben AsistanTR. Size nasıl yardımcı olabilirim? Bugün için planlarınızı gözden geçirmek, randevu eklemek veya e-postalarınızı özetlemek için buradayım.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mt-6 mb-4"> | |
| <button class="quick-action-btn bg-primary-50 dark:bg-gray-700 rounded-xl p-3 flex flex-col items-center justify-center text-center hover:bg-primary-100 dark:hover:bg-gray-600 transition-colors"> | |
| <div class="w-10 h-10 rounded-full bg-primary-500 flex items-center justify-center mb-2"> | |
| <i class="fas fa-tasks text-white"></i> | |
| </div> | |
| <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Görev Ekle</span> | |
| </button> | |
| <button class="quick-action-btn bg-primary-50 dark:bg-gray-700 rounded-xl p-3 flex flex-col items-center justify-center text-center hover:bg-primary-100 dark:hover:bg-gray-600 transition-colors"> | |
| <div class="w-10 h-10 rounded-full bg-primary-500 flex items-center justify-center mb-2"> | |
| <i class="fas fa-calendar-alt text-white"></i> | |
| </div> | |
| <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Randevu Ekle</span> | |
| </button> | |
| <button class="quick-action-btn bg-primary-50 dark:bg-gray-700 rounded-xl p-3 flex flex-col items-center justify-center text-center hover:bg-primary-100 dark:hover:bg-gray-600 transition-colors"> | |
| <div class="w-10 h-10 rounded-full bg-primary-500 flex items-center justify-center mb-2"> | |
| <i class="fas fa-envelope text-white"></i> | |
| </div> | |
| <span class="text-sm font-medium text-gray-700 dark:text-gray-200">E-posta Özetle</span> | |
| </button> | |
| <button class="quick-action-btn bg-primary-50 dark:bg-gray-700 rounded-xl p-3 flex flex-col items-center justify-center text-center hover:bg-primary-100 dark:hover:bg-gray-600 transition-colors"> | |
| <div class="w-10 h-10 rounded-full bg-primary-500 flex items-center justify-center mb-2"> | |
| <i class="fas fa-bell text-white"></i> | |
| </div> | |
| <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Hatırlatıcı</span> | |
| </button> | |
| </div> | |
| <!-- Assistant Message --> | |
| <div class="chat-bubble rounded-tl-2xl rounded-tr-2xl rounded-br-2xl bg-primary-100 dark:bg-gray-700 p-4 self-start message-animation"> | |
| <div class="flex items-start space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-primary-500 flex-shrink-0 flex items-center justify-center"> | |
| <i class="fas fa-robot text-white"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-primary-800 dark:text-primary-200">AsistanTR</p> | |
| <p class="text-gray-700 dark:text-gray-200 mt-1">Bugün kontrol etmeniz gereken birkaç şey var:</p> | |
| <ul class="list-disc pl-5 mt-2 space-y-1"> | |
| <li>10:30'da doktor randevunuz var</li> | |
| <li>Öğleden sonra proje sunumuna hazırlanmalısınız</li> | |
| <li>Market alışverişi için hatırlatıcı ayarladım</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- User Message --> | |
| <div class="chat-bubble rounded-tl-2xl rounded-tr-2xl rounded-bl-2xl bg-gray-200 dark:bg-gray-700 p-4 self-end message-animation ml-auto"> | |
| <div class="flex items-start space-x-2"> | |
| <div> | |
| <p class="font-medium text-gray-800 dark:text-gray-200 text-right">Siz</p> | |
| <p class="text-gray-700 dark:text-gray-200 mt-1">Yarınki toplantı için saat kaçta hazır olmam gerekiyor?</p> | |
| </div> | |
| <div class="w-8 h-8 rounded-full bg-indigo-500 flex-shrink-0 flex items-center justify-center"> | |
| <i class="fas fa-user text-white"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Assistant Typing Indicator --> | |
| <div class="chat-bubble rounded-tl-2xl rounded-tr-2xl rounded-br-2xl bg-primary-100 dark:bg-gray-700 p-4 self-start message-animation"> | |
| <div class="flex items-start space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-primary-500 flex-shrink-0 flex items-center justify-center"> | |
| <i class="fas fa-robot text-white"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-primary-800 dark:text-primary-200">AsistanTR</p> | |
| <div class="typing-indicator mt-1"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Input Container --> | |
| <div class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 p-3"> | |
| <div class="max-w-4xl mx-auto flex items-center space-x-2"> | |
| <div class="flex-1 relative"> | |
| <input | |
| type="text" | |
| id="message-input" | |
| placeholder="AsistanTR'ye mesaj yazın..." | |
| class="w-full bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-full py-3 px-5 pl-12 focus:outline-none focus:ring-2 focus:ring-primary-500" | |
| aria-label="Mesaj girişi" | |
| > | |
| <button class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"> | |
| <i class="fas fa-plus-circle"></i> | |
| </button> | |
| </div> | |
| <button id="send-btn" class="send-btn w-12 h-12 flex items-center justify-center rounded-full bg-primary-500 hover:bg-primary-600 text-white shadow-md transition-all"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| <button class="voice-btn w-12 h-12 flex items-center justify-center rounded-full bg-white dark:bg-gray-700 text-primary-500 border border-gray-300 dark:border-gray-600 shadow-md hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"> | |
| <i class="fas fa-microphone"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Floating Action Button --> | |
| <button class="voice-fab fixed bottom-20 right-4 md:right-8 w-14 h-14 rounded-full bg-primary-500 hover:bg-primary-600 text-white shadow-lg flex items-center justify-center z-10"> | |
| <i class="fas fa-microphone text-xl"></i> | |
| </button> | |
| <!-- Settings Modal --> | |
| <div id="settings-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden items-center justify-center p-4"> | |
| <div class="bg-white dark:bg-gray-800 rounded-2xl w-full max-w-md slide-up material-shadow"> | |
| <div class="p-5 border-b border-gray-200 dark:border-gray-700"> | |
| <h3 class="text-xl font-bold text-gray-800 dark:text-white flex items-center"> | |
| <i class="fas fa-cog mr-2"></i> Ayarlar | |
| </h3> | |
| </div> | |
| <div class="p-5 space-y-4"> | |
| <div> | |
| <h4 class="font-medium text-gray-700 dark:text-gray-300 mb-2">Profil</h4> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-12 h-12 rounded-full bg-primary-500 flex items-center justify-center"> | |
| <i class="fas fa-user text-white"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium dark:text-white">Ahmet Yılmaz</p> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">ahmet@example.com</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-700 dark:text-gray-300 mb-2">Tercihler</h4> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-gray-600 dark:text-gray-400">Bildirimler</span> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary-600"></div> | |
| </label> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-gray-600 dark:text-gray-400">Koyu Tema</span> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input id="theme-toggle-modal" type="checkbox" class="sr-only peer"> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary-600"></div> | |
| </label> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-gray-600 dark:text-gray-400">Yüksek Kontrast</span> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer"> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary-600"></div> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-700 dark:text-gray-300 mb-2">Dil Seçimi</h4> | |
| <div class="flex space-x-2"> | |
| <button class="px-4 py-2 bg-primary-500 text-white rounded-full text-sm font-medium">Türkçe</button> | |
| <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full text-sm font-medium">English</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-5 border-t border-gray-200 dark:border-gray-700 flex justify-end"> | |
| <button id="close-settings" class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg font-medium hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"> | |
| Kapat | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Theme Toggle | |
| const themeToggleBtn = document.getElementById('theme-toggle'); | |
| const themeToggleModal = document.getElementById('theme-toggle-modal'); | |
| const body = document.body; | |
| // Check for saved theme preference or respect OS setting | |
| const savedTheme = localStorage.getItem('theme'); | |
| const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)'); | |
| if (savedTheme === 'dark' || (!savedTheme && prefersDarkScheme.matches)) { | |
| body.classList.add('dark'); | |
| if (themeToggleModal) themeToggleModal.checked = true; | |
| } | |
| themeToggleBtn.addEventListener('click', () => { | |
| body.classList.toggle('dark'); | |
| const isDarkMode = body.classList.contains('dark'); | |
| localStorage.setItem('theme', isDarkMode ? 'dark' : 'light'); | |
| if (themeToggleModal) themeToggleModal.checked = isDarkMode; | |
| }); | |
| if (themeToggleModal) { | |
| themeToggleModal.addEventListener('change', () => { | |
| body.classList.toggle('dark'); | |
| localStorage.setItem('theme', body.classList.contains('dark') ? 'dark' : 'light'); | |
| }); | |
| } | |
| // Settings Modal | |
| const settingsModal = document.getElementById('settings-modal'); | |
| const settingsBtn = document.getElementById('settings-btn'); | |
| const closeSettings = document.getElementById('close-settings'); | |
| settingsBtn.addEventListener('click', () => { | |
| settingsModal.classList.remove('hidden'); | |
| settingsModal.classList.add('flex'); | |
| }); | |
| closeSettings.addEventListener('click', () => { | |
| settingsModal.classList.add('hidden'); | |
| settingsModal.classList.remove('flex'); | |
| }); | |
| // Click outside to close modal | |
| settingsModal.addEventListener('click', (e) => { | |
| if (e.target === settingsModal) { | |
| settingsModal.classList.add('hidden'); | |
| settingsModal.classList.remove('flex'); | |
| } | |
| }); | |
| // Chat functionality | |
| const messageInput = document.getElementById('message-input'); | |
| const sendBtn = document.getElementById('send-btn'); | |
| const messageList = document.querySelector('.message-list'); | |
| function createMessage(content, sender) { | |
| const isAssistant = sender === 'assistant'; | |
| const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.classList.add('chat-bubble', 'rounded-tl-2xl', 'rounded-tr-2xl', 'message-animation'); | |
| messageDiv.classList.add(isAssistant ? 'bg-primary-100' : 'bg-gray-200', 'dark:bg-gray-700'); | |
| messageDiv.classList.add(isAssistant ? 'self-start' : 'self-end', 'ml-auto'); | |
| messageDiv.classList.add(isAssistant ? 'rounded-br-2xl' : 'rounded-bl-2xl'); | |
| messageDiv.innerHTML = ` | |
| <div class="flex items-start space-x-2 ${isAssistant ? '' : 'flex-row-reverse'}"> | |
| ${isAssistant ? | |
| `<div class="w-8 h-8 rounded-full bg-primary-500 flex-shrink-0 flex items-center justify-center"> | |
| <i class="fas fa-robot text-white"></i> | |
| </div>` : | |
| `<div class="w-8 h-8 rounded-full bg-indigo-500 flex-shrink-0 flex items-center justify-center"> | |
| <i class="fas fa-user text-white"></i> | |
| </div>` | |
| } | |
| <div class="${isAssistant ? '' : 'text-right'}"> | |
| <p class="font-medium ${isAssistant ? 'text-primary-800 dark:text-primary-200' : 'text-gray-800 dark:text-gray-200'}">${isAssistant ? 'AsistanTR' : 'Siz'}</p> | |
| <p class="text-gray-700 dark:text-gray-200 mt-1">${content}</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">${time}</p> | |
| </div> | |
| </div> | |
| `; | |
| return messageDiv; | |
| } | |
| function simulateTyping() { | |
| const typingIndicator = document.createElement('div'); | |
| typingIndicator.classList.add('chat-bubble', 'rounded-tl-2xl', 'rounded-tr-2xl', 'rounded-br-2xl', 'bg-primary-100', 'dark:bg-gray-700', 'p-4', 'self-start', 'message-animation'); | |
| typingIndicator.innerHTML = ` | |
| <div class="flex items-start space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-primary-500 flex-shrink-0 flex items-center justify-center"> | |
| <i class="fas fa-robot text-white"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-primary-800 dark:text-primary-200">AsistanTR</p> | |
| <div class="typing-indicator mt-1"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| messageList.appendChild(typingIndicator); | |
| messageList.scrollTop = messageList.scrollHeight; | |
| return typingIndicator; | |
| } | |
| function simulateResponse(message) { | |
| let response; | |
| if (message.toLowerCase().includes('merhaba') || message.toLowerCase().includes('selam')) { | |
| response = 'Merhaba! Size nasıl yardımcı olabilirim?'; | |
| } else if (message.toLowerCase().includes('görev') || message.toLowerCase().includes('yapılacak')) { | |
| response = 'Görevleriniz şu şekilde:\n1. Proje raporunu tamamla (Bugün)\n2. Faturaları öde (Yarın)\n3. Takım toplantısı (Cuma)'; | |
| } else if (message.toLowerCase().includes('randevu') || message.toLowerCase().includes('toplantı')) { | |
| response = 'Yarın 14:00-15:30 arasında müşteri toplantınız var. Konferans salonu 3 rezerve edildi.'; | |
| } else if (message.toLowerCase().includes('hava') || message.toLowerCase().includes('hava durumu')) { | |
| response = 'Bugün İstanbul için hava durumu: Parçalı bulutlu, en yüksek 24°C, en düşük 18°C. Rüzgar kuzeybatı yönünde saatte 10 km.'; | |
| } else if (message.toLowerCase().includes('mail') || message.toLowerCase().includes('e-posta')) { | |
| response = 'Son 24 saatte 12 yeni e-postanız var. Acil olanlar:\n• Proje teklif onayı\n• Müşteri şikayeti\n• Ekibin haftalık raporu\nE-posta özeti için "E-posta Özetle" butonuna tıklayabilirsiniz.'; | |
| } else { | |
| const responses = [ | |
| 'Anladım. Bununla ilgili size nasıl yardımcı olabilirim?', | |
| 'Bu konuda daha fazla bilgi verebilir misiniz?', | |
| 'Bu talebinizi yerine getirebilirim. Hemen işleme alıyorum.', | |
| 'İşleminiz tamamlandı. Başka bir konuda yardımcı olabilir miyim?', | |
| 'Bunu sizin için yapabilirim. Lütfen biraz bekleyin.' | |
| ]; | |
| response = responses[Math.floor(Math.random() * responses.length)]; | |
| } | |
| // Remove typing indicator | |
| const typingIndicator = document.querySelector('.chat-bubble .typing-indicator'); | |
| if (typingIndicator && typingIndicator.parentElement) { | |
| typingIndicator.parentElement.parentElement.parentElement.remove(); | |
| } | |
| const responseDiv = createMessage(response, 'assistant'); | |
| messageList.appendChild(responseDiv); | |
| messageList.scrollTop = messageList.scrollHeight; | |
| } | |
| sendBtn.addEventListener('click', () => { | |
| const message = messageInput.value.trim(); | |
| if (!message) return; | |
| // Create user message | |
| const userMessage = createMessage(message, 'user'); | |
| messageList.appendChild(userMessage); | |
| messageList.scrollTop = messageList.scrollHeight; | |
| // Clear input | |
| messageInput.value = ''; | |
| // Simulate typing | |
| setTimeout(() => { | |
| const typing = simulateTyping(); | |
| messageList.scrollTop = messageList.scrollHeight; | |
| // Simulate response after delay | |
| setTimeout(() => { | |
| simulateResponse(message); | |
| }, 2000); | |
| }, 500); | |
| }); | |
| messageInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| sendBtn.click(); | |
| } | |
| }); | |
| // Quick action buttons | |
| const quickActions = document.querySelectorAll('.quick-action-btn'); | |
| quickActions.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| const action = btn.querySelector('span').textContent; | |
| messageInput.value = action; | |
| setTimeout(() => { | |
| sendBtn.click(); | |
| }, 300); | |
| }); | |
| }); | |
| // Initial scroll to bottom | |
| window.addEventListener('load', () => { | |
| messageList.scrollTop = messageList.scrollHeight; | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=halimskarr/ui4" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |