有AI真好，重新改了下大佬分享的邮箱页面，分享下

高启强 (UID: 1731) 9月前 [复制链接]

帖子链接已复制到剪贴板

帖子已经有人评论啦，不支持删除！

761 0

<!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 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>

// 域名后缀配置
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 ? '🟢 available' : '🔴 taken'}</p>
${priceHTML}
`;
}

// 注册弹窗控制
document.getElementById('register-btn').addEventListener('click', () => {
modal.style.display = 'flex';
});

document.querySelector('.close-btn').addEventListener('click', () => {
modal.style.display = 'none';
});

// 初始化可注册域名展示
async function initDomainCards() {
const container = document.getElementById('domain-cards');
const loadingHTML = `<div class="result-card">Loading Registered Domain Names.....</div>`;
container.innerHTML = loadingHTML;

const availableDomains = await getAvailableDomains();

if (availableDomains.length > 0) {
container.innerHTML = availableDomains.map(suffix => `
<div class="domain-card">
<div class="domain-suffix">${suffix}</div>
<div class="domain-status">🟢 available</div>
</div>
`).join('');

// 为每个 .domain-card 绑定点击事件
document.querySelectorAll('.domain-card').forEach(card => {
card.addEventListener('click', () => {
// 获取域名后缀
const suffix = card.querySelector('.domain-suffix').textContent;

// 更新 #domain-suffix 的值
const domainSuffixSelect = document.getElementById('domain-suffix');
domainSuffixSelect.value = suffix;

// 自动选中对应的选项
const option = Array.from(domainSuffixSelect.options).find(opt => opt.value === suffix.split('@')[1]);
if (option) {
option.selected = true;
}

// 可选：聚焦到输入框
document.getElementById('domain-input').focus();

// 可选：执行搜索
document.getElementById('check-btn').click();
});
});
} else {
container.innerHTML = `<div class="result-card">No Available Domain</div>`;
}
}

// 在页面加载时初始化
window.addEventListener('DOMContentLoaded', initDomainCards);
</script>
</body>
</html>

这家伙太懒了，什么也没留下。

已有评论 ( 0 )

查看全部倒序

提示：您必须登录才能查看此内容。

创建新帖

高启强

UID:1731

1033

主题数

8942

评论数

推荐数

Tips：

自助推广（点击空位自助购买或TG联系）