index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ImapSync Online - Email Migration Tool</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }
        input[type="text"], input[type="password"], input[type="number"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-sizing: border-box;
        }
        .server-section {
            border: 1px solid #ddd;
            padding: 20px;
            margin: 20px 0;
            border-radius: 8px;
            background: #f9f9f9;
        }
        .server-section h3 {
            margin-top: 0;
            color: #333;
        }
        .row {
            display: flex;
            gap: 20px;
        }
        .col {
            flex: 1;
        }
        .submit-btn {
            background: #007cba;
            color: white;
            padding: 15px 30px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            width: 100%;
            margin-top: 20px;
        }
        .submit-btn:hover {
            background: #005a87;
        }
        .warning {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            color: #856404;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        .checkbox-group {
            margin: 15px 0;
        }
        .checkbox-group input[type="checkbox"] {
            margin-right: 8px;
        }
    </style>
    <script>
        // Save form data to localStorage
        function saveFormData() {
            const formData = {
                host1: document.getElementById('host1').value,
                port1: document.getElementById('port1').value,
                user1: document.getElementById('user1').value,
                host2: document.getElementById('host2').value,
                port2: document.getElementById('port2').value,
                user2: document.getElementById('user2').value,
                ssl1: document.getElementById('ssl1').checked,
                ssl2: document.getElementById('ssl2').checked,
                dry_run: document.getElementById('dry_run').checked,
                delete1: document.getElementById('delete1').checked,
                automap: document.getElementById('automap').checked,
                gmail1: document.getElementById('gmail1').checked,
                gmail2: document.getElementById('gmail2').checked
            };
            localStorage.setItem('imapsync_form_data', JSON.stringify(formData));
            showSaveIndicator();
        }

        // Show brief save indicator
        function showSaveIndicator() {
            const indicator = document.getElementById('save-indicator');
            if (indicator) {
                indicator.style.display = 'inline';
                setTimeout(() => {
                    indicator.style.display = 'none';
                }, 1000);
            }
        }

        // Load form data from localStorage
        function loadFormData() {
            const savedData = localStorage.getItem('imapsync_form_data');
            if (savedData) {
                try {
                    const formData = JSON.parse(savedData);

                    // Fill text inputs
                    if (formData.host1) document.getElementById('host1').value = formData.host1;
                    if (formData.port1) document.getElementById('port1').value = formData.port1;
                    if (formData.user1) document.getElementById('user1').value = formData.user1;
                    if (formData.host2) document.getElementById('host2').value = formData.host2;
                    if (formData.port2) document.getElementById('port2').value = formData.port2;
                    if (formData.user2) document.getElementById('user2').value = formData.user2;

                    // Fill checkboxes
                    if (formData.ssl1 !== undefined) document.getElementById('ssl1').checked = formData.ssl1;
                    if (formData.ssl2 !== undefined) document.getElementById('ssl2').checked = formData.ssl2;
                    if (formData.dry_run !== undefined) document.getElementById('dry_run').checked = formData.dry_run;
                    if (formData.delete1 !== undefined) document.getElementById('delete1').checked = formData.delete1;
                    if (formData.automap !== undefined) document.getElementById('automap').checked = formData.automap;
                    if (formData.gmail1 !== undefined) document.getElementById('gmail1').checked = formData.gmail1;
                    if (formData.gmail2 !== undefined) document.getElementById('gmail2').checked = formData.gmail2;
                } catch (e) {
                    console.log('Error loading saved form data:', e);
                }
            }
        }

        // Auto-save form data when inputs change
        function setupAutoSave() {
            const inputs = document.querySelectorAll('input[type="text"], input[type="password"], input[type="number"], input[type="checkbox"]');
            inputs.forEach(input => {
                input.addEventListener('change', saveFormData);
                input.addEventListener('input', saveFormData);
            });
        }

        // Clear saved data
        function clearSavedData() {
            if (confirm('Clear all saved form data?')) {
                localStorage.removeItem('imapsync_form_data');
                location.reload();
            }
        }

        // Load data when page loads
        document.addEventListener('DOMContentLoaded', function() {
            loadFormData();
            setupAutoSave();
        });
    </script>
</head>
<body>
    <div class="container">
        <div style="text-align: right; margin-bottom: 20px;">
            <span id="save-indicator" style="display: none; background: #28a745; color: white; padding: 4px 8px; border-radius: 3px; font-size: 11px; margin-right: 10px;">💾 Saved</span>
            <button onclick="clearSavedData()" style="background: #dc3545; color: white; padding: 8px 15px; border: none; border-radius: 5px; font-size: 12px; margin-right: 10px; cursor: pointer;">🗑️ Clear Saved Data</button>
            <a href="logs.php" style="background: #6c757d; color: white; padding: 8px 15px; text-decoration: none; border-radius: 5px; font-size: 12px;">📋 View Logs</a>
        </div>
        <h1>🔄 ImapSync Online</h1>
        <p style="text-align: center; color: #666;">Sync emails between IMAP servers quickly and securely</p>

        <div class="warning">
            <strong>⚠️ Important:</strong> This tool will sync emails from your source server to your destination server.
            Make sure you have proper backups before proceeding. Your credentials are processed securely and not stored.
        </div>

        <form method="POST" action="sync.php">
            <div class="server-section">
                <h3>📨 Source Server (From)</h3>
                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            <label for="host1">Server Address:</label>
                            <input type="text" id="host1" name="host1" placeholder="imap.gmail.com" required>
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-group">
                            <label for="port1">Port (optional):</label>
                            <input type="number" id="port1" name="port1" placeholder="993">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            <label for="user1">Username/Email:</label>
                            <input type="text" id="user1" name="user1" placeholder="your-email@gmail.com" required>
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-group">
                            <label for="password1">Password:</label>
                            <input type="password" id="password1" name="password1" required>
                        </div>
                    </div>
                </div>
                <div class="checkbox-group">
                    <label><input type="checkbox" name="ssl1" checked> Use SSL/TLS (recommended)</label>
                </div>
            </div>

            <div class="server-section">
                <h3>📥 Destination Server (To)</h3>
                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            <label for="host2">Server Address:</label>
                            <input type="text" id="host2" name="host2" placeholder="imap.example.com" required>
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-group">
                            <label for="port2">Port (optional):</label>
                            <input type="number" id="port2" name="port2" placeholder="993">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            <label for="user2">Username/Email:</label>
                            <input type="text" id="user2" name="user2" placeholder="your-email@example.com" required>
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-group">
                            <label for="password2">Password:</label>
                            <input type="password" id="password2" name="password2" required>
                        </div>
                    </div>
                </div>
                <div class="checkbox-group">
                    <label><input type="checkbox" name="ssl2" checked> Use SSL/TLS (recommended)</label>
                </div>
            </div>

            <div class="server-section">
                <h3>⚙️ Sync Options</h3>
                <div class="checkbox-group">
                    <label><input type="checkbox" name="dry_run" checked> Dry run (test without actual sync)</label>
                    <label><input type="checkbox" name="delete1"> Delete from source after sync</label>
                    <label><input type="checkbox" name="automap" checked> Auto-create missing folders</label>
                    <label><input type="checkbox" name="gmail1"> Source is Gmail</label>
                    <label><input type="checkbox" name="gmail2"> Destination is Gmail</label>
                </div>
            </div>

            <button type="submit" class="submit-btn">🚀 Start Email Sync</button>
        </form>
    </div>
</body>
</html>