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

93
templates/overview.html
View File

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

4
templates/upload.html
View File

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

38
templates/view.html
View File

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