有AI真好，重新改了下大佬分享的邮箱页面，分享下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exclusive Domain Email Customization</title>
<style>
:root {
--primary-color: #ffffff; /* 白色背景 */
--secondary-color: #2575fc; /* 苹果蓝 */
--text-color: #333333; /* 深灰色文字 */
--border-color: #e1e1e1; /* 浅灰色边框 */
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Helvetica', Arial, sans-serif;
background: var(--primary-color);
color: var(--text-color);
}
.container {
max-width: 800px;
margin: 2rem auto;
padding: 2rem;
background: var(--primary-color);
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
color: var(--secondary-color);
text-align: center;
margin-bottom: 2rem;
font-size: 2.2rem;
}
.search-box {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 1rem;
margin-bottom: 2rem;
}
input, select, button {
padding: 0.8rem 1.2rem;
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 1rem;
}
#domain-input {
flex: 1;
border-color: var(--secondary-color);
}
#domain-suffix {
min-width: 120px;
background: white;
}
#check-btn {
background: var(--secondary-color);
color: white;
border: none;
cursor: pointer;
transition: background 0.3s;
}
#check-btn:hover {
background: #0050d1;
}
.result-card {
padding: 1.5rem;
border-radius: 8px;
margin-bottom: 2rem;
text-align: center;
font-size: 1.1rem;
}
.available {
background: #e8f5e9;
color: #4caf50;
}
.unavailable {
background: #ffebee;
color: #e53935;
}
#register-btn {
width: 100%;
padding: 1rem;
background: var(--secondary-color);
color: white;
border: none;
border-radius: 8px;
font-size: 1.1rem;
cursor: pointer;
transition: background 0.3s;
}
#register-btn:hover {
background: #0050d1;
}
/* 域名卡片样式 */
.domain-cards-container {
margin: 2rem 0;
}
.domain-cards-container h2 {
color: var(--secondary-color);
margin-bottom: 1.5rem;
font-size: 1.5rem;
text-align: center;
}
.domain-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
}
.domain-card {
padding: 1.2rem;
border-radius: 8px;
border: 1px solid var(--border-color);
background: #f5f5f5;
text-align: center;
transition: transform 0.2s;
cursor: pointer;
}
.domain-card:hover {
transform: translateY(-3px);
background: #f0f0f0;
}
.domain-suffix {
font-size: 1.2rem;
margin-bottom: 0.5rem;
font-weight: 500;
color: var(--secondary-color);
}
.domain-status {
font-size: 0.9rem;
color: #4caf50;
}
/* 模态框样式 */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}
.modal-content {
background: white;
padding: 2rem;
border-radius: 12px;
text-align: center;
position: relative;
}
.close-btn {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 1.5rem;
cursor: pointer;
}
/* 移动端适配 */
@media (max-width: 768px) {
.container {
margin: 1rem;
padding: 1rem;
}
.search-box {
grid-template-columns: 1fr;
}
h1 {
font-size: 1.8rem;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Create Your Exclusive Domain Email</h1>
<div class="search-box">
<input type="text" id="domain-input" placeholder="Enter email prefix（Example：yourname）">
<select id="domain-suffix">
<option value="mail.today">mail.today</option>
<option value="mail.money">mail.money</option>
<option value="email.wtf">email.wtf</option>
<option value="your.email">your.email</option>
</select>
<button id="check-btn">Search Now</button>
</div>
<div id="result" class="result-card"></div>
<!-- 新增可注册域名展示卡片 -->
<div class="domain-cards-container">
<h2>Registered Domain Names</h2>
<div class="domain-cards" id="domain-cards"></div>
</div>
<button id="register-btn">Apply For Registration Now</button>
</div>
<div id="contact-modal" class="modal">
<div class="modal-content">
<span class="close-btn">×</span>
<h3>Contact Us</h3>
<div style="margin: 2rem 0">
<p><strong>Email:</strong> e@mail.today</p>
</div>
<small>WorkDay 9:00-18:00 </small>
</div>
</div>
<script type="module">
// 模拟已注册的邮箱数据
const registeredEmails = [
"e@mail.today",
"i@mail.money",
];
// 域名后缀配置
const DOMAIN_SUFFIXES = [
"@mail.today", "@mail.money",
"@email.wtf", "@your.email"
];
// 检查邮箱是否已注册
async function checkAvailability(prefix, suffix) {
const email = `${prefix}@${suffix}`;
return new Promise((resolve) => {
setTimeout(() => {
// 检查邮箱是否在已注册列表中
const isAvailable = !registeredEmails.includes(email);
resolve(isAvailable);
}, 500); // 模拟网络延迟
});
}
// 获取所有可注册域名
async function getAvailableDomains() {
const availableDomains = [];
for (const suffix of DOMAIN_SUFFIXES) {
const isAvailable = await checkAvailability ("demo", suffix); // 使用 demo 前缀检查
if (isAvailable) {
availableDomains.push(suffix);
}
}
return availableDomains;
}
// 价格体系配置
const PRICE_TABLE = {
single: 88, // 单字符价格
multi: 8.8 // 多字符价格
};
// 元素引用
const resultDiv = document.getElementById('result');
const modal = document.getElementById('contact-modal');
// 查询功能
document.getElementById('check-btn').addEventListener('click', async () => {
const prefix = document.getElementById('domain-input').value.trim();
const suffix = document.getElementById('domain-suffix').value;
if(!prefix) {
alert('Please Enter Email Prefix');
return;
}
const isAvailable = await checkAvailability(prefix, suffix);
showResult(`${prefix}@${suffix}`, isAvailable, prefix.length);
});
// 显示结果
function showResult(email, available, prefixLength) {
resultDiv.className = `result-card ${available ? 'available' : 'unavailable'}`;
const price = prefixLength === 1 ? PRICE_TABLE.single : PRICE_TABLE.multi;
const priceHTML = available ?
`<p>Annual fee price: <strong>$${price}</strong></p>` : '';
resultDiv.innerHTML = `
<p>email address: <strong>${email}</strong></p>
<p>state: ${available ? '
