Hugging Face's logo

Spaces:
Helleon
/
temp
Running

App Files Community
temp / index.html
Helleon's picture
Helleon
şimdi mail geldiğinde bir bildirim sesi koy - Follow Up Deployment
715a69a verified
Raw
History Blame Contribute Delete
43.4 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>TempMail - Disposable Email</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">
 <audio id="notification-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-software-interface-start-2574.mp3" preload="auto"></audio>
 <style>
 .bg-dark {
 background-color: #121212;
 }
 .bg-secondary {
 background-color: #1E1E1E;
 }
 .text-primary {
 color: #BB86FC;
 }
 .text-secondary {
 color: #03DAC6;
 }
 .text-accent {
 color: #FF7597;
 }
 .border-primary {
 border-color: #BB86FC;
 }
 .border-secondary {
 border-color: #03DAC6;
 }
 .border-accent {
 border-color: #FF7597;
 }
 .hover-primary:hover {
 color: #BB86FC;
 }
 .hover-secondary:hover {
 color: #03DAC6;
 }
 .hover-accent:hover {
 color: #FF7597;
 }
 .bg-primary {
 background-color: #BB86FC;
 }
 .bg-accent {
 background-color: #FF7597;
 }
 .bg-green {
 background-color: #03DAC6;
 }
 .btn-primary {
 background-color: #BB86FC;
 color: #121212;
 transition: all 0.3s ease;
 }
 .btn-primary:hover {
 background-color: #a971f3;
 }
 .btn-accent {
 background-color: #FF7597;
 color: #121212;
 transition: all 0.3s ease;
 }
 .btn-accent:hover {
 background-color: #ff5c84;
 }
 .btn-green {
 background-color: #03DAC6;
 color: #121212;
 transition: all 0.3s ease;
 }
 .btn-green:hover {
 background-color: #02c2b0;
 }
 .dropdown-menu {
 display: none;
 position: absolute;
 right: 0;
 top: 100%;
 background-color: #1E1E1E;
 border: 1px solid #BB86FC;
 border-radius: 0.5rem;
 z-index: 10;
 min-width: 200px;
 }
 .dropdown:hover .dropdown-menu {
 display: block;
 }
 .email-item:hover {
 background-color: #2E2E2E;
 border-left: 3px solid #BB86FC;
 }
 .email-item.unread {
 background-color: #252525;
 }
 @keyframes flash {
 0%, 100% { background-color: #252525; }
 50% { background-color: #FF7597; }
 }
 .email-item.new-email {
 animation: flash 0.5s 3;
 }
 .email-item.selected {
 background-color: #333333;
 border-left: 3px solid #03DAC6;
 }
 .email-content {
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.3s ease;
 }
 .email-content.open {
 max-height: 500px;
 }
 .copy-btn {
 transition: all 0.3s ease;
 }
 .copy-btn:hover {
 transform: scale(1.1);
 }
 .copy-btn.copied {
 background-color: #03DAC6 !important;
 }
 @keyframes gradientSlide {
 0% {
 background-position: 0 0;
 }
 100% {
 background-position: 200vw 0;
 }
 }
 .inbox-count {
 background: #03DAC6;
 border-radius: 9999px;
 padding: 0.25rem 1.5rem;
 transition: all 0.3s ease;
 color: #121212 !important;
 font-size: 0.875rem;
 min-width: 60px;
 text-align: center;
 font-weight: bold;
 border: 2px solid transparent;
 position: relative;
 }
 .inbox-count:hover {
 transform: scale(1.1);
 }
 .inbox-count:hover {
 background-color: #02c2b0;
 }
 </style>
</head>
<body class="bg-dark text-gray-100 min-h-screen">
 <div class="container mx-auto px-4 py-6">
 <!-- Header -->
 <header class="flex justify-between items-center mb-8">
 <div class="flex items-center">
 <i class="fas fa-envelope text-primary text-3xl mr-3"></i>
 <h1 class="text-2xl font-bold">Temp<span class="text-accent">Mail</span></h1>
 </div>
<!-- User Profile Dropdown -->
 <div class="dropdown relative">
 <button class="flex items-center space-x-2 focus:outline-none">
 <div class="w-10 h-10 rounded-full bg-secondary flex items-center justify-center border-2 border-primary">
 <i class="fas fa-user text-primary"></i>
 </div>
 <span class="text-primary"><i class="fas fa-caret-down"></i></span>
 </button>
<div class="dropdown-menu py-2 mt-2">
 <div id="login-form" class="px-4 py-3">
 <h3 class="text-primary font-bold mb-2">Giriş</h3>
 <input type="email" placeholder="Email" class="w-full bg-secondary border border-primary rounded px-3 py-2 mb-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
 <input type="password" placeholder="Password" class="w-full bg-secondary border border-primary rounded px-3 py-2 mb-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
 <button class="btn-primary text-sm w-full py-2 rounded font-bold">Giriş Yap</button>
 </div>
 <div class="border-t border-gray-700"></div>
 <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-800 hover-text-primary"><i class="fas fa-sign-out-alt mr-2"></i>Çıkış</a>
 </div>
 </div>
 </header>
<!-- Banner -->
 <div class="bg-gradient-to-r from-primary to-accent text-dark p-4 rounded-lg mb-6 flex items-center justify-between">
 <div class="flex items-center">
 <i class="fas fa-exclamation-circle text-2xl mr-3"></i>
 <div>
 <h3 class="font-bold">Premium Özellikler!</h3>
 <p class="text-sm">Daha fazla özellik için premium üye olun</p>
 </div>
 </div>
 <button class="bg-dark hover:bg-gray-800 text-white px-4 py-2 rounded-lg font-bold text-sm">
 Yükselt
 </button>
 </div>
<!-- Notification -->
 <div id="new-email-notification" class="hidden fixed inset-0 flex items-center justify-center bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 mx-auto w-max h-max mt-4">
 <i class="fas fa-envelope mr-2"></i>
 <span>Yeni Email Geldi!</span>
 </div>
<!-- Main Content -->
 <div class="flex flex-col md:flex-row gap-6">
 <!-- Sidebar -->
 <aside class="w-full md:w-1/4 bg-secondary rounded-lg p-4">
 <div class="mb-6">
 <h2 class="text-lg font-bold text-primary mb-4">Mail Bilgileri</h2>
 <div class="bg-dark rounded-lg p-3 mb-3">
 <div class="flex justify-between items-center mb-2">
 <span class="text-sm font-medium text-accent">Email:</span>
 <button id="copy-email" class="copy-btn bg-primary text-dark text-xs px-2 py-1 rounded">
 <i class="fas fa-copy"></i> Kopyala
 </button>
 </div>
 <p id="temp-email" class="text-sm break-all font-bold">user<span class="text-secondary">@</span>tempmail<span class="text-accent">.com</span></p>
 </div>
 <div class="bg-dark rounded-lg p-3">
 <div class="flex justify-between items-center mb-2">
 <span class="text-sm font-medium text-secondary">Şifre:</span>
 <button id="copy-password" class="copy-btn bg-green text-dark text-xs px-2 py-1 rounded">
 <i class="fas fa-copy"></i> Kopyala
 </button>
 </div>
 <p id="temp-password" class="text-sm font-bold">t3mpP@ss<span class="text-accent">123</span></p>
 </div>
 <button class="w-full flex items-center justify-center text-gray-300 hover-text-primary bg-primary hover:bg-primary-dark text-dark px-6 py-3 rounded-lg font-bold text-lg mt-4">
 <i class="fas fa-sync-alt mr-3"></i>
 <span>Yenile</span>
 </button>
 </div>
<div>
 <h3 class="text-lg font-bold text-primary mb-3">Dosya</h3>
 <ul class="space-y-2">
 <li>
 <a href="#" onclick="goBackToInbox()" class="flex items-center text-gray-300 hover-text-primary">
 <i class="fas fa-inbox mr-3 text-primary"></i>
 <span>Gelen Kutusu</span>
 <span class="inbox-count ml-auto">12</span>
 </a>
 </li>
 <li>
 <a href="#starred" id="starred-link" class="flex items-center text-gray-300 hover-text-secondary">
 <i class="fas fa-star mr-3 text-secondary"></i>
 <span>Yıldız</span>
 <span id="starred-count" class="inbox-count ml-auto hidden">0</span>
 </a>
 </li>
 <li>
 <a href="#trash" id="trash-link" class="flex items-center text-gray-300 hover-text-accent">
 <i class="fas fa-trash mr-3 text-accent"></i>
 <span>Çöp</span>
 <span id="trash-count" class="inbox-count ml-auto hidden">0</span>
 </a>
 </li>
 </ul>
 </div>
 </aside>
<!-- Email List -->
 <main class="w-full md:w-3/4">
 <div class="bg-secondary rounded-lg overflow-hidden">
 <div class="p-4 border-b border-gray-700 flex justify-between items-center">
 <div class="flex items-center">
 <button class="bg-dark hover:bg-gray-800 p-2 rounded mr-3">
 <i class="fas fa-arrow-left text-primary"></i>
 </button>
 <h2 class="text-lg font-bold text-primary">Gelen Kutusu</h2>
 </div>
 <div class="flex space-x-2">
 <button id="select-all" class="bg-dark hover:bg-gray-800 p-2 rounded">
 <i class="fas fa-check-square text-primary" title="Select All"></i>
 </button>
 <button id="delete-selected" class="bg-dark hover:bg-gray-800 p-2 rounded" onclick="moveToTrash()">
 <i class="fas fa-trash text-accent"></i>
 </button>
 <button id="archive-selected" class="bg-dark hover:bg-gray-800 p-2 rounded">
 <i class="fas fa-archive text-secondary"></i>
 </button>
 </div>
 </div>
<!-- Email Items -->
 <div class="divide-y divide-gray-700">
 <!-- Email 1 -->
 <div class="email-item unread p-4 cursor-pointer">
 <div class="flex items-start">
 <input type="checkbox" class="mr-2 h-5 w-5 rounded border-gray-400 bg-gray-700 focus:ring-primary">
 <button class="star-btn mr-2 text-gray-400 hover:text-yellow-400 focus:outline-none">
 <i class="far fa-star"></i>
 </button>
 <div class="w-10 h-10 rounded-full bg-accent flex items-center justify-center mr-3">
 <i class="fas fa-user text-dark"></i>
 </div>
 <div class="flex-1">
 <div class="flex justify-between items-start">
 <h3 class="font-bold text-primary">Temp Mail'e Hoşsgeldin</h3>
 <span class="text-xs text-gray-400">2 dakika önce</span>
 </div>
 <p class="text-sm text-gray-300 mt-1">En iyi geçici mail sitesi.</p>
 </div>
 </div>
 <div class="email-content mt-3 pl-13">
 <div class="bg-dark rounded-lg p-4 text-sm">
 <p>Hello,</p>
 <p class="mt-2">Welcome to TempMail! Your temporary email address is ready to use.</p>
 <p class="mt-2">You can use this email to sign up for services without revealing your personal email address.</p>
 <p class="mt-2">This email will expire in 24 hours.</p>
 <p class="mt-4 text-secondary">- The TempMail Team</p>
 </div>
 </div>
 </div>
<!-- Email 2 -->
 <div class="email-item p-4 cursor-pointer">
 <div class="flex items-start">
 <input type="checkbox" class="mr-2 h-5 w-5 rounded border-gray-400 bg-gray-700 focus:ring-primary">
 <button class="star-btn mr-2 text-gray-400 hover:text-yellow-400 focus:outline-none">
 <i class="far fa-star"></i>
 </button>
 <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3">
 <i class="fas fa-shopping-cart text-dark"></i>
 </div>
 <div class="flex-1">
 <div class="flex justify-between items-start">
 <h3 class="font-bold">Your Amazon Order #12345</h3>
 <span class="text-xs text-gray-400">1 Saat Önce</span>
 </div>
 <p class="text-sm text-gray-300 mt-1">Your order has been shipped and will arrive...</p>
 </div>
 </div>
 <div class="email-content mt-3 pl-13">
 <div class="bg-dark rounded-lg p-4 text-sm">
 <p>Hello,</p>
 <p class="mt-2">Your Amazon order #12345 has been shipped and is on its way to you.</p>
 <p class="mt-2">Expected delivery date: Friday, June 10</p>
 <p class="mt-4 text-secondary">- Amazon Customer Service</p>
 </div>
 </div>
 </div>
<!-- Email 3 -->
 <div class="email-item unread p-4 cursor-pointer">
 <div class="flex items-start">
 <input type="checkbox" class="mr-2 h-5 w-5 rounded border-gray-400 bg-gray-700 focus:ring-primary">
 <button class="star-btn mr-2 text-gray-400 hover:text-yellow-400 focus:outline-none">
 <i class="far fa-star"></i>
 </button>
 <div class="w-10 h-10 rounded-full bg-green flex items-center justify-center mr-3">
 <i class="fas fa-envelope text-dark"></i>
 </div>
 <div class="flex-1">
 <div class="flex justify-between items-start">
 <h3 class="font-bold text-primary">Verify your account</h3>
 <span class="text-xs text-gray-400">3 Saat Önce</span>
 </div>
 <p class="text-sm text-gray-300 mt-1">Please verify your account by clicking the link below...</p>
 </div>
 </div>
 <div class="email-content mt-3 pl-13">
 <div class="bg-dark rounded-lg p-4 text-sm">
 <p>Hello,</p>
 <p class="mt-2">Thank you for signing up for our service. To complete your registration, please verify your email address by clicking the button below:</p>
 <button class="btn-primary mt-3 px-4 py-2 rounded text-sm">Verify Email Address</button>
 <p class="mt-4 text-xs text-gray-400">If you didn't request this, you can safely ignore this email.</p>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Starred Container -->
 <div id="starred-container" class="hidden bg-secondary rounded-lg overflow-hidden">
 <div class="p-4 border-b border-gray-700 flex justify-between items-center">
 <div class="flex items-center">
 <button class="bg-dark hover:bg-gray-800 p-2 rounded mr-3" onclick="goBackToInbox()">
 <i class="fas fa-arrow-left text-primary"></i>
 </button>
 <h2 class="text-lg font-bold text-secondary">Yıldızlı E-postalar</h2>
 </div>
 <div class="flex space-x-2">
 <button id="select-all-starred" class="bg-dark hover:bg-gray-800 p-2 rounded">
 <i class="fas fa-check-square text-primary" title="Select All"></i>
 </button>
 <button id="delete-selected-starred" class="bg-dark hover:bg-gray-800 p-2 rounded" onclick="moveToTrashFromStarred()">
 <i class="fas fa-trash text-accent"></i>
 </button>
 </div>
 </div>
<div id="starred-emails" class="divide-y divide-gray-700">
 <!-- Starred emails will be rendered here -->
 </div>
 </div>
<!-- Trash Container -->
 <div id="trash-container" class="hidden bg-secondary rounded-lg overflow-hidden">
 <div class="p-4 border-b border-gray-700 flex justify-between items-center">
 <div class="flex items-center">
 <button class="bg-dark hover:bg-gray-800 p-2 rounded mr-3" onclick="goBackToInbox()">
 <i class="fas fa-arrow-left text-primary"></i>
 </button>
 <h2 class="text-lg font-bold text-primary">Çöp Kutusu</h2>
 </div>
 <div class="flex space-x-2">
 <button id="select-all-trash" class="bg-dark hover:bg-gray-800 p-2 rounded">
 <i class="fas fa-check-square text-primary" title="Select All"></i>
 </button>
 <button id="delete-selected-trash" class="bg-dark hover:bg-gray-800 p-2 rounded" onclick="emptyTrash()">
 <i class="fas fa-trash text-accent"></i>
 </button>
 <button id="permanent-delete" class="bg-dark hover:bg-gray-800 p-2 rounded" onclick="permanentDelete()" title="Kalıcı Olarak Sil">
 <i class="fas fa-skull text-red-500"></i>
 </button>
 </div>
 </div>
<div id="trash-emails" class="divide-y divide-gray-700">
 <!-- Trash emails will be rendered here -->
 </div>
 </div>
<!-- Empty State -->
 <!-- <div class="bg-secondary rounded-lg p-8 text-center">
 <i class="fas fa-inbox text-4xl text-gray-500 mb-4"></i>
 <h3 class="text-xl font-bold text-gray-400 mb-2">Your inbox is empty</h3>
 <p class="text-gray-500">Any emails sent to your temporary address will appear here</p>
 </div> -->
 </main>
 </div>
 </div>
<script>
 // Toggle email content
 document.querySelectorAll('.email-item').forEach(item => {
 item.addEventListener('click', function() {
 const content = this.querySelector('.email-content');
 content.classList.toggle('open');
 this.classList.toggle('unread');
 });
 });
 // Copy email
 document.getElementById('copy-email').addEventListener('click', function() {
 const email = document.getElementById('temp-email').textContent;
 navigator.clipboard.writeText(email);
this.classList.add('copied');
 this.innerHTML = '<i class="fas fa-check"></i> Kopyalandı!';
setTimeout(() => {
 this.classList.remove('copied');
 this.innerHTML = '<i class="fas fa-copy"></i> Copy';
 }, 2000);
 });
 // Copy password
 document.getElementById('copy-password').addEventListener('click', function() {
 const password = document.getElementById('temp-password').textContent;
 navigator.clipboard.writeText(password);
this.classList.add('copied');
 this.innerHTML = '<i class="fas fa-check"></i> Kopyalandı!';
setTimeout(() => {
 this.classList.remove('copied');
 this.innerHTML = '<i class="fas fa-copy"></i> Copy';
 }, 2000);
 });
 // Checkbox selection functionality
 document.querySelectorAll('.email-item input[type="checkbox"]').forEach(checkbox => {
 checkbox.addEventListener('click', function(e) {
 e.stopPropagation();
 const emailItem = this.closest('.email-item');
 if (this.checked) {
 emailItem.classList.add('selected');
 } else {
 emailItem.classList.remove('selected');
 }
 });
 });
 // Select all functionality
 document.getElementById('select-all').addEventListener('click', function(e) {
 e.stopPropagation();
 const checkboxes = document.querySelectorAll('.email-item input[type="checkbox"]');
 const anyUnchecked = Array.from(checkboxes).some(checkbox => !checkbox.checked);
checkboxes.forEach(checkbox => {
 checkbox.checked = anyUnchecked;
 const emailItem = checkbox.closest('.email-item');
 if (anyUnchecked) {
 emailItem.classList.add('selected');
 } else {
 emailItem.classList.remove('selected');
 }
 });
// Change icon based on selection state
 const icon = this.querySelector('i');
 if (anyUnchecked) {
 icon.classList.remove('fa-check-square');
 icon.classList.add('fa-minus-square');
 } else {
 icon.classList.remove('fa-minus-square');
 icon.classList.add('fa-check-square');
 }
 });
 // Permanently delete selected emails
 function permanentDelete() {
 const selectedEmails = document.querySelectorAll('#trash-emails .email-item.selected');
 const trashCount = document.getElementById('trash-count');
if (selectedEmails.length === 0) {
 alert('Lütfen silmek istediğiniz e-postaları seçin.');
 return;
 }
 if (!confirm('Seçili e-postaları kalıcı olarak silmek istediğinize emin misiniz? Bu işlem geri alınamaz!')) {
 return;
 }
 selectedEmails.forEach(email => {
 const index = Array.from(trashEmails).findIndex(e => e.isEqualNode(email));
 if (index !== -1) {
 trashEmails.splice(index, 1);
 }
 email.remove();
 });
 // Update trash count
 const newCount = trashEmails.length;
 trashCount.textContent = newCount;
 if (newCount === 0) {
 trashCount.classList.add('hidden');
 }
 }
 // Move selected emails to trash
 function moveToTrash() {
 const selectedEmails = document.querySelectorAll('.email-item.selected');
 const trashCount = document.getElementById('trash-count');
selectedEmails.forEach(email => {
 // Remove from inbox
 email.remove();
// Update trash count
 const currentCount = parseInt(trashCount.textContent) || 0;
 trashCount.textContent = currentCount + 1;
 trashCount.classList.remove('hidden');
 });
 }
 // Star toggle functionality
 document.querySelectorAll('.star-btn').forEach(btn => {
 btn.addEventListener('click', function(e) {
 e.stopPropagation();
 const icon = this.querySelector('i');
 const emailItem = this.closest('.email-item');
 const starredCount = document.getElementById('starred-count');
if (icon.classList.contains('far')) {
 // Star the email
 icon.classList.remove('far');
 icon.classList.add('fas', 'text-yellow-400');
// Add to starred collection
 starredEmails.push(emailItem.cloneNode(true));
// Update count
 const currentCount = parseInt(starredCount.textContent) || 0;
 starredCount.textContent = currentCount + 1;
 starredCount.classList.remove('hidden');
 } else {
 // Unstar the email
 icon.classList.remove('fas', 'text-yellow-400');
 icon.classList.add('far');
// Remove from starred collection
 const index = Array.from(starredEmails).findIndex(e => e.isEqualNode(emailItem));
 if (index !== -1) {
 starredEmails.splice(index, 1);
 }
// Update count
 const newCount = starredEmails.length;
 starredCount.textContent = newCount;
 if (newCount === 0) {
 starredCount.classList.add('hidden');
 }
// If viewing starred emails, re-render
 if (!document.getElementById('starred-container').classList.contains('hidden')) {
 renderStarredEmails();
 }
 }
 });
 });
 // Notification system
 function showNewEmailNotification() {
 const notification = document.getElementById('new-email-notification');
 const sound = document.getElementById('notification-sound');
// Play sound
 sound.currentTime = 0;
 sound.play();
// Show notification
 notification.classList.remove('hidden');
// Hide after 3 seconds
 setTimeout(() => {
 notification.classList.add('hidden');
 }, 3000);
 // Add flashing effect to first email (simulating new email)
 const firstEmail = document.querySelector('.email-item');
 if (firstEmail) {
 firstEmail.classList.add('new-email', 'unread');
 setTimeout(() => {
 firstEmail.classList.remove('new-email');
 }, 1500); // Matches 3 flashes (0.5s each * 3)
 }
 }
 // Simulate new email arrival (for demo purposes)
 setInterval(() => {
 // In a real app, you would check your API/backend for new emails
 // This is just for demonstration
 if (Math.random() > 0.9) { // 10% chance to simulate new email
 showNewEmailNotification();
 }
 }, 10000); // Check every 10 seconds
 // Email collections
 const trashEmails = [];
 const starredEmails = [];
// Show starred container when clicking starred link
 document.getElementById('starred-link').addEventListener('click', function(e) {
 e.preventDefault();
 document.querySelector('main > div').classList.add('hidden');
 document.getElementById('starred-container').classList.remove('hidden');
 renderStarredEmails();
 });
 function renderStarredEmails() {
 const starredContainer = document.getElementById('starred-emails');
 starredContainer.innerHTML = '';
if (starredEmails.length === 0) {
 starredContainer.innerHTML = `
 <div class="p-8 text-center">
 <i class="fas fa-star text-4xl text-gray-500 mb-4"></i>
 <h3 class="text-xl font-bold text-gray-400 mb-2">Yıldızlı e-posta yok</h3>
 <p class="text-gray-500">Yıldızladığınız e-postalar burada görüntülenecek</p>
 </div>
 `;
 return;
 }
 starredEmails.forEach(email => {
 const clonedEmail = email.cloneNode(true);
clonedEmail.addEventListener('click', function() {
 const content = this.querySelector('.email-content');
 content.classList.toggle('open');
 });
const checkbox = clonedEmail.querySelector('input[type="checkbox"]');
 if (checkbox) {
 checkbox.addEventListener('click', function(e) {
 e.stopPropagation();
 if (this.checked) {
 clonedEmail.classList.add('selected');
 } else {
 clonedEmail.classList.remove('selected');
 }
 });
 }
starredContainer.appendChild(clonedEmail);
 });
 }
 // Move selected emails from starred to trash
 function moveToTrashFromStarred() {
 const selectedEmails = document.querySelectorAll('#starred-emails .email-item.selected');
 const starredCount = document.getElementById('starred-count');
 const trashCount = document.getElementById('trash-count');
selectedEmails.forEach(email => {
 const index = Array.from(starredEmails).findIndex(e => e.isEqualNode(email));
 if (index !== -1) {
 // Add to trash
 trashEmails.push(starredEmails[index]);
 // Remove from starred
 starredEmails.splice(index, 1);
 }
// Update counts
 const newStarredCount = starredEmails.length;
 starredCount.textContent = newStarredCount;
 if (newStarredCount === 0) {
 starredCount.classList.add('hidden');
 }
const newTrashCount = parseInt(trashCount.textContent) || 0;
 trashCount.textContent = newTrashCount + 1;
 trashCount.classList.remove('hidden');
 });
renderStarredEmails();
 }
 // Select all in starred
 document.getElementById('select-all-starred')?.addEventListener('click', function(e) {
 e.stopPropagation();
 const checkboxes = document.querySelectorAll('#starred-emails .email-item input[type="checkbox"]');
 const anyUnchecked = Array.from(checkboxes).some(checkbox => !checkbox.checked);
checkboxes.forEach(checkbox => {
 checkbox.checked = anyUnchecked;
 const emailItem = checkbox.closest('.email-item');
 if (anyUnchecked) {
 emailItem.classList.add('selected');
 } else {
 emailItem.classList.remove('selected');
 }
 });
const icon = this.querySelector('i');
 if (anyUnchecked) {
 icon.classList.remove('fa-check-square');
 icon.classList.add('fa-minus-square');
 } else {
 icon.classList.remove('fa-minus-square');
 icon.classList.add('fa-check-square');
 }
 });
 // Trash functionality
// Show trash container when clicking trash link
 document.getElementById('trash-link').addEventListener('click', function(e) {
 e.preventDefault();
 document.querySelector('main > div').classList.add('hidden');
 document.getElementById('trash-container').classList.remove('hidden');
 renderTrashEmails();
 });
 function goBackToInbox() {
 document.getElementById('trash-container').classList.add('hidden');
 document.getElementById('starred-container').classList.add('hidden');
 document.querySelector('main > div').classList.remove('hidden');
 }
 function renderTrashEmails() {
 const trashContainer = document.getElementById('trash-emails');
 trashContainer.innerHTML = '';
if (trashEmails.length === 0) {
 trashContainer.innerHTML = `
 <div class="p-8 text-center">
 <i class="fas fa-trash text-4xl text-gray-500 mb-4"></i>
 <h3 class="text-xl font-bold text-gray-400 mb-2">Çöp kutusu boş</h3>
 <p class="text-gray-500">Silinen e-postalar burada görüntülenecek</p>
 </div>
 `;
 return;
 }
 trashEmails.forEach(email => {
 // Clone the email to avoid modifying the original
 const clonedEmail = email.cloneNode(true);
// Add click event for expanding emails
 clonedEmail.addEventListener('click', function() {
 const content = this.querySelector('.email-content');
 content.classList.toggle('open');
 });
// Add checkbox functionality
 const checkbox = clonedEmail.querySelector('input[type="checkbox"]');
 if (checkbox) {
 checkbox.addEventListener('click', function(e) {
 e.stopPropagation();
 if (this.checked) {
 clonedEmail.classList.add('selected');
 } else {
 clonedEmail.classList.remove('selected');
 }
 });
 }
trashContainer.appendChild(clonedEmail);
 });
 }
 // Empty trash functionality
 function emptyTrash() {
 const selectedEmails = document.querySelectorAll('#trash-emails .email-item.selected');
 const trashCount = document.getElementById('trash-count');
if (selectedEmails.length === 0) {
 // If nothing selected, confirm emptying entire trash
 if (confirm('Tüm çöp kutusunu boşaltmak istediğinize emin misiniz?')) {
 trashEmails.length = 0;
 trashCount.textContent = '0';
 trashCount.classList.add('hidden');
 renderTrashEmails();
 }
 return;
 }
// Remove selected emails from trash
 selectedEmails.forEach(email => {
 const index = Array.from(trashEmails).findIndex(e => e.isEqualNode(email));
 if (index !== -1) {
 trashEmails.splice(index, 1);
 }
 });
// Update trash count
 const newCount = trashEmails.length;
 trashCount.textContent = newCount;
 if (newCount === 0) {
 trashCount.classList.add('hidden');
 }
renderTrashEmails();
 }
 // Select all in trash
 document.getElementById('select-all-trash')?.addEventListener('click', function(e) {
 e.stopPropagation();
 const checkboxes = document.querySelectorAll('#trash-emails .email-item input[type="checkbox"]');
 const anyUnchecked = Array.from(checkboxes).some(checkbox => !checkbox.checked);
checkboxes.forEach(checkbox => {
 checkbox.checked = anyUnchecked;
 const emailItem = checkbox.closest('.email-item');
 if (anyUnchecked) {
 emailItem.classList.add('selected');
 } else {
 emailItem.classList.remove('selected');
 }
 });
// Change icon based on selection state
 const icon = this.querySelector('i');
 if (anyUnchecked) {
 icon.classList.remove('fa-check-square');
 icon.classList.add('fa-minus-square');
 } else {
 icon.classList.remove('fa-minus-square');
 icon.classList.add('fa-check-square');
 }
 });
 // Move selected emails to trash
 function moveToTrash() {
 const selectedEmails = document.querySelectorAll('.email-item.selected');
 const trashCount = document.getElementById('trash-count');
selectedEmails.forEach(email => {
 // Clone the email to preserve it
 const clonedEmail = email.cloneNode(true);
 trashEmails.push(clonedEmail);
// Remove from inbox
 email.remove();
// Update trash count
 const currentCount = parseInt(trashCount.textContent) || 0;
 trashCount.textContent = currentCount + 1;
 trashCount.classList.remove('hidden');
 });
 }
 // Generate random email and password
 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;
 }
 // Uncomment to generate random email and password on page load
 /*
 window.addEventListener('load', function() {
 const randomEmail = generateRandomString(8) + '@tempmail.com';
 const randomPassword = generateRandomString(12);
document.getElementById('temp-email').textContent = randomEmail;
 document.getElementById('temp-password').textContent = randomPassword;
 });
 */
 </script>
<!-- Footer -->
 <footer class="bg-secondary text-gray-400 py-6 mt-8">
 <div class="container mx-auto px-4">
 <div class="flex flex-col md:flex-row justify-between items-center">
 <div class="mb-4 md:mb-0">
 <p class="text-sm">© 2025 TempMail. Tüm Haklar Saklıdır</p>
 </div>
 <div class="flex space-x-4">
 <a href="#" class="hover:text-primary transition-colors"><i class="fab fa-github"></i></a>
 <a href="#" class="hover:text-primary transition-colors"><i class="fab fa-twitter"></i></a>
 <a href="#" class="hover:text-primary transition-colors"><i class="fab fa-discord"></i></a>
 </div>
 </div>
 </div>
 </footer>
<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=Helleon/temp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>