comic,

src/App.tsx

@@ -2,6 +2,8 @@ import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { NotFoundPage } from "./modules/error/NotFound";
 import { HomePage } from "./modules/homepage/HomePage";
 import { RegisterPage } from "./modules/register/RegisterPage";
+import { ComicLanding } from "./modules/comic/ComicLanding";
+import { ComicReader } from "./modules/comic/ComicReader";
 
 export default function App() {
   return (
@@ -9,8 +11,10 @@ export default function App() {
       <Routes>
         <Route path="/" element={<HomePage />} />
         <Route path="/register/:sessionId" element={<RegisterPage />} />
+        <Route path="/comic/:sessionId" element={<ComicLanding />} />
+        <Route path="/read/:sessionId" element={<ComicReader />} />
         <Route path="*" element={<NotFoundPage />} />
       </Routes>
     </BrowserRouter>
   )
-}
+}

src/modules/comic/ComicLanding.css

@@ -0,0 +1,457 @@
+.comic-landing {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 100%);
+  color: #fff;
+}
+
+.loading-container,
+.error-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  gap: 1.5rem;
+}
+
+.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); }
+}
+
+.error-icon {
+  font-size: 4rem;
+}
+
+.error-container h2 {
+  margin: 0;
+  font-size: 2rem;
+}
+
+.error-container p {
+  margin: 0;
+  opacity: 0.7;
+}
+
+.error-container button {
+  margin-top: 1rem;
+  padding: 0.75rem 2rem;
+  background: #667eea;
+  border: none;
+  border-radius: 8px;
+  color: white;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.error-container button:hover {
+  background: #5568d3;
+  transform: translateY(-2px);
+}
+
+.auth-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 2rem;
+}
+
+.auth-card {
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 20px;
+  padding: 3rem;
+  max-width: 450px;
+  width: 100%;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+.auth-header {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.lock-icon {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+}
+
+.auth-header h2 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.75rem;
+}
+
+.auth-header p {
+  margin: 0;
+  opacity: 0.7;
+  font-size: 0.95rem;
+}
+
+.auth-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.input-group {
+  position: relative;
+}
+
+.password-input {
+  width: 100%;
+  padding: 1rem;
+  background: rgba(255, 255, 255, 0.05);
+  border: 2px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  color: white;
+  font-size: 1rem;
+  transition: all 0.3s;
+}
+
+.password-input:focus {
+  outline: none;
+  border-color: #667eea;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.error-message {
+  padding: 0.75rem;
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  border-radius: 8px;
+  color: #fca5a5;
+  font-size: 0.9rem;
+  text-align: center;
+}
+
+.submit-btn {
+  padding: 1rem;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border: none;
+  border-radius: 12px;
+  color: white;
+  font-size: 1.1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.submit-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
+}
+
+.auth-footer {
+  margin-top: 1.5rem;
+  text-align: center;
+  opacity: 0.6;
+  font-size: 0.85rem;
+}
+
+.hero-section {
+  position: relative;
+  padding: 4rem 2rem;
+  overflow: hidden;
+}
+
+.hero-backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-size: cover;
+  background-position: center;
+  filter: blur(20px) brightness(0.3);
+  transform: scale(1.1);
+}
+
+.hero-content {
+  position: relative;
+  max-width: 1200px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  gap: 3rem;
+  align-items: start;
+}
+
+.hero-thumbnail {
+  position: relative;
+}
+
+.hero-thumbnail img {
+  width: 100%;
+  border-radius: 16px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+}
+
+.type-badge {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  padding: 0.5rem 1rem;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 8px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+}
+
+.hero-info {
+  padding-top: 1rem;
+}
+
+.comic-title {
+  margin: 0 0 0.5rem 0;
+  font-size: 2.5rem;
+  font-weight: 800;
+  background: linear-gradient(135deg, #fff 0%, #667eea 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.comic-subtitle {
+  margin: 0 0 1.5rem 0;
+  font-size: 1.25rem;
+  opacity: 0.7;
+  font-weight: 400;
+}
+
+.meta-info {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.meta-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.meta-label {
+  font-size: 0.75rem;
+  opacity: 0.6;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.meta-value {
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.status-ongoing {
+  color: #10b981;
+}
+
+.status-completed {
+  color: #667eea;
+}
+
+.genre-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 2rem;
+}
+
+.genre-tag {
+  padding: 0.5rem 1rem;
+  background: rgba(102, 126, 234, 0.2);
+  border: 1px solid rgba(102, 126, 234, 0.3);
+  border-radius: 20px;
+  font-size: 0.85rem;
+  font-weight: 500;
+}
+
+.synopsis {
+  background: rgba(255, 255, 255, 0.05);
+  padding: 1.5rem;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.synopsis h3 {
+  margin: 0 0 1rem 0;
+  font-size: 1.25rem;
+}
+
+.synopsis p {
+  margin: 0;
+  line-height: 1.7;
+  opacity: 0.85;
+}
+
+.chapters-section {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 3rem 2rem;
+}
+
+.chapters-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.chapters-header h2 {
+  margin: 0;
+  font-size: 2rem;
+}
+
+.chapters-controls {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.search-box input {
+  padding: 0.75rem 1rem;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+  color: white;
+  font-size: 0.95rem;
+  width: 250px;
+  transition: all 0.3s;
+}
+
+.search-box input:focus {
+  outline: none;
+  border-color: #667eea;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.sort-btn {
+  padding: 0.75rem 1.25rem;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+  color: white;
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+  white-space: nowrap;
+}
+
+.sort-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: #667eea;
+}
+
+.chapters-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.chapter-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.25rem 1.5rem;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.chapter-item:hover {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: #667eea;
+  transform: translateX(4px);
+}
+
+.chapter-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex: 1;
+}
+
+.chapter-number {
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.chapter-meta {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.85rem;
+  opacity: 0.6;
+}
+
+.chapter-action {
+  display: flex;
+  align-items: center;
+}
+
+.read-btn {
+  font-weight: 600;
+  color: #667eea;
+  transition: all 0.3s;
+}
+
+.chapter-item:hover .read-btn {
+  transform: translateX(4px);
+}
+
+.no-results {
+  text-align: center;
+  padding: 3rem;
+  opacity: 0.5;
+}
+
+@media (max-width: 768px) {
+  .hero-content {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+  }
+
+  .hero-thumbnail {
+    max-width: 250px;
+    margin: 0 auto;
+  }
+
+  .comic-title {
+    font-size: 2rem;
+  }
+
+  .chapters-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .chapters-controls {
+    flex-direction: column;
+  }
+
+  .search-box input {
+    width: 100%;
+  }
+
+  .auth-card {
+    padding: 2rem;
+  }
+}

src/modules/comic/ComicLanding.tsx

@@ -0,0 +1,324 @@
+import { useEffect, useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import './ComicLanding.css';
+
+interface Chapter {
+  slug: string;
+  chapter: string;
+  date: string;
+  views: string;
+}
+
+interface ComicData {
+  slug: string;
+  title: string;
+  indonesiaTitle: string;
+  type: string;
+  author: string;
+  status: string;
+  genre: string[];
+  synopsis: string;
+  thumbnailUrl: string;
+  chapters: Chapter[];
+}
+
+export function ComicLanding() {
+  const { sessionId } = useParams();
+  const navigate = useNavigate();
+  
+  const [isAuth, setIsAuth] = useState(false);
+  const [password, setPassword] = useState('');
+  const [comicData, setComicData] = useState<ComicData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
+  
+  const [ws, setWs] = useState<WebSocket | null>(null);
+
+  useEffect(() => {
+    const storedSession = sessionStorage.getItem(`comic_${sessionId}`);
+    if (storedSession) {
+      const session = JSON.parse(storedSession);
+      const now = Date.now();
+  
+      if (now < session.expiresAt) {
+        setIsAuth(true);
+        setPassword(session.password);
+        return;
+      } else {
+        sessionStorage.removeItem(`comic_${sessionId}`);
+      }
+    }
+
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${protocol}//${window.location.host}/ws`;
+    const websocket = new WebSocket(wsUrl);
+
+    websocket.onopen = () => {
+      console.log('[WS] Connected');
+      websocket.send(JSON.stringify({
+        type: 'validate_comic_password',
+        sessionId
+      }));
+    };
+
+    websocket.onmessage = (event) => {
+      const message = JSON.parse(event.data);
+      
+      if (message.type === 'password_validation_response') {
+        if (!message.success) {
+          setError(message.error || 'Session tidak valid');
+          setLoading(false);
+        } else {
+          setLoading(false);
+        }
+      }
+
+      if (message.type === 'comic_data_response') {
+        if (message.success) {
+          setComicData(message.data);
+          setIsAuth(true);
+          sessionStorage.setItem(`comic_${sessionId}`, JSON.stringify({
+            password,
+            expiresAt: message.expiresAt
+          }));
+        } else {
+          setError(message.error || 'Gagal memuat data');
+        }
+      }
+    };
+
+    websocket.onerror = () => {
+      setError('Koneksi WebSocket gagal');
+      setLoading(false);
+    };
+
+    setWs(websocket);
+
+    return () => {
+      websocket.close();
+    };
+  }, [sessionId]);
+
+  useEffect(() => {
+    if (isAuth && ws && !comicData) {
+      ws.send(JSON.stringify({
+        type: 'request_comic_data',
+        sessionId,
+        password
+      }));
+    }
+  }, [isAuth, ws, comicData, sessionId, password]);
+
+  const handlePasswordSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!password.trim()) {
+      setError('Password tidak boleh kosong');
+      return;
+    }
+
+    if (ws) {
+      ws.send(JSON.stringify({
+        type: 'request_comic_data',
+        sessionId,
+        password: password.trim()
+      }));
+    }
+  };
+
+  const handleReadChapter = (chapterSlug: string) => {
+    const chapterSessionId = `chapter_${sessionId}_${chapterSlug}`;
+    navigate(`/read/${chapterSessionId}`, { 
+      state: { 
+        chapterSlug,
+        password,
+        comicTitle: comicData?.title 
+      } 
+    });
+  };
+
+  const filteredChapters = comicData?.chapters.filter(ch =>
+    ch.chapter.toLowerCase().includes(searchQuery.toLowerCase())
+  ) || [];
+
+  const sortedChapters = [...filteredChapters].sort((a, b) => {
+    const numA = parseFloat(a.chapter.match(/[\d.]+/)?.[0] || '0');
+    const numB = parseFloat(b.chapter.match(/[\d.]+/)?.[0] || '0');
+    return sortOrder === 'asc' ? numA - numB : numB - numA;
+  });
+
+  if (loading) {
+    return (
+      <div className="comic-landing">
+        <div className="loading-container">
+          <div className="spinner"></div>
+          <p>Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error && !isAuth) {
+    return (
+      <div className="comic-landing">
+        <div className="error-container">
+          <div className="error-icon">⚠️</div>
+          <h2>Oops!</h2>
+          <p>{error}</p>
+          <button onClick={() => navigate('/')}>Kembali ke Home</button>
+        </div>
+      </div>
+    );
+  }
+
+  if (!isAuth) {
+    return (
+      <div className="comic-landing">
+        <div className="auth-container">
+          <div className="auth-card">
+            <div className="auth-header">
+              <div className="lock-icon">🔒</div>
+              <h2>Protected Content</h2>
+              <p>Masukkan password untuk melanjutkan</p>
+            </div>
+            
+            <form onSubmit={handlePasswordSubmit} className="auth-form">
+              <div className="input-group">
+                <input
+                  type="password"
+                  placeholder="Masukkan password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="password-input"
+                  autoFocus
+                />
+              </div>
+              
+              {error && <div className="error-message">{error}</div>}
+              
+              <button type="submit" className="submit-btn">
+                Unlock
+              </button>
+            </form>
+
+            <div className="auth-footer">
+              <p>Password adalah yang kamu set di bot WhatsApp</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!comicData) {
+    return (
+      <div className="comic-landing">
+        <div className="loading-container">
+          <div className="spinner"></div>
+          <p>Memuat data comic...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="comic-landing">
+      <div className="hero-section">
+        <div className="hero-backdrop" style={{ backgroundImage: `url(${comicData.thumbnailUrl})` }}></div>
+        <div className="hero-content">
+          <div className="hero-thumbnail">
+            <img src={comicData.thumbnailUrl} alt={comicData.title} />
+            <div className="type-badge">{comicData.type}</div>
+          </div>
+          
+          <div className="hero-info">
+            <h1 className="comic-title">{comicData.title}</h1>
+            {comicData.indonesiaTitle && (
+              <h2 className="comic-subtitle">{comicData.indonesiaTitle}</h2>
+            )}
+            
+            <div className="meta-info">
+              <div className="meta-item">
+                <span className="meta-label">Author:</span>
+                <span className="meta-value">{comicData.author}</span>
+              </div>
+              <div className="meta-item">
+                <span className="meta-label">Status:</span>
+                <span className={`meta-value status-${comicData.status.toLowerCase()}`}>
+                  {comicData.status}
+                </span>
+              </div>
+              <div className="meta-item">
+                <span className="meta-label">Total Chapters:</span>
+                <span className="meta-value">{comicData.chapters.length}</span>
+              </div>
+            </div>
+
+            <div className="genre-tags">
+              {comicData.genre.map((g, i) => (
+                <span key={i} className="genre-tag">{g}</span>
+              ))}
+            </div>
+
+            <div className="synopsis">
+              <h3>Synopsis</h3>
+              <p>{comicData.synopsis}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="chapters-section">
+        <div className="chapters-header">
+          <h2>Chapters</h2>
+          
+          <div className="chapters-controls">
+            <div className="search-box">
+              <input
+                type="text"
+                placeholder="Search chapters..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+              />
+            </div>
+            
+            <button 
+              className="sort-btn"
+              onClick={() => setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')}
+            >
+              {sortOrder === 'asc' ? '↑ Oldest First' : '↓ Latest First'}
+            </button>
+          </div>
+        </div>
+
+        <div className="chapters-list">
+          {sortedChapters.length === 0 ? (
+            <div className="no-results">
+              <p>No chapters found</p>
+            </div>
+          ) : (
+            sortedChapters.map((chapter, index) => (
+              <div 
+                key={index} 
+                className="chapter-item"
+                onClick={() => handleReadChapter(chapter.slug)}
+              >
+                <div className="chapter-info">
+                  <div className="chapter-number">{chapter.chapter}</div>
+                  <div className="chapter-meta">
+                    <span className="chapter-date">{chapter.date}</span>
+                    <span className="chapter-views">{chapter.views}</span>
+                  </div>
+                </div>
+                <div className="chapter-action">
+                  <span className="read-btn">Read →</span>
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/modules/comic/ComicReader.css

@@ -0,0 +1,494 @@
+.comic-reader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: #0a0a0a;
+  color: #fff;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.reader-loading,
+.reader-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  gap: 1.5rem;
+}
+
+.reader-error .error-icon {
+  font-size: 4rem;
+}
+
+.reader-error h2 {
+  margin: 0;
+  font-size: 2rem;
+}
+
+.reader-error p {
+  margin: 0;
+  opacity: 0.7;
+}
+
+.reader-error button {
+  margin-top: 1rem;
+  padding: 0.75rem 2rem;
+  background: #667eea;
+  border: none;
+  border-radius: 8px;
+  color: white;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.reader-error button:hover {
+  background: #5568d3;
+  transform: translateY(-2px);
+}
+
+.reader-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  background: rgba(0, 0, 0, 0.9);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  position: relative;
+  z-index: 100;
+  transition: transform 0.3s;
+}
+
+.comic-reader.hide-controls .reader-header {
+  transform: translateY(-100%);
+}
+
+.back-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;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.back-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.reader-title {
+  flex: 1;
+  text-align: center;
+  padding: 0 2rem;
+}
+
+.reader-title h1 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.page-indicator {
+  font-size: 0.85rem;
+  opacity: 0.7;
+}
+
+.reader-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.reader-actions button {
+  width: 40px;
+  height: 40px;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+  color: white;
+  font-size: 1.2rem;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.reader-actions button:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.page-jump-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 200;
+  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;
+}
+
+.page-jump-content h3 {
+  margin: 0 0 1rem 0;
+  font-size: 1.25rem;
+}
+
+.page-jump-content input {
+  width: 100%;
+  padding: 0.75rem;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+  color: white;
+  font-size: 1rem;
+  margin-bottom: 1rem;
+}
+
+.page-jump-content input:focus {
+  outline: none;
+  border-color: #667eea;
+}
+
+.page-jump-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.page-jump-actions button {
+  flex: 1;
+  padding: 0.75rem;
+  border: none;
+  border-radius: 8px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.page-jump-actions button:first-child {
+  background: #667eea;
+  color: white;
+}
+
+.page-jump-actions button:first-child:hover {
+  background: #5568d3;
+}
+
+.page-jump-actions button:last-child {
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+}
+
+.page-jump-actions button:last-child:hover {
+  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;
+  background: #000;
+}
+
+.scroll-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2rem 0;
+  gap: 1rem;
+}
+
+.scroll-container img {
+  max-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;
+}
+
+.reader-footer {
+  padding: 1rem 1.5rem;
+  background: rgba(0, 0, 0, 0.9);
+  backdrop-filter: blur(10px);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  position: relative;
+  z-index: 100;
+  transition: transform 0.3s;
+}
+
+.comic-reader.hide-controls .reader-footer {
+  transform: translateY(100%);
+}
+
+.chapter-navigation {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.chapter-nav-btn {
+  padding: 0.75rem 1.5rem;
+  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-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+  white-space: nowrap;
+}
+
+.chapter-nav-btn:hover {
+  background: rgba(102, 126, 234, 0.4);
+  transform: translateY(-2px);
+}
+
+.page-slider {
+  flex: 1;
+  padding: 0 1rem;
+}
+
+.page-slider input[type="range"] {
+  width: 100%;
+  height: 6px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
+  outline: none;
+  -webkit-appearance: none;
+}
+
+.page-slider input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 18px;
+  height: 18px;
+  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;
+  background: #667eea;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.page-slider input[type="range"]::-moz-range-thumb:hover {
+  background: #5568d3;
+  transform: scale(1.2);
+}
+
+.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;
+}
+
+.comic-reader.hide-controls .shortcuts-hint {
+  opacity: 0;
+}
+
+@media (max-width: 768px) {
+  .reader-header {
+    padding: 0.75rem 1rem;
+  }
+
+  .reader-title h1 {
+    font-size: 1rem;
+  }
+
+  .reader-title {
+    padding: 0 1rem;
+  }
+
+  .view-mode-toggle {
+    right: 0.5rem;
+  }
+
+  .view-mode-toggle button {
+    width: 40px;
+    height: 40px;
+    font-size: 1.2rem;
+  }
+
+  .nav-btn {
+    width: 50px;
+    height: 50px;
+    font-size: 1.5rem;
+  }
+
+  .chapter-nav-btn {
+    padding: 0.5rem 1rem;
+    font-size: 0.8rem;
+  }
+
+  .double-pages {
+    flex-direction: column;
+  }
+
+  .double-pages img {
+    max-width: 100%;
+  }
+
+  .shortcuts-hint {
+    display: none;
+  }
+}

src/modules/comic/ComicReader.tsx

@@ -0,0 +1,369 @@
+import { useEffect, useState, useRef } from 'react';
+import { useParams, useNavigate, useLocation } from 'react-router-dom';
+import './ComicReader.css';
+
+interface ComicImage {
+  index: number;
+  imageUrl: string;
+}
+
+interface ChapterInfo {
+  slug: string;
+  chapter: string;
+}
+
+interface ReaderData {
+  slug: string;
+  title: string;
+  images: ComicImage[];
+  totalImages: number;
+  prevChapter?: ChapterInfo | null;
+  nextChapter?: ChapterInfo | null;
+  allChapters?: ChapterInfo[];
+}
+
+export function ComicReader() {
+  const { sessionId } = useParams();
+  const navigate = useNavigate();
+  const location = useLocation();  
+  const [data, setData] = useState<ReaderData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [viewMode, setViewMode] = useState<'single' | 'double' | 'scroll'>('scroll');
+  const [showControls, setShowControls] = useState(true);
+  const [showPageJump, setShowPageJump] = useState(false);
+  const [jumpPage, setJumpPage] = useState('');
+  const [ws, setWs] = useState<WebSocket | null>(null);  
+  const imageRefs = useRef<{ [key: number]: HTMLImageElement | null }>({});
+  const controlsTimeout = useRef<number | null>(null);
+
+  const password = location.state?.password || 
+    JSON.parse(sessionStorage.getItem(`comic_${sessionId}`) || '{}').password;
+
+  useEffect(() => {
+    if (!password) {
+      setError('Unauthorized access');
+      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 = () => {
+      websocket.send(JSON.stringify({
+        type: 'request_comic_data',
+        sessionId,
+        password
+      }));
+    };
+
+    websocket.onmessage = (event) => {
+      const message = JSON.parse(event.data);
+      
+      if (message.type === 'comic_data_response') {
+        if (message.success) {
+          setData(message.data);
+          setLoading(false);
+        } else {
+          setError(message.error || 'Failed to load chapter');
+          setLoading(false);
+        }
+      }
+    };
+
+    websocket.onerror = () => {
+      setError('WebSocket connection failed');
+      setLoading(false);
+    };
+
+    setWs(websocket);
+
+    return () => {
+      websocket.close();
+    };
+  }, [sessionId, password]);
+
+  useEffect(() => {
+    const resetTimeout = () => {
+      if (controlsTimeout.current) {
+        clearTimeout(controlsTimeout.current);
+      }
+      setShowControls(true);
+      controlsTimeout.current = window.setTimeout(() => {
+        setShowControls(false);
+      }, 3000);
+    };
+
+    const handleMove = () => resetTimeout();
+    
+    window.addEventListener('mousemove', handleMove);
+    window.addEventListener('touchstart', handleMove);
+
+    return () => {
+      window.removeEventListener('mousemove', handleMove);
+      window.removeEventListener('touchstart', handleMove);
+      if (controlsTimeout.current) {
+        clearTimeout(controlsTimeout.current);
+      }
+    };
+  }, []);
+
+  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();
+    };
+
+    window.addEventListener('keydown', handleKeyPress);
+    return () => window.removeEventListener('keydown', handleKeyPress);
+  }, [currentPage, data]);
+
+  useEffect(() => {
+    if (viewMode === 'scroll' && imageRefs.current[currentPage]) {
+      imageRefs.current[currentPage]?.scrollIntoView({ 
+        behavior: 'smooth', 
+        block: 'center' 
+      });
+    }
+  }, [currentPage, viewMode]);
+
+  const nextPage = () => {
+    if (!data) return;
+    if (currentPage < data.totalImages) {
+      setCurrentPage(currentPage + 1);
+    } else if (data.nextChapter) {
+      handleChapterNavigation(data.nextChapter.slug);
+    }
+  };
+
+  const prevPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    } else if (data?.prevChapter) {
+      handleChapterNavigation(data.prevChapter.slug);
+    }
+  };
+
+  const handleChapterNavigation = (chapterSlug: string) => {
+    const newSessionId = `chapter_${Date.now()}_${chapterSlug}`;
+    navigate(`/read/${newSessionId}`, {
+      state: {
+        chapterSlug,
+        password,
+        comicTitle: data?.title
+      }
+    });
+  };
+
+  const handlePageJump = () => {
+    const page = parseInt(jumpPage);
+    if (page >= 1 && page <= (data?.totalImages || 1)) {
+      setCurrentPage(page);
+      setShowPageJump(false);
+      setJumpPage('');
+    }
+  };
+
+  const toggleFullscreen = () => {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+    } else {
+      document.exitFullscreen();
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="reader-loading">
+        <div className="spinner"></div>
+        <p>Loading chapter...</p>
+      </div>
+    );
+  }
+
+  if (error || !data) {
+    return (
+      <div className="reader-error">
+        <div className="error-icon">⚠️</div>
+        <h2>Error</h2>
+        <p>{error || 'Failed to load chapter'}</p>
+        <button onClick={() => navigate(-1)}>Go Back</button>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`comic-reader ${viewMode}-mode ${!showControls ? 'hide-controls' : ''}`}>
+      <div className="reader-header">
+        <button className="back-btn" onClick={() => navigate(-1)}>
+          ← Back
+        </button>
+        
+        <div className="reader-title">
+          <h1>{data.title}</h1>
+          <span className="page-indicator">
+            Page {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>
+      </div>
+      {showPageJump && (
+        <div className="page-jump-modal" onClick={() => setShowPageJump(false)}>
+          <div className="page-jump-content" onClick={(e) => e.stopPropagation()}>
+            <h3>Jump to Page</h3>
+            <input
+              type="number"
+              min="1"
+              max={data.totalImages}
+              value={jumpPage}
+              onChange={(e) => setJumpPage(e.target.value)}
+              placeholder={`1-${data.totalImages}`}
+              autoFocus
+              onKeyPress={(e) => e.key === 'Enter' && handlePageJump()}
+            />
+            <div className="page-jump-actions">
+              <button onClick={handlePageJump}>Go</button>
+              <button onClick={() => setShowPageJump(false)}>Cancel</button>
+            </div>
+          </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>
+            <img
+              src={data.images[currentPage - 1]?.imageUrl}
+              alt={`Page ${currentPage}`}
+              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>';
+              }}
+            />
+            <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 className="reader-footer">
+        <div className="chapter-navigation">
+          {data.prevChapter && (
+            <button
+              className="chapter-nav-btn"
+              onClick={() => handleChapterNavigation(data.prevChapter!.slug)}
+            >
+              ← {data.prevChapter.chapter}
+            </button>
+          )}
+          
+          <div className="page-slider">
+            <input
+              type="range"
+              min="1"
+              max={data.totalImages}
+              value={currentPage}
+              onChange={(e) => setCurrentPage(parseInt(e.target.value))}
+            />
+          </div>
+
+          {data.nextChapter && (
+            <button
+              className="chapter-nav-btn"
+              onClick={() => handleChapterNavigation(data.nextChapter!.slug)}
+            >
+              {data.nextChapter.chapter} →
+            </button>
+          )}
+        </div>
+      </div>
+      <div className="shortcuts-hint">
+        ← → Navigate | Home/End | F Fullscreen
+      </div>
+    </div>
+  );
+}

src/server/websocket.ts

@@ -7,8 +7,17 @@ interface Session {
   ws?: ServerWebSocket;
 }
 
-const sessions = new Map<string, Session>();
+interface ComicSession {
+  sessionId: string;
+  sender: string;
+  password: string;
+  data: any;
+  createdAt: number;
+  expiresAt: number;
+}
 
+const sessions = new Map<string, Session>();
+const comicSessions = new Map<string, ComicSession>();
 const botConnections = new Set<ServerWebSocket>();
 
 export function handleWebSocketConnection(ws: ServerWebSocket) {
@@ -20,7 +29,7 @@ export function handleWebSocketConnection(ws: ServerWebSocket) {
 
   ws.send(JSON.stringify({
     type: 'connected',
-    message: 'Connected to registration server'
+    message: 'Connected to server'
   }));
 }
 
@@ -62,11 +71,112 @@ function handleMessage(ws: ServerWebSocket, message: any) {
       handleRegistrationSubmit(sessionId, message.data);
       break;
 
+    case 'comic_stream':
+    case 'chapter_stream':
+      handleComicStream(message);
+      break;
+
+    case 'request_comic_data':
+      handleComicDataRequest(ws, message);
+      break;
+
+    case 'validate_comic_password':
+      handlePasswordValidation(ws, message);
+      break;
+
     default:
       console.log('[WebSocket] Unknown message type:', type);
   }
 }
 
+function handleComicStream(message: any) {
+  const { sessionId, sender, password, data, type } = message;
+  const expiresAt = Date.now() + (24 * 60 * 60 * 1000);
+  
+  comicSessions.set(sessionId, {
+    sessionId,
+    sender,
+    password,
+    data,
+    createdAt: Date.now(),
+    expiresAt
+  });
+
+  console.log(`[WebSocket] Comic stream created: ${sessionId}, type: ${type}`);
+}
+
+function handleComicDataRequest(ws: ServerWebSocket, message: any) {
+  const { sessionId, password } = message;
+  
+  const comicSession = comicSessions.get(sessionId);
+  
+  if (!comicSession) {
+    ws.send(JSON.stringify({
+      type: 'comic_data_response',
+      success: false,
+      error: 'Session not found or expired'
+    }));
+    return;
+  }
+
+  if (comicSession.password !== password) {
+    ws.send(JSON.stringify({
+      type: 'comic_data_response',
+      success: false,
+      error: 'Invalid password'
+    }));
+    return;
+  }
+
+  if (Date.now() > comicSession.expiresAt) {
+    comicSessions.delete(sessionId);
+    ws.send(JSON.stringify({
+      type: 'comic_data_response',
+      success: false,
+      error: 'Session expired'
+    }));
+    return;
+  }
+
+  ws.send(JSON.stringify({
+    type: 'comic_data_response',
+    success: true,
+    data: comicSession.data,
+    expiresAt: comicSession.expiresAt
+  }));
+}
+
+function handlePasswordValidation(ws: ServerWebSocket, message: any) {
+  const { sessionId } = message;
+  
+  const comicSession = comicSessions.get(sessionId);
+  
+  if (!comicSession) {
+    ws.send(JSON.stringify({
+      type: 'password_validation_response',
+      success: false,
+      error: 'Session not found or expired'
+    }));
+    return;
+  }
+
+  if (Date.now() > comicSession.expiresAt) {
+    comicSessions.delete(sessionId);
+    ws.send(JSON.stringify({
+      type: 'password_validation_response',
+      success: false,
+      error: 'Session expired'
+    }));
+    return;
+  }
+
+  ws.send(JSON.stringify({
+    type: 'password_validation_response',
+    success: true,
+    requiresPassword: true
+  }));
+}
+
 function handleRegistrationSubmit(sessionId: string, data: any) {
   const session = sessions.get(sessionId);
   if (!session) {
@@ -138,10 +248,18 @@ function cleanup(ws: ServerWebSocket) {
 
 setInterval(() => {
   const now = Date.now();
+ 
   for (const [sessionId, session] of sessions.entries()) {
     if (now - session.createdAt > 600000) {
       sessions.delete(sessionId);
       console.log('[WebSocket] Cleaned up expired session:', sessionId);
     }
   }
-}, 60000);
+
+  for (const [sessionId, comicSession] of comicSessions.entries()) {
+    if (now > comicSession.expiresAt) {
+      comicSessions.delete(sessionId);
+      console.log('[WebSocket] Cleaned up expired comic session:', sessionId);
+    }
+  }
+}, 60 * 60 * 1000);