avhub/web/index.html
2025-03-11 17:53:31 +08:00

187 lines
9.6 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AvHub - 成人资源管理平台</title>
<link rel="icon" href="imgs/favicon.ico">
<link href="https://testingcf.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link href="https://testingcf.jsdelivr.net/npm/hls.js@1.4.12/dist/hls.min.js" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-slate-900 to-slate-800 min-h-screen text-gray-100 transition-colors duration-300">
<!-- 在 body 标签下添加 logo -->
<div class="logo-container">
<a href="/" class="logo">
<span class="logo-av">Av</span><span class="logo-hub">Hub</span>
</a>
</div>
<!-- 修改设置区域 -->
<div class="settings-container">
<!-- 语言切换按钮 -->
<button id="languageToggle" class="settings-button">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M12.87 15.07l-2.54-2.51.03-.03A17.52 17.52 0 0014.07 6H17V4h-7V2H8v2H1v2h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"/>
</svg>
</button>
<!-- 主题切换按钮 -->
<button id="themeToggle" class="settings-button theme-toggle">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/>
</svg>
</button>
</div>
<!-- 主要内容区域 -->
<main class="container mx-auto px-4 pt-20 pb-8">
<!-- 标签页导航 -->
<div class="flex justify-center mb-8">
<div class="tab-container">
<button onclick="switchTab('search')"
class="tab-button active"
data-tab="search">
<span class="tab-text" data-zh="AV搜索" data-en="AV Search">AV搜索</span>
</button>
<button onclick="switchTab('collections')"
class="tab-button"
data-tab="collections">
<span class="tab-text" data-zh="里番合集" data-en="Anime Collection">里番合集</span>
</button>
<button onclick="switchTab('player')"
class="tab-button"
data-tab="player">
<span class="tab-text" data-zh="视频播放" data-en="Video Player">视频播放</span>
</button>
</div>
</div>
<!-- AV搜索区域 -->
<div id="searchTab" class="tab-content">
<!-- 搜索框 -->
<div class="max-w-2xl mx-auto mb-8">
<div class="flex gap-2">
<input type="text" id="searchInput"
class="flex-1 px-4 py-2"
data-zh-placeholder="请输入AV番号..."
data-en-placeholder="Enter AV number..."
placeholder="请输入AV番号...">
<button onclick="searchMagnet()"
class="search-button px-6 py-2 min-w-[100px]">
<span class="tab-text" data-zh="搜索" data-en="Search">搜索</span>
</button>
</div>
</div>
<!-- 封面图片区域 -->
<div id="coverImageContainer" class="cover-image-container hidden">
<img id="coverImage" class="cover-image" src="" alt="封面图片">
</div>
<!-- 大图预览模态框 -->
<div id="imageModal" class="image-modal hidden">
<div class="modal-content">
<img id="modalImage" class="modal-image" src="" alt="大图预览">
<button id="closeModal" class="modal-close">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
<!-- 排序选项 -->
<div class="max-w-4xl mx-auto mb-4 flex justify-end">
<button id="sortButton" class="settings-button theme-toggle" onclick="showSortMenu(this)" value="date-desc">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path d="M3 3a1 1 0 000 2h11a1 1 0 100-2H3zM3 7a1 1 0 000 2h7a1 1 0 100-2H3zM3 11a1 1 0 100 2h4a1 1 0 100-2H3z"/>
</svg>
<span class="ml-2">最新日期</span>
</button>
</div>
<!-- 搜索结果 -->
<div id="searchResults" class="max-w-4xl mx-auto space-y-3"></div>
</div>
<!-- 里番合集区域 -->
<div id="collectionsTab" class="tab-content hidden">
<div class="collection-description">
<span class="tab-text" data-zh="链接持续更新中..." data-en="Links are being updated...">链接持续更新中...</span>
</div>
<div id="collectionList" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 max-w-6xl mx-auto"></div>
</div>
<!-- 视频播放区域 -->
<div id="playerTab" class="tab-content hidden">
<div class="max-w-4xl mx-auto">
<div class="nsfw-warning mb-4 text-center">
<span class="tab-text" data-zh="⚠️ 警告:该内容包含成人内容 (NSFW)请确保您已年满18岁"
data-en="⚠️ Warning: This content contains adult material (NSFW), ensure you are 18+">
⚠️ 警告:该内容包含成人内容 (NSFW)请确保您已年满18岁
</span>
</div>
<div class="relative w-full">
<video id="videoPlayer" class="w-full h-auto" poster="" controls playsinline preload="metadata">
Your browser does not support the video tag.
</video>
</div>
<div class="video-controls flex justify-between items-center mt-4 mb-4">
<div class="autoplay-toggle flex items-center">
<input type="checkbox" id="autoplayToggle" class="hidden">
<label for="autoplayToggle" class="cursor-pointer flex items-center">
<span class="toggle-switch"></span>
<span class="ml-2 tab-text" data-zh="自动播放" data-en="Auto Play">自动播放</span>
</label>
</div>
<button id="nextVideo" class="next-button px-6 py-2">
<span class="tab-text" data-zh="下一个" data-en="Next">下一个</span>
</button>
</div>
<div class="video-source flex items-center bg-opacity-5 rounded-lg p-3 text-sm">
<div class="flex-grow overflow-hidden mr-2">
<div class="source-label mb-1 opacity-70">
<span class="tab-text" data-zh="视频源地址" data-en="Video Source URL">视频源地址</span>
</div>
<div class="source-url truncate font-mono" id="videoSourceUrl"></div>
</div>
<button id="copySourceUrl" class="copy-button flex items-center px-3 py-1.5 rounded">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path>
</svg>
<span class="tab-text" data-zh="复制" data-en="Copy">复制</span>
</button>
</div>
</div>
</div>
</main>
<!-- 回到顶部按钮 -->
<button id="backToTop" class="back-to-top hidden">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path>
</svg>
</button>
<script src="https://testingcf.jsdelivr.net/npm/hls.js@1.4.12/dist/hls.min.js"></script>
<script src="script.js"></script>
<!-- 在body末尾添加通知元素 -->
<div class="notification" id="notification">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>已复制到剪贴板</span>
</div>
<!-- 添加加载动画模板 -->
<template id="loadingTemplate">
<div class="loading-container">
<div class="loading-spinner"></div>
<div class="loading-text">
<span class="tab-text" data-zh="正在搜索中..." data-en="Searching...">正在搜索中...</span>
</div>
</div>
</template>
</body>
</html>