104 lines
4.3 KiB
HTML
104 lines
4.3 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="/css/style.css">
|
|
</head>
|
|
<body>
|
|
<!-- 顶部导航栏 -->
|
|
<header class="header">
|
|
<div class="container">
|
|
<div class="logo">
|
|
<a href="/">
|
|
<svg viewBox="0 0 24 24" width="32" height="32">
|
|
<path fill="#ff2442" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
|
</svg>
|
|
<span>短视频平台</span>
|
|
</a>
|
|
</div>
|
|
|
|
<nav class="nav-menu">
|
|
<a href="/" class="nav-item active">首页</a>
|
|
<a href="#" class="nav-item">热门</a>
|
|
<a href="#" class="nav-item">关注</a>
|
|
</nav>
|
|
|
|
<div class="search-box">
|
|
<input type="text" id="searchInput" placeholder="搜索视频、作者">
|
|
<button onclick="handleSearch()">
|
|
<svg viewBox="0 0 24 24" width="20" height="20">
|
|
<path fill="currentColor" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="header-actions">
|
|
<button class="btn-upload">
|
|
<svg viewBox="0 0 24 24" width="20" height="20">
|
|
<path fill="currentColor" d="M9 16h6v-6h4l-7-7-7 7h4v6zm-4 2h14v2H5v-2z"/>
|
|
</svg>
|
|
<span>上传</span>
|
|
</button>
|
|
<a href="/admin" class="btn-admin">
|
|
<svg viewBox="0 0 24 24" width="20" height="20">
|
|
<path fill="currentColor" d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 主要内容区 -->
|
|
<main class="main-content">
|
|
<div class="container">
|
|
<!-- 分类标签 -->
|
|
<div class="category-tabs">
|
|
<button class="category-tab active" data-category="all">推荐</button>
|
|
<button class="category-tab" data-category="热门">热门</button>
|
|
<button class="category-tab" data-category="萌宠">萌宠</button>
|
|
<button class="category-tab" data-category="美食">美食</button>
|
|
<button class="category-tab" data-category="旅行">旅行</button>
|
|
<button class="category-tab" data-category="科技">科技</button>
|
|
<button class="category-tab" data-category="风景">风景</button>
|
|
</div>
|
|
|
|
<!-- 视频网格 -->
|
|
<div class="video-grid" id="videoGrid">
|
|
<!-- 视频卡片将通过JS动态加载 -->
|
|
</div>
|
|
|
|
<!-- 加载更多 -->
|
|
<div class="load-more" id="loadMore">
|
|
<button onclick="loadVideos()">加载更多</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- 底部信息 -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<p>© 2024 短视频平台 - 发现精彩，分享快乐</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="/js/app.js"></script>
|
|
<script>
|
|
// 初始化加载视频
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
loadVideos();
|
|
|
|
// 分类标签点击事件
|
|
document.querySelectorAll('.category-tab').forEach(tab => {
|
|
tab.addEventListener('click', function() {
|
|
document.querySelectorAll('.category-tab').forEach(t => t.classList.remove('active'));
|
|
this.classList.add('active');
|
|
const category = this.dataset.category;
|
|
loadVideos(category);
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |