Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Gmail Dot Trick Generator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> | |
| <style> | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-out forwards; | |
| } | |
| .copied { | |
| background-color: rgba(74, 222, 128, 0.1); | |
| border-color: rgba(74, 222, 128, 1); | |
| } | |
| .email-option:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| #results-container { | |
| max-height: 400px; | |
| overflow-y: auto; | |
| scrollbar-width: thin; | |
| } | |
| #results-container::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| #results-container::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| #results-container::-webkit-scrollbar-thumb { | |
| background-color: #888; | |
| border-radius: 3px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-blue-50 to-purple-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <!-- Header --> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-3xl md:text-4xl font-bold text-gray-800 mb-2">Gmail Dot Trick Generator</h1> | |
| <p class="text-gray-600 max-w-2xl mx-auto"> | |
| Create unlimited alternative email addresses using Gmail's dot trick. All emails will be delivered to your original inbox. | |
| </p> | |
| </header> | |
| <!-- Main Card --> | |
| <div class="bg-white rounded-xl shadow-lg p-6 max-w-3xl mx-auto relative"> | |
| <!-- Loader (hidden initially) --> | |
| <div id="loader" class="absolute hidden inset-0 bg-white bg-opacity-70 flex items-center justify-center rounded-xl z-10"> | |
| <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-600"></div> | |
| </div> | |
| <!-- Input Section --> | |
| <div class="flex flex-col md:flex-row gap-4 mb-8"> | |
| <div class="flex-1"> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Original Gmail Address</label> | |
| <div class="relative flex items-center"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-envelope text-gray-400"></i> | |
| </div> | |
| <input type="email" id="email" class="pl-10 w-full rounded-lg border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="yourname@gmail.com"> | |
| </div> | |
| </div> | |
| <div class="flex-shrink-0 self-end"> | |
| <button id="generate-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2.5 rounded-lg font-medium transition duration-200 shadow-md hover:shadow-lg"> | |
| Generate <i class="fas fa-magic ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Options Section --> | |
| <div class="mb-8"> | |
| <h2 class="text-lg font-semibold text-gray-700 mb-3">Generation Options</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="email-option p-4 border rounded-lg bg-gray-50 transition cursor-pointer"> | |
| <div class="flex items-center mb-2"> | |
| <input type="radio" id="basic" name="variant" value="basic" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500"> | |
| <label for="basic" class="ml-2 block text-sm font-medium text-gray-700">Basic Variations</label> | |
| </div> | |
| <p class="text-xs text-gray-500">Add dots in different positions (e.g., y.ourname@gmail.com)</p> | |
| </div> | |
| <div class="email-option p-4 border rounded-lg bg-gray-50 transition cursor-pointer"> | |
| <div class="flex items-center mb-2"> | |
| <input type="radio" id="plus" name="variant" value="plus" class="h-4 w-4 text-blue-600 focus:ring-blue-500"> | |
| <label for="plus" class="ml-2 block text-sm font-medium text-gray-700">Plus Variations</label> | |
| </div> | |
| <p class="text-xs text-gray-500">Use plus sign (e.g., yourname+variation@gmail.com)</p> | |
| </div> | |
| <div class="email-option p-4 border rounded-lg bg-gray-50 transition cursor-pointer"> | |
| <div class="flex items-center mb-2"> | |
| <input type="radio" id="combined" name="variant" value="combined" class="h-4 w-4 text-blue-600 focus:ring-blue-500"> | |
| <label for="combined" class="ml-2 block text-sm font-medium text-gray-700">Combined</label> | |
| </div> | |
| <p class="text-xs text-gray-500">Combine dots and plus sign variations</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Results Section --> | |
| <div> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h2 class="text-lg font-semibold text-gray-700">Generated Email Variations</h2> | |
| <button id="copy-all" class="text-sm bg-gray-200 hover:bg-gray-300 px-3 py-1 rounded-md text-gray-700 flex items-center"> | |
| <i class="far fa-copy mr-1"></i> Copy All | |
| </button> | |
| </div> | |
| <div id="results-container" class="border rounded-lg divide-y"> | |
| <!-- Generated emails will appear here --> | |
| <div class="text-center py-16 text-gray-500" id="empty-state"> | |
| <i class="far fa-envelope-open text-4xl mb-3 opacity-50"></i> | |
| <p>Enter your Gmail address and click "Generate" to see variations</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Info Section --> | |
| <div class="mt-12 bg-white rounded-xl shadow-lg p-6 max-w-3xl mx-auto"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">How the Gmail Dot Trick Works</h2> | |
| <div class="space-y-4"> | |
| <div class="p-4 bg-blue-50 rounded-lg"> | |
| <h3 class="font-medium text-blue-800 mb-2"><i class="fas fa-info-circle mr-2"></i>Dots Don't Matter</h3> | |
| <p class="text-gray-700">Gmail ignores dots in the username part of the address. So "your.name@gmail.com" is the same as "yourname@gmail.com".</p> | |
| </div> | |
| <div class="p-4 bg-purple-50 rounded-lg"> | |
| <h3 class="font-medium text-purple-800 mb-2"><i class="fas fa-plus-circle mr-2"></i>Plus Sign Usage</h3> | |
| <p class="text-gray-700">You can add a plus sign (+) and any word before the @ symbol. Emails to "yourname+shopping@gmail.com" still go to "yourname@gmail.com".</p> | |
| </div> | |
| <div class="p-4 bg-green-50 rounded-lg"> | |
| <h3 class="font-medium text-green-800 mb-2"><i class="fas fa-lightbulb mr-2"></i>Practical Uses</h3> | |
| <ul class="list-disc pl-5 text-gray-700 space-y-1"> | |
| <li>Filter incoming emails to different folders</li> | |
| <li>Track which services might be selling your email</li> | |
| <li>Create unique addresses for different signups</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const generateBtn = document.getElementById('generate-btn'); | |
| const emailInput = document.getElementById('email'); | |
| const resultsContainer = document.getElementById('results-container'); | |
| const emptyState = document.getElementById('empty-state'); | |
| const copyAllBtn = document.getElementById('copy-all'); | |
| // Email option click handlers | |
| const emailOptions = document.querySelectorAll('.email-option'); | |
| emailOptions.forEach(option => { | |
| option.addEventListener('click', function() { | |
| const radio = this.querySelector('input[type="radio"]'); | |
| radio.checked = true; | |
| }); | |
| }); | |
| generateBtn.addEventListener('click', generateVariations); | |
| emailInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| generateVariations(); | |
| } | |
| }); | |
| function generateVariations() { | |
| // Show loader | |
| document.getElementById('loader').classList.remove('hidden'); | |
| const originalEmail = emailInput.value.trim(); | |
| const variant = document.querySelector('input[name="variant"]:checked').value; | |
| // Basic validation | |
| if (!originalEmail || !originalEmail.includes('@gmail.com')) { | |
| alert('Please enter a valid Gmail address (should end with @gmail.com)'); | |
| return; | |
| } | |
| // Extract username part | |
| const username = originalEmail.split('@')[0]; | |
| const domain = '@gmail.com'; | |
| // Clear previous results | |
| resultsContainer.innerHTML = ''; | |
| emptyState.style.display = 'none'; | |
| // Generate variations based on selected method | |
| let variations = []; | |
| if (variant === 'basic' || variant === 'combined') { | |
| // Generate dot variations | |
| for (let i = 1; i < username.length; i++) { | |
| const variantEmail = username.slice(0, i) + '.' + username.slice(i) + domain; | |
| variations.push(variantEmail); | |
| } | |
| } | |
| if (variant === 'plus' || variant === 'combined') { | |
| // Generate plus variations | |
| const plusVariations = ['shopping', 'work', 'social', 'newsletters', 'signup', 'temporary', 'personal', 'business', 'finance', 'travel']; | |
| plusVariations.forEach(word => { | |
| variations.push(`${username}+${word}${domain}`); | |
| }); | |
| } | |
| // Hide loader when all animations are queued | |
| setTimeout(() => { | |
| document.getElementById('loader').classList.add('hidden'); | |
| }, (variations.length * 50) + 500); // Match animation duration | |
| // Display variations with animation | |
| variations.forEach((email, index) => { | |
| const emailElement = document.createElement('div'); | |
| emailElement.className = 'p-3 flex justify-between items-center fade-in'; | |
| emailElement.style.animationDelay = `${index * 0.05}s`; | |
| emailElement.innerHTML = ` | |
| <span class="text-gray-800 font-mono text-sm md:text-base">${email}</span> | |
| <button class="copy-btn px-3 py-1 rounded border text-gray-600 hover:text-blue-600 hover:border-blue-400 transition"> | |
| <i class="far fa-copy"></i> | |
| </button> | |
| `; | |
| resultsContainer.appendChild(emailElement); | |
| }); | |
| // Add copy event listeners | |
| document.querySelectorAll('.copy-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const emailToCopy = this.parentNode.querySelector('span').textContent; | |
| navigator.clipboard.writeText(emailToCopy).then(() => { | |
| this.innerHTML = '<i class="fas fa-check"></i>'; | |
| this.classList.add('copied'); | |
| setTimeout(() => { | |
| this.innerHTML = '<i class="far fa-copy"></i>'; | |
| this.classList.remove('copied'); | |
| }, 2000); | |
| }); | |
| }); | |
| }); | |
| } | |
| // Copy all functionality | |
| copyAllBtn.addEventListener('click', function() { | |
| const emails = Array.from(document.querySelectorAll('#results-container span')).map(el => el.textContent); | |
| if (emails.length === 0) { | |
| alert('No emails to copy. Generate some variations first.'); | |
| return; | |
| } | |
| navigator.clipboard.writeText(emails.join('\n')).then(() => { | |
| copyAllBtn.innerHTML = '<i class="fas fa-check mr-1"></i> Copied!'; | |
| setTimeout(() => { | |
| copyAllBtn.innerHTML = '<i class="far fa-copy mr-1"></i> Copy All'; | |
| }, 2000); | |
| }); | |
| }); | |
| }); | |
| </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=atef91/gmails-bot" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |