<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yapay Zeka Sohbet Botu</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f9;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            overflow: hidden;
        }

        .chat-container {
            background-color: #fff;
            border-radius: 10px;
            width: 450px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            animation: fadeIn 1s ease-in-out;
        }

        .chat-box {
            height: 350px;
            overflow-y: auto;
            border-radius: 10px;
            background-color: #f9f9f9;
            padding: 15px;
            margin-bottom: 20px;
            box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .user-message, .bot-message {
            margin-bottom: 12px;
            padding: 8px;
            border-radius: 8px;
            max-width: 80%;
            font-size: 14px;
            line-height: 1.5;
        }

        .user-message {
            background-color: #c6f7c1;
            color: #2d6a4f;
            text-align: right;
            margin-left: auto;
            border-radius: 12px 12px 0 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .bot-message {
            background-color: #a7c7e7;
            color: #1d3557;
            text-align: left;
            margin-right: auto;
            border-radius: 12px 12px 12px 0;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .input-container {
            display: flex;
            padding: 10px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
        }

        input[type="text"] {
            width: 85%;
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            transition: border 0.3s ease;
        }

        input[type="text"]:focus {
            border-color: #4CAF50;
        }

        button {
            width: 15%;
            padding: 12px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #45a049;
        }

        @keyframes fadeIn {
            0% { opacity: 0; transform: translateY(-50px); }
            100% { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body>

<div class="chat-container">
    <div class="chat-box" id="chat-box">
        <!-- Sohbet burada gösterilecek -->
    </div>
    <div class="input-container">
        <input type="text" id="user-input" placeholder="Mesajınızı yazın..." />
        <button onclick="sendMessage()">Gönder</button>
    </div>
</div>

<script>
    // Yazma efekti fonksiyonu
    function typeMessage(message, element, callback) {
        let i = 0;
        element.textContent = '';  // Başlangıçta mesajı boş bırak
        const typingInterval = setInterval(() => {
            if (i < message.length) {
                element.textContent += message.charAt(i); // Mesajın bir karakterini ekle
                i++;
            } else {
                clearInterval(typingInterval); // Mesaj bitince interval'i temizle
                if (callback) callback(); // Callback fonksiyonunu çalıştır (örneğin, daha fazla işlem yapmak için)
            }
        }, 20); // Her bir harfi 20ms aralıklarla yaz
    }

    // Kullanıcıdan alınan mesaja göre cevap verme
    function sendMessage() {
        const userInput = document.getElementById('user-input').value;
        if (userInput.trim() === '') return; // Boş mesaj gönderilmesini engeller

        // Kullanıcı mesajını ekle
        const chatBox = document.getElementById('chat-box');
        const userMessage = document.createElement('div');
        userMessage.classList.add('user-message');
        userMessage.textContent = 'You: ' + userInput;
        chatBox.appendChild(userMessage);

        // Bot yanıtını simüle et
        const botMessage = document.createElement('div');
        botMessage.classList.add('bot-message');

        // Mesaj eşleştirme
        if (userInput.toLowerCase().includes("sa")) {
            typeMessage('Bot: as', botMessage, () => {
                chatBox.appendChild(botMessage);
                chatBox.scrollTop = chatBox.scrollHeight; // Sohbet kutusunu en alta kaydır
            });
        } else if (userInput.toLowerCase().includes("bana pythondan bir menü yap")) {
            // Python menüsü kodunu txt dosyası olarak indir
            const pythonCode = `
# Python Menü Örneği

def main_menu():
    print("1. Hesap Makinesi")
    print("2. Çıkış")
    choice = input("Seçiminizi yapın: ")
    
    if choice == "1":
        calculator()
    elif choice == "2":
        print("Çıkılıyor...")
    else:
        print("Geçersiz seçenek!")
        main_menu()

def calculator():
    print("Hesap Makinesi")
    num1 = float(input("Birinci sayıyı girin: "))
    num2 = float(input("İkinci sayıyı girin: "))
    operation = input("İşlem seçin (+, -, *, /): ")
    
    if operation == "+":
        print(f"Sonuç: {num1 + num2}")
    elif operation == "-":
        print(f"Sonuç: {num1 - num2}")
    elif operation == "*":
        print(f"Sonuç: {num1 * num2}")
    elif operation == "/":
        print(f"Sonuç: {num1 / num2}")
    else:
        print("Geçersiz işlem!")
    main_menu()

main_menu()
            `;

            // Dosya indir linki oluşturma
            const blob = new Blob([pythonCode], { type: 'text/plain' });
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = 'python_menu.txt'; // İndirilecek dosyanın adı
            link.click();

            // Botun cevap mesajını yazdır
            typeMessage('Bot: Python menüsünü içeren bir dosya indiriliyor...', botMessage, () => {
                chatBox.appendChild(botMessage);
                chatBox.scrollTop = chatBox.scrollHeight; // Sohbet kutusunu en alta kaydır
            });
        } else if (userInput.toLowerCase().includes("nasılsın")) {
            typeMessage('Bot: Ben bir yapay zeka, her zaman iyiyim!', botMessage, () => {
                chatBox.appendChild(botMessage);
                chatBox.scrollTop = chatBox.scrollHeight; // Sohbet kutusunu en alta kaydır
            });
        } else {
            typeMessage('Bot: Anlamadım, tekrar eder misiniz?', botMessage, () => {
                chatBox.appendChild(botMessage);
                chatBox.scrollTop = chatBox.scrollHeight; // Sohbet kutusunu en alta kaydır
            });
        }

        // Kullanıcı girişini temizle
        document.getElementById('user-input').value = '';
    }
</script>

</body>
</html>