mirror of
https://github.com/Cametendo/devil-fruit-encyclopedia.git
synced 2026-09-13 15:59:48 +02:00
8f60ff8499
Replaces the 4-card quickstart mockup with a data-driven wiki covering the 100 most well-known One Piece characters and every Devil Fruit they carry (57 fruits total), each with its own linked detail page. - js/characters-data.js: 100 character profiles (stats, bio, abilities) - js/fruits-data.js: 57 Devil Fruit entries (history, powers, strengths/ weaknesses, full user lineage) cross-linked to character ids - index.html + main.js: searchable/filterable character grid - character.html + character.js: character detail template driven by ?id= - fruits.html + fruits.js: searchable Devil Fruit index with type filter - fruit.html + fruit.js: Devil Fruit detail template driven by ?id= - css/styles.css: new wanted-poster/ocean-navy design system, responsive - Fixed docker-compose volume mount (previously pointed at a nonexistent ./data directory) and rewrote README for the new structure Verified with a headless browser: all four page types render without script errors, search/filter interactions work, and every character- fruit cross-reference resolves correctly.
69 lines
3.2 KiB
HTML
69 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>One Piece Wiki — Characters & Devil Fruit Encyclopedia</title>
|
|
<meta name="description" content="A fan-made encyclopedia of the 100 most well-known One Piece characters and every Devil Fruit they carry — history, powers, and prior users." />
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🏴☠️</text></svg>" />
|
|
<link rel="stylesheet" href="css/styles.css" />
|
|
</head>
|
|
<body>
|
|
<header class="site-header">
|
|
<div class="container site-header__inner">
|
|
<a class="brand" href="index.html"><span class="brand__mark">⚓</span> One Piece Wiki</a>
|
|
<nav class="site-nav">
|
|
<a href="index.html">Characters</a>
|
|
<a href="fruits.html">Devil Fruits</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="hero">
|
|
<div class="container hero__inner">
|
|
<span class="hero__eyebrow">⚠ Spoiler warning — covers the full story</span>
|
|
<h1>The One Piece Wiki</h1>
|
|
<p class="hero__sub">
|
|
An encyclopedia of the Grand Line's most legendary pirates, marines, and revolutionaries —
|
|
and every Devil Fruit that made them famous, from history and awakening to every user who ever held it.
|
|
</p>
|
|
<div class="hero__stats">
|
|
<div class="stat-pill"><strong id="stat-characters">100</strong><span>Characters</span></div>
|
|
<div class="stat-pill"><strong id="stat-fruits">57</strong><span>Devil Fruits</span></div>
|
|
<div class="stat-pill"><strong>3</strong><span>Fruit Classes</span></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<main>
|
|
<section class="container">
|
|
<div class="filter-bar">
|
|
<input type="search" id="search-input" class="input" placeholder="Search by name, epithet, or affiliation…" autocomplete="off" />
|
|
<select id="affiliation-select" class="select">
|
|
<option value="">All affiliations</option>
|
|
</select>
|
|
<label class="checkbox"><input type="checkbox" id="fruit-only-checkbox" /> Devil Fruit users only</label>
|
|
<span class="filter-meta" id="result-count"></span>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section container">
|
|
<div class="grid character-grid" id="character-grid" aria-live="polite"></div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="site-footer">
|
|
<div class="container">
|
|
<span class="footer-warning">⚠ This wiki covers the entire One Piece story, including its most recent arcs.</span>
|
|
<p>Fan-made encyclopedia for educational and entertainment purposes only. One Piece is created by Eiichiro Oda. Not affiliated with Shueisha, Toei Animation, or Eiichiro Oda.</p>
|
|
<p>Built with HTML, CSS & JavaScript by <a href="https://www.github.com/Cametendo" target="_blank" rel="noopener">Cametendo</a> · MIT License</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="js/characters-data.js"></script>
|
|
<script src="js/fruits-data.js"></script>
|
|
<script src="js/app.js"></script>
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html>
|