Hugging Face's logo

Spaces:
OfisNet
/
anycoder-8b7062cc
Running

App Files Community
anycoder-8b7062cc / index.html
OfisNet's picture
OfisNet
Upload folder using huggingface_hub
9d4e714 verified
Raw History Blame Contribute Delete
25.7 kB
<!DOCTYPE html>
<html lang="tr">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Modern AI Chat Uygulaması</title>
 <!-- İkonlar için FontAwesome CDN -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
 /* --- GENEL AYARLAR & DEĞİŞKENLER --- */
 :root {
 --primary-color: #6c5ce7;
 --secondary-color: #a29bfe;
 --bg-color: #f0f2f5;
 --sidebar-bg: #ffffff;
 --chat-bg: #ffffff;
 --text-color: #2d3436;
 --text-light: #636e72;
 --message-user-bg: #6c5ce7;
 --message-user-text: #ffffff;
 --message-bot-bg: #dfe6e9;
 --message-bot-text: #2d3436;
 --shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
 --radius: 20px;
 --transition: all 0.3s ease;
 }
 /* Karanlık Mod Değişkenleri */
 [data-theme="dark"] {
 --bg-color: #1e272e;
 --sidebar-bg: #2d3436;
 --chat-bg: #2d3436;
 --text-color: #dfe6e9;
 --text-light: #b2bec3;
 --message-user-bg: #6c5ce7;
 --message-user-text: #ffffff;
 --message-bot-bg: #353b48;
 --message-bot-text: #dfe6e9;
 --shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
 }
 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 body {
 background-color: var(--bg-color);
 color: var(--text-color);
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
 overflow: hidden;
 transition: background-color 0.3s;
 }
 /* --- ANA KONTEYNER --- */
 .app-container {
 width: 95%;
 max-width: 1200px;
 height: 90vh;
 background-color: var(--sidebar-bg);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 display: flex;
 overflow: hidden;
 position: relative;
 }
 /* --- SIDEBAR (YAN MENÜ) --- */
 .sidebar {
 width: 300px;
 background-color: var(--sidebar-bg);
 border-right: 1px solid rgba(0,0,0,0.05);
 display: flex;
 flex-direction: column;
 transition: transform 0.3s ease;
 z-index: 100;
 }
 .sidebar-header {
 padding: 20px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 }
 .user-profile {
 display: flex;
 align-items: center;
 gap: 15px;
 }
 .avatar {
 width: 50px;
 height: 50px;
 border-radius: 50%;
 object-fit: cover;
 border: 2px solid var(--primary-color);
 }
 .user-info h3 {
 font-size: 1.1rem;
 font-weight: 600;
 }
 .user-info p {
 font-size: 0.85rem;
 color: var(--text-light);
 }
 .new-chat-btn {
 background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
 color: white;
 border: none;
 padding: 12px 20px;
 border-radius: 30px;
 margin: 0 20px 20px;
 cursor: pointer;
 font-weight: 600;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 box-shadow: 0 4px 10px rgba(108, 92, 231, 0.3);
 transition: transform 0.2s;
 }
 .new-chat-btn:hover {
 transform: scale(1.02);
 }
 .contact-list {
 flex: 1;
 overflow-y: auto;
 padding: 0 10px;
 }
 .contact-item {
 display: flex;
 align-items: center;
 padding: 15px;
 border-radius: 15px;
 cursor: pointer;
 transition: background-color 0.2s;
 margin-bottom: 5px;
 }
 .contact-item:hover, .contact-item.active {
 background-color: rgba(108, 92, 231, 0.1);
 }
 .contact-item img {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 margin-right: 15px;
 }
 .contact-details {
 flex: 1;
 }
 .contact-name {
 font-weight: 600;
 margin-bottom: 3px;
 display: flex;
 justify-content: space-between;
 }
 .last-msg {
 font-size: 0.85rem;
 color: var(--text-light);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 max-width: 160px;
 }
 .anycoder-link {
 text-align: center;
 padding: 15px;
 font-size: 0.75rem;
 color: var(--text-light);
 text-decoration: none;
 border-top: 1px solid rgba(0,0,0,0.05);
 }
.anycoder-link:hover {
 color: var(--primary-color);
 }
 /* --- CHAT ALANI --- */
 .chat-area {
 flex: 1;
 display: flex;
 flex-direction: column;
 background-color: var(--chat-bg);
 position: relative;
 }
 .chat-header {
 padding: 15px 25px;
 background-color: var(--sidebar-bg);
 border-bottom: 1px solid rgba(0,0,0,0.05);
 display: flex;
 justify-content: space-between;
 align-items: center;
 }
 .chat-header-info {
 display: flex;
 align-items: center;
 gap: 15px;
 }
 .back-btn {
 display: none; /* Mobilde görünür olacak */
 background: none;
 border: none;
 font-size: 1.2rem;
 color: var(--text-color);
 cursor: pointer;
 }
 .status-dot {
 width: 10px;
 height: 10px;
 background-color: #00b894;
 border-radius: 50%;
 display: inline-block;
 margin-right: 5px;
 }
 .theme-toggle {
 background: none;
 border: none;
 color: var(--text-color);
 font-size: 1.2rem;
 cursor: pointer;
 padding: 10px;
 border-radius: 50%;
 transition: var(--transition);
 }
 .theme-toggle:hover {
 background-color: rgba(0,0,0,0.05);
 }
 /* --- MESAJLAR ALANI --- */
 .messages-container {
 flex: 1;
 padding: 20px;
 overflow-y: auto;
 display: flex;
 flex-direction: column;
 gap: 15px;
 scroll-behavior: smooth;
 }
 .message {
 max-width: 70%;
 padding: 12px 18px;
 border-radius: 18px;
 position: relative;
 font-size: 0.95rem;
 line-height: 1.5;
 animation: fadeIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 word-wrap: break-word;
 }
 @keyframes fadeIn {
 from { opacity: 0; transform: translateY(10px); }
 to { opacity: 1; transform: translateY(0); }
 }
 .message.bot {
 align-self: flex-start;
 background-color: var(--message-bot-bg);
 color: var(--message-bot-text);
 border-bottom-left-radius: 5px;
 }
 .message.user {
 align-self: flex-end;
 background-color: var(--message-user-bg);
 color: var(--message-user-text);
 border-bottom-right-radius: 5px;
 }
 .message-time {
 font-size: 0.7rem;
 margin-top: 5px;
 opacity: 0.7;
 text-align: right;
 }
 /* --- YAZIYOR İNDİKATÖRÜ --- */
 .typing-indicator {
 display: none; /* Varsayılan gizli */
 align-self: flex-start;
 background-color: var(--message-bot-bg);
 padding: 12px 18px;
 border-radius: 18px;
 border-bottom-left-radius: 5px;
 margin-bottom: 10px;
 gap: 5px;
 align-items: center;
 }
 .dot {
 width: 8px;
 height: 8px;
 background-color: var(--text-light);
 border-radius: 50%;
 animation: bounce 1.4s infinite ease-in-out both;
 }
 .dot:nth-child(1) { animation-delay: -0.32s; }
 .dot:nth-child(2) { animation-delay: -0.16s; }
 @keyframes bounce {
 0%, 80%, 100% { transform: scale(0); }
 40% { transform: scale(1); }
 }
 /* --- GİRİŞ ALANI --- */
 .input-area {
 padding: 20px;
 background-color: var(--sidebar-bg);
 border-top: 1px solid rgba(0,0,0,0.05);
 display: flex;
 align-items: flex-end;
 gap: 10px;
 }
 .attach-btn {
 background: none;
 border: none;
 color: var(--text-light);
 font-size: 1.2rem;
 cursor: pointer;
 padding: 10px;
 transition: color 0.3s;
 }
 .attach-btn:hover {
 color: var(--primary-color);
 }
 .message-input {
 flex: 1;
 padding: 12px 15px;
 border: 1px solid rgba(0,0,0,0.1);
 border-radius: 25px;
 background-color: var(--bg-color);
 color: var(--text-color);
 font-size: 1rem;
 resize: none;
 max-height: 120px;
 outline: none;
 transition: border-color 0.3s;
 }
 .message-input:focus {
 border-color: var(--primary-color);
 }
 .send-btn {
 width: 45px;
 height: 45px;
 border-radius: 50%;
 background-color: var(--primary-color);
 color: white;
 border: none;
 cursor: pointer;
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 1.1rem;
 transition: transform 0.2s, background-color 0.3s;
 box-shadow: 0 4px 10px rgba(108, 92, 231, 0.3);
 }
 .send-btn:hover {
 transform: scale(1.05);
 background-color: #5649c0;
 }
 .send-btn:disabled {
 background-color: #ccc;
 cursor: not-allowed;
 transform: none;
 box-shadow: none;
 }
 /* --- TOAST BİLDİRİMİ --- */
 .toast {
 position: absolute;
 top: 20px;
 left: 50%;
 transform: translateX(-50%) translateY(-100px);
 background-color: #ff7675;
 color: white;
 padding: 10px 20px;
 border-radius: 20px;
 opacity: 0;
 transition: all 0.5s ease;
 z-index: 1000;
 box-shadow: 0 5px 15px rgba(0,0,0,0.2);
 }
 .toast.show {
 transform: translateX(-50%) translateY(0);
 opacity: 1;
 }
 /* --- YENİ MESAJ KUTUSU --- */
 .new-message-popup {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background: var(--sidebar-bg);
 padding: 30px;
 border-radius: 20px;
 box-shadow: 0 10px 40px rgba(0,0,0,0.2);
 text-align: center;
 display: none;
 z-index: 200;
 width: 80%;
 max-width: 400px;
 }
 .new-message-popup h2 {
 margin-bottom: 15px;
 color: var(--primary-color);
 }
 .btn-group {
 display: flex;
 gap: 10px;
 justify-content: center;
 margin-top: 20px;
 }
 .secondary-btn {
 background: transparent;
 border: 2px solid var(--primary-color);
 color: var(--primary-color);
 padding: 8px 20px;
 border-radius: 20px;
 cursor: pointer;
 font-weight: 600;
 }
 .secondary-btn:hover {
 background: var(--primary-color);
 color: white;
 }
 /* --- RESPONSIVE TASARIM --- */
 @media (max-width: 768px) {
 .app-container {
 width: 100%;
 height: 100%;
 border-radius: 0;
 }
 .sidebar {
 position: absolute;
 height: 100%;
 transform: translateX(-100%);
 }
 .sidebar.active {
 transform: translateX(0);
 }
 .back-btn {
 display: block;
 }
 .message {
 max-width: 85%;
 }
 }
 </style>
</head>
<body>
<div class="app-container">
 <!-- Bildirim Kutusu -->
 <div id="toast" class="toast">Lütfen bir mesaj giriniz!</div>
<!-- Yeni Mesaj Arayüzü -->
 <div id="newMessagePopup" class="new-message-popup">
 <h2>Yeni Sohbet Başlat</h2>
 <p>Hangi konuda sohbet etmeyi tercih edersiniz?</p>
 <div class="btn-group">
 <button class="secondary-btn" onclick="startNewChat('Teknoloji')">Teknoloji</button>
 <button class="secondary-btn" onclick="startNewChat('Eğlence')">Eğlence</button>
 <button class="secondary-btn" onclick="startNewChat('Soru')">Soru Cevapla</button>
 </div>
 </div>
<!-- Sidebar -->
 <aside class="sidebar" id="sidebar">
 <div class="sidebar-header">
 <div class="user-profile">
 <!-- Kullanıcı Avatarı -->
 <img src="https://picsum.photos/seed/user1/100/100" alt="Profil" class="avatar">
 <div class="user-info">
 <h3>Müşteri Hizmetleri</h3>
 <p><span class="status-dot"></span>Çevrimiçi</p>
 </div>
 </div>
 <button class="theme-toggle" id="themeToggle" title="Temayı Değiştir">
 <i class="fas fa-moon"></i>
 </button>
 </div>
<button class="new-chat-btn" onclick="showNewChatPopup()">
 <i class="fas fa-plus"></i> Yeni Sohbet
 </button>
<div class="contact-list" id="contactList">
 <!-- JS ile doldurulacak -->
 </div>
<a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
 Built with anycoder
 </a>
 </aside>
<!-- Chat Alanı -->
 <main class="chat-area">
 <header class="chat-header">
 <div class="chat-header-info">
 <button class="back-btn" id="backBtn">
 <i class="fas fa-arrow-left"></i>
 </button>
 <img src="https://picsum.photos/seed/ai/100/100" alt="AI Avatar" class="avatar" id="chatAvatar">
 <div>
 <h3 id="chatName">AI Asistan</h3>
 <p style="font-size: 0.8rem; color: var(--text-light);">Sürekli hazır</p>
 </div>
 </div>
 <div class="header-actions">
 <button class="theme-toggle" onclick="showNewChatPopup()">
 <i class="fas fa-comment-dots"></i>
 </button>
 </div>
 </header>
<div class="messages-container" id="messagesContainer">
 <!-- Mesajlar buraya eklenecek -->
 <div class="message bot">
 Merhaba! Ben AI Chat Asistanı. Size nasıl yardımcı olabilirim?
 <div class="message-time">Şimdi</div>
 </div>
 </div>
<!-- Yazıyor Göstergesi -->
 <div class="typing-indicator" id="typingIndicator">
 <div class="dot"></div>
 <div class="dot"></div>
 <div class="dot"></div>
 </div>
<div class="input-area">
 <button class="attach-btn" title="Dosya Ekle">
 <i class="fas fa-paperclip"></i>
 </button>
 <textarea id="messageInput" class="message-input" placeholder="Bir mesaj yazın..." rows="1"></textarea>
 <button class="send-btn" id="sendBtn">
 <i class="fas fa-paper-plane"></i>
 </button>
 </div>
 </main>
 </div>
<script>
 // --- DOM Elementleri Seçimi ---
 const messageInput = document.getElementById('messageInput');
 const sendBtn = document.getElementById('sendBtn');
 const messagesContainer = document.getElementById('messagesContainer');
 const typingIndicator = document.getElementById('typingIndicator');
 const themeToggle = document.getElementById('themeToggle');
 const contactList = document.getElementById('contactList');
 const sidebar = document.getElementById('sidebar');
 const backBtn = document.getElementById('backBtn');
 const newMessagePopup = document.getElementById('newMessagePopup');
 const toast = document.getElementById('toast');
 const chatName = document.getElementById('chatName');
 const chatAvatar = document.getElementById('chatAvatar');
 // --- Durum Yönetimi ---
 let isTyping = false;
 let isDarkMode = false;
 // --- Başlangıç Verileri ---
 const initialContacts = [
 { id: 1, name: "AI Asistan", lastMsg: "Harika bir gün dilerim!", img: "ai" },
 { id: 2, name: "Teknik Destek", lastMsg: "Sorununuz çözüldü mü?", img: "tech" },
 { id: 3, name: "Proje Ekip", lastMsg: "Toplantı saat 14:00'da.", img: "team" },
 { id: 4, name: "Haberler", lastMsg: "Yeni özellikler eklendi.", img: "news" }
 ];
 // --- Başlatma ---
 window.addEventListener('DOMContentLoaded', () => {
 renderContacts();
// Otomatik yükseklik ayarı için input event listener
 messageInput.addEventListener('input', function() {
 this.style.height = 'auto';
 this.style.height = (this.scrollHeight) + 'px';
 if(this.value === '') this.style.height = 'auto';
 });
 // Enter tuşu gönderme
 messageInput.addEventListener('keypress', (e) => {
 if (e.key === 'Enter' && !e.shiftKey) {
 e.preventDefault();
 sendMessage();
 }
 });
 sendBtn.addEventListener('click', sendMessage);
 themeToggle.addEventListener('click', toggleTheme);
 backBtn.addEventListener('click', closeSidebar);
 });
 // --- Tema Değiştirme ---
 function toggleTheme() {
 isDarkMode = !isDarkMode;
 if (isDarkMode) {
 document.documentElement.setAttribute('data-theme', 'dark');
 themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
 } else {
 document.documentElement.removeAttribute('data-theme');
 themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
 }
 }
 // --- Sidebar İşlemleri ---
 function renderContacts() {
 contactList.innerHTML = '';
 initialContacts.forEach(contact => {
 const div = document.createElement('div');
 div.className = 'contact-item';
 div.onclick = () => switchChat(contact);
 div.innerHTML = `
 <img src="https://picsum.photos/seed/${contact.img}/100/100" alt="${contact.name}">
 <div class="contact-details">
 <div class="contact-name">
 <span>${contact.name}</span>
 </div>
 <div class="last-msg">${contact.lastMsg}</div>
 </div>
 `;
 contactList.appendChild(div);
 });
 }
 function switchChat(contact) {
 chatName.innerText = contact.name;
 chatAvatar.src = `https://picsum.photos/seed/${contact.img}/100/100`;
// Mobilde sidebar'ı kapat
 if (window.innerWidth <= 768) {
 sidebar.classList.remove('active');
 }
 // Simüle edilmiş geçiş efekti
 messagesContainer.innerHTML = `
 <div class="message bot">
 Merhaba, ${contact.name}! Size nasıl yardımcı olabilirim?
 <div class="message-time">Şimdi</div>
 </div>
 `;
 }
 function closeSidebar() {
 sidebar.classList.remove('active');
 }
 function showNewChatPopup() {
 newMessagePopup.style.display = 'block';
 }
 function startNewChat(category) {
 newMessagePopup.style.display = 'none';
 chatName.innerText = "Yeni Sohbet: " + category;
 chatAvatar.src = `https://picsum.photos/seed/${category}/100/100`;
 messagesContainer.innerHTML = `
 <div class="message bot">
 Yeni ${category} sohbeti başlatıldı. İyi günler!
 <div class="message-time">Şimdi</div>
 </div>
 `;
 }
 // --- Mesaj Gönderme Mantığı ---
 function sendMessage() {
 const text = messageInput.value.trim();
if (!text) {
 showToast("Lütfen bir mesaj girin!");
 return;
 }
 // Kullanıcı mesajını ekle
 addMessage(text, 'user');
 messageInput.value = '';
 messageInput.style.height = 'auto'; // Yüksekliği sıfırla
 // Yazıyor efekti
 showTyping();
 // Bot yanıtını simüle et (rastgele gecikme)
 setTimeout(() => {
 hideTyping();
 const reply = generateBotReply(text);
 addMessage(reply, 'bot');
 }, 1500 + Math.random() * 1000);
 }
 function addMessage(text, sender) {
 const msgDiv = document.createElement('div');
 msgDiv.className = `message ${sender}`;
const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
msgDiv.innerHTML = `
 ${text}
 <div class="message-time">${time}</div>
 `;
messagesContainer.appendChild(msgDiv);
 scrollToBottom();
 }
 function scrollToBottom() {
 messagesContainer.scrollTop = messagesContainer.scrollHeight;
 }
 function showTyping() {
 isTyping = true;
 typingIndicator.style.display = 'flex';
 scrollToBottom();
 }
 function hideTyping() {
 isTyping = false;
 typingIndicator.style.display = 'none';
 }
 // --- Basit Bot Yanıt Mantığı ---
 function generateBotReply(userText) {
 const responses = [
 "Bu çok ilginç bir nokta! Bunu daha fazla detaylandırmamı ister misiniz?",
 "Anladım. Şu an size yardımcı olmaya çalışıyorum.",
 "Harika bir fikir! Bunu uygulayabiliriz.",
 "Hmm, buna benzer bir durumla daha önce karşılaştım.",
 "Kesinlikle. Size başka bir sorunuz var mı?",
 "Sanırım bu konuda fikirlerim kısıtlı ama yardımcı olmaya çalışıyorum.",
 "Tamamdır, not aldım."
 ];
// Bazı anahtar kelimelere özel yanıt
 if (userText.includes('merhaba') || userText.includes('selam')) return "Merhaba! Size nasıl yardımcı olabilirim?";
 if (userText.includes('nasılsın')) return "Ben bir yapay zekayım, o yüzden asla yorgun olmam! Siz nasılsınız?";
 if (userText.includes('teşekkürler')) return "Rica ederim, memnuniyetle daima buradayım.";
// Rastgele yanıt
 return responses[Math.floor(Math.random() * responses.length)];
 }
 // --- Toast Bildirimi ---
 function showToast(message) {
 toast.innerText = message;
 toast.classList.add('show');
 setTimeout(() => {
 toast.classList.remove('show');
 }, 3000);
 }
 // Mobilde sidebar açma için
 document.querySelector('.header-actions button').addEventListener('click', () => {
 if (window.innerWidth <= 768) {
 sidebar.classList.add('active');
 }
 });
 </script>
</body>
</html>