98 lines
3.7 KiB
HTML
98 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>系列剧集播放器</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
<link rel="icon" type="image/png" href="./favicon.png" sizes="128x128">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header class="main-header">
|
||
<div class="header-content">
|
||
<div>
|
||
<h1>精选剧集</h1>
|
||
<p>选择一个系列，开始观看</p>
|
||
</div>
|
||
<button id="history-btn" class="header-btn" disabled>播放记录</button>
|
||
</div>
|
||
</header>
|
||
<form id="search-form" class="search-container">
|
||
<input type="search" id="search-input" placeholder="搜索剧集名称...">
|
||
</form>
|
||
<main>
|
||
<div id="series-grid" class="series-grid"></div>
|
||
<div id="no-results-container" class="no-results" style="display: none;">
|
||
<p>没有找到你想要的剧集...</p>
|
||
<button id="show-request-modal-btn" class="btn-primary">告诉我你想看什么！</button>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- 背景遮罩层 -->
|
||
<div id="modal-backdrop" class="modal-backdrop"></div>
|
||
|
||
<!-- 剧集列表 Modal -->
|
||
<div id="details-modal" class="modal">
|
||
<div class="modal-content">
|
||
<h2 id="detail-title">剧集列表</h2>
|
||
<div class="episode-scroll-container">
|
||
<div id="episode-list"></div>
|
||
</div>
|
||
<button class="btn-close" data-close-modal>关闭</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 提交心愿 Modal -->
|
||
<div id="request-modal" class="modal">
|
||
<div class="modal-content">
|
||
<h3>想看新剧？告诉我！</h3>
|
||
<p>我们会尽快寻找并上架您想看的剧集。</p>
|
||
<form id="request-form">
|
||
<input type="text" id="request-input" placeholder="输入你想看的剧集名称" required>
|
||
<button type="submit">提交心愿</button>
|
||
</form>
|
||
<p id="request-status" class="request-status"></p>
|
||
<button class="btn-close" data-close-modal style="margin-top: 15px;">关闭</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="history-modal" class="modal">
|
||
<div class="modal-content">
|
||
<h2>播放记录</h2>
|
||
<p>这里记录了您每个系列最近一次的观看进度。</p>
|
||
<div class="episode-scroll-container">
|
||
<div id="history-list"></div>
|
||
</div>
|
||
<button class="btn-close" data-close-modal>关闭</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 视频播放器 Modal -->
|
||
<div id="video-modal" class="video-modal">
|
||
<div class="player-layout-container">
|
||
<div class="video-wrapper">
|
||
<h3 id="player-title"></h3>
|
||
<div class="video-container">
|
||
<video id="video-player" controls controlslist="nodownload"></video>
|
||
</div>
|
||
<div class="player-controls">
|
||
<button id="prev-episode-btn" class="player-nav-btn">上一集</button>
|
||
<button id="next-episode-btn" class="player-nav-btn">下一集</button>
|
||
</div>
|
||
<button class="video-close-btn" data-close-modal>×</button>
|
||
</div>
|
||
<div id="player-episode-list" class="player-episode-list-container">
|
||
<h4>正在播放系列</h4>
|
||
<div class="episode-scroll-container">
|
||
<div id="player-episodes"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|