mirror of
https://github.com/Cametendo/devil-fruit-encyclopedia.git
synced 2026-09-14 00:09:47 +02:00
Rebuild site as a full One Piece character & Devil Fruit wiki
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.
This commit is contained in:
Claude
118
index.html
118
index.html
@@ -3,82 +3,66 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Devil Fruit Encyclopedia</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<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="page-header">
|
||||
<h1>Devil Fruit Encyclopedia</h1>
|
||||
<p>Quickstart UI mockup (no JavaScript yet).</p>
|
||||
<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>
|
||||
|
||||
<main class="content">
|
||||
<section class="toolbar card">
|
||||
<h2>Fruit Collection</h2>
|
||||
<p>
|
||||
Later, your JS can hook into these buttons and cards for add, update, and
|
||||
delete actions.
|
||||
<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="toolbar-actions">
|
||||
<button type="button">+ Add Fruit</button>
|
||||
<button type="button">Update Selected</button>
|
||||
<button type="button" class="danger">Delete Selected</button>
|
||||
<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="fruit-grid" aria-label="Devil fruit list preview">
|
||||
<article class="fruit-card">
|
||||
<img
|
||||
src="https://picsum.photos/seed/gomu/400/260"
|
||||
alt="Placeholder image for Gomu Gomu no Mi"
|
||||
/>
|
||||
<div class="fruit-info">
|
||||
<h3>Gomu Gomu no Mi</h3>
|
||||
<p><strong>Type:</strong> Paramecia</p>
|
||||
<p><strong>User:</strong> Monkey D. Luffy</p>
|
||||
<p>Makes the user’s body rubber-like.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="fruit-card">
|
||||
<img
|
||||
src="https://picsum.photos/seed/mera/400/260"
|
||||
alt="Placeholder image for Mera Mera no Mi"
|
||||
/>
|
||||
<div class="fruit-info">
|
||||
<h3>Mera Mera no Mi</h3>
|
||||
<p><strong>Type:</strong> Logia</p>
|
||||
<p><strong>User:</strong> Portgas D. Ace / Sabo</p>
|
||||
<p>Allows creation and control of fire.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="fruit-card">
|
||||
<img
|
||||
src="https://picsum.photos/seed/ope/400/260"
|
||||
alt="Placeholder image for Ope Ope no Mi"
|
||||
/>
|
||||
<div class="fruit-info">
|
||||
<h3>Ope Ope no Mi</h3>
|
||||
<p><strong>Type:</strong> Paramecia</p>
|
||||
<p><strong>User:</strong> Trafalgar D. Water Law</p>
|
||||
<p>Creates a ROOM where the user can manipulate objects.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="fruit-card">
|
||||
<img
|
||||
src="https://picsum.photos/seed/yami/400/260"
|
||||
alt="Placeholder image for Yami Yami no Mi"
|
||||
/>
|
||||
<div class="fruit-info">
|
||||
<h3>Yami Yami no Mi</h3>
|
||||
<p><strong>Type:</strong> Logia</p>
|
||||
<p><strong>User:</strong> Marshall D. Teach</p>
|
||||
<p>Manipulates darkness and gravity-like pull.</p>
|
||||
</div>
|
||||
</article>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user