124 lines
7.4 KiB
HTML
124 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' https: data: blob:; connect-src 'self' https:;" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Waifu Board - Marketplace</title>
|
|
<link rel="stylesheet" href="styles/home.css">
|
|
<link rel="stylesheet" href="styles/marketplace.css">
|
|
</head>
|
|
|
|
<body>
|
|
<aside class="sidebar">
|
|
<br>
|
|
<nav style="display: flex; flex-direction: column; gap: 0.5rem;">
|
|
<a href="index.html" class="nav-button" title="Image Boards">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="3" width="7" height="7"></rect>
|
|
<rect x="14" y="3" width="7" height="7"></rect>
|
|
<rect x="14" y="14" width="7" height="7"></rect>
|
|
<rect x="3" y="14" width="7" height="7"></rect>
|
|
</svg>
|
|
<span>Image Boards</span>
|
|
</a>
|
|
|
|
<a href="books.html" class="nav-button" title="Book Boards">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
|
|
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
|
|
</svg>
|
|
<span>Book Boards</span>
|
|
</a>
|
|
|
|
<a href="favorites.html" class="nav-button" title="Favorites">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
|
|
</svg>
|
|
<span>Favorites</span>
|
|
</a>
|
|
</nav>
|
|
|
|
<nav style="display: flex; flex-direction: column; gap: 0.5rem; margin-top: auto;">
|
|
<a href="emulator.html" class="nav-button" title="Emulator">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml-icon lucide-code-xml"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
|
|
<span>Emulator</span>
|
|
</a>
|
|
<a href="marketplace.html" class="nav-button active" title="Marketplace">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-puzzle-icon lucide-puzzle"><path d="M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"/></svg>
|
|
<span>Marketplace</span>
|
|
</a>
|
|
<a href="settings.html" class="nav-button" title="Settings">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="3"></circle>
|
|
<path
|
|
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z">
|
|
</path>
|
|
</svg>
|
|
<span>Settings</span>
|
|
</a>
|
|
</nav>
|
|
</aside>
|
|
|
|
<div class="main-wrapper">
|
|
<header class="top-header">
|
|
<button id="hamburger-btn" class="hamburger">☰</button>
|
|
<h3>Marketplace</h3>
|
|
</header>
|
|
|
|
<div class="content-view">
|
|
<div id="marketplace-page">
|
|
|
|
<div class="marketplace-hero">
|
|
<div class="hero-content">
|
|
<h1 class="hero-title">WaifuBoard Store</h1>
|
|
<p class="hero-subtitle">Discover extensions for manga reading, image browsing, and more. Customize your experience.</p>
|
|
<div class="hero-stats">
|
|
<div class="stat-box">
|
|
<span class="stat-value" id="stat-total">0</span>
|
|
<span class="stat-label">Extensions</span>
|
|
</div>
|
|
<div class="stat-box">
|
|
<span class="stat-value" id="stat-installed">0</span>
|
|
<span class="stat-label">Installed</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="marketplace-tabs" style="margin-top: 2rem;">
|
|
<button id="tab-browse" class="tab-btn active">Explore</button>
|
|
<button id="tab-installed" class="tab-btn">Library</button>
|
|
</div>
|
|
|
|
<div id="view-browse" class="tab-view">
|
|
<div class="section-header">
|
|
<svg class="section-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 7h-9"></path><path d="M14 17H5"></path><circle cx="17" cy="17" r="3"></circle><circle cx="7" cy="7" r="3"></circle></svg>
|
|
<span class="section-title">Trending Extensions</span>
|
|
</div>
|
|
<div id="marketplace-grid" class="marketplace-grid">
|
|
<div class="loading-state">
|
|
<svg style="width:32px; height:32px; color: var(--accent); animation: spin 1s linear infinite;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83"></path></svg>
|
|
<p>Connecting to repository...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="view-installed" class="tab-view hidden">
|
|
<div class="section-header">
|
|
<svg class="section-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
|
|
<span class="section-title">Your Library</span>
|
|
</div>
|
|
<div id="installed-grid" class="marketplace-grid"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="message-bar" class="toast hidden">Message</div>
|
|
|
|
<script type="module" src="../src/marketplace.js"></script>
|
|
<script src="../src/hamburger.js"></script>
|
|
</body>
|
|
</html> |