179 lines
6.0 KiB
HTML
179 lines
6.0 KiB
HTML
<!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/books/book.css">
|
|
<link rel="stylesheet" href="/views/css/updateNotifier.css">
|
|
<link rel="stylesheet" href="/views/css/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 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="form-group">
|
|
<label>Status</label>
|
|
<select id="modal-status" class="form-input">
|
|
<option value="WATCHING">Reading</option>
|
|
<option value="COMPLETED">Completed</option>
|
|
<option value="PLANNING">Plan to Read</option>
|
|
<option value="PAUSED">Paused</option>
|
|
<option value="DROPPED">Dropped</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label id="modal-progress-label">Chapters Read</label>
|
|
<input type="number" id="modal-progress" class="form-input" min="0" placeholder="0">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Your Score (0-10)</label>
|
|
<input type="number" id="modal-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
|
|
</div>
|
|
|
|
<div class="modal-actions">
|
|
<button class="btn-modal-secondary" onclick="closeAddToListModal()">Cancel</button>
|
|
<button class="btn-modal-danger" id="modal-delete-btn" onclick="deleteFromList()" style="display: none;">Remove</button>
|
|
<button class="btn-modal-primary" onclick="saveToList()">Save</button>
|
|
</div>
|
|
</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 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/books/book.js"></script>
|
|
<script src="/src/scripts/auth-guard.js"></script>
|
|
</body>
|
|
</html> |