kaku/ComiPy
1
0
Fork 0
mirror of https://github.com/Kakune55/ComiPy.git synced 2025-09-15 19:59:39 +08:00
Code Issues Packages Projects Releases Wiki Activity

Squashed commit of the following:

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

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

commit 314ddc4751
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
Download Patch File Download Diff File Expand all files Collapse all files

41
templates/view.html
View File

@@ -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>