Spaces:

offerpk3
/

tempmailui

Running

File size: 7,433 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Live Temp Mail</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    body { background-color: #0f172a; color: white; }
    #toast {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: #22c55e;
      color: white;
      padding: 10px 20px;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
    }
    #toast.show {
      opacity: 1;
    }
  </style>
</head>
<body class="flex items-center justify-center min-h-screen">
  <div id="toast">📋 Copied Successfully!</div>
  <div class="bg-gray-900 rounded-2xl shadow-2xl p-6 max-w-2xl w-full">
    <h1 class="text-2xl font-bold text-center mb-4 text-indigo-400">📧 Live Temp Mail</h1>

    <div class="bg-gray-800 rounded-xl p-4 flex justify-between items-center">
      <input id="email" readonly class="bg-transparent text-white w-full font-mono text-sm" />
      <button onclick="copyEmail()" class="ml-2 px-3 py-1 text-sm bg-indigo-600 hover:bg-indigo-700 rounded">📋 Copy</button>
    </div>

    <div class="flex justify-between mt-4 mb-2">
      <button onclick="generateEmail()" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded">🔄 New Email</button>
      <button onclick="fetchInbox()" class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded">📩 Refresh Inbox</button>
    </div>

    <div class="text-right text-sm text-yellow-300 mb-2">⏳ Time left: <span id="timer">10:00</span></div>

    <h2 class="mt-4 mb-2 font-semibold text-lg text-indigo-300">📥 Inbox</h2>
    <div id="inbox" class="bg-gray-800 p-4 rounded-xl space-y-3 max-h-64 overflow-y-auto text-sm">
      <p class="text-gray-400">📭 No messages yet.</p>
    </div>

    <h2 class="mt-6 mb-2 font-semibold text-lg text-yellow-300">📨 Message Content</h2>
    <div id="messageContent" class="bg-gray-800 p-4 rounded-xl text-sm overflow-y-auto max-h-64">
      <p class="text-gray-400">Select a message to view its content.</p>
    </div>
  </div>

  <script>
    let currentEmail = "";
    let currentLogin = "";
    let currentDomain = "";
    let timerInterval;
    let inboxInterval;
    let timeLeft = 600;

    function showToast(msg) {
      const toast = document.getElementById("toast");
      toast.textContent = msg;
      toast.classList.add("show");
      setTimeout(() => toast.classList.remove("show"), 2000);
    }

    function randomStr(len = 10) {
      const chars = "abcdefghijklmnopqrstuvwxyz123456789";
      return Array.from({length: len}, () => chars[Math.floor(Math.random() * chars.length)]).join('');
    }

    function startTimer() {
      clearInterval(timerInterval);
      timeLeft = 600;
      const timerEl = document.getElementById("timer");
      timerInterval = setInterval(() => {
        const minutes = Math.floor(timeLeft / 60).toString().padStart(2, '0');
        const seconds = (timeLeft % 60).toString().padStart(2, '0');
        timerEl.textContent = `${minutes}:${seconds}`;
        timeLeft--;
        if (timeLeft < 0) {
          clearInterval(timerInterval);
          clearInterval(inboxInterval);
          generateEmail();
        }
      }, 1000);
    }

    function startAutoRefreshInbox() {
      clearInterval(inboxInterval);
      inboxInterval = setInterval(fetchInbox, 5000);
    }

    function generateEmail() {
      currentLogin = randomStr();
      currentDomain = "1secmail.com";
      currentEmail = `${currentLogin}@${currentDomain}`;
      document.getElementById("email").value = currentEmail;
      document.getElementById("inbox").innerHTML = '<p class="text-gray-400">📭 No messages yet.</p>';
      document.getElementById("messageContent").innerHTML = '<p class="text-gray-400">Select a message to view its content.</p>';
      startTimer();
      startAutoRefreshInbox();
    }

    function copyEmail() {
      navigator.clipboard.writeText(currentEmail);
      showToast("📋 Email copied!");
    }

    async function fetchInbox() {
      const inboxDiv = document.getElementById("inbox");
      if (!currentLogin || !currentDomain) {
        inboxDiv.innerHTML = '<p class="text-gray-400">⏳ Waiting for email setup...</p>';
        return;
      }
      inboxDiv.innerHTML = '<p class="text-gray-400">🔄 Fetching messages...</p>';
      try {
        const res = await fetch(`https://www.1secmail.com/api/v1/?action=getMessages&login=${currentLogin}&domain=${currentDomain}`);
        const data = await res.json();

        if (data.length === 0) {
          inboxDiv.innerHTML = '<p class="text-gray-400">📭 No messages found.</p>';
          return;
        }

        inboxDiv.innerHTML = '';
        data.forEach(msg => {
          const msgDiv = document.createElement("div");
          msgDiv.className = "border-b border-gray-700 pb-2 cursor-pointer hover:bg-gray-700 p-2 rounded";
          msgDiv.innerHTML = `
            <p class="font-bold text-white">${msg.from}</p>
            <p class="text-gray-300">${msg.subject}</p>
            <div class="flex gap-2 mt-2">
              <button onclick="fetchMessage(${msg.id})" class="bg-blue-600 px-2 py-1 text-xs rounded">📖 Open</button>
              <button onclick="copyMessage(${msg.id})" class="bg-indigo-600 px-2 py-1 text-xs rounded">📋 Copy</button>
              <button onclick="deleteMessage(${msg.id})" class="bg-red-600 px-2 py-1 text-xs rounded">🗑️ Delete</button>
              <button onclick="forwardMessage(${msg.id})" class="bg-yellow-600 px-2 py-1 text-xs rounded">📤 Forward</button>
            </div>`;
          inboxDiv.appendChild(msgDiv);
        });
      } catch (err) {
        inboxDiv.innerHTML = '<p class="text-red-500">❌ Error fetching inbox. Check connection or domain.</p>';
      }
    }

    async function fetchMessage(id) {
      const contentDiv = document.getElementById("messageContent");
      contentDiv.innerHTML = '<p class="text-gray-400">🔄 Loading message...</p>';
      try {
        const res = await fetch(`https://www.1secmail.com/api/v1/?action=readMessage&login=${currentLogin}&domain=${currentDomain}&id=${id}`);
        const data = await res.json();
        contentDiv.innerHTML = `
          <p class="text-indigo-400 font-bold mb-2">From: ${data.from}</p>
          <p class="text-green-400 font-bold mb-2">Subject: ${data.subject}</p>
          <div class="text-gray-200 mt-2">${data.htmlBody || data.textBody}</div>
        `;
      } catch (err) {
        contentDiv.innerHTML = '<p class="text-red-500">❌ Error loading message.</p>';
      }
    }

    function copyMessage(id) {
      fetch(`https://www.1secmail.com/api/v1/?action=readMessage&login=${currentLogin}&domain=${currentDomain}&id=${id}`)
        .then(res => res.json())
        .then(data => {
          const content = data.htmlBody || data.textBody;
          navigator.clipboard.writeText(content);
          showToast("📋 Message copied!");
        });
    }

    function deleteMessage(id) {
      alert("🗑️ Delete not supported by 1secmail API (for demo only)");
    }

    function forwardMessage(id) {
      alert("📤 Forward not implemented — requires SMTP backend");
    }

    window.addEventListener('DOMContentLoaded', () => {
  generateEmail();
});
  </script>
</body>
</html>