208 lines
7.2 KiB
HTML
208 lines
7.2 KiB
HTML
<!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/updateNotifier.css">
|
||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
||
<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>
|
||
|
||
<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> |