|
|
<!DOCTYPE html>
|
|
|
<html lang="tr">
|
|
|
<head>
|
|
|
<meta charset="UTF-8" />
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
|
<title>Sohbet Chatbot</title>
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"/>
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/>
|
|
|
<link rel="stylesheet" href="/static/styles.css"/>
|
|
|
</head>
|
|
|
<body class="bg-gray-100 dark:bg-[#1e1e1e] text-gray-900 dark:text-gray-100 transition-colors duration-300">
|
|
|
<div class="flex h-screen">
|
|
|
|
|
|
<div id="sidebar" class="w-80 bg-white dark:bg-[#2a2a2a] shadow-lg p-5 absolute md:static z-20 h-full" role="navigation" aria-label="Sohbet Geçmişi">
|
|
|
|
|
|
<div class="flex items-center justify-between mb-6">
|
|
|
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">Sohbetler</h2>
|
|
|
<div class="flex items-center gap-2">
|
|
|
<button id="new-chat" class="text-indigo-600 hover:text-indigo-800 text-xl" title="Yeni Sohbet">
|
|
|
<i class="fas fa-plus-circle"></i>
|
|
|
</button>
|
|
|
<button id="toggle-theme" class="text-gray-600 hover:text-gray-800 dark:text-gray-300 text-xl ml-2" title="Tema Değiştir">
|
|
|
<i class="fas fa-moon"></i>
|
|
|
</button>
|
|
|
<button id="close-sidebar" class="md:hidden text-gray-600 hover:text-gray-800 dark:text-gray-300 text-xl" title="Kapat">
|
|
|
<i class="fas fa-times-circle"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="mb-4">
|
|
|
<input id="chat-search" type="text" placeholder="Sohbetlerde Ara..."
|
|
|
class="w-full p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 bg-white text-gray-800 dark:bg-gray-700 dark:text-white"
|
|
|
aria-label="Sohbet Arama">
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="mb-4">
|
|
|
<input id="username-input" type="text" placeholder="Kullanıcı Adı Girin"
|
|
|
class="w-full p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 bg-white text-gray-800 dark:bg-gray-700 dark:text-white"
|
|
|
aria-label="Kullanıcı Adı">
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="mb-4 relative">
|
|
|
<select id="theme-selector"
|
|
|
class="w-full p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 bg-white text-gray-800 dark:bg-gray-700 dark:text-white"
|
|
|
aria-label="Tema Seç">
|
|
|
<option value="default">Varsayılan Tema</option>
|
|
|
<option value="blue">Mavi Tema</option>
|
|
|
<option value="green">Yeşil Tema</option>
|
|
|
<option value="purple">Mor Tema</option>
|
|
|
<option value="red">Kırmızı Tema</option>
|
|
|
</select>
|
|
|
<div id="theme-preview" class="absolute w-4 h-4 rounded-full top-3 right-3"></div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="mb-4">
|
|
|
<select id="bubble-style" class="w-full p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" aria-label="Mesaj Balonu Stili">
|
|
|
<option value="rounded">Yuvarlak Kenarlı</option>
|
|
|
<option value="sharp">Keskin Kenarlı</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div id="chat-history" class="space-y-3" role="list" aria-label="Sohbet Geçmişi Listesi">
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="flex-1 flex flex-col">
|
|
|
|
|
|
<div class="bg-white dark:bg-[#2a2a2a] shadow p-4 flex justify-between items-center">
|
|
|
<button id="open-sidebar" class="md:hidden text-gray-600 hover:text-gray-800 dark:text-gray-300 ripple" aria-label="Sidebar'ı Aç">
|
|
|
<i class="fas fa-bars"></i>
|
|
|
</button>
|
|
|
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Chatbot 🤖</h1>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div id="chat-container" class="chat-container p-6 flex-1 bg-white dark:bg-[#1e1e1e]" role="main" aria-label="Sohbet Alanı">
|
|
|
<div id="messages" class="flex flex-col space-y-2"></div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-[#2a2a2a] p-4 shadow">
|
|
|
<div id="quick-replies" class="flex gap-2 mb-2 flex-wrap">
|
|
|
<button class="px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded-full text-sm hover:bg-gray-300 dark:hover:bg-gray-600 ripple" onclick="quickReply('Merhaba! 😊')">Merhaba!</button>
|
|
|
<button class="px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded-full text-sm hover:bg-gray-300 dark:hover:bg-gray-600 ripple" onclick="quickReply('Nasılsın?')">Nasılsın?</button>
|
|
|
<button class="px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded-full text-sm hover:bg-gray-300 dark:hover:bg-gray-600 ripple" onclick="quickReply('Teşekkürler!')">Teşekkürler!</button>
|
|
|
</div>
|
|
|
<form id="chat-form" class="flex items-center gap-3">
|
|
|
<div class="relative flex-1">
|
|
|
<input id="message-input" type="text" placeholder="Mesajınızı yazın... 😊" class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white" aria-label="Mesaj Girişi">
|
|
|
<button type="button" id="emoji-picker-btn" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700 ripple" aria-label="Emoji Seçici">
|
|
|
<i class="fas fa-smile"></i>
|
|
|
</button>
|
|
|
<div id="emoji-picker" class="hidden absolute bottom-14 right-0 bg-white dark:bg-gray-800 border rounded-lg p-3 shadow-xl max-w-sm z-10">
|
|
|
<div class="flex gap-2 flex-wrap text-xl">
|
|
|
<span class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 p-1 rounded" onclick="addEmoji('😊')">😊</span>
|
|
|
<span class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 p-1 rounded" onclick="addEmoji('😂')">😂</span>
|
|
|
<span class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 p-1 rounded" onclick="addEmoji('👍')">👍</span>
|
|
|
<span class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 p-1 rounded" onclick="addEmoji('❤️')">❤️</span>
|
|
|
<span class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 p-1 rounded" onclick="addEmoji('🚀')">🚀</span>
|
|
|
<span class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 p-1 rounded" onclick="addEmoji('🌟')">🌟</span>
|
|
|
<span class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 p-1 rounded" onclick="addEmoji('😎')">😎</span>
|
|
|
<span class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 p-1 rounded" onclick="addEmoji('🎉')">🎉</span>
|
|
|
<span class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 p-1 rounded" onclick="addEmoji('🙌')">🙌</span>
|
|
|
<span class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 p-1 rounded" onclick="addEmoji('🔥')">🔥</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<button type="submit" class="bg-indigo-600 text-white p-3 rounded-lg hover:bg-indigo-700 transition-colors ripple" aria-label="Mesaj Gönder">
|
|
|
<i class="fas fa-paper-plane"></i>
|
|
|
</button>
|
|
|
</form>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script src="/static/script.js"></script>
|
|
|
</body>
|
|
|
</html>
|
|
|
|
