mirror of
https://github.com/Cametendo/devil-fruit-encyclopedia.git
synced 2026-03-18 07:10:21 +01:00
85 lines
2.8 KiB
HTML
85 lines
2.8 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" />
|
||
</head>
|
||
<body>
|
||
<header class="page-header">
|
||
<h1>Devil Fruit Encyclopedia</h1>
|
||
<p>Quickstart UI mockup (no JavaScript yet).</p>
|
||
</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.
|
||
</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>
|
||
</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>
|
||
</main>
|
||
</body>
|
||
</html>
|