844 lines
25 KiB
HTML
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> |