kaku/ComiPy
1
0
Fork 0
mirror of https://github.com/Kakune55/ComiPy.git synced 2025-05-07 02:39:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

Squashed commit of the following:

Browse Source 
commit b5c58e12161e0bcb924fc3482ac10ed340e1a50c
Author: Kakune55 <xiao_doubi9637@outlook.com>
Date:   Mon Apr 22 08:55:08 2024 +0800

    fix:修复了隐私保护的模糊效果没有在safari中正常显示的问题

commit 314ddc4751c708441964749d8dc7c48c25165b2a
Author: Kakune55 <xiao_doubi9637@outlook.com>
Date:   Sun Apr 21 23:45:41 2024 +0800

    feat:调整页面显示效果 添加隐私保护功能
This commit is contained in:
Kakune55 2024-04-22 08:55:57 +08:00
parent 9553016af7
commit a5185a77a9
4 changed files with 107 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
templates/book.html
View File

@ -76,14 +76,14 @@
<div class="header"> <div class="header">
<div class="movie-poster"> <div class="movie-poster">
<!-- 封面 --> <!-- 封面 -->
<img src="/api/img/{{ id }}/1?mini=yes" alt="封面" style="max-width: 100%;"> <img class="img-thumbnail" src="/api/img/{{ id }}/1?mini=yes" alt="封面" style="max-width: 100%;">
</div> </div>
<div class="movie-details"> <div class="movie-details">
<!-- 详细信息 --> <!-- 详细信息 -->
<h1>{{ data[0][2] }}</h1> <h1>{{ data[0][2] }}</h1>
<h2>时间: {{time}}</h2> <h2>时间: {{time}}</h2>
<h2>暂无评价</h2> <h2>暂无评价</h2>
<button onclick="window.location.href='/view/{{ id }}'">在线浏览</button> <button class="btn btn-primary" onclick="window.location.href='/view/{{ id }}'">在线浏览</button>
</div> </div>
</div> </div>
<div class="comments-section"> <div class="comments-section">

94
templates/overview.html
View File

@ -39,28 +39,23 @@
} }
} }
.image { #global-blur {
max-width: 100%; background-color: rgba(255, 255, 255, 0.5);
height: auto;
cursor: pointer;
}
#imageContainer {
display: none;
justify-content: center;
align-items: center;
position: fixed; position: fixed;
top: 50%; top: 0;
left: 50%; left: 0;
transform: translate(-50%, -50%); width: 100%;
z-index: 9999; height: 100%;
max-height: 90%; backdrop-filter: blur(10px);
max-width: 90%; -webkit-backdrop-filter: blur(10px);
} /* 模糊度可以根据需要调整 */
transition: display;
#imageContainer img { z-index: 1;
max-width: 100%; /* 保证遮罩在页面上方 */
height: auto; pointer-events: none;
/* 确保遮罩不影响下方元素的交互 */
opacity: 0;
transition: opacity 0.1s ease
} }
</style> </style>
</head> </head>
@ -68,33 +63,41 @@
<body> <body>
<div class="input-group"> <div class="input-group">
<input type="text" class="form-control" id="search_text" placeholder="键入以搜索"> <input type="text" class="form-control" id="search_text" placeholder="键入以搜索">
<button class="btn btn-secondary" type="button" onclick="window.location.href='/overview/1?search='+document.getElementById('search_text').value">Search</button> <button class="btn btn-secondary" type="button"
onclick="window.location.href='/overview/1?search='+document.getElementById('search_text').value">Search</button>
</div> </div>
<hr/> <hr />
<div id="gallery"> <div id="gallery">
{% for item in list %} {% for item in list %}
<div class="image-container"> <div class="card">
<img src="/api/img/{{ item[1] }}/1?mini=yes" class="image" onclick="linkjump('{{ item[1] }}')" /> <img src="/api/img/{{ item[1] }}/1?mini=yes" class="img-thumbnail card-img-top"
<span>{{ item[2] }}</span> onclick="linkjump('{{ item[1] }}')" />
<div class="card-body">
<p class="card-text">{{ item[2] }}</p>
</div>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
<div style="display:flex;justify-content: center; align-items:center;"> <hr />
<div class="btn-group" role=" toolbar" aria-label="Toolbar with button groups"> <div style=display:flex;justify-content:center;align-items:center;>
<ul class="pagination">
<li class="page-item">
<a class="page-link">Page</a>
</li>
{% for item in lastPageList %} {% for item in lastPageList %}
<button type="button" class="btn btn-primary" onclick="switchPage('{{item}}')">{{item}}</button> <li class="page-item"><a class="page-link" onclick="switchPage('{{item}}')">{{item}}</a></li>
{% endfor %} {% endfor %}
</div> <li class="page-item active" aria-current="page">
<div class="btn-group" role=" group" aria-label="Second group"> <a class="page-link">{{pagenow}}</a>
<button type="button" class="btn btn-info">{{pagenow}}</button> </li>
</div>
<div class="btn-group" role="group" aria-label="Third group">
{% for item in nextPageList %} {% for item in nextPageList %}
<button type="button" class="btn btn-primary" onclick="switchPage('{{item}}')">{{item}}</button> <li class="page-item"><a class="page-link" onclick="switchPage('{{item}}')">{{item}}</a></li>
{% endfor %} {% endfor %}
</div> <ul>
</div> </div>
<div id="global-blur" onclick="unshow_global_blur()"></div>
<script> <script>
function linkjump(url) { function linkjump(url) {
window.open("/book/" + url) window.open("/book/" + url)
@ -102,6 +105,25 @@
function switchPage(pagemun) { function switchPage(pagemun) {
window.location.replace("/overview/" + pagemun) window.location.replace("/overview/" + pagemun)
} }
document.addEventListener('visibilitychange', documentVisibilityChange)
global_blur = document.getElementById("global-blur")
function documentVisibilityChange() {
if (document.visibilityState === "hidden") {
global_blur.style.opacity = 1;
global_blur.style.pointerEvents = "auto";
}
if (document.visibilityState === "visible") {
}
}
function unshow_global_blur() {
global_blur.style.opacity = 0;
global_blur.style.pointerEvents = "none";
}
</script> </script>
</body> </body>

12
templates/upload.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-cn"> <html lang="zh-cn">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -16,20 +17,20 @@
} }
</style> </style>
</head> </head>
<body> <body>
<div class="container mt-5"> <div class="container mt-5">
<h2 class="text-center text-primary mb-4">文件上传</h2> <h2 class="text-center text-primary mb-4">文件上传</h2>
<div class="row justify-content-center mb-4"> <div class="row justify-content-center mb-4">
<div class="col-md-6"> <div class="input-group mb-3">
<input type="file" class="form-control" id="avatar" accept=".zip" multiple> <input type="file" class="form-control" id="avatar" accept=".zip" multiple>
</div>
<div class="col-md-2">
<button class="btn btn-primary btn-block" onclick="to_upload_file()" id="upload_button">上传</button> <button class="btn btn-primary btn-block" onclick="to_upload_file()" id="upload_button">上传</button>
</div> </div>
</div> </div>
<div class="progress" role="progressbar" aria-label="Animated striped example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> <div class="progress" role="progressbar" aria-label="Animated striped example" aria-valuenow="0"
aria-valuemin="0" aria-valuemax="100">
<div id="progress_bar" class="progress-bar progress-bar-striped progress-bar-animated"></div> <div id="progress_bar" class="progress-bar progress-bar-striped progress-bar-animated"></div>
</div> </div>
<div class="text-center" id="loading">上传进度0%</div> <div class="text-center" id="loading">上传进度0%</div>
</div> </div>
@ -86,4 +87,5 @@
} }
</script> </script>
</body> </body>
</html> </html>

41
templates/view.html
View File

@ -28,19 +28,39 @@
img { img {
display: block; display: block;
width: 100%; width: 100%;
min-height: 100px; min-height: 300px;
margin-top: 10px; margin-top: 10px;
} }
#global-blur {
background-color: rgba(255, 255, 255, 0.8);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
/* 模糊度可以根据需要调整 */
transition: display;
z-index: 1;
/* 保证遮罩在页面上方 */
pointer-events: none;
/* 确保遮罩不影响下方元素的交互 */
opacity: 0;
transition: opacity 0.1s ease
}
</style> </style>
</head> </head>
<body> <body>
{% for i in index %} {% for i in index %}
<img data-src="/api/img/{{ id }}/{{ i }}" loading="lazy" alt="{{ i }}" class="imgs"> <img data-src="/api/img/{{ id }}/{{ i }}" loading="lazy" alt="{{ i }}" class="imgs">
{% endfor %} {% endfor %}
<div style="display:flex;justify-content: center; align-items:center;"> <div style="display:flex;justify-content: center; align-items:center;">
<img src="/static/loading.gif" id="loadingGIF"> <img src="/static/loading.gif" id="loadingGIF">
</div> </div>
<div id="global-blur" onclick="unshow_global_blur()"></div>
<script> <script>
var imgs = document.querySelectorAll('.imgs'); var imgs = document.querySelectorAll('.imgs');
@ -66,6 +86,23 @@
window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发 window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发
lazyLoad(imgs); lazyLoad(imgs);
} }
document.addEventListener('visibilitychange', documentVisibilityChange)
global_blur = document.getElementById("global-blur")
function documentVisibilityChange() {
if (document.visibilityState === "hidden") {
global_blur.style.opacity = 1;
global_blur.style.pointerEvents = "auto";
}
if (document.visibilityState === "visible") {
}
}
function unshow_global_blur() {
global_blur.style.opacity = 0;
global_blur.style.pointerEvents = "none";
}
</script> </script>
</body> </body>