Spaces:
Running
Running
| <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> | |