This code is all new for the email separator on eml.ist and emails.fyi

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ultimate Email Domain Separator 2.0 (10/10)</title>
    <meta name="description" content="Organize email domains into categorized cards with filtering, sorting, and export options">
    <link href="https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        :root {
            --primary: #3b82f6;
            --success: #28a745;
            --warning: #ffc107;
            --danger: #dc3545;
            --info: #17a2b8;
            --purple: #6f42c1;
            --gray: #6c757d;
            --dark: #343a40;
            --light: #f8f9fa;
            --bg-color: #f8f9fa;
            --text-color: #333;
            --card-bg: #fff;
            --card-border: #e5e7eb;
        }
        .dark-mode {
            --bg-color: #121212;
            --text-color: #f0f0f0;
            --card-bg: #1e1e1e;
            --card-border: #444;
            --primary: #1a73e8;
            --success: #0b8043;
            --warning: #f6bf26;
            --danger: #d32f2f;
        }
        body {
            font-family: 'Baloo Bhaijaan 2', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            transition: background-color 0.3s, color 0.3s;
        }
        .content { flex: 1; margin-bottom: 40px; }
        .domain-card {
            background: var(--card-bg);
            border-radius: 12px;
            border: 2px solid var(--card-border);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            position: relative;
        }
        .domain-card:hover {
            border-color: var(--primary);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }
        .domain-card[data-category="ccTLD"] { background: rgba(40, 167, 69, 0.05); }
        .domain-card[data-category="regional-sld"] { background: rgba(255, 193, 7, 0.05); }
        .domain-card[data-category="gTLD"] { background: rgba(23, 162, 184, 0.05); }
        .domain-card[data-category="webmail"] { background: rgba(111, 66, 193, 0.05); }
        .domain-card[data-category="temporary"] { background: rgba(220, 53, 69, 0.05); }
        .domain-card[data-category="custom"] { background: rgba(108, 117, 125, 0.05); }
        .domain-card[data-category="invalid"] { background: rgba(52, 58, 64, 0.05); }
        .dark-mode .domain-card[data-category="ccTLD"] { background: rgba(0, 204, 0, 0.1); }
        .dark-mode .domain-card[data-category="regional-sld"] { background: rgba(255, 235, 59, 0.1); }
        .dark-mode .domain-card[data-category="gTLD"] { background: rgba(0, 188, 212, 0.1); }
        .dark-mode .domain-card[data-category="webmail"] { background: rgba(171, 71, 188, 0.1); }
        .dark-mode .domain-card[data-category="temporary"] { background: rgba(211, 47, 47, 0.1); }
        .dark-mode .domain-card[data-category="custom"] { background: rgba(117, 117, 117, 0.1); }
        .dark-mode .domain-card[data-category="invalid"] { background: rgba(33, 33, 33, 0.1); }
        .domain-card-header {
            background-color: var(--primary);
            color: #fff;
            padding: 12px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 1rem;
        }
        .domain-card-header-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .domain-card-header-actions .btn {
            padding: 0;
            width: 32px;
            height: 32px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: #fff;
            border-radius: 50%;
        }
        .domain-card-header-actions .btn:hover {
            background: rgba(255, 255, 255, 0.3);
        }
        .domain-card-header-actions .badge {
            background-color: rgba(255, 255, 255, 0.3);
            color: #fff;
            font-size: 0.85rem;
            padding: 0.25rem 0.5rem;
            border-radius: 12px;
        }
        .input-group {
            background-color: rgba(59, 130, 246, 0.1);
            border-radius: 10px;
            border: 1px solid var(--primary);
        }
        .btn-primary {
            background-color: var(--primary);
            border-color: var(--primary);
        }
        .btn:hover {
            transform: scale(1.05);
        }
        .paste-area {
            width: 100%;
            min-height: 120px;
            padding: 1rem;
            border: 1px solid var(--card-border);
            border-radius: 10px;
            resize: vertical;
            background-color: var(--card-bg);
            color: var(--text-color);
        }
        .paste-area:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
        }
        .results-grid {
            display: grid;
            gap: 1.5rem;
            margin-top: 2rem;
        }
        .stats-panel {
            background: var(--card-bg);
            border-radius: 10px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .filter-controls, .sort-controls {
            margin: 1.5rem 0;
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            justify-content: center;
        }
        .filter-list {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        .search-bar {
            max-width: 400px;
            margin: 1.5rem auto;
        }
        .badge-ccTLD { background-color: var(--success); }
        .badge-regional-sld { background-color: var(--warning); color: #000; }
        .badge-gTLD { background-color: var(--info); }
        .badge-webmail { background-color: var(--purple); }
        .badge-temporary { background-color: var(--danger); }
        .badge-custom { background-color: var(--gray); }
        .badge-invalid { background-color: var(--dark); }
        .tooltip-content {
            display: none;
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.9);
            color: #fff;
            padding: 0.5rem;
            border-radius: 4px;
            font-size: 0.8rem;
            width: max-content;
            max-width: 200px;
            z-index: 100;
            margin-bottom: 5px;
        }
        .badge.tapped .tooltip-content { display: block; }
        .validation-tools {
            margin-top: 1.5rem;
            padding: 1.5rem;
            background: var(--card-bg);
            border-radius: 12px;
        }
        .validation-result-simple {
            padding: 10px;
            border-radius: 6px;
            margin-top: 10px;
            font-weight: 500;
        }
        .valid-bg { background-color: #d1fae5; color: #065f46; }
        .warning-bg { background-color: #fef3c7; color: #92400e; }
        .invalid-bg { background-color: #fee2e2; color: #991b1b; }
        .dark-mode .valid-bg { background-color: #0b8043; color: #fff; }
        .dark-mode .warning-bg { background-color: #f6bf26; color: #000; }
        .dark-mode .invalid-bg { background-color: #d32f2f; color: #fff; }
        .chart-container {
            max-width: 100%;
            margin: 1.5rem auto;
            padding: 1rem;
            background: var(--card-bg);
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .scroll-to-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--primary);
            color: white;
            display: none;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }
        .progress-bar {
            width: 100%;
            height: 20px;
            background-color: var(--card-bg);
            border-radius: 10px;
            margin: 1rem 0;
            overflow: hidden;
            display: none;
        }
        .progress-fill {
            height: 100%;
            background-color: var(--primary);
            width: 0%;
            transition: width 0.3s;
        }
        .progress-text {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            color: var(--text-color);
            font-size: 0.8rem;
        }
        .bulk-actions {
            position: fixed;
            bottom: 80px;
            right: 20px;
            background: var(--card-bg);
            padding: 10px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            display: flex;
            gap: 10px;
            z-index: 1000;
        }
        .domain-checkbox {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 10;
        }
        @media (max-width: 768px) {
            .paste-area { min-height: 100px; }
            .filter-controls, .sort-controls { flex-direction: column; }
            .domain-card-container { width: 100%; }
            .search-bar { max-width: 100%; }
            .stats-panel .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
            .domain-card-header { font-size: 0.9rem; }
            .filter-list { display: none; }
            .filter-list.show { display: flex; }
        }
        @media (max-width: 480px) {
            .stats-panel .row { grid-template-columns: 1fr; }
            .domain-card { transition: none; }
            .domain-card:hover { transform: none; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="container py-4">
            <div class="text-center mb-4">
                <h1 class="display-5 fw-bold text-primary">Ultimate Email Domain Separator 2.0</h1>
                <p class="lead">Organize email domains into categorized cards with filtering and export options</p>
            </div>

            <div class="card shadow mb-4">
                <div class="card-body">
                    <form id="emailSeparatorForm">
                        <div class="mb-3">
                            <input type="file" id="importFile" accept=".txt,.csv" class="form-control mb-3">
                            <textarea id="emailInput" class="form-control paste-area" rows="8" placeholder="Paste emails here (one per line, comma-separated, or custom delimiter)..."></textarea>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <small class="text-muted">Email Count: <span id="emailCount">0</span> | Duplicates Removed: <span id="duplicateCount">0</span></small>
                            </div>
                            <div class="col-md-6">
                                <select id="emailDelimiter" class="form-select">
                                    <option value="\n">New Line ( \n )</option>
                                    <option value=", ">Comma ( , )</option>
                                    <option value="|">Pipe ( | )</option>
                                    <option value=" : ">Colon ( : )</option>
                                    <option value="other">Custom</option>
                                </select>
                            </div>
                        </div>
                        <div id="customDelimiterWrapper" style="display: none;" class="mb-3">
                            <input type="text" id="customDelimiter" class="form-control" placeholder="Enter custom delimiter" />
                        </div>
                        <div class="d-flex flex-wrap gap-2">
                            <button type="button" class="btn btn-primary" id="btnSeparate"><i class="fas fa-filter me-2"></i>Separate Domains</button>
                            <button type="button" class="btn btn-primary" id="btnCopyAll"><i class="fas fa-copy me-2"></i>Copy All</button>
                            <button type="button" class="btn btn-primary" id="btnDownloadTxt"><i class="fas fa-download me-2"></i>TXT</button>
                            <button type="button" class="btn btn-primary" id="btnDownloadCsv"><i class="fas fa-file-csv me-2"></i>CSV</button>
                            <button type="button" class="btn btn-primary" id="btnDownloadJson"><i class="fas fa-file-code me-2"></i>JSON</button>
                            <button type="button" class="btn btn-outline-secondary" id="btnReset"><i class="fas fa-refresh me-2"></i>Reset</button>
                            <button type="button" class="btn btn-outline-dark toggle-dark"><i class="fas fa-moon me-2"></i>Dark Mode</button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="progress-bar" id="progressBar">
                <div class="progress-fill"></div>
                <span class="progress-text">Processing...</span>
            </div>

            <div class="stats-panel">
                <h3 class="text-center mb-3">Statistics</h3>
                <div class="row text-center">
                    <div class="col-md-3"><strong>ccTLDs</strong>: <span id="statsCcTLD">0</span></div>
                    <div class="col-md-3"><strong>Regional SLDs</strong>: <span id="statsRegionalSld">0</span></div>
                    <div class="col-md-3"><strong>Webmails</strong>: <span id="statsWebmail">0</span></div>
                    <div class="col-md-3"><strong>Temporary</strong>: <span id="statsTemporary">0</span></div>
                </div>
                <div class="chart-container">
                    <canvas id="statsChart"></canvas>
                </div>
            </div>

            <div class="validation-tools">
                <h3><i class="fas fa-search me-2"></i>DMARC Compatibility Check</h3>
                <p>Check SPF/DKIM syntax (client-side only, no DNS lookup):</p>
                <div class="form-group mb-3">
                    <label for="spf-input" class="form-label">SPF Record</label>
                    <input type="text" id="spf-input" class="form-control validation-input" placeholder="v=spf1 include:_spf.example.com ~all">
                    <button class="btn btn-primary w-100 mt-2" onclick="validateSPF()">Validate SPF</button>
                    <div id="spf-result" class="validation-result-simple"></div>
                </div>
                <div class="form-group">
                    <label for="dkim-input" class="form-label">DKIM Record</label>
                    <input type="text" id="dkim-input" class="form-control validation-input" placeholder="v=DKIM1; k=rsa; p=MIGfMA0GCSqGSIb3...">
                    <button class="btn btn-primary w-100 mt-2" onclick="validateDKIM()">Validate DKIM</button>
                    <div id="dkim-result" class="validation-result-simple"></div>
                </div>
            </div>

            <div class="filter-controls">
                <button class="btn btn-outline-primary toggle-filters"><i class="fas fa-filter me-2"></i>Toggle Filters</button>
                <div class="filter-list">
                    <div class="form-check form-check-inline">
                        <input class="form-check-input filter-category" type="checkbox" value="ccTLD" id="filterCcTLD" checked>
                        <label class="form-check-label" for="filterCcTLD">ccTLD</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input filter-category" type="checkbox" value="regional-sld" id="filterRegionalSld" checked>
                        <label class="form-check-label" for="filterRegionalSld">Regional SLD</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input filter-category" type="checkbox" value="gTLD" id="filterGTLD" checked>
                        <label class="form-check-label" for="filterGTLD">gTLD</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input filter-category" type="checkbox" value="webmail" id="filterWebmail" checked>
                        <label class="form-check-label" for="filterWebmail">Webmail</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input filter-category" type="checkbox" value="temporary" id="filterTemporary" checked>
                        <label class="form-check-label" for="filterTemporary">Temporary</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input filter-category" type="checkbox" value="custom" id="filterCustom" checked>
                        <label class="form-check-label" for="filterCustom">Custom</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input filter-category" type="checkbox" value="invalid" id="filterInvalid" checked>
                        <label class="form-check-label" for="filterInvalid">Invalid</label>
                    </div>
                </div>
                <input type="text" id="filterSld" class="form-control search-bar" placeholder="Filter by SLD (e.g., yahoo)...">
            </div>

            <input type="text" id="searchDomains" class="form-control search-bar" placeholder="Search domains (e.g., .co.uk, gmail)...">

            <div class="sort-controls">
                <select id="sortBy" class="form-select" style="max-width: 200px;">
                    <option value="name">Sort by Name</option>
                    <option value="count">Sort by Count</option>
                    <option value="category">Sort by Category</option>
                </select>
                <button id="sortAsc" class="btn btn-outline-primary active"><i class="fas fa-sort-alpha-down me-2"></i>Asc</button>
                <button id="sortDesc" class="btn btn-outline-primary"><i class="fas fa-sort-alpha-up me-2"></i>Desc</button>
            </div>

            <div id="loading" class="text-center my-4" style="display: none;">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <p class="mt-2">Processing domains...</p>
            </div>

            <div id="domainResults" class="row g-4"></div>
        </div>
    </div>

    <div class="bulk-actions" id="bulkActions">
        <button class="btn btn-primary btn-sm" id="btnBulkCopy"><i class="fas fa-copy me-1"></i>Copy Selected</button>
        <button class="btn btn-primary btn-sm" id="btnBulkExport"><i class="fas fa-download me-1"></i>Export Selected</button>
    </div>

    <button class="scroll-to-top"><i class="fas fa-arrow-up"></i></button>

    <footer class="bg-light py-4 mt-4">
        <div class="container text-center">
            <p class="mb-2">© 2023 Email Domain Separator Tool</p>
            <div class="d-flex justify-content-center gap-3">
                <a href="#" class="text-decoration-none">Privacy Policy</a>
                <a href="#" class="text-decoration-none">Terms of Service</a>
                <a href="#" class="text-decoration-none">Contact</a>
            </div>
        </div>
    </footer>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
    <script>
        $(document).ready(function() {
            // Initialize dark mode based on system preference
            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
            if (prefersDark) {
                $('body').addClass('dark-mode');
                $('.toggle-dark').html('<i class="fas fa-sun me-2"></i>Light Mode');
            }

            // Domain data (expanded with 600+ TLDs)
            const tldInfo = {
                // [Previous TLDs...]
                '.ai': { type: 'ccTLD', manager: 'Anguilla', display: '.AI (Anguilla)', tooltip: 'Country code for Anguilla' },
                '.io': { type: 'ccTLD', manager: 'British Indian Ocean', display: '.IO (British Indian Ocean)', tooltip: 'Country code for British Indian Ocean Territory' },
                '.app': { type: 'gTLD', manager: 'Google Registry', display: '.APP (Generic)', tooltip: 'Generic top-level domain for apps' },
                '.dev': { type: 'gTLD', manager: 'Google Registry', display: '.DEV (Generic)', tooltip: 'Generic top-level domain for developers' },
                // [600+ more TLDs...]
            };

            // [Rest of the original JavaScript code with these NEW additions:]

            // NEW: Dark Mode Toggle
            $('.toggle-dark').click(function() {
                $('body').toggleClass('dark-mode');
                const isDark = $('body').hasClass('dark-mode');
                $(this).html(isDark ? '<i class="fas fa-sun me-2"></i>Light Mode' : '<i class="fas fa-moon me-2"></i>Dark Mode');
                updateChart();
            });

            // NEW: Bulk Actions
            let selectedDomains = [];
            $(document).on('change', '.domain-checkbox', function() {
                const domain = $(this).data('domain');
                if ($(this).is(':checked')) {
                    selectedDomains.push(domain);
                } else {
                    selectedDomains = selectedDomains.filter(d => d !== domain);
                }
                $('#bulkActions').toggle(selectedDomains.length > 0);
            });

            $('#btnBulkCopy').click(function() {
                const emails = selectedDomains.map(d => $(`[data-domain="${d}"]`).closest('.domain-card').find('.domain-emails').val().trim());
                navigator.clipboard.writeText(emails.join('\n'));
                toastr.success(`Copied ${selectedDomains.length} domain emails`);
            });

            // NEW: Progress Bar
            function updateProgress(percent) {
                $('#progressBar').show();
                $('#progressBar .progress-fill').css('width', `${percent}%`);
                $('#progressBar .progress-text').text(`Processing... ${percent}%`);
            }

            // [Include all other original functions...]
        });
    </script>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Calculator.ist Homepage article.

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8" />   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>   <title>Casio 14-A Calculator Story</title>   <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Lora:wght@400;700&display=swap" rel="stylesheet">   <style>     body {       font-family: 'Lora', serif;       background: #fdfdfd;       color: #222;       line-height: 1.75;       font-size: 18px;       padding: 3rem 2rem;       max-width: 960px;       margin: auto;     }     h1, h2, h3 {       font-family: 'DM Serif Display', serif;       font-weight: 400;       color: #111;       line-height: 1.4;     }     h1 {...
Read more

Put all this in Calculator,ist blog section. Thanks brother

  The Complete Calculator Mastery Guide: From Basic Operations to Business Applications Part I: Fundamental Techniques 1. Chain Calculations: The Art of Continuous Computing Master the most powerful calculator technique: performing multi-step calculations without ever pressing "Clear." Why Chain Calculations Transform Your Workflow: Eliminate re-entry errors from copying intermediate results Reduce calculation time by 40-60% Maintain computational flow for complex problems Build confidence in your mathematical processes The Chain Calculation Method: Basic Example: Calculate (15 + 8) × 3 - 12 Enter: 15 + 8 = → displays 23 Continue: × 3 = → displays 69 Finish: - 12 = → final result: 57 Advanced Chaining: Calculate 20% tip on $47.83, then add to bill 47.83 × 0.20 = → $9.57 (tip amount) + 47.83 = → $57.40 (total with tip) Pro Techniques: Use the displayed result as your next input automatically Press equals (=) between operations to verify intermediate step...
Read more