Skip to content

Commit 0bf4d82

Browse files
Ate329Ate329
committed
hmmm
1 parent 33e9b0f commit 0bf4d82

2 files changed

Lines changed: 167 additions & 422 deletions

File tree

‎random.html‎

Lines changed: 54 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -160,114 +160,74 @@ <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-
<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>
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 -->
172170
</div>
171+
</div>
173172

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">
179-
<div>
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>
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>
182201
</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>
187202
</div>
188-
<div class="flex items-center justify-between mb-4">
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">
189207
<div>
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>
208+
<p class="font-semibold" style="color: var(--text-primary);">Studio</p>
209+
<p id="anime-studio" style="color: var(--text-secondary);">&nbsp;</p>
192210
</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">
199211
<div>
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>
212+
<p class="font-semibold" style="color: var(--text-primary);">Source</p>
213+
<p id="anime-source" style="color: var(--text-secondary);">&nbsp;</p>
202214
</div>
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>
215+
<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>
218+
</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>
236222
</div>
237223
</div>
238224
</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>
245225
</div>
246226
</div>
247227
</div>
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>
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>
271231
</div>
272232
</div>
273233
</main>

0 commit comments

Comments
 (0)