249 lines
7.9 KiB
HTML
249 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Welcome to movie search</title>
|
||
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
|
||
<style>
|
||
/* 页面整体背景 */
|
||
.background-container {
|
||
background-image: url('static/search_bg.png'); /* 替换为实际图片路径 */
|
||
background-size: cover;
|
||
background-position: center;
|
||
padding: 20px;
|
||
border-radius: 8px; /* 可选：添加圆角 */
|
||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 可选：添加阴影 */
|
||
text-align: center;
|
||
font-family: Arial, sans-serif;
|
||
height: 350px;
|
||
}
|
||
|
||
|
||
/* 标题样式 */
|
||
h1 {
|
||
text-align: center;
|
||
font-size: 2.5em;
|
||
color: #fff;
|
||
margin: 20px 0;
|
||
padding: 10px;
|
||
background-color: rgba(0, 0, 0, 0.5); /* 透明背景 */
|
||
border-radius: 8px;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 2.5em;
|
||
}
|
||
|
||
/* 搜索框样式 */
|
||
form {
|
||
text-align: center;
|
||
margin: 20px auto;
|
||
max-width: 500px;
|
||
padding: 20px;
|
||
background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */
|
||
border-radius: 8px;
|
||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
input[type="text"] {
|
||
width: 80%;
|
||
padding: 10px;
|
||
border-radius: 20px;
|
||
border: 1px solid #ddd;
|
||
outline: none;
|
||
text-align: center;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
button[type="submit"] {
|
||
padding: 10px 20px;
|
||
border-radius: 20px;
|
||
border: none;
|
||
background-color: #333;
|
||
color: #fff;
|
||
font-size: 1em;
|
||
cursor: pointer;
|
||
transition: background-color 0.3s ease;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
button[type="submit"]:hover {
|
||
background-color: #555;
|
||
}
|
||
|
||
/* 搜索结果容器样式 */
|
||
.search-results-container {
|
||
background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */
|
||
padding: 20px;
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
|
||
margin: 20px 0;
|
||
}
|
||
|
||
/* 电影卡片容器样式 */
|
||
.cards-container {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
padding: 20px;
|
||
gap: 10px;
|
||
}
|
||
|
||
/* 电影卡片样式 */
|
||
.card {
|
||
width: calc(20% - 20px); /* 每行5个，包含间距 */
|
||
margin: 10px;
|
||
padding: 15px;
|
||
background-color: #fff;
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.card:hover {
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
.card h3 a {
|
||
color: #333;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.card h3 a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* 页码导航样式 */
|
||
.pagination {
|
||
text-align: center;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.pagination a {
|
||
margin: 0 5px;
|
||
text-decoration: none;
|
||
color: #333;
|
||
padding: 8px 12px;
|
||
background-color: #f0f0f0;
|
||
border-radius: 4px;
|
||
transition: background-color 0.3s ease;
|
||
}
|
||
|
||
.pagination a:hover {
|
||
background-color: #ddd;
|
||
}
|
||
|
||
.pagination strong {
|
||
margin: 0 5px;
|
||
padding: 8px 12px;
|
||
color: #fff;
|
||
background-color: #333;
|
||
border-radius: 4px;
|
||
}
|
||
.rating {
|
||
color: red; /* 红色字体 */
|
||
font-weight: bold; /* 加粗 */
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 引入顶部栏模板 -->
|
||
{% include 'navbar.html' %}
|
||
<div class="background-container">
|
||
<h1>Welcome to Movie Search</h1>
|
||
|
||
<!-- 搜索部分 -->
|
||
<form method="POST" action="{{ url_for('dashboard.dashboard') }}">
|
||
<div>
|
||
<label>
|
||
<input type="radio" name="search_type" value="category" {% if search_type == 'category' %}checked{% endif %}> By Category
|
||
</label>
|
||
<label>
|
||
<input type="radio" name="search_type" value="keyword" {% if search_type == 'keyword' %}checked{% endif %}> By Keyword
|
||
</label>
|
||
</div>
|
||
|
||
<!-- 类别选择 -->
|
||
<div id="category-search" {% if search_type != 'category' %}style="display:none;"{% endif %}>
|
||
<p>Select Genres:</p>
|
||
{% for genre in genres %}
|
||
<label>
|
||
<input type="checkbox" name="genres" value="{{ genre.id }}" {% if genre.id|string in selected_genres %}checked{% endif %}> {{ genre.name }}
|
||
</label>
|
||
{% endfor %}
|
||
</div>
|
||
|
||
<!-- 关键词输入框 -->
|
||
<div id="keyword-search" {% if search_type != 'keyword' %}style="display:none;"{% endif %}>
|
||
<label>Keyword:</label>
|
||
<input type="text" name="keyword" placeholder="Enter movie or actor name" value="{{ keyword }}">
|
||
</div>
|
||
|
||
<button type="submit">Search</button>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- 搜索结果展示 -->
|
||
<div class="search-results-container">
|
||
<h2>🔎 Search Results</h2>
|
||
|
||
{% if search_results and search_results.total > 0 %}
|
||
<div class="cards-container">
|
||
{% for movie in search_results.items %}
|
||
<div class="card">
|
||
<h3><a href="{{ url_for('movies.detail', id=movie.id) }}" target="_blank">{{ movie.title }}</a></h3>
|
||
<p class="rating">Average Rating: {{ movie.average_rating }}</p>
|
||
<p>Release Date: {{ movie.release_date }}</p>
|
||
<p>Genres: {{ movie.genre_names }}</p>
|
||
<p>Rating Count: {{ movie.rating_count }}</p>
|
||
<p>Actors: {{ movie.actor }}</p>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
|
||
<!-- 页码导航 -->
|
||
<div class="pagination">
|
||
<!-- 首页按钮 -->
|
||
{% if search_results.page == 1 %}
|
||
<strong>First</strong>
|
||
{% else %}
|
||
<a href="{{ url_for('dashboard.dashboard', page=1, search_type=search_type, genres=selected_genres, keyword=keyword) }}">First</a>
|
||
{% endif %}
|
||
|
||
<!-- 数字页码按钮 -->
|
||
{% for page_num in range(start_page, end_page + 1) %}
|
||
{% if page_num == search_results.page %}
|
||
<strong>{{ page_num }}</strong>
|
||
{% else %}
|
||
<a href="{{ url_for('dashboard.dashboard', page=page_num, search_type=search_type, genres=selected_genres, keyword=keyword) }}">{{ page_num }}</a>
|
||
{% endif %}
|
||
{% endfor %}
|
||
|
||
<!-- 尾页按钮 -->
|
||
{% if search_results.page == search_results.pages %}
|
||
<strong>Last</strong>
|
||
{% else %}
|
||
<a href="{{ url_for('dashboard.dashboard', page=search_results.pages, search_type=search_type, genres=selected_genres, keyword=keyword) }}">Last</a>
|
||
{% endif %}
|
||
</div>
|
||
{% else %}
|
||
<p>No results found.</p>
|
||
{% endif %}
|
||
</div>
|
||
|
||
|
||
{% include 'recommendations.html' %}
|
||
|
||
</body>
|
||
<script>
|
||
// 切换搜索类型
|
||
document.querySelectorAll('input[name="search_type"]').forEach((radio) => {
|
||
radio.addEventListener('change', () => {
|
||
document.getElementById('category-search').style.display = radio.value === 'category' ? 'block' : 'none';
|
||
document.getElementById('keyword-search').style.display = radio.value === 'keyword' ? 'block' : 'none';
|
||
});
|
||
});
|
||
</script>
|
||
</html>
|