halo-theme-dream2.0-plus
Version:
梦之城，童话梦境，动漫类型博客主题。
464 lines (413 loc) • 15.2 kB
HTML
<html lang="zh" xmlns:th="https://www.thymeleaf.org"
th:class="${theme.config.basic_style.theme_style}"
th:with="urlCode = ${param.target},
url = ${#strings.defaultString(#uris.unescapePath(urlCode), '/')},
title = ${singlePage.spec.title} + ' - ' + ${site.title},
contributor = ${contributorFinder.getContributor(theme.config.basic_info.metadata_name)},
enableComment = false, isPost = false, canonical = ${theme.config.security_link_config.security_link_url}">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow"/>
<title th:with="t = ${theme.config.security_link_config.security_link_page_title},
t1 = ${#strings.replace(t, '{title}', site.title)}"
th:text="${#strings.isEmpty(t) ? site.title + '-安全中心' : t1}">
</title>
<link rel="preload stylesheet" as="style" th:href="@{/assets/lib/remixicon@4.6.0/remixicon.min.css}">
<style type="text/css">
html {
--back-img-url: url([[${#strings.defaultString(theme.config.security_link_config.security_link_site_img_background, '')}]]);
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
overflow: hidden;
flex-direction: column;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
html.light body {
background-image: linear-gradient(135deg, #a0a0a0 0%, #8c8c8c 100%), var(--back-img-url);
background-blend-mode: overlay;
}
html.dark body {
background-image: linear-gradient(135deg, #364f6b 0%, #222831 100%), var(--back-img-url);
background-blend-mode: overlay;
}
html.light .loading {
background: rgba(255, 255, 255, 0.7);
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
border: 1px solid rgba(255, 255, 255, 0.18);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
html.light .others-tip {
background: rgba(255, 255, 255, 0.4);
border: 1px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
html.dark .loading {
background: rgba(57, 62, 70, 0.6);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
html.dark .others-tip {
background: rgba(51, 51, 51, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.others-end a {
background: rgba(63, 193, 201, 0.8);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(63, 193, 201, 0.2);
line-height: 20px;
}
.others-end a:hover {
background: rgba(63, 193, 201, 1);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(63, 193, 201, 0.3);
}
.progress-bar {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
.progress {
box-shadow: 0 0 10px rgba(171, 237, 216, 0.5);
}
@keyframes fadein {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.loading {
animation: fadein 0.3s ease-out;
}
html.light .others-topic,
html.light .others-tip,
html.light .content-title span {
color: #333;
}
html.light .others-tip {
border: 1px solid #ccc;
background-color: #F7F9FE;
}
html.light .progress {
background-color: #abedd8;
}
.font-color {
color: #abedd8;
}
html.dark .loading {
background: #393e46;
box-shadow: 0 4px 8px rgba(100, 100, 100, 0.1);
}
html.dark .others-topic,
html.dark .others-tip,
html.dark .content-title span {
color: #EFEFEF;
}
html.dark .others-tip {
border: 1px solid #777;
background-color: #333;
}
html.dark .progress {
background-color: #888;
}
html.dark .progress-bar {
background-color: #444;
}
@media (max-width: 768px) {
.loading {
width: 75% ;
max-width: 400px ;
}
}
.loading {
text-align: center;
padding: 35px;
border-radius: 24px;
animation: fadein 0.3s ease-out;
width: 400px;
max-width: 90%;
border: 2px solid rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
box-shadow: 0 12px 40px rgba(31, 38, 135, 0.2);
position: relative;
}
.loading::before {
content: '';
position: absolute;
top: -6px;
left: -6px;
right: -6px;
bottom: -6px;
border-radius: 26px;
background: linear-gradient(145deg,
rgba(255,255,255,0.3) 0%,
rgba(255,255,255,0.1) 100%);
z-index: -1;
}
html.dark .loading {
border-color: rgba(255, 255, 255, 0.15);
background: rgba(57, 62, 70, 0.85);
}
html.dark .loading::before {
background: linear-gradient(145deg,
rgba(255,255,255,0.1) 0%,
rgba(255,255,255,0.05) 100%);
}
.content-title img {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto 15px auto;
display: block;
border: 3px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.content-title img:hover {
transform: scale(1.05);
}
.others-tip {
font-size: 18px;
display: block;
margin-top: 5px;
margin-bottom: 25px;
padding: 20px;
border-radius: 12px;
border: 2px solid rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #333;
}
html.dark .others-tip {
border-color: rgba(255, 255, 255, 0.15);
background: rgba(51, 51, 51, 0.6);
color: #EFEFEF;
}
.others-end a {
padding: 12px 24px;
border-radius: 20px;
font-size: 16px;
width: auto;
height: auto;
background: linear-gradient(135deg, #3fc1c9, #45b7d1);
color: white;
box-shadow: 0 4px 15px rgba(63, 193, 201, 0.3);
transition: all 0.3s ease;
}
.others-end a:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(63, 193, 201, 0.4);
}
.content-title {
margin-bottom: 20px;
font-size: 20px;
font-weight: bold;
}
.content-title img {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto 15px auto;
display: block;
}
.others-topic {
margin-bottom: 10px;
line-height: 1.2rem;
font-size: 16px;
letter-spacing: 1px;
color: #333;
word-wrap: break-word;
white-space: pre-wrap;
overflow: hidden;
}
.others-tip {
font-size: 20px;
display: block;
margin-top: 5px;
margin-bottom: 25px;
padding: 15px;
border-radius: 8px;
border: 1px solid #ccc;
background-color: #F7F9FE;
color: #333;
}
.others-end {
display: flex;
justify-content: center;
gap: 20%;
margin-top: 20px;
}
.others-end a {
padding: 10px 20px;
border-radius: 16px;
border: none;
cursor: pointer;
font-size: 16px;
width: 70px;
height: 20px;
text-align: center;
text-decoration: none;
background-color: #3fc1c9;
color: white;
}
.progress-bar {
width: 100%;
border-radius: 5px;
overflow: hidden;
height: 10px;
margin-top: 20px;
}
.progress {
width: 0;
height: 100%;
background-color: #abedd8;
transition: width [[${theme.config.security_link_config.security_link_auto_jump_time}]]s linear;
}
.progress-end {
width: 100% ;
transition: none ;
}
.countdown-text {
margin-top: 12px;
font-size: 12px;
color: #333;
text-align: center;
white-space: normal;
word-wrap: break-word;
overflow-wrap: break-word;
align-items: baseline;
}
.countdown-text i {
font-size: 1.15em;
color: #FF9800;
}
html.dark .countdown-text {
color: #EFEFEF;
}
#countdown {
font-weight: bold;
}
html.dark #countdown {
color: #3fc1c9;
}
html.light #countdown {
color: #26a1a6;
}
</style>
</head>
<body>
<div class="loading">
<div class="content-title">
<img th:src="${#strings.isEmpty(theme.config.security_link_config.security_link_site_img) ? site.favicon : theme.config.security_link_config.security_link_site_img}" alt="favicon">
<span th:if="${!#strings.isEmpty(theme.config.security_link_config.security_link_site_title)}"
th:with="t = ${theme.config.security_link_config.security_link_site_title},
t1 = ${#strings.replace(t, '{title}', site.title)}"
th:text="${t1}"></span>
</div>
<div class="others">
<div class="others-tip" th:utext="${#strings.defaultString(theme.config.security_link_config.security_link_tip_desc, '请注意您的账号和财产安全！')}">
</div>
<div class="others-topic">
</div>
<div class="progress-bar">
<div class="progress"></div>
</div>
<div class="countdown-text">
<i class="ri-flashlight-fill"></i>将在 <span id="countdown">[[${theme.config.security_link_config.security_link_auto_jump_time}]]</span> 秒后跳转，请自行确认链接安全性
</div>
<div class="others-end">
<a target="_self" href="/" aria-label="继续访问" title="继续访问">继续访问</a>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
//处理跳转链接，若链接不合法则跳转到首页
const siteTitle = '[[${site.title}]]'
let link_jump_desc = '[(${theme.config.security_link_config.security_link_jump_desc})]'
let targetUrl = '[[${url}]]'
//校验链接是否合法
try {
let tUrl = new URL(targetUrl)
} catch (e) {
// URL解析失败，返回首页
targetUrl = '/'
}
// 使用正则表达式进行全局替换
link_jump_desc = link_jump_desc.replace(new RegExp('{title}', 'g'), siteTitle);
link_jump_desc = link_jump_desc.replace(new RegExp('{url}', 'g'), targetUrl);
document.querySelector('.others-topic').innerHTML = link_jump_desc
document.querySelector('.others-end a').setAttribute('href', targetUrl);
// 倒计时
let timer
let countdownElement
let countdown = [[${theme.config.security_link_config.security_link_auto_jump_time}]]
if (countdown > 0) {
const progress = document.querySelector('.progress');
progress.style.width = '0';
void progress.offsetWidth;
progress.style.width = '100%';
countdownElement = document.getElementById('countdown')
timer = setInterval(function () {
countdown--
countdownElement.textContent = countdown
if (countdown <= 0) {
clearInterval(timer)
window.location.replace(targetUrl);
}
}, 1000)
} else {
document.querySelector('.progress-bar').style.display = 'none';
document.querySelector('.countdown-text').style.display = 'none';
}
// 继续访问，不记录历史，避免返回此页面
document.querySelector('.others-end a').addEventListener('click', function (e) {
e.preventDefault()
if (timer) {
clearInterval(timer)
}
window.location.replace(targetUrl)
if (countdownElement) {
countdownElement.textContent = 0
}
document.querySelector('.progress-bar > .progress').classList.add('progress-end')
})
/* 配置主题模式 */
let default_theme = '[[${theme.config.basic_style.default_theme}]]';
const hasNightInLocal = () => localStorage.getItem('night') !== null;
const getNightInConfig = () => {
if (default_theme === 'night') {
return true;
}
if (default_theme === 'system') {
return matchMedia('(prefers-color-scheme: dark)').matches;
}
return false;
}
let isNight = hasNightInLocal() ? localStorage.getItem('night') : getNightInConfig();
document.documentElement.classList.add(isNight.toString() === 'true' ? 'dark' : 'light');
});
</script>
</body>
</html>