Organized the differences between server and docker versions.
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:
218
docker/views/books/book.html
Normal file
218
docker/views/books/book.html
Normal 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>
|
||||
Reference in New Issue
Block a user