Cametendo/devil-fruit-encyclopedia
1
0
Fork 0
mirror of https://github.com/Cametendo/devil-fruit-encyclopedia.git synced 2026-03-18 07:10:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

added more fruits and images

Browse Source
This commit is contained in:
Cametendo
2026-03-16 14:34:16 +01:00
parent 1faf13d2a5
commit d707e691d0
4 changed files with 504 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/hie-hie-no-mi.svg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 249 KiB

109
index.html
View File

@@ -5,79 +5,78 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Devil Fruit Encyclopedia</title> <title>Devil Fruit Encyclopedia</title>
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
<script src="script.js" defer></script>
</head> </head>
<body> <body>
<header class="page-header"> <header class="page-header">
<p class="eyebrow">Grand Line Archive</p>
<h1>Devil Fruit Encyclopedia</h1> <h1>Devil Fruit Encyclopedia</h1>
<p>Quickstart UI mockup (no JavaScript yet).</p> <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> </header>
<main class="content"> <main class="content">
<section class="toolbar card"> <section class="overview card">
<h2>Fruit Collection</h2> <div>
<h2>Known Fruits</h2>
<p> <p>
Later, your JS can hook into these buttons and cards for add, update, and This collection now uses real Devil Fruit names, current users, fruit
delete actions. classes, and lore details instead of placeholder cards.
</p> </p>
<div class="toolbar-actions"> </div>
<button type="button">+ Add Fruit</button> <div class="stat-row" aria-label="Devil fruit stats">
<button type="button">Update Selected</button> <div class="stat-pill">
<button type="button" class="danger">Delete Selected</button> <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> </div>
</section> </section>
<section class="fruit-grid" aria-label="Devil fruit list preview"> <section class="section-heading">
<article class="fruit-card"> <h2>Fruit Collection</h2>
<img <p>
src="https://picsum.photos/seed/gomu/400/260" Canon fruit images are loaded from the One Piece Wiki image CDN. Some
alt="Placeholder image for Gomu Gomu no Mi" entries also note previous users when that history matters.
/> </p>
<div class="fruit-info"> </section>
<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"> <section
<img class="fruit-grid"
src="https://picsum.photos/seed/mera/400/260" id="fruit-grid"
alt="Placeholder image for Mera Mera no Mi" aria-label="Devil fruit encyclopedia entries"
/> >
<div class="fruit-info"> </section>
<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>
<template id="fruit-card-template">
<article class="fruit-card"> <article class="fruit-card">
<img <img />
src="https://picsum.photos/seed/ope/400/260"
alt="Placeholder image for Ope Ope no Mi"
/>
<div class="fruit-info"> <div class="fruit-info">
<h3>Ope Ope no Mi</h3> <div class="title-row">
<p><strong>Type:</strong> Paramecia</p> <h3></h3>
<p><strong>User:</strong> Trafalgar D. Water Law</p> <span class="fruit-type"></span>
<p>Creates a ROOM where the user can manipulate objects.</p> </div>
</div> <p class="subtitle"></p>
</article> <ul class="fruit-meta"></ul>
<p class="description"></p>
<article class="fruit-card"> <p class="extra-detail"></p>
<img <a class="source-link" target="_blank" rel="noreferrer">Source</a>
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> </div>
</article> </article>
</template>
<section class="credits card">
<p>
Images and lore details are based on the One Piece Wiki fruit pages.
</p>
</section> </section>
</main> </main>
</body> </body>

259
script.js
View File

@@ -0,0 +1,259 @@
const devilFruits = [
{
name: "Gomu Gomu no Mi",
alias: "True name: Hito Hito no Mi, Model: Nika",
type: "Mythical Zoan",
user: "Monkey D. Luffy",
image:
"https://static.wikia.nocookie.net/onepiece/images/1/12/Gomu_Gomu_no_Mi_Infobox.png/revision/latest?cb=20221108072550",
description:
"Grants a rubber-like body and, after awakening, allows Luffy to fight with extreme freedom and cartoonish physicality.",
detail:
"The World Government concealed its real identity for centuries because of its connection to the Sun God Nika.",
source: "https://onepiece.fandom.com/wiki/Gomu_Gomu_no_Mi",
meta: [
["Category", "Mythical Zoan disguised as Paramecia"],
["Current user", "Monkey D. Luffy"],
["Notable trait", "Elastic body, explosive awakening versatility"],
],
},
{
name: "Mera Mera no Mi",
alias: "Flame-Flame Fruit",
type: "Logia",
user: "Portgas D. Ace, later Sabo",
image:
"https://static.wikia.nocookie.net/onepiece/images/8/8c/Mera_Mera_no_Mi_Infobox.png/revision/latest?cb=20240710204632",
description:
"Lets the user create, control, and become fire, making it one of the best-known offensive Logias.",
detail:
"After Ace's death, the fruit reincarnated and was won by Sabo in Dressrosa's Corrida Colosseum tournament.",
source: "https://onepiece.fandom.com/wiki/Mera_Mera_no_Mi",
meta: [
["Category", "Logia"],
["Current user", "Sabo"],
["Previous user", "Portgas D. Ace"],
],
},
{
name: "Ope Ope no Mi",
alias: "Op-Op Fruit",
type: "Paramecia",
user: "Trafalgar D. Water Law",
image:
"https://static.wikia.nocookie.net/onepiece/images/0/0e/Ope_Ope_no_Mi_Infobox.png/revision/latest?cb=20210409181034",
description:
"Creates a spherical ROOM where the user can perform impossible surgeries, spatial cuts, and object manipulation.",
detail:
"It is called the Ultimate Devil Fruit by some because it can perform the Perennial Youth Operation at the cost of the user's life.",
source: "https://onepiece.fandom.com/wiki/Ope_Ope_no_Mi",
meta: [
["Category", "Paramecia"],
["Current user", "Trafalgar Law"],
["Signature move", "ROOM"],
],
},
{
name: "Yami Yami no Mi",
alias: "Dark-Dark Fruit",
type: "Logia",
user: "Marshall D. Teach",
image:
"https://static.wikia.nocookie.net/onepiece/images/f/f5/Yami_Yami_no_Mi_Infobox.png/revision/latest?cb=20240627010252",
description:
"Controls darkness with a gravity-like pull that absorbs attacks, drags targets in, and can suppress other Devil Fruit powers through contact.",
detail:
"Teach hunted this fruit for years before betraying the Whitebeard Pirates to claim it.",
source: "https://onepiece.fandom.com/wiki/Yami_Yami_no_Mi",
meta: [
["Category", "Logia"],
["Current user", "Marshall D. Teach"],
["Notable trait", "Can nullify other abilities on contact"],
],
},
{
name: "Bara Bara no Mi",
alias: "Chop-Chop Fruit",
type: "Paramecia",
user: "Buggy",
image:
"https://static.wikia.nocookie.net/onepiece/images/9/9c/Bara_Bara_no_Mi_Infobox.png/revision/latest?cb=20240421082610",
description:
"Allows the user's body to split into floating pieces while keeping control over each part.",
detail:
"Buggy is effectively immune to sword slashes, which made him a natural counter to cutting attacks long before he became an Emperor.",
source: "https://onepiece.fandom.com/wiki/Bara_Bara_no_Mi",
meta: [
["Category", "Paramecia"],
["Current user", "Buggy"],
["Defense", "Natural resistance to slicing attacks"],
],
},
{
name: "Gura Gura no Mi",
alias: "Tremor-Tremor Fruit",
type: "Paramecia",
user: "Marshall D. Teach",
image:
"https://static.wikia.nocookie.net/onepiece/images/e/e3/Gura_Gura_no_Mi_Infobox.png/revision/latest?cb=20251002184350",
description:
"Creates devastating shockwaves and quakes through the air, sea, and ground on a massive scale.",
detail:
"Formerly wielded by Edward Newgate, it was described as having the power to destroy the world.",
source: "https://onepiece.fandom.com/wiki/Gura_Gura_no_Mi",
meta: [
["Category", "Paramecia"],
["Current user", "Marshall D. Teach"],
["Previous user", "Edward Newgate"],
],
},
{
name: "Hana Hana no Mi",
alias: "Flower-Flower Fruit",
type: "Paramecia",
user: "Nico Robin",
image:
"https://static.wikia.nocookie.net/onepiece/images/2/21/Hana_Hana_no_Mi_Infobox.png/revision/latest?cb=20191228120242",
description:
"Sprouts replicas of the user's body parts on surfaces, enemies, or even in midair, enabling grapples, mobility, and giant limb techniques.",
detail:
"Robin later extends the fruit into full-body manifestations such as Demonio Fleur.",
source: "https://onepiece.fandom.com/wiki/Hana_Hana_no_Mi",
meta: [
["Category", "Paramecia"],
["Current user", "Nico Robin"],
["Utility", "Crowd control, scouting, traversal"],
],
},
{
name: "Hie Hie no Mi",
alias: "Ice-Ice Fruit",
type: "Logia",
user: "Kuzan",
image:
"assets/hie-hie-no-mi.svg",
description:
"Lets the user create, control, and become ice, including freezing oceans and opponents over huge areas.",
detail:
"Kuzan's ten-day duel with Sakazuki permanently changed Punk Hazard's climate.",
source: "https://onepiece.fandom.com/wiki/Hie_Hie_no_Mi",
meta: [
["Category", "Logia"],
["Current user", "Kuzan"],
["Scale", "Can freeze the sea and reshape battlefields"],
],
},
{
name: "Uo Uo no Mi, Model: Seiryu",
alias: "Fish-Fish Fruit, Azure Dragon Model",
type: "Mythical Zoan",
user: "Kaido",
image:
"https://static.wikia.nocookie.net/onepiece/images/f/f9/Uo_Uo_no_Mi%2C_Model_Seiryu_Infobox.png/revision/latest?cb=20211204205430",
description:
"Transforms the user into an enormous azure dragon with flight, flame clouds, wind blades, and elemental attacks.",
detail:
"Vegapunk later used Kaido's lineage factor to create an artificial copy eaten by Momonosuke.",
source: "https://onepiece.fandom.com/wiki/Uo_Uo_no_Mi,_Model:_Seiryu",
meta: [
["Category", "Mythical Zoan"],
["Current user", "Kaido"],
["Related copy", "Artificial version eaten by Momonosuke"],
],
},
{
name: "Mochi Mochi no Mi",
alias: "Mochi-Mochi Fruit",
type: "Special Paramecia",
user: "Charlotte Katakuri",
image:
"https://static.wikia.nocookie.net/onepiece/images/2/2c/Mochi_Mochi_no_Mi_Infobox.png/revision/latest?cb=20250826143835",
description:
"Produces and manipulates mochi with a body that behaves much like a Logia, especially when paired with advanced Observation Haki.",
detail:
"It was initially presented as a Logia before being reclassified as a Special Paramecia.",
source: "https://onepiece.fandom.com/wiki/Mochi_Mochi_no_Mi",
meta: [
["Category", "Special Paramecia"],
["Current user", "Charlotte Katakuri"],
["Combat style", "Shape-shifting mochi body and sticky restraint"],
],
},
{
name: "Ito Ito no Mi",
alias: "String-String Fruit",
type: "Paramecia",
user: "Donquixote Doflamingo",
image:
"https://static.wikia.nocookie.net/onepiece/images/a/ae/Ito_Ito_no_Mi_Infobox.png/revision/latest?cb=20151220070449",
description:
"Creates razor-thin strings for slicing, puppeteering, movement through the sky, and enormous techniques like the Birdcage.",
detail:
"Doflamingo used awakened strings to turn buildings and streets in Dressrosa into attack vectors.",
source: "https://onepiece.fandom.com/wiki/Ito_Ito_no_Mi",
meta: [
["Category", "Paramecia"],
["Current user", "Donquixote Doflamingo"],
["Signature move", "Birdcage"],
],
},
{
name: "Mero Mero no Mi",
alias: "Love-Love Fruit",
type: "Paramecia",
user: "Boa Hancock",
image:
"https://static.wikia.nocookie.net/onepiece/images/9/98/Mero_Mero_no_Mi_Infobox.png/revision/latest?cb=20230306202058",
description:
"Turns targets to stone when they are captivated by the user, and also enables direct petrification through kicks and projectiles.",
detail:
"Its lethality comes from both Hancock's beauty and the fruit's ability to petrify without relying on one specific attack pattern.",
source: "https://onepiece.fandom.com/wiki/Mero_Mero_no_Mi",
meta: [
["Category", "Paramecia"],
["Current user", "Boa Hancock"],
["Threat", "Mass petrification against susceptible targets"],
],
},
];
const fruitGrid = document.querySelector("#fruit-grid");
const template = document.querySelector("#fruit-card-template");
const fruitCount = document.querySelector("#fruit-count");
fruitCount.textContent = String(devilFruits.length);
for (const fruit of devilFruits) {
const card = template.content.firstElementChild.cloneNode(true);
const image = card.querySelector("img");
const title = card.querySelector("h3");
const type = card.querySelector(".fruit-type");
const subtitle = card.querySelector(".subtitle");
const meta = card.querySelector(".fruit-meta");
const description = card.querySelector(".description");
const detail = card.querySelector(".extra-detail");
const source = card.querySelector(".source-link");
image.src = fruit.image;
image.alt = `${fruit.name} Devil Fruit`;
image.loading = "lazy";
image.decoding = "async";
image.referrerPolicy = "no-referrer";
title.textContent = fruit.name;
type.textContent = fruit.type;
subtitle.textContent = fruit.alias;
description.textContent = fruit.description;
detail.textContent = fruit.detail;
source.href = fruit.source;
source.textContent = "Open wiki entry";
for (const [label, value] of fruit.meta) {
const item = document.createElement("li");
const strong = document.createElement("strong");
strong.textContent = `${label}:`;
item.append(strong, ` ${value}`);
meta.append(item);
}
fruitGrid.append(card);
}

248
styles.css
View File

@@ -1,5 +1,14 @@
:root { :root {
color-scheme: dark; color-scheme: dark;
--bg: #081018;
--bg-accent: #101b27;
--panel: rgba(10, 21, 35, 0.9);
--panel-border: rgba(141, 182, 214, 0.18);
--text: #edf4ff;
--muted: #b6c7dd;
--highlight: #8fd3ff;
--highlight-strong: #ffd36e;
--shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
} }
* { * {
@@ -8,111 +17,232 @@
body { body {
margin: 0; margin: 0;
font-family: Arial, Helvetica, sans-serif; min-height: 100vh;
background: #0f1320; font-family: "Trebuchet MS", "Segoe UI", sans-serif;
color: #f0f4ff;
line-height: 1.5; line-height: 1.5;
color: var(--text);
background:
radial-gradient(circle at top, rgba(71, 134, 181, 0.3), transparent 28%),
linear-gradient(180deg, #102133 0%, var(--bg) 55%, #050b11 100%);
}
img {
max-width: 100%;
} }
.page-header { .page-header {
padding: 4.5rem 1.2rem 3rem;
text-align: center; text-align: center;
padding: 2.5rem 1rem 2rem; }
background: #171d2d;
border-bottom: 1px solid #2f3953; .eyebrow {
margin: 0;
text-transform: uppercase;
letter-spacing: 0.32rem;
font-size: 0.76rem;
color: var(--highlight);
} }
.page-header h1 { .page-header h1 {
margin: 0; margin: 0.65rem 0 0;
font-size: clamp(2.5rem, 5vw, 4.75rem);
line-height: 0.95;
} }
.page-header p { .hero-copy {
margin: 0.5rem 0 0; width: min(46rem, 92%);
color: #c6d3ef; margin: 1rem auto 0;
color: var(--muted);
font-size: 1.05rem;
} }
.content { .content {
width: min(1080px, 94%); width: min(1180px, calc(100% - 2rem));
margin: 1.5rem auto 2rem; margin: 0 auto 2.5rem;
display: grid; display: grid;
gap: 1.25rem;
}
.card,
.fruit-card,
.section-heading {
border: 1px solid var(--panel-border);
background: var(--panel);
backdrop-filter: blur(10px);
box-shadow: var(--shadow);
}
.card,
.section-heading {
border-radius: 22px;
padding: 1.2rem 1.35rem;
}
.overview {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
gap: 1rem; gap: 1rem;
align-items: center;
} }
.card { .overview h2,
background: #161d2d; .section-heading h2 {
border: 1px solid #2f3953; margin: 0 0 0.35rem;
border-radius: 12px;
padding: 1rem 1.25rem;
} }
.toolbar h2 { .overview p,
margin: 0 0 0.25rem; .section-heading p,
.credits p {
margin: 0;
color: var(--muted);
} }
.toolbar p { .stat-row {
margin: 0 0 0.75rem;
color: #c6d3ef;
}
.toolbar-actions {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.5rem; gap: 0.75rem;
justify-content: flex-end;
} }
button { .stat-pill {
border: 1px solid #4b5c85; min-width: 10.5rem;
background: #263453; padding: 0.85rem 1rem;
color: #f0f4ff; border-radius: 16px;
padding: 0.5rem 0.8rem; background: rgba(143, 211, 255, 0.08);
border-radius: 8px; border: 1px solid rgba(143, 211, 255, 0.16);
font: inherit;
cursor: pointer;
} }
button:hover { .stat-label {
background: #32456d; display: block;
} margin-bottom: 0.25rem;
color: var(--muted);
button.danger { font-size: 0.82rem;
background: #593040; text-transform: uppercase;
border-color: #80465d; letter-spacing: 0.08rem;
}
button.danger:hover {
background: #6c394d;
} }
.fruit-grid { .fruit-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
gap: 1rem; gap: 1rem;
} }
.fruit-card { .fruit-card {
background: #161d2d; border-radius: 22px;
border: 1px solid #2f3953;
border-radius: 12px;
overflow: hidden; overflow: hidden;
display: grid;
min-height: 100%;
} }
.fruit-card img { .fruit-card img {
width: 100%; width: 100%;
height: 160px; aspect-ratio: 4 / 3;
object-fit: cover; object-fit: cover;
display: block; background: linear-gradient(135deg, rgba(255, 211, 110, 0.16), rgba(143, 211, 255, 0.08));
} }
.fruit-info { .fruit-info {
padding: 0.8rem 0.9rem 1rem; display: grid;
gap: 0.75rem;
padding: 1rem 1rem 1.1rem;
} }
.fruit-info h3 { .title-row {
margin: 0 0 0.45rem; display: flex;
font-size: 1.05rem; gap: 0.75rem;
align-items: flex-start;
justify-content: space-between;
} }
.fruit-info p { .title-row h3 {
margin: 0.2rem 0; margin: 0;
color: #dbe4fa; font-size: 1.18rem;
font-size: 0.95rem; line-height: 1.15;
}
.fruit-type {
flex-shrink: 0;
padding: 0.28rem 0.55rem;
border-radius: 999px;
background: rgba(255, 211, 110, 0.16);
color: var(--highlight-strong);
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05rem;
}
.subtitle,
.description,
.extra-detail {
margin: 0;
}
.subtitle {
color: var(--highlight);
font-weight: 700;
}
.description,
.extra-detail {
color: var(--muted);
}
.fruit-meta {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.42rem;
}
.fruit-meta li {
color: var(--text);
}
.fruit-meta strong {
color: var(--highlight-strong);
}
.source-link {
width: fit-content;
color: var(--highlight);
text-decoration: none;
font-weight: 700;
}
.source-link:hover,
.source-link:focus-visible {
text-decoration: underline;
}
@media (max-width: 820px) {
.overview {
grid-template-columns: 1fr;
}
.stat-row {
justify-content: flex-start;
}
}
@media (max-width: 560px) {
.page-header {
padding-top: 3.4rem;
}
.content {
width: min(100% - 1rem, 1180px);
}
.card,
.section-heading,
.fruit-info {
padding-left: 0.95rem;
padding-right: 0.95rem;
}
.fruit-grid {
grid-template-columns: 1fr;
}
} }