Files
SearcjGal-frontend/index.html
AdingApkgg 85b2a00da1 250709
2025-07-09 17:32:29 +08:00

188 lines
11 KiB
HTML

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Galgame 聚合搜索</title>
<meta
name="description"
content="一个聚合搜索 Galgame 的网站,支持多平台搜索"
/>
<meta name="keywords" content="Galgame, 搜索, 聚合搜索, 游戏" />
<meta name="author" content="Moe-Sakura" />
<meta property="og:title" content="Galgame 聚合搜索" />
<meta
property="og:description"
content="一个聚合搜索 Galgame 的网站,支持多平台搜索"
/>
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Galgame 聚合搜索" />
<link rel="shortcut icon" href="./gamepad-solid.svg" type="image/svg+xml" />
<link
fetchpriority="low"
href="https://registry.npmmirror.com/artalk/latest/files/dist/Artalk.css"
rel="stylesheet"
/>
<link
fetchpriority="low"
href="https://registry.npmmirror.com/lightgallery/latest/files/css/lightgallery.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="/src/style.css" fetchpriority="high" />
<link rel="stylesheet" href="https://registry.npmmirror.com/animate.css/latest/files/animate.min.css" fetchpriority="high" />
<link
rel="stylesheet"
href="https://registry.npmmirror.com/@fortawesome/fontawesome-free/latest/files/css/all.min.css"
fetchpriority="high"
/>
<script
importance="high"
src="https://registry.npmmirror.com/quicklink/latest/files/dist/quicklink.umd.js"
></script>
<script
async
importance="high"
src="https://registry.npmmirror.com/pace-js/latest/files/pace.min.js"
></script>
<link
href="https://registry.npmmirror.com/pace-js/latest/files/themes/blue/pace-theme-flash.css"
importance="high"
rel="stylesheet"
/>
</head>
<body>
<main class="flex-1 flex flex-col items-center justify-center min-h-screen">
<div
class="container mx-auto max-w-4xl bg-white/95 rounded-[8px] shadow-xl px-0 py-0 mt-0 z-10 relative flex flex-col transition-all duration-300"
>
<div class="relative px-0 pt-0 pb-0 border-b border-gray-100 overflow-hidden">
<img src="https://www.loliapi.com/acg/pc/" alt="随图" class="w-full object-contain object-center select-none pointer-events-none transition-all duration-300 hover:scale-105 hover:brightness-95" />
</div>
<div class="px-12 pt-6 pb-5 bg-gradient-to-r from-indigo-50 via-pink-50 to-yellow-50 text-center flex items-center justify-center min-h-[56px] transition-all duration-300">
<h1 class="text-2xl md:text-3xl font-extrabold text-indigo-700 drop-shadow-lg inline-flex items-center gap-2 md:gap-3 whitespace-nowrap">
<i class="fas fa-gamepad text-pink-400"></i>
Galgame 聚合搜索
</h1>
</div>
<form id="searchForm" class="flex flex-col gap-5 px-6 pt-6 pb-4 relative">
<div class="flex flex-col md:flex-row gap-2 md:gap-0 items-center w-full rounded-[8px]">
<div class="flex flex-col md:flex-row w-full items-stretch md:items-center gap-0">
<div class="relative flex-1 min-w-0 flex items-center">
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-indigo-400 pointer-events-none text-lg z-10"><i class="fas fa-keyboard"></i></span>
<input
type="text"
id="game"
name="game"
required
placeholder="游戏或补丁关键字词"
class="pl-10 pr-4 h-11 border border-gray-300 border-b-0 md:border-b md:border-r-0 rounded-t-[8px] md:rounded-l-[8px] md:rounded-tr-none md:rounded-bl-[8px] md:rounded-br-none focus:outline-none focus:ring-2 focus:ring-indigo-400 bg-gray-50 text-base shadow-sm transition w-full md:w-auto placeholder-gray-400 min-w-0 flex-1 rounded-b-none"
autocomplete="off"
spellcheck="false"
/>
</div>
<div class="relative flex items-center w-full md:max-w-[280px] md:w-[280px] mt-0 md:mt-0">
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-pink-400 pointer-events-none text-base z-10"><i class="fas fa-lock"></i></span>
<input
type="password"
id="zypassword"
name="zypassword"
placeholder="紫缘 Gal 密码(可选)"
class="pl-10 pr-16 h-11 border border-t-0 border-gray-300 md:border-l-0 md:border-t border-b-0 md:border-b rounded-b-[8px] md:rounded-none md:rounded-r-[8px] focus:outline-none focus:ring-2 focus:ring-pink-300 bg-gray-50 text-sm shadow-sm transition w-full min-w-0 md:w-auto md:flex-shrink md:flex-grow md:basis-1/3 placeholder-gray-400 rounded-t-none md:rounded-t-none md:rounded-b-none"
autocomplete="off"
spellcheck="false"
/>
<a
href="https://galzy.eu.org/"
target="_blank"
class="absolute right-1.5 top-1/2 -translate-y-1/2 text-xs text-pink-600 bg-pink-50 hover:bg-pink-100 hover:underline rounded-[6px] px-1.5 py-0.5 transition whitespace-nowrap shadow-sm border border-pink-200 h-[26px] flex items-center leading-[1.6] z-10"
>点我获取密码</a>
</div>
</div>
</div>
<div class="flex flex-col gap-2 w-full mt-4">
<button
type="submit"
id="searchBtn"
class="py-3 px-6 bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800 text-white font-bold transition-all flex items-center justify-center gap-3 shadow-md relative overflow-hidden disabled:bg-indigo-300 disabled:opacity-80 rounded-[8px] text-lg border-0 focus:ring-2 focus:ring-indigo-300"
disabled
>
<span id="progressBar" class="absolute left-0 top-0 h-full bg-pink-400/80 transition-all duration-300 z-0 opacity-0 w-0 rounded-[8px]"></span>
<span class="relative z-10 flex items-center gap-2">
<i class="fas fa-search"></i>
<span id="searchBtnText">开始搜索</span>
</span>
</button>
<div class="flex flex-row flex-wrap items-center gap-0 w-full justify-center select-none mt-2">
<div>
<input type="radio" id="gameMode" name="searchMode" value="game" class="hidden peer" checked />
<label for="gameMode" class="select-none cursor-pointer px-4 py-2 font-semibold text-xs flex items-center gap-1 transition-all duration-200 bg-white peer-checked:bg-indigo-600 peer-checked:text-white text-indigo-700 hover:bg-indigo-300 animate__animated animate__pulse animate__faster peer-checked:animate__tada rounded-l-[8px] border-0 shadow-sm"> <i class="fas fa-gamepad"></i>游戏</label>
</div>
<div>
<input type="radio" id="patchMode" name="searchMode" value="patch" class="hidden peer" />
<label for="patchMode" class="select-none cursor-pointer px-4 py-2 font-semibold text-xs flex items-center gap-1 transition-all duration-200 bg-white peer-checked:bg-pink-500 peer-checked:text-white text-pink-700 hover:bg-pink-300 animate__animated animate__pulse animate__faster peer-checked:animate__tada border-l border-gray-100 rounded-none shadow-sm"><i class="fas fa-wrench"></i>补丁</label>
</div>
<div>
<input type="checkbox" id="magicAccess" name="magicAccess" class="hidden peer" />
<label for="magicAccess" class="select-none cursor-pointer px-4 py-2 font-semibold text-xs flex items-center gap-1 transition-all duration-200 bg-white peer-checked:bg-yellow-400 peer-checked:text-white text-yellow-700 hover:bg-yellow-300 animate__animated animate__pulse animate__faster peer-checked:animate__tada border-l border-gray-100 rounded-r-[8px] shadow-sm"><i class="fas fa-hat-wizard"></i>魔搜</label>
</div>
</div>
</div>
</form>
<div class="error text-red-600 font-semibold px-12" id="error"></div>
<div class="results mt-2 px-6" id="results"></div>
<div class="footer text-xs text-gray-500 mt-4 text-center border-t border-gray-100 pt-4 px-12 pb-4 rounded-b-lg">
<p>
<span class="inline-flex items-center gap-1 mr-2"><i class="fas fa-eye"></i>访问:<span id="busuanzi_value_site_pv">null</span></span>
<span class="inline-flex items-center gap-1"><i class="fas fa-user"></i>访客:<span id="busuanzi_value_site_uv">null</span></span>
</p>
<div class="mt-3 inline-flex items-center gap-3 justify-center">
<span class="inline-flex items-center gap-1 text-xs text-gray-400 bg-gray-100 rounded-[8px] px-2 py-1 font-mono select-none">
<i class="fas fa-code-branch"></i>
2025/07/09 v15
</span>
<a
href="https://github.com/Moe-Sakura"
target="_blank"
class="inline-flex items-center gap-1 text-black border border-black bg-white/80 rounded-[8px] px-3 py-1 shadow font-semibold no-underline text-sm transition-all duration-200 hover:text-white hover:bg-black hover:underline hover:underline-offset-2 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-black/40"
style="text-decoration: none;"
>
<i class="fab fa-github"></i>
GitHub
</a>
</div>
</div>
</div>
</div>
<section class="w-full max-w-4xl mx-auto mt-8 mb-8">
<div
id="Comments"
class="bg-white/80 rounded-lg shadow p-4 md:p-6 transition-all duration-300"
></div>
</section>
</main>
<script
src="https://registry.npmmirror.com/instant.page/latest/files/instantpage.js"
type="module"
></script>
<script
fetchpriority="low"
src="https://registry.npmmirror.com/lightgallery/latest/files/lightgallery.min.js"
></script>
<script
fetchpriority="low"
src="https://registry.npmmirror.com/artalk/latest/files/dist/Artalk.js"
></script>
<script
fetchpriority="low"
src="https://registry.npmmirror.com/@artalk/plugin-lightbox/latest/files/dist/artalk-plugin-lightbox.js"
></script>
<script type="module" src="/src/main.js" fetchpriority="high"></script>
<script
async
src="https://registry.npmmirror.com/js-asuna/latest/files/js/bsz.pure.mini.js"
fetchpriority="low"
></script>
</body>
</html>