anything

src/modules/comic/ComicReader.css

@@ -4,7 +4,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: #0a0a0a;
+  background: #000;
   color: #fff;
   overflow: hidden;
   display: flex;
@@ -19,6 +19,7 @@
   justify-content: center;
   height: 100vh;
   gap: 1.5rem;
+  padding: 2rem;
 }
 
 .reader-error .error-icon {
@@ -27,12 +28,13 @@
 
 .reader-error h2 {
   margin: 0;
-  font-size: 2rem;
+  font-size: 1.5rem;
 }
 
 .reader-error p {
   margin: 0;
   opacity: 0.7;
+  text-align: center;
 }
 
 .reader-error button {
@@ -56,43 +58,49 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 1rem 1.5rem;
-  background: rgba(0, 0, 0, 0.9);
+  padding: 0.75rem 1rem;
+  background: rgba(0, 0, 0, 0.95);
   backdrop-filter: blur(10px);
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   position: relative;
   z-index: 100;
   transition: transform 0.3s;
+  gap: 0.5rem;
 }
 
 .comic-reader.hide-controls .reader-header {
   transform: translateY(-100%);
 }
 
-.back-btn {
+.back-btn,
+.menu-btn {
   padding: 0.5rem 1rem;
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 8px;
   color: white;
-  font-size: 0.95rem;
+  font-size: 0.9rem;
   cursor: pointer;
   transition: all 0.3s;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 
-.back-btn:hover {
+.back-btn:active,
+.menu-btn:active {
   background: rgba(255, 255, 255, 0.2);
 }
 
 .reader-title {
   flex: 1;
   text-align: center;
-  padding: 0 2rem;
+  min-width: 0;
+  padding: 0 0.5rem;
 }
 
 .reader-title h1 {
   margin: 0;
-  font-size: 1.25rem;
+  font-size: 0.9rem;
   font-weight: 600;
   white-space: nowrap;
   overflow: hidden;
@@ -100,29 +108,107 @@
 }
 
 .page-indicator {
-  font-size: 0.85rem;
+  font-size: 0.75rem;
   opacity: 0.7;
+  display: block;
+  margin-top: 0.25rem;
 }
 
-.reader-actions {
-  display: flex;
-  gap: 0.5rem;
+.hamburger-menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.9);
+  z-index: 200;
+  animation: fadeIn 0.2s;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.menu-content {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 280px;
+  max-width: 80vw;
+  height: 100%;
+  background: #1a1a1a;
+  padding: 1rem;
+  overflow-y: auto;
+  animation: slideInRight 0.3s;
+}
+
+@keyframes slideInRight {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
 }
 
-.reader-actions button {
+.close-menu {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
   width: 40px;
   height: 40px;
   background: rgba(255, 255, 255, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  border: none;
+  border-radius: 50%;
+  color: white;
+  font-size: 1.5rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.menu-section {
+  margin: 3rem 0 2rem 0;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.menu-section:first-child {
+  margin-top: 1rem;
+}
+
+.menu-section h3 {
+  margin: 0 0 1rem 0;
+  font-size: 0.85rem;
+  opacity: 0.6;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.menu-section button {
+  display: block;
+  width: 100%;
+  padding: 0.75rem;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 8px;
   color: white;
-  font-size: 1.2rem;
+  text-align: left;
   cursor: pointer;
+  margin-bottom: 0.5rem;
   transition: all 0.3s;
 }
 
-.reader-actions button:hover {
-  background: rgba(255, 255, 255, 0.2);
+.menu-section button:active {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.menu-info {
+  padding: 0.5rem;
+}
+
+.menu-info p {
+  margin: 0.5rem 0;
+  opacity: 0.7;
+  font-size: 0.9rem;
 }
 
 .page-jump-modal {
@@ -135,21 +221,18 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 200;
+  z-index: 300;
+  padding: 1rem;
   animation: fadeIn 0.2s;
 }
 
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
 .page-jump-content {
   background: #1a1a1a;
   padding: 2rem;
   border-radius: 16px;
   border: 1px solid rgba(255, 255, 255, 0.1);
-  min-width: 300px;
+  width: 100%;
+  max-width: 300px;
 }
 
 .page-jump-content h3 {
@@ -166,6 +249,7 @@
   color: white;
   font-size: 1rem;
   margin-bottom: 1rem;
+  box-sizing: border-box;
 }
 
 .page-jump-content input:focus {
@@ -193,7 +277,7 @@
   color: white;
 }
 
-.page-jump-actions button:first-child:hover {
+.page-jump-actions button:first-child:active {
   background: #5568d3;
 }
 
@@ -202,150 +286,38 @@
   color: white;
 }
 
-.page-jump-actions button:last-child:hover {
+.page-jump-actions button:last-child:active {
   background: rgba(255, 255, 255, 0.2);
 }
 
-.view-mode-toggle {
-  position: fixed;
-  top: 50%;
-  right: 1rem;
-  transform: translateY(-50%);
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  z-index: 90;
-  transition: opacity 0.3s;
-}
-
-.comic-reader.hide-controls .view-mode-toggle {
-  opacity: 0;
-  pointer-events: none;
-}
-
-.view-mode-toggle button {
-  width: 48px;
-  height: 48px;
-  background: rgba(0, 0, 0, 0.7);
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 12px;
-  color: white;
-  font-size: 1.5rem;
-  cursor: pointer;
-  transition: all 0.3s;
-}
-
-.view-mode-toggle button:hover,
-.view-mode-toggle button.active {
-  background: #667eea;
-  border-color: #667eea;
-  transform: scale(1.1);
-}
-
 .reader-content {
   flex: 1;
-  overflow: auto;
-  position: relative;
+  overflow-y: auto;
+  overflow-x: hidden;
   background: #000;
+  -webkit-overflow-scrolling: touch;
 }
 
 .scroll-container {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 2rem 0;
-  gap: 1rem;
+  width: 100%;
+  min-height: 100%;
 }
 
-.scroll-container img {
-  max-width: 100%;
+.comic-page {
+  width: 100%;
   height: auto;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
-  transition: all 0.3s;
-}
-
-.scroll-container img.current-page {
-  box-shadow: 0 0 0 3px #667eea;
-}
-
-.single-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  position: relative;
-  padding: 2rem;
-}
-
-.single-container img {
-  max-width: 100%;
-  max-height: 100%;
-  object-fit: contain;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
-}
-
-.double-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  position: relative;
-  padding: 2rem;
-}
-
-.double-pages {
-  display: flex;
-  gap: 1rem;
-  max-height: 100%;
-  align-items: center;
-}
-
-.double-pages img {
-  max-height: 100%;
-  max-width: 45%;
-  object-fit: contain;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
-}
-
-.nav-btn {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 60px;
-  height: 60px;
-  background: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 50%;
-  color: white;
-  font-size: 2rem;
-  cursor: pointer;
-  transition: all 0.3s;
-  z-index: 10;
-}
-
-.nav-btn:hover:not(:disabled) {
-  background: rgba(102, 126, 234, 0.8);
-  transform: translateY(-50%) scale(1.1);
-}
-
-.nav-btn:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-
-.nav-btn.prev {
-  left: 1rem;
-}
-
-.nav-btn.next {
-  right: 1rem;
+  display: block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  vertical-align: top;
 }
 
 .reader-footer {
-  padding: 1rem 1.5rem;
-  background: rgba(0, 0, 0, 0.9);
+  background: rgba(0, 0, 0, 0.95);
   backdrop-filter: blur(10px);
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   position: relative;
@@ -357,138 +329,191 @@
   transform: translateY(100%);
 }
 
-.chapter-navigation {
+.page-controls {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
 }
 
-.chapter-nav-btn {
-  padding: 0.75rem 1.5rem;
+.nav-control-btn {
+  padding: 0.5rem 1rem;
   background: rgba(102, 126, 234, 0.2);
   border: 1px solid rgba(102, 126, 234, 0.4);
   border-radius: 8px;
   color: white;
-  font-size: 0.9rem;
+  font-size: 0.85rem;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.3s;
   white-space: nowrap;
+  flex-shrink: 0;
 }
 
-.chapter-nav-btn:hover {
+.nav-control-btn:active:not(:disabled) {
   background: rgba(102, 126, 234, 0.4);
-  transform: translateY(-2px);
 }
 
-.page-slider {
+.nav-control-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.page-info {
   flex: 1;
-  padding: 0 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: 0;
 }
 
-.page-slider input[type="range"] {
+.page-info span {
+  text-align: center;
+  font-size: 0.85rem;
+  opacity: 0.8;
+}
+
+.page-slider {
   width: 100%;
-  height: 6px;
+  height: 4px;
   background: rgba(255, 255, 255, 0.1);
-  border-radius: 3px;
+  border-radius: 2px;
   outline: none;
   -webkit-appearance: none;
+  appearance: none;
 }
 
-.page-slider input[type="range"]::-webkit-slider-thumb {
+.page-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
-  width: 18px;
-  height: 18px;
+  width: 16px;
+  height: 16px;
   background: #667eea;
   border-radius: 50%;
   cursor: pointer;
-  transition: all 0.3s;
-}
-
-.page-slider input[type="range"]::-webkit-slider-thumb:hover {
-  background: #5568d3;
-  transform: scale(1.2);
 }
 
-.page-slider input[type="range"]::-moz-range-thumb {
-  width: 18px;
-  height: 18px;
+.page-slider::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
   background: #667eea;
   border: none;
   border-radius: 50%;
   cursor: pointer;
+}
+
+.chapter-navigation {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0 1rem 0.75rem 1rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+  padding-top: 0.75rem;
+}
+
+.chapter-spacer {
+  flex: 1;
+}
+
+.chapter-nav-btn {
+  padding: 0.75rem 1rem;
+  background: rgba(102, 126, 234, 0.15);
+  border: 1px solid rgba(102, 126, 234, 0.3);
+  border-radius: 8px;
+  color: white;
+  font-size: 0.85rem;
+  font-weight: 500;
+  cursor: pointer;
   transition: all 0.3s;
+  white-space: nowrap;
+  max-width: 45%;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.page-slider input[type="range"]::-moz-range-thumb:hover {
-  background: #5568d3;
-  transform: scale(1.2);
+.chapter-nav-btn:active {
+  background: rgba(102, 126, 234, 0.3);
 }
 
-.shortcuts-hint {
-  position: fixed;
-  bottom: 1rem;
-  left: 50%;
-  transform: translateX(-50%);
-  padding: 0.5rem 1rem;
-  background: rgba(0, 0, 0, 0.7);
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 20px;
-  font-size: 0.75rem;
-  opacity: 0.6;
-  pointer-events: none;
-  z-index: 80;
-  transition: opacity 0.3s;
+.chapter-nav-btn.prev {
+  text-align: left;
 }
 
-.comic-reader.hide-controls .shortcuts-hint {
-  opacity: 0;
+.chapter-nav-btn.next {
+  text-align: right;
 }
 
-@media (max-width: 768px) {
-  .reader-header {
-    padding: 0.75rem 1rem;
-  }
+.spinner {
+  width: 50px;
+  height: 50px;
+  border: 4px solid rgba(255, 255, 255, 0.1);
+  border-top-color: #667eea;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
 
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+@media (min-width: 768px) {
   .reader-title h1 {
-    font-size: 1rem;
+    font-size: 1.1rem;
   }
 
-  .reader-title {
-    padding: 0 1rem;
+  .page-indicator {
+    font-size: 0.85rem;
   }
 
-  .view-mode-toggle {
-    right: 0.5rem;
+  .back-btn,
+  .menu-btn {
+    padding: 0.5rem 1.5rem;
+    font-size: 1rem;
   }
 
-  .view-mode-toggle button {
-    width: 40px;
-    height: 40px;
-    font-size: 1.2rem;
+  .scroll-container {
+    max-width: 1200px;
+    margin: 0 auto;
   }
 
-  .nav-btn {
-    width: 50px;
-    height: 50px;
-    font-size: 1.5rem;
+  .comic-page {
+    max-width: 100%;
   }
 
+  .nav-control-btn,
   .chapter-nav-btn {
-    padding: 0.5rem 1rem;
-    font-size: 0.8rem;
+    font-size: 0.95rem;
+    padding: 0.75rem 1.5rem;
   }
 
-  .double-pages {
-    flex-direction: column;
+  .back-btn:hover,
+  .menu-btn:hover {
+    background: rgba(255, 255, 255, 0.2);
   }
 
-  .double-pages img {
-    max-width: 100%;
+  .nav-control-btn:hover:not(:disabled) {
+    background: rgba(102, 126, 234, 0.4);
   }
 
-  .shortcuts-hint {
-    display: none;
+  .chapter-nav-btn:hover {
+    background: rgba(102, 126, 234, 0.3);
   }
+
+  .menu-section button:hover {
+    background: rgba(255, 255, 255, 0.15);
+  }
+}
+
+@media (min-width: 1200px) {
+  .comic-page {
+    max-width: 900px;
+  }
+}
+
+.reader-content::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+.reader-content {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 }

src/modules/comic/ComicReader.tsx

@@ -31,60 +31,36 @@ export function ComicReader() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
   const [currentPage, setCurrentPage] = useState(1);
-  const [viewMode, setViewMode] = useState<'single' | 'double' | 'scroll'>('scroll');
+  const [showMenu, setShowMenu] = useState(false);
   const [showControls, setShowControls] = useState(true);
   const [showPageJump, setShowPageJump] = useState(false);
   const [jumpPage, setJumpPage] = useState('');
-  const [_, setWs] = useState<WebSocket | null>(null);
   
   const imageRefs = useRef<{ [key: number]: HTMLImageElement | null }>({});
   const controlsTimeout = useRef<number | null>(null);
+  const scrollContainerRef = useRef<HTMLDivElement | null>(null);
 
-  // Get data from location state (passed from ComicLanding)
   const chapterData = location.state?.chapterData;
-  const password = location.state?.password || 
-    JSON.parse(sessionStorage.getItem(`comic_${sessionId}`) || '{}').password;
+  const password = location.state?.password;
   const originalSessionId = location.state?.sessionId;
 
   useEffect(() => {
-    // If we have chapter data from state, use it directly
     if (chapterData) {
       setData(chapterData);
       setLoading(false);
       return;
     }
 
-    // Otherwise, this might be a direct link or refresh
     if (!password || !originalSessionId) {
       setError('Unauthorized access - please open from comic page');
       setLoading(false);
       return;
     }
 
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const wsUrl = `${protocol}//${window.location.host}/ws`;
-    const websocket = new WebSocket(wsUrl);
-
-    websocket.onopen = () => {
-      console.log('[Reader WS] Connected');
-      // Since we don't have chapter slug, we can't request
-      // User should go back to comic landing page
-      setError('Please open chapter from comic page');
-      setLoading(false);
-    };
-
-    websocket.onerror = () => {
-      setError('WebSocket connection failed');
-      setLoading(false);
-    };
-
-    setWs(websocket);
-
-    return () => {
-      websocket.close();
-    };
+    setError('Please open chapter from comic page');
+    setLoading(false);
   }, [sessionId, password, chapterData, originalSessionId]);
-
+  
   useEffect(() => {
     const resetTimeout = () => {
       if (controlsTimeout.current) {
@@ -93,6 +69,7 @@ export function ComicReader() {
       setShowControls(true);
       controlsTimeout.current = window.setTimeout(() => {
         setShowControls(false);
+        setShowMenu(false);
       }, 3000);
     };
 
@@ -109,72 +86,75 @@ export function ComicReader() {
       }
     };
   }, []);
-
-  // Keyboard shortcuts
+  
   useEffect(() => {
-    const handleKeyPress = (e: KeyboardEvent) => {
-      if (e.key === 'ArrowRight') nextPage();
-      if (e.key === 'ArrowLeft') prevPage();
-      if (e.key === 'Home') setCurrentPage(1);
-      if (e.key === 'End') setCurrentPage(data?.totalImages || 1);
-      if (e.key === 'f') toggleFullscreen();
+    const handleScroll = () => {
+      if (!scrollContainerRef.current) return;
+      
+      const container = scrollContainerRef.current;
+      const scrollTop = container.scrollTop;
+      const windowHeight = container.clientHeight;
+      let currentIdx = 1;
+      
+      for (let i = 1; i <= (data?.totalImages || 0); i++) {
+        const img = imageRefs.current[i];
+        if (img) {
+          const rect = img.getBoundingClientRect();
+          const containerRect = container.getBoundingClientRect();
+          const imgCenter = rect.top + rect.height / 2 - containerRect.top;
+          if (imgCenter > 0 && imgCenter < windowHeight) {
+            currentIdx = i;
+            break;
+          }
+        }
+      }
+      
+      setCurrentPage(currentIdx);
     };
 
-    window.addEventListener('keydown', handleKeyPress);
-    return () => window.removeEventListener('keydown', handleKeyPress);
-  }, [currentPage, data]);
+    const container = scrollContainerRef.current;
+    if (container) {
+      container.addEventListener('scroll', handleScroll);
+      return () => container.removeEventListener('scroll', handleScroll);
+    }
+  }, [data]);
 
-  // Scroll to current page in scroll mode
-  useEffect(() => {
-    if (viewMode === 'scroll' && imageRefs.current[currentPage]) {
-      imageRefs.current[currentPage]?.scrollIntoView({ 
-        behavior: 'smooth', 
-        block: 'center' 
-      });
+  const scrollToPage = (page: number) => {
+    const img = imageRefs.current[page];
+    if (img && scrollContainerRef.current) {
+      const container = scrollContainerRef.current;
+      const containerRect = container.getBoundingClientRect();
+      const imgRect = img.getBoundingClientRect();
+      
+      const scrollTo = container.scrollTop + (imgRect.top - containerRect.top);
+      container.scrollTo({ top: scrollTo, behavior: 'smooth' });
     }
-  }, [currentPage, viewMode]);
+  };
 
   const nextPage = () => {
     if (!data) return;
     if (currentPage < data.totalImages) {
-      setCurrentPage(currentPage + 1);
-    } else if (data.nextChapter) {
-      handleChapterNavigation();
+      scrollToPage(currentPage + 1);
     }
   };
 
   const prevPage = () => {
     if (currentPage > 1) {
-      setCurrentPage(currentPage - 1);
-    } else if (data?.prevChapter) {
-      handleChapterNavigation();
+      scrollToPage(currentPage - 1);
     }
   };
 
-  const handleChapterNavigation = () => {
-    // Go back to comic landing and let it handle chapter loading
-    navigate(-1);
-    
-    // Alternatively, we could navigate to the same comic landing
-    // and trigger chapter load from there
-    // But going back is simpler and maintains the flow
-  };
-
   const handlePageJump = () => {
     const page = parseInt(jumpPage);
     if (page >= 1 && page <= (data?.totalImages || 1)) {
-      setCurrentPage(page);
+      scrollToPage(page);
       setShowPageJump(false);
       setJumpPage('');
     }
   };
 
-  const toggleFullscreen = () => {
-    if (!document.fullscreenElement) {
-      document.documentElement.requestFullscreen();
-    } else {
-      document.exitFullscreen();
-    }
+  const handleChapterNavigation = (chapterSlug: string) => {
+    navigate(-1);
   };
 
   if (loading) {
@@ -198,7 +178,7 @@ export function ComicReader() {
   }
 
   return (
-    <div className={`comic-reader ${viewMode}-mode ${!showControls ? 'hide-controls' : ''}`}>
+    <div className={`comic-reader ${!showControls ? 'hide-controls' : ''}`}>
       <div className="reader-header">
         <button className="back-btn" onClick={() => navigate(-1)}>
           ← Back
@@ -207,19 +187,61 @@ export function ComicReader() {
         <div className="reader-title">
           <h1>{data.title}</h1>
           <span className="page-indicator">
-            Page {currentPage} / {data.totalImages}
+            {currentPage} / {data.totalImages}
           </span>
         </div>
 
-        <div className="reader-actions">
-          <button onClick={() => setShowPageJump(!showPageJump)} title="Jump to page">
-            📍
-          </button>
-          <button onClick={toggleFullscreen} title="Fullscreen">
-            ⛶
-          </button>
-        </div>
+        <button 
+          className="menu-btn" 
+          onClick={() => setShowMenu(!showMenu)}
+        >
+          ☰
+        </button>
       </div>
+      {showMenu && (
+        <div className="hamburger-menu" onClick={() => setShowMenu(false)}>
+          <div className="menu-content" onClick={(e) => e.stopPropagation()}>
+            <button onClick={() => setShowMenu(false)} className="close-menu">✕</button>
+            
+            <div className="menu-section">
+              <h3>Navigation</h3>
+              <button onClick={() => { scrollToPage(1); setShowMenu(false); }}>
+                ⏮️ First Page
+              </button>
+              <button onClick={() => { scrollToPage(data.totalImages); setShowMenu(false); }}>
+                ⏭️ Last Page
+              </button>
+              <button onClick={() => { setShowPageJump(true); setShowMenu(false); }}>
+                📍 Jump to Page
+              </button>
+            </div>
+
+            {(data.prevChapter || data.nextChapter) && (
+              <div className="menu-section">
+                <h3>Chapters</h3>
+                {data.prevChapter && (
+                  <button onClick={() => handleChapterNavigation(data.prevChapter!.slug)}>
+                    ⬅️ {data.prevChapter.chapter}
+                  </button>
+                )}
+                {data.nextChapter && (
+                  <button onClick={() => handleChapterNavigation(data.nextChapter!.slug)}>
+                    ➡️ {data.nextChapter.chapter}
+                  </button>
+                )}
+              </div>
+            )}
+
+            <div className="menu-section">
+              <h3>Info</h3>
+              <div className="menu-info">
+                <p>Total Pages: {data.totalImages}</p>
+                <p>Current: Page {currentPage}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
       {showPageJump && (
         <div className="page-jump-modal" onClick={() => setShowPageJump(false)}>
           <div className="page-jump-content" onClick={(e) => e.stopPropagation()}>
@@ -241,127 +263,76 @@ export function ComicReader() {
           </div>
         </div>
       )}
-      <div className="view-mode-toggle">
-        <button
-          className={viewMode === 'single' ? 'active' : ''}
-          onClick={() => setViewMode('single')}
-          title="Single page"
-        >
-          📄
-        </button>
-        <button
-          className={viewMode === 'double' ? 'active' : ''}
-          onClick={() => setViewMode('double')}
-          title="Double page"
-        >
-          📑
-        </button>
-        <button
-          className={viewMode === 'scroll' ? 'active' : ''}
-          onClick={() => setViewMode('scroll')}
-          title="Scroll"
-        >
-          📜
-        </button>
-      </div>
-      <div className="reader-content">
-        {viewMode === 'scroll' ? (
-          <div className="scroll-container">
-            {data.images.map((img) => (
-              <img
-                key={img.index}
-                ref={(el) => (imageRefs.current[img.index] = el)}
-                src={img.imageUrl}
-                alt={`Page ${img.index}`}
-                className={currentPage === img.index ? 'current-page' : ''}
-                loading="lazy"
-                onError={(e) => {
-                  (e.target as HTMLImageElement).src = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><text x="50%" y="50%" text-anchor="middle">Failed to load</text></svg>';
-                }}
-              />
-            ))}
-          </div>
-        ) : viewMode === 'single' ? (
-          <div className="single-container">
-            <button className="nav-btn prev" onClick={prevPage} disabled={currentPage === 1 && !data.prevChapter}>
-              ‹
-            </button>
+      <div className="reader-content" ref={scrollContainerRef}>
+        <div className="scroll-container">
+          {data.images.map((img) => (
             <img
-              src={data.images[currentPage - 1]?.imageUrl}
-              alt={`Page ${currentPage}`}
+              key={img.index}
+              ref={(el) => (imageRefs.current[img.index] = el)}
+              src={img.imageUrl}
+              alt={`Page ${img.index}`}
+              className="comic-page"
+              loading="lazy"
               onError={(e) => {
-                (e.target as HTMLImageElement).src = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><text x="50%" y="50%" text-anchor="middle">Failed to load</text></svg>';
+                (e.target as HTMLImageElement).src = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="1200"><rect width="800" height="1200" fill="%23222"/><text x="50%" y="50%" text-anchor="middle" fill="%23666" font-size="20">Failed to load page ' + img.index + '</text></svg>';
               }}
             />
-            <button className="nav-btn next" onClick={nextPage} disabled={currentPage === data.totalImages && !data.nextChapter}>
-              ›
-            </button>
-          </div>
-        ) : (
-          <div className="double-container">
-            <button className="nav-btn prev" onClick={prevPage} disabled={currentPage === 1 && !data.prevChapter}>
-              ‹
-            </button>
-            <div className="double-pages">
-              {currentPage % 2 === 0 && currentPage > 1 && (
-                <img
-                  src={data.images[currentPage - 2]?.imageUrl}
-                  alt={`Page ${currentPage - 1}`}
-                  className="left-page"
-                />
-              )}
-              <img
-                src={data.images[currentPage - 1]?.imageUrl}
-                alt={`Page ${currentPage}`}
-                className={currentPage % 2 === 0 ? 'right-page' : 'left-page'}
-              />
-              {currentPage % 2 !== 0 && currentPage < data.totalImages && (
-                <img
-                  src={data.images[currentPage]?.imageUrl}
-                  alt={`Page ${currentPage + 1}`}
-                  className="right-page"
-                />
-              )}
-            </div>
-            <button className="nav-btn next" onClick={nextPage} disabled={currentPage === data.totalImages && !data.nextChapter}>
-              ›
-            </button>
-          </div>
-        )}
+          ))}
+        </div>
       </div>
       <div className="reader-footer">
-        <div className="chapter-navigation">
-          {data.prevChapter && (
-            <button
-              className="chapter-nav-btn"
-              onClick={() => handleChapterNavigation()}
-            >
-              ← {data.prevChapter.chapter}
-            </button>
-          )}
+        <div className="page-controls">
+          <button 
+            className="nav-control-btn"
+            onClick={prevPage}
+            disabled={currentPage === 1}
+          >
+            ← Prev
+          </button>
           
-          <div className="page-slider">
+          <div className="page-info">
+            <span>{currentPage} / {data.totalImages}</span>
             <input
               type="range"
               min="1"
               max={data.totalImages}
               value={currentPage}
-              onChange={(e) => setCurrentPage(parseInt(e.target.value))}
+              onChange={(e) => scrollToPage(parseInt(e.target.value))}
+              className="page-slider"
             />
           </div>
 
-          {data.nextChapter && (
-            <button
-              className="chapter-nav-btn"
-              onClick={() => handleChapterNavigation()}
-            >
-              {data.nextChapter.chapter} →
-            </button>
-          )}
+          <button 
+            className="nav-control-btn"
+            onClick={nextPage}
+            disabled={currentPage === data.totalImages}
+          >
+            Next →
+          </button>
         </div>
-      </div>
-      <div className="shortcuts-hint">
-        ← → Navigate | Home/End | F Fullscreen
+        {(data.prevChapter || data.nextChapter) && (
+          <div className="chapter-navigation">
+            {data.prevChapter && (
+              <button
+                className="chapter-nav-btn prev"
+                onClick={() => handleChapterNavigation(data.prevChapter!.slug)}
+              >
+                ← {data.prevChapter.chapter}
+              </button>
+            )}
+            
+            <div className="chapter-spacer"></div>
+
+            {data.nextChapter && (
+              <button
+                className="chapter-nav-btn next"
+                onClick={() => handleChapterNavigation(data.nextChapter!.slug)}
+              >
+                {data.nextChapter.chapter} →
+              </button>
+            )}
+          </div>
+        )}
       </div>
     </div>
   );