new marketplace page

2025-12-19 23:12:53 +01:00
parent 16cf6b3d4f
commit a26f03f024
7 changed files with 522 additions and 874 deletions
--- a/desktop/views/css/marketplace.css
+++ b/desktop/views/css/marketplace.css
@@ -292,4 +292,99 @@
 .modal-button.btn-uninstall:hover {
    background: #ef4444;
    transform: scale(1.02);
+}
+
+.extension-author {
+    font-size: 0.8rem;
+    color: var(--color-text-secondary);
+    display: block;
+    margin-bottom: 0.5rem;
+}
+
+.extension-tags {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+
+.badge-available {
+    background: rgba(59, 130, 246, 0.2);
+    color: #60a5fa;
+    border: 1px solid rgba(59, 130, 246, 0.3);
+}
+
+.nsfw-ext {
+    border-color: rgba(220, 38, 38, 0.3);
+}
+
+.broken-ext {
+    filter: grayscale(0.8);
+    opacity: 0.7;
+    border: 1px dashed #ef4444; /* Borde rojo discontinuo */
+}
+
+.broken-ext:hover {
+    transform: none; /* Evitamos que se mueva al pasar el ratón si está rota */
+}
+
+/* Estilos para los Tabs */
+.tabs-container {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+    border-bottom: 1px solid rgba(255,255,255,0.1);
+    padding-bottom: 0.5rem;
+}
+
+.tab-button {
+    background: none;
+    border: none;
+    color: var(--color-text-secondary);
+    font-size: 1.1rem;
+    font-weight: 700;
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    transition: all 0.3s;
+    position: relative;
+}
+
+.tab-button.active {
+    color: var(--color-primary);
+}
+
+.tab-button.active::after {
+    content: '';
+    position: absolute;
+    bottom: -0.6rem;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    background: var(--color-primary);
+    border-radius: 999px;
+    box-shadow: 0 0 10px var(--color-primary-glow);
+}
+
+/* Títulos de Secciones en Marketplace */
+.marketplace-section-title {
+    font-size: 1.4rem;
+    font-weight: 800;
+    margin: 2rem 0 1rem 0;
+    color: var(--color-text-primary);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    text-transform: capitalize;
+}
+
+.marketplace-section-title::before {
+    content: '';
+    display: inline-block;
+    width: 4px;
+    height: 20px;
+    background: var(--color-primary);
+    border-radius: 2px;
+}
+
+.category-group {
+    margin-bottom: 3rem;
 }
--- a/desktop/views/marketplace.html
+++ b/desktop/views/marketplace.html
@@ -10,13 +10,13 @@
    <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
    <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
    <link rel="stylesheet" href="/views/css/components/titlebar.css">
-    <script src="/src/scripts/titlebar.js"></script>
 </head>
 <body>
-<div id="titlebar"> <div class="title-left">
-    <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
-    <span class="app-title">WaifuBoard</span>
-</div>
+<div id="titlebar">
+    <div class="title-left">
+        <img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
+        <span class="app-title">WaifuBoard</span>
+    </div>
    <div class="title-right">
        <button class="min">—</button>
        <button class="max">🗖</button>
@@ -36,9 +36,9 @@
        <button class="nav-button" onclick="window.location.href='/anime'">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" onclick="window.location.href='/schedule.html'">Schedule</button>
        <button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
-        <button class="nav-button active">Marketplace</button>
+        <button class="nav-button">Marketplace</button>
    </div>

    <div class="nav-right">
@@ -90,47 +90,28 @@

 <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="tabs-container">
+                <button class="tab-button active" data-tab="marketplace">Marketplace</button>
+                <button class="tab-button" data-tab="installed">My Extensions</button>
+            </div>
+
            <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>
+                    <option value="All">All Categories</option>
+                    <option value="image-board">Image Boards</option>
+                    <option value="anime-board">Anime Boards</option>
+                    <option value="book-board">Book Boards</option>
+                    <option value="Local">Local/Manual</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 id="marketplace-content">
        </div>
    </section>
+
    <div id="customModal" class="modal-overlay hidden">
        <div class="modal-content">
            <h3 id="modalTitle"></h3>
@@ -143,22 +124,10 @@
    </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>
 <script src="/src/scripts/titlebar.js"></script>
+<script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
 </body>
 </html>