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

added custom titlebar to electron

Browse Source
This commit is contained in:
lenafx
2025-12-05 12:47:19 +01:00
parent db74808e6c
commit 0da70f8e6a
20 changed files with 497 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
main.js
View File

@@ -1,4 +1,4 @@
const { app, BrowserWindow } = require('electron');
const { app, BrowserWindow, ipcMain } = require('electron');
const { fork } = require('child_process');
const path = require('path');
@@ -13,17 +13,23 @@ function createWindow() {
win = new BrowserWindow({
width: 1200,
height: 800,
frame: false,
titleBarStyle: "hidden",
webPreferences: {
preload: path.join(__dirname, "preload.js"),
nodeIntegration: false,
contextIsolation: true,
contextIsolation: true
}
});
win.setMenu(null);
win.loadURL('http://localhost:3000');
}
ipcMain.on("win:minimize", () => win.minimize());
ipcMain.on("win:maximize", () => win.maximize());
ipcMain.on("win:close", () => win.close());
app.whenReady().then(() => {
startBackend();
createWindow();

10
preload.js Normal file
View File

@@ -0,0 +1,10 @@
const { contextBridge, ipcRenderer } = require("electron");
contextBridge.exposeInMainWorld("electronAPI", {
isElectron: true,
win: {
minimize: () => ipcRenderer.send("win:minimize"),
maximize: () => ipcRenderer.send("win:maximize"),
close: () => ipcRenderer.send("win:close")
}
});

10
src/api/books/books.service.ts
View File

@@ -145,7 +145,6 @@ export async function searchBooksInExtension(ext: Extension | null, name: string
if (!ext) return [];
if ((ext.type === 'book-board') && ext.search) {
const start = performance.now();
try {
console.log(`[${name}] Searching for book: ${query}`);
@@ -159,15 +158,6 @@ export async function searchBooksInExtension(ext: Extension | null, name: string
}
});
const end = performance.now();
console.log(`[${name}] Search time: ${(end - start).toFixed(2)} ms`);
console.log(`[${name}] Search time: ${(end - start).toFixed(2)} ms`);
console.log(`[${name}] Search time: ${(end - start).toFixed(2)} ms`);
console.log(`[${name}] Search time: ${(end - start).toFixed(2)} ms`);
console.log(`[${name}] Search time: ${(end - start).toFixed(2)} ms`);
console.log(`[${name}] Search time: ${(end - start).toFixed(2)} ms`);
console.log(`[${name}] Search time: ${(end - start).toFixed(2)} ms`);
if (matches?.length) {
return matches.map(m => ({
id: m.id,

18
src/scripts/titlebar.js Normal file
View File

@@ -0,0 +1,18 @@
if (window.electronAPI?.isElectron) {
document.documentElement.classList.add("electron");
}
document.addEventListener("DOMContentLoaded", () => {
document.documentElement.style.visibility = "visible";
if (!window.electronAPI?.isElectron) return;
document.body.classList.add("electron");
const titlebar = document.getElementById("titlebar");
if (!titlebar) return;
titlebar.style.display = "flex";
titlebar.querySelector(".min").onclick = () => window.electronAPI.win.minimize();
titlebar.querySelector(".max").onclick = () => window.electronAPI.win.maximize();
titlebar.querySelector(".close").onclick = () => window.electronAPI.win.close();
});

119
src/shared/headless.js
View File

@@ -8,14 +8,14 @@ const BLOCK_LIST = [
"adsystem", "analytics", "tracker", "pixel", "quantserve", "newrelic",
"hotjar", "yandex", "ads", "widgets", "gravatar", "fonts.googleapis",
"map", "cdn.ampproject.org", "googletagmanager"
];
const ALLOWED_SCRIPTS = [];
async function initHeadless() {
if (browser) return;
if (browser && browser.isConnected()) return;
try {
browser = await chromium.launch({
headless: true,
args: [
@@ -42,9 +42,14 @@ async function initHeadless() {
userAgent:
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 Chrome/122.0.0.0 Safari/537.36"
});
} catch (error) {
console.error("Error al inicializar browser:", error);
throw error;
}
}
async function turboScroll(page) {
try {
await page.evaluate(() => {
return new Promise((resolve) => {
let last = 0;
@@ -55,7 +60,6 @@ async function turboScroll(page) {
if (h === last) {
same++;
if (same >= 5) {
clearInterval(timer);
resolve();
}
@@ -65,27 +69,47 @@ async function turboScroll(page) {
}
}, 20);
// Safety timeout
setTimeout(() => {
clearInterval(timer);
resolve();
}, 10000);
});
});
} catch (error) {
console.error("Error en turboScroll:", error.message);
// No lanzamos el error, continuamos
}
}
async function scrape(url, handler, options = {}) {
const {
waitUntil = "domcontentloaded",
waitSelector = null,
timeout = 10000,
timeout = 15000,
scrollToBottom = false,
renderWaitTime = 0,
loadImages = true,
blockScripts = true
blockScripts = true,
retries = 3,
retryDelay = 1000
} = options;
if (!browser) await initHeadless();
let lastError = null;
const page = await context.newPage();
for (let attempt = 1; attempt <= retries; attempt++) {
let page = null;
try {
// Verificar que el browser esté activo
if (!browser || !browser.isConnected()) {
await initHeadless();
}
page = await context.newPage();
const requests = [];
// Listener para requests
page.on("request", req => {
requests.push({
url: req.url(),
@@ -94,6 +118,7 @@ async function scrape(url, handler, options = {}) {
});
});
// Route para bloquear recursos
await page.route("**/*", (route) => {
const req = route.request();
const resUrl = req.url().toLowerCase();
@@ -105,64 +130,106 @@ async function scrape(url, handler, options = {}) {
type === "media" ||
type === "manifest" ||
type === "other" ||
(blockScripts && type === "script" && !ALLOWED_SCRIPTS.some(k => resUrl.includes(k)))
) {
return route.abort("blockedbyclient", { timeout: 100 });
return route.abort("blockedbyclient");
}
if (BLOCK_LIST.some(k => resUrl.includes(k))) {
return route.abort("blockedbyclient", { timeout: 100 });
return route.abort("blockedbyclient");
}
if (!loadImages && (
type === "image" || resUrl.match(/\.(jpg|jpeg|png|gif|webp|svg)$/)
)) {
return route.abort("blockedbyclient", { timeout: 100 });
return route.abort("blockedbyclient");
}
route.continue();
});
try {
// Navegar a la URL
await page.goto(url, { waitUntil, timeout });
// Esperar selector si se especifica
if (waitSelector) {
try {
await page.waitForSelector(waitSelector, { timeout });
await page.waitForSelector(waitSelector, { timeout: Math.min(timeout, 5000) });
} catch (e) {
console.warn(`Selector '${waitSelector}' no encontrado, continuando...`);
}
}
// Scroll si es necesario
if (scrollToBottom) {
await turboScroll(page);
}
// Tiempo de espera adicional para renderizado
if (renderWaitTime > 0) {
await new Promise(r => setTimeout(r, renderWaitTime));
await page.waitForTimeout(renderWaitTime);
}
// Ejecutar el handler personalizado
const result = await handler(page);
return { result, requests };
} catch (error) {
console.error(`Error durante el scraping de ${url}:`, error);
return null;
} finally {
// Cerrar la página antes de retornar
await page.close();
return { result, requests };
} catch (error) {
lastError = error;
console.error(`[Intento ${attempt}/${retries}] Error durante el scraping de ${url}:`, error.message);
// Cerrar página si está abierta
if (page && !page.isClosed()) {
try {
await page.close();
} catch (closeError) {
console.error("Error al cerrar página:", closeError.message);
}
}
// Si el browser está cerrado, limpiar referencias
if (error.message.includes("closed") || error.message.includes("Target closed")) {
console.log("Browser cerrado detectado, reiniciando...");
await closeScraper();
}
// Si no es el último intento, esperar antes de reintentar
if (attempt < retries) {
const delay = retryDelay * attempt; // Backoff exponencial
console.log(`Reintentando en ${delay}ms...`);
await new Promise(r => setTimeout(r, delay));
}
}
}
// Si llegamos aquí, todos los intentos fallaron
console.error(`Todos los intentos fallaron para ${url}`);
throw lastError || new Error("Scraping failed after all retries");
}
async function closeScraper() {
if (context) await context.close();
if (browser) await browser.close();
try {
if (context) {
await context.close();
context = null;
}
} catch (error) {
console.error("Error cerrando context:", error.message);
}
try {
if (browser) {
await browser.close();
browser = null;
}
} catch (error) {
console.error("Error cerrando browser:", error.message);
}
}
module.exports = {
initHeadless,

13
views/anime/anime.html
View File

@@ -7,8 +7,20 @@
<title>WaifuBoard</title>
<link rel="stylesheet" href="/views/css/anime/anime.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<script src="/src/scripts/titlebar.js"></script>
<link rel="stylesheet" href="/views/css/titlebar.css">
</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 class="title-right">
<button class="min">—</button>
<button class="max">🗖</button>
<button class="close">✕</button>
</div>
</div>
<div class="modal-overlay" id="desc-modal">
@@ -143,7 +155,6 @@
<script src="/src/scripts/updateNotifier.js"></script>
<script src="/src/scripts/rpc-inapp.js"></script>
<script src="/src/scripts/anime/anime.js"></script>
</body>
</html>

12
views/anime/index.html
View File

@@ -6,9 +6,21 @@
<title>WaifuBoard</title>
<link rel="stylesheet" href="/views/css/anime/home.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<link rel="stylesheet" href="/views/css/titlebar.css">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<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 class="title-right">
<button class="min">—</button>
<button class="max">🗖</button>
<button class="close">✕</button>
</div>
</div>
<nav class="navbar" id="navbar">
<a href="/" class="nav-brand">

17
views/anime/watch.html
View File

@@ -3,7 +3,6 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="/">
<title>WaifuBoard Watch</title>
<link rel="stylesheet" href="/views/css/anime/watch.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
@@ -11,11 +10,21 @@
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
<link rel="icon" href="/public/assets/waifuboards.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/views/css/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 class="title-right">
<button class="min">—</button>
<button class="max">🗖</button>
<button class="close">✕</button>
</div>
</div>
<header class="top-bar">
<a href="#" id="back-link" class="back-btn">

12
views/books/book.html
View File

@@ -8,8 +8,20 @@
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<link rel="stylesheet" href="/views/css/books/book.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<link rel="stylesheet" href="/views/css/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 class="title-right">
<button class="min">—</button>
<button class="max">🗖</button>
<button class="close">✕</button>
</div>
</div>
<a href="/books" class="back-btn">

12
views/books/books.html
View File

@@ -4,12 +4,24 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WaifuBoard Books</title>
<link rel="stylesheet" href="/views/css/titlebar.css">
<link rel="stylesheet" href="/views/css/books/books.css">
<script src="/src/scripts/books/books.js" defer></script>
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<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 class="title-right">
<button class="min">—</button>
<button class="max">🗖</button>
<button class="close">✕</button>
</div>
</div>
<nav class="navbar" id="navbar">
<a href="/" class="nav-brand">

13
views/books/read.html
View File

@@ -7,9 +7,20 @@
<link rel="stylesheet" href="/views/css/books/reader.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/views/css/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 class="title-right">
<button class="min">—</button>
<button class="max">🗖</button>
<button class="close">✕</button>
</div>
</div>
<header class="top-bar">
<button id="back-btn" class="glass-btn">

74
views/css/anime/watch.css
View File

@@ -39,19 +39,12 @@
--plyr-color-main: var(--color-primary);
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background-color: var(--color-bg-base);
color: var(--color-text-primary);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.6;
font-family: 'Inter', system-ui, sans-serif;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
@@ -577,35 +570,6 @@ body {
background: transparent;
}
.character-card {
--card-min-width: 280px;
flex: 1 1 var(--card-min-width);
max-width: calc((100% - var(--spacing-lg) * 3) / 4);
min-width: var(--card-min-width);
height: 92px;
display: flex;
align-items: center;
background: var(--color-bg-card);
border: var(--border-subtle);
border-radius: var(--radius-md);
padding: var(--spacing-md);
gap: var(--spacing-md);
transition: all var(--transition-fast);
}
.character-card:hover {
border-color: var(--color-primary);
box-shadow: 0 8px 25px rgba(139, 92, 246, 0.15);
transform: translateY(-2px);
}
.character-card-img { width: 60px; height: 60px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.character-details { overflow: hidden; flex: 1; }
.character-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actor-name { font-size: 0.875rem; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plyr--video { border-radius: var(--radius-xl); }
.plyr__controls { background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, transparent 100%) !important; padding: 1rem 1.5rem 1.5rem !important; }
.plyr--full-ui input[type=range] { color: var(--color-primary); }
@@ -624,16 +588,6 @@ body {
text-align: center;
margin-bottom: var(--spacing-lg);
}
.character-card {
max-width: calc((100% - var(--spacing-lg) * 2) / 3);
}
@media (min-width: 1400px) {
.character-card {
max-width: calc((100% - var(--spacing-lg) * 3) / 4);
}
}
}
@media (max-width: 768px) {
@@ -671,21 +625,6 @@ body {
.episode-controls { flex-direction: column; gap: var(--spacing-md); }
.navigation-buttons { width: 100%; justify-content: center; }
.nav-btn { flex: 1; justify-content: center; }
.characters-carousel {
justify-content: flex-start;
gap: var(--spacing-md);
max-height: 194px;
padding: 0;
}
.character-card {
--card-min-width-sm: 45%;
flex: 1 1 var(--card-min-width-sm);
min-width: unset;
max-width: unset;
height: 85px;
}
}
@media (max-width: 480px) {
@@ -713,14 +652,3 @@ body {
flex: 1 1 100%;
}
}
.ui-scale-wrapper {
transform: none;
transform-origin: unset;
width: 100%;
max-width: 100%;
margin: 0 auto;
padding-top: 0;
}

22
views/css/books/books.css
View File

@@ -337,25 +337,3 @@ body {
width: 100%; border-radius: 0; max-height: 60vh; border: none; z-index: 2001;
}
}
.adv-search-btn {
position: absolute;
top: 50%; /* Centrado verticalmente */
right: 5px; /* Ajusta la distancia del borde derecho */
transform: translateY(-50%); /* Ajuste fino de centrado */
/* Estilos para que parezca un botón de icono */
background: transparent;
border: none;
cursor: pointer;
padding: 5px; /* Área de clic cómoda */
line-height: 0; /* Elimina espacio extra */
/* Opcional: Dale un color de icono que combine */
transition: color 0.2s;
}
/* 3. Efecto al pasar el ratón (hover) */
.adv-search-btn:hover {
color: var(--color-primary, #fff); /* Cambia de color al pasar el mouse */
}

2
views/css/books/reader.css
View File

@@ -30,7 +30,7 @@
body {
background: var(--bg-base);
color: var(--text-primary);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-family: 'Inter', system-ui, sans-serif;
overflow-x: hidden;
line-height: 1.6;
}

3
views/css/gallery/image.css
View File

@@ -253,6 +253,9 @@
color: white; text-decoration: none; font-weight: 600;
transition: all 0.2s ease;
}
body.electron .back-btn {
top: 115px !important;
}
.back-btn:hover { background: rgba(255, 255, 255, 0.15); transform: translateX(-5px); }
@media (max-width: 768px) {

153
views/css/titlebar.css Normal file
View File

@@ -0,0 +1,153 @@
:root {
--titlebar-height: 40px;
}
* {
box-sizing: border-box;
}
html {
background: #09090b;
visibility: hidden;
}
html.electron {
margin: 0;
box-sizing: border-box;
}
html.electron .navbar,
html.electron .top-bar {
top: var(--titlebar-height) !important;
}
html.electron .back-btn {
top: 55px !important;
}
#back-link {
margin-top: 55px !important;
}
#titlebar {
display: none;
height: var(--titlebar-height);
background: rgba(9, 9, 11, 0.95);
color: white;
align-items: center;
justify-content: space-between;
padding: 0 12px;
-webkit-app-region: drag;
user-select: none;
font-family: 'Inter', system-ui, sans-serif;
border-bottom: 1px solid rgba(139, 92, 246, 0.2);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999999;
backdrop-filter: blur(12px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.title-left {
display: flex;
align-items: center !important;
gap: 10px;
}
#titlebar .app-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
background: rgba(139, 92, 246, 0.15);
border: 1px solid rgba(139, 92, 246, 0.3);
padding: 3px;
}
#titlebar .app-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.app-title {
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
letter-spacing: -0.2px;
}
.title-right {
display: flex;
height: 100%;
gap: 1px;
}
.title-right button {
-webkit-app-region: no-drag;
border: none;
background: transparent;
color: rgba(255, 255, 255, 0.7);
width: 46px;
height: 100%;
cursor: pointer;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.title-right button svg {
width: 16px;
height: 16px;
transition: transform 0.2s;
}
.title-right button:hover {
color: white;
}
.title-right button:active {
transform: scale(0.95);
}
.title-right .min:hover {
background: rgba(139, 92, 246, 0.2);
}
.title-right .max:hover {
background: rgba(34, 197, 94, 0.2);
}
.title-right .close:hover {
background: #e81123;
color: white;
}
.title-right button:hover svg {
transform: scale(1.1);
}
html.electron::-webkit-scrollbar {
width: 12px;
}
html.electron::-webkit-scrollbar-track {
background: #09090b;
margin-top: var(--titlebar-height);
}
html.electron::-webkit-scrollbar-thumb {
background: rgba(139, 92, 246, 0.3);
border-radius: 6px;
border: 2px solid #09090b;
}
html.electron::-webkit-scrollbar-thumb:hover {
background: rgba(139, 92, 246, 0.5);
}

12
views/gallery/gallery.html
View File

@@ -11,8 +11,20 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js" async></script>
<link rel="stylesheet" href="/views/css/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 class="title-right">
<button class="min">—</button>
<button class="max">🗖</button>
<button class="close">✕</button>
</div>
</div>
<nav class="navbar" id="navbar">
<a href="/" class="nav-brand">

12
views/gallery/image.html
View File

@@ -6,12 +6,24 @@
<title id="page-title">WaifuBoard - Gallery Item</title>
<link rel="stylesheet" href="/views/css/anime/home.css">
<link rel="stylesheet" href="/views/css/gallery/gallery.css">
<link rel="stylesheet" href="/views/css/titlebar.css">
<link rel="stylesheet" href="/views/css/gallery/image.css">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link rel="stylesheet" href="/views/css/updateNotifier.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 class="title-right">
<button class="min">—</button>
<button class="max">🗖</button>
<button class="close">✕</button>
</div>
</div>
<nav class="navbar" id="navbar">
<a href="/" class="nav-brand">

13
views/marketplace.html
View File

@@ -8,8 +8,20 @@
<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">
<link rel="stylesheet" href="/views/css/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 class="title-right">
<button class="min">—</button>
<button class="max">🗖</button>
<button class="close">✕</button>
</div>
</div>
<nav class="navbar" id="navbar">
<a href="/" class="nav-brand">
@@ -107,5 +119,6 @@
<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>
</body>
</html>

13
views/schedule.html
View File

@@ -10,9 +10,20 @@
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/views/css/schedule/schedule.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<link rel="stylesheet" href="/views/css/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 class="title-right">
<button class="min">—</button>
<button class="max">🗖</button>
<button class="close">✕</button>
</div>
</div>
<div class="ambient-bg" id="ambientBg"></div>