ItsSkaiya/WaifuBoard
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 8 Wiki Activity

new advanced search page

Browse Source
This commit is contained in:
lenafx
2026-01-12 17:39:43 +01:00
parent dbb3c3f924
commit eac5613c91
12 changed files with 2170 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
desktop/views/search.html Normal file
View File

@@ -0,0 +1,143 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Browse - WaifuBoard</title>
<link rel="stylesheet" href="/views/css/globals.css">
<link rel="stylesheet" href="/views/css/components/navbar.css">
<link rel="stylesheet" href="/views/css/search.css">
<link rel="stylesheet" href="/views/css/components/create-room.css"/>
<link rel="stylesheet" href="/views/css/components/titlebar.css"/>
<script src="/src/scripts/titlebar.js"></script>
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
</head>
<body>
<div class="app-layout">
<aside class="filters-sidebar" id="sidebar">
<div class="sidebar-header mobile-only" style="margin-bottom: 2rem; display:none;">
<h3 style="margin:0;">Filters</h3>
<button id="close-sidebar-mobile" style="background:none; border:none; color:white; font-size:1.5rem;"><i class="ri-close-line"></i></button>
</div>
<div class="filter-group">
<div class="mode-switcher">
<button class="mode-btn active" data-mode="anime">Anime</button>
<button class="mode-btn" data-mode="books">Manga</button>
</div>
</div>
<div class="filter-group" style="padding-bottom: 1.5rem; border-bottom: 1px solid var(--c-border-light); margin-bottom: 1.5rem;">
<label>Source</label>
<div class="custom-select">
<select id="source-select">
<option value="anilist">Anilist</option>
</select>
</div>
</div>
<div id="anilist-filters" style="display: flex; flex-direction: column; gap: 1.5rem;">
<div class="filter-group">
<label>Sort By</label>
<div class="custom-select">
<select id="filter-sort">
<option value="TRENDING_DESC">Trending</option>
<option value="POPULARITY_DESC">Popularity</option>
<option value="SCORE_DESC">Top Rated</option>
<option value="START_DATE_DESC">Newest</option>
</select>
</div>
</div>
<div class="filter-group">
<label>Season & Year</label>
<div style="display: flex; gap: 8px;">
<div class="custom-select" style="flex:1">
<select id="filter-season">
<option value="">Season</option>
<option value="WINTER">Winter</option>
<option value="SPRING">Spring</option>
<option value="SUMMER">Summer</option>
<option value="FALL">Fall</option>
</select>
</div>
<div class="custom-select" style="flex:1">
<select id="filter-year"><option value="">Year</option></select>
</div>
</div>
</div>
<div class="filter-group">
<label>Genre</label>
<div class="custom-select">
<select id="filter-genre"><option value="">All Genres</option></select>
</div>
</div>
<div class="filter-group">
<label>Status</label>
<div class="custom-select">
<select id="filter-status">
<option value="">Any Status</option>
<option value="RELEASING">Airing</option>
<option value="FINISHED">Finished</option>
<option value="NOT_YET_RELEASED">Upcoming</option>
</select>
</div>
</div>
<div class="filter-group">
<label>Format</label>
<div class="custom-select">
<select id="filter-format"><option value="">Any Format</option></select>
</div>
</div>
</div>
<div id="extension-filters" style="display: none; flex-direction: column; gap: 1.5rem;">
</div>
</aside>
<main class="main-view">
<div class="mobile-header-controls">
<button id="toggle-sidebar" class="icon-btn-plain">
<i class="ri-menu-2-line"></i>
</button>
<span class="mobile-title">Browse</span>
</div>
<div class="content-header">
<div class="header-left">
<h1 id="results-title">Trending Now</h1>
<span id="result-count">20 results</span>
</div>
<div class="search-container">
<i class="ri-search-line search-icon"></i>
<input type="text" id="main-search" placeholder="Search..." autocomplete="off">
<div id="search-loader" class="loader-spinner"></div>
</div>
</div>
<div id="results-grid" class="media-grid"></div>
<div class="loading-state" id="initial-loader" style="display: none;">
<div class="spinner"></div>
</div>
</main>
</div>
<div id="mobile-overlay" class="overlay-backdrop"></div>
<script src="/src/scripts/room-modal.js"></script>
<script src="/src/scripts/auth-guard.js"></script>
<script src="/src/scripts/settings.js"></script>
<script src="/src/scripts/search.js"></script>
</body>
</html>