Updated headless browser (Should be as fast as it was before)
Added in Book Boards! (NEW!) Updated rendering logic Updated search logic Updated extension loading logic Updated image handling logic
This commit is contained in:
126
views/books.html
Normal file
126
views/books.html
Normal file
@@ -0,0 +1,126 @@
|
||||
<!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 - Books</title>
|
||||
<link rel="stylesheet" href="styles/home.css">
|
||||
<link rel="stylesheet" href="styles/books.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 active" 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="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">
|
||||
<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 books..." 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">Book Boards</h1>
|
||||
</header>
|
||||
|
||||
<div class="content-view">
|
||||
|
||||
<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;">Book 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">
|
||||
<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>
|
||||
<p>Select a book 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>Fetching books...</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="book-details-view" class="page hidden">
|
||||
</div>
|
||||
|
||||
<div id="reader-view" class="hidden">
|
||||
<div id="reader-content" style="width: 100%; display: flex; flex-direction: column; align-items: center;">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<script type="module" src="../src/renderer.js"></script>
|
||||
<script type="module" src="../scripts/main.js"></script>
|
||||
<script src="../src/updateNotification.js"></script>
|
||||
<script>
|
||||
const searchInput = document.getElementById('search-input');
|
||||
const searchBtn = document.getElementById('search-button');
|
||||
if(searchInput && searchBtn) {
|
||||
searchInput.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') searchBtn.click();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user