222 lines
10 KiB
HTML
222 lines
10 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>
|
||
<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=Noto+Serif+SC:wght@400;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="css/style.css">
|
||
</head>
|
||
<body>
|
||
<!-- 导航栏 -->
|
||
<nav class="navbar">
|
||
<div class="nav-container">
|
||
<a href="index.html" class="logo">
|
||
<span class="logo-icon">⚔️</span>
|
||
<span class="logo-text">阿拉德文库</span>
|
||
</a>
|
||
<div class="nav-links">
|
||
<a href="index.html" class="active">首页</a>
|
||
<a href="chapters.html">目录</a>
|
||
<a href="wiki.html">设定集</a>
|
||
<a href="#about">关于</a>
|
||
</div>
|
||
<div class="nav-actions">
|
||
<button class="theme-toggle" id="themeToggle">
|
||
<span class="theme-icon">🌙</span>
|
||
</button>
|
||
<button class="menu-toggle" id="menuToggle">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 英雄区域 -->
|
||
<section class="hero">
|
||
<div class="hero-bg"></div>
|
||
<div class="hero-particles" id="particles"></div>
|
||
<div class="hero-content">
|
||
<div class="book-showcase">
|
||
<div class="book-cover">
|
||
<div class="book-spine"></div>
|
||
<div class="book-front" style="background: url('images/cover.png') center/cover no-repeat;">
|
||
<div class="cover-overlay"></div>
|
||
<div class="cover-title">
|
||
<h1>阿拉德</h1>
|
||
<h2>剑之回响</h2>
|
||
</div>
|
||
<div class="cover-author">作者：李策</div>
|
||
</div>
|
||
</div>
|
||
<div class="book-shadow"></div>
|
||
</div>
|
||
<div class="hero-info">
|
||
<div class="badge">🔥 热门连载</div>
|
||
<h1 class="hero-title">阿拉德：剑之回响</h1>
|
||
<p class="hero-subtitle">DNF同人 · 热血冒险 · 剑魂传说</p>
|
||
<p class="hero-description">
|
||
跟随林克的脚步，从洛兰小村庄出发，一路成长为剑魂大师。<br>
|
||
格兰之森的危机、天空之城的秘密、使徒的阴谋……<br>
|
||
一段波澜壮阔的冒险传奇正在展开！
|
||
</p>
|
||
<div class="hero-stats">
|
||
<div class="stat">
|
||
<span class="stat-number">14</span>
|
||
<span class="stat-label">已更新章节</span>
|
||
</div>
|
||
<div class="stat">
|
||
<span class="stat-number">50k+</span>
|
||
<span class="stat-label">总字数</span>
|
||
</div>
|
||
<div class="stat">
|
||
<span class="stat-number">⭐⭐⭐⭐⭐</span>
|
||
<span class="stat-label">读者评分</span>
|
||
</div>
|
||
</div>
|
||
<div class="hero-actions">
|
||
<a href="reader.html?id=1" class="btn btn-primary">
|
||
<span>开始阅读</span>
|
||
<svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||
</svg>
|
||
</a>
|
||
<a href="chapters.html" class="btn btn-secondary">
|
||
<span>查看目录</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 最新章节 -->
|
||
<section class="latest-chapters">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2 class="section-title">
|
||
<span class="title-icon">📖</span>
|
||
最新章节
|
||
</h2>
|
||
<a href="chapters.html" class="view-all">
|
||
查看全部
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M9 18l6-6-6-6"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
<div class="chapters-grid" id="latestChapters">
|
||
<!-- 章节卡片将通过JS动态生成 -->
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 故事简介 -->
|
||
<section class="story-intro" id="about">
|
||
<div class="container">
|
||
<div class="intro-content">
|
||
<div class="intro-text">
|
||
<h2 class="section-title">故事简介</h2>
|
||
<div class="intro-block">
|
||
<h3>🎮 基于DNF60版本经典地图</h3>
|
||
<p>严格按照DNF 60版本地图等级推进，从洛兰到格兰之森，从天空之城到天帷巨兽，带你重温经典游戏场景，体验原汁原味的阿拉德大陆。</p>
|
||
</div>
|
||
<div class="intro-block">
|
||
<h3>⚔️ 剑魂的成长之路</h3>
|
||
<p>主角林克从鬼剑士成长为剑魂，掌握武器大师特性，灵活切换五种武器应对不同敌人。太刀、巨剑、短剑、钝器、光剑——在战斗中体验策略与技巧的完美结合。</p>
|
||
</div>
|
||
<div class="intro-block">
|
||
<h3>🔥 热血冒险与深度剧情</h3>
|
||
<p>不只是打怪升级，更是一段关于成长、友情与守护的传奇。赛丽亚的身世之谜、GSD的往事、天空之城的秘密……层层递进的剧情让你欲罢不能。</p>
|
||
</div>
|
||
</div>
|
||
<div class="intro-visual">
|
||
<div class="world-map">
|
||
<div class="map-region" style="--delay: 0s">
|
||
<span class="region-icon">🌲</span>
|
||
<span class="region-name">洛兰</span>
|
||
</div>
|
||
<div class="map-region" style="--delay: 0.1s">
|
||
<span class="region-icon">🏰</span>
|
||
<span class="region-name">赫顿玛尔</span>
|
||
</div>
|
||
<div class="map-region" style="--delay: 0.2s">
|
||
<span class="region-icon">☁️</span>
|
||
<span class="region-name">天空之城</span>
|
||
</div>
|
||
<div class="map-region" style="--delay: 0.3s">
|
||
<span class="region-icon">🐋</span>
|
||
<span class="region-name">天帷巨兽</span>
|
||
</div>
|
||
<div class="map-line"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 角色展示 -->
|
||
<section class="characters">
|
||
<div class="container">
|
||
<h2 class="section-title center">
|
||
<span class="title-icon">👥</span>
|
||
主要角色
|
||
</h2>
|
||
<div class="characters-grid">
|
||
<div class="character-card">
|
||
<div class="character-avatar">
|
||
<div class="avatar-bg"></div>
|
||
<span class="avatar-icon">🗡️</span>
|
||
</div>
|
||
<h3>林克</h3>
|
||
<p class="character-role">主角 · 剑魂</p>
|
||
<p class="character-desc">从虚祖出发的鬼剑士，追求极致剑术，武器大师，掌握五种武器切换。</p>
|
||
</div>
|
||
<div class="character-card">
|
||
<div class="character-avatar">
|
||
<div class="avatar-bg" style="--hue: 120"></div>
|
||
<span class="avatar-icon">✨</span>
|
||
</div>
|
||
<h3>赛丽亚</h3>
|
||
<p class="character-role">女主 · 元素师</p>
|
||
<p class="character-desc">艾尔文防线的神秘少女，真实身份是精灵族最后的血脉，林克的最重要的伙伴。</p>
|
||
</div>
|
||
<div class="character-card">
|
||
<div class="character-avatar">
|
||
<div class="avatar-bg" style="--hue: 240"></div>
|
||
<span class="avatar-icon">👁️</span>
|
||
</div>
|
||
<h3>GSD</h3>
|
||
<p class="character-role">导师 · 阿修罗</p>
|
||
<p class="character-desc">赫顿玛尔的传奇剑士，林克的师父，实力深不可测的"开挂瞎子"。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="footer-content">
|
||
<div class="footer-brand">
|
||
<span class="logo-icon">⚔️</span>
|
||
<span class="logo-text">阿拉德文库</span>
|
||
</div>
|
||
<p class="footer-desc">为《阿拉德：剑之回响》打造的专属阅读平台</p>
|
||
<div class="footer-links">
|
||
<a href="index.html">首页</a>
|
||
<a href="chapters.html">目录</a>
|
||
<a href="#about">关于</a>
|
||
</div>
|
||
<p class="footer-copyright">© 2026 阿拉德：剑之回响 · 李策 著</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="js/app.js"></script>
|
||
</body>
|
||
</html>
|