enhanced and fixed reader
This commit is contained in:
@@ -12,7 +12,7 @@
|
||||
<!-- Top Bar -->
|
||||
<header class="top-bar">
|
||||
<button id="back-btn" class="glass-btn">
|
||||
X
|
||||
← Back
|
||||
</button>
|
||||
|
||||
<div class="chapter-info">
|
||||
@@ -35,142 +35,135 @@
|
||||
|
||||
<div class="panel-content">
|
||||
<!-- Light Novel Settings -->
|
||||
<div id="ln-settings" class="settings-group hidden">
|
||||
<h4>Text Settings</h4>
|
||||
<div id="ln-settings" class="hidden">
|
||||
<!-- Typography -->
|
||||
<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>
|
||||
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>
|
||||
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>
|
||||
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>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 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="divider"></div>
|
||||
<!-- Color Theme -->
|
||||
<div class="settings-section">
|
||||
<h4>Color Theme</h4>
|
||||
|
||||
<h4>🎨 Color Theme</h4>
|
||||
<div class="control">
|
||||
<label>Text Color</label>
|
||||
<input type="color" id="text-color" value="#e5e7eb">
|
||||
</div>
|
||||
|
||||
<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="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 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>
|
||||
|
||||
<!-- Manga Settings -->
|
||||
<div id="manga-settings" class="settings-group hidden">
|
||||
<h4>Display Mode</h4>
|
||||
<div id="manga-settings" class="hidden">
|
||||
<!-- Display -->
|
||||
<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>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 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="divider"></div>
|
||||
<!-- Appearance -->
|
||||
<div class="settings-section">
|
||||
<h4>Appearance</h4>
|
||||
|
||||
<h4>Image Settings</h4>
|
||||
|
||||
<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 class="control">
|
||||
<label>
|
||||
Max Image Width
|
||||
<span id="manga-max-width-value">900px</span>
|
||||
</label>
|
||||
<input type="range" id="manga-max-width" min="600" max="1600" value="900" step="50">
|
||||
</div>
|
||||
|
||||
<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 class="divider"></div>
|
||||
|
||||
<h4>⚡ Performance</h4>
|
||||
|
||||
<div class="control">
|
||||
<label>Image Quality</label>
|
||||
<div class="toggle-group">
|
||||
<button class="toggle-btn" data-quality="low">Low</button>
|
||||
<button class="toggle-btn active" data-quality="high">High</button>
|
||||
<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="control">
|
||||
<label>Preload Pages</label>
|
||||
<input type="number" id="preload-count" min="0" max="10" value="3">
|
||||
<!-- Performance -->
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user