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

Updated UI style to be more modern

Browse Source 
Updated headless browser to get images, videos and gifs!
This commit is contained in:
itsskaiya
2025-11-20 14:25:23 -05:00
parent 6ddc45b989
commit aa5ac304bd
8 changed files with 850 additions and 327 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
main.js
View File

@@ -56,8 +56,8 @@ const db = initDatabase(dbPath);
function createWindow() {
const mainWindow = new BrowserWindow({
width: 1000,
height: 800,
width: 1324,
height: 868,
webPreferences: {
preload: path.join(__dirname, '/src/preload.js'),
contextIsolation: true,

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "waifu-board",
"version": "v1.3.1",
"version": "v1.4.0",
"description": "An image board app to store and browse your favorite waifus!",
"main": "main.js",
"scripts": {

84
src/extensions/load-extensions.js
View File

@@ -7,14 +7,12 @@ export async function populateSources(sourceList) {
if (sources && sources.length > 0) {
sources.forEach((source) => {
const button = document.createElement('button');
button.className =
'source-button w-12 h-12 flex items-center justify-center rounded-xl text-gray-400 hover:bg-gray-700 hover:text-white transition-all duration-200';
button.className = 'source-button hover:bg-gray-700 hover:text-white transition-all duration-200';
button.dataset.source = source.name;
button.title = source.name;
const favicon = document.createElement('img');
favicon.className = 'w-8 h-8 rounded';
let mainDomain = source.url;
try {
const hostname = new URL(source.url).hostname;
@@ -25,32 +23,94 @@ export async function populateSources(sourceList) {
mainDomain = hostname;
}
} catch (e) {
console.warn(`Could not parse domain from ${source.url}:`, e);
mainDomain = source.name;
}
const favicon = document.createElement('img');
favicon.className = 'source-icon rounded';
favicon.src = `https://www.google.com/s2/favicons?domain=${mainDomain}&sz=32`;
favicon.alt = source.name;
const textWrapper = document.createElement('div');
textWrapper.className = 'source-text-wrapper';
const nameSpan = document.createElement('span');
nameSpan.className = 'source-name';
nameSpan.textContent = source.name;
const urlSpan = document.createElement('span');
urlSpan.className = 'source-url';
urlSpan.textContent = mainDomain;
textWrapper.appendChild(nameSpan);
textWrapper.appendChild(urlSpan);
favicon.onerror = () => {
button.innerHTML = `<span class="font-bold text-sm">${source.name.substring(
0,
2
)}</span>`;
favicon.remove();
const fallbackIcon = document.createElement('div');
fallbackIcon.className = 'source-icon fallback';
fallbackIcon.textContent = source.name.substring(0, 1).toUpperCase();
button.insertBefore(fallbackIcon, textWrapper);
};
button.appendChild(favicon);
button.appendChild(textWrapper);
sourceList.appendChild(button);
});
console.log('Sources populated:', sources);
if (sourceList.children.length > 0) {
const firstButton = sourceList.children[0];
firstButton.classList.add('active');
initialSource = firstButton.dataset.source;
}
setupCarousel(sourceList);
} else {
console.warn('No sources were loaded from the main process.');
console.warn('No sources loaded.');
}
return initialSource;
}
function setupCarousel(element) {
element.addEventListener('wheel', (evt) => {
if (evt.deltaY !== 0) {
if (element.scrollWidth > element.clientWidth) {
evt.preventDefault();
element.scrollLeft += evt.deltaY;
}
}
});
let isDown = false;
let startX;
let scrollLeft;
element.addEventListener('mousedown', (e) => {
isDown = true;
element.style.cursor = 'grabbing';
startX = e.pageX - element.offsetLeft;
scrollLeft = element.scrollLeft;
});
element.addEventListener('mouseleave', () => {
isDown = false;
element.style.cursor = 'grab';
});
element.addEventListener('mouseup', () => {
isDown = false;
element.style.cursor = 'grab';
});
element.addEventListener('mousemove', (e) => {
if (!isDown) return;
e.preventDefault();
const x = e.pageX - element.offsetLeft;
const walk = (x - startX) * 2;
element.scrollLeft = scrollLeft - walk;
});
element.style.cursor = 'grab';
}

6
src/modules/navigation-handler.js
View File

@@ -18,8 +18,7 @@ export function showPage(pageId, domRefs, callbacks, state) {
});
document.querySelectorAll('.nav-button').forEach((tab) => {
tab.classList.remove('bg-indigo-600', 'text-white');
tab.classList.add('text-gray-400', 'hover:bg-gray-700');
tab.classList.remove('active');
});
const activePage = document.getElementById(pageId);
@@ -46,7 +45,6 @@ export function showPage(pageId, domRefs, callbacks, state) {
}
if (activeTab) {
activeTab.classList.add('bg-indigo-600', 'text-white');
activeTab.classList.remove('text-gray-400', 'hover:bg-gray-700');
activeTab.classList.add('active');
}
}

2
src/updateNotification.js
View File

@@ -1,6 +1,6 @@
const GITHUB_OWNER = 'ItsSkaiya';
const GITHUB_REPO = 'WaifuBoard';
const CURRENT_VERSION = 'v1.3.1';
const CURRENT_VERSION = 'v1.4.0';
const UPDATE_CHECK_INTERVAL = 5 * 60 * 1000;
let currentVersionDisplay;

30
src/utils/headless-browser.js
View File

@@ -6,14 +6,15 @@ class HeadlessBrowser {
const win = new BrowserWindow({
show: false,
width: 800,
height: 600,
width: 1920,
height: 1080,
webPreferences: {
offscreen: true,
contextIsolation: false,
nodeIntegration: false,
images: true,
images: false,
webgl: false,
backgroundThrottling: false,
},
});
@@ -21,6 +22,26 @@ class HeadlessBrowser {
const userAgent = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36';
win.webContents.setUserAgent(userAgent);
const session = win.webContents.session;
const filter = { urls: ['*://*/*'] };
session.webRequest.onBeforeRequest(filter, (details, callback) => {
const url = details.url.toLowerCase();
const blockExtensions = [
'.css', '.woff', '.woff2', '.ttf', '.svg', '.eot',
'google-analytics', 'doubleclick', 'facebook', 'twitter', 'adsystem'
];
const isBlocked = blockExtensions.some(ext => url.includes(ext));
if (isBlocked) {
return callback({ cancel: true });
}
return callback({ cancel: false });
});
await win.loadURL(url, { userAgent });
if (waitSelector) {
@@ -53,8 +74,7 @@ class HeadlessBrowser {
clearTimeout(timer);
resolve(true);
} else {
// FIX: Use setTimeout because requestAnimationFrame stops in hidden windows
setTimeout(check, 100);
setTimeout(check, 50);
}
};
check();

420
views/index.html
View File

@@ -3,322 +3,194 @@
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Security-Policy" content="
default-src 'self';
script-src 'self' https://cdn.tailwindcss.com;
style-src 'self' https://cdn.tailwindcss.com 'unsafe-inline';
img-src 'self' https: data:;
connect-src 'self' https:;
" />
<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:; connect-src 'self' https:;" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Waifu Board</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #111827;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #1f2937;
}
::-webkit-scrollbar-thumb {
background: #4b5563;
border-radius: 5px;
border: 2px solid #1f2937;
}
::-webkit-scrollbar-thumb:hover {
background: #6b7280;
}
.hidden {
display: none;
}
.dark-focus-ring:focus {
outline: 2px solid #4f46e5;
outline-offset: 2px;
}
.source-button.active {
background-color: #4f46e5;
color: white;
outline: 2px solid #4f46e5;
outline-offset: 2px;
}
.image-entry:hover .image-buttons {
opacity: 1;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
}
.gallery-masonry {
column-count: 2;
column-gap: 1rem;
}
@media (min-width: 768px) {
.gallery-masonry {
column-count: 3;
}
}
@media (min-width: 1024px) {
.gallery-masonry {
column-count: 4;
}
}
.gallery-masonry .image-entry {
display: inline-block;
width: 100%;
margin-bottom: 1rem;
break-inside: avoid;
}
.toast {
position: fixed;
bottom: 20px;
right: 20px;
padding: 15px;
border-radius: 5px;
color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
display: flex;
align-items: flex-start;
min-width: 350px;
z-index: 1000;
transition: opacity 0.3s ease-in-out;
}
.toast-content {
flex-grow: 1;
}
.toast p {
margin: 0 0 5px 0;
}
.toast.update-available {
background-color: #e53935;
}
.toast.hidden {
opacity: 0;
pointer-events: none;
}
</style>
<link rel="stylesheet" href="./styles/home.css">
</head>
<body class="text-gray-200 flex h-screen overflow-hidden">
<nav class="w-20 bg-gray-900 flex flex-col items-center flex-shrink-0 p-4 space-y-6">
<button id="browse-button" class="nav-button p-3 rounded-xl bg-indigo-600 text-white" title="Browse">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
</svg>
</button>
<button id="favorites-button" class="nav-button p-3 rounded-xl text-gray-400 hover:bg-gray-700 hover:text-white"
title="Favorites">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.31h5.518a.562.562 0 01.31.95l-4.203 3.03a.563.563 0 00-.182.53l1.501 4.87a.562.562 0 01-.82.624l-4.204-3.03a.563.563 0 00-.576 0l-4.204 3.03a.562.562 0 01-.82-.624l1.501-4.87a.563.563 0 00-.182-.53L2.498 9.87a.562.562 0 01.31-.95h5.518a.563.563 0 00.475-.31L11.48 3.5z" />
</svg>
</button>
<button id="search-icon-button" class="nav-button p-3 rounded-xl text-gray-400 hover:bg-gray-700 hover:text-white"
title="Search">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
<body>
<aside class="sidebar">
<br>
<nav style="display: flex; flex-direction: column; gap: 0.5rem;">
<button id="browse-button" class="nav-button active" title="Browse">
<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>Browse</span>
</button>
<button id="settings-button" class="nav-button p-3 rounded-xl text-gray-400 hover:bg-gray-700 hover:text-white"
title="Settings">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9.594 3.94c.09-.542.56-1.003 1.114-1.114.554-.111 1.085-.111 1.64 0 .554.111 1.023.571 1.114 1.114.09.542.09 1.12 0 1.662-.09.542-.56 1.003-1.114 1.114a3.49 3.49 0 01-1.64 0c-.554-.111-1.023-.571-1.114-1.114-.09-.542-.09-1.12 0-1.662zM21 12a9 9 0 11-18 0 9 9 0 0118 0zM7.16 14.969c.09-.542.56-1.003 1.114-1.114.554-.111 1.085-.111 1.64 0 .554.111 1.023.571 1.114 1.114.09.542.09 1.12 0 1.662-.09.542-.56 1.003-1.114 1.114a3.49 3.49 0 01-1.64 0c-.554-.111-1.023-.571-1.114-1.114-.09-.542-.09-1.12 0-1.662zM14.969 7.16c.09-.542.56-1.003 1.114-1.114.554-.111 1.085-.111 1.64 0 .554.111 1.023.571 1.114 1.114.09.542.09 1.12 0 1.662-.09.542-.56 1.003-1.114 1.114a3.49 3.49 0 01-1.64 0c-.554-.111-1.023-.571-1.114-1.114-.09-.542-.09-1.12 0-1.662z" />
<button id="favorites-button" 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>
</button>
<div class="h-px w-10 bg-gray-700"></div>
<div id="source-list" class="flex flex-col items-center space-y-4" aria-label="Sources">
</div>
</nav>
<div class="flex-1 flex flex-col overflow-hidden">
<header class="bg-gray-800 flex-shrink-0 flex items-center justify-between p-4 border-b border-gray-700 h-[69px]">
<h1 id="page-title" class="text-xl font-bold text-gray-100">Browse</h1>
<div id="header-context" class="text-sm text-gray-400"></div>
<nav style="display: flex; flex-direction: column; gap: 0.5rem; margin-top: auto;">
<button id="settings-button" 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>
</button>
</nav>
</aside>
<div class="main-wrapper">
<header class="top-header">
<div style="position: relative;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
style="position: absolute; left: 15px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-tertiary);">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
<input type="text" id="search-input" placeholder="Search across sources..."
style="padding-left: 2.5rem;" />
</div>
<button id="search-button" class="hidden"></button>
<button id="search-icon-button" class="hidden"></button>
<button id="search-close-button" class="hidden"></button>
<div id="header-context" class="hidden"></div>
<h1 id="page-title" class="hidden">Home</h1>
</header>
<div id="browse-page" class="page flex-1 overflow-y-auto">
<main id="content-gallery" class="p-4 w-full" aria-live="polite">
<div id="loading-spinner" class="hidden text-center p-10 text-gray-400">
<svg class="animate-spin h-8 w-8 text-indigo-400 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
</svg>
<p class="mt-2">Loading...</p>
</div>
<p id="gallery-placeholder" class="text-gray-400 text-center text-lg">
Select a source and click the search icon to browse.
</p>
<div class="content-view">
<div id="infinite-loading-spinner" class="hidden text-center p-10 text-gray-400">
<svg class="animate-spin h-8 w-8 text-indigo-400 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
<div id="browse-page" class="page">
<h3
style="color: var(--text-tertiary); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1rem;">
Sources</h3>
<div id="source-list">
</div>
<h3
style="color: var(--text-tertiary); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; margin: 2rem 0 1rem 0;">
Library</h3>
<main id="content-gallery" class="gallery-masonry">
<div id="gallery-placeholder" class="loading-state" style="width: 100%; grid-column: 1 / -1;">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#52525b" stroke-width="1">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<circle cx="8.5" cy="8.5" r="1.5"></circle>
<polyline points="21 15 16 10 5 21"></polyline>
</svg>
<p>Select a source above to load content</p>
</div>
<div id="loading-spinner" class="hidden loading-state" style="width: 100%; grid-column: 1 / -1;">
<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 class="mt-2">Loading more...</p>
<p>Fetching images...</p>
</div>
<div id="infinite-loading-spinner" class="hidden loading-state"
style="width: 100%; grid-column: 1 / -1;">
<p>Loading more...</p>
</div>
</main>
</div>
<div id="favorites-page" class="page hidden flex-1 overflow-y-auto">
<main id="favorites-gallery" class="p-4 w-full">
</main>
<div id="favorites-page" class="page hidden">
<div style="margin-bottom: 2rem;">
<h2 style="margin-bottom: 0.5rem;">Your Favorites</h2>
<p style="color: var(--text-secondary);">Your personally curated collection.</p>
</div>
<main id="favorites-gallery" class="gallery-masonry"></main>
</div>
<div id="settings-page" class="page hidden flex-1 overflow-y-auto p-8">
<div class="max-w-2xl mx-auto space-y-8">
<h2 class="text-2xl font-bold text-white">Settings</h2>
<div id="settings-page" class="page hidden">
<div style="margin-bottom: 2rem;">
<h2>Settings</h2>
<p style="color: var(--text-secondary);">Customize your viewing experience.</p>
</div>
<div class="bg-gray-800 rounded-lg p-6">
<h3 class="text-lg font-semibold text-gray-100 mb-4">
Gallery Layout
</h3>
<fieldset class="space-y-4">
<label for="layout-scroll" class="flex items-center p-4 bg-gray-700 rounded-lg cursor-pointer">
<input type="radio" id="layout-scroll" name="layout" value="scroll"
class="h-5 w-5 text-indigo-600 border-gray-500 focus:ring-indigo-500" />
<span class="ml-3 flex flex-col">
<span class="font-medium text-gray-200">Scroll</span>
<span class="text-sm text-gray-400">A single, vertical column of large images.</span>
</span>
<div class="settings-grid">
<div class="settings-card">
<h3>Layout Style</h3>
<fieldset>
<label>
<input type="radio" name="layout" value="scroll" id="layout-scroll">
<div>
<strong>Scroll View</strong>
<div style="font-size: 0.8rem; color: var(--text-tertiary);">Single column feed
</div>
</div>
</label>
<label for="layout-grid" class="flex items-center p-4 bg-gray-700 rounded-lg cursor-pointer">
<input type="radio" id="layout-grid" name="layout" value="grid"
class="h-5 w-5 text-indigo-600 border-gray-500 focus:ring-indigo-500" />
<span class="ml-3 flex flex-col">
<span class="font-medium text-gray-200">Grid</span>
<span class="text-sm text-gray-400">A "Masonry" layout that adapts to image height.</span>
</span>
<label>
<input type="radio" name="layout" value="grid" id="layout-grid">
<div>
<strong>Masonry Grid</strong>
<div style="font-size: 0.8rem; color: var(--text-tertiary);">Staggered dynamic
heights</div>
</div>
</label>
<label for="layout-compact" class="flex items-center p-4 bg-gray-700 rounded-lg cursor-pointer">
<input type="radio" id="layout-compact" name="layout" value="compact"
class="h-5 w-5 text-indigo-600 border-gray-500 focus:ring-indigo-500" />
<span class="ml-3 flex flex-col">
<span class="font-medium text-gray-200">Compact</span>
<span class="text-sm text-gray-400">A responsive grid of static-sized cards.</span>
</span>
<label>
<input type="radio" name="layout" value="compact" id="layout-compact">
<div>
<strong>Compact Grid</strong>
<div style="font-size: 0.8rem; color: var(--text-tertiary);">Uniform square tiles
</div>
</div>
</label>
</fieldset>
</div>
</div>
</div>
</div>
<div id="search-modal"
class="hidden fixed inset-0 z-30 bg-black/70 backdrop-blur-md flex items-start justify-center p-8">
<div class="bg-gray-800 p-4 rounded-lg shadow-xl w-full max-w-lg relative">
<button id="search-close-button" class="absolute top-3 right-3 p-2 text-gray-400 hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<h2 class="text-xl font-semibold mb-4">Search</h2>
<div class="flex space-x-2">
<input type="search" id="search-input" placeholder="Search tags..."
class="flex-1 p-3 rounded-lg bg-gray-700 border border-gray-600 text-white placeholder-gray-400 dark-focus-ring" />
<button id="search-button"
class="px-5 py-3 rounded-lg bg-indigo-600 font-semibold text-white hover:bg-indigo-700 dark-focus-ring">
Search
</button>
</div>
</div>
</div>
<div id="tag-info-modal"
class="hidden fixed inset-0 z-30 bg-black/70 backdrop-blur-md flex items-start justify-center p-8"
aria-modal="true">
<div class="bg-gray-800 p-6 rounded-lg shadow-xl w-full max-w-lg relative">
<button id="tag-info-close-button" class="absolute top-3 right-3 p-2 text-gray-400 hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<h2 class="text-xl font-semibold mb-4">Image Tags</h2>
<div id="tag-info-content" class="flex flex-wrap gap-2 max-h-[60vh] overflow-y-auto">
</div>
<div id="tag-info-modal" class="hidden">
<div>
<button id="tag-info-close-button">&times;</button>
<h3 style="margin-top:0; margin-bottom: 1rem;">Tags</h3>
<div id="tag-info-content" class="tag-cloud"></div>
</div>
</div>
<div id="message-bar"
class="hidden fixed bottom-4 right-4 bg-green-600 text-white px-6 py-3 rounded-lg shadow-xl transition-all duration-300 transform translate-y-16">
Message
<div id="search-modal" class="hidden"></div>
<div id="message-bar" class="toast hidden">Message</div>
<div id="updateToast" class="toast hidden" style="border-left-color: #eab308;">
<p>Update Available: <span id="latestVersionDisplay">v1.x</span></p>
</div>
<div id="updateToast" class="toast hidden">
<p>An update is required for Waifu Board! newest version - <span id="latestVersionDisplay"></span></p>
</div>
<style>
@keyframes spin {
to {
transform: rotate(360deg);
}
}
</style>
<script type="module" src="../src/renderer.js"></script>
<script type="module" src="../scripts/main.js"></script>
<script src="../src/updateNotification.js"></script>
<script>
// Simple Enter key handler for search
const searchInput = document.getElementById('search-input');
const searchBtn = document.getElementById('search-button');
searchInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') searchBtn.click();
});
</script>
</body>
</html>

573
views/styles/home.css Normal file
View File

@@ -0,0 +1,573 @@
:root {
--bg-base: #09090b;
--bg-sidebar: #101012;
--bg-surface: #18181b;
--bg-surface-hover: #27272a;
--accent: #8b5cf6;
--accent-glow: rgba(139, 92, 246, 0.3);
--accent-gradient: linear-gradient(135deg, #8b5cf6, #6366f1);
--text-primary: #f4f4f5;
--text-secondary: #a1a1aa;
--text-tertiary: #52525b;
--border: #27272a;
--border-hover: #3f3f46;
--radius-md: 8px;
--radius-lg: 16px;
--radius-full: 9999px;
--sidebar-width-collapsed: 72px;
--sidebar-width-expanded: 240px;
--header-height: 70px;
}
* {
box-sizing: border-box;
outline: none;
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
body {
margin: 0;
padding: 0;
background-color: var(--bg-base);
color: var(--text-primary);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
height: 100vh;
display: flex;
overflow: hidden;
}
.sidebar {
width: var(--sidebar-width-collapsed);
background: var(--bg-sidebar);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
padding: 1.5rem 0.75rem;
gap: 0.5rem;
transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
z-index: 50;
flex-shrink: 0;
}
.sidebar:hover {
width: var(--sidebar-width-expanded);
}
.main-wrapper {
flex: 1;
display: flex;
flex-direction: column;
height: 100%;
position: relative;
}
.brand-logo {
height: 48px;
display: flex;
align-items: center;
padding: 0 0.5rem;
margin-bottom: 2rem;
overflow: hidden;
color: var(--text-primary);
font-weight: 800;
font-size: 1.25rem;
letter-spacing: -0.5px;
cursor: default;
}
.brand-icon {
min-width: 32px;
height: 32px;
background: var(--accent-gradient);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
margin-right: 1rem;
box-shadow: 0 0 15px var(--accent-glow);
color: white;
}
.nav-button {
display: flex;
align-items: center;
padding: 0.85rem;
border-radius: var(--radius-md);
color: var(--text-secondary);
background: transparent;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
overflow: hidden;
position: relative;
}
.nav-button:hover {
background: var(--bg-surface);
color: var(--text-primary);
}
.nav-button.active {
background: linear-gradient(90deg, rgba(139, 92, 246, 0.1), transparent);
border-left: 3px solid var(--accent);
color: var(--accent);
}
.nav-button svg {
min-width: 24px;
width: 24px;
height: 24px;
margin-right: 1rem;
}
.nav-button span {
opacity: 0;
transform: translateX(-10px);
transition: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sidebar:hover .nav-button span {
opacity: 1;
transform: translateX(0);
}
.top-header {
height: var(--header-height);
display: flex;
align-items: center;
justify-content: center;
padding: 0 2rem;
position: sticky;
top: 0;
z-index: 40;
}
.search-box {
display: contents;
}
#search-input {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-full);
padding: 0.5rem 1rem;
color: var(--text-primary);
width: 350px;
transition: 0.2s;
font-size: 0.9rem;
}
#search-input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 2px var(--accent-glow);
}
.content-view {
flex: 1;
overflow-y: auto;
padding: 0 2rem 2rem 2rem;
}
.page {
max-width: 1600px;
margin: 0 auto;
animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
#source-list {
display: flex;
gap: 1rem;
overflow-x: auto;
padding-bottom: 1rem;
scrollbar-width: none;
align-items: center;
flex-direction: row;
}
#source-list::-webkit-scrollbar {
display: none;
}
.source-button {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem 1rem;
min-width: 200px;
width: auto;
height: auto;
cursor: pointer;
transition: all 0.2s;
position: relative;
overflow: hidden;
text-align: left;
}
.source-button:hover {
background: var(--bg-surface-hover);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
color: var(--text-primary);
}
.source-button.active {
border-color: var(--accent);
background: linear-gradient(to right, rgba(139, 92, 246, 0.05), transparent);
color: var(--text-primary);
}
.source-button img,
.source-button .brand-icon {
width: 32px;
height: 32px;
border-radius: 6px;
object-fit: cover;
flex-shrink: 0;
}
.source-text-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
line-height: 1.3;
}
.source-name {
font-weight: 600;
color: var(--text-primary);
font-size: 0.95rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.source-url {
font-size: 0.75rem;
color: var(--text-tertiary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gallery-masonry {
column-count: 2;
column-gap: 1rem;
}
@media (min-width: 768px) {
.gallery-masonry {
column-count: 3;
}
}
@media (min-width: 1024px) {
.gallery-masonry {
column-count: 4;
}
}
@media (min-width: 1400px) {
.gallery-masonry {
column-count: 5;
}
}
.image-entry {
margin-bottom: 1rem;
border-radius: var(--radius-md);
overflow: hidden;
position: relative;
background: var(--bg-surface);
break-inside: avoid;
transition: transform 0.2s;
cursor: zoom-in;
display: inline-block;
width: 100%;
}
.image-entry:hover {
transform: scale(1.02);
z-index: 2;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.image-entry img {
width: 100%;
height: auto;
display: block;
opacity: 0;
transition: opacity 0.3s;
}
.image-entry img.loaded {
opacity: 1;
}
.image-entry img:not(.loaded) {
opacity: 1;
}
.image-buttons {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 2rem 1rem 1rem 1rem;
background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
display: flex;
justify-content: flex-end;
gap: 0.5rem;
opacity: 0;
transition: 0.2s;
top: auto;
right: auto;
flex-direction: row;
}
.image-entry:hover .image-buttons {
opacity: 1;
}
.image-buttons button {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(4px);
cursor: pointer;
transition: 0.2s;
padding: 0;
}
.image-buttons button:hover {
background: var(--accent);
border-color: var(--accent);
}
.image-buttons button svg {
width: 16px;
height: 16px;
}
.settings-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
.settings-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1.5rem;
}
.settings-card h3 {
margin-top: 0;
font-size: 1.1rem;
margin-bottom: 1rem;
color: var(--text-primary);
}
fieldset {
border: none;
padding: 0;
margin: 0;
}
label {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem;
border: 1px solid var(--border);
border-radius: var(--radius-md);
cursor: pointer;
margin-bottom: 0.5rem;
transition: 0.2s;
}
label:hover {
background: var(--bg-surface-hover);
}
input[type="radio"] {
accent-color: var(--accent);
margin-top: 4px;
width: 1.2em;
height: 1.2em;
}
.hidden {
display: none !important;
}
.loading-state {
text-align: center;
padding: 4rem;
color: var(--text-tertiary);
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
#tag-info-modal {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(8px);
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
}
#tag-info-modal.hidden {
display: none;
}
#tag-info-modal>div {
background: var(--bg-surface);
border: 1px solid var(--border);
padding: 2rem;
border-radius: var(--radius-lg);
width: 90%;
max-width: 500px;
position: relative;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
#tag-info-close-button {
position: absolute;
top: 1rem;
right: 1rem;
background: none;
border: none;
color: var(--text-tertiary);
cursor: pointer;
}
.tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 1rem;
}
#tag-info-content span {
background: var(--bg-surface-hover);
border: 1px solid var(--border);
color: var(--text-secondary);
padding: 4px 10px;
border-radius: 20px;
font-size: 0.8rem;
}
.toast {
position: fixed;
bottom: 2rem;
right: 2rem;
background: var(--bg-sidebar);
border: 1px solid var(--border);
border-left: 4px solid var(--accent);
padding: 1rem 1.5rem;
border-radius: var(--radius-md);
color: var(--text-primary);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
z-index: 1000;
transform: translateY(20px);
opacity: 0;
pointer-events: none;
transition: 0.3s;
}
.toast:not(.hidden) {
transform: translateY(0);
opacity: 1;
pointer-events: all;
}
#message-bar:not(.hidden) {
transform: translateY(0);
opacity: 1;
pointer-events: all;
}