码桶
发现社区成员的开源项目
index.html8.5 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NakoList</title>
<meta property="og:title" content="NakoList">
<meta property="og:description" content="精选域名列表">
<meta property="og:url" content="https://example.com">
<style>
:root {
--bg: #e8e8e8;
--text: #2c2c2c;
--muted: #888;
--accent: #1a1a1a;
--line: #d5d5d5;
--link: #b8960c;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans", sans-serif;
background: var(--bg);
color: var(--text);
font-size: 14px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
.container { max-width: 880px; margin: 0 auto; padding: 0 32px; }
header {
padding: 24px 0 16px;
border-bottom: 1px solid var(--line);
display: flex; justify-content: space-between; align-items: baseline;
user-select: none;
}
h1 { font-size: 16px; font-weight: 400; letter-spacing: .02em; color: var(--accent); }
.header-links span {
font-size: 13px; color: var(--accent); cursor: pointer; transition: opacity .2s;
}
.header-links span:hover { opacity: .6; }
/* Popup */
.popup {
position: fixed; inset: 0;
background: var(--bg);
z-index: 100; padding-top: 100px;
opacity: 0; pointer-events: none;
transition: opacity .2s;
}
.popup.active { opacity: 1; pointer-events: auto; }
.popup-content {
max-width: 720px; margin: 0 auto; padding: 32px;
font-size: 13px; line-height: 2.2; color: var(--accent);
}
.popup-content a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--link); }
.popup-close {
position: absolute; top: 20px; right: 24px;
color: var(--muted); font-size: 28px; cursor: pointer;
user-select: none; transition: color .2s;
}
.popup-close:hover { color: var(--accent); }
.popup-note {
font-size: 13px; color: var(--muted); line-height: 1.7;
padding-bottom: 20px; margin-bottom: 20px;
border-bottom: 1px solid var(--line);
}
/* Domain */
.domain-item { border-bottom: 1px solid var(--line); }
.domain-header {
display: flex; align-items: baseline; justify-content: space-between;
padding: 14px 0;
cursor: pointer; gap: 16px;
user-select: none;
}
.domain-main { flex: 1; min-width: 0; }
.domain-name {
font-family: "SF Mono", "Cascadia Code", "Fira Code", "Menlo", Monaco, "Consolas", monospace;
font-size: 14px; color: var(--accent); letter-spacing: -.01em;
}
.domain-intro { font-size: 12px; color: var(--muted); margin-top: 3px; }
.domain-price { font-size: 12px; color: var(--muted); flex-shrink: 0; }
.expand-icon {
font-size: 12px; color: var(--muted); flex-shrink: 0;
transition: transform .35s ease;
line-height: 1;
}
.domain-item.active .expand-icon { transform: rotate(90deg); }
/* Detail */
.domain-detail {
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows .35s ease;
}
.domain-detail > div { overflow: hidden; }
.detail-content {
padding: 0;
opacity: 0; transform: translateY(-4px);
transition: padding .35s ease, opacity .25s ease .05s, transform .3s ease;
font-size: 13px; line-height: 1.7; color: var(--muted);
}
.domain-item.active .domain-detail { grid-template-rows: 1fr; }
.domain-item.active .detail-content {
padding: 4px 0 16px;
opacity: 1; transform: translateY(0);
}
.detail-content p { margin-bottom: 10px; }
.detail-content strong { color: var(--text); font-weight: 500; }
.detail-content del { color: #aaa; text-decoration: line-through; }
.detail-content code {
font-family: "SF Mono", "Cascadia Code", "Fira Code", "Menlo", Monaco, "Consolas", monospace;
background: #ddd; padding: 2px 5px; border-radius: 2px;
font-size: 12px; color: var(--accent);
}
.detail-content a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s; }
.detail-content a:hover { border-bottom-color: var(--accent); }
footer {
padding: 16px 0 24px; text-align: center;
font-size: 11px; color: var(--muted); user-select: none;
}
footer a { color: var(--text); text-decoration: underline; text-decoration-color: var(--text); }
footer a:hover { color: var(--accent); text-decoration-color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>NakoList</h1>
<div class="header-links">
<span onclick="toggle('contact')">Contact</span>
</div>
</header>
<div class="popup" id="contact">
<span class="popup-close" onclick="toggle('contact')">×</span>
<div class="popup-content">
<div class="popup-note" id="popupNote" style="display:none"></div>
<div id="contactC"></div>
</div>
</div>
<div id="list"></div>
<footer>Powered by <a id="footerLink" href="#">NAKOLIST</a></footer>
</div>
<script>
// ═══════ 只需改这里 ═══════
const S = {
title: 'NakoList',
desc: '极简米表 v2.0',
url: 'https://example.com',
footer: 'NAKOLIST',
footerUrl: 'https://github.com/mouhuan-creator/nakolist'
};
const noteText = '';
const C = {
em: ['i','example.com'],
tg: 'username',
wx: 'wxid_xxx',
ms: '[email protected]'
};
const domains = [
{
name: "example.com",
price: "¥12,000",
intro: "简短描述，一句话概括亮点",
detail: `这是一个**精品域名**，适合多种用途。
**亮点：**
- 简短易记，品牌价值高
- 适合初创项目或个人品牌
- ~~原价¥15,000~~ 现价¥12,000
查看更多：[访问链接](https://example.com)`
},
{
name: "coolname.io",
price: "¥8,500",
intro: "科技感十足，适合 SaaS 产品",
detail: `**CoolName** 读起来朗朗上口。
**适用场景：**
- SaaS 平台
- 开发者工具
- 技术博客`
},
{
name: "premium.store",
price: "¥25,000",
intro: "电商精品，自带信任感",
detail: `**Premium.Store** —— 高端电商首选。
适合品牌旗舰店、垂直电商、会员制商城。`
}
];
// ═══════ 初始化 ═══════
document.title = S.title;
document.querySelector('h1').textContent = S.title;
document.querySelector('meta[property="og:title"]').content = S.title;
document.querySelector('meta[property="og:description"]').content = S.desc;
document.querySelector('meta[property="og:url"]').content = S.url;
document.getElementById('footerLink').href = S.footerUrl;
document.getElementById('footerLink').textContent = S.footer;
// noteText 处理
if (noteText.trim()) {
const noteEl = document.getElementById('popupNote');
noteEl.textContent = noteText;
noteEl.style.display = '';
}
const contactText = `**联系方式**
Email: [${C.em[0]}@${C.em[1]}](mailto:${C.em[0]}@${C.em[1]})
Telegram: [@${C.tg}](https://t.me/${C.tg})
WeChat: [${C.wx}](weixin://)
Mastodon: [@${C.ms}](https://mastodon.social/@${C.ms.split('@')[1]})`;
const fmt = t => t
.replace(/\*\*(.*?)\*\*/g,'<strong>$1</strong>')
.replace(/~~(.*?)~~/g,'<del>$1</del>')
.replace(/`(.*?)`/g,'<code>$1</code>')
.replace(/\[(.*?)\]\((.*?)\)/g,'<a href="$2">$1</a>')
.replace(/\n/g,'<br>');
document.getElementById('contactC').innerHTML = fmt(contactText);
const list = document.getElementById('list');
domains.forEach(d => {
const el = document.createElement('div');
el.className = 'domain-item';
el.innerHTML = `<div class="domain-header"><div class="domain-main"><div class="domain-name">${d.name}</div><div class="domain-intro">${d.intro}</div></div><span class="domain-price">${d.price}</span><span class="expand-icon">▶</span></div><div class="domain-detail"><div><div class="detail-content">${fmt(d.detail)}</div></div></div>`;
list.appendChild(el);
});
list.addEventListener('click', e => {
const h = e.target.closest('.domain-header');
if (!h) return;
const item = h.parentElement;
const was = item.classList.contains('active');
list.querySelectorAll('.domain-item.active').forEach(el => el.classList.remove('active'));
if (!was) item.classList.add('active');
});
function toggle(id) {
document.getElementById(id).classList.toggle('active');
}
document.addEventListener('click', e => {
const p = e.target.closest('.popup.active');
if (p && !e.target.closest('.popup-content')) p.classList.remove('active');
});
</script>
</body>
</html>