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

Organized the differences between server and docker versions.

Browse Source 
We are launching a docker version (server version) today so we want to just organize the repo
so its easier to navigate.
This commit is contained in:
itsskaiya
2025-12-16 21:50:22 -05:00
parent b86f14a8f2
commit 28ff6ccc68
193 changed files with 23188 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
docker/views/books/book.html Normal file
View File

@@ -0,0 +1,218 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="/">
<title>WaifuBoard Book</title>
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<link rel="stylesheet" href="/views/css/globals.css">
<link rel="stylesheet" href="/views/css/components/anilist-modal.css">
<link rel="stylesheet" href="/views/css/books/book.css">
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
<link rel="stylesheet" href="/views/css/components/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="modal-overlay" id="add-list-modal">
<div class="modal-content">
<button class="modal-close" onclick="closeAddToListModal()">✕</button>
<h2 class="modal-title" id="modal-title">Add to Library</h2>
<div class="modal-body">
<div class="modal-fields-grid">
<div class="form-group">
<label for="entry-status">Status</label>
<select id="entry-status" class="form-input">
<option value="CURRENT">Reading</option>
<option value="COMPLETED">Completed</option>
<option value="PLANNING">Plan to Read</option>
<option value="PAUSED">Paused</option>
<option value="DROPPED">Dropped</option>
<option value="REPEATING">Rereading</option>
</select>
</div>
<div class="form-group">
<label for="entry-progress" id="progress-label">Chapters Read</label>
<input type="number" id="entry-progress" class="form-input" min="0" max="0" placeholder="0">
</div>
<div class="form-group">
<label for="entry-score">Score (0-10)</label>
<input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
</div>
<div class="form-group full-width date-group">
<div class="date-input-pair">
<label for="entry-start-date">Start Date</label>
<input type="date" id="entry-start-date" class="form-input">
</div>
<div class="date-input-pair">
<label for="entry-end-date">End Date</label>
<input type="date" id="entry-end-date" class="form-input">
</div>
</div>
<div class="form-group">
<label for="entry-repeat-count">Re-read Count</label>
<input type="number" id="entry-repeat-count" class="form-input" min="0">
</div>
<div class="form-group notes-group">
<label for="entry-notes">Notes</label>
<textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
</div>
<div class="form-group checkbox-group">
<input type="checkbox" id="entry-is-private" class="form-checkbox">
<label for="entry-is-private">Mark as Private</label>
</div>
</div>
</div>
<div class="modal-actions">
<button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button>
<button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
<button class="btn-primary" onclick="saveToList()">Save Changes</button>
</div>
</div>
</div>
<a href="/books" class="back-btn">
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
Back to Books
</a>
<div class="hero-wrapper">
<div class="hero-background">
<img id="hero-bg" src="" alt="">
</div>
<div class="hero-overlay"></div>
</div>
<div class="content-container">
<aside class="sidebar">
<div class="poster-card">
<img id="poster" src="" alt="">
</div>
<div class="info-grid">
<div class="info-item">
<h4>Format</h4>
<span id="format">--</span>
</div>
<div class="info-item">
<h4>Chapters</h4>
<span id="chapters">--</span>
</div>
<div class="info-item">
<h4>Status</h4>
<span id="status">--</span>
</div>
<div class="info-item">
<h4>Published</h4>
<span id="published-date">--</span>
</div>
</div>
</aside>
<main class="main-content">
<div class="book-header">
<h1 class="book-title" id="title">Loading...</h1>
<div class="meta-row">
<div class="pill extension-pill" id="extension-pill" style="display: none; background: #8b5cf6;"></div>
<div class="pill score" id="score">--% Score</div>
<div class="pill" id="genres">Action</div>
</div>
<div class="action-row">
<button class="btn-primary" id="read-start-btn">
Start Reading
</button>
<button class="btn-secondary" id="add-to-list-btn" onclick="openAddToListModal()">+ Add to Library</button>
</div>
</div>
<div class="chapters-section">
<div class="section-title">
<h2>Chapters</h2>
<div class="chapter-controls">
<select id="provider-filter" class="filter-select" style="display: none; margin-left: 15px;">
<option value="all">All Providers</option>
</select>
</div>
</div>
<div class="chapters-table-wrapper">
<table class="chapters-table">
<thead>
<tr>
<th>#</th>
<th>Title</th>
<th>Provider</th>
<th>Action</th>
</tr>
</thead>
<tbody id="chapters-body">
</tbody>
</table>
</div>
<div class="pagination-controls" id="pagination" style="display:none;">
<button class="page-btn" id="prev-page">Previous</button>
<span class="page-info" id="page-info">Page 1</span>
<button class="page-btn" id="next-page">Next</button>
</div>
</div>
</main>
</div>
<div id="updateToast" class="hidden">
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
<a
id="downloadButton"
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
target="_blank"
>
Click To Download
</a>
</div>
<script src="/src/scripts/updateNotifier.js"></script>
<script src="/src/scripts/rpc-inapp.js"></script>
<script src="/src/scripts/utils/auth-utils.js"></script>
<script src="/src/scripts/utils/notification-utils.js"></script>
<script src="/src/scripts/utils/url-utils.js"></script>
<script src="/src/scripts/utils/pagination-manager.js"></script>
<script src="/src/scripts/utils/media-metadata-utils.js"></script>
<script src="/src/scripts/utils/list-modal-manager.js"></script>
<script src="/src/scripts/books/book.js"></script>
<script src="/src/scripts/auth-guard.js"></script>
</body>
</html>

234
docker/views/books/books.html Normal file
View File

@@ -0,0 +1,234 @@
<!DOCTYPE html>
<html lang="en">
<head>
<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/globals.css">
<link rel="stylesheet" href="/views/css/components/navbar.css">
<link rel="stylesheet" href="/views/css/components/hero.css">
<link rel="stylesheet" href="/views/css/components/titlebar.css">
<link rel="stylesheet" href="/views/css/components/anilist-modal.css">
<link rel="stylesheet" href="/views/css/components/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">
<div class="brand-icon">
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
</div>
WaifuBoard
</a>
<div class="nav-center">
<button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
<button class="nav-button active">Books</button>
<button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
<button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
<button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
<button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
</div>
<div class="nav-right">
<div class="search-wrapper">
<svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
<input type="text" class="search-input" id="search-input" placeholder="Search books..." autocomplete="off">
<div class="search-results" id="search-results"></div>
</div>
<div class="nav-user" id="nav-user" style="display:none;">
<div class="user-avatar-btn">
<img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
<div class="online-indicator"></div>
</div>
<div class="nav-dropdown" id="nav-dropdown">
<div class="dropdown-header">
<img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
<div class="dropdown-user-info">
<div class="dropdown-username" id="nav-username"></div>
</div>
</div>
<a href="/my-list" class="dropdown-item">
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
<polyline points="17 21 17 13 7 13 7 21"/>
<polyline points="7 3 7 8 15 8"/>
</svg>
<span>My List</span>
</a>
<button class="dropdown-item logout-item" id="nav-logout">
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
<polyline points="16 17 21 12 16 7"/>
<line x1="21" y1="12" x2="9" y2="12"/>
</svg>
<span>Logout</span>
</button>
</div>
</div>
</div>
</nav>
<div class="hero-wrapper">
<div class="hero-background">
<img id="hero-bg-media" src="" alt="">
</div>
<div class="hero-vignette"></div>
<div class="hero-content">
<div class="hero-poster-card">
<img id="hero-poster" src="" alt="">
</div>
<div class="hero-text">
<h1 class="hero-title" id="hero-title">Loading...</h1>
<div class="hero-meta">
<span class="score-badge" id="hero-score"></span>
<span id="hero-year"></span>
<span id="hero-type"></span>
</div>
<p class="hero-desc" id="hero-desc"></p>
<div class="hero-buttons">
<button class="btn-primary" id="read-btn">Read Now</button>
<button class="btn-blur">+ Add to Library</button>
</div>
</div>
</div>
</div>
<div class="modal-overlay" id="add-list-modal">
<div class="modal-content modal-list">
<button class="modal-close" onclick="closeAddToListModal()">✕</button>
<h2 class="modal-title" id="modal-title">Add to Library</h2>
<div class="modal-body">
<div class="modal-fields-grid">
<div class="form-group">
<label for="entry-status">Status</label>
<select id="entry-status" class="form-input">
<option value="CURRENT">Reading</option>
<option value="COMPLETED">Completed</option>
<option value="PLANNING">Plan to Read</option>
<option value="PAUSED">Paused</option>
<option value="DROPPED">Dropped</option>
<option value="REPEATING">Rereading</option>
</select>
</div>
<div class="form-group">
<label for="entry-progress" id="progress-label">Chapters Read</label>
<input type="number" id="entry-progress" class="form-input" min="0" max="0" placeholder="0">
</div>
<div class="form-group">
<label for="entry-score">Score (0-10)</label>
<input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
</div>
<div class="form-group full-width date-group">
<div class="date-input-pair">
<label for="entry-start-date">Start Date</label>
<input type="date" id="entry-start-date" class="form-input">
</div>
<div class="date-input-pair">
<label for="entry-end-date">End Date</label>
<input type="date" id="entry-end-date" class="form-input">
</div>
</div>
<div class="form-group">
<label for="entry-repeat-count">Re-read Count</label>
<input type="number" id="entry-repeat-count" class="form-input" min="0">
</div>
<div class="form-group notes-group">
<label for="entry-notes">Notes</label>
<textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
</div>
<div class="form-group checkbox-group">
<input type="checkbox" id="entry-is-private" class="form-checkbox">
<label for="entry-is-private">Mark as Private</label>
</div>
</div>
</div>
<div class="modal-actions">
<button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button>
<button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
<button class="btn-primary" onclick="saveToList()">Save Changes</button>
</div>
</div>
</div>
<main>
<section class="section">
<div class="section-header">
<div class="section-title">Continue Reading</div>
</div>
<div class="carousel-wrapper">
<button class="scroll-btn left" onclick="scrollCarousel('my-status-books', -1)">‹</button>
<div class="carousel" id="my-status-books"></div>
<button class="scroll-btn right" onclick="scrollCarousel('my-status-books', 1)">›</button>
</div>
</section>
<section class="section">
<div class="section-header"><div class="section-title">Trending Books</div></div>
<div class="carousel-wrapper">
<button class="scroll-btn left" onclick="scrollCarousel('trending', -1)">‹</button>
<div class="carousel" id="trending"></div>
<button class="scroll-btn right" onclick="scrollCarousel('trending', 1)">›</button>
</div>
</section>
<section class="section">
<div class="section-header"><div class="section-title">All Time Popular</div></div>
<div class="carousel-wrapper">
<button class="scroll-btn left" onclick="scrollCarousel('popular', -1)">‹</button>
<div class="carousel" id="popular"></div>
<button class="scroll-btn right" onclick="scrollCarousel('popular', 1)">›</button>
</div>
</section>
</main>
<div id="updateToast" class="hidden">
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
<a
id="downloadButton"
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
target="_blank"
>
Click To Download
</a>
</div>
<script src="/src/scripts/utils/auth-utils.js"></script>
<script src="/src/scripts/utils/notification-utils.js"></script>
<script src="/src/scripts/utils/search-manager.js"></script>
<script src="/src/scripts/utils/list-modal-manager.js"></script>
<script src="/src/scripts/utils/continue-watching-manager.js"></script>
<script src="/src/scripts/books/books.js"></script>
<script src="/src/scripts/updateNotifier.js"></script>
<script src="/src/scripts/rpc-inapp.js"></script>
<script src="/src/scripts/auth-guard.js"></script>
</body>
</html>

208
docker/views/books/read.html Normal file
View File

@@ -0,0 +1,208 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reader</title>
<link rel="stylesheet" href="/views/css/globals.css">
<link rel="stylesheet" href="/views/css/books/reader.css">
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<link rel="stylesheet" href="/views/css/components/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">
← Back
</button>
<div class="chapter-info">
<button id="prev-chapter" class="nav-arrow">‹</button>
<span id="chapter-label">Loading...</span>
<button id="next-chapter" class="nav-arrow">›</button>
</div>
<button id="settings-btn" class="glass-btn">
⚙ Settings
</button>
</header>
<aside id="settings-panel" class="settings-panel">
<div class="panel-header">
<h3>Reader Settings</h3>
<button id="close-panel" class="close-btn">×</button>
</div>
<div class="panel-content">
<div id="ln-settings" class="hidden">
<div class="settings-section">
<h4>Typography</h4>
<div class="control">
<label>
Font Size
<span id="font-size-value">18px</span>
</label>
<input type="range" id="font-size" min="12" max="40" value="18" step="1">
</div>
<div class="control">
<label>
Line Height
<span id="line-height-value">1.8</span>
</label>
<input type="range" id="line-height" min="1.2" max="3" step="0.1" value="1.8">
</div>
<div class="control">
<label>
Content Width
<span id="max-width-value">750px</span>
</label>
<input type="range" id="max-width" min="500" max="1200" value="750" step="50">
</div>
<div class="control">
<label>Font Family</label>
<select id="font-family">
<option value='"Georgia", serif'>Georgia (Serif)</option>
<option value='"Charter", serif'>Charter (Serif)</option>
<option value='"Merriweather", serif'>Merriweather</option>
<option value='"Inter", system-ui, sans-serif'>Inter (Sans)</option>
<option value='system-ui, sans-serif'>System UI</option>
<option value='"JetBrains Mono", monospace'>JetBrains Mono</option>
</select>
</div>
<div class="control">
<label>Text Alignment</label>
<div class="toggle-group">
<button class="toggle-btn" data-align="left">Left</button>
<button class="toggle-btn active" data-align="justify">Justify</button>
<button class="toggle-btn" data-align="center">Center</button>
</div>
</div>
</div>
<div class="settings-section">
<h4>Color Theme</h4>
<div class="control">
<label>Text Color</label>
<input type="color" id="text-color" value="#e5e7eb">
</div>
<div class="control">
<label>Background Color</label>
<input type="color" id="bg-color" value="#14141b">
</div>
<div class="presets">
<button data-preset="dark">Dark</button>
<button data-preset="sepia">Sepia</button>
<button data-preset="light">Light</button>
<button data-preset="amoled">AMOLED</button>
</div>
</div>
</div>
<div id="manga-settings" class="hidden">
<div class="settings-section">
<h4>Display</h4>
<div class="control">
<label>Layout Mode</label>
<select id="display-mode">
<option value="auto">Auto Detect</option>
<option value="single">Single Page</option>
<option value="double">Double Page</option>
<option value="longstrip">Long Strip</option>
</select>
</div>
<div class="control">
<label>Reading Direction</label>
<div class="toggle-group">
<button class="toggle-btn" data-direction="ltr">← LTR</button>
<button class="toggle-btn active" data-direction="rtl">RTL →</button>
</div>
</div>
<div class="control">
<label>Image Fit</label>
<select id="image-fit">
<option value="width">Fit Width</option>
<option value="height">Fit Height</option>
<option value="screen" selected>Fit Screen</option>
</select>
</div>
</div>
<div class="settings-section">
<h4>Appearance</h4>
<div class="control">
<label>
Page Spacing
<span id="page-spacing-value">16px</span>
</label>
<input type="range" id="page-spacing" min="0" max="60" value="16" step="4">
</div>
</div>
<div class="settings-section">
<h4>Performance</h4>
<div class="control">
<label>Preload Pages</label>
<input type="number" id="preload-count" min="0" max="10" value="3">
</div>
</div>
</div>
</div>
</aside>
<div id="overlay" class="overlay"></div>
<main id="reader">
<div class="loading-container">
<div class="loading-spinner"></div>
<span>Loading chapter...</span>
</div>
</main>
<div id="updateToast" class="hidden">
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
<a
id="downloadButton"
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
target="_blank"
>
Click To Download
</a>
</div>
<script src="/src/scripts/updateNotifier.js"></script>
<script src="/src/scripts/books/reader.js"></script>
<script src="/src/scripts/auth-guard.js"></script>
</body>
</html>