-
- Gomu Gomu no Mi
-Type: Paramecia
-User: Monkey D. Luffy
-Makes the user’s body rubber-like.
-Fruit Collection
-- Later, your JS can hook into these buttons and cards for add, update, and - delete actions. -
-
-
-
-
+
+
-
-
- 
-
+
+
-
- 
-
+
+
+
- 
+ ![]()
-
-
- 
-
+
+
+
diff --git a/script.js b/script.js
index e69de29..c189437 100644
--- a/script.js
+++ b/script.js
@@ -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);
+}
diff --git a/styles.css b/styles.css
index 0ab31f9..cb758ef 100644
--- a/styles.css
+++ b/styles.css
@@ -1,5 +1,14 @@
:root {
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 {
margin: 0;
- font-family: Arial, Helvetica, sans-serif;
- background: #0f1320;
- color: #f0f4ff;
+ min-height: 100vh;
+ font-family: "Trebuchet MS", "Segoe UI", sans-serif;
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 {
+ padding: 4.5rem 1.2rem 3rem;
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 {
- margin: 0;
+ margin: 0.65rem 0 0;
+ font-size: clamp(2.5rem, 5vw, 4.75rem);
+ line-height: 0.95;
}
-.page-header p {
- margin: 0.5rem 0 0;
- color: #c6d3ef;
+.hero-copy {
+ width: min(46rem, 92%);
+ margin: 1rem auto 0;
+ color: var(--muted);
+ font-size: 1.05rem;
}
.content {
- width: min(1080px, 94%);
- margin: 1.5rem auto 2rem;
+ width: min(1180px, calc(100% - 2rem));
+ margin: 0 auto 2.5rem;
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;
+ align-items: center;
}
-.card {
- background: #161d2d;
- border: 1px solid #2f3953;
- border-radius: 12px;
- padding: 1rem 1.25rem;
+.overview h2,
+.section-heading h2 {
+ margin: 0 0 0.35rem;
}
-.toolbar h2 {
- margin: 0 0 0.25rem;
+.overview p,
+.section-heading p,
+.credits p {
+ margin: 0;
+ color: var(--muted);
}
-.toolbar p {
- margin: 0 0 0.75rem;
- color: #c6d3ef;
-}
-
-.toolbar-actions {
+.stat-row {
display: flex;
flex-wrap: wrap;
- gap: 0.5rem;
+ gap: 0.75rem;
+ justify-content: flex-end;
}
-button {
- border: 1px solid #4b5c85;
- background: #263453;
- color: #f0f4ff;
- padding: 0.5rem 0.8rem;
- border-radius: 8px;
- font: inherit;
- cursor: pointer;
+.stat-pill {
+ min-width: 10.5rem;
+ padding: 0.85rem 1rem;
+ border-radius: 16px;
+ background: rgba(143, 211, 255, 0.08);
+ border: 1px solid rgba(143, 211, 255, 0.16);
}
-button:hover {
- background: #32456d;
-}
-
-button.danger {
- background: #593040;
- border-color: #80465d;
-}
-
-button.danger:hover {
- background: #6c394d;
+.stat-label {
+ display: block;
+ margin-bottom: 0.25rem;
+ color: var(--muted);
+ font-size: 0.82rem;
+ text-transform: uppercase;
+ letter-spacing: 0.08rem;
}
.fruit-grid {
display: grid;
- grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+ grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
gap: 1rem;
}
.fruit-card {
- background: #161d2d;
- border: 1px solid #2f3953;
- border-radius: 12px;
+ border-radius: 22px;
overflow: hidden;
+ display: grid;
+ min-height: 100%;
}
.fruit-card img {
width: 100%;
- height: 160px;
+ aspect-ratio: 4 / 3;
object-fit: cover;
- display: block;
+ background: linear-gradient(135deg, rgba(255, 211, 110, 0.16), rgba(143, 211, 255, 0.08));
}
.fruit-info {
- padding: 0.8rem 0.9rem 1rem;
+ display: grid;
+ gap: 0.75rem;
+ padding: 1rem 1rem 1.1rem;
}
-.fruit-info h3 {
- margin: 0 0 0.45rem;
- font-size: 1.05rem;
+.title-row {
+ display: flex;
+ gap: 0.75rem;
+ align-items: flex-start;
+ justify-content: space-between;
}
-.fruit-info p {
- margin: 0.2rem 0;
- color: #dbe4fa;
- font-size: 0.95rem;
+.title-row h3 {
+ margin: 0;
+ font-size: 1.18rem;
+ 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;
+ }
}
+
+ Known Fruits
++ This collection now uses real Devil Fruit names, current users, fruit + classes, and lore details instead of placeholder cards. +
+
+
+ Entries
+ 0
+
+
+ Classes
+ Paramecia, Logia, Zoan
+
+
+ Images
+ Canon fruit art
+
Fruit Collection
++ Canon fruit images are loaded from the One Piece Wiki image CDN. Some + entries also note previous users when that history matters. +
+
-
- Mera Mera no Mi
-Type: Logia
-User: Portgas D. Ace / Sabo
-Allows creation and control of fire.
-
-
- Ope Ope no Mi
-Type: Paramecia
-User: Trafalgar D. Water Law
-Creates a ROOM where the user can manipulate objects.
-
-
Yami Yami no Mi
-Type: Logia
-User: Marshall D. Teach
-Manipulates darkness and gravity-like pull.
+
+
+
+
+
+
+
+
+ Source
+ Images and lore details are based on the One Piece Wiki fruit pages. +