mirror of
https://github.com/Kakune55/ComiPy.git
synced 2025-09-15 19:59:39 +08:00
284 lines
8.6 KiB
Django/Jinja
284 lines
8.6 KiB
Django/Jinja
<!DOCTYPE html>
|
|
<html lang="zh-cn">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
|
|
<title>ComiPy-详情页面</title>
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Google Sans', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #f8f9fa;
|
|
min-height: 100vh;
|
|
color: #202124;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 24px 16px;
|
|
background-color: #ffffff;
|
|
border-radius: 8px;
|
|
margin-top: 16px;
|
|
margin-bottom: 16px;
|
|
box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3);
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
@media (min-width: 600px) {
|
|
.header {
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
|
|
.movie-poster {
|
|
flex: 1;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.movie-poster img {
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 8px;
|
|
box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3);
|
|
}
|
|
|
|
.movie-details {
|
|
flex: 2;
|
|
}
|
|
|
|
.movie-details h1 {
|
|
font-size: 1.75rem;
|
|
font-weight: 400;
|
|
color: #1a73e8;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.movie-details p {
|
|
font-size: 14px;
|
|
color: #5f6368;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.btn {
|
|
background: #1a73e8;
|
|
border: 1px solid #1a73e8;
|
|
color: #ffffff;
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn:hover {
|
|
background: #1557b0;
|
|
border-color: #1557b0;
|
|
color: #ffffff;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.btn-outline {
|
|
background: #ffffff;
|
|
border: 1px solid #dadce0;
|
|
color: #1a73e8;
|
|
}
|
|
|
|
.btn-outline:hover {
|
|
background: #f8f9fa;
|
|
border-color: #1a73e8;
|
|
color: #1a73e8;
|
|
}
|
|
|
|
.comments-section {
|
|
margin-top: 32px;
|
|
}
|
|
|
|
.comments-section h2 {
|
|
color: #1a73e8;
|
|
font-weight: 400;
|
|
font-size: 1.25rem;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.comment {
|
|
background: #f8f9fa;
|
|
border: 1px solid #dadce0;
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.comment p {
|
|
margin: 0;
|
|
color: #202124;
|
|
}
|
|
|
|
.comment-meta {
|
|
font-size: 12px;
|
|
color: #5f6368;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.form-control {
|
|
border: 1px solid #dadce0;
|
|
border-radius: 4px;
|
|
padding: 12px;
|
|
font-family: inherit;
|
|
width: 100%;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.form-control:focus {
|
|
outline: none;
|
|
border-color: #1a73e8;
|
|
box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
|
|
}
|
|
|
|
.modal-content {
|
|
border-radius: 8px;
|
|
border: none;
|
|
box-shadow: 0 4px 8px rgba(60, 64, 67, 0.3);
|
|
}
|
|
|
|
.modal-header {
|
|
border-bottom: 1px solid #dadce0;
|
|
}
|
|
|
|
.modal-title {
|
|
color: #1a73e8;
|
|
font-weight: 400;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1 class="modal-title fs-5" id="exampleModalLabel">评论</h1>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="comment" action="/api/comment/upload" method="post">
|
|
<select class="form-select" aria-label="Default select example" name="score">
|
|
<option value="none">无评价</option>
|
|
<option value="like">赞👍</option>
|
|
<option value="dislike">踩👎</option>
|
|
</select>
|
|
<div class="input-group" style="margin-top: 10px;">
|
|
<span class="input-group-text">评论</span>
|
|
<textarea class="form-control" name="text" aria-label="With textarea"></textarea>
|
|
</div>
|
|
<input type="hidden" name="bookid" value="{{data[0][1]}}" />
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
|
<button type="button" class="btn btn-primary" onclick="commentSubmit()">提交</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="container">
|
|
<div class="header">
|
|
<div class="movie-poster">
|
|
<!-- 封面 -->
|
|
<img class="img-thumbnail" src="/api/img/{{ id }}/0?mini=yes" alt="封面" style="max-width: 100%;">
|
|
</div>
|
|
<div class="movie-details">
|
|
<!-- 详细信息 -->
|
|
<h1>{{ data[0][2] }}</h1>
|
|
<h3>更新时间: {{time}}</h3>
|
|
<h2>👍{{socre["like"]}} 👎{{socre["dislike"]}}</h2>
|
|
<button class="btn btn-primary" onclick="window.location.href='/view/{{ id }}'">在线浏览</button>
|
|
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">撰写评论</button>
|
|
{%if islogin == "admin"%}
|
|
<button class="btn btn-danger">删除资源</button>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<div class="container">
|
|
<div class="comments-section">
|
|
<h2>评论区</h2>
|
|
<!-- 评论 -->
|
|
{% if not comments%}
|
|
<p>暂无评论</p>
|
|
{%endif%}
|
|
{% for item in comments %}
|
|
<div class="comment">
|
|
<h3>{{item["from"]}}:
|
|
{%if item["socre"] == "like"%}
|
|
<small class="text-muted">觉得很赞👍</small>
|
|
{%endif%}
|
|
{%if item["socre"] == "dislike"%}
|
|
<small class="text-muted">点了个踩👎</small>
|
|
{%endif%}
|
|
</h3>
|
|
<h3>{{item["text"]}}</h3>
|
|
<small class="text-muted">id:{{item["id"]}} {{item["time"]}}</small>
|
|
{% if islogin == item["from"] %}
|
|
<button class="btn btn-danger" id="{{item['id']}}" onclick="delComment(id)">删除</button>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://unpkg.com/@popperjs/core@2"></script>
|
|
<script src="/static/js/jquery.min.js"></script>
|
|
<script src="/static/js/bootstrap.min.js"></script>
|
|
|
|
<script>
|
|
const comment = document.getElementById("comment")
|
|
function commentSubmit() {
|
|
comment.submit()
|
|
}
|
|
|
|
function delComment(id) {
|
|
fetch("/api/comment/remove?id=" + id, {
|
|
method: 'GET'
|
|
})
|
|
.then(response => {
|
|
// 首先检查HTTP状态码
|
|
if (response.ok) {
|
|
// 请求成功，刷新页面
|
|
location.reload();
|
|
} else {
|
|
// 请求失败，抛出一个错误
|
|
throw new Error('网络请求失败，状态码：' + response.status);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
// 处理任何在请求过程中发生的错误
|
|
alert('请求失败：' + error.message);
|
|
});
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |