Skip to content

Commit fd34dd1

Browse files
Ate329Ate329
committed
fix some bugs
1 parent 0bf4d82 commit fd34dd1

2 files changed

Lines changed: 422 additions & 167 deletions

File tree

‎random.html‎

Lines changed: 94 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -160,74 +160,114 @@ <h1 class="text-3xl font-bold" style="color: var(--text-primary);">🎲 Random A
160160
<main class="max-w-7xl mx-auto px-4 py-8 flex-grow">
161161
<!-- Random Anime Picker Section -->
162162
<div id="picker-section" class="mb-8 animate-fade-in">
163-
<h1 class="text-4xl font-bold text-center mb-4" style="color: var(--text-primary);">Random Anime Picker</h1>
164-
<p class="text-center text-lg mb-8" style="color: var(--text-secondary);">Find your next favorite anime!</p>
165-
166-
<!-- Filter container -->
167-
<div id="filter-container" class="max-w-2xl mx-auto space-y-4 mb-8">
168-
<div id="genre-filters" class="flex flex-wrap gap-2 justify-center">
169-
<!-- Genre buttons will be inserted here by JS -->
163+
<div class="rounded-xl p-8" style="background-color: var(--bg-secondary); border: 2px solid var(--border-color); box-shadow: 0 4px 6px var(--shadow);">
164+
<div class="flex flex-wrap items-start justify-between gap-6 mb-6">
165+
<div>
166+
<h2 class="text-2xl font-bold" style="color: var(--text-primary);">Fine-tune your random pick</h2>
167+
<p class="text-sm mt-1" style="color: var(--text-secondary);">Use the same filters from the individual season page</p>
168+
</div>
169+
<button id="get-random-anime" class="px-6 py-3 rounded-lg font-semibold transition-colors bg-gray-900 text-white hover:bg-gray-800">
170+
🎲 Get Random Anime
171+
</button>
170172
</div>
171-
</div>
172173

173-
<div class="text-center">
174-
<button id="get-random-anime" class="px-8 py-4 rounded-xl font-semibold text-lg transition-all" style="background-color: var(--button-bg); color: var(--button-text); border: 1px solid var(--border-color);">
175-
🎲 Get Random Anime
176-
</button>
177-
</div>
178-
</div>
179-
180-
<!-- Random Anime Result Section -->
181-
<div id="result-section" class="hidden animate-fade-in">
182-
<div id="random-anime-card" class="rounded-xl shadow-lg overflow-hidden transition-all duration-300" style="background-color: var(--bg-secondary); border: 1px solid var(--border-color);">
183-
<div class="flex flex-col md:flex-row">
184-
<!-- Image Column -->
185-
<div class="md:w-1/3 relative">
186-
<img id="anime-image" src="https://via.placeholder.com/400x600?text=Loading..." alt="Anime Poster" class="w-full h-64 md:h-full object-cover">
187-
<div id="anime-season" class="absolute top-4 left-4 bg-gray-900 text-white px-3 py-2 rounded-lg text-sm font-medium">&nbsp;</div>
188-
<div id="anime-episodes" class="absolute top-4 right-4 bg-black/75 text-white px-3 py-2 rounded-lg text-sm font-medium">&nbsp;</div>
189-
</div>
190-
<!-- Details Column -->
191-
<div class="md:w-2/3 p-6 flex flex-col justify-between">
192-
<div>
193-
<h2 id="anime-title" class="text-3xl font-bold mb-2" style="color: var(--text-primary);">&nbsp;</h2>
194-
<div class="flex items-center mb-4">
195-
<div id="anime-score-container" class="flex items-center mr-6">
196-
<svg class="w-6 h-6 text-yellow-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
197-
<span id="anime-score" class="text-xl font-bold" style="color: var(--text-secondary);">&nbsp;</span>
198-
</div>
199-
<div id="anime-rating-container" class="flex items-center">
200-
<span id="anime-rating" class="px-3 py-1 rounded-full text-sm font-semibold" style="background-color: var(--bg-primary); color: var(--text-secondary);">&nbsp;</span>
201-
</div>
202-
</div>
203-
<p id="anime-synopsis" class="mb-4 text-base leading-relaxed max-h-48 overflow-y-auto" style="color: var(--text-secondary);">&nbsp;</p>
204-
</div>
205-
<div class="pt-4 mt-4" style="border-top: 1px solid var(--border-color);">
206-
<div class="grid grid-cols-2 gap-4 text-sm">
174+
<div class="grid gap-8 lg:grid-cols-2">
175+
<!-- Content Filters + Rating -->
176+
<div class="space-y-6">
177+
<div class="rounded-lg p-4" style="background-color: var(--bg-tertiary); border: 1px solid var(--border-color);">
178+
<div class="flex items-center justify-between mb-4">
207179
<div>
208-
<p class="font-semibold" style="color: var(--text-primary);">Studio</p>
209-
<p id="anime-studio" style="color: var(--text-secondary);">&nbsp;</p>
180+
<h3 class="font-semibold" style="color: var(--text-primary);">Show Mature Content</h3>
181+
<p class="text-sm" style="color: var(--text-secondary);">Include anime tagged as adult content</p>
210182
</div>
183+
<label class="relative inline-flex items-center cursor-pointer">
184+
<input type="checkbox" id="picker-hentai-toggle" class="sr-only peer">
185+
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-gray-900"></div>
186+
</label>
187+
</div>
188+
<div class="flex items-center justify-between mb-4">
211189
<div>
212-
<p class="font-semibold" style="color: var(--text-primary);">Source</p>
213-
<p id="anime-source" style="color: var(--text-secondary);">&nbsp;</p>
190+
<h3 class="font-semibold" style="color: var(--text-primary);">Hide Not Rated</h3>
191+
<p class="text-sm" style="color: var(--text-secondary);">Ignore anime without community scores</p>
214192
</div>
193+
<label class="relative inline-flex items-center cursor-pointer">
194+
<input type="checkbox" id="picker-not-rated-toggle" class="sr-only peer" checked>
195+
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-gray-900"></div>
196+
</label>
197+
</div>
198+
<div class="flex items-center justify-between">
215199
<div>
216-
<p class="font-semibold" style="color: var(--text-primary);">Genres</p>
217-
<p id="anime-genres" style="color: var(--text-secondary);">&nbsp;</p>
200+
<h3 class="font-semibold" style="color: var(--text-primary);">Japanese Anime Only</h3>
201+
<p class="text-sm" style="color: var(--text-secondary);">Exclude non-Japanese productions</p>
218202
</div>
219-
<div>
220-
<p class="font-semibold" style="color: var(--text-primary);">Themes</p>
221-
<p id="anime-themes" style="color: var(--text-secondary);">&nbsp;</p>
203+
<label class="relative inline-flex items-center cursor-pointer">
204+
<input type="checkbox" id="picker-japanese-toggle" class="sr-only peer" checked>
205+
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-gray-900"></div>
206+
</label>
207+
</div>
208+
</div>
209+
210+
<div class="rounded-lg p-4" style="background-color: var(--bg-tertiary); border: 1px solid var(--border-color);">
211+
<label class="block text-sm font-semibold mb-2" style="color: var(--text-primary);">
212+
Minimum Rating: <span id="rating-display" class="font-bold">0.0</span>
213+
</label>
214+
<input type="range" id="random-rating" min="0" max="10" step="0.1" value="0" class="w-full accent-gray-900">
215+
<div class="flex justify-between text-xs mt-2" style="color: var(--text-secondary);">
216+
<span>0.0</span>
217+
<span>5.0</span>
218+
<span>10.0</span>
219+
</div>
220+
</div>
221+
</div>
222+
223+
<!-- Genre Filter -->
224+
<div>
225+
<div class="flex items-center justify-between mb-3">
226+
<h3 class="font-semibold" style="color: var(--text-primary);">Filter by Genre</h3>
227+
<div class="flex items-center gap-2">
228+
<span class="text-sm" style="color: var(--text-secondary);">Filter mode:</span>
229+
<div class="flex rounded-lg overflow-hidden" style="border: 1px solid var(--border-color);">
230+
<button id="filter-mode-or" class="filter-mode-btn px-3 py-1 text-sm font-medium bg-gray-900 text-white">
231+
OR
232+
</button>
233+
<button id="filter-mode-and" class="filter-mode-btn px-3 py-1 text-sm font-medium bg-white text-gray-700 hover:bg-gray-50">
234+
AND
235+
</button>
222236
</div>
223237
</div>
224238
</div>
239+
<p id="filter-mode-description" class="text-xs mb-4" style="color: var(--text-secondary);">
240+
Show anime with <strong>any</strong> of the selected genres
241+
</p>
242+
<div id="genre-filters" class="flex flex-wrap gap-2">
243+
<!-- Genre buttons will be inserted here -->
244+
</div>
225245
</div>
226246
</div>
227247
</div>
228-
<div id="controls-section" class="flex justify-center space-x-4 mt-8">
229-
<button id="get-another-button" class="px-6 py-3 rounded-xl font-semibold transition-all" style="background-color: var(--button-bg); color: var(--button-text); border: 1px solid var(--border-color);">🎲 Get Another</button>
230-
<button id="back-button" class="px-6 py-3 rounded-xl font-semibold transition-all" style="background-color: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-color);">← Back to Picker</button>
248+
</div>
249+
250+
<!-- Random Anime Result -->
251+
<div id="random-result-section" class="hidden animate-fade-in">
252+
<div class="max-w-5xl mx-auto">
253+
<!-- Loading Indicator -->
254+
<div id="random-loading" class="hidden text-center py-16 rounded-xl mb-6" style="background-color: var(--bg-secondary); border: 2px solid var(--border-color);">
255+
<div class="inline-block animate-spin rounded-full h-16 w-16 border-4 border-gray-200 border-t-blue-600 mb-4"></div>
256+
<p class="text-xl font-semibold" style="color: var(--text-secondary);">Finding a random anime...</p>
257+
</div>
258+
259+
<!-- Result Card -->
260+
<div id="random-result-card"></div>
261+
262+
<!-- Action Buttons -->
263+
<div class="mt-6 flex gap-4 justify-center">
264+
<button id="get-another-random" class="px-6 py-2.5 rounded-lg font-medium transition-colors hover:opacity-80" style="background-color: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border-color);">
265+
🎲 Get Another
266+
</button>
267+
<button id="close-random" class="px-6 py-2.5 rounded-lg font-medium transition-colors hover:opacity-80" style="background-color: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border-color);">
268+
← Back to Picker
269+
</button>
270+
</div>
231271
</div>
232272
</div>
233273
</main>

0 commit comments

Comments
 (0)