|
|
 |
| Html Html Dersleri , Html Sohbet Temaları , Html Kodları , Html Renk Kodları ' na bu başlık altından ulaşabilirsiniz. |
| | Seçenekler | Stil |
18 Kasım 2024, 08:36
| #1 |
 |  Sitenize (forum,blog vb.) gelen ziyaretçilerinizin ortak sohbet edebileceği html pop-up butonu HTML-Kodu<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sohbet Pop-up</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Arial', sans-serif; background: #f4f4f9; height: 100vh; display: flex; justify-content: center; align-items: center; overflow-x: hidden; } .chat-button { position: fixed; bottom: 20px; right: 20px; background-color: #4CAF50; color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 24px; cursor: pointer; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); } .chat-popup { position: fixed; bottom: 90px; right: 20px; width: 350px; background: #fff; border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); display: none; flex-direction: column; overflow: hidden; } .chat-popup.active { display: flex; } .chat-header { background: #4CAF50; color: white; padding: 10px; text-align: center; font-size: 18px; font-weight: bold; border-top-left-radius: 10px; border-top-right-radius: 10px; } .chat-body { padding: 10px; flex: 1; overflow-y: auto; max-height: 300px; background-color: #f9f9f9; } .chat-footer { padding: 10px; display: flex; gap: 10px; background: #fff; } .chat-footer input { flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; } .chat-footer button { padding: 8px 12px; background: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 14px; } .message { margin-bottom: 10px; } .message span { font-weight: bold; color: #4CAF50; } .login-form { padding: 10px; text-align: center; display: flex; flex-direction: column; gap: 10px; background-color: #f9f9f9; } .login-form input { padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; } .login-form button { padding: 10px; background: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; } .login-form button:hover { background: #45a049; } </style> </head> <body> <!-- Sohbet Butonu --> <div class="chat-button" onclick="toggleChatPopup()">💬</div> <!-- Pop-up Sohbet --> <div class="chat-popup" id="chatPopup"> <div class="chat-header">Genel Sohbet</div> <div class="chat-body" id="chatBody"> <!-- Mesajlar burada gösterilecek --> </div> <div class="chat-footer" id="chatFooter" style="display: none;"> <input type="text" id="chatInput" placeholder="Mesajınızı yazın..."> <button onclick="sendMessage()">Gönder</button> </div> <div class="login-form" id="loginForm"> <input type="text" id="nickname" placeholder="Rumuz" required> <button onclick="joinChat()">Giriş Yap</button> </div> </div> <script> const chatPopup = document.getElementById('chatPopup'); const chatBody = document.getElementById('chatBody'); const chatFooter = document.getElementById('chatFooter'); const loginForm = document.getElementById('loginForm'); const nicknameInput = document.getElementById('nickname'); const chatInput = document.getElementById('chatInput'); let nickname = ''; function toggleChatPopup() { chatPopup.classList.toggle('active'); } function joinChat() { nickname = nicknameInput.value.trim(); if (nickname) { loginForm.style.display = 'none'; chatFooter.style.display = 'flex'; appendMessage('Sistem', `${nickname} sohbete katıldı!`); } else { alert('Lütfen bir rumuz girin!'); } } function sendMessage() { const message = chatInput.value.trim(); if (message) { appendMessage(nickname, message); chatInput.value = ''; } } function appendMessage(sender, message) { const messageElement = document.createElement('div'); messageElement.classList.add('message'); messageElement.innerHTML = `<span>${sender}:</span> ${message}`; chatBody.appendChild(messageElement); chatBody.scrollTop = chatBody.scrollHeight; } </script> </body> </html> Sohbet Butonu: Sağ alt köşede bulunan yeşil sohbet balonu butonuna tıklanarak pop-up sohbet penceresi açılır. Pop-Up Sohbet: Pop-up penceresi, sağ alt köşede açılır ve ekranın ortasında görünür. Kullanıcılar, bu pencereye rumuzlarıyla giriş yapabilir ve mesaj gönderebilirler. Genel Sohbet: Tüm kullanıcılar ile sohbet edilebilen bir platform sunar. Sistem, giriş yapan kullanıcıya hoş geldiniz mesajı gönderir. Kullanıcı Girişi: Kullanıcılar, rumuzlarını girerek sohbete katılırlar. Sohbet giriş formu ve mesaj gönderme alanı vardır. Mesajlaşma: Kullanıcılar, mesajlarını anında gönderebilirler. Gönderilen mesajlar, sohbet penceresinde görünür. Responsive Tasarım: Hem mobil cihazlarda hem de masaüstü cihazlarda düzgün çalışır. Nasıl Kullanılır? HTML Dosyasını Kaydedin: Yukarıdaki kodu bir .html dosyasına kaydedin. Geliştirme (Opsiyonel): Bu sohbet penceresinin gerçek zamanlı çalışması için bir backend (örneğin, Node.js ve WebSocket) ekleyebilirsiniz.    Not: Node.js ve WebSocket hakkında ilgili işe yarayacak bilgileri bir diğer konuda konu ilgilileri ile paylaşacağım. İyi forumlar. |
| |
| Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir) | |
| |
Normal
