mirror of
https://github.com/Kakune55/ComiPy.git
synced 2025-05-06 18:29:26 +08:00
Squashed commit of the following:
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:
parent
9553016af7
commit
a5185a77a9
@ -76,14 +76,14 @@
|
||||
<div class="header">
|
||||
<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 class="movie-details">
|
||||
<!-- 详细信息 -->
|
||||
<h1>{{ data[0][2] }}</h1>
|
||||
<h2>时间: {{time}}</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 class="comments-section">
|
||||
|
||||
@ -39,28 +39,23 @@
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#imageContainer {
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
#global-blur {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 9999;
|
||||
max-height: 90%;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
#imageContainer img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
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>
|
||||
@ -68,33 +63,41 @@
|
||||
<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>
|
||||
<button class="btn btn-secondary" type="button"
|
||||
onclick="window.location.href='/overview/1?search='+document.getElementById('search_text').value">Search</button>
|
||||
</div>
|
||||
<hr/>
|
||||
<hr />
|
||||
<div id="gallery">
|
||||
{% for item in list %}
|
||||
<div class="image-container">
|
||||
<img src="/api/img/{{ item[1] }}/1?mini=yes" class="image" onclick="linkjump('{{ item[1] }}')" />
|
||||
<span>{{ item[2] }}</span>
|
||||
<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>
|
||||
<div style="display:flex;justify-content: center; align-items:center;">
|
||||
<div class="btn-group" role=" toolbar" aria-label="Toolbar with button groups">
|
||||
<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 %}
|
||||
<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 %}
|
||||
</div>
|
||||
<div class="btn-group" role=" group" aria-label="Second group">
|
||||
<button type="button" class="btn btn-info">{{pagenow}}</button>
|
||||
</div>
|
||||
<div class="btn-group" role="group" aria-label="Third group">
|
||||
<li class="page-item active" aria-current="page">
|
||||
<a class="page-link">{{pagenow}}</a>
|
||||
</li>
|
||||
{% 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 %}
|
||||
</div>
|
||||
<ul>
|
||||
</div>
|
||||
|
||||
<div id="global-blur" onclick="unshow_global_blur()"></div>
|
||||
|
||||
<script>
|
||||
function linkjump(url) {
|
||||
window.open("/book/" + url)
|
||||
@ -102,6 +105,25 @@
|
||||
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>
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
@ -16,20 +17,20 @@
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container mt-5">
|
||||
<h2 class="text-center text-primary mb-4">文件上传</h2>
|
||||
<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>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<button class="btn btn-primary btn-block" onclick="to_upload_file()" id="upload_button">上传</button>
|
||||
</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>
|
||||
</div>
|
||||
<div class="text-center" id="loading">上传进度0%</div>
|
||||
</div>
|
||||
|
||||
@ -86,4 +87,5 @@
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
@ -28,19 +28,39 @@
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
min-height: 300px;
|
||||
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>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{% 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 %}
|
||||
<div style="display:flex;justify-content: center; align-items:center;">
|
||||
<img src="/static/loading.gif" id="loadingGIF">
|
||||
</div>
|
||||
<div id="global-blur" onclick="unshow_global_blur()"></div>
|
||||
<script>
|
||||
var imgs = document.querySelectorAll('.imgs');
|
||||
|
||||
@ -66,6 +86,23 @@
|
||||
window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发
|
||||
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>
|
||||
</body>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user