made emulator.html full responsive

README.md

@@ -4,12 +4,15 @@
 
 <img src="public/banner.png" alt="WaifuBoard Hero" width="100%"/>
 <div align="center">
+<br>
 
 [![Windows](https://img.shields.io/badge/Windows-SUPPORTED-0078D6?style=for-the-badge&logo=windows&logoColor=white)](https://waifuboard.app)
 [![Latest](https://img.shields.io/gitea/v/release/ItsSkaiya/WaifuBoard?gitea_url=https://git.waifuboard.app&style=for-the-badge)](https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases/latest)
+![Downloads](https://img.shields.io/endpoint?url=https://waifuboard.jaiet7.workers.dev&style=for-the-badge)
 [![Extensions](https://img.shields.io/badge/Extensions-Repository-8257e5?style=for-the-badge)](https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions)
+[![Discord](https://img.shields.io/badge/Discord-JOIN-5865F2?style=for-the-badge&logo=discord&logoColor=white)](https://discord.gg/BVdGSCXxrm)
 
-**[Website](https://waifuboard.app)** • **[Documentation](https://waifuboard.app/docs)** •  **[Download Latest](https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases/latest)** • **[Discord (soon)](#)**
+**[Website](https://waifuboard.app)** • **[Documentation](https://waifuboard.app/docs)** •  **[Download Latest](https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases/latest)** 
 
 </div>
 
@@ -29,11 +32,12 @@
 
 ## 🖥️ Download & Platform Support
 
-| Platform   | Status          | Link                                                      |
+| Platform | Status          | Link                                                      |
-|------------|-----------------|-----------------------------------------------------------|
+|----------|-----------------|-----------------------------------------------------------|
-| Windows    | ✅ Available now | [Latest Release](https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases/latest) |
+| Windows  | ✅ Available now | [Latest Release](https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases/latest) |
-| Linux      | ⏳ Coming soon   | —                                                         |
+| Linux    | ⏳ Coming soon   | —                                                         |
-| macOS      | ⏳ Coming soon   | —                                                         |
+| macOS    | ⏳ Coming soon   | —                                                         |
+| Android  | ⏳ Coming soon   | —                                                         |
 
 ## 📦 Extensions & Marketplace
 

src/content/image-handler.js

@@ -1,12 +1,26 @@
-let masonryTimer = null;
+const gallery = document.getElementById('content-gallery');
-function scheduleMasonryRelayout(grid) {
+
-    clearTimeout(masonryTimer);
+if (gallery) {
-    masonryTimer = setTimeout(() => {
+    const ro = new ResizeObserver(() => {
-        relayoutMasonry(grid);
+        const items = gallery.querySelectorAll('.image-entry[data-type="image"]');
-    }, 50);
+        items.forEach(item => resizeMasonryItem(item));
+        relayoutMasonry(gallery);
+    });
+    ro.observe(gallery);
 }
 
-export function createImageCard(id, tags, imageUrl, thumbnailUrl, type, options = {}) {
+let masonryFrameRunning = false;
+function scheduleMasonryRelayout(grid) {
+    if (masonryFrameRunning) return;
+    masonryFrameRunning = true;
+
+    requestAnimationFrame(() => {
+        relayoutMasonry(grid);
+        masonryFrameRunning = false;
+    });
+}
+
+export function createImageCard(id, tags, imageUrl, thumbnailUrl, options = {}) {
     const {
         showMessage,
         showTagModal,
@@ -16,7 +30,7 @@ export function createImageCard(id, tags, imageUrl, thumbnailUrl, type, options
     const card = document.createElement('div');
     card.className = 'image-entry loading newly-added';
     card.dataset.id = id;
-    card.dataset.type = type;
+    card.dataset.type = 'image';
     card.title = tags.join(', ');
 
     const img = document.createElement('img');
@@ -28,10 +42,10 @@ export function createImageCard(id, tags, imageUrl, thumbnailUrl, type, options
         img.classList.add('loaded');
         card.classList.remove('loading');
 
-        if (type !== 'book') {
+        setTimeout(() => {
-            setTimeout(() => resizeMasonryItem(card), 20);
+            resizeMasonryItem(card);
             scheduleMasonryRelayout(card.parentElement);
-        }
+        }, 100);
 
         setTimeout(() => {
             card.classList.remove('newly-added');
@@ -45,23 +59,75 @@ export function createImageCard(id, tags, imageUrl, thumbnailUrl, type, options
 
     card.appendChild(img);
 
-    if (type === 'book') {
+    const buttonsOverlay = createButtonsOverlay(
-        const readOverlay = document.createElement('div');
+        id, imageUrl, thumbnailUrl, tags,
-        readOverlay.className = 'book-read-overlay';
+        card, favoriteIds, showMessage, showTagModal, options
-        readOverlay.innerHTML = `
+    );
-            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    card.appendChild(buttonsOverlay);
-                <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
-                <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
-            </svg>
-            <span>Click To Read</span>
-        `;
-        card.appendChild(readOverlay);
-        return card;
-    }
 
+    return card;
+}
+
+export function createBookCard(id, tags, imageUrl, thumbnailUrl, title, options = {}) {
+    const card = document.createElement('div');
+    card.className = 'image-entry loading newly-added';
+    card.dataset.id = id;
+    card.dataset.type = 'book';
+    card.dataset.title = title || 'Unknown';
+    card.title = tags.join(', ');
+
+    const img = document.createElement('img');
+    img.src = thumbnailUrl || imageUrl;
+    img.loading = 'lazy';
+    img.alt = title || tags.join(' ');
+
+    img.onload = () => {
+        img.classList.add('loaded');
+        card.classList.remove('loading');
+
+        setTimeout(() => card.classList.remove('newly-added'), 400);
+    };
+
+    img.onerror = () => {
+        card.classList.remove('loading');
+        img.classList.add('loaded');
+    };
+
+    card.appendChild(img);
+
+    const readOverlay = document.createElement('div');
+    readOverlay.className = 'book-read-overlay';
+    readOverlay.innerHTML = `
+        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
+            <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
+        </svg>
+        <span>Click To Read</span>
+    `;
+    card.appendChild(readOverlay);
+
+    return card;
+}
+
+function createButtonsOverlay(id, imageUrl, thumbnailUrl, tags, card, favoriteIds, showMessage, showTagModal, options) {
     const buttonsOverlay = document.createElement('div');
     buttonsOverlay.className = 'image-buttons';
 
+    const tagBtn = document.createElement('button');
+    tagBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7.01" y2="7"></line></svg>`;
+    tagBtn.title = "View Tags";
+    tagBtn.onclick = e => {
+        e.stopPropagation();
+        showTagModal(tags);
+    };
+    const favBtn = createFavoriteButton(id, imageUrl, thumbnailUrl, tags, card, favoriteIds, showMessage, options);
+    buttonsOverlay.appendChild(tagBtn);
+    buttonsOverlay.appendChild(favBtn);
+
+    return buttonsOverlay;
+}
+
+function createFavoriteButton(id, imageUrl, thumbnailUrl, tags, card, favoriteIds, showMessage, options) {
     const favBtn = document.createElement('button');
     favBtn.className = 'heart-button';
     favBtn.dataset.id = id;
@@ -69,7 +135,7 @@ export function createImageCard(id, tags, imageUrl, thumbnailUrl, type, options
     const isFavorited = favoriteIds.has(String(id));
     updateHeartIcon(favBtn, isFavorited);
 
-    favBtn.onclick = async (e) => {
+    favBtn.onclick = async e => {
         e.stopPropagation();
         e.preventDefault();
 
@@ -87,81 +153,58 @@ export function createImageCard(id, tags, imageUrl, thumbnailUrl, type, options
                         options.applyLayoutToGallery(options.favoritesGallery, options.currentLayout);
                     }
                 }
-            } else {
+            } else showMessage('Failed to remove favorite', 'error');
-                showMessage('Failed to remove favorite', 'error');
-            }
         } else {
             const favoriteData = {
                 id: String(id),
                 image_url: imageUrl,
                 thumbnail_url: thumbnailUrl,
                 tags: tags.join(','),
-                title: card.title || 'Unknown'
+                title: card.title || card.dataset.title || 'Unknown'
             };
             const success = await window.api.addFavorite(favoriteData);
             if (success) {
                 favoriteIds.add(String(id));
                 updateHeartIcon(favBtn, true);
                 showMessage('Added to favorites', 'success');
-            } else {
+            } else showMessage('Failed to save favorite', 'error');
-                showMessage('Failed to save favorite', 'error');
-            }
         }
     };
 
-    const tagBtn = document.createElement('button');
+    return favBtn;
-    tagBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7.01" y2="7"></line></svg>`;
+}
-    tagBtn.title = "View Tags";
-    tagBtn.onclick = (e) => {
-        e.stopPropagation();
-        showTagModal(tags);
-    };
 
-    buttonsOverlay.appendChild(tagBtn);
+function updateHeartIcon(btn, isFavorited) {
-    buttonsOverlay.appendChild(favBtn);
+    btn.innerHTML = isFavorited
-    card.appendChild(buttonsOverlay);
+        ? `<svg viewBox="0 0 24 24" fill="#ef4444" stroke="#ef4444" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>`
-
+        : `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>`;
-    return card;
+    btn.title = isFavorited ? "Remove from Favorites" : "Add to Favorites";
 }
 
 function resizeMasonryItem(item) {
     if (item.dataset.type === 'book') return;
 
     const grid = item.parentElement;
-    const rowHeight = parseInt(getComputedStyle(grid).gridAutoRows);
+    if (!grid) return;
-    const rowGap = parseInt(getComputedStyle(grid).gap);
-
     const img = item.querySelector("img");
+    if (!img || !img.complete || img.naturalWidth === 0) return;
 
-    if (!img) return;
+    const simulatedWidth = item.getBoundingClientRect().width;
 
-    if (!img.complete || img.naturalWidth === 0) {
+    const gridStyles = getComputedStyle(grid);
-        return;
+    const rowHeight = parseInt(gridStyles.gridAutoRows);
-    }
+    const rowGap = parseInt(gridStyles.gap);
 
-    const width = img.clientWidth;
+    const totalHeight = (img.naturalHeight / img.naturalWidth) * simulatedWidth;
-    const imageHeight = (img.naturalHeight / img.naturalWidth) * width;
-
-    const extra = 2;
-    const totalHeight = imageHeight + extra;
     const rowSpan = Math.ceil((totalHeight + rowGap) / (rowHeight + rowGap));
-    item.style.gridRowEnd = "span " + rowSpan;
 
-    item.style.height = totalHeight + "px";
+    item.style.gridRowEnd = `span ${rowSpan}`;
-}
+    item.style.height = "auto";
-
-function updateHeartIcon(btn, isFavorited) {
-    if (isFavorited) {
-        btn.innerHTML = `<svg viewBox="0 0 24 24" fill="#ef4444" stroke="#ef4444" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>`;
-        btn.title = "Remove from Favorites";
-    } else {
-        btn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>`;
-        btn.title = "Add to Favorites";
-    }
 }
 
 function relayoutMasonry(grid) {
-    const items = grid.querySelectorAll('.image-entry:not([data-type="book"])');
+    if (!grid) return;
+    const items = grid.querySelectorAll('.image-entry[data-type="image"]');
     items.forEach(item => resizeMasonryItem(item));
 }
 

src/renderer.js

@@ -2,7 +2,7 @@ import { populateSources } from './extensions/load-extensions.js';
 import { setupGlobalKeybinds } from './utils/keybinds.js';
 import { getDomElements } from './utils/dom-loader.js';
 import { performSearch, loadMoreResults } from './modules/search-handler.js';
-import { createImageCard, populateTagModal } from './content/image-handler.js';
+import { createImageCard, createBookCard, populateTagModal } from './content/image-handler.js';
 import { showMessage as uiShowMessage } from './modules/ui-utils.js';
 import { applyLayoutToGallery } from './modules/layout-manager.js';
 
@@ -23,12 +23,38 @@ document.addEventListener('DOMContentLoaded', async () => {
         }
     } catch (e) { console.error(e); }
 
-    function showMessage(msg, type = 'success') { if (domRefs.messageBar) uiShowMessage(domRefs.messageBar, msg, type); }
+    function showMessage(msg, type = 'success') {
-    function showTagModal(tags) { if (domRefs.tagInfoContent) { populateTagModal(domRefs.tagInfoContent, tags); domRefs.tagInfoModal.classList.remove('hidden'); } }
+        if (domRefs.messageBar) uiShowMessage(domRefs.messageBar, msg, type);
-    function localCreateImageCard(id, tags, img, thumb, type) {
+    }
-        return createImageCard(id, tags, img, thumb, type, { currentLayout, showMessage, showTagModal, applyLayoutToGallery, favoritesGallery: document.getElementById('favorites-gallery'), favoriteIds });
+
+    function showTagModal(tags) {
+        if (domRefs.tagInfoContent) {
+            populateTagModal(domRefs.tagInfoContent, tags);
+            domRefs.tagInfoModal.classList.remove('hidden');
+        }
+    }
+
+    function localCreateImageCard(id, tags, img, thumb, type) {
+        const sharedOptions = {
+            currentLayout,
+            showMessage,
+            showTagModal,
+            applyLayoutToGallery,
+            favoritesGallery: document.getElementById('favorites-gallery'),
+            favoriteIds
+        };
+
+        if (type === 'book') {
+            const title = tags[0] || 'Unknown';
+            return createBookCard(id, tags, img, thumb, title, sharedOptions);
+        } else {
+            return createImageCard(id, tags, img, thumb, sharedOptions);
+        }
+    }
+
+    function updateHeader() {
+        if (domRefs.headerContext) domRefs.headerContext.classList.add('hidden');
     }
-    function updateHeader() { if (domRefs.headerContext) domRefs.headerContext.classList.add('hidden'); }
 
     const callbacks = { showMessage, applyLayoutToGallery, updateHeader, createImageCard: localCreateImageCard };
 
@@ -290,13 +316,16 @@ document.addEventListener('DOMContentLoaded', async () => {
         const favGallery = document.getElementById('favorites-gallery');
         const rawFavorites = await window.api.getFavorites();
         favGallery.innerHTML = '';
-        if (!rawFavorites || rawFavorites.length === 0) favGallery.innerHTML = '<div class="loading-state"><p>No favorites found.</p></div>';
+        if (!rawFavorites || rawFavorites.length === 0) {
-        else {
+            favGallery.innerHTML = '<div class="loading-state"><p>No favorites found.</p></div>';
+        } else {
             rawFavorites.forEach(row => {
                 let tags = [];
                 if (typeof row.tags === 'string') tags = row.tags.split(',').filter(t=>t);
                 else if (Array.isArray(row.tags)) tags = row.tags;
-                const card = localCreateImageCard(row.id, tags, row.image_url, row.thumbnail_url, 'image');
+
+                const cardType = row.type || 'image';
+                const card = localCreateImageCard(row.id, tags, row.image_url, row.thumbnail_url, cardType);
                 card.dataset.title = row.title;
                 favGallery.appendChild(card);
             });

views/emulator.html

@@ -11,46 +11,38 @@
 
 <body>
 
-    <aside class="sidebar">
+<aside class="sidebar">
-        <a href="index.html" class="nav-button" title="Image Boards">
+    <a href="index.html" class="nav-button" title="Image Boards"> ... </a>
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+    <button class="nav-button active" title="Emulator"> ... </button>
-                <rect x="3" y="3" width="7" height="7"></rect>
+    <button class="nav-button" title="Reset" onclick="window.location.reload()"> ... </button>
-                <rect x="14" y="3" width="7" height="7"></rect>
+</aside>
-                <rect x="14" y="14" width="7" height="7"></rect>
-                <rect x="3" y="14" width="7" height="7"></rect>
-            </svg>
-            <span>Back To Home</span>
-        </a>
 
-        <button class="nav-button active" title="Emulator">
+<div class="main-wrapper">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml-icon lucide-code-xml"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
+    <header class="top-header">
-            <span>Emulator</span>
+        <button id="hamburger-btn" class="hamburger">Menu</button>
-        </button>
+        <h3>Extension Emulator</h3>
-        <button class="nav-button" title="Reset" onclick="window.location.reload()">
+    </header>
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2"><path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
-            <span>Reset</span>
-        </button>
-    </aside>
 
-    <div class="main-wrapper">
+    <div class="emulator-container">
-        <header class="top-header">
+        <div class="editor-pane">
-            <button id="hamburger-btn" class="hamburger">☰</button>
+            <div class="control-bar" style="background: transparent; border: none; padding: 0;">
-            <h3>Extension Emulator</h3>
+                <h4 style="margin:0">Extension Code</h4>
-        </header>
+                <span style="font-size: 0.8rem; color: var(--text-tertiary); margin-left: auto;">
-
+                        Paste your .js file here
-        <div class="emulator-container">
+                    </span>
-            <div class="editor-pane">
-                <div class="control-bar" style="background: transparent; border: none; padding: 0;">
-                    <h4 style="margin:0">Extension Code</h4>
-                    <span style="font-size: 0.8rem; color: var(--text-tertiary); margin-left: auto;">Paste your .js file
-                        here</span>
-                </div>
-                <textarea id="code-input" class="code-editor" spellcheck="false"
-                    placeholder="// Paste your extension class here..."></textarea>
             </div>
+            <textarea id="code-input" class="code-editor" spellcheck="false"
+                      placeholder="// Paste your extension class here..."></textarea>
+        </div>
 
-            <div class="preview-pane">
+        <div class="preview-pane">
-                <div class="control-bar">
+
+            <div class="control-bar" id="main-control-bar">
+                <button id="mobile-controls-toggle" class="btn-run mobile-only">
+                    Options
+                </button>
+
+                <div id="desktop-controls" class="control-group-wrapper">
                     <div class="control-group">
                         <label>Function</label>
                         <select id="func-select" class="control-input">
@@ -64,7 +56,7 @@
                     <div class="control-group">
                         <label>Query / ID / URL</label>
                         <input type="text" id="arg-input" class="control-input" value=""
-                            placeholder="Search query or ID">
+                               placeholder="Search query or ID">
                     </div>
 
                     <div class="control-group" style="max-width: 80px;">
@@ -74,31 +66,121 @@
 
                     <button class="btn-run" id="run-btn">Run</button>
                 </div>
+            </div>
 
-                <div style="display: flex; flex-direction: column; flex: 1; overflow: hidden; position: relative;">
+            <div style="display: flex; flex-direction: column; flex: 1; overflow:Emulator hidden; position: relative;">
-                    <div class="tabs">
+                <div class="tabs">
-                        <button class="tab-btn active" onclick="switchTab('visual')">Visual</button>
+                    <button class="tab-btn active" onclick="switchTab('visual')">Visual</button>
-                        <button class="tab-btn" onclick="switchTab('json')">JSON</button>
+                    <button class="tab-btn" onclick="switchTab('json')">JSON</button>
-                        <button class="tab-btn" onclick="switchTab('console')">Console</button>
+                    <button class="tab-btn" onclick="switchTab('console')">Console</button>
-                    </div>
+                </div>
 
-                    <div id="output-visual" class="output-area">
+                <div id="output-visual" class="output-area">
-                        <div class="loading-state hidden">Loading...</div>
+                    <div class="loading-state hidden">Loading...</div>
-                        <div id="visual-container"></div>
+                    <div id="visual-container"></div>
-                    </div>
+                </div>
-                    <div id="output-json" class="output-area hidden">
+                <div id="output-json" class="output-area hidden">
-                        <pre id="json-content"></pre>
+                    <pre id="json-content"></pre>
-                    </div>
+                </div>
-                    <div id="output-console" class="output-area hidden">
+                <div id="output-console" class="output-area hidden">
-                        <div id="console-content"></div>
+                    <div id="console-content"></div>
-                    </div>
                 </div>
             </div>
         </div>
     </div>
+</div>
 
-    <script src="../src/emulator/emulator.js"></script>
+<div id="mobile-controls-overlay"></div>
-    <script src="../src/hamburger.js"></script>
+<div id="mobile-controls-drawer">
+    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;">
+        <h4 style="margin:0; color:var(--text-primary);">Run Options</h4>
+        <button id="close-drawer-btn" style="background:none;border:none;font-size:1.8rem;cursor:pointer;color:var(--text-secondary);">
+            X
+        </button>
+    </div>
+
+    <div class="control-group-wrapper">
+        <div class="control-group">
+            <label>Function</label>
+            <select id="func-select-mobile" class="control-input">
+                <option value="fetchSearchResult">fetchSearchResult (Search)</option>
+                <option value="fetchInfo">fetchInfo (Image Details)</option>
+                <option value="findChapters">findChapters (Manga/Novel)</option>
+                <option value="findChapterPages">findChapterPages (Read)</option>
+            </select>
+        </div>
+
+        <div class="control-group">
+            <label>Query / ID / URL</label>
+            <input type="text" id="arg-input-mobile" class="control-input" placeholder="Search query or ID">
+        </div>
+
+        <div class="control-group">
+            <label>Page</label>
+            <input type="number" id="page-input-mobile" class="control-input" value="1" min="1">
+        </div>
+
+        <button class="btn-run" id="run-btn-mobile">Run</button>
+    </div>
+</div>
+
+<script src="../src/emulator/emulator.js"></script>
+<script src="../src/hamburger.js"></script>
+
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+        const toggleBtn     = document.getElementById('mobile-controls-toggle');
+        const drawer        = document.getElementById('mobile-controls-drawer');
+        const overlay       = document.getElementById('mobile-controls-overlay');
+        const closeBtn      = document.getElementById('close-drawer-btn');
+
+        const funcSelect    = document.getElementById('func-select');
+        const argInput      = document.getElementById('arg-input');
+        const pageInput     = document.getElementById('page-input');
+        const runBtn        = document.getElementById('run-btn');
+
+        const funcMobile    = document.getElementById('func-select-mobile');
+        const argMobile     = document.getElementById('arg-input-mobile');
+        const pageMobile    = document.getElementById('page-input-mobile');
+        const runMobile     = document.getElementById('run-btn-mobile');
+
+        const syncDesktopToMobile = () => {
+            funcMobile.value  = funcSelect.value;
+            argMobile.value   = argInput.value;
+            pageMobile.value  = pageInput.value;
+        };
+
+        const syncMobileToDesktop = () => {
+            funcSelect.value  = funcMobile.value;
+            argInput.value    = argMobile.value;
+            pageInput.value   = pageMobile.value;
+        };
+
+        toggleBtn?.addEventListener('click', () => {
+            syncDesktopToMobile();
+            drawer.classList.add('open');
+            overlay.classList.add('open');
+        });
+
+        const closeDrawer = () => {
+            syncMobileToDesktop();
+            drawer.classList.remove('open');
+            overlay.classList.remove('open');
+        };
+
+        closeBtn?.addEventListener('click', closeDrawer);
+        overlay?.addEventListener('click', closeDrawer);
+
+        document.addEventListener('keydown', e => {
+            if (e.key === 'Escape') closeDrawer();
+        });
+
+        runMobile?.addEventListener('click', () => {
+            syncMobileToDesktop();
+            closeDrawer();
+            runBtn.click();
+        });
+    });
+</script>
 </body>
-
 </html>

views/styles/books.css

@@ -402,3 +402,43 @@
         gap: 2.5rem;
     }
 }
+
+#pagination-controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+#pagination-controls .page-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.4rem 0.8rem;
+}
+.image-entry[data-type="book"] {
+    position: relative;
+}
+
+.image-entry[data-type="book"] .book-read-overlay {
+    position: absolute;
+    inset: 0;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    pointer-events: none;
+
+    color: #9b5cff;
+    font-weight: 600;
+    text-shadow: 0 0 6px rgba(0,0,0,0.6);
+    opacity: 0;
+    transition: opacity .25s ease;
+}
+
+.image-entry[data-type="book"]:hover .book-read-overlay {
+    opacity: 1;
+}

views/styles/emulator.css

@@ -3,8 +3,8 @@
     grid-template-columns: 1fr 1fr;
     gap: 1.5rem;
     height: calc(100vh - var(--header-height));
-    padding: 1rem 2rem 2rem 2rem;
+    padding: 1rem 2rem 2rem;
-    overflow: auto;
+    overflow: hidden;
 }
 
 .editor-pane,
@@ -207,11 +207,68 @@ pre {
 @media (max-width: 767px) {
     .emulator-container {
         grid-template-columns: 1fr;
-        grid-template-rows: minmax(250px, 40vh) minmax(400px, 1fr);
+        grid-template-rows: minmax(220px, 35vh) 1fr;
         gap: 1rem;
-        padding: 1rem;
+        padding: 0.75rem;
         height: auto;
-        overflow-y: auto;
+        min-height: calc(100vh - var(--header-height));
+        overflow: visible;
+    }
+
+    #mobile-controls-toggle {
+        display: block !important;
+        width: 100%;
+    }
+
+    #desktop-controls {
+        display: none;
+    }
+
+    .control-bar {
+        padding: 0.75rem;
+        justify-content: center;
+    }
+
+    .tabs {
+        flex-shrink: 0;
+    }
+
+    #visual-container {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        gap: 0.75rem;
+        padding: 0.5rem 0;
+    }
+
+    .visual-card {
+        width: calc(50% - 0.375rem);
+        max-width: 180px;
+        margin: 0;
+    }
+
+    .visual-card img {
+        height: 220px;
+    }
+
+    .visual-card .title {
+        font-size: 0.8rem;
+        padding: 0.45rem;
+    }
+
+    .visual-chapter {
+        padding: 0.85rem 0.75rem;
+        font-size: 0.95rem;
+    }
+
+    #console-content,
+    #json-content pre {
+        font-size: 0.82rem;
+        line-height: 1.4;
+    }
+
+    .loading-state {
+        font-size: 1rem;
     }
 
     .editor-pane,
@@ -230,14 +287,22 @@ pre {
     .preview-pane {
         display: flex;
         flex-direction: column;
-        overflow: visible;
+        height: auto;
+        min-height: 0;
+    }
+
+    .preview-pane > div:nth-child(2) {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
     }
 
     .code-editor {
+        min-height: 200px;
+        max-height: 40vh;
         font-size: 13px;
         padding: 0.75rem;
-        min-height: 200px;
-        max-height: 35vh;
     }
 
     .control-bar {
@@ -288,9 +353,10 @@ pre {
     }
 
     .output-area {
-        padding: 0.75rem;
+        flex: 1;
+        overflow-y: auto !important;
         min-height: 300px;
-        overflow: auto;
+        padding: 0.75rem;
     }
 
     .visual-card {
@@ -368,3 +434,59 @@ pre {
         height: 180px;
     }
 }
+
+.control-group-wrapper {
+    display: flex;
+    gap: 0.5rem;
+    align-items: end;
+    flex-wrap: wrap;
+    width: 100%;
+}
+
+#mobile-controls-drawer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: var(--bg-surface);
+    border-top: 1px solid var(--border);
+    border-radius: var(--radius-md) var(--radius-md) 0 0;
+    padding: 1rem;
+    transform: translateY(100%);
+    transition: transform 0.25s ease;
+    z-index: 1000;
+    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
+}
+
+#mobile-controls-drawer.open {
+    transform: translateY(0);
+}
+
+#mobile-controls-drawer .control-group-wrapper {
+    flex-direction: column;
+    gap: 1rem;
+}
+
+#mobile-controls-drawer .control-group {
+    min-width: 0;
+}
+
+#mobile-controls-drawer .btn-run {
+    width: 100%;
+    margin-top: 0.5rem;
+}
+
+#mobile-controls-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.5);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.25s;
+    z-index: 999;
+}
+
+#mobile-controls-overlay.open {
+    opacity: 1;
+    pointer-events: auto;
+}