328 lines
9.9 KiB
HTML
328 lines
9.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
|
<!-- 第一屏 -->
|
|
<th:block th:fragment="index-img">
|
|
<th:block th:if="${theme.config.top.above.enable_above}">
|
|
<div id="greetingBox"></div>
|
|
<div class="pl-container">
|
|
<div class="pl-img pl-blur pl-visible"></div>
|
|
<div class="pl-img pl-visible"></div>
|
|
<video class="video"></video>
|
|
</div>
|
|
|
|
<div id="site-info">
|
|
<h1 id="site-title">[[${site.title}]]</h1>
|
|
<div id="site-subtitle">
|
|
<span id="subtitle"></span>
|
|
<span class="typed-cursor" aria-hidden="true"></span>
|
|
</div>
|
|
</div>
|
|
<div id="scroll-down"><i class="haofont hao-icon-angle-down scroll-down-effects"></i></div>
|
|
|
|
<link rel="stylesheet" th:href="${assets_link + '/css/fullPage.css'}">
|
|
|
|
<style>
|
|
#site-title {
|
|
width: max-content;
|
|
max-width: 100%;
|
|
position: relative;
|
|
color: rgba(255, 255, 255, 0);
|
|
animation: 1.5s linear 1s 1 normal both running show;
|
|
margin: 0px auto !important;
|
|
}
|
|
|
|
#site-title::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0px;
|
|
margin: auto;
|
|
border-radius: 12px;
|
|
top: 11px;
|
|
height: 55px;
|
|
width: 110%;
|
|
animation: 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running color_change, 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running swipe_box;
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
#site-title::after {
|
|
background: rgb(255, 255, 255) !important;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
#site-subtitle::after {
|
|
background: rgb(255, 255, 255) !important;
|
|
}
|
|
}
|
|
|
|
#site-subtitle {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
position: relative;
|
|
animation: 1.5s linear 1s 1 normal both running show;
|
|
margin: 0px auto !important;
|
|
}
|
|
|
|
#site-subtitle::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0px;
|
|
right: 0px;
|
|
margin: auto;
|
|
border-radius: 12px;
|
|
height: 100%;
|
|
width: 0%;
|
|
animation: 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running color_change, 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running swipe_box2;
|
|
}
|
|
|
|
@keyframes color_change {
|
|
0% {
|
|
background: rgb(255, 255, 255);
|
|
}
|
|
|
|
100% {
|
|
background: var(--xlfd-main);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes color_change {
|
|
0% {
|
|
background: rgb(255, 255, 255);
|
|
}
|
|
|
|
100% {
|
|
background: var(--xlfd-main);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes swipe_box {
|
|
0% {
|
|
left: 0px;
|
|
width: 0%;
|
|
}
|
|
|
|
50% {
|
|
left: 0px;
|
|
width: 100%;
|
|
}
|
|
|
|
100% {
|
|
left: 100%;
|
|
width: 0%;
|
|
}
|
|
}
|
|
|
|
@keyframes swipe_box {
|
|
0% {
|
|
left: 0px;
|
|
width: 0%;
|
|
}
|
|
|
|
50% {
|
|
left: 0px;
|
|
width: 100%;
|
|
}
|
|
|
|
100% {
|
|
left: 100%;
|
|
width: 0%;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes swipe_box2 {
|
|
0% {
|
|
left: 0px;
|
|
width: 0%;
|
|
}
|
|
|
|
50% {
|
|
left: 0px;
|
|
width: 80%;
|
|
}
|
|
|
|
100% {
|
|
left: 0px;
|
|
width: 0%;
|
|
}
|
|
}
|
|
|
|
@keyframes swipe_box2 {
|
|
0% {
|
|
left: 0px;
|
|
width: 0%;
|
|
}
|
|
|
|
50% {
|
|
left: 0px;
|
|
width: 80%;
|
|
}
|
|
|
|
100% {
|
|
left: 0px;
|
|
width: 0%;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes show {
|
|
0% {
|
|
color: rgba(255, 255, 255, 0);
|
|
text-shadow: transparent 2px 3px 10px;
|
|
}
|
|
|
|
81% {
|
|
color: rgba(255, 255, 255, 0);
|
|
}
|
|
|
|
100% {
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
}
|
|
|
|
@keyframes show {
|
|
0% {
|
|
color: rgba(255, 255, 255, 0);
|
|
text-shadow: transparent 2px 3px 10px;
|
|
}
|
|
|
|
81% {
|
|
color: rgba(255, 255, 255, 0);
|
|
}
|
|
|
|
100% {
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
}
|
|
|
|
.pl-img {
|
|
background-image: url([[${theme.config.top.above.index_img}]]);
|
|
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.pl-img {
|
|
background-image: url([[${theme.config.top.above.phone_index_img}]]);
|
|
}
|
|
}
|
|
|
|
.typed-cursor {
|
|
opacity: 1;
|
|
}
|
|
|
|
.typed-cursor.typed-cursor--blink {
|
|
animation: typedjsBlink 0.7s infinite;
|
|
-webkit-animation: typedjsBlink 0.7s infinite;
|
|
animation: typedjsBlink 0.7s infinite;
|
|
}
|
|
|
|
@keyframes typedjsBlink {
|
|
50% {
|
|
opacity: 0.0;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes typedjsBlink {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
#greetingBox {
|
|
position: fixed;
|
|
top: 10px;
|
|
left: 15%;
|
|
width: 400px;
|
|
text-align: center;
|
|
z-index: 999;
|
|
pointer-events: none
|
|
}
|
|
|
|
#greeting {
|
|
display: inline-block;
|
|
position: relative;
|
|
opacity: 0;
|
|
top: -110px;
|
|
padding: 5px 40px;
|
|
border-radius: 50px;
|
|
background-color: #fff;
|
|
color: #000;
|
|
font-size: small;
|
|
transition: .5s;
|
|
box-shadow: rgb(0 0 0 / 5%) 0 10px 20px
|
|
}
|
|
|
|
#greeting.shown {
|
|
opacity: 1;
|
|
top: 0
|
|
}
|
|
</style>
|
|
<script th:inline="javascript">
|
|
function subtitleType() {
|
|
fetch("https://v1.hitokoto.cn").then((t => t.json())).then((t => {
|
|
{
|
|
const e = "出自 " + t.from;
|
|
const n = [[${theme.config.top.above.typed}]].map((item)=>{
|
|
return item.realNode.text;
|
|
});
|
|
n.unshift(t.hitokoto, e), window.typed = new Typed("#subtitle", {
|
|
strings: n,
|
|
startDelay: 300,
|
|
typeSpeed: 100,
|
|
loop: !0,
|
|
backSpeed: 50
|
|
})
|
|
}
|
|
}))
|
|
}
|
|
"function" == typeof Typed ? subtitleType() : getScript("https://npm.elemecdn.com/typed.js@2.0.12/lib/typed.min.js").then(subtitleType)
|
|
</script>
|
|
<script>
|
|
(() => {
|
|
const e = [{greeting: "晚安😴", startTime: 0, endTime: 5}, {
|
|
greeting: "早上好鸭👋, 祝你一天好心情！",
|
|
startTime: 6,
|
|
endTime: 9
|
|
}, {
|
|
greeting: "上午好👋, 状态很好，鼓励一下～",
|
|
startTime: 10,
|
|
endTime: 10
|
|
}, {greeting: "11点多啦, 在坚持一下就吃饭啦～", startTime: 11, endTime: 11}, {
|
|
greeting: "午安👋, 宝贝",
|
|
startTime: 12,
|
|
endTime: 14
|
|
}, {
|
|
greeting: "🌈充实的一天辛苦啦！",
|
|
startTime: 14,
|
|
endTime: 18
|
|
}, {
|
|
greeting: "19点喽, 奖励一顿丰盛的大餐吧🍔。",
|
|
startTime: 19,
|
|
endTime: 19
|
|
}, {greeting: "晚上好👋, 在属于自己的时间好好放松😌~", startTime: 20, endTime: 24}];
|
|
let t = document.createElement("div");
|
|
t.id = "greeting", setTimeout((() => {
|
|
t.classList.add("shown")
|
|
}), 1e3);
|
|
let i = document.querySelector("#greetingBox");
|
|
i.appendChild(t);
|
|
const n = (new Date).getHours();
|
|
let r = "晚上好👋";
|
|
for (let t = 0; t < e.length; t++) if (n >= e[t].startTime && n <= e[t].endTime) {
|
|
r = e[t].greeting;
|
|
break
|
|
}
|
|
t.innerHTML = r, setTimeout((() => {
|
|
t.classList.remove("shown"), setTimeout((() => {
|
|
i.remove()
|
|
}), 500)
|
|
}), 3e3)
|
|
})()</script>
|
|
</th:block>
|
|
</th:block>
|
|
|
|
</html> |