381 lines
15 KiB
HTML
381 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<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 name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Waifu Board</title>
|
|
<!-- We'll use Tailwind CSS for a modern, professional look -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
/* Simple scrollbar styling for the dark theme */
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: #111827;
|
|
/* Tailwind gray-900 */
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #1f2937;
|
|
/* gray-800 */
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #4b5563;
|
|
/* gray-600 */
|
|
border-radius: 5px;
|
|
border: 2px solid #1f2937;
|
|
/* gray-800 */
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #6b7280;
|
|
/* gray-500 */
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* Simple focus ring for dark mode */
|
|
.dark-focus-ring:focus {
|
|
outline: 2px solid #4f46e5;
|
|
/* indigo-600 */
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Style for the active source button in the sidebar */
|
|
.source-button.active {
|
|
background-color: #4f46e5;
|
|
/* indigo-600 */
|
|
color: white;
|
|
/* Add a ring to the active favicon */
|
|
outline: 2px solid #4f46e5;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Group hover for showing buttons on image cards */
|
|
.image-entry:hover .image-buttons {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* --- MODIFIED --- */
|
|
/* This is the new "Compact" layout (formerly "Grid") */
|
|
/* It uses a standard, uniform grid */
|
|
.gallery-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
/* --- NEW --- */
|
|
/* This is the new "Grid" layout (Masonry/Waterfall) */
|
|
/* It uses CSS columns to create a height-responsive layout */
|
|
.gallery-masonry {
|
|
/* Set column count based on screen size */
|
|
column-count: 2;
|
|
/* 2 columns on small screens */
|
|
column-gap: 1rem;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.gallery-masonry {
|
|
column-count: 3;
|
|
/* 3 columns on medium screens */
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.gallery-masonry {
|
|
column-count: 4;
|
|
/* 4 columns on large screens */
|
|
}
|
|
}
|
|
|
|
/* This tells each card in Masonry how to behave */
|
|
.gallery-masonry .image-entry {
|
|
display: inline-block;
|
|
/* Respect the column flow */
|
|
width: 100%;
|
|
margin-bottom: 1rem;
|
|
/* Vertical gap */
|
|
break-inside: avoid;
|
|
/* Prevent cards from breaking across columns */
|
|
}
|
|
|
|
/* --- Toast Notification Styling --- */
|
|
.toast {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
padding: 15px 25px 15px 15px;
|
|
/* Extra padding on the right for the close button */
|
|
border-radius: 5px;
|
|
color: white;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
display: flex;
|
|
/* Allows 'X' button to align to the right */
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
min-width: 300px;
|
|
z-index: 1000;
|
|
/* Ensure it's above other elements */
|
|
transition: opacity 0.3s ease-in-out;
|
|
}
|
|
|
|
/* Red style for the 'out of date' notification */
|
|
.toast.update-available {
|
|
background-color: #e53935;
|
|
/* A strong red */
|
|
}
|
|
|
|
/* State for hiding the toast */
|
|
.toast.hidden {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
/* Prevents interaction when hidden */
|
|
}
|
|
|
|
.toast p {
|
|
margin: 0;
|
|
flex-grow: 1;
|
|
/* Allows the text to take up most of the space */
|
|
}
|
|
|
|
/* Styling for the close button */
|
|
.close-btn {
|
|
background: none;
|
|
border: none;
|
|
color: white;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
margin-left: 10px;
|
|
padding: 5px;
|
|
line-height: 1;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="text-gray-200 flex h-screen overflow-hidden">
|
|
<!-- Sidebar: Main Navigation -->
|
|
<nav class="w-20 bg-gray-900 flex flex-col items-center flex-shrink-0 p-4 space-y-6">
|
|
<!-- Home / Browse -->
|
|
<button id="browse-button" class="nav-button p-3 rounded-xl bg-indigo-600 text-white" title="Browse">
|
|
<!-- Heroicon: Home -->
|
|
<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>
|
|
<!-- Favorites -->
|
|
<button id="favorites-button" class="nav-button p-3 rounded-xl text-gray-400 hover:bg-gray-700 hover:text-white"
|
|
title="Favorites">
|
|
<!-- Heroicon: Star -->
|
|
<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>
|
|
<!-- Search -->
|
|
<button id="search-icon-button" class="nav-button p-3 rounded-xl text-gray-400 hover:bg-gray-700 hover:text-white"
|
|
title="Search">
|
|
<!-- Heroicon: Magnifying Glass -->
|
|
<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" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- NEW: Settings Button -->
|
|
<button id="settings-button" class="nav-button p-3 rounded-xl text-gray-400 hover:bg-gray-700 hover:text-white"
|
|
title="Settings">
|
|
<!-- Heroicon: Cog 6 Tooth -->
|
|
<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" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Divider -->
|
|
<div class="h-px w-10 bg-gray-700"></div>
|
|
|
|
<!-- Source List (Dynamically Populated) -->
|
|
<div id="source-list" class="flex flex-col items-center space-y-4" aria-label="Sources">
|
|
<!-- Source buttons will be injected here by renderer.js -->
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content Area -->
|
|
<div class="flex-1 flex flex-col overflow-hidden">
|
|
<!-- Contextual Header -->
|
|
<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>
|
|
</header>
|
|
|
|
<!-- Page: Browse -->
|
|
<!-- MODIFIED: Changed overflow-hidden to overflow-y-auto -->
|
|
<div id="browse-page" class="page flex-1 overflow-y-auto">
|
|
<!-- Content Gallery: Layout classes will be added by JS -->
|
|
<main id="content-gallery" class="p-4 w-full" aria-live="polite">
|
|
<!-- Loading spinner -->
|
|
<div id="loading-spinner" class="hidden text-center p-10 text-gray-400">
|
|
<!-- Tailwind Spinner -->
|
|
<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>
|
|
<!-- Search results will be injected here -->
|
|
<p id="gallery-placeholder" class="text-gray-400 text-center text-lg">
|
|
Select a source and click the search icon to browse.
|
|
</p>
|
|
|
|
<!-- NEW: Infinite Scroll Loading Spinner -->
|
|
<div id="infinite-loading-spinner" class="hidden text-center p-10 text-gray-400">
|
|
<!-- Tailwind Spinner -->
|
|
<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">
|
|
</path>
|
|
</svg>
|
|
<p class="mt-2">Loading more...</p>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Page: Favorites -->
|
|
<!-- MODIFIED: Changed overflow-hidden to overflow-y-auto -->
|
|
<div id="favorites-page" class="page hidden flex-1 overflow-y-auto">
|
|
<!-- Favorites Gallery: Layout classes will be added by JS -->
|
|
<main id="favorites-gallery" class="p-4 w-full">
|
|
<!-- Favorite items will be injected here -->
|
|
</main>
|
|
</div>
|
|
|
|
<!-- NEW: Settings Page -->
|
|
<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>
|
|
|
|
<!-- Layout Options -->
|
|
<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">
|
|
<!-- Scroll -->
|
|
<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>
|
|
</label>
|
|
<!-- Grid -->
|
|
<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>
|
|
|
|
<!-- MODIFIED: "Table" is now "Compact" -->
|
|
<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>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search Modal -->
|
|
<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">
|
|
<!-- Heroicon: X Mark -->
|
|
<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>
|
|
|
|
<!-- NEW: Tag Info Modal -->
|
|
<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">
|
|
<!-- Heroicon: X Mark -->
|
|
<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">
|
|
<!-- Tags will be injected here by renderer.js -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Message Bar (for confirmations) -->
|
|
<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>
|
|
|
|
<div id="updateToast" class="toast hidden">
|
|
<p>🚨 A new update is available! Version <span id="latestVersionDisplay"></span></p>
|
|
<button class="close-btn" onclick="hideToast()">X</button>
|
|
</div>
|
|
|
|
<!-- Renderer Script -->
|
|
<script src="./renderer.js"></script>
|
|
<script src="./updateNotification.js"></script>
|
|
</body>
|
|
|
|
</html> |