added flashbang mode

src/components/ComicCard.astro

@@ -9,28 +9,47 @@ interface Props {
 
 const { comic } = Astro.props;
 
-// Determine if the file is AVIF based on the URL
-const isAvif = comic.md_comics.md_covers[0]?.b2key.endsWith('.avif');
-
 const coverUrl = comic.md_comics.md_covers[0]
   ? `https://meo.comick.pictures/${comic.md_comics.md_covers[0].b2key}`
   : '/placeholder.png';
+
+// Determine if the file is AVIF based on the URL
+const isAvif = comic.md_comics.md_covers[0]?.b2key.endsWith('.avif');
+
+// Define standard image dimensions
+const IMG_WIDTH = 250;
+const IMG_HEIGHT = 350;
+
+// Generate optimized image URL with dimensions
+const optimizedCoverUrl = coverUrl.includes('meo.comick.pictures') 
+  ? `${coverUrl}?width=${IMG_WIDTH}&quality=80` 
+  : coverUrl;
 ---
+
 <div class="comic-card">
   <a href={`https://comick.io/comic/${comic.md_comics.slug}`} target="_blank" rel="noopener noreferrer">
+    <div class="image-container">
       {!isAvif ? (
-      // Infer size only for non-AVIF files
+        <Image 
-      <Image src={coverUrl} alt={comic.md_comics.title} inferSize={true} />
+          src={optimizedCoverUrl} 
-    ) : (
-      // Provide fallback handling for AVIF files
-      <img
-        src={coverUrl}
           alt={comic.md_comics.title}
-        width="300" // Default width
+          width={IMG_WIDTH}
-        height="300" // Default height
+          height={IMG_HEIGHT}
-        style={{ objectFit: 'cover' }}
+          loading="lazy"
+        />
+      ) : (
+        <img
+          src={optimizedCoverUrl}
+          alt={comic.md_comics.title}
+          width={IMG_WIDTH}
+          height={IMG_HEIGHT}
+          loading="lazy"
+          onError={(e) => {
+            e.currentTarget.src = '/placeholder.png';
+          }}
         />
       )}
+    </div>
     <div class="comic-info">
       <h3>{comic.md_comics.title}</h3>
       <p>Chapter {comic.chap}</p>
@@ -39,12 +58,13 @@ const coverUrl = comic.md_comics.md_covers[0]
   </a>
 </div>
 
-<style>
+<style define:vars={{ imgWidth: `${IMG_WIDTH}px`, imgHeight: `${IMG_HEIGHT}px` }}>
   .comic-card {
-    background: #23262d;
+    background: var(--bg-secondary);
     border-radius: 8px;
     overflow: hidden;
-    transition: transform 0.2s;
+    transition: transform 0.2s, background-color 0.3s;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   }
 
   .comic-card:hover {
@@ -53,13 +73,26 @@ const coverUrl = comic.md_comics.md_covers[0]
 
   .comic-card a {
     text-decoration: none;
-    color: white;
+    color: var(--text-color);
   }
 
-  .comic-card img {
+  .image-container {
+    width: var(--imgWidth);
+    height: var(--imgHeight);
+    position: relative;
+    overflow: hidden;
+    background: var(--bg-hover);
+  }
+
+  .image-container img {
     width: 100%;
-    height: 300px;
+    height: 100%;
     object-fit: cover;
+    transition: transform 0.3s ease;
+  }
+
+  .comic-card:hover .image-container img {
+    transform: scale(1.05);
   }
 
   .comic-info {
@@ -70,12 +103,19 @@ const coverUrl = comic.md_comics.md_covers[0]
     margin: 0;
     font-size: 1.1rem;
     margin-bottom: 0.5rem;
+    color: var(--text-color);
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .comic-info p {
     margin: 0;
     font-size: 0.9rem;
-    color: #888;
+    color: var(--text-color);
+    opacity: 0.7;
   }
 
   .date {

src/components/LanguageSelector.astro

@@ -1,5 +1,5 @@
 ---
-import { availableLanguages, availableContentTypes } from '../lib/api';
+import { availableLanguages, availableContentTypes, getLanguageName } from '../lib/api';
 
 interface Props {
   currentLang: string;
@@ -12,13 +12,17 @@ const { currentLang, currentType } = Astro.props;
 <div class="filters">
   <select name="language" id="language">
     {availableLanguages.map(lang => (
-      <option value={lang} selected={lang === currentLang}>{lang.toUpperCase()}</option>
+      <option value={lang} selected={lang === currentLang}>
+        {getLanguageName(lang)}
+      </option>
     ))}
   </select>
 
   <select name="contentType" id="contentType">
     {availableContentTypes.map(type => (
-      <option value={type} selected={type === currentType}>{type.toUpperCase()}</option>
+      <option value={type} selected={type === currentType}>
+        {type.toUpperCase()}
+      </option>
     ))}
   </select>
 </div>
@@ -47,9 +51,9 @@ const { currentLang, currentType } = Astro.props;
   select {
     padding: 0.5rem 1rem;
     border-radius: 4px;
-    background: #23262d;
+    background: var(--bg-secondary);
-    color: white;
+    color: var(--text-color);
-    border: 1px solid #444;
+    border: 1px solid var(--bg-hover);
   }
 
   select:focus {

src/components/RSSLink.astro

@@ -21,9 +21,9 @@ const { lang, type } = Astro.props;
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    color: white;
+    color: var(--text-color);
     text-decoration: none;
-    background: #23262d;
+    background: var(--bg-secondary);
     padding: 0.5rem 1rem;
     border-radius: 4px;
     transition: all 0.2s;
@@ -31,6 +31,7 @@ const { lang, type } = Astro.props;
 
   .rss-link:hover {
     background: rgb(var(--accent));
+    color: white;
   }
 
   svg {

src/components/ThemeToggle.astro

@@ -0,0 +1,82 @@
+---
+---
+<button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
+  <svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+    <circle cx="12" cy="12" r="5"></circle>
+    <line x1="12" y1="1" x2="12" y2="3"></line>
+    <line x1="12" y1="21" x2="12" y2="23"></line>
+    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+    <line x1="1" y1="12" x2="3" y2="12"></line>
+    <line x1="21" y1="12" x2="23" y2="12"></line>
+    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+  </svg>
+  <svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+  </svg>
+</button>
+
+<script>
+  const setTheme = (theme: 'light' | 'dark') => {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('theme', theme);
+  };
+
+  // Initialize theme
+  const savedTheme = localStorage.getItem('theme') as 'light' | 'dark' | null;
+  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  const initialTheme = savedTheme || (prefersDark ? 'dark' : 'light');
+  setTheme(initialTheme);
+
+  // Handle toggle click
+  document.getElementById('theme-toggle')?.addEventListener('click', () => {
+    const currentTheme = document.documentElement.getAttribute('data-theme');
+    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+    setTheme(newTheme);
+  });
+</script>
+
+<style>
+  .theme-toggle {
+    background: none;
+    border: none;
+    padding: 0.5rem;
+    cursor: pointer;
+    color: var(--text-color);
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    z-index: 100;
+    background: var(--bg-secondary);
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.3s ease;
+  }
+
+  .theme-toggle:hover {
+    background: var(--bg-hover);
+  }
+
+  .sun-icon,
+  .moon-icon {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    transition: transform 0.5s ease, opacity 0.5s ease;
+  }
+
+  :global([data-theme="dark"]) .sun-icon {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+
+  :global([data-theme="light"]) .moon-icon {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+</style>

src/layouts/Layout.astro

@@ -1,4 +1,6 @@
 ---
+import ThemeToggle from '../components/ThemeToggle.astro';
+
 interface Props {
 	title: string;
 }
@@ -17,6 +19,7 @@ const { title } = Astro.props;
 		<title>{title}</title>
 	</head>
 	<body>
+		<ThemeToggle />
 		<slot />
 	</body>
 </html>
@@ -32,10 +35,48 @@ const { title } = Astro.props;
 			white 60%
 		);
 	}
+
+	/* Light theme */
+	:root[data-theme="light"] {
+		--bg-primary: #ffffff;
+		--bg-secondary: #f0f0f0;
+		--bg-hover: #e0e0e0;
+		--text-color: #13151a;
+		--card-bg: #f5f5f5;
+	}
+
+	/* Dark theme */
+	:root[data-theme="dark"] {
+		--bg-primary: #13151a;
+		--bg-secondary: #23262d;
+		--bg-hover: #2a2d35;
+		--text-color: #ffffff;
+		--card-bg: #23262d;
+	}
+
+	/* Default to dark theme if no data-theme is set */
+	:root:not([data-theme]) {
+		--bg-primary: #13151a;
+		--bg-secondary: #23262d;
+		--bg-hover: #2a2d35;
+		--text-color: #ffffff;
+		--card-bg: #23262d;
+	}
+
 	html {
 		font-family: system-ui, sans-serif;
-		background: #13151a;
+		background-color: var(--bg-primary);
+		color: var(--text-color);
 	}
+
+	body {
+		margin: 0;
+		min-height: 100vh;
+		background-color: var(--bg-primary);
+		color: var(--text-color);
+		transition: background-color 0.3s ease, color 0.3s ease;
+	}
+
 	code {
 		font-family:
 			Menlo,

src/lib/api.ts

@@ -1,13 +1,24 @@
 import type { Comic } from './types';
 
-const languages = new Set(["en", "fr", "es", "it", "pl", "tr", "ja", "zh", "sv"]);
+const languageMap = {
+  "en": "English",
+  "fr": "French",
+  "es": "Spanish",
+  "it": "Italian",
+  "pl": "Polish",
+  "tr": "Turkish",
+  "ja": "Japanese",
+  "zh": "Chinese",
+  "sv": "Swedish"
+} as const;
+
+const languages = new Set(Object.keys(languageMap));
 const contentTypes = new Set(["sfw", "nsfw"]);
-const urlBase = "https://api.comick.fun/chapter";  // Removed trailing slash
+const urlBase = "https://api.comick.fun/chapter";
 
 export async function fetchComics(language: string = 'en', contentType: string = 'sfw'): Promise<Comic[]> {
   try {
     const apiUrl = `${urlBase}?lang=${language}&page=1&order=new&accept_erotic_content=${contentType === 'nsfw'}`;
-    // console.log('Fetching from:', apiUrl); // Debug log
     
     const response = await fetch(apiUrl, {
       headers: {
@@ -21,7 +32,6 @@ export async function fetchComics(language: string = 'en', contentType: string =
     }
 
     const data = await response.json();
-    // console.log('API response:', data); // Debug log
 
     if (!Array.isArray(data)) {
       console.error('Unexpected API response format:', data);
@@ -43,5 +53,10 @@ export function isValidContentType(type: string): boolean {
   return contentTypes.has(type);
 }
 
+export function getLanguageName(code: string): string {
+  return languageMap[code as keyof typeof languageMap] || code.toUpperCase();
+}
+
 export const availableLanguages = Array.from(languages);
 export const availableContentTypes = Array.from(contentTypes);
+export { languageMap };

src/pages/[lang]/[type].astro

@@ -28,7 +28,7 @@ let error: string | null = null;
 
 try {
   comics = await fetchComics(lang, type);
-  console.log(`Fetched ${comics.length} comics`); // Debug log
+  console.log(`Fetched ${comics.length} comics`);
 } catch (e) {
   console.error('Failed to fetch comics:', e);
   error = e instanceof Error ? e.message : 'Failed to fetch comics';
@@ -70,7 +70,7 @@ try {
     padding: 1rem;
     width: 1200px;
     max-width: calc(100% - 2rem);
-    color: white;
+    color: var(--text-color);
     font-size: 20px;
     line-height: 1.6;
   }
@@ -105,7 +105,7 @@ try {
   .no-comics {
     text-align: center;
     padding: 2rem;
-    background: #23262d;
+    background: var(--bg-secondary);
     border-radius: 8px;
   }
 
@@ -119,7 +119,8 @@ try {
 
   .debug-info {
     font-size: 0.8rem;
-    color: #666;
+    color: var(--text-color);
+    opacity: 0.7;
     margin-top: 1rem;
   }
 </style>