文章摘要
The article presents a simplified version of a domain trading platform with support for switching between Chinese and English, as well as between light and dark themes. It includes a responsive design displaying domain names in a grid layout, sorted by prioritizing two-letter and two-digit prefixes. The page also features a contact modal with a WeChat and email address. All interface texts and buttons are translated into both languages, and the site uses a localStorage system to remember user preferences. The code defines domain groups and interactive behaviors using HTML, CSS, and JavaScript.
— 文章部分摘要由DeepSeek深度思考而成
支持中英切换 颜色切换
演示: 演示地址
![图片[1]|米表系统 简约版|不死鸟资源网](https://busi.net/wp-content/uploads/2025/06/20250610183907554-image-677x1024.png)
![图片[2]|米表系统 简约版|不死鸟资源网](https://busi.net/wp-content/uploads/2025/06/20250610183913461-image-694x1024.png)
<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>域名交易中心 - Domain Market</title>
<style>
:root {
--primary-color: #5D35D4;
--accent-color: #E4405F;
--bg-color: #ffffff;
--text-color: #333333;
--card-bg: #ffffff;
--border-color: rgba(0,0,0,0.1);
}
[data-theme="dark"] {
--primary-color: #00dc82;
--accent-color: #ff4757;
--bg-color: #1a1a1a;
--text-color: #ffffff;
--card-bg: #2d2d2d;
--border-color: rgba(255,255,255,0.1);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.3s, color 0.3s;
}
body {
font-family: 'Segoe UI', sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
font-size: 0.9rem;
}
.control-group {
position: fixed;
top: 1rem;
right: 1rem;
display: flex;
gap: 0.5rem;
z-index: 1000;
}
.theme-switcher,
.lang-switcher {
background: var(--primary-color);
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 25px;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
backdrop-filter: blur(5px);
font-size: 0.9rem;
}
nav {
background: var(--primary-color);
padding: 1rem;
color: white;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
nav h1 {
font-size: 1.5rem;
text-align: center;
}
.container {
max-width: 1200px;
margin: 2rem auto;
padding: 0 1rem;
}
.domain-group {
margin: 3rem 0;
}
.group-title {
color: var(--primary-color);
border-left: 4px solid var(--accent-color);
padding-left: 1rem;
margin: 1.5rem 0;
font-size: 1.4rem;
}
.domain-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
padding: 1rem;
}
.domain-card {
position: relative;
overflow: visible;
border-radius: 10px;
background: transparent;
cursor: pointer;
}
.domain-card::before {
content: '';
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
background: linear-gradient(90deg, #ff6b6b 25%, #4ecdc4 50%, #45b7d1 75%);
background-size: 400% 100%;
animation: borderMarquee 5s linear infinite;
z-index: 0;
border-radius: 11px;
}
@keyframes borderMarquee {
0% { background-position: 200% 50%; }
100% { background-position: -100% 50%; }
}
.domain-card-inner {
position: relative;
z-index: 1;
background: var(--card-bg);
border-radius: 10px;
margin: 1px;
padding: 1.5rem;
box-shadow: 0 3px 10px var(--border-color);
}
.domain-name {
font-size: 1.2rem;
color: var(--text-color);
margin-bottom: 0.5rem;
}
.price-tag {
background: var(--accent-color);
color: white;
border-radius: 20px;
font-weight: bold;
position: absolute;
z-index: 2;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
white-space: nowrap;
}
.btn-register {
background: var(--primary-color);
color: white;
border: none;
padding: 0.5rem 1.5rem;
border-radius: 5px;
cursor: pointer;
min-width: 100px;
transition: transform 0.2s;
font-size: 0.9rem;
}
.btn-register:active {
transform: scale(0.95);
}
.alert-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;
z-index: 999;
}
.alert-content {
background: var(--card-bg);
padding: 2rem;
border-radius: 10px;
text-align: center;
box-shadow: 0 0 20px var(--border-color);
max-width: 300px;
color: var(--text-color);
font-size: 0.9rem;
}
.close-btn {
background: var(--accent-color);
color: white;
border: none;
padding: 0.5rem 1.5rem;
border-radius: 5px;
cursor: pointer;
margin-top: 1rem;
}
@media (max-width: 768px) {
nav {
padding-top: 3.5rem;
min-height: 4rem;
}
.control-group {
top: 1rem;
right: 1rem;
flex-direction: column;
gap: 0.3rem;
}
.theme-switcher span {
display: none;
}
.price-tag {
padding: 0.2rem 1rem;
font-size: 0.8rem;
top: -12px;
right: -15px;
}
.container {
padding: 0 0.5rem;
}
.domain-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
gap: 1rem;
}
.domain-card-inner {
padding: 1rem;
}
.domain-name {
font-size: 1.1rem;
margin-bottom: 0.3rem;
}
.btn-register {
padding: 0.4rem 1.2rem;
font-size: 0.85rem;
}
}
@media (min-width: 769px) {
.price-tag {
padding: 0.3rem 1rem;
font-size: 0.9rem;
top: -15px;
right: -18px;
}
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<div class="control-group">
<button class="lang-switcher" id="langButton">EN</button>
<button class="theme-switcher" id="themeButton">
<i class="fas fa-moon"></i>
<span>深色模式</span>
</button>
</div>
<nav>
<h1>域名交易中心</h1>
</nav>
<div class="container">
<div id="domainList"></div>
</div>
<div id="customAlert" class="alert-modal">
<div class="alert-content">
<h3>联系方式</h3>
<p>微信：1382836</p>
<p>邮箱：168666@163.com</p>
<button class="close-btn">关闭</button>
</div>
</div>
<script>
const translations = {
'zh-CN': {
title: "域名交易中心",
groupTitle: "域名",
registerBtn: "立即购买",
contactTitle: "联系方式",
wechat: "微信",
email: "邮箱",
closeBtn: "关闭",
darkMode: "深色模式",
lightMode: "浅色模式",
priceSymbol: "￥",
quote: "报价"
},
'en-US': {
title: "Domain Marketplace",
groupTitle: "Domains",
registerBtn: "Buy Now",
contactTitle: "Contact Info",
wechat: "WeChat",
email: "Email",
closeBtn: "Close",
darkMode: "Dark Mode",
lightMode: "Light Mode",
priceSymbol: "CN¥",
quote: "Quote"
}
};
let currentTheme = localStorage.getItem('theme') || 'light';
let currentLang = localStorage.getItem('lang') || 'zh-CN';
let domainGroups = [
{
suffix: ".ma",
domains: ['pp.ma', 'uu.ma', '22.ma', '222.ma', '333.ma', '666.ma', '999.ma', '55.ma']
},
{
suffix: ".ma (英文)",
domains: ['doge.ma', 'bbs.ma']
},
{
suffix: ".idc",
domains: ['idc.im', 'idc.cm', 'idc.gg']
}
];
function setTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
const themeButton = document.getElementById('themeButton');
themeButton.innerHTML = theme === 'dark'
? `<i class="fas fa-sun"></i><span>${translations[currentLang].lightMode}</span>`
: `<i class="fas fa-moon"></i><span>${translations[currentLang].darkMode}</span>`;
}
document.getElementById('themeButton').addEventListener('click', () => {
currentTheme = currentTheme === 'dark' ? 'light' : 'dark';
setTheme(currentTheme);
});
function updateContent() {
document.querySelector('nav h1').textContent = translations[currentLang].title;
document.querySelector('.alert-content h3').textContent = translations[currentLang].contactTitle;
document.querySelectorAll('.alert-content p')[0].innerHTML =
`${translations[currentLang].wechat}：1382836`;
document.querySelectorAll('.alert-content p')[1].innerHTML =
`${translations[currentLang].email}：168666@163.com`;
document.querySelector('.close-btn').textContent = translations[currentLang].closeBtn;
document.querySelectorAll('.group-title').forEach(el => {
el.textContent = `${el.dataset.suffix} ${translations[currentLang].groupTitle}`;
});
document.querySelectorAll('.btn-register').forEach(btn => {
btn.textContent = translations[currentLang].registerBtn;
});
document.querySelectorAll('.price-tag').forEach(tag => {
tag.textContent = `${translations[currentLang].priceSymbol}${translations[currentLang].quote}`;
});
document.getElementById('langButton').textContent =
currentLang === 'zh-CN' ? 'EN' : '中文';
}
document.getElementById('langButton').addEventListener('click', () => {
currentLang = currentLang === 'zh-CN' ? 'en-US' : 'zh-CN';
localStorage.setItem('lang', currentLang);
initDomains();
updateContent();
setTheme(currentTheme);
});
function sortDomains(domains) {
return domains.sort((a, b) => {
const prefixA = a.split('.')[0];
const prefixB = b.split('.')[0];
const isDoubleLetter = (str) => str.length === 2 && /^[a-zA-Z]{2}$/.test(str);
const isDoubleNumber = (str) => str.length === 2 && /^\d{2}$/.test(str);
if (isDoubleLetter(prefixA) && !isDoubleLetter(prefixB)) return -1;
if (isDoubleLetter(prefixB) && !isDoubleLetter(prefixA)) return 1;
if (isDoubleNumber(prefixA) && !isDoubleNumber(prefixB)) return -1;
if (isDoubleNumber(prefixB) && !isDoubleNumber(prefixA)) return 1;
return 0;
});
}
function createDomainCard(domain) {
const card = document.createElement('div');
card.className = 'domain-card';
const inner = document.createElement('div');
inner.className = 'domain-card-inner';
const price = document.createElement('div');
price.className = 'price-tag';
price.textContent = `${translations[currentLang].priceSymbol}${translations[currentLang].quote}`;
const name = document.createElement('div');
name.className = 'domain-name';
name.textContent = domain;
const button = document.createElement('button');
button.className = 'btn-register';
button.textContent = translations[currentLang].registerBtn;
inner.appendChild(price);
inner.appendChild(name);
inner.appendChild(button);
card.appendChild(inner);
card.addEventListener('click', () => showAlert());
return card;
}
function initDomains() {
const container = document.getElementById('domainList');
container.innerHTML = '';
domainGroups = domainGroups.map(group => ({
...group,
domains: sortDomains([...group.domains])
}));
if(domainGroups.length === 0) {
container.innerHTML = '<p style="text-align:center">暂无可用域名</p>';
return;
}
domainGroups.forEach(group => {
const groupDiv = document.createElement('div');
groupDiv.className = 'domain-group';
const title = document.createElement('h2');
title.className = 'group-title';
title.dataset.suffix = group.suffix;
title.textContent = `${group.suffix} ${translations[currentLang].groupTitle}`;
const grid = document.createElement('div');
grid.className = 'domain-grid';
group.domains.forEach(domain => {
grid.appendChild(createDomainCard(domain));
});
groupDiv.appendChild(title);
groupDiv.appendChild(grid);
container.appendChild(groupDiv);
});
}
function showAlert() {
document.getElementById('customAlert').style.display = 'flex';
}
document.querySelector('.close-btn').addEventListener('click', () => {
document.getElementById('customAlert').style.display = 'none';
});
document.addEventListener('DOMContentLoaded', function() {
setTheme(currentTheme);
initDomains();
updateContent();
});
window.addEventListener('resize', () => {
document.querySelector('.container').style.padding =
window.innerWidth < 768 ? '0 0.5rem' : '0 1rem';
});
</script>
</body>
</html>本站文章部分内容可能来源于网络,仅供大家学习参考,如有侵权,请联系站长📧cutwork@qq.com进行删除处理!
THE END
