mirror of
https://github.com/DeNNiiInc/Advanced-Smtp-Tester.git
synced 2026-04-17 17:35:59 +00:00
Feat: Add git commit info badge
This commit is contained in:
368
index.html
368
index.html
@@ -1,177 +1,239 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<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" />
|
||||||
|
|
||||||
<head>
|
<!-- Fonts -->
|
||||||
<meta charset="UTF-8" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
<meta name="description" content="Advanced SMTP Tester - Test your SMTP configurations securely and easily." />
|
<link
|
||||||
<title>Advanced SMTP Tester</title>
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"
|
||||||
<link rel="icon" type="image/png" href="public/Logo.png" />
|
rel="stylesheet"
|
||||||
<link rel="stylesheet" href="public/styles.css" />
|
/>
|
||||||
|
</head>
|
||||||
|
|
||||||
<!-- Fonts -->
|
<body>
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<!-- Theme Toggle -->
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
<button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
|
||||||
<link
|
🌙
|
||||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"
|
</button>
|
||||||
rel="stylesheet" />
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
<div class="background-animation"></div>
|
||||||
<!-- Theme Toggle -->
|
|
||||||
<button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
|
|
||||||
🌙
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="background-animation"></div>
|
<div class="container">
|
||||||
|
<!-- Header -->
|
||||||
<div class="container">
|
<header class="header">
|
||||||
<!-- Header -->
|
<div class="header-content">
|
||||||
<header class="header">
|
<h1 class="title">
|
||||||
<div class="header-content">
|
<img src="public/Logo.png" alt="Logo" class="title-icon" />
|
||||||
<h1 class="title">
|
SMTP Tester
|
||||||
<img src="public/Logo.png" alt="Logo" class="title-icon" />
|
</h1>
|
||||||
SMTP Tester
|
<p class="subtitle">
|
||||||
</h1>
|
Advanced SMTP Configuration & Delivery Testing Utility
|
||||||
<p class="subtitle">
|
</p>
|
||||||
Advanced SMTP Configuration & Delivery Testing Utility
|
<a
|
||||||
</p>
|
href="https://www.youtube.com/@beyondcloudtechnology"
|
||||||
<a href="https://www.youtube.com/@beyondcloudtechnology" target="_blank" rel="noopener noreferrer"
|
target="_blank"
|
||||||
class="youtube-link">
|
rel="noopener noreferrer"
|
||||||
<svg class="youtube-icon" viewBox="0 0 24 24" fill="currentColor">
|
class="youtube-link"
|
||||||
<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 class="youtube-icon" viewBox="0 0 24 24" fill="currentColor">
|
||||||
</svg>
|
<path
|
||||||
Watch on YouTube @beyondcloudtechnology
|
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"
|
||||||
</a>
|
/>
|
||||||
</div>
|
</svg>
|
||||||
</header>
|
Watch on YouTube @beyondcloudtechnology
|
||||||
|
</a>
|
||||||
<!-- 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>
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
<form id="smtpForm" class="smtp-form">
|
<!-- Main Content Area -->
|
||||||
<!-- Preset Selector -->
|
<main class="main-content">
|
||||||
<div class="preset-selector">
|
<div class="panel">
|
||||||
<label for="presetSelect">⚡ Quick Presets</label>
|
<div class="panel-header">
|
||||||
<select id="presetSelect">
|
<div class="panel-icon">📧</div>
|
||||||
<option value="">Select a preset...</option>
|
<h2 class="panel-title">Server Configuration</h2>
|
||||||
<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="custom">💾 Last Used Configuration</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-grid">
|
<form id="smtpForm" class="smtp-form">
|
||||||
<!-- Server Details -->
|
<!-- Preset Selector -->
|
||||||
<div class="form-group">
|
<div class="preset-selector">
|
||||||
<label for="host">SMTP Host</label>
|
<label for="presetSelect">⚡ Quick Presets</label>
|
||||||
<input type="text" id="host" name="host" placeholder="smtp.example.com" required />
|
<select id="presetSelect">
|
||||||
</div>
|
<option value="">Select a preset...</option>
|
||||||
<div class="form-group">
|
<option value="office365">Microsoft Office 365</option>
|
||||||
<label for="port">Port</label>
|
<option value="gmail">Google Gmail</option>
|
||||||
<input type="number" id="port" name="port" placeholder="587" required />
|
<option value="sendgrid">SendGrid</option>
|
||||||
</div>
|
<option value="mailgun">Mailgun</option>
|
||||||
<div class="form-group">
|
<option value="amazonses">Amazon SES</option>
|
||||||
<label for="secure">Encryption</label>
|
<option value="custom">💾 Last Used Configuration</option>
|
||||||
<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>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Auth Details -->
|
<div class="form-grid">
|
||||||
<div class="form-group">
|
<!-- Server Details -->
|
||||||
<label for="user">Username / Email</label>
|
<div class="form-group">
|
||||||
<input type="text" id="user" name="user" placeholder="user@example.com" required />
|
<label for="host">SMTP Host</label>
|
||||||
</div>
|
<input
|
||||||
<div class="form-group">
|
type="text"
|
||||||
<label for="pass">Password</label>
|
id="host"
|
||||||
<div class="password-input-wrapper">
|
name="host"
|
||||||
<input type="password" id="pass" name="pass" placeholder="••••••••" required />
|
placeholder="smtp.example.com"
|
||||||
<button type="button" class="toggle-password" onclick="togglePassword()">
|
required
|
||||||
👁️
|
/>
|
||||||
</button>
|
</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>
|
</div>
|
||||||
|
|
||||||
<!-- Email Details -->
|
<div class="form-actions">
|
||||||
<div class="form-group">
|
<button type="submit" class="btn btn-primary" id="testBtn">
|
||||||
<label for="from">From Address (Optional)</label>
|
<span class="btn-text">Test Configuration & Send Email</span>
|
||||||
<input type="email" id="from" name="from" placeholder="Defaults to Username" />
|
<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>
|
</div>
|
||||||
<div class="form-group">
|
|
||||||
<label for="to">To Address</label>
|
<!-- Warning for Password Transmission -->
|
||||||
<input type="email" id="to" name="to" placeholder="recipient@example.com" required />
|
<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>
|
</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>
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
<!-- History Panel -->
|
<!-- Footer -->
|
||||||
<div class="history-panel" id="historyPanel">
|
<footer class="footer">
|
||||||
<div class="history-header">
|
<p>© 2025 Beyond Cloud Technology. All rights reserved.</p>
|
||||||
<h3>📋 Test History</h3>
|
<a
|
||||||
<button class="clear-history-btn" id="clearHistoryBtn">Clear All</button>
|
href="https://github.com/DeNNiiInc/Advanced-Smtp-Tester"
|
||||||
</div>
|
target="_blank"
|
||||||
<div id="historyList">
|
rel="noopener noreferrer"
|
||||||
<div class="history-empty">No test history yet. Run a test to see it here!</div>
|
class="github-link"
|
||||||
</div>
|
>
|
||||||
</div>
|
<svg class="github-icon" viewBox="0 0 24 24" fill="currentColor">
|
||||||
</div>
|
<path
|
||||||
</main>
|
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>
|
||||||
|
|
||||||
<!-- Footer -->
|
<!-- Version Badge -->
|
||||||
<footer class="footer">
|
<div id="versionBadge" class="version-badge hidden">
|
||||||
<p>© 2025 Beyond Cloud Technology. All rights reserved.</p>
|
<span class="commit-hash"></span>
|
||||||
<a href="https://github.com/DeNNiiInc/Advanced-Smtp-Tester" target="_blank" rel="noopener noreferrer"
|
<span class="commit-sep">•</span>
|
||||||
class="github-link">
|
<span class="commit-date"></span>
|
||||||
<svg class="github-icon" viewBox="0 0 24 24" fill="currentColor">
|
</div>
|
||||||
<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>
|
|
||||||
|
|
||||||
<script src="public/db.js"></script>
|
|
||||||
<script src="public/script.js"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
|
<script src="public/db.js"></script>
|
||||||
|
<script src="public/script.js"></script>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -469,6 +469,53 @@ document.getElementById('autoTestBtn').addEventListener('click', async function
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// ===================================
|
||||||
|
// VERSION INFO
|
||||||
|
// ===================================
|
||||||
|
async function loadVersionInfo() {
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/version');
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (data.hash && data.hash !== 'Unknown') {
|
||||||
|
const badge = document.getElementById('versionBadge');
|
||||||
|
const hashSpan = badge.querySelector('.commit-hash');
|
||||||
|
const dateSpan = badge.querySelector('.commit-date');
|
||||||
|
|
||||||
|
hashSpan.textContent = data.hash; // e.g., 9f3a914
|
||||||
|
dateSpan.textContent = timeAgo(new Date(data.date)); // e.g., 3d ago
|
||||||
|
|
||||||
|
badge.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('Failed to load version info:', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function timeAgo(date) {
|
||||||
|
const seconds = Math.floor((new Date() - date) / 1000);
|
||||||
|
|
||||||
|
let interval = seconds / 31536000;
|
||||||
|
if (interval > 1) return Math.floor(interval) + "y ago";
|
||||||
|
|
||||||
|
interval = seconds / 2592000;
|
||||||
|
if (interval > 1) return Math.floor(interval) + "mo ago";
|
||||||
|
|
||||||
|
interval = seconds / 86400;
|
||||||
|
if (interval > 1) return Math.floor(interval) + "d ago";
|
||||||
|
|
||||||
|
interval = seconds / 3600;
|
||||||
|
if (interval > 1) return Math.floor(interval) + "h ago";
|
||||||
|
|
||||||
|
interval = seconds / 60;
|
||||||
|
if (interval > 1) return Math.floor(interval) + "m ago";
|
||||||
|
|
||||||
|
return Math.floor(seconds) + "s ago";
|
||||||
|
}
|
||||||
|
|
||||||
// ===================================
|
// ===================================
|
||||||
// INITIALIZATION
|
// INITIALIZATION
|
||||||
// ===================================
|
// ===================================
|
||||||
@@ -482,6 +529,9 @@ window.addEventListener('DOMContentLoaded', async () => {
|
|||||||
// Load history
|
// Load history
|
||||||
await loadHistory();
|
await loadHistory();
|
||||||
|
|
||||||
|
// Load Version Info
|
||||||
|
await loadVersionInfo();
|
||||||
|
|
||||||
// Load last used configuration
|
// Load last used configuration
|
||||||
const settings = await window.smtpDB.getSettings();
|
const settings = await window.smtpDB.getSettings();
|
||||||
if (settings) {
|
if (settings) {
|
||||||
|
|||||||
@@ -77,12 +77,12 @@ body {
|
|||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: radial-gradient(circle at 15% 50%,
|
background: radial-gradient(
|
||||||
|
circle at 15% 50%,
|
||||||
var(--gradient-bg-1) 0%,
|
var(--gradient-bg-1) 0%,
|
||||||
transparent 25%),
|
transparent 25%
|
||||||
radial-gradient(circle at 85% 30%,
|
),
|
||||||
var(--gradient-bg-2) 0%,
|
radial-gradient(circle at 85% 30%, var(--gradient-bg-2) 0%, transparent 25%);
|
||||||
transparent 25%);
|
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
transition: background 0.3s ease;
|
transition: background 0.3s ease;
|
||||||
@@ -276,9 +276,11 @@ select:focus {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
background: linear-gradient(135deg,
|
background: linear-gradient(
|
||||||
var(--accent-primary),
|
135deg,
|
||||||
var(--accent-hover));
|
var(--accent-primary),
|
||||||
|
var(--accent-hover)
|
||||||
|
);
|
||||||
color: white;
|
color: white;
|
||||||
box-shadow: 0 4px 12px var(--accent-glow);
|
box-shadow: 0 4px 12px var(--accent-glow);
|
||||||
}
|
}
|
||||||
@@ -449,217 +451,265 @@ select:focus {
|
|||||||
.github-icon {
|
.github-icon {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
}/* Theme Toggle Button */
|
} /* Theme Toggle Button */
|
||||||
.theme-toggle {
|
.theme-toggle {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 1.5rem;
|
top: 1.5rem;
|
||||||
right: 1.5rem;
|
right: 1.5rem;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: var(--bg-glass);
|
background: var(--bg-glass);
|
||||||
border: 1px solid var(--border-color);
|
border: 1px solid var(--border-color);
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-toggle:hover {
|
.theme-toggle:hover {
|
||||||
transform: scale(1.1);
|
transform: scale(1.1);
|
||||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-toggle:active {
|
.theme-toggle:active {
|
||||||
transform: scale(0.95);
|
transform: scale(0.95);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Preset Selector */
|
/* Preset Selector */
|
||||||
.preset-selector {
|
.preset-selector {
|
||||||
margin-bottom: var(--spacing-md);
|
margin-bottom: var(--spacing-md);
|
||||||
padding: var(--spacing-md);
|
padding: var(--spacing-md);
|
||||||
background: rgba(99, 102, 241, 0.05);
|
background: rgba(99, 102, 241, 0.05);
|
||||||
border: 1px solid rgba(99, 102, 241, 0.2);
|
border: 1px solid rgba(99, 102, 241, 0.2);
|
||||||
border-radius: var(--radius-md);
|
border-radius: var(--radius-md);
|
||||||
}
|
}
|
||||||
|
|
||||||
.preset-selector label {
|
.preset-selector label {
|
||||||
color: var(--accent-primary);
|
color: var(--accent-primary);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.preset-selector select {
|
.preset-selector select {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: var(--bg-input);
|
background: var(--bg-input);
|
||||||
border: 1px solid var(--accent-primary);
|
border: 1px solid var(--accent-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* History Panel */
|
/* History Panel */
|
||||||
.history-panel {
|
.history-panel {
|
||||||
margin-top: var(--spacing-lg);
|
margin-top: var(--spacing-lg);
|
||||||
padding: var(--spacing-md);
|
padding: var(--spacing-md);
|
||||||
background: var(--bg-glass);
|
background: var(--bg-glass);
|
||||||
border: 1px solid var(--border-color);
|
border: 1px solid var(--border-color);
|
||||||
border-radius: var(--radius-md);
|
border-radius: var(--radius-md);
|
||||||
max-height: 400px;
|
max-height: 400px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.history-header {
|
.history-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: var(--spacing-sm);
|
margin-bottom: var(--spacing-sm);
|
||||||
padding-bottom: var(--spacing-sm);
|
padding-bottom: var(--spacing-sm);
|
||||||
border-bottom: 1px solid var(--border-color);
|
border-bottom: 1px solid var(--border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.history-header h3 {
|
.history-header h3 {
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.clear-history-btn {
|
.clear-history-btn {
|
||||||
padding: 0.4rem 0.8rem;
|
padding: 0.4rem 0.8rem;
|
||||||
background: rgba(239, 68, 68, 0.1);
|
background: rgba(239, 68, 68, 0.1);
|
||||||
border: 1px solid var(--error);
|
border: 1px solid var(--error);
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
color: var(--error);
|
color: var(--error);
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.clear-history-btn:hover {
|
.clear-history-btn:hover {
|
||||||
background: rgba(239, 68, 68, 0.2);
|
background: rgba(239, 68, 68, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.history-item {
|
.history-item {
|
||||||
padding: var(--spacing-sm);
|
padding: var(--spacing-sm);
|
||||||
margin-bottom: var(--spacing-sm);
|
margin-bottom: var(--spacing-sm);
|
||||||
background: var(--bg-input);
|
background: var(--bg-input);
|
||||||
border: 1px solid var(--border-color);
|
border: 1px solid var(--border-color);
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.history-item:hover {
|
.history-item:hover {
|
||||||
border-color: var(--accent-primary);
|
border-color: var(--accent-primary);
|
||||||
transform: translateX(4px);
|
transform: translateX(4px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.history-item-header {
|
.history-item-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.history-item-host {
|
.history-item-host {
|
||||||
font-family: "JetBrains Mono", monospace;
|
font-family: "JetBrains Mono", monospace;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.history-item-time {
|
.history-item-time {
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
color: var(--text-secondary);
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.history-item-details {
|
.history-item-details {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
color: var(--text-secondary);
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.history-item-status {
|
.history-item-status {
|
||||||
padding: 0.2rem 0.5rem;
|
padding: 0.2rem 0.5rem;
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.history-item-status.success {
|
.history-item-status.success {
|
||||||
background: rgba(16, 185, 129, 0.1);
|
background: rgba(16, 185, 129, 0.1);
|
||||||
color: var(--success);
|
color: var(--success);
|
||||||
}
|
}
|
||||||
|
|
||||||
.history-item-status.error {
|
.history-item-status.error {
|
||||||
background: rgba(239, 68, 68, 0.1);
|
background: rgba(239, 68, 68, 0.1);
|
||||||
color: var(--error);
|
color: var(--error);
|
||||||
}
|
}
|
||||||
|
|
||||||
.history-empty {
|
.history-empty {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: var(--spacing-lg);
|
padding: var(--spacing-lg);
|
||||||
color: var(--text-secondary);
|
color: var(--text-secondary);
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Error Tips */
|
/* Error Tips */
|
||||||
.error-tips {
|
.error-tips {
|
||||||
margin-top: var(--spacing-sm);
|
margin-top: var(--spacing-sm);
|
||||||
padding: var(--spacing-sm);
|
padding: var(--spacing-sm);
|
||||||
background: rgba(239, 68, 68, 0.05);
|
background: rgba(239, 68, 68, 0.05);
|
||||||
border-left: 3px solid var(--error);
|
border-left: 3px solid var(--error);
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-tips-title {
|
.error-tips-title {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: var(--error);
|
color: var(--error);
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-tips ul {
|
.error-tips ul {
|
||||||
margin-left: 1.2rem;
|
margin-left: 1.2rem;
|
||||||
color: var(--text-secondary);
|
color: var(--text-secondary);
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-tips li {
|
.error-tips li {
|
||||||
margin-bottom: 0.3rem;
|
margin-bottom: 0.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-tips a {
|
.error-tips a {
|
||||||
color: var(--accent-primary);
|
color: var(--accent-primary);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-tips a:hover {
|
.error-tips a:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Scrollbar Styling */
|
/* Scrollbar Styling */
|
||||||
.history-panel::-webkit-scrollbar,
|
.history-panel::-webkit-scrollbar,
|
||||||
.log-output::-webkit-scrollbar {
|
.log-output::-webkit-scrollbar {
|
||||||
width: 8px;
|
width: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.history-panel::-webkit-scrollbar-track,
|
.history-panel::-webkit-scrollbar-track,
|
||||||
.log-output::-webkit-scrollbar-track {
|
.log-output::-webkit-scrollbar-track {
|
||||||
background: var(--bg-input);
|
background: var(--bg-input);
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
.history-panel::-webkit-scrollbar-thumb,
|
.history-panel::-webkit-scrollbar-thumb,
|
||||||
.log-output::-webkit-scrollbar-thumb {
|
.log-output::-webkit-scrollbar-thumb {
|
||||||
background: var(--border-color);
|
background: var(--border-color);
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
.history-panel::-webkit-scrollbar-thumb:hover,
|
.history-panel::-webkit-scrollbar-thumb:hover,
|
||||||
.log-output::-webkit-scrollbar-thumb:hover {
|
.log-output::-webkit-scrollbar-thumb:hover {
|
||||||
background: var(--text-secondary);
|
background: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Version Badge */
|
||||||
|
.version-badge {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 1.5rem;
|
||||||
|
right: 1.5rem;
|
||||||
|
background: rgba(15, 23, 42, 0.8);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 0.4rem 0.8rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
z-index: 1000;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="light"] .version-badge {
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
border-color: rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.version-badge:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.commit-hash {
|
||||||
|
font-family: "JetBrains Mono", monospace;
|
||||||
|
color: #a78bfa; /* Slightly purple to match example */
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="light"] .commit-hash {
|
||||||
|
color: #7c3aed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.commit-sep {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.commit-date {
|
||||||
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|||||||
20
server.js
20
server.js
@@ -3,10 +3,25 @@ const nodemailer = require("nodemailer");
|
|||||||
const bodyParser = require("body-parser");
|
const bodyParser = require("body-parser");
|
||||||
const cors = require("cors");
|
const cors = require("cors");
|
||||||
const path = require("path");
|
const path = require("path");
|
||||||
|
const { execSync } = require("child_process");
|
||||||
|
|
||||||
const app = express();
|
const app = express();
|
||||||
const port = process.env.PORT || 3000;
|
const port = process.env.PORT || 3000;
|
||||||
|
|
||||||
|
// Get Git Commit Info
|
||||||
|
let gitInfo = {
|
||||||
|
hash: 'Unknown',
|
||||||
|
date: 'Unknown'
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const hash = execSync('git log -1 --format="%h"').toString().trim();
|
||||||
|
const date = execSync('git log -1 --format="%cd"').toString().trim();
|
||||||
|
gitInfo = { hash, date };
|
||||||
|
} catch (e) {
|
||||||
|
console.warn("Could not retrieve git info:", e.message);
|
||||||
|
}
|
||||||
|
|
||||||
app.use(cors());
|
app.use(cors());
|
||||||
app.use(bodyParser.json());
|
app.use(bodyParser.json());
|
||||||
|
|
||||||
@@ -18,6 +33,11 @@ app.get('/', (req, res) => {
|
|||||||
res.sendFile(path.join(__dirname, 'index.html'));
|
res.sendFile(path.join(__dirname, 'index.html'));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// API Endpoint for Version Info
|
||||||
|
app.get('/api/version', (req, res) => {
|
||||||
|
res.json(gitInfo);
|
||||||
|
});
|
||||||
|
|
||||||
app.post('/api/test-smtp', async (req, res) => {
|
app.post('/api/test-smtp', async (req, res) => {
|
||||||
const { host, port, secure, user, pass, from, to } = req.body;
|
const { host, port, secure, user, pass, from, to } = req.body;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user