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

added marketplace

Browse Source
This commit is contained in:
lenafx
2025-12-04 18:32:41 +01:00
parent 5cdf53b7ce
commit c0ffc6c108
7 changed files with 1009 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

308
views/css/marketplace.css Normal file
View File

@@ -0,0 +1,308 @@
.hero-spacer {
height: var(--nav-height);
width: 100%;
}
.marketplace-subtitle {
font-size: 1.1rem;
color: var(--text-secondary);
}
.section-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: 1.5rem;
padding-bottom: 0.5rem;
}
.filter-controls {
display: flex;
align-items: center;
gap: 0.75rem;
}
.filter-label {
font-size: 0.9rem;
color: var(--text-secondary);
font-weight: 600;
}
.filter-select {
padding: 0.6rem 2rem 0.6rem 1.25rem;
border-radius: 999px;
background: var(--bg-surface-hover);
color: var(--text-primary);
border: 1px solid rgba(255,255,255,0.1);
appearance: none;
font-weight: 600;
background-image: url('data:image/svg+xml;utf8,<svg fill="%23ffffff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1em;
cursor: pointer;
transition: all 0.2s;
}
.filter-select:hover {
border-color: var(--accent);
box-shadow: 0 0 8px var(--accent-glow);
}
.marketplace-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1rem;
padding-top: 1rem;
}
.extension-card {
background: var(--bg-surface);
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--radius-md);
padding: 1rem;
display: flex;
flex-direction: column;
align-items: flex-start;
transition: all 0.2s;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
min-height: 140px;
position: relative;
overflow: hidden;
}
.extension-card:hover {
background: var(--bg-surface-hover);
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0,0,0,0.5);
}
.card-content-wrapper {
flex-grow: 1;
margin-bottom: 0.5rem;
}
.extension-icon {
width: 50px;
height: 50px;
border-radius: 8px;
object-fit: contain;
margin-bottom: 0.75rem;
border: 2px solid var(--accent);
background-color: var(--bg-base);
flex-shrink: 0;
box-shadow: 0 0 10px var(--accent-glow);
}
.extension-name {
font-size: 1.1rem;
font-weight: 700;
margin: 0;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
.extension-status-badge {
font-size: 0.75rem;
font-weight: 600;
padding: 0.15rem 0.5rem;
border-radius: 999px;
margin-top: 0.4rem;
display: inline-block;
letter-spacing: 0.5px;
}
.badge-installed {
background: rgba(34, 197, 94, 0.2);
color: #4ade80;
border: 1px solid rgba(34, 197, 94, 0.3);
}
.badge-local {
background: rgba(251, 191, 36, 0.2);
color: #fcd34d;
border: 1px solid rgba(251, 191, 36, 0.3);
}
.extension-action-button {
width: 100%;
padding: 0.6rem 1rem;
border-radius: 999px;
font-weight: 700;
font-size: 0.9rem;
border: none;
cursor: pointer;
transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
margin-top: auto;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.btn-install {
background: var(--accent);
color: white;
}
.btn-install:hover {
background: #a78bfa;
transform: scale(1.02);
box-shadow: 0 0 15px var(--accent-glow);
}
.btn-uninstall {
background: #dc2626;
color: white;
margin-top: auto;
}
.btn-uninstall:hover {
background: #ef4444;
transform: scale(1.02);
box-shadow: 0 0 15px rgba(220, 38, 38, 0.4);
}
.extension-card.skeleton {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
box-shadow: none;
transform: none;
}
.extension-card.skeleton:hover {
background: var(--bg-surface);
box-shadow: none;
transform: none;
}
.skeleton-icon {
width: 50px;
height: 50px;
border-radius: 8px;
margin-bottom: 0.75rem;
border: 2px solid rgba(255,255,255,0.05);
}
.skeleton-text.title-skeleton {
height: 1.1em;
margin-bottom: 0.25rem;
}
.skeleton-text.text-skeleton {
height: 0.7em;
margin-bottom: 0;
}
.skeleton-button {
width: 100%;
height: 32px;
border-radius: 999px;
margin-top: auto;
}
.section-title {
font-size: 1.8rem;
font-weight: 800;
color: var(--text-primary);
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(5px);
display: flex;
justify-content: center;
align-items: center;
z-index: 5000;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease-in-out;
}
.modal-overlay:not(.hidden) {
opacity: 1;
pointer-events: auto;
}
.modal-content {
background: var(--bg-surface);
color: var(--text-primary);
padding: 2.5rem;
border-radius: var(--radius-lg);
width: 90%;
max-width: 450px;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8), 0 0 20px var(--accent-glow);
border: 1px solid rgba(255,255,255,0.1);
transform: translateY(-50px);
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease-in-out;
opacity: 0;
}
.modal-overlay:not(.hidden) .modal-content {
transform: translateY(0);
opacity: 1;
}
#modalTitle {
font-size: 1.6rem;
font-weight: 800;
margin-top: 0;
color: var(--accent);
border-bottom: 2px solid rgba(255,255,255,0.05);
padding-bottom: 0.75rem;
margin-bottom: 1.5rem;
}
#modalMessage {
font-size: 1rem;
line-height: 1.6;
color: var(--text-secondary);
margin-bottom: 2rem;
}
.modal-actions {
display: flex;
justify-content: flex-end;
gap: 1rem;
}
.modal-button {
padding: 0.6rem 1.5rem;
border-radius: 999px;
font-weight: 700;
font-size: 0.9rem;
border: none;
cursor: pointer;
transition: background 0.2s, transform 0.2s;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.modal-button.btn-install {
background: var(--accent);
color: white;
}
.modal-button.btn-install:hover {
background: #a78bfa;
transform: scale(1.02);
}
.modal-button.btn-uninstall {
background: #dc2626;
color: white;
}
.modal-button.btn-uninstall:hover {
background: #ef4444;
transform: scale(1.02);
}

111
views/marketplace.html Normal file
View File

@@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WaifuBoard - Marketplace</title>
<link rel="stylesheet" href="/views/css/anime/home.css">
<link rel="stylesheet" href="/views/css/marketplace.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
</head>
<body>
<nav class="navbar" id="navbar">
<a href="/" class="nav-brand">
<div class="brand-icon">
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
</div>
WaifuBoard
</a>
<div class="nav-center">
<button class="nav-button" onclick="window.location.href='/'">Anime</button>
<button class="nav-button" onclick="window.location.href='/books'">Books</button>
<button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
<button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
<button class="nav-button">My List</button>
<button class="nav-button active" onclick="window.location.href='/marketplace'">Marketplace</button>
</div>
<div class="search-wrapper" style="visibility: hidden;">
<svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
<input type="text" class="search-input" id="search-input" placeholder="Search extensions..." autocomplete="off">
<div class="search-results" id="search-results"></div>
</div>
</nav>
<div class="hero-spacer"></div>
<main>
<section class="section">
<header class="section-header">
<p class="marketplace-subtitle">Explore, install, and manage all available data source extensions for WaifuBoard.</p>
<div class="filter-controls">
<label for="extension-filter" class="filter-label">Filter by Type:</label>
<select id="extension-filter" class="filter-select">
<option value="All">All Extensions</option>
<option value="Image">Image Boards</option>
<option value="Anime">Anime Boards</option>
<option value="Book">Book Boards</option>
<option value="Local">Local Only</option>
</select>
</div>
</header>
<div class="marketplace-grid" id="extensions-grid">
<div class="extension-card skeleton grid-item">
<div class="skeleton-icon" style="width: 50px; height: 50px;"></div>
<div class="card-content-wrapper">
<div class="skeleton-text title-skeleton" style="width: 80%; height: 1.1em;"></div>
<div class="skeleton-text text-skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
</div>
<div class="skeleton-button" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
</div>
<div class="extension-card skeleton grid-item">
<div class="skeleton-icon" style="width: 50px; height: 50px;"></div>
<div class="card-content-wrapper">
<div class="skeleton-text title-skeleton" style="width: 80%; height: 1.1em;"></div>
<div class="skeleton-text text-skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
</div>
<div class="skeleton-button" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
</div>
<div class="extension-card skeleton grid-item">
<div class="skeleton-icon" style="width: 50px; height: 50px;"></div>
<div class="card-content-wrapper">
<div class="skeleton-text title-skeleton" style="width: 80%; height: 1.1em;"></div>
<div class="skeleton-text text-skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
</div>
<div class="skeleton-button" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
</div>
</div>
</section>
<div id="customModal" class="modal-overlay hidden">
<div class="modal-content">
<h3 id="modalTitle"></h3>
<p id="modalMessage"></p>
<div class="modal-actions">
<button id="modalConfirmButton" class="modal-button btn-uninstall hidden">Confirm</button>
<button id="modalCloseButton" class="modal-button btn-install">OK</button>
</div>
</div>
</div>
</main>
<div id="updateToast" class="hidden">
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
<a
id="downloadButton"
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
target="_blank"
>
Click To Download
</a>
</div>
<script src="/src/scripts/updateNotifier.js"></script>
<script src="/src/scripts/rpc-inapp.js"></script>
<script src="/src/scripts/marketplace.js"></script>
</body>
</html>