multi language support for books and book page redesigned
This commit is contained in:
@@ -14,11 +14,12 @@
|
||||
<body>
|
||||
|
||||
<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
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
Back
|
||||
</a>
|
||||
|
||||
|
||||
<div class="hero-wrapper">
|
||||
<div class="hero-background">
|
||||
<img id="hero-bg" src="" alt="">
|
||||
@@ -28,106 +29,110 @@
|
||||
|
||||
<div class="content-container">
|
||||
|
||||
<div class="book-header-section">
|
||||
<h1 class="book-title" id="title">Loading...</h1>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="poster-card">
|
||||
<img id="poster" src="" alt="">
|
||||
<div class="hero-meta-info">
|
||||
<span id="local-pill" class="pill-local" style="display:none;">Local</span>
|
||||
<span id="extension-pill" class="pill-local" style="background:#8b5cf6; display:none;">Ext</span>
|
||||
|
||||
<span id="score">--% Score</span>
|
||||
<span class="meta-separator">•</span>
|
||||
<span id="published-date">----</span>
|
||||
<span class="meta-separator">•</span>
|
||||
<span id="status">--</span>
|
||||
<span class="meta-separator">•</span>
|
||||
<span id="format">--</span>
|
||||
<span class="meta-separator">•</span>
|
||||
<span id="chapters-count">-- Ch</span>
|
||||
</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>
|
||||
<div class="hero-description-mini" id="description"></div>
|
||||
<div class="hero-tags" id="genres"></div>
|
||||
|
||||
<span id="published-date">--</span>
|
||||
</div>
|
||||
<div class="action-row">
|
||||
<button class="btn-read" id="read-start-btn">
|
||||
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M2 9v12h5v-9h8v9h5v-12h2l-10 -9 -10 9z" transform="scale(0.8) translate(3,3)"/></svg>
|
||||
Start Reading
|
||||
</button>
|
||||
<button class="btn-add-list" id="add-to-list-btn">+ Add to Library</button>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<div class="main-layout">
|
||||
|
||||
<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" id="local-pill" style="display: none; background: #8b5cf6;"></div>
|
||||
<div class="pill score" id="score">--% Score</div>
|
||||
<div class="pill" id="genres">Action</div>
|
||||
<aside class="poster-section">
|
||||
<div class="poster-card">
|
||||
<img id="poster" src="" alt="">
|
||||
</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 class="sidebar-extra-info" id="sidebar-info" style="display: none;">
|
||||
<h4 class="sidebar-label">Alternative Titles</h4>
|
||||
<ul class="synonyms-list" id="synonyms-list">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="chapters-section">
|
||||
<div class="section-title">
|
||||
<h2>Chapters</h2>
|
||||
<div class="chapter-controls">
|
||||
<div class="content-column">
|
||||
|
||||
<select id="provider-filter" class="filter-select" style="display: none; margin-left: 15px;">
|
||||
<option value="all">All Providers</option>
|
||||
</select>
|
||||
<div class="chapters-section">
|
||||
<div class="chapters-header">
|
||||
<h2>Chapters</h2>
|
||||
|
||||
<div class="chapter-controls">
|
||||
<select id="provider-filter" class="glass-select" style="display: none;">
|
||||
<option value="all">All Providers</option>
|
||||
</select>
|
||||
|
||||
<div id="language-selector-container" class="control-group hidden">
|
||||
<select id="language-select" class="glass-select"></select>
|
||||
</div>
|
||||
|
||||
<div class="search-box">
|
||||
<input type="text" id="chapter-search" placeholder="Search..." class="glass-input">
|
||||
</div>
|
||||
|
||||
<button id="sort-btn" class="glass-btn-icon" title="Sort">
|
||||
<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="chapters-list" class="chapters-grid"></div>
|
||||
<div id="loading-msg" style="text-align: center; padding: 2rem; display: none; color: #888;">Loading...</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>
|
||||
|
||||
<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="relations-section" style="display:none; margin-top: 3rem;">
|
||||
<h3 class="subsection-title">Relations</h3>
|
||||
<div class="relations-horizontal" id="relations-list"></div>
|
||||
</div>
|
||||
|
||||
<section class="content-section">
|
||||
<h2 class="subsection-title">Characters</h2>
|
||||
<div class="characters-grid" id="characters-list"></div>
|
||||
</section>
|
||||
|
||||
</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>
|
||||
<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/utils/auth-utils.js"></script>
|
||||
<script src="/src/scripts/utils/notification-utils.js"></script>
|
||||
<script src="/src/scripts/utils/url-utils.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user