码桶
发现社区成员的开源项目
index.html5.9 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>爱情苦海 — Love's Bitter Sea</title>
<meta name="description" content="爱情苦海 — 在爱的汪洋中，我们都是漂泊的旅人。A poetic exploration of love's vast, bittersweet ocean.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/themes/minimal.css" id="theme-css">
</head>
<body>
<!-- Theme Switcher -->
<div class="theme-switcher">
<button class="theme-toggle" id="theme-toggle" aria-label="切换主题">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="5"/>
<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
</svg>
</button>
<div class="theme-panel" id="theme-panel">
<div class="theme-panel-title">选择主题</div>
<button class="theme-option" data-theme="dark">
<span class="theme-swatch theme-swatch-dark"></span>
<span class="theme-option-label">
<span class="theme-option-name">苦海深渊</span>
<span class="theme-option-desc">Dark & Moody</span>
</span>
</button>
<button class="theme-option" data-theme="chinese">
<span class="theme-swatch theme-swatch-chinese"></span>
<span class="theme-option-label">
<span class="theme-option-name">水墨丹青</span>
<span class="theme-option-desc">Elegant Chinese</span>
</span>
</button>
<button class="theme-option active" data-theme="minimal">
<span class="theme-swatch theme-swatch-minimal"></span>
<span class="theme-option-label">
<span class="theme-option-name">极简</span>
<span class="theme-option-desc">Modern Minimal</span>
</span>
</button>
<button class="theme-option" data-theme="romantic">
<span class="theme-swatch theme-swatch-romantic"></span>
<span class="theme-option-label">
<span class="theme-option-name">柔情似水</span>
<span class="theme-option-desc">Romantic Warm</span>
</span>
</button>
</div>
</div>
<!-- Hero Section -->
<section class="hero" id="hero">
<div class="hero-content">
<h1 class="hero-title">爱情苦海</h1>
<p class="hero-subtitle-cn">在爱的汪洋中，我们都是漂泊的旅人</p>
<p class="hero-subtitle-en">Love's Bitter Sea</p>
</div>
<div class="wave-container">
<div class="wave wave-1"></div>
<div class="wave wave-2"></div>
<div class="wave wave-3"></div>
</div>
<div class="scroll-indicator">
<span class="scroll-text">向下探索</span>
<div class="scroll-arrow"></div>
</div>
</section>
<!-- Philosophy Section -->
<section class="philosophy" id="philosophy">
<div class="container">
<div class="poem-lines">
<p class="poem-line fade-in">情深似海，覆水难收</p>
<p class="poem-line fade-in">Love runs deep as the sea — once spilled, never retrieved</p>
<div class="poem-divider fade-in"></div>
<p class="poem-line fade-in">苦海无边，回头是岸</p>
<p class="poem-line fade-in">The bitter sea has no shore, yet turning back reveals the land</p>
<div class="poem-divider fade-in"></div>
<p class="poem-line fade-in">相思如潮，来去无声</p>
<p class="poem-line fade-in">Longing flows like the tide — arriving and departing in silence</p>
<div class="poem-divider fade-in"></div>
<p class="poem-line fade-in">爱是深渊，亦是星辰</p>
<p class="poem-line fade-in">Love is the abyss, and also the stars</p>
</div>
</div>
</section>
<!-- Visual Interlude -->
<section class="interlude" id="interlude">
<div class="ocean">
<div class="ocean-wave ocean-wave-1"></div>
<div class="ocean-wave ocean-wave-2"></div>
<div class="ocean-wave ocean-wave-3"></div>
<div class="ocean-wave ocean-wave-4"></div>
</div>
<div class="interlude-quote fade-in">
<p class="quote-text">世间万般苦，唯情最难渡</p>
<p class="quote-translation">Of all the world's sorrows, love is the hardest to cross</p>
</div>
</section>
<!-- About Section -->
<section class="about" id="about">
<div class="container">
<div class="about-content fade-in">
<h2 class="about-title">何为爱情苦海</h2>
<div class="about-text">
<p>「爱情苦海」是一个古老的隐喻——爱如大海，深不可测，苦乐交织。我们在其中沉浮，品味人生百态。</p>
<p>这片海域没有尽头，每一次潮起潮落都是一段故事。有人在浪尖起舞，有人在深处沉默。但无论如何，我们都曾为爱勇敢过。</p>
<p>愿每一个在苦海中漂泊的灵魂，终能找到属于自己的彼岸。</p>
</div>
<div class="about-english">
<p>"Love's Bitter Sea" is an ancient metaphor — love is like the ocean, unfathomably deep, woven with joy and sorrow. We rise and fall within it, tasting all of life's flavors.</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p class="footer-name">爱情苦海</p>
<p class="footer-copy">© 2026 aqkh.com</p>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>