Files
Advanced-Smtp-Tester/index.html

241 lines
9.0 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="Advanced SMTP Tester - Test your SMTP configurations securely and easily."
/>
<title>Advanced SMTP Tester</title>
<link rel="icon" type="image/png" href="public/Logo.png" />
<link rel="stylesheet" href="public/styles.css" />
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"
rel="stylesheet"
/>
</head>
<body>
<!-- Theme Toggle -->
<button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
🌙
</button>
<div class="background-animation"></div>
<div class="container">
<!-- Header -->
<header class="header">
<div class="header-content">
<h1 class="title">
<img src="public/Logo.png" alt="Logo" class="title-icon" />
SMTP Tester
</h1>
<p class="subtitle">
Advanced SMTP Configuration & Delivery Testing Utility
</p>
<a
href="https://www.youtube.com/@beyondcloudtechnology"
target="_blank"
rel="noopener noreferrer"
class="youtube-link"
>
<svg class="youtube-icon" viewBox="0 0 24 24" fill="currentColor">
<path
d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"
/>
</svg>
Watch on YouTube @beyondcloudtechnology
</a>
</div>
</header>
<!-- Main Content Area -->
<main class="main-content">
<div class="panel">
<div class="panel-header">
<div class="panel-icon">📧</div>
<h2 class="panel-title">Server Configuration</h2>
</div>
<form id="smtpForm" class="smtp-form">
<!-- Preset Selector -->
<div class="preset-selector">
<label for="presetSelect">⚡ Quick Presets</label>
<select id="presetSelect">
<option value="">Select a preset...</option>
<option value="office365">Microsoft Office 365</option>
<option value="gmail">Google Gmail</option>
<option value="sendgrid">SendGrid</option>
<option value="mailgun">Mailgun</option>
<option value="amazonses">Amazon SES</option>
<option value="mailassure">Mail Assure</option>
<option value="custom">💾 Last Used Configuration</option>
</select>
</div>
<div class="form-grid">
<!-- Server Details -->
<div class="form-group">
<label for="host">SMTP Host</label>
<input
type="text"
id="host"
name="host"
placeholder="smtp.example.com"
required
/>
</div>
<div class="form-group">
<label for="port">Port</label>
<input
type="number"
id="port"
name="port"
placeholder="587"
required
/>
</div>
<div class="form-group">
<label for="secure">Encryption</label>
<select id="secure" name="secure">
<option value="false">STARTTLS (587/25)</option>
<option value="true">SSL/TLS (465)</option>
<option value="none">Unencrypted (No TLS)</option>
</select>
</div>
<!-- Auth Details -->
<div class="form-group">
<label for="user">Username / Email</label>
<input
type="text"
id="user"
name="user"
placeholder="user@example.com"
required
/>
</div>
<div class="form-group">
<label for="pass">Password</label>
<div class="password-input-wrapper">
<input
type="password"
id="pass"
name="pass"
placeholder="••••••••"
required
/>
<button
type="button"
class="toggle-password"
onclick="togglePassword()"
>
👁️
</button>
</div>
</div>
<!-- Email Details -->
<div class="form-group">
<label for="from">From Address (Optional)</label>
<input
type="email"
id="from"
name="from"
placeholder="Defaults to Username"
/>
</div>
<div class="form-group">
<label for="to">To Address</label>
<input
type="email"
id="to"
name="to"
placeholder="recipient@example.com"
required
/>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary" id="testBtn">
<span class="btn-text">Test Configuration & Send Email</span>
<div class="loading-spinner hidden"></div>
</button>
<button type="button" class="btn btn-secondary" id="autoTestBtn">
<span class="btn-text">🔍 Auto Discovery Test</span>
<div class="loading-spinner hidden"></div>
</button>
</div>
<!-- Warning for Password Transmission -->
<div class="alert alert-warning">
<span class="alert-icon">⚠️</span>
<p>
<strong>Note:</strong> Per your request, the password used for
this test will be included in the body of the test email.
</p>
</div>
</form>
<!-- Results Section -->
<div id="results" class="results-section hidden">
<h3>Test Results</h3>
<div id="statusMessage" class="status-message"></div>
<pre id="logOutput" class="log-output"></pre>
</div>
<!-- History Panel -->
<div class="history-panel" id="historyPanel">
<div class="history-header">
<h3>📋 Test History</h3>
<button class="clear-history-btn" id="clearHistoryBtn">
Clear All
</button>
</div>
<div id="historyList">
<div class="history-empty">
No test history yet. Run a test to see it here!
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="footer">
<p>&copy; 2025 Beyond Cloud Technology. All rights reserved.</p>
<a
href="https://github.com/DeNNiiInc/Advanced-Smtp-Tester"
target="_blank"
rel="noopener noreferrer"
class="github-link"
>
<svg class="github-icon" viewBox="0 0 24 24" fill="currentColor">
<path
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
/>
</svg>
View on GitHub
</a>
</footer>
</div>
<!-- Version Badge -->
<div id="versionBadge" class="version-badge hidden">
<span class="commit-hash"></span>
<span class="commit-sep"></span>
<span class="commit-date"></span>
</div>
<script src="public/db.js"></script>
<script src="public/script.js"></script>
</body>
</html>