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> Temanın Özellikleri
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.