ubah tampilannya <!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Filter User ID dan WhatsApp dengan Tampilan Elegan</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    @keyframes lightning {
      0%, 100% { opacity: 0; }
      10%, 30%, 50%, 70%, 90% { opacity: 1; }
      20%, 40%, 60%, 80% { opacity: 0.3; }
    }
    
    .lightning {
      position: absolute;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
      animation: lightning 4s infinite;
      pointer-events: none;
      z-index: 10;
      top: 0;
      left: 0;
    }
    
    .lightning-bolt {
      position: absolute;
      width: 40px;
      height: 80px;
      background: linear-gradient(90deg, #ffeb3b, #ffc107);
      clip-path: polygon(50% 0%, 0% 100%, 30% 100%, 50% 60%, 70% 100%, 100% 100%);
      animation: strike 3s infinite;
      opacity: 0;
      z-index: 5;
    }
    
    @keyframes strike {
      0%, 100% { transform: translateY(-100px) scale(0.5); opacity: 0; }
      5% { opacity: 0.8; }
      10% { transform: translateY(50px) scale(1.2); opacity: 1; }
      15% { opacity: 0; }
    }
    
    .btn-wa {
      transition: all 0.3s ease;
    }
    
    .btn-wa:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(34, 197, 94, 0.5);
    }
    
    /* Table zebra stripes and hover */
    table tr:nth-child(even) {
      background-color: #f9fafb; /* Tailwind gray-50 */
    }
    
    table tr:hover {
      background-color: #e6f4ea; /* soft green highlight */
      transition: background-color 0.3s ease;
    }
  </style>
</head>
<body class="bg-gray-50 min-h-screen p-4 md:p-8 relative overflow-x-hidden">
  <div class="lightning"></div>
  
  <!-- Random lightning bolts positioned around the screen -->
  <div class="lightning-bolt" style="left: 10%; top: 15%;"></div>
  <div class="lightning-bolt" style="left: 30%; top: 25%; animation-delay: 1s;"></div>
  <div class="lightning-bolt" style="left: 70%; top: 10%; animation-delay: 2s;"></div>
  <div class="lightning-bolt" style="left: 85%; top: 30%; animation-delay: 0.5s;"></div>
  
  <div class="max-w-4xl mx-auto bg-white rounded-2xl shadow-lg overflow-hidden p-8 relative z-0 border border-gray-200">
    <div class="text-center mb-8">
      <h1 class="text-4xl font-extrabold text-gray-900 mb-3">Filter User ID dan WhatsApp</h1>
      <div class="w-24 h-1 bg-yellow-400 mx-auto rounded-full mb-4"></div>
      <p class="text-gray-600 max-w-xl mx-auto leading-relaxed">Masukkan data User ID dan Nomor WhatsApp untuk memfilter dan menghasilkan link chat. Format: <code class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded font-mono">userId nomorWA</code></p>
    </div>
    
    <div class="bg-yellow-50 border-l-4 border-yellow-400 p-5 mb-6 rounded-lg shadow-sm flex items-start space-x-3">
      <svg class="h-6 w-6 text-yellow-500 flex-shrink-0 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m6-7h-6m5 0v4a4 4 0 01-8 0V5a4 4 0 018 0z" />
      </svg>
      <p class="text-yellow-700 text-sm sm:text-base leading-relaxed">
        Format per baris: <code class="bg-yellow-100 px-2 py-1 rounded font-mono">userId nomorWA</code> (pisahkan spasi atau tab). Contoh:<br />
        <code class="bg-gray-100 px-2 py-1 rounded font-mono">user123 6281234567890</code><br />
        <code class="bg-gray-100 px-2 py-1 rounded font-mono">abc456 6289876543210</code>
      </p>
    </div>
    
    <textarea id="inputData" class="w-full h-40 p-4 border border-gray-300 rounded-lg focus:ring-4 focus:ring-yellow-400 focus:border-yellow-400 shadow-sm text-gray-900 font-mono text-base" placeholder="userId nomorWA per baris..."></textarea>
    
    <div class="mt-6 flex justify-center">
      <button id="filterBtn" class="inline-flex items-center px-8 py-3 bg-yellow-500 text-white font-semibold rounded-lg shadow-md hover:bg-yellow-600 focus:outline-none focus:ring-4 focus:ring-yellow-400 transition transform hover:scale-105 select-none">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M3 3v6a4 4 0 004 4h10a4 4 0 004-4V3M16 14l-4 4m0 0l-4-4m4 4V10" />
        </svg>
        Filter Data
      </button>
    </div>
    
    <div class="result mt-10" id="resultContainer"></div>
  </div>

  <script>
    const filterBtn = document.getElementById('filterBtn');
    const inputData = document.getElementById('inputData');
    const resultContainer = document.getElementById('resultContainer');

    function isValidWhatsappNumber(number) {
      // Nomor digit saja, minimal 9 digit dan mulai dari 62 (Indonesia)
      return /^\d+$/.test(number) && number.length >= 9 && number.startsWith('62');
    }

    filterBtn.addEventListener('click', () => {
      const text = inputData.value.trim();
      resultContainer.innerHTML = '';

      if (!text) {
        alert('Input masih kosong.');
        return;
      }

      const lines = text.split('\n');
      const filteredUsers = [];

      lines.forEach(line => {
        const parts = line.trim().split(/\s+/);
        if (parts.length >= 2) {
          const userId = parts[0];
          const waNumber = parts[1];
          if (isValidWhatsappNumber(waNumber)) {
            filteredUsers.push({ userId, waNumber });
          }
        }
      });

      if (filteredUsers.length === 0) {
        resultContainer.innerHTML = `
          <div class="bg-red-50 border-l-4 border-red-400 p-5 rounded-lg shadow-sm flex items-start space-x-3">
            <svg class="h-6 w-6 text-red-500 flex-shrink-0 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M10 18a8 8 0 100-16 8 8 0 000 16zm-1-4h2m0-4h-2m0 8h2" />
            </svg>
            <p class="text-red-700 text-sm sm:text-base leading-relaxed">
              Tidak ditemukan data valid. Pastikan format input sesuai contoh dan nomor dimulai dengan kode negara (contoh: 62).
            </p>
          </div>
        `;
        return;
      }

      // Success message
      const successMsg = document.createElement('div');
      successMsg.className = 'bg-green-50 border-l-4 border-green-400 p-5 rounded-lg shadow-sm flex items-start space-x-3 mb-8';
      successMsg.innerHTML = `
        <svg class="h-6 w-6 text-green-500 flex-shrink-0 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2l4-4m6 2a9 9 0 11-18 0a9 9 0 0118 0z" />
        </svg>
        <p class="text-green-700 text-sm sm:text-base leading-relaxed">
          <span class="font-semibold">${filteredUsers.length}</span> data valid ditemukan dan berhasil difilter.
        </p>
      `;
      resultContainer.appendChild(successMsg);

      // Table container
      const tableWrapper = document.createElement('div');
      tableWrapper.className = 'overflow-x-auto rounded-lg shadow border border-gray-200';

      const table = document.createElement('table');
      table.className = 'min-w-full divide-y divide-gray-200';

      // Table header
      const thead = document.createElement('thead');
      thead.className = 'bg-gray-50';

      const headerRow = document.createElement('tr');
      ['User ID', 'Nomor WA', 'Aksi'].forEach(text => {
        const th = document.createElement('th');
        th.scope = "col";
        th.className = 'px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wide';
        th.textContent = text;
        headerRow.appendChild(th);
      });
      thead.appendChild(headerRow);
      table.appendChild(thead);

      // Table body
      const tbody = document.createElement('tbody');
      tbody.className = 'bg-white divide-y divide-gray-200';

      filteredUsers.forEach((user, i) => {
        const tr = document.createElement('tr');
        tr.className = i % 2 === 0 ? '' : 'bg-gray-50';

        const tdUserId = document.createElement('td');
        tdUserId.className = 'px-6 py-4 whitespace-nowrap font-medium text-gray-900 text-sm';
        tdUserId.textContent = user.userId;
        tr.appendChild(tdUserId);

        const tdWa = document.createElement('td');
        tdWa.className = 'px-6 py-4 whitespace-nowrap text-gray-700 text-sm font-mono';
        tdWa.textContent = user.waNumber;
        tr.appendChild(tdWa);

        const tdAction = document.createElement('td');
        tdAction.className = 'px-6 py-4 whitespace-nowrap text-sm';

        const waLink = document.createElement('a');
        waLink.href = `https://wa.me/${user.waNumber}`;
        waLink.target = '_blank';
        waLink.rel = 'noopener noreferrer';
        waLink.className = 'inline-flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-semibold rounded-md shadow-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-1 transition transform hover:scale-105 btn-wa select-none';
        waLink.textContent = 'Chat WhatsApp';

        tdAction.appendChild(waLink);
        tr.appendChild(tdAction);

        tbody.appendChild(tr);
      });

      table.appendChild(tbody);
      tableWrapper.appendChild(table);
      resultContainer.appendChild(tableWrapper);
    });
  </script>
</body>
</html>