177 lines
7.9 KiB
HTML
177 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{ site.title }}</title>
|
|
{% if site.service == 1 %}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='painting/css/normalize.css') }}">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='painting/css/animate.min.css') }}">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='painting/css/painting.css') }}">
|
|
{% else %}
|
|
<link rel="stylesheet" href="painting/css/normalize.css">
|
|
<link rel="stylesheet" href="painting/css/animate.min.css">
|
|
<link rel="stylesheet" href="painting/css/painting.css">
|
|
{% endif %}
|
|
<script async src="https://umami.7wate.org/script.js"
|
|
data-website-id="635fec50-bc6c-4ac2-909a-e2a7403438be"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container active animate__animated animate__fadeIn animate__slow" id="tab1">
|
|
<audio id="bgm" loop>
|
|
{% if site.service == 1 %}
|
|
<source src="{{ url_for('static', filename='painting/music/bgm.mp3') }}" type="audio/mpeg">Your browser does
|
|
not support the audio element.
|
|
{% else %}
|
|
<source src="painting/music/bgm.mp3" type="audio/mpeg">Your browser does not support the audio element.
|
|
{% endif %}
|
|
|
|
</audio>
|
|
<div class="popup">
|
|
<div class="notice">
|
|
<h4>温馨提示</h4>
|
|
<hr>
|
|
<p>EndofYear 使用互联网公开的 RSS 数据源，并使用自建的 Umami 服务统计访问量，绝对不会主动获取个人隐私信息。🫣🫣🫣
|
|
<br>
|
|
<br>
|
|
开启方式：小手轻轻点 ~
|
|
<a href="https://github.com/7Wate/EndOfYear"></a>
|
|
</p>
|
|
</div>
|
|
<div class="selection">
|
|
<button value="true" class="allow">开启音乐</button>
|
|
<button value="false" class="deny">静音进入</button>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container animate__animated animate__fadeIn animate__slow" id="tab2">
|
|
<div class="tab2-box">
|
|
<p class="animate__animated animate__fadeIn animate__delay-1s">亲爱的{{ blog.name }}</p>
|
|
{% if blog.life == 0 %}
|
|
<p class="animate__animated animate__fadeIn animate__delay-2s">旧事如梦，一年已过</p>
|
|
<p class="animate__animated animate__fadeIn animate__delay-2s">贰三年、感谢有你!</p>
|
|
{% else %}
|
|
<p class="animate__animated animate__fadeIn animate__delay-2s">今天是我们相识的</p>
|
|
<p class="animate__animated animate__fadeIn animate__delay-3s">第 <small>{{ blog.life // 365 }}</small> 年
|
|
<small>{{ blog.life % 365 }}</small> 天</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
</div>
|
|
<div class="container animate__animated animate__fadeIn animate__slow" id="tab3">
|
|
<div class="tab3-box">
|
|
<p class="animate__animated animate__fadeInUp animate__delay-1s">这一年你写下了</p>
|
|
<p class="animate__animated animate__fadeInUp animate__delay-2s"><small>{{ blog.article_count }}</small>
|
|
篇博文</p>
|
|
<p class="animate__animated animate__fadeInUp animate__delay-3s">
|
|
<small>{{ blog.article_word_count }}</small> 个文字</p>
|
|
</div>
|
|
</div>
|
|
<div class="container animate__animated animate__fadeIn animate__slow" id="tab4">
|
|
<div class="tab4-box">
|
|
<p class="animate__animated animate__fadeInLeft animate__delay-1s"> 其中 </p>
|
|
<p class="animate__animated animate__fadeInLeft animate__delay-2s"> {{ long_post.title }} </p>
|
|
<p class="animate__animated animate__fadeInLeft animate__delay-3s"> {{ long_post.content[:50] }}</p>
|
|
<p class="animate__animated animate__fadeIn animate__delay-4s"> 长似一江春水</p>
|
|
<p class="animate__animated animate__fadeIn animate__delay-5s"> 永不止息 ~ </p>
|
|
</div>
|
|
</div>
|
|
<div class="container animate__animated animate__fadeIn animate__slow" id="tab5">
|
|
<div class="tab5-box">
|
|
<p class="animate__animated animate__fadeInDown animate__delay-1s">在{{ special_post.date }}那天，写下了</p>
|
|
<p class="animate__animated animate__fadeInDown animate__delay-2s">{{ special_post.title }}</p>
|
|
<p class="animate__animated animate__fadeInDown animate__delay-3s">{{ special_post.content[:50] }}<small>……</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="container animate__animated animate__fadeIn animate__slow" id="tab6">
|
|
<div class="tab6-box">
|
|
<p class="animate__animated animate__fadeInUp animate__delay-1s">{{ sentiment_post.title }}</p>
|
|
<p class="animate__animated animate__fadeInUp animate__delay-2s">{{ sentiment_post.content[:50] }}</p>
|
|
<p class="animate__animated animate__fadeIn animate__delay-3s">如初春的暖阳，宁静而怡人</p>
|
|
</div>
|
|
</div>
|
|
<div class="container animate__animated animate__fadeIn animate__slow" id="tab7">
|
|
<div class="tab7-box">
|
|
{% for keyword in blog.top_post_keys[0:5] %}
|
|
<p class="animate__animated animate__fadeIn animate__delay-1s">{{ keyword[0] }}</p>
|
|
{% endfor %}
|
|
<p class="animate__animated animate__fadeInDown animate__delay-1s">这些都是<small>你</small>的</p>
|
|
<p class="animate__animated animate__fadeInDown animate__delay-2s">专属<small>关键词</small></p>
|
|
</div>
|
|
</div>
|
|
<div class="container animate__animated animate__fadeIn animate__slow" id="tab8">
|
|
<div class="tab8-box">
|
|
<p class="animate__animated animate__fadeInLeft animate__delay-1s">
|
|
热爱{% if blog.category == 1 %}生活{% else %}技术{% endif %}的你
|
|
</p>
|
|
<p class="animate__animated animate__fadeInLeft animate__delay-2s">一定要继续砥砺前行!</p>
|
|
</div>
|
|
</div>
|
|
<div class="container animate__animated animate__fadeIn animate__slow" id="tab9">
|
|
<div class="tab9-box">
|
|
<p id="yiyan"> {{ custom.yiyan }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 屏幕尺寸
|
|
console.log("Window inner size: ", window.innerWidth, "x", window.innerHeight);
|
|
console.log("Window outer size: ", window.outerWidth, "x", window.outerHeight);
|
|
console.log("Screen size: ", screen.width, "x", screen.height);
|
|
console.log("Screen available size: ", screen.availWidth, "x", screen.availHeight);
|
|
|
|
// 轮播切换
|
|
let carousel = {
|
|
currentIndex: 0,
|
|
tabs: [],
|
|
|
|
init: function () {
|
|
this.tabs = document.getElementsByClassName('container');
|
|
|
|
for (let i = 0; i < this.tabs.length; i++) {
|
|
this.tabs[i].addEventListener('click', () => {
|
|
this.next();
|
|
});
|
|
}
|
|
},
|
|
|
|
next: function () {
|
|
this.tabs[this.currentIndex].classList.remove('active');
|
|
this.currentIndex = (this.currentIndex + 1) % this.tabs.length;
|
|
this.tabs[this.currentIndex].classList.add('active');
|
|
}
|
|
};
|
|
|
|
window.onload = function () {
|
|
carousel.init();
|
|
};
|
|
|
|
// 弹出提示
|
|
let popup = document.querySelector('.popup');
|
|
let allowButton = document.querySelector('.allow');
|
|
let denyButton = document.querySelector('.deny');
|
|
let audioElement = document.getElementById('bgm');
|
|
|
|
allowButton.addEventListener('click', function (event) {
|
|
event.stopPropagation();
|
|
audioElement.play(); // 播放音乐
|
|
popup.style.display = 'none'; // 隐藏弹出窗口
|
|
});
|
|
|
|
denyButton.addEventListener('click', function (event) {
|
|
event.stopPropagation();
|
|
popup.style.display = 'none'; // 隐藏弹出窗口
|
|
});
|
|
|
|
// 博客最后的一言
|
|
window.addEventListener('DOMContentLoaded', (event) => {
|
|
let textElement = document.getElementById("yiyan");
|
|
let text = textElement.innerHTML;
|
|
textElement.innerHTML = text.replace(/[\u3000-\u303F\uFF01-\uFF0F\uFF1A-\uFF1E\uFF3B-\uFF3F\uFF5B-\uFF60\uFFE0-\uFFE6\u00D2]/g, "<br>");
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |