headerın altına banner ekle - Follow Up Deployment

index.html

@@ -51,46 +51,28 @@
             background-color: #03DAC6;
         }
         .btn-primary {
-            background: linear-gradient(90deg, 
-                #FF0000, 
-                #FFFF00, 
-                #00FF00, 
-                #FF0000);
-            background-size: 200vw 100%;
+            background-color: #BB86FC;
             color: #121212;
             transition: all 0.3s ease;
-            animation: gradientSlide 4s linear infinite;
         }
         .btn-primary:hover {
-            box-shadow: 0 0 15px #BB86FC;
+            background-color: #a971f3;
         }
         .btn-accent {
-            background: linear-gradient(90deg, 
-                #FF0000, 
-                #FFFF00, 
-                #00FF00, 
-                #FF0000);
-            background-size: 200vw 100%;
+            background-color: #FF7597;
             color: #121212;
             transition: all 0.3s ease;
-            animation: gradientSlide 4s linear infinite;
         }
         .btn-accent:hover {
-            box-shadow: 0 0 15px #FF7597;
+            background-color: #ff5c84;
         }
         .btn-green {
-            background: linear-gradient(90deg, 
-                #FF0000, 
-                #FFFF00, 
-                #00FF00, 
-                #FF0000);
-            background-size: 200vw 100%;
+            background-color: #03DAC6;
             color: #121212;
             transition: all 0.3s ease;
-            animation: gradientSlide 4s linear infinite;
         }
         .btn-green:hover {
-            box-shadow: 0 0 15px #03DAC6;
+            background-color: #02c2b0;
         }
         .dropdown-menu {
             display: none;
@@ -113,6 +95,17 @@
         .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;
@@ -154,23 +147,8 @@
         .inbox-count:hover {
             transform: scale(1.1);
         }
-        .inbox-count:hover::after {
-            content: '';
-            position: absolute;
-            top: -4px;
-            left: -4px;
-            right: -4px;
-            bottom: -4px;
-            border-radius: 9999px;
-            padding: 2px;
-            background: linear-gradient(90deg, 
-                #FF0000, 
-                #FFFF00, 
-                #00FF00, 
-                #FF0000);
-            background-size: 200vw 100%;
-            animation: gradientSlide 4s linear infinite;
-            z-index: -1;
+        .inbox-count:hover {
+            background-color: #02c2b0;
         }
     </style>
 </head>
@@ -194,21 +172,35 @@
                 
                 <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">Gir</h3>
+                        <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">Sign In</button>
+                        <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>Logout</a>
+                    <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 top-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg z-50 flex items-center">
+        <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>New email received!</span>
+            <span>Yeni Email Geldi!</span>
         </div>
 
         <!-- Main Content -->
@@ -216,52 +208,53 @@
             <!-- 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">Your Temporary Email</h2>
+                    <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> Copy
+                                <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">Password:</span>
+                            <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> Copy
+                                <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>Refresh Inbox</span>
+                        <span>Yenile</span>
                     </button>
                 </div>
                 
                 
                 <div>
-                    <h3 class="text-lg font-bold text-primary mb-3">Folders</h3>
+                    <h3 class="text-lg font-bold text-primary mb-3">Dosya</h3>
                     <ul class="space-y-2">
                         <li>
                             <a href="#" class="flex items-center text-gray-300 hover-text-primary">
                                 <i class="fas fa-inbox mr-3 text-primary"></i>
-                                <span>Inbox</span>
+                                <span>Gelen Kutusu</span>
                                 <span class="inbox-count ml-auto">12</span>
                             </a>
                         </li>
                         <li>
                             <a href="#" class="flex items-center text-gray-300 hover-text-secondary">
                                 <i class="fas fa-star mr-3 text-secondary"></i>
-                                <span>Starred</span>
+                                <span>Yıldız</span>
                             </a>
                         </li>
                         <li>
-                            <a href="#" class="flex items-center text-gray-300 hover-text-accent">
+                            <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>Trash</span>
+                                <span>Çöp</span>
+                                <span id="trash-count" class="inbox-count ml-auto hidden">0</span>
                             </a>
                         </li>
                     </ul>
@@ -276,13 +269,16 @@
                             <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">Inbox</h2>
+                            <h2 class="text-lg font-bold text-primary">Gelen Kutusu</h2>
                         </div>
                         <div class="flex space-x-2">
-                            <button class="bg-dark hover:bg-gray-800 p-2 rounded">
+                            <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 class="bg-dark hover:bg-gray-800 p-2 rounded">
+                            <button id="archive-selected" class="bg-dark hover:bg-gray-800 p-2 rounded">
                                 <i class="fas fa-archive text-secondary"></i>
                             </button>
                         </div>
@@ -293,6 +289,7 @@
                         <!-- 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>
@@ -301,10 +298,10 @@
                                 </div>
                                 <div class="flex-1">
                                     <div class="flex justify-between items-start">
-                                        <h3 class="font-bold text-primary">Welcome to TempMail</h3>
-                                        <span class="text-xs text-gray-400">2 min ago</span>
+                                        <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">Thank you for using our temporary email service...</p>
+                                    <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">
@@ -321,6 +318,7 @@
                         <!-- 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>
@@ -330,7 +328,7 @@
                                 <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 hour ago</span>
+                                        <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>
@@ -348,6 +346,7 @@
                         <!-- 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>
@@ -357,7 +356,7 @@
                                 <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 hours ago</span>
+                                        <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>
@@ -400,7 +399,7 @@
             navigator.clipboard.writeText(email);
             
             this.classList.add('copied');
-            this.innerHTML = '<i class="fas fa-check"></i> Copied!';
+            this.innerHTML = '<i class="fas fa-check"></i> Kopyalandı!';
             
             setTimeout(() => {
                 this.classList.remove('copied');
@@ -414,7 +413,7 @@
             navigator.clipboard.writeText(password);
             
             this.classList.add('copied');
-            this.innerHTML = '<i class="fas fa-check"></i> Copied!';
+            this.innerHTML = '<i class="fas fa-check"></i> Kopyalandı!';
             
             setTimeout(() => {
                 this.classList.remove('copied');
@@ -422,6 +421,62 @@
             }, 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');
+            }
+        });
+
+        // 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) {
@@ -455,6 +510,15 @@
             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)
@@ -466,6 +530,62 @@
             }
         }, 10000); // Check every 10 seconds
 
+        // Trash functionality
+        const trashEmails = [];
+        
+        // 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.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 => {
+                trashContainer.appendChild(email);
+            });
+        }
+
+        // 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';
@@ -487,5 +607,21 @@
         });
         */
     </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>