Added the in app marketplace
This commit is contained in:
9
main.js
9
main.js
@@ -102,6 +102,15 @@ ipcMain.handle('db:getFavorites', dbHandlers.getFavorites);
|
||||
ipcMain.handle('db:addFavorite', dbHandlers.addFavorite);
|
||||
ipcMain.handle('db:removeFavorite', dbHandlers.removeFavorite);
|
||||
|
||||
ipcMain.handle('api:getInstalledExtensions', apiHandlers.getInstalledExtensions);
|
||||
ipcMain.handle('api:installExtension', apiHandlers.installExtension);
|
||||
ipcMain.handle('api:uninstallExtension', apiHandlers.uninstallExtension);
|
||||
|
||||
ipcMain.on('app:restart', () => {
|
||||
app.relaunch();
|
||||
app.exit();
|
||||
});
|
||||
|
||||
ipcMain.on('toggle-dev-tools', (event) => {
|
||||
event.sender.toggleDevTools();
|
||||
});
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "waifu-board",
|
||||
"version": "v1.6.1",
|
||||
"version": "v1.6.2",
|
||||
"description": "An image board app to store and browse your favorite waifus!",
|
||||
"main": "main.js",
|
||||
"scripts": {
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const fetchPath = require.resolve('node-fetch');
|
||||
const cheerioPath = require.resolve('cheerio');
|
||||
const fetch = require(fetchPath);
|
||||
const { app } = require('electron');
|
||||
|
||||
function peekProperty(filePath, propertyName) {
|
||||
try {
|
||||
@@ -80,17 +82,8 @@ module.exports = function (availableScrapers, headlessBrowser) {
|
||||
try {
|
||||
const instance = getScraperInstance(source);
|
||||
if (!instance.findChapters) throw new Error("Extension does not support chapters.");
|
||||
|
||||
const result = await instance.findChapters(mangaId);
|
||||
|
||||
if (Array.isArray(result)) {
|
||||
return { success: true, data: result };
|
||||
} else if (result && result.chapters) {
|
||||
return { success: true, data: result.chapters, extra: { cover: result.cover } };
|
||||
}
|
||||
|
||||
return { success: true, data: [] };
|
||||
|
||||
const chapters = await instance.findChapters(mangaId);
|
||||
return { success: true, data: chapters };
|
||||
} catch (err) {
|
||||
console.error(`Error fetching chapters from ${source}:`, err);
|
||||
return { success: false, error: err.message };
|
||||
@@ -147,6 +140,49 @@ module.exports = function (availableScrapers, headlessBrowser) {
|
||||
} catch (err) {
|
||||
return { success: false, error: err.message };
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
getInstalledExtensions: async () => {
|
||||
const pPath = path.join(app.getPath('home'), 'WaifuBoards', 'extensions');
|
||||
try {
|
||||
return fs.readdirSync(pPath).filter(f => f.endsWith('.js'));
|
||||
} catch (e) {
|
||||
console.error("Error reading extensions dir:", e);
|
||||
return [];
|
||||
}
|
||||
},
|
||||
|
||||
installExtension: async (event, filename, url) => {
|
||||
const https = require('https'); // Require https here or at top
|
||||
const pPath = path.join(app.getPath('home'), 'WaifuBoards', 'extensions', filename);
|
||||
|
||||
return new Promise((resolve) => {
|
||||
const file = fs.createWriteStream(pPath);
|
||||
https.get(url, function(response) {
|
||||
response.pipe(file);
|
||||
file.on('finish', function() {
|
||||
file.close(() => resolve(true));
|
||||
});
|
||||
}).on('error', function(err) {
|
||||
fs.unlink(pPath, () => {});
|
||||
resolve(false);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
uninstallExtension: async (event, filename) => {
|
||||
const pPath = path.join(app.getPath('home'), 'WaifuBoards', 'extensions', filename);
|
||||
try {
|
||||
if (fs.existsSync(pPath)) {
|
||||
fs.unlinkSync(pPath);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
} catch (e) {
|
||||
console.error("Uninstall error:", e);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
298
src/marketplace.js
Normal file
298
src/marketplace.js
Normal file
@@ -0,0 +1,298 @@
|
||||
const REPO_OWNER = 'ItsSkaiya';
|
||||
const REPO_NAME = 'WaifuBoard-Extensions';
|
||||
const API_URL = `https://api.github.com/repos/${REPO_OWNER}/${REPO_NAME}/contents/extensions?ref=main`;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
const browseGrid = document.getElementById('marketplace-grid');
|
||||
const installedGrid = document.getElementById('installed-grid');
|
||||
|
||||
const statTotal = document.getElementById('stat-total');
|
||||
const statInstalled = document.getElementById('stat-installed');
|
||||
|
||||
const tabBrowse = document.getElementById('tab-browse');
|
||||
const tabInstalled = document.getElementById('tab-installed');
|
||||
const viewBrowse = document.getElementById('view-browse');
|
||||
const viewInstalled = document.getElementById('view-installed');
|
||||
|
||||
let allRemoteExtensions = [];
|
||||
let installedExtensionsList = [];
|
||||
|
||||
const messageBar = document.getElementById('message-bar');
|
||||
|
||||
function showMessage(msg, type = 'success') {
|
||||
if (!messageBar) return;
|
||||
messageBar.textContent = msg;
|
||||
messageBar.className = `toast ${type === 'error' ? 'error' : ''}`;
|
||||
messageBar.classList.remove('hidden');
|
||||
setTimeout(() => messageBar.classList.add('hidden'), 3000);
|
||||
}
|
||||
|
||||
function updateStats() {
|
||||
if(statTotal) statTotal.textContent = allRemoteExtensions.length;
|
||||
if(statInstalled) statInstalled.textContent = installedExtensionsList.length;
|
||||
}
|
||||
|
||||
function showRestartToast() {
|
||||
if (document.getElementById('restart-toast')) return;
|
||||
|
||||
const toast = document.createElement('div');
|
||||
toast.id = 'restart-toast';
|
||||
toast.style.cssText = `
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
background: #1f2937;
|
||||
border: 1px solid var(--accent);
|
||||
border-radius: 12px;
|
||||
padding: 1rem 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
|
||||
z-index: 2000;
|
||||
animation: slideUp 0.3s ease-out;
|
||||
`;
|
||||
|
||||
toast.innerHTML = `
|
||||
<div style="display:flex; flex-direction:column;">
|
||||
<span style="color:#fff; font-weight:600;">Restart Required</span>
|
||||
<span style="color:#9ca3af; font-size:0.8rem;">Changes will apply after restart.</span>
|
||||
</div>
|
||||
<button id="btn-restart-now" style="
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
font-size: 0.85rem;
|
||||
transition: 0.2s;
|
||||
">Restart Now</button>
|
||||
`;
|
||||
|
||||
document.body.appendChild(toast);
|
||||
|
||||
const btn = document.getElementById('btn-restart-now');
|
||||
btn.onmouseover = () => btn.style.opacity = '0.9';
|
||||
btn.onmouseout = () => btn.style.opacity = '1';
|
||||
|
||||
btn.onclick = () => {
|
||||
if (window.api && typeof window.api.restartApp === 'function') {
|
||||
window.api.restartApp();
|
||||
} else {
|
||||
console.error("Restart API not found in window.api");
|
||||
alert("Please close and reopen the application manually.");
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function switchTab(tab) {
|
||||
if (tab === 'browse') {
|
||||
tabBrowse.classList.add('active');
|
||||
tabInstalled.classList.remove('active');
|
||||
viewBrowse.classList.remove('hidden');
|
||||
viewInstalled.classList.add('hidden');
|
||||
} else {
|
||||
tabBrowse.classList.remove('active');
|
||||
tabInstalled.classList.add('active');
|
||||
viewBrowse.classList.add('hidden');
|
||||
viewInstalled.classList.remove('hidden');
|
||||
renderInstalledGrid();
|
||||
}
|
||||
}
|
||||
|
||||
if(tabBrowse) tabBrowse.onclick = () => switchTab('browse');
|
||||
if(tabInstalled) tabInstalled.onclick = () => switchTab('installed');
|
||||
|
||||
async function fetchInstalledExtensions() {
|
||||
try {
|
||||
const extensions = await window.api.getInstalledExtensions();
|
||||
installedExtensionsList = extensions || [];
|
||||
} catch (e) {
|
||||
console.error("Failed to fetch installed extensions:", e);
|
||||
installedExtensionsList = [];
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchRemoteExtensions() {
|
||||
try {
|
||||
const res = await fetch(API_URL);
|
||||
if (!res.ok) throw new Error(`GitHub API Error: ${res.status}`);
|
||||
const data = await res.json();
|
||||
|
||||
allRemoteExtensions = data.filter(item => item.name.endsWith('.js'));
|
||||
renderBrowseGrid(allRemoteExtensions);
|
||||
updateStats();
|
||||
} catch (e) {
|
||||
if(browseGrid) browseGrid.innerHTML = `<div class="loading-state"><p style="color:#ef4444">Failed to load marketplace.<br>${e.message}</p></div>`;
|
||||
}
|
||||
}
|
||||
|
||||
async function getExtensionDetails(url) {
|
||||
try {
|
||||
const res = await fetch(url);
|
||||
const text = await res.text();
|
||||
|
||||
const baseUrlMatch = text.match(/baseUrl\s*=\s*["']([^"']+)["']/);
|
||||
let baseUrl = baseUrlMatch ? baseUrlMatch[1] : null;
|
||||
|
||||
if (baseUrl) {
|
||||
try {
|
||||
const urlObj = new URL(baseUrl);
|
||||
baseUrl = urlObj.hostname;
|
||||
} catch(e) {
|
||||
console.warn("Invalid URL in extension:", baseUrl);
|
||||
}
|
||||
}
|
||||
|
||||
const classMatch = text.match(/class\s+(\w+)/);
|
||||
const name = classMatch ? classMatch[1] : null;
|
||||
|
||||
let type = 'Image';
|
||||
if (text.includes('type = "book-board"') || text.includes("type = 'book-board'")) {
|
||||
type = 'Book';
|
||||
}
|
||||
|
||||
return { baseUrl, name, type };
|
||||
} catch (e) {
|
||||
return { baseUrl: null, name: null, type: 'Unknown' };
|
||||
}
|
||||
}
|
||||
|
||||
async function createCard(item, isLocalOnly = false) {
|
||||
const isInstalled = installedExtensionsList.includes(item.name);
|
||||
|
||||
const downloadUrl = item.download_url || null;
|
||||
let sizeKB = item.size ? (item.size / 1024).toFixed(1) + ' KB' : 'Local';
|
||||
|
||||
let iconUrl = '';
|
||||
let displayName = item.name.replace('.js', '');
|
||||
let typeLabel = 'Extension';
|
||||
let typeClass = 'type-image';
|
||||
|
||||
if (downloadUrl) {
|
||||
const details = await getExtensionDetails(downloadUrl);
|
||||
displayName = details.name || displayName;
|
||||
const domain = details.baseUrl || 'github.com';
|
||||
iconUrl = `https://www.google.com/s2/favicons?domain=${domain}&sz=128`;
|
||||
|
||||
if (details.type === 'Book') {
|
||||
typeLabel = 'Book Board';
|
||||
typeClass = 'type-book';
|
||||
} else {
|
||||
typeLabel = 'Image Board';
|
||||
typeClass = 'type-image';
|
||||
}
|
||||
} else {
|
||||
iconUrl = `https://ui-avatars.com/api/?name=${displayName}&background=18181b&color=fff&length=1`;
|
||||
}
|
||||
|
||||
const card = document.createElement('div');
|
||||
card.className = 'extension-card';
|
||||
card.dataset.name = item.name;
|
||||
|
||||
const downloadIcon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><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>';
|
||||
const trashIcon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>';
|
||||
const checkIcon = '<svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>';
|
||||
|
||||
const renderInner = (installed) => `
|
||||
<div class="card-header-row">
|
||||
<div class="ext-icon-box">
|
||||
<img src="${iconUrl}" class="ext-icon" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22gray%22 stroke-width=%222%22><rect x=%223%22 y=%223%22 width=%2218%22 height=%2218%22 rx=%222%22/></svg>'">
|
||||
</div>
|
||||
<span class="type-badge ${typeClass}">${typeLabel}</span>
|
||||
</div>
|
||||
|
||||
<div class="ext-info">
|
||||
<h3 class="ext-name">${displayName}</h3>
|
||||
<div class="ext-filename">${item.name}</div>
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<div class="ext-status-group">${installed ? `<span class="status-badge status-installed">${checkIcon} Installed</span>` : ''}
|
||||
<span class="ext-size-badge">${sizeKB}</span>
|
||||
</div>
|
||||
<button class="install-btn ${installed ? 'installed' : ''}" title="${installed ? 'Uninstall' : 'Install'}">
|
||||
${installed ? `${trashIcon} Uninstall` : `${downloadIcon} Install`}
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
card.innerHTML = renderInner(isInstalled);
|
||||
|
||||
card.addEventListener('click', async (e) => {
|
||||
const btn = e.target.closest('.install-btn');
|
||||
if (!btn) return;
|
||||
|
||||
const currentlyInstalled = installedExtensionsList.includes(item.name);
|
||||
|
||||
if (currentlyInstalled) {
|
||||
const success = await window.api.uninstallExtension(item.name);
|
||||
if (success) {
|
||||
installedExtensionsList = installedExtensionsList.filter(n => n !== item.name);
|
||||
card.innerHTML = renderInner(false);
|
||||
updateStats();
|
||||
|
||||
if (tabInstalled.classList.contains('active')) {
|
||||
card.remove();
|
||||
if (installedGrid.children.length === 0) {
|
||||
installedGrid.innerHTML = '<div class="loading-state"><p>No extensions installed.</p></div>';
|
||||
}
|
||||
}
|
||||
showRestartToast();
|
||||
} else {
|
||||
showMessage('Failed to uninstall', 'error');
|
||||
}
|
||||
} else {
|
||||
if (!downloadUrl) return;
|
||||
const originalHTML = btn.innerHTML;
|
||||
btn.innerHTML = '<svg class="spinner" viewBox="0 0 50 50"><circle cx="25" cy="25" r="20" fill="none" stroke="currentColor" stroke-width="5"></circle></svg>';
|
||||
|
||||
const success = await window.api.installExtension(item.name, downloadUrl);
|
||||
if (success) {
|
||||
installedExtensionsList.push(item.name);
|
||||
card.innerHTML = renderInner(true);
|
||||
updateStats();
|
||||
showMessage(`Installed ${displayName}`);
|
||||
showRestartToast();
|
||||
} else {
|
||||
showMessage('Failed to install', 'error');
|
||||
btn.innerHTML = originalHTML;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
async function renderBrowseGrid(list) {
|
||||
browseGrid.innerHTML = '';
|
||||
if (list.length === 0) {
|
||||
browseGrid.innerHTML = '<p class="loading-state">No extensions found.</p>';
|
||||
return;
|
||||
}
|
||||
for (const item of list) {
|
||||
const card = await createCard(item);
|
||||
browseGrid.appendChild(card);
|
||||
}
|
||||
}
|
||||
|
||||
async function renderInstalledGrid() {
|
||||
installedGrid.innerHTML = '';
|
||||
if (installedExtensionsList.length === 0) {
|
||||
installedGrid.innerHTML = '<div class="loading-state"><p>No extensions installed.</p></div>';
|
||||
return;
|
||||
}
|
||||
|
||||
for (const filename of installedExtensionsList) {
|
||||
const remoteData = allRemoteExtensions.find(r => r.name === filename);
|
||||
const item = remoteData || { name: filename, download_url: null, size: 0 };
|
||||
const card = await createCard(item, !remoteData);
|
||||
installedGrid.appendChild(card);
|
||||
}
|
||||
}
|
||||
|
||||
await fetchInstalledExtensions();
|
||||
await fetchRemoteExtensions();
|
||||
});
|
||||
@@ -13,4 +13,10 @@ contextBridge.exposeInMainWorld('api', {
|
||||
toggleDevTools: () => ipcRenderer.send('toggle-dev-tools'),
|
||||
|
||||
getSources: () => ipcRenderer.invoke('api:getSources'),
|
||||
|
||||
getInstalledExtensions: () => ipcRenderer.invoke('api:getInstalledExtensions'),
|
||||
installExtension: (name, url) => ipcRenderer.invoke('api:installExtension', name, url),
|
||||
uninstallExtension: (name) => ipcRenderer.invoke('api:uninstallExtension', name),
|
||||
|
||||
restartApp: () => ipcRenderer.send('app:restart')
|
||||
});
|
||||
@@ -1,6 +1,6 @@
|
||||
const GITHUB_OWNER = 'ItsSkaiya';
|
||||
const GITHUB_REPO = 'WaifuBoard';
|
||||
const CURRENT_VERSION = 'v1.6.1';
|
||||
const CURRENT_VERSION = 'v1.6.2';
|
||||
const UPDATE_CHECK_INTERVAL = 5 * 60 * 1000;
|
||||
|
||||
let currentVersionDisplay;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
114
views/marketplace.html
Normal 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>
|
||||
@@ -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
257
views/styles/marketplace.css
Normal 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); }
|
||||
Reference in New Issue
Block a user