kaku/ComiPy
1
0
Fork 0
mirror of https://github.com/Kakune55/ComiPy.git synced 2025-06-28 08:18:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat:调整页面显示效果 添加隐私保护功能

Browse Source
This commit is contained in:
Kakune55 2024-04-21 23:45:41 +08:00
parent df7210d009
commit 314ddc4751
3 changed files with 96 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
templates/overview.html
View File

@ -39,28 +39,22 @@
}
}
.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);
/* 模糊度可以根据需要调整 */
transition: display;
z-index: 1;
/* 保证遮罩在页面上方 */
pointer-events: none;
/* 确保遮罩不影响下方元素的交互 */
opacity: 0;
transition: opacity 0.3s ease
}
</style>
</head>
@ -68,32 +62,40 @@
<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 />
<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 %}
<ul>
</div>
</div>
<div id="global-blur" onclick="unshow_global_blur()"></div>
<script>
function linkjump(url) {
@ -102,6 +104,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>

4
templates/upload.html
View File

@ -20,10 +20,8 @@
<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>

38
templates/view.html
View File

@ -28,9 +28,27 @@
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);
/* 模糊度可以根据需要调整 */
transition: display;
z-index: 1;
/* 保证遮罩在页面上方 */
pointer-events: none;
/* 确保遮罩不影响下方元素的交互 */
opacity: 0;
transition: opacity 0.3s ease
}
</style>
</head>
@ -41,6 +59,7 @@
<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 +85,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>