Organized all script files
Removed useless things from all files Added an update notification if there is an update Updated the directory for the app icon
This commit is contained in:
324
views/index.html
Normal file
324
views/index.html
Normal file
@@ -0,0 +1,324 @@
|
||||
<!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>
|
||||
<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>
|
||||
</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" />
|
||||
</svg>
|
||||
</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" />
|
||||
</svg>
|
||||
</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>
|
||||
</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 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">
|
||||
</path>
|
||||
</svg>
|
||||
<p class="mt-2">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>
|
||||
|
||||
<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 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>
|
||||
</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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
|
||||
<div id="updateToast" class="toast hidden">
|
||||
<p>An update is required for Waifu Board! newest version - <span id="latestVersionDisplay"></span></p>
|
||||
</div>
|
||||
|
||||
<script src="../scripts/renderer.js"></script>
|
||||
<script src="../scripts/updateNotification.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user