ItsSkaiya/WaifuBoard
3
1
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases 4 Wiki Activity

Added the in app marketplace

Browse Source
This commit is contained in:
itsskaiya
2025-11-23 10:17:21 -05:00
parent 1d10083b86
commit bec3423887
12 changed files with 750 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
views/books.html
View File

@@ -40,6 +40,10 @@
</nav>
<nav style="display: flex; flex-direction: column; gap: 0.5rem; margin-top: auto;">
<a href="marketplace.html" class="nav-button" 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>

4
views/favorites.html
View File

@@ -39,6 +39,10 @@
</nav>
<nav style="display: flex; flex-direction: column; gap: 0.5rem; margin-top: auto;">
<a href="marketplace.html" class="nav-button" 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>

4
views/index.html
View File

@@ -43,6 +43,10 @@
</nav>
<nav style="display: flex; flex-direction: column; gap: 0.5rem; margin-top: auto;">
<a href="marketplace.html" class="nav-button" 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>

114
views/marketplace.html Normal file
View File

@@ -0,0 +1,114 @@
<!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="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">
<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>
</body>
</html>

6
views/settings.html
View File

@@ -39,6 +39,10 @@
</nav>
<nav style="display: flex; flex-direction: column; gap: 0.5rem; margin-top: auto;">
<a href="marketplace.html" class="nav-button" 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 active" title="Settings">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="3"></circle>
@@ -74,7 +78,7 @@
<div class="settings-grid">
<div class="settings-card">
<p style="color: var(--text-tertiary); font-style: italic;">No settings available currently.</p>
<p style="color: var(--text-tertiary); font-style: italic;">Settings is currently under going a revamp features will be placed here during v2.0.0.</p>
</div>
</div>
</div>

257
views/styles/marketplace.css Normal file
View File

@@ -0,0 +1,257 @@
#marketplace-page {
display: flex;
flex-direction: column;
gap: 2.5rem;
padding-bottom: 4rem;
}
.marketplace-hero {
background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
border-radius: var(--radius-lg);
padding: 2.5rem;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.1);
box-shadow: 0 20px 50px -10px rgba(49, 46, 129, 0.5);
}
.marketplace-hero::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(139, 92, 246, 0.4) 0%, transparent 70%);
filter: blur(60px);
z-index: 0;
}
.hero-content {
z-index: 1;
max-width: 60%;
}
.hero-title {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 0.5rem;
background: linear-gradient(to right, #fff, #a5b4fc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-subtitle {
color: #c7d2fe;
font-size: 1rem;
line-height: 1.5;
margin-bottom: 2rem;
}
.hero-stats {
display: flex;
gap: 2rem;
}
.stat-box {
background: rgba(0,0,0,0.3);
padding: 0.75rem 1.25rem;
border-radius: 12px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.1);
}
.stat-value {
font-size: 1.2rem;
font-weight: 700;
color: #fff;
display: block;
}
.stat-label {
font-size: 0.75rem;
color: #a5b4fc;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.marketplace-tabs {
display: flex;
gap: 1rem;
background: var(--bg-surface);
padding: 0.5rem;
border-radius: 12px;
width: fit-content;
border: 1px solid var(--border);
}
.tab-btn {
background: transparent;
border: none;
color: var(--text-tertiary);
font-size: 0.9rem;
font-weight: 600;
padding: 0.6rem 1.5rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
}
.tab-btn:hover {
color: var(--text-primary);
background: rgba(255,255,255,0.05);
}
.tab-btn.active {
background: var(--accent);
color: white;
box-shadow: 0 4px 15px var(--accent-glow);
}
.section-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.section-icon {
color: var(--accent);
}
.section-title {
font-size: 1.2rem;
font-weight: 700;
color: var(--text-primary);
}
.marketplace-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
.extension-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 1.5rem;
position: relative;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
gap: 1rem;
}
.extension-card:hover {
transform: translateY(-5px);
border-color: var(--accent);
box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
}
.card-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.ext-icon-box {
width: 54px;
height: 54px;
background: var(--bg-base);
border-radius: 12px;
padding: 8px;
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
}
.ext-icon {
width: 100%;
height: 100%;
object-fit: contain;
}
.type-badge {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
padding: 4px 8px;
border-radius: 6px;
letter-spacing: 0.5px;
}
.type-image { color: #38bdf8; background: rgba(56, 189, 248, 0.1); border: 1px solid rgba(56, 189, 248, 0.2); }
.type-book { color: #f472b6; background: rgba(244, 114, 182, 0.1); border: 1px solid rgba(244, 114, 182, 0.2); }
.ext-name {
font-size: 1.1rem;
font-weight: 700;
color: var(--text-primary);
margin: 0.5rem 0 0.25rem 0;
}
.ext-meta {
font-size: 0.8rem;
color: var(--text-tertiary);
font-family: monospace;
}
.card-footer {
margin-top: auto;
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 1rem;
border-top: 1px solid var(--border);
}
.ext-size {
font-size: 0.75rem;
color: var(--text-tertiary);
}
.install-btn {
background: var(--accent);
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 8px;
font-weight: 600;
font-size: 0.85rem;
cursor: pointer;
transition: 0.2s;
display: flex;
align-items: center;
gap: 0.5rem;
}
.install-btn:hover {
background: #7c3aed;
box-shadow: 0 0 15px var(--accent-glow);
}
.install-btn.installed {
background: var(--bg-base);
color: #ef4444;
border: 1px solid var(--border);
}
.install-btn.installed:hover {
background: rgba(239, 68, 68, 0.1);
border-color: #ef4444;
}
.spinner {
width: 14px;
height: 14px;
animation: rotate 1s linear infinite;
stroke: currentColor;
}
@keyframes rotate { 100% { transform: rotate(360deg); } }
.hidden { display: none !important; }
.loading-state { text-align: center; padding: 4rem; color: var(--text-tertiary); }