Spaces:

offerpk3
/

tempmailui

Running

App Files Files Community

offerpk3 commited on Jun 27, 2025

Commit

405ff9d

verified ·

1 Parent(s): 475a817

Update index.html

Browse files

Files changed (1) hide show

index.html +187 -18

index.html CHANGED Viewed

@@ -1,19 +1,188 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!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>