<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chat Online Raihan</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    body {
      background: #e5ddd5;
      font-family: Arial, sans-serif;
    }
    #chatArea {
      background: #f0f0f0;
    }
    .fade-in {
      animation: fadeIn 0.3s ease-in-out;
    }
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .preview-image {
      max-width: 100px;
      max-height: 100px;
      margin-top: 5px;
    }
  </style>
</head>
<body class="flex flex-col h-screen">

  <!-- Header -->
  <div class="flex items-center p-4 bg-green-600 text-white shadow-md">
    <div class="flex items-center">
      <img src="https://i.ibb.co.com/T086Qms/1726239392483.jpg" alt="Profile" class="w-10 h-10 rounded-full">
      <div class="ml-3">
        <p class="font-bold">Admin</p>
        <p class="text-sm text-green-200">Online</p>
      </div>
    </div>
    <div class="ml-auto flex space-x-4 text-xl">
      <i class="fas fa-phone-alt"></i>
      <i class="fas fa-video"></i>
      <i class="fas fa-ellipsis-v"></i>
    </div>
  </div>

  <!-- Chat Area -->
  <div id="chatArea" class="flex-1 overflow-y-auto p-4 space-y-3">
    <div class="bg-white text-gray-800 p-3 rounded-lg w-fit max-w-xs self-start fade-in shadow-sm">
      Halo! Selamat datang di layanan chat online kami. Anda akan terhubung langsung dengan admin.  
      <br><br>  
      Mohon sertakan nomor WhatsApp Anda agar kami dapat memberikan jawaban lebih cepat.  
      <br><br>  
      Terima kasih telah menghubungi kami!
    </div>
  </div>

  <!-- Input Section -->
  <div class="p-3 bg-white shadow-md">
    <input id="whatsappInput" type="text" placeholder="Masukkan nomor WhatsApp Anda..." 
           class="w-full p-3 mb-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-green-500 focus:outline-none">
    <div class="flex items-center space-x-3">
      <input id="messageInput" type="text" placeholder="Ketik pesan..." 
             class="flex-1 p-3 rounded-full bg-gray-100 border border-gray-300 focus:ring-2 focus:ring-green-500 focus:outline-none">
      <label for="fileInput" class="text-green-500 text-2xl cursor-pointer">
        <i class="fas fa-paperclip"></i>
        <input id="fileInput" type="file" class="hidden">
      </label>
      <button id="sendButton" class="text-green-500 text-2xl"><i class="fas fa-paper-plane"></i></button>
    </div>
    <div id="filePreview" class="mt-3"></div>
  </div>

  <!-- Footer -->
  <div class="p-3 text-center text-gray-500 text-sm bg-gray-100">
    &copy; 2024 <strong>Raihan_Official0307</strong>. All Rights Reserved.
  </div>

  <!-- Font Awesome for icons -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script>
</body>
</html>