Files
SMANAGE/TempLate/Unclear/index.html
T
2026-06-16 11:55:14 +08:00

844 lines
25 KiB
HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>看不清的事情</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
bg: '#f5f4f0',
dark: '#1a1a1a',
accent: '#6b7280',
muted: '#9ca3af',
subtle: '#e5e5e3',
},
fontFamily: {
serif: ['Noto Serif SC', 'serif'],
sans: ['Noto Sans SC', 'Inter', 'sans-serif'],
}
}
}
}
</script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
background: #f5f4f0;
color: #1a1a1a;
font-family: 'Noto Sans SC', 'Inter', sans-serif;
overflow-x: hidden;
}
/* 非典型侧边导航 */
.side-nav {
position: fixed;
left: 0;
top: 0;
width: 56px;
height: 100vh;
z-index: 100;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 40px 0;
border-right: 1px solid #e5e5e3;
background: #f5f4f0;
transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.side-nav:hover {
width: 220px;
}
.side-nav:hover .nav-label { opacity: 1; transform: translateX(0); }
.side-nav:hover .nav-logo-text { opacity: 1; max-width: 140px; }
.nav-logo {
writing-mode: vertical-rl;
font-family: 'Noto Serif SC', serif;
font-size: 13px;
letter-spacing: 0.3em;
color: #1a1a1a;
display: flex;
align-items: center;
gap: 8px;
cursor: default;
}
.nav-logo-dot {
width: 6px; height: 6px;
background: #1a1a1a;
border-radius: 50%;
flex-shrink: 0;
}
.nav-logo-text {
max-width: 0;
overflow: hidden;
opacity: 0;
transition: all 0.4s ease;
writing-mode: horizontal-tb;
font-family: 'Noto Serif SC', serif;
font-size: 12px;
letter-spacing: 0.15em;
white-space: nowrap;
color: #6b7280;
}
.nav-items {
display: flex;
flex-direction: column;
gap: 32px;
align-items: center;
}
.nav-item {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
text-decoration: none;
color: #9ca3af;
transition: color 0.3s ease;
white-space: nowrap;
}
.nav-item:hover { color: #1a1a1a; }
.nav-item:hover .nav-dot { background: #1a1a1a; transform: scale(1.5); }
.nav-dot {
width: 5px; height: 5px;
background: #d1d5db;
border-radius: 50%;
flex-shrink: 0;
transition: all 0.3s ease;
}
.nav-label {
font-size: 12px;
letter-spacing: 0.08em;
opacity: 0;
transform: translateX(-8px);
transition: all 0.3s ease 0.1s;
}
.nav-bottom {
writing-mode: vertical-rl;
font-size: 10px;
letter-spacing: 0.2em;
color: #d1d5db;
font-family: 'Inter', sans-serif;
}
/* 主内容区 */
.main-content {
margin-left: 56px;
min-height: 100vh;
}
/* 英雄区域 */
.hero-section {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
padding: 80px 60px;
position: relative;
}
.hero-title {
font-family: 'Noto Serif SC', serif;
font-weight: 600;
font-size: clamp(48px, 8vw, 120px);
line-height: 1.1;
letter-spacing: -0.02em;
color: #1a1a1a;
position: relative;
}
.hero-title .blur-char {
display: inline-block;
filter: blur(4px);
opacity: 0.5;
transition: all 0.6s ease;
}
.hero-title:hover .blur-char {
filter: blur(0);
opacity: 1;
}
.hero-sub {
margin-top: 32px;
font-size: 15px;
color: #9ca3af;
line-height: 1.8;
max-width: 420px;
font-weight: 300;
}
.hero-line {
position: absolute;
bottom: 80px;
left: 60px;
right: 60px;
height: 1px;
background: #e5e5e3;
}
.hero-line-label {
position: absolute;
bottom: 80px;
right: 60px;
font-size: 11px;
color: #d1d5db;
letter-spacing: 0.15em;
font-family: 'Inter', sans-serif;
}
/* 统计行 */
.stats-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid #e5e5e3;
}
.stat-item {
padding: 48px 40px;
border-right: 1px solid #e5e5e3;
transition: background 0.3s ease;
}
.stat-item:last-child { border-right: none; }
.stat-item:hover { background: #eeedea; }
.stat-number {
font-family: 'Inter', sans-serif;
font-size: 36px;
font-weight: 300;
color: #1a1a1a;
letter-spacing: -0.02em;
}
.stat-label {
margin-top: 8px;
font-size: 12px;
color: #9ca3af;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* 目录区 */
.catalog-section {
padding: 100px 60px;
border-top: 1px solid #e5e5e3;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 64px;
}
.section-title {
font-family: 'Noto Serif SC', serif;
font-size: 28px;
font-weight: 500;
color: #1a1a1a;
}
.section-tag {
font-size: 11px;
color: #9ca3af;
letter-spacing: 0.2em;
text-transform: uppercase;
font-family: 'Inter', sans-serif;
}
/* 条目列表 */
.entry-list {
display: flex;
flex-direction: column;
}
.entry-item {
display: grid;
grid-template-columns: 60px 1fr 200px 80px;
align-items: center;
padding: 28px 0;
border-bottom: 1px solid #e5e5e3;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.entry-item:first-child { border-top: 1px solid #e5e5e3; }
.entry-item:hover { padding-left: 16px; background: #fafaf8; }
.entry-item:hover .entry-title { color: #1a1a1a; }
.entry-item:hover .entry-arrow { opacity: 1; transform: translateX(0); }
.entry-index {
font-family: 'Inter', sans-serif;
font-size: 13px;
color: #d1d5db;
font-weight: 300;
}
.entry-title {
font-family: 'Noto Serif SC', serif;
font-size: 18px;
color: #6b7280;
font-weight: 400;
transition: color 0.3s ease;
}
.entry-category {
font-size: 12px;
color: #9ca3af;
letter-spacing: 0.05em;
}
.entry-arrow {
opacity: 0;
transform: translateX(-8px);
transition: all 0.3s ease;
color: #1a1a1a;
font-size: 14px;
text-align: right;
}
/* 详细卡片网格 */
.cards-section {
padding: 100px 60px;
border-top: 1px solid #e5e5e3;
background: #fafaf8;
}
.cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: #e5e5e3;
}
.card-item {
background: #f5f4f0;
padding: 48px 36px;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.card-item:hover { background: #fff; }
.card-item:hover .card-index { color: #1a1a1a; }
.card-item:hover .card-line { width: 40px; }
.card-index {
font-family: 'Inter', sans-serif;
font-size: 12px;
color: #d1d5db;
font-weight: 400;
letter-spacing: 0.1em;
margin-bottom: 40px;
transition: color 0.3s ease;
}
.card-title {
font-family: 'Noto Serif SC', serif;
font-size: 20px;
font-weight: 500;
color: #1a1a1a;
margin-bottom: 16px;
line-height: 1.5;
}
.card-desc {
font-size: 14px;
color: #9ca3af;
line-height: 1.8;
font-weight: 300;
}
.card-line {
width: 20px;
height: 1px;
background: #1a1a1a;
margin-top: 32px;
transition: width 0.4s ease;
}
/* 声明区 */
.disclaimer-section {
padding: 100px 60px;
border-top: 1px solid #e5e5e3;
}
.disclaimer-box {
max-width: 640px;
padding: 48px;
border: 1px solid #e5e5e3;
position: relative;
}
.disclaimer-box::before {
content: '';
position: absolute;
top: -1px;
left: 48px;
right: 48px;
height: 1px;
background: #1a1a1a;
}
.disclaimer-title {
font-family: 'Noto Serif SC', serif;
font-size: 16px;
font-weight: 500;
margin-bottom: 20px;
color: #1a1a1a;
}
.disclaimer-text {
font-size: 13px;
color: #9ca3af;
line-height: 2;
font-weight: 300;
}
/* 页脚 */
.site-footer {
padding: 60px;
border-top: 1px solid #e5e5e3;
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-left {
font-size: 11px;
color: #d1d5db;
letter-spacing: 0.1em;
}
.footer-right {
font-size: 11px;
color: #d1d5db;
letter-spacing: 0.1em;
font-family: 'Inter', sans-serif;
}
/* 滚动显示动画 */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* toast */
.toast {
position: fixed;
bottom: 32px;
left: 50%;
transform: translateX(-50%) translateY(100px);
background: #1a1a1a;
color: #f5f4f0;
padding: 14px 28px;
font-size: 13px;
border-radius: 2px;
z-index: 9999;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
letter-spacing: 0.05em;
}
.toast.show {
transform: translateX(-50%) translateY(0);
}
/* 移动端适配 */
@media (max-width: 1024px) {
.side-nav { display: none; }
.main-content { margin-left: 0; }
.hero-section { padding: 60px 24px; }
.hero-line { left: 24px; right: 24px; }
.hero-line-label { right: 24px; }
.stats-row { grid-template-columns: repeat(2, 1fr); }
.stat-item:nth-child(2) { border-right: none; }
.catalog-section { padding: 60px 24px; }
.cards-section { padding: 60px 24px; }
.cards-grid { grid-template-columns: 1fr; }
.entry-item { grid-template-columns: 40px 1fr 60px; }
.entry-category { display: none; }
.disclaimer-section { padding: 60px 24px; }
.disclaimer-box { padding: 32px 24px; }
.disclaimer-box::before { left: 24px; right: 24px; }
.site-footer { padding: 40px 24px; flex-direction: column; gap: 12px; align-items: flex-start; }
/* 移动端顶栏 */
.mobile-nav {
display: flex !important;
position: fixed;
top: 0; left: 0; right: 0;
height: 56px;
background: #f5f4f0;
border-bottom: 1px solid #e5e5e3;
z-index: 100;
align-items: center;
justify-content: space-between;
padding: 0 24px;
}
.mobile-nav-title {
font-family: 'Noto Serif SC', serif;
font-size: 14px;
letter-spacing: 0.15em;
}
.mobile-nav-btn {
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
}
.mobile-menu {
position: fixed;
top: 56px; left: 0; right: 0; bottom: 0;
background: #f5f4f0;
z-index: 99;
padding: 40px 24px;
display: none;
flex-direction: column;
gap: 24px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
font-family: 'Noto Serif SC', serif;
font-size: 24px;
color: #6b7280;
text-decoration: none;
transition: color 0.3s;
}
.mobile-menu a:hover { color: #1a1a1a; }
}
@media (min-width: 1025px) {
.mobile-nav { display: none !important; }
.mobile-menu { display: none !important; }
}
</style>
</head>
<body>
<!-- 移动端导航 -->
<div class="mobile-nav">
<span class="mobile-nav-title">看不清的事情</span>
<div class="mobile-nav-btn" id="menuToggle">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
<line x1="3" y1="6" x2="17" y2="6" stroke="#1a1a1a" stroke-width="1"/>
<line x1="3" y1="10" x2="17" y2="10" stroke="#1a1a1a" stroke-width="1"/>
<line x1="3" y1="14" x2="17" y2="14" stroke="#1a1a1a" stroke-width="1"/>
</svg>
</div>
</div>
<div class="mobile-menu" id="mobileMenu">
<a href="#catalog" onclick="closeMobileMenu()">记载</a>
<a href="#cards" onclick="closeMobileMenu()">分类</a>
<a href="#disclaimer" onclick="closeMobileMenu()">声明</a>
</div>
<!-- 侧边导航 -->
<nav class="side-nav">
<div class="nav-logo">
<div class="nav-logo-dot"></div>
<span>看不清的事情</span>
<span class="nav-logo-text">UNCLEAR MATTERS</span>
</div>
<div class="nav-items">
<a href="#catalog" class="nav-item">
<div class="nav-dot"></div>
<span class="nav-label">记载</span>
</a>
<a href="#cards" class="nav-item">
<div class="nav-dot"></div>
<span class="nav-label">分类</span>
</a>
<a href="#disclaimer" class="nav-item">
<div class="nav-dot"></div>
<span class="nav-label">声明</span>
</a>
</div>
<div class="nav-bottom">2025</div>
</nav>
<!-- 主内容 -->
<div class="main-content">
<!-- 英雄区 -->
<section class="hero-section">
<h1 class="hero-title reveal">
看不清的<span class="blur-char">事情</span>
</h1>
<p class="hero-sub reveal" style="transition-delay: 0.15s;">
本站汇总记载一些面向于整个世界的话题。内容仅作归档之用,<br>
不构成任何立场、判断或建议。内容主要剖析国家政治,属于个人之见解。
</p>
<div class="hero-line"></div>
<div class="hero-line-label reveal" style="transition-delay: 0.3s;">SCROLL TO EXPLORE ↓</div>
</section>
<!-- 统计 -->
<div class="stats-row reveal">
<div class="stat-item">
<div class="stat-number" data-count="47">0</div>
<div class="stat-label">已收录</div>
</div>
<div class="stat-item">
<div class="stat-number" data-count="6">0</div>
<div class="stat-label">分类</div>
</div>
<div class="stat-item">
<div class="stat-number" data-count="12">0</div>
<div class="stat-label">本月新增</div>
</div>
<div class="stat-item">
<div class="stat-number" data-count="3">0</div>
<div class="stat-label">待整理</div>
</div>
</div>
<!-- 目录区 -->
<section class="catalog-section" id="catalog">
<div class="section-header reveal">
<h2 class="section-title">全部记载</h2>
<span class="section-tag">Catalog / 47 Entries</span>
</div>
<div class="entry-list">
<div class="entry-item reveal" onclick="showToast('正在查看:关于城市夜间照明的若干记录')">
<span class="entry-index">001</span>
<span class="entry-title">关于城市夜间照明的若干记录</span>
<span class="entry-category">日常观察</span>
<span class="entry-arrow">→</span>
</div>
<div class="entry-item reveal" onclick="showToast('正在查看:某些路面标记的含义探讨')">
<span class="entry-index">002</span>
<span class="entry-title">某些路面标记的含义探讨</span>
<span class="entry-category">日常观察</span>
<span class="entry-arrow">→</span>
</div>
<div class="entry-item reveal" onclick="showToast('正在查看:电梯按钮排列方式的比较')">
<span class="entry-index">003</span>
<span class="entry-title">电梯按钮排列方式的比较</span>
<span class="entry-category">日常观察</span>
<span class="entry-arrow">→</span>
</div>
<div class="entry-item reveal" onclick="showToast('正在查看:超市货架高度与视线的关联')">
<span class="entry-index">004</span>
<span class="entry-title">超市货架高度与视线的关联</span>
<span class="entry-category">日常观察</span>
<span class="entry-arrow">→</span>
</div>
<div class="entry-item reveal" onclick="showToast('正在查看:声音在走廊中传播的记录')">
<span class="entry-index">005</span>
<span class="entry-title">声音在走廊中传播的记录</span>
<span class="entry-category">日常观察</span>
<span class="entry-arrow">→</span>
</div>
<div class="entry-item reveal" onclick="showToast('正在查看:天气预报道歉用语的频次统计')">
<span class="entry-index">006</span>
<span class="entry-title">天气预报道歉用语的频次统计</span>
<span class="entry-category">资料归档</span>
<span class="entry-arrow">→</span>
</div>
<div class="entry-item reveal" onclick="showToast('正在查看:公共场所时钟走时偏差的采集')">
<span class="entry-index">007</span>
<span class="entry-title">公共场所时钟走时偏差的采集</span>
<span class="entry-category">资料归档</span>
<span class="entry-arrow">→</span>
</div>
<div class="entry-item reveal" onclick="showToast('正在查看:雨后积水倒影的几点笔记')">
<span class="entry-index">008</span>
<span class="entry-title">雨后积水倒影的几点笔记</span>
<span class="entry-category">资料归档</span>
<span class="entry-arrow">→</span>
</div>
<div class="entry-item reveal" onclick="showToast('正在查看:窗户反光中偶见的现象')">
<span class="entry-index">009</span>
<span class="entry-title">窗户反光中偶见的现象</span>
<span class="entry-category">资料归档</span>
<span class="entry-arrow">→</span>
</div>
<div class="entry-item reveal" onclick="showToast('正在查看:地铁报站语音的语调变化')">
<span class="entry-index">010</span>
<span class="entry-title">地铁报站语音的语调变化</span>
<span class="entry-category">日常观察</span>
<span class="entry-arrow">→</span>
</div>
<div class="entry-item reveal" onclick="showToast('正在查看:等候时排队方向的倾向')">
<span class="entry-index">011</span>
<span class="entry-title">等候时排队方向的倾向</span>
<span class="entry-category">日常观察</span>
<span class="entry-arrow">→</span>
</div>
<div class="entry-item reveal" onclick="showToast('正在查看:门把手形状与使用直觉')">
<span class="entry-index">012</span>
<span class="entry-title">门把手形状与使用直觉</span>
<span class="entry-category">日常观察</span>
<span class="entry-arrow">→</span>
</div>
</div>
</section>
<!-- 分类卡片 -->
<section class="cards-section" id="cards">
<div class="section-header reveal">
<h2 class="section-title">六个分类</h2>
<span class="section-tag">Categories</span>
</div>
<div class="cards-grid reveal">
<div class="card-item">
<div class="card-index">01</div>
<div class="card-title">日常观察</div>
<div class="card-desc">对身边事物、空间与行为的即时记录,不带结论。</div>
<div class="card-line"></div>
</div>
<div class="card-item">
<div class="card-index">02</div>
<div class="card-title">资料归档</div>
<div class="card-desc">来自公开渠道的信息汇总,按时间或主题编列。</div>
<div class="card-line"></div>
</div>
<div class="card-item">
<div class="card-index">03</div>
<div class="card-title">技术备忘</div>
<div class="card-desc">涉及技术背景的笔记,为参考目的而保留。</div>
<div class="card-line"></div>
</div>
<div class="card-item">
<div class="card-index">04</div>
<div class="card-title">场所记录</div>
<div class="card-desc">关于特定地点的描述性文字,无评价意图。</div>
<div class="card-line"></div>
</div>
<div class="card-item">
<div class="card-index">05</div>
<div class="card-title">时间标注</div>
<div class="card-desc">以时间为主线的条目,记录先后而非因果。</div>
<div class="card-line"></div>
</div>
<div class="card-item">
<div class="card-index">06</div>
<div class="card-title">其他</div>
<div class="card-desc">不便归入上述类别的零散记录。</div>
<div class="card-line"></div>
</div>
</div>
</section>
<!-- 声明 -->
<section class="disclaimer-section" id="disclaimer">
<div class="section-header reveal">
<h2 class="section-title">关于本站</h2>
<span class="section-tag">About</span>
</div>
<div class="disclaimer-box reveal">
<div class="disclaimer-title">免责与说明</div>
<div class="disclaimer-text">
本网站所载内容均为正常话题的汇总与归档,不涉及国际上违法或不当信息。但在中国法律下可能受到影响。<br><br>
所有条目仅作记录用途,不代表任何机构立场,亦不构成任何形式的建议或判断。<br><br>
部分内容可能因表述方式而显得模糊 —— 这正是「看不清」的含义所在:有些事情本身就是看不清的,我们只是如实收录。<br><br>
如有疑问,可通过页面底部的方式联系。
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="site-footer">
<div class="footer-left">© 1800 ~ 2026 看不清的事情 — 你来判断对错,我们只告诉你事实。</div>
<div class="footer-right">UNCLEAR MATTERS / v1.0</div>
</footer>
</div>
<!-- Toast -->
<div class="toast" id="toast"></div>
<script>
// 滚动显示动画
const revealElements = document.querySelectorAll('.reveal');
const revealObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
revealElements.forEach(el => revealObserver.observe(el));
// 数字递增动画
const countElements = document.querySelectorAll('[data-count]');
const countObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const el = entry.target;
const target = parseInt(el.dataset.count);
let current = 0;
const duration = 1200;
const step = target / (duration / 16);
const timer = setInterval(() => {
current += step;
if (current >= target) {
current = target;
clearInterval(timer);
}
el.textContent = Math.round(current);
}, 16);
countObserver.unobserve(el);
}
});
}, { threshold: 0.5 });
countElements.forEach(el => countObserver.observe(el));
// Toast
let toastTimer;
function showToast(msg) {
const toast = document.getElementById('toast');
toast.textContent = msg;
toast.classList.add('show');
clearTimeout(toastTimer);
toastTimer = setTimeout(() => {
toast.classList.remove('show');
}, 2500);
}
// 移动端菜单
const menuToggle = document.getElementById('menuToggle');
const mobileMenu = document.getElementById('mobileMenu');
let menuOpen = false;
menuToggle.addEventListener('click', () => {
menuOpen = !menuOpen;
if (menuOpen) {
mobileMenu.classList.add('open');
} else {
mobileMenu.classList.remove('open');
}
});
function closeMobileMenu() {
menuOpen = false;
mobileMenu.classList.remove('open');
}
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
// 侧边导航当前项高亮
const sections = document.querySelectorAll('section[id]');
const navItems = document.querySelectorAll('.nav-item');
window.addEventListener('scroll', () => {
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop - 200;
if (window.scrollY >= sectionTop) {
current = section.getAttribute('id');
}
});
navItems.forEach(item => {
const href = item.getAttribute('href');
if (href === '#' + current) {
item.querySelector('.nav-dot').style.background = '#1a1a1a';
item.querySelector('.nav-dot').style.transform = 'scale(1.5)';
} else {
item.querySelector('.nav-dot').style.background = '#d1d5db';
item.querySelector('.nav-dot').style.transform = 'scale(1)';
}
});
});
</script>
</body>
</html>