mirror of
https://github.com/Cametendo/devil-fruit-encyclopedia.git
synced 2026-09-13 15:59:48 +02:00
c645ee09d2
Adds js/portraits.js: procedurally generated, original SVG artwork for all 101 characters (a role-themed line-art medallion — sword for swordsmen, crown for royalty, compass for navigators, etc., derived from each character's role/epithet/affiliation) and all 58 Devil Fruits (a stylized swirled-fruit icon colored by category with the fruit's symbolic emoji at center). Official One Piece artwork is copyrighted (Oda/Shueisha/Toei), so rather than scraping and re-hosting character art from the web, every image here is drawn from scratch with basic SVG primitives — no external assets, no copyright risk, fully offline-capable, and crisp at any size since it's vector. Wires the new generators into every card and detail view: character cards/profile header, Devil Fruit cards/detail header, the Devil-Fruit callout on character pages, and user chips on Devil Fruit pages. Removes the now-unused plain-letter initialFor() avatar helper.
68 lines
3.1 KiB
HTML
68 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Devil Fruit Encyclopedia — One Piece Wiki</title>
|
|
<meta name="description" content="Every Devil Fruit's history, powers, strengths, weaknesses, and full user lineage — Paramecia, Zoan, and Logia." />
|
|
<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>Devil Fruit Encyclopedia</h1>
|
|
<p class="hero__sub">
|
|
Every Devil Fruit carried by a character in this wiki — its history, its powers,
|
|
its strengths and weaknesses, and every user who ever held it.
|
|
</p>
|
|
<div class="hero__stats">
|
|
<div class="stat-pill"><strong id="stat-fruits">57</strong><span>Devil Fruits</span></div>
|
|
<div class="stat-pill"><strong id="stat-paramecia">0</strong><span>Paramecia</span></div>
|
|
<div class="stat-pill"><strong id="stat-zoan">0</strong><span>Zoan</span></div>
|
|
<div class="stat-pill"><strong id="stat-logia">0</strong><span>Logia</span></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<main>
|
|
<section class="container">
|
|
<div class="filter-bar">
|
|
<input type="search" id="search-input" class="input" placeholder="Search by fruit name or user…" autocomplete="off" />
|
|
<span class="filter-meta" id="result-count"></span>
|
|
</div>
|
|
<div class="chip-row" id="category-chips"></div>
|
|
</section>
|
|
|
|
<section class="section container">
|
|
<div class="grid fruit-grid" id="fruit-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/portraits.js"></script>
|
|
<script src="js/app.js"></script>
|
|
<script src="js/fruits.js"></script>
|
|
</body>
|
|
</html>
|