mirror of
https://github.com/Kakune55/ComiPy.git
synced 2025-06-28 08:18:04 +08:00
Kakune55
a5185a77a9
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:调整页面显示效果 添加隐私保护功能
130 lines
3.5 KiB
HTML
130 lines
3.5 KiB
HTML
<!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>展示图片列表和封面</title>
|
||
<style>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
margin: 0;
|
||
padding: 20px;
|
||
background-color: #f0f0f0;
|
||
}
|
||
|
||
#gallery {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
grid-gap: 20px;
|
||
font-size: small;
|
||
}
|
||
|
||
/* 当屏幕宽度大于600px时，调整列数和列的宽度 */
|
||
@media (min-width: 600px) {
|
||
#gallery {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
font-size: medium;
|
||
/* 两列布局 */
|
||
}
|
||
}
|
||
|
||
/* 当屏幕宽度大于900px时，进一步调整列数和列的宽度 */
|
||
@media (min-width: 900px) {
|
||
#gallery {
|
||
grid-template-columns: repeat(5, 1fr);
|
||
font-size: large;
|
||
/* 三列布局 */
|
||
}
|
||
}
|
||
|
||
#global-blur {
|
||
background-color: rgba(255, 255, 255, 0.5);
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
/* 模糊度可以根据需要调整 */
|
||
transition: display;
|
||
z-index: 1;
|
||
/* 保证遮罩在页面上方 */
|
||
pointer-events: none;
|
||
/* 确保遮罩不影响下方元素的交互 */
|
||
opacity: 0;
|
||
transition: opacity 0.1s ease
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="input-group">
|
||
<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>
|
||
</div>
|
||
<hr />
|
||
<div id="gallery">
|
||
{% for item in list %}
|
||
<div class="card">
|
||
<img src="/api/img/{{ item[1] }}/1?mini=yes" class="img-thumbnail card-img-top"
|
||
onclick="linkjump('{{ item[1] }}')" />
|
||
<div class="card-body">
|
||
<p class="card-text">{{ item[2] }}</p>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
<hr />
|
||
<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 %}
|
||
<li class="page-item"><a class="page-link" onclick="switchPage('{{item}}')">{{item}}</a></li>
|
||
{% endfor %}
|
||
<li class="page-item active" aria-current="page">
|
||
<a class="page-link">{{pagenow}}</a>
|
||
</li>
|
||
{% for item in nextPageList %}
|
||
<li class="page-item"><a class="page-link" onclick="switchPage('{{item}}')">{{item}}</a></li>
|
||
{% endfor %}
|
||
<ul>
|
||
</div>
|
||
|
||
<div id="global-blur" onclick="unshow_global_blur()"></div>
|
||
|
||
<script>
|
||
function linkjump(url) {
|
||
window.open("/book/" + url)
|
||
}
|
||
function switchPage(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>
|
||
</body>
|
||
|
||
</html> |