Merge branch 'master' of github.com:RicterZ/nhentai

2025-07-05 17:39:29 +02:00 · 2018-08-11 09:19:31 +08:00
parent 126bbe8d49 6ff9751c30
commit de157ccb7f
11 changed files with 697 additions and 626 deletions
--- a/nhentai/viewer/index.html
+++ b/nhentai/viewer/index.html
@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>{TITLE}</title>
+    <style>
+{STYLES}
+    </style>
+</head>
+<body>
+
+<nav id="list">
+{IMAGES}</nav>
+
+<div id="image-container">
+    <span id="page-num"></span>
+    <div id="dest"></div>
+</div>
+
+<script>
+{SCRIPTS}
+</script>
+</body>
+</html>
--- a/nhentai/viewer/scripts.js
+++ b/nhentai/viewer/scripts.js
@ -0,0 +1,62 @@
+const pages = Array.from(document.querySelectorAll('img.image-item'));
+let currentPage = 0;
+
+function changePage(pageNum) {
+    const previous = pages[currentPage];
+    const current = pages[pageNum];
+
+    if (current == null) {
+        return;
+    }
+    
+    previous.classList.remove('current');
+    current.classList.add('current');
+
+    currentPage = pageNum;
+
+    const display = document.getElementById('dest');
+    display.style.backgroundImage = `url("${current.src}")`;
+
+    document.getElementById('page-num')
+        .innerText = [
+                (pageNum + 1).toLocaleString(),
+                pages.length.toLocaleString()
+            ].join('\u200a/\u200a');
+}
+
+changePage(0);
+
+document.getElementById('list').onclick = event => {
+    if (pages.includes(event.target)) {
+        changePage(pages.indexOf(event.target));
+    }
+};
+
+document.getElementById('image-container').onclick = event => {
+    const width = document.getElementById('image-container').clientWidth;
+    const clickPos = event.clientX / width;
+
+    if (clickPos < 0.5) {
+        changePage(currentPage - 1);
+    } else {
+        changePage(currentPage + 1);
+    }
+};
+
+document.onkeypress = event => {
+    switch (event.key.toLowerCase()) {
+        // Previous Image
+        case 'arrowleft':
+        case 'a':
+            changePage(currentPage - 1);
+            break;
+
+        // Next Image
+        case ' ':
+        case 'enter':
+        case 'arrowright':
+        case 'd':
+            changePage(currentPage + 1);
+            break;
+    }
+};
--- a/nhentai/viewer/styles.css
+++ b/nhentai/viewer/styles.css
@ -0,0 +1,69 @@
+*, *::after, *::before {
+    box-sizing: border-box;
+}
+
+img {
+    vertical-align: middle;
+}
+
+html, body {
+    display: flex;
+    background-color: #e8e6e6;
+    height: 100%;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    font-family: sans-serif;
+}
+
+#list {
+    height: 100%;
+    overflow: auto;
+    width: 260px;
+    text-align: center;
+}
+
+#list img {
+    width: 200px;
+    padding: 10px;
+    border-radius: 10px;
+    margin: 15px 0;
+    cursor: pointer;
+}
+
+#list img.current {
+    background: #0003;
+}
+
+#image-container {
+    flex: auto;
+    height: 100vh;
+    background: #222;
+    color: #fff;
+    text-align: center;
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    position: relative;
+}
+
+#image-container #dest {
+    height: 100%;
+    width: 100%;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+#image-container #page-num {
+    position: absolute;
+    font-size: 18pt;
+    left: 10px;
+    bottom: 5px;
+    font-weight: bold;
+    opacity: 0.75;
+    text-shadow: /* Duplicate the same shadow to make it very strong */
+        0 0 2px #222,
+        0 0 2px #222,
+        0 0 2px #222;
+}