<!DOCTYPE html>

<html lang="ar">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>مراسلة ويب</title>

  <style>
    :root {
      --primary-color: #25D366;
      --background-color: #e5ddd5;
    }

    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: var(--background-color);
    }

    .app-container {
      display: flex;
      height: 100vh;
      max-width: 1400px;
      margin: 0 auto;
    }

    /* قائمة الدردشات */
    .chat-list {
      width: 30%;
      background-color: white;
      border-right: 1px solid #ddd;
    }

    .chat-item {
      display: flex;
      align-items: center;
      padding: 15px;
      border-bottom: 1px solid #eee;
      cursor: pointer;
    }

    .chat-item:hover {
      background-color: #f5f5f5;
    }

    .user-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 15px;
    }

    /* منطقة الدردشة الرئيسية */
    .chat-window {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .chat-header {
      background-color: #ededed;
      padding: 15px;
      display: flex;
      align-items: center;
    }

    .message-container {
      flex: 1;
      padding: 20px;
      overflow-y: auto;
    }

    .message {
      margin-bottom: 15px;
      display: flex;
      align-items: flex-start;
    }

    .message.sent {
      justify-content: flex-end;
    }

    .message-content {
      max-width: 60%;
      padding: 10px 15px;
      border-radius: 7px;
      background-color: white;
    }

    .message.sent .message-content {
      background-color: var(--primary-color);
      color: white;
    }

    .message-time {
      font-size: 12px;
      color: #666;
      margin-top: 5px;
    }

    /* منطقة إدخال الرسالة */
    .message-input {
      background-color: #f0f0f0;
      padding: 15px;
      display: flex;
      gap: 10px;
    }

    input[type="text"] {
      flex: 1;
      padding: 12px;
      border: none;
      border-radius: 21px;
      outline: none;
    }

    button {
      background-color: var(--primary-color);
      color: white;
      border: none;
      padding: 12px 25px;
      border-radius: 21px;
      cursor: pointer;
    }

    /* حالة الاتصال */
    .online-status {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #34B7F1;
      margin-left: auto;
    }
  </style>

</head>

<body>

  <div class="app-container">

    <!-- قائمة الدردشات -->

    <div class="chat-list">

      <div class="chat-item">

        <img src="https://via.placeholder.com/50" class="user-avatar" alt="صورة المستخدم">

        <div>

          <h4>محمد أحمد</h4>

          <p>آخر رسالة...</p>

        </div>

        <div class="online-status"></div>

      </div>

      <!-- يمكن إضافة المزيد من الدردشات هنا -->

    </div>

    <!-- نافذة الدردشة الرئيسية -->

    <div class="chat-window">

      <div class="chat-header">

        <img src="https://via.placeholder.com/50" class="user-avatar" alt="صورة المستخدم">

        <div>

          <h3>محمد أحمد</h3>

          <p>متصل الآن</p>

        </div>

      </div>

      <div class="message-container" id="messages">

        <!-- الرسائل السابقة -->

        <div class="message received">

          <div class="message-content">

            <p>مرحبا! كيف الحال؟</p>

            <span class="message-time">10:30 ص</span>

          </div>

        </div>

        <div class="message sent">

          <div class="message-content">

            <p>الحمد لله، كل شيء بخير</p>

            <span class="message-time">10:31 ص</span>

          </div>

        </div>

      </div>

      <!-- منطقة إرسال الرسائل -->

      <div class="message-input">

        <input type="text" placeholder="اكتب رسالة..." id="messageInput">

        <button onclick="sendMessage()">إرسال</button>

      </div>

    </div>

  </div>

  <script>
    // محاكاة قاعدة بيانات بسيطة
    let messages = [];

    function sendMessage() {
      const input = document.getElementById('messageInput');
      const message = input.value.trim();
      if (message) {
        const timestamp = new Date().toLocaleTimeString([], {
          hour: '2-digit',
          minute: '2-digit'
        });
        // إضافة الرسالة إلى الواجهة
        const messagesContainer = document.getElementById('messages');
        messagesContainer.innerHTML += `

                    <div class="message sent">

                        <div class="message-content">

                            <p>${message}</p>

                            <span class="message-time">${timestamp}</span>

                        </div>

                    </div>

                `;
        // مسح حقل الإدخال
        input.value = '';
        // التمرير التلقائي إلى الأسفل
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
        // (في التطبيق الحقيقي: إرسال الرسالة إلى الخادم)
      }
    }
    // دعم إرسال الرسالة بالضغط على Enter
    document.getElementById('messageInput').addEventListener('keypress', function(e) {
      if (e.key === 'Enter') {
        sendMessage();
      }
    });
  </script>

</body>

</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.