563
哈哈哈，现在有了AI，真的是人人皆程序员，本身是程序员的提升效率！！
完全是按照自己喜欢的风格和感觉喊AI搓出来的，先看图，再把代码贴出来~
求打赏！
演示地址：https://14.al
本身自己带域名到期时间统计~
html<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=yes">
<title>智南米表 | 精品域名出售 </title>
<meta name="description" content="精品域名出售，包含注册时间、到期倒计时，简约大气米表展示。">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--radius-sm: 0.75rem;
--radius-md: 1rem;
--radius-full: 9999px;
--bg-body: #f8f9fa;
--bg-card: #ffffff;
--text-primary: #212529;
--text-secondary: #6c757d;
--text-muted: #868e96;
--border: #dee2e6;
--border-light: #e9ecef;
--accent: #4f46e5;
--accent-hover: #4338ca;
--accent-light: #eef2ff;
--tag-bg: #f1f3f5;
--warning-bg: #fff3cd;
--warning-text: #856404;
--danger-bg: #f8d7da;
--danger-text: #721c24;
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
--shadow-header: 0 4px 6px -1px rgba(0,0,0,0.05);
--header-bg: rgba(255,255,255,0.95);
}
[data-theme="dark"] {
--bg-body: #0f172a;
--bg-card: #1e293b;
--text-primary: #f1f5f9;
--text-secondary: #cbd5e1;
--text-muted: #94a3b8;
--border: #334155;
--border-light: #2d3a4e;
--accent: #818cf8;
--accent-hover: #a5b4fc;
--accent-light: #2d3a5e;
--tag-bg: #334155;
--warning-bg: #332701;
--warning-text: #ffd966;
--danger-bg: #3b0a11;
--danger-text: #f8b4b4;
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5);
--shadow-header: 0 4px 6px -1px rgba(0,0,0,0.2);
--header-bg: rgba(15,23,42,0.95);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Roboto, Helvetica, Arial, sans-serif;
background: var(--bg-body);
color: var(--text-primary);
line-height: 1.5;
transition: background-color 0.3s ease, color 0.2s ease;
padding-bottom: 2rem;
}
.header {
position: sticky;
top: 0;
backdrop-filter: blur(10px);
background: var(--header-bg);
border-bottom: 1px solid var(--border);
z-index: 100;
transition: box-shadow 0.3s ease;
}
.header.shadow-on {
box-shadow: var(--shadow-header);
}
.header-content {
max-width: 1280px;
margin: 0 auto;
padding: 1rem 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.logo h1 {
font-size: 1.75rem;
font-weight: 700;
background: linear-gradient(135deg, var(--accent), #c084fc);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.logo p {
font-size: 0.75rem;
color: var(--text-muted);
}
/* 中间标语 */
.header-slogan {
flex: 1;
text-align: center;
font-family: 'KaiTi', 'STKaiti', serif;
font-size: 1.1rem;
font-weight: 500;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: linear-gradient(90deg, var(--accent), #c084fc);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.theme-btn {
background: var(--tag-bg);
border: 1px solid var(--border);
border-radius: var(--radius-full);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 1rem;
transition: all 0.2s;
}
.theme-btn:hover {
border-color: var(--accent);
background: var(--accent-light);
transform: rotate(15deg);
}
/* 联系方式 - 点击复制 */
.contact-bar {
max-width: 1280px;
margin: 1rem auto 0.5rem;
padding: 1rem 2rem;
background: var(--bg-card);
border-radius: var(--radius-md);
border: 1px solid var(--border-light);
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 2rem;
font-size: 0.9rem;
}
.contact-item {
display: inline-flex;
align-items: center;
gap: 0.6rem;
color: var(--text-secondary);
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.contact-item:hover {
color: var(--accent);
transform: scale(1.05);
}
.contact-item strong {
color: var(--accent);
font-size: 1rem;
}
/* 复制提示 */
.copy-toast {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: var(--accent);
color: #fff;
padding: 8px 16px;
border-radius: 8px;
font-size: 14px;
z-index: 999;
opacity: 0;
transition: opacity 0.3s;
}
.copy-toast.show {
opacity: 1;
}
.stats-bar {
max-width: 1280px;
margin: 1rem auto 0.8rem;
padding: 0 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.8rem;
font-size: 0.85rem;
color: var(--text-muted);
}
.total-badge {
background: var(--accent-light);
padding: 0.2rem 0.7rem;
border-radius: var(--radius-full);
color: var(--accent);
font-weight: 500;
margin-right: 0.5rem;
}
.sale-badge {
background: #d1fae5;
padding: 0.2rem 0.7rem;
border-radius: var(--radius-full);
color: #059669;
font-weight: 500;
margin-right: 0.5rem;
}
.sold-badge {
background: #fee2e2;
padding: 0.2rem 0.7rem;
border-radius: var(--radius-full);
color: #dc2626;
font-weight: 500;
}
[data-theme="dark"] .sale-badge {
background: #064e3b;
color: #6ee7b7;
}
[data-theme="dark"] .sold-badge {
background: #450a0a;
color: #fca5a5;
}
.domain-grid {
max-width: 1280px;
margin: 1rem auto;
padding: 0 1.5rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 1.5rem;
}
.domain-card {
background: var(--bg-card);
border-radius: var(--radius-md);
border: 1px solid var(--border);
padding: 1.25rem;
transition: all 0.25s ease;
opacity: 0;
transform: translateY(10px);
animation: fadeInUp 0.5s ease forwards;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.domain-card:hover {
transform: translateY(-3px) scale(1.015);
box-shadow: var(--shadow-lg);
border-color: var(--accent);
}
.domain-card.sold-card {
opacity: 0.7;
filter: grayscale(40%);
}
.domain-name {
font-size: 1.5rem;
font-weight: 700;
font-family: monospace;
color: var(--accent);
margin-bottom: 0.25rem;
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
}
.status-badge {
font-size: 0.7rem;
padding: 0.2rem 0.6rem;
border-radius: var(--radius-full);
}
.status-badge.sale {
background: #10b981;
color: white;
}
.status-badge.sold {
background: #ef4444;
color: white;
}
.description {
color: var(--text-secondary);
font-size: 0.8rem;
margin: 0.5rem 0;
}
.date-row {
display: flex;
justify-content: space-between;
background: var(--tag-bg);
padding: 0.5rem;
border-radius: var(--radius-sm);
margin: 0.75rem 0;
font-size: 0.75rem;
}
.date-item {
display: flex;
flex-direction: column;
}
.date-label {
color: var(--text-muted);
font-size: 0.65rem;
}
.date-value {
font-weight: 600;
font-family: monospace;
}
.countdown {
text-align: right;
font-weight: 700;
color: var(--accent);
}
.countdown.urgent {
color: #e67e22;
}
.countdown.critical {
color: #e74c3c;
}
.meta-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0.5rem 0;
}
.tag {
background: var(--tag-bg);
padding: 0.2rem 0.6rem;
border-radius: var(--radius-sm);
font-size: 0.7rem;
}
.price-section {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-top: 0.75rem;
padding-top: 0.5rem;
border-top: 1px solid var(--border-light);
}
.price {
font-size: 1.6rem;
font-weight: 800;
color: var(--accent);
}
.price.sold-price {
color: var(--text-muted);
text-decoration: line-through;
}
.renewal {
font-size: 0.7rem;
background: var(--tag-bg);
padding: 0.2rem 0.6rem;
border-radius: var(--radius-sm);
}
/* 友情链接 - 间距缩小 */
.friend-links {
max-width: 1280px;
margin: 2rem auto 0;
padding: 1rem 1.5rem;
background: var(--bg-card);
border-radius: var(--radius-md);
border: 1px solid var(--border-light);
text-align: center;
}
.friend-title {
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.links-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.2rem;
font-size: 0.8rem;
}
.links-list a {
color: var(--accent);
text-decoration: none;
padding: 0.2rem 0.4rem;
border-radius: var(--radius-sm);
transition: background 0.2s;
}
.links-list a:hover {
background: var(--accent-light);
}
.links-list a:not(:last-child)::after {
content: "|";
margin-left: 0.4rem;
color: var(--text-muted);
}
footer {
text-align: center;
font-size: 0.7rem;
color: var(--text-muted);
margin-top: 2rem;
padding: 1rem;
}
@media (max-width: 800px) {
.header-content {
flex-wrap: nowrap;
}
.header-slogan {
font-size: 0.75rem;
}
}
@media (max-width: 640px) {
.contact-bar {
font-size: 0.8rem;
gap: 1rem;
padding: 0.8rem 1rem;
}
.stats-bar {
gap: 0.5rem;
font-size: 0.75rem;
}
.domain-grid {
padding: 0 1rem;
grid-template-columns: 1fr;
gap: 1rem;
}
.domain-card {
padding: 1rem;
}
}
.no-result {
text-align: center;
padding: 3rem;
grid-column: 1 / -1;
color: var(--text-muted);
}
</style>
</head>
<body>
<!-- 复制提示 -->
<div class="copy-toast" id="copyToast"></div>
<div class="header" id="header">
<div class="header-content">
<div class="logo">
<h1>ZhiNan Rice Meter</h1>
<p>精品域名 · 带价出售</p>
</div>
<div class="header-slogan">“路虽远，行则将至，事虽难，做则将成。”__《荀子·修身》</div>
<button class="theme-btn" id="themeToggle">
<span id="themeIcon">🌙</span>
</button>
</div>
</div>
<!-- 点击复制联系方式 -->
<div class="contact-bar">
<div class="contact-item" onclick="copyContact('domain@peng.ge')">📧 邮箱：<strong>mail@int.cm</strong></div>
<div class="contact-item" onclick="copyContact('88888888')">💬 QQ：<strong>9321856</strong></div>
<div class="contact-item" onclick="copyContact('pengmi101')">💚 微信：<strong>wx9321856</strong></div>
</div>
<div class="stats-bar">
<div>
总计 <strong class="total-badge" id="totalCount">0</strong>
在售 <strong class="sale-badge" id="saleCount">0</strong>
已售 <strong class="sold-badge" id="soldCount">0</strong>
</div>
</div>
<div class="domain-grid" id="domainGrid"></div>
<div class="friend-links">
<div class="friend-title">友情链接</div>
<div class="links-list" id="friendLinks"></div>
</div>
<footer>
<p>© <span id="currentYear"></span> ZhiNan Rice Meter All rights reserved.</p>
</footer>
<script>
// 防右键菜单和F12
document.addEventListener('contextmenu', e => e.preventDefault());
document.addEventListener('keydown', e => {
if (e.key === 'F12' ||
(e.ctrlKey && e.shiftKey && (e.key === 'I' || e.key === 'i')) ||
(e.ctrlKey && (e.key === 'U' || e.key === 'u'))) {
e.preventDefault();
}
});
// 域名数据
const domainsData = [
{ name: '14.AL', description: '意识/一世/2数字短域', price: '188', price_unit: '元', renewal: '10欧/年', platform: 'Upflare', age: '一年米', status: '出售中', registerDate: '2025-06-13', expireDate: '2027-06-16' },
{ name: 'BBS.AL', description: '论坛 社区用，已建站可带数据出', price: '999', price_unit: '元', renewal: '10欧/年', platform: 'Upflare', age: '二年米', status: '出售中', registerDate: '2024-05-21', expireDate: '2027-05-21' },
{ name: 'YYDS.AL', description: '永远的神 YYDS 带梗域名', price: '138', price_unit: '元', renewal: '10欧/年', platform: 'Upflare', age: '一年米', status: '出售中', registerDate: '2025-06-13', expireDate: '2027-06-16' },
{ name: 'int.cm', description: '整数 国际性组织 简写', price: '999', price_unit: '元', renewal: '109元/年', platform: '趣域网', age: '1年米', status: '出售中', registerDate: '2025-09-13', expireDate: '2026-09-11' },
{ name: 'shango.net', description: '29年老米 Shango（雷霆之神）= 力量 + 权威 + 爆发力', price: '6000', price_unit: '元', renewal: '89元/年', platform: '西部数码', age: '29年老米', status: '出售中', registerDate: '1997-01-19', expireDate: '2028-01-20' },
{ name: 'uuimg.com', description: '图床、图片CDN、自媒体图库、电商素材库、个人企业云相册', price: '5000', price_unit: '元', renewal: '99元/年', platform: '西部数码', age: '14年米', status: '出售中', registerDate: '2012-06-29', expireDate: '2027-06-29' },
{ name: 'vron.cn', description: '稀缺短米+高可塑性，建站首选，升值空间大', price: '888', price_unit: '元', renewal: '38元/年', platform: '西部数码', age: '7年米', status: '出售中', registerDate: '2019-07-22', expireDate: '2026-07-22' },
{ name: 'idc.mba', description: 'IDC 机房、服务器租用、云服务、建站代理、可BA', price: '688', price_unit: '元', renewal: '98元/年', platform: '西部数码', age: '2年米', status: '出售中', registerDate: '2024-08-06', expireDate: '2027-08-06' },
{ name: 'heefox.com', description: '喜狐 自用不售 社区', price: '9,888', price_unit: '元', renewal: '80元/年', platform: '阿里云', age: '17年老米', status: '自用', registerDate: '2009-10-03', expireDate: '2027-10-03' },
{ name: 'vps.ink', description: '云岭星算 官网 自营', price: '9,888', price_unit: '元', renewal: '76元/年', platform: '西部数码', age: '3年米', status: '自用', registerDate: '2023-09-24', expireDate: '2027-09-24' },
{ name: 'kfz.ee', description: '开发者 社区 技术论坛', price: '88', price_unit: '元', renewal: '80元/年', platform: '趣域网', age: '1年米', status: '已售', registerDate: '2025-09-06', expireDate: '2026-09-07' },
{ name: '83.AL', description: '2数字短语 好记', price: '388', price_unit: '元', renewal: '10欧/年', platform: 'Upflare', age: '1年米', status: '已售', registerDate: '2025-06-13', expireDate: '2027-06-16' }
];
// 联系方式复制
function copyContact(text) {
navigator.clipboard.writeText(text).then(() => {
const toast = document.getElementById('copyToast');
toast.textContent = '✅ 复制成功';
toast.classList.add('show');
setTimeout(() => toast.classList.remove('show'), 1500);
});
}
// 倒计时
function getDaysLeft(expireDateStr) {
const today = new Date();
today.setHours(0, 0, 0, 0);
const expire = new Date(expireDateStr);
if (isNaN(expire)) return null;
return Math.ceil((expire - today) / (1000 * 60 * 60 * 24));
}
function formatDate(dateStr) {
return dateStr || '暂无';
}
function getCountdownClass(daysLeft) {
if (daysLeft <= 30) return 'critical';
if (daysLeft <= 90) return 'urgent';
return '';
}
function getCountdownText(daysLeft) {
if (daysLeft < 0) return '已过期';
return `剩余 ${daysLeft} 天`;
}
// 渲染卡片
function renderCards() {
const list = domainsData;
const total = list.length;
const saleList = list.filter(item => item.status === '出售中');
const soldList = list.filter(item => item.status === '已售');
document.getElementById('totalCount').innerText = total;
document.getElementById('saleCount').innerText = saleList.length;
document.getElementById('soldCount').innerText = soldList.length;
const grid = document.getElementById('domainGrid');
let html = '';
list.forEach((domain, idx) => {
const daysLeft = getDaysLeft(domain.expireDate);
const countdownClass = getCountdownClass(daysLeft);
const countdownText = getCountdownText(daysLeft);
const statusClass = domain.status === '已售' ? 'sold' : 'sale';
const cardSoldClass = domain.status === '已售' ? 'sold-card' : '';
const priceSoldClass = domain.status === '已售' ? 'sold-price' : '';
const animDelay = `animation-delay: ${idx * 0.08}s`;
html += `
<div class="domain-card ${cardSoldClass}" style="${animDelay}">
<div class="domain-name">
${domain.name}
<span class="status-badge ${statusClass}">${domain.status}</span>
</div>
<div class="description">${domain.description}</div>
<div class="date-row">
<div class="date-item">
<span class="date-label">📅 注册时间</span>
<span class="date-value">${formatDate(domain.registerDate)}</span>
</div>
<div class="date-item">
<span class="date-label">⚠️ 到期时间</span>
<span class="date-value">${formatDate(domain.expireDate)}</span>
</div>
<div class="date-item countdown ${countdownClass}">
<span class="date-label">⏳ 倒计时</span>
<span class="date-value">${countdownText}</span>
</div>
</div>
<div class="meta-tags">
<span class="tag">🏷️ ${domain.platform}</span>
<span class="tag">⏱️ ${domain.age}</span>
</div>
<div class="price-section">
<div class="price ${priceSoldClass}">¥ ${domain.price}<small>${domain.price_unit}</small></div>
<div class="renewal">续费 ${domain.renewal}</div>
</div>
</div>
`;
});
grid.innerHTML = html;
}
// 顶部滚动阴影
window.addEventListener('scroll', () => {
document.getElementById('header').classList.toggle('shadow-on', window.scrollY > 10);
});
// 主题切换
const themeToggle = document.getElementById('themeToggle');
const themeIcon = document.getElementById('themeIcon');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
let currentTheme = localStorage.getItem('theme') || (prefersDark ? 'dark' : 'light');
function applyTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
themeIcon.textContent = theme === 'dark' ? '☀️' : '🌙';
localStorage.setItem('theme', theme);
currentTheme = theme;
}
applyTheme(currentTheme);
themeToggle.addEventListener('click', () => applyTheme(currentTheme === 'dark' ? 'light' : 'dark'));
// 友情链接
const friendSites = [
{ name: '云岭星算', url: 'https://vps.ink/' },
{ name: '智南Blog', url: 'https://29o.cn/' },
{ name: 'HeeFox 社区', url: 'https://heefox.com/' },
{ name: 'ZhiNanPic', url: 'https://uuimg.com/' },
{ name: '免费聚合登录', url: 'https://login.29o.cn/' }
];
function renderFriendLinks() {
const container = document.getElementById('friendLinks');
container.innerHTML = friendSites.map(link =>
`<a href="${link.url}" target="_blank">${link.name}</a>`
).join('');
}
// 自动年份
document.getElementById('currentYear').innerText = new Date().getFullYear();
// 启动
renderCards();
renderFriendLinks();
</script>
</body>
</html>
