mirror of
https://github.com/Cametendo/devil-fruit-encyclopedia.git
synced 2026-03-17 23:00:20 +01:00
84 lines
2.6 KiB
HTML
84 lines
2.6 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</title>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
<script src="script.js" defer></script>
|
|
</head>
|
|
<body>
|
|
<header class="page-header">
|
|
<p class="eyebrow">Grand Line Archive</p>
|
|
<h1>Devil Fruit Encyclopedia</h1>
|
|
<p class="hero-copy">
|
|
A spoiler-heavy guide to famous Devil Fruits from One Piece, featuring
|
|
canon names, users, powers, and fruit designs.
|
|
</p>
|
|
</header>
|
|
|
|
<main class="content">
|
|
<section class="overview card">
|
|
<div>
|
|
<h2>Known Fruits</h2>
|
|
<p>
|
|
This collection now uses real Devil Fruit names, current users, fruit
|
|
classes, and lore details instead of placeholder cards.
|
|
</p>
|
|
</div>
|
|
<div class="stat-row" aria-label="Devil fruit stats">
|
|
<div class="stat-pill">
|
|
<span class="stat-label">Entries</span>
|
|
<strong id="fruit-count">0</strong>
|
|
</div>
|
|
<div class="stat-pill">
|
|
<span class="stat-label">Classes</span>
|
|
<strong>Paramecia, Logia, Zoan</strong>
|
|
</div>
|
|
<div class="stat-pill">
|
|
<span class="stat-label">Images</span>
|
|
<strong>Canon fruit art</strong>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section-heading">
|
|
<h2>Fruit Collection</h2>
|
|
<p>
|
|
Canon fruit images are loaded from the One Piece Wiki image CDN. Some
|
|
entries also note previous users when that history matters.
|
|
</p>
|
|
</section>
|
|
|
|
<section
|
|
class="fruit-grid"
|
|
id="fruit-grid"
|
|
aria-label="Devil fruit encyclopedia entries"
|
|
>
|
|
</section>
|
|
|
|
<template id="fruit-card-template">
|
|
<article class="fruit-card">
|
|
<img />
|
|
<div class="fruit-info">
|
|
<div class="title-row">
|
|
<h3></h3>
|
|
<span class="fruit-type"></span>
|
|
</div>
|
|
<p class="subtitle"></p>
|
|
<ul class="fruit-meta"></ul>
|
|
<p class="description"></p>
|
|
<p class="extra-detail"></p>
|
|
<a class="source-link" target="_blank" rel="noreferrer">Source</a>
|
|
</div>
|
|
</article>
|
|
</template>
|
|
<section class="credits card">
|
|
<p>
|
|
Images and lore details are based on the One Piece Wiki fruit pages.
|
|
</p>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|