<!-- index.html --><!DOCTYPE html><html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>چت خصوصی دخترونه 💖</title>
<link href="https://fonts.googleapis.com/css2?family=Vazirmatn&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Vazirmatn', sans-serif;
background: linear-gradient(to right, #ff9a9e, #fad0c4);
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.chat-container {
width: 100%;
max-width: 400px;
background: #fff0f5;
border-radius: 20px;
box-shadow: 0 0 20px rgba(255, 105, 180, 0.4);
padding: 20px;
display: flex;
flex-direction: column;
}
.messages {
flex-grow: 1;
overflow-y: auto;
margin-bottom: 10px;
padding: 10px;
border: 2px dashed #ff69b4;
border-radius: 10px;
background-color: #fff;
}
.input-container {
display: flex;
gap: 10px;
}
input\[type="text"\] {
flex-grow: 1;
padding: 10px;
border: 1px solid #ff69b4;
border-radius: 10px;
font-size: 1em;
}
button {
padding: 10px 15px;
background-color: #ff69b4;
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="chat-container">
\<div class="messages" id="messages"\>\</div\>
\<div class="input-container"\>
\<input type="text" id="messageInput" placeholder="پیام بنویس..."\>
\<button onclick="sendMessage()"\>ارسال\</button\>
\</div\>
</div> <script src="https://cdn.socket.io/4.5.0/socket.io.min.js"></script> <script>
const socket = io();
const messages = document.getElementById('messages');
const input = document.getElementById('messageInput');
function sendMessage() {
const msg = input.value;
if (msg.trim() !== '') {
socket.emit('chat message', msg);
input.value = '';
}
}
socket.on('chat message', function(msg) {
const div = document.createElement('div');
div.textContent = msg;
messages.appendChild(div);
messages.scrollTop = messages.scrollHeight;
});
input.addEventListener('keypress', function(e) {
if (e.key === 'Enter') sendMessage();
});
</script></body>
</html>