organisation & minor fixes
This commit is contained in:
130
views/books/book.html
Normal file
130
views/books/book.html
Normal file
@@ -0,0 +1,130 @@
|
||||
<!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">
|
||||
</head>
|
||||
<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
|
||||
</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">+ 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/books/book.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
99
views/books/books.html
Normal file
99
views/books/books.html
Normal file
@@ -0,0 +1,99 @@
|
||||
<!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/books/books.css">
|
||||
<script src="../../src/scripts/books/books.js" defer></script>
|
||||
<link rel="stylesheet" href="/views/css/updateNotifier.css">
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<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</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">My List</button>
|
||||
<button class="nav-button">Marketplace</button>
|
||||
</div>
|
||||
|
||||
<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 manga..." autocomplete="off">
|
||||
<div class="search-results" id="search-results"></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>
|
||||
|
||||
<main>
|
||||
<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/updateNotifier.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
195
views/books/read.html
Normal file
195
views/books/read.html
Normal file
@@ -0,0 +1,195 @@
|
||||
<!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/books/reader.css">
|
||||
<link rel="stylesheet" href="/views/css/updateNotifier.css">
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user