Spaces:

atef91
/

gmails-bot

Running

App Files Files Community

atef91 commited on Jul 5, 2025

Commit

97ca436

verified ·

1 Parent(s): 81a148f

اضف مؤشر تقدمي بصري اثناء التوليد - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +266 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Gmails Bot
-emoji: 📉
-colorFrom: gray
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: gmails-bot
+emoji: 🐳
+colorFrom: blue
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,266 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>