Hugging Face's logo

Spaces:
thxrhmn
/
tempmail
Running

App Files Community
tempmail / index.html
thxrhmn's picture
thxrhmn
undefined - Initial Deployment
428b616 verified
Raw
History Blame Contribute Delete
24.1 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Temporary Mail - Disposable Email Service</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 .email-item:hover {
 background-color: #f3f4f6;
 transform: translateY(-2px);
 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 }
 .email-item.unread {
 border-left: 4px solid #3b82f6;
 }
 .refresh-animation {
 animation: spin 1s linear infinite;
 }
 @keyframes spin {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
 }
 .gradient-bg {
 background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
 }
 </style>
</head>
<body class="bg-gray-50 min-h-screen">
 <div class="container mx-auto px-4 py-8">
 <!-- Header -->
 <header class="mb-8">
 <div class="flex justify-between items-center">
 <div class="flex items-center">
 <i class="fas fa-envelope text-blue-500 text-3xl mr-3"></i>
 <h1 class="text-2xl font-bold text-gray-800">TempMail</h1>
 </div>
 <div class="flex items-center space-x-4">
 <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition flex items-center">
 <i class="fas fa-user mr-2"></i>
 <span>Login</span>
 </button>
 <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition">
 <i class="fas fa-cog"></i>
 </button>
 </div>
 </div>
 </header>
<!-- Main Content -->
 <main>
 <!-- Email Generator Card -->
 <div class="gradient-bg rounded-xl shadow-lg p-6 mb-8 text-white">
 <div class="flex flex-col md:flex-row md:items-center md:justify-between">
 <div class="mb-4 md:mb-0">
 <h2 class="text-xl font-bold mb-2">Your Temporary Email Address</h2>
 <p class="text-blue-100">Completely anonymous and secure</p>
 </div>
 <div class="flex items-center">
 <div class="bg-white bg-opacity-20 rounded-lg px-4 py-3 mr-3 flex-1 min-w-0">
 <div class="flex items-center">
 <span id="email-address" class="font-mono truncate">Click generate to create email</span>
 <button id="copy-email" class="ml-2 text-blue-100 hover:text-white">
 <i class="fas fa-copy"></i>
 </button>
 </div>
 </div>
 <button id="generate-email" class="bg-white text-blue-600 px-4 py-3 rounded-lg font-semibold hover:bg-gray-100 transition flex items-center">
 <i class="fas fa-bolt mr-2"></i>
 Generate
 </button>
 </div>
 </div>
 </div>
<!-- Email Stats -->
 <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
 <div class="bg-white rounded-lg shadow p-4 flex items-center">
 <div class="bg-blue-100 text-blue-600 p-3 rounded-full mr-4">
 <i class="fas fa-envelope-open-text text-lg"></i>
 </div>
 <div>
 <p class="text-gray-500 text-sm">Total Emails</p>
 <p id="total-emails" class="text-xl font-bold">0</p>
 </div>
 </div>
 <div class="bg-white rounded-lg shadow p-4 flex items-center">
 <div class="bg-green-100 text-green-600 p-3 rounded-full mr-4">
 <i class="fas fa-inbox text-lg"></i>
 </div>
 <div>
 <p class="text-gray-500 text-sm">Unread Emails</p>
 <p id="unread-emails" class="text-xl font-bold">0</p>
 </div>
 </div>
 <div class="bg-white rounded-lg shadow p-4 flex items-center">
 <div class="bg-purple-100 text-purple-600 p-3 rounded-full mr-4">
 <i class="fas fa-clock text-lg"></i>
 </div>
 <div>
 <p class="text-gray-500 text-sm">Expires In</p>
 <p id="expiry-time" class="text-xl font-bold">Not generated</p>
 </div>
 </div>
 </div>
<!-- Email List -->
 <div class="bg-white rounded-xl shadow-lg overflow-hidden">
 <div class="border-b border-gray-200 px-6 py-4 flex justify-between items-center">
 <h3 class="text-lg font-semibold text-gray-800">Inbox</h3>
 <button id="refresh-inbox" class="text-blue-500 hover:text-blue-700 transition flex items-center">
 <i id="refresh-icon" class="fas fa-sync-alt mr-2"></i>
 Refresh
 </button>
 </div>
<div id="email-list" class="divide-y divide-gray-200">
 <!-- Placeholder when no emails -->
 <div class="p-8 text-center">
 <i class="fas fa-envelope-open-text text-4xl text-gray-300 mb-4"></i>
 <h4 class="text-lg font-medium text-gray-500">No emails yet</h4>
 <p class="text-gray-400">Your temporary email is ready to receive messages</p>
 </div>
 </div>
 </div>
 </main>
<!-- Features Section -->
 <section class="mt-12 mb-8">
 <h2 class="text-2xl font-bold text-center mb-8 text-gray-800">Why Use TempMail?</h2>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
 <div class="bg-white p-6 rounded-lg shadow-md">
 <div class="bg-blue-100 text-blue-600 p-3 rounded-full inline-block mb-4">
 <i class="fas fa-user-shield text-xl"></i>
 </div>
 <h3 class="text-lg font-semibold mb-2">Privacy Protection</h3>
 <p class="text-gray-600">Keep your personal email safe from spam and phishing attempts by using our disposable addresses.</p>
 </div>
 <div class="bg-white p-6 rounded-lg shadow-md">
 <div class="bg-green-100 text-green-600 p-3 rounded-full inline-block mb-4">
 <i class="fas fa-stopwatch text-xl"></i>
 </div>
 <h3 class="text-lg font-semibold mb-2">Instant Setup</h3>
 <p class="text-gray-600">No registration required. Get a working email address instantly with just one click.</p>
 </div>
 <div class="bg-white p-6 rounded-lg shadow-md">
 <div class="bg-purple-100 text-purple-600 p-3 rounded-full inline-block mb-4">
 <i class="fas fa-trash-alt text-xl"></i>
 </div>
 <h3 class="text-lg font-semibold mb-2">Auto Deletion</h3>
 <p class="text-gray-600">All emails are automatically deleted after 24 hours, leaving no trace behind.</p>
 </div>
 </div>
 </section>
<!-- Footer -->
 <footer class="mt-12 pt-8 border-t border-gray-200 text-center text-gray-500 text-sm">
 <div class="flex justify-center space-x-6 mb-4">
 <a href="#" class="hover:text-blue-500 transition">Terms</a>
 <a href="#" class="hover:text-blue-500 transition">Privacy</a>
 <a href="#" class="hover:text-blue-500 transition">FAQ</a>
 <a href="#" class="hover:text-blue-500 transition">Contact</a>
 </div>
 <p>© 2023 TempMail. All rights reserved.</p>
 </footer>
 </div>
<!-- Email Detail Modal -->
 <div id="email-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden">
 <div class="bg-white rounded-xl shadow-xl w-full max-w-3xl max-h-[90vh] overflow-hidden flex flex-col">
 <div class="border-b border-gray-200 px-6 py-4 flex justify-between items-center">
 <h3 id="email-subject" class="text-lg font-semibold">Email Subject</h3>
 <button id="close-modal" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
 <div class="px-6 py-4 border-b border-gray-200">
 <div class="flex justify-between items-center">
 <div>
 <span id="email-from" class="font-medium">From: sender@example.com</span>
 </div>
 <div>
 <span id="email-date" class="text-gray-500 text-sm">Today, 10:30 AM</span>
 </div>
 </div>
 </div>
 <div id="email-content" class="p-6 overflow-y-auto flex-1">
 <p>Loading email content...</p>
 </div>
 <div class="px-6 py-4 border-t border-gray-200 flex justify-end">
 <button id="delete-email" class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition mr-3">
 <i class="fas fa-trash mr-2"></i>Delete
 </button>
 <button id="reply-email" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">
 <i class="fas fa-reply mr-2"></i>Reply
 </button>
 </div>
 </div>
 </div>
<script>
 // DOM Elements
 const emailAddressEl = document.getElementById('email-address');
 const generateEmailBtn = document.getElementById('generate-email');
 const copyEmailBtn = document.getElementById('copy-email');
 const refreshInboxBtn = document.getElementById('refresh-inbox');
 const refreshIcon = document.getElementById('refresh-icon');
 const emailListEl = document.getElementById('email-list');
 const totalEmailsEl = document.getElementById('total-emails');
 const unreadEmailsEl = document.getElementById('unread-emails');
 const expiryTimeEl = document.getElementById('expiry-time');
 const emailModal = document.getElementById('email-modal');
 const closeModalBtn = document.getElementById('close-modal');
 const deleteEmailBtn = document.getElementById('delete-email');
 const replyEmailBtn = document.getElementById('reply-email');
 const emailSubjectEl = document.getElementById('email-subject');
 const emailFromEl = document.getElementById('email-from');
 const emailDateEl = document.getElementById('email-date');
 const emailContentEl = document.getElementById('email-content');
 // State
 let currentEmail = '';
 let emails = [];
 let expiryTimer = null;
 let expiryTime = null;
 let currentOpenEmailId = null;
 // Domains for email generation
 const domains = [
 'tempmail.com',
 'mailtemp.net',
 'dispostable.com',
 'mailinator.com',
 'throwawaymail.com'
 ];
 // Generate random string for username
 function generateRandomString(length) {
 const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
 let result = '';
 for (let i = 0; i < length; i++) {
 result += chars.charAt(Math.floor(Math.random() * chars.length));
 }
 return result;
 }
 // Generate random email
 function generateRandomEmail() {
 const username = generateRandomString(10);
 const domain = domains[Math.floor(Math.random() * domains.length)];
 return `${username}@${domain}`;
 }
 // Format date
 function formatDate(date) {
 const now = new Date();
 const diff = now - date;
if (diff < 60000) return 'Just now';
 if (diff < 3600000) return `${Math.floor(diff / 60000)} minutes ago`;
 if (diff < 86400000) return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
 }
 // Update expiry timer display
 function updateExpiryTimer() {
 if (!expiryTime) return;
const now = new Date();
 const diff = expiryTime - now;
if (diff <= 0) {
 expiryTimeEl.textContent = 'Expired';
 clearInterval(expiryTimer);
 return;
 }
const hours = Math.floor(diff / (1000 * 60 * 60));
 const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
 const seconds = Math.floor((diff % (1000 * 60)) / 1000);
expiryTimeEl.textContent = `${hours}h ${minutes}m ${seconds}s`;
 }
 // Start expiry timer
 function startExpiryTimer() {
 expiryTime = new Date(Date.now() + 24 * 60 * 60 * 1000); // 24 hours from now
 updateExpiryTimer();
 clearInterval(expiryTimer);
 expiryTimer = setInterval(updateExpiryTimer, 1000);
 }
 // Generate mock emails
 function generateMockEmails() {
 if (!currentEmail) return [];
const count = Math.floor(Math.random() * 3); // 0-2 new emails
 const newEmails = [];
for (let i = 0; i < count; i++) {
 const senders = [
 'noreply@service.com',
 'newsletter@tech.org',
 'support@company.io',
 'hello@startup.dev',
 'team@platform.net'
 ];
const subjects = [
 'Welcome to our service!',
 'Your subscription is confirmed',
 'Password reset request',
 'New message from support',
 'Weekly newsletter',
 'Account verification required'
 ];
const contents = [
 'Thank you for signing up to our service. We hope you enjoy using it!',
 'Please click the link below to verify your email address and complete your registration.',
 'We noticed a login attempt from a new device. If this was you, you can ignore this message.',
 'Your monthly report is ready. Click here to view your statistics and insights.',
 'You have 1 new notification waiting for you in your account dashboard.',
 'This is an automated message, please do not reply to this email.'
 ];
const sender = senders[Math.floor(Math.random() * senders.length)];
 const subject = subjects[Math.floor(Math.random() * subjects.length)];
 const content = contents[Math.floor(Math.random() * contents.length)];
 const date = new Date(Date.now() - Math.floor(Math.random() * 24 * 60 * 60 * 1000));
 const isRead = Math.random() > 0.5;
newEmails.push({
 id: Date.now() + i,
 from: sender,
 subject: subject,
 content: content,
 date: date,
 isRead: isRead
 });
 }
return [...newEmails, ...emails];
 }
 // Render email list
 function renderEmailList() {
 if (emails.length === 0) {
 emailListEl.innerHTML = `
 <div class="p-8 text-center">
 <i class="fas fa-envelope-open-text text-4xl text-gray-300 mb-4"></i>
 <h4 class="text-lg font-medium text-gray-500">No emails yet</h4>
 <p class="text-gray-400">Your temporary email is ready to receive messages</p>
 </div>
 `;
 return;
 }
emailListEl.innerHTML = emails.map(email => `
 <div class="email-item ${email.isRead ? '' : 'unread'} px-6 py-4 cursor-pointer transition" data-id="${email.id}">
 <div class="flex items-center">
 <div class="mr-4">
 <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-500">
 <i class="fas fa-user"></i>
 </div>
 </div>
 <div class="flex-1 min-w-0">
 <div class="flex justify-between">
 <h4 class="font-medium truncate ${email.isRead ? 'text-gray-700' : 'text-gray-900'}">${email.subject}</h4>
 <span class="text-sm text-gray-500 ml-2 whitespace-nowrap">${formatDate(email.date)}</span>
 </div>
 <p class="text-sm text-gray-500 truncate">${email.from}</p>
 <p class="text-sm text-gray-600 mt-1 truncate">${email.content.substring(0, 100)}...</p>
 </div>
 </div>
 </div>
 `).join('');
// Add click event to email items
 document.querySelectorAll('.email-item').forEach(item => {
 item.addEventListener('click', function() {
 const emailId = parseInt(this.getAttribute('data-id'));
 openEmail(emailId);
 });
 });
// Update counters
 totalEmailsEl.textContent = emails.length;
 unreadEmailsEl.textContent = emails.filter(e => !e.isRead).length;
 }
 // Open email
 function openEmail(emailId) {
 const email = emails.find(e => e.id === emailId);
 if (!email) return;
// Mark as read
 if (!email.isRead) {
 email.isRead = true;
 renderEmailList();
 }
// Set modal content
 emailSubjectEl.textContent = email.subject;
 emailFromEl.textContent = `From: ${email.from}`;
 emailDateEl.textContent = formatDate(email.date);
 emailContentEl.innerHTML = `<p>${email.content}</p>`;
// Store current email ID
 currentOpenEmailId = emailId;
// Show modal
 emailModal.classList.remove('hidden');
 }
 // Delete email
 function deleteEmail(emailId) {
 emails = emails.filter(e => e.id !== emailId);
 renderEmailList();
 emailModal.classList.add('hidden');
 }
 // Generate new email
 generateEmailBtn.addEventListener('click', function() {
 currentEmail = generateRandomEmail();
 emailAddressEl.textContent = currentEmail;
 startExpiryTimer();
// Generate initial emails
 emails = generateMockEmails();
 renderEmailList();
// Show success message
 const originalText = generateEmailBtn.innerHTML;
 generateEmailBtn.innerHTML = `<i class="fas fa-check mr-2"></i>Generated!`;
 generateEmailBtn.classList.remove('bg-blue-500');
 generateEmailBtn.classList.add('bg-green-500');
setTimeout(() => {
 generateEmailBtn.innerHTML = originalText;
 generateEmailBtn.classList.remove('bg-green-500');
 generateEmailBtn.classList.add('bg-blue-500');
 }, 2000);
 });
 // Copy email to clipboard
 copyEmailBtn.addEventListener('click', function() {
 if (!currentEmail) {
 alert('Please generate an email first');
 return;
 }
navigator.clipboard.writeText(currentEmail).then(() => {
 const originalIcon = copyEmailBtn.innerHTML;
 copyEmailBtn.innerHTML = `<i class="fas fa-check"></i>`;
setTimeout(() => {
 copyEmailBtn.innerHTML = originalIcon;
 }, 2000);
 });
 });
 // Refresh inbox
 refreshInboxBtn.addEventListener('click', function() {
 if (!currentEmail) {
 alert('Please generate an email first');
 return;
 }
refreshIcon.classList.add('refresh-animation');
// Simulate API call delay
 setTimeout(() => {
 emails = generateMockEmails();
 renderEmailList();
 refreshIcon.classList.remove('refresh-animation');
// Show success message
 const originalText = refreshInboxBtn.innerHTML;
 refreshInboxBtn.innerHTML = `<i class="fas fa-check mr-2"></i>Refreshed`;
setTimeout(() => {
 refreshInboxBtn.innerHTML = originalText;
 }, 2000);
 }, 1000);
 });
 // Close modal
 closeModalBtn.addEventListener('click', function() {
 emailModal.classList.add('hidden');
 });
 // Delete email button
 deleteEmailBtn.addEventListener('click', function() {
 if (currentOpenEmailId) {
 deleteEmail(currentOpenEmailId);
 }
 });
 // Reply email button
 replyEmailBtn.addEventListener('click', function() {
 alert('Reply functionality would be implemented in a real application');
 });
 // Close modal when clicking outside
 emailModal.addEventListener('click', function(e) {
 if (e.target === emailModal) {
 emailModal.classList.add('hidden');
 }
 });
 // Initialize with a generated email for demo purposes
 setTimeout(() => {
 generateEmailBtn.click();
// Auto-refresh after 10 seconds for demo
 setTimeout(() => {
 refreshInboxBtn.click();
 }, 10000);
 }, 500);
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=thxrhmn/tempmail" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>