gmail-to-exchange365
Version:
Complete Gmail to Exchange 365 migration tool with UI - Migrate emails, attachments, and folders seamlessly
90 lines (83 loc) • 3.17 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Gmail → Exchange Migrator</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<header>
<h1>📧 Gmail → Exchange 365 Migrator</h1>
<p class="subtitle">Migrate your emails, attachments, and folders seamlessly</p>
</header>
<div class="auth-section">
<h2>Step 1: Connect Accounts</h2>
<div class="auth-buttons">
<div class="auth-item">
<button id="google-btn" class="btn btn-google">
<span class="btn-icon">🔐</span>
<span id="google-status">Connect Google</span>
</button>
<div id="google-indicator" class="status-indicator"></div>
</div>
<div class="auth-item">
<button id="ms-btn" class="btn btn-ms">
<span class="btn-icon">🔐</span>
<span id="ms-status">Connect Microsoft</span>
</button>
<div id="ms-indicator" class="status-indicator"></div>
</div>
</div>
</div>
<div class="migration-section">
<h2>Step 2: Configure & Start Migration</h2>
<div class="config-panel">
<div class="config-item">
<label for="batch-size">Batch Size:</label>
<input type="number" id="batch-size" value="10" min="1" max="50" />
<span class="help-text">Emails per batch</span>
</div>
<div class="config-item">
<label for="delay">Delay (ms):</label>
<input type="number" id="delay" value="1000" min="0" max="10000" />
<span class="help-text">Between batches</span>
</div>
</div>
<div class="migration-controls">
<button id="start-btn" class="btn btn-primary" disabled>
🚀 Start Migration
</button>
<button id="pause-btn" class="btn btn-secondary" disabled>
⏸️ Pause
</button>
<button id="resume-btn" class="btn btn-secondary" disabled>
▶️ Resume
</button>
<button id="stop-btn" class="btn btn-danger" disabled>
⏹️ Stop
</button>
</div>
</div>
<div class="progress-section">
<h2>Migration Progress</h2>
<div class="progress-container">
<div class="progress-bar">
<div id="progress-fill" class="progress-fill"></div>
</div>
<div class="progress-text">
<span id="progress-percentage">0%</span>
<span id="progress-count">0 / 0</span>
</div>
</div>
<div id="progress-message" class="progress-message">Ready to start migration</div>
</div>
<div class="logs-section">
<h2>Logs</h2>
<div id="logs" class="logs-container"></div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>