152 lines
6.3 KiB
HTML
152 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>EndOfYear</title>
|
|
{% if web_status == 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 web_status == 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/Time.ogg" type="audio/music/bgm.mp3">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">亲爱的{{ data.blog_name }}</p>
|
|
{% if data.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>{{ data.blog_life_year }}</small> 年
|
|
<small>{{ data.blog_life_day }}</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>{{ data.blog_article_count }}</small>
|
|
篇博文</p>
|
|
<p class="animate__animated animate__fadeInUp animate__delay-3s"><small>{{ data.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__fadeInDown animate__delay-1s">{{ data.blog_content_date }}那天，你写下了</p>
|
|
<p class="animate__animated animate__fadeInDown animate__delay-2s">{{ data.blog_title }}</p>
|
|
<p class="animate__animated animate__fadeInDown animate__delay-3s">{{ data.blog_content }}<small>……</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="container animate__animated animate__fadeIn animate__slow" id="tab5">
|
|
<div class="tab5-box">
|
|
{% for keyword in data.blog_top_keywords %}
|
|
<p>{{ 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="tab6">
|
|
<div class="tab6-box">
|
|
<p class="animate__animated animate__fadeInLeft animate__delay-1s">热爱{{ data.blog_category }}的你</p>
|
|
<p class="animate__animated animate__fadeInLeft animate__delay-2s">一定要继续砥砺前行!</p>
|
|
</div>
|
|
</div>
|
|
<div class="container animate__animated animate__fadeIn animate__slow" id="tab7">
|
|
<div class="tab7-box">
|
|
|
|
</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();
|
|
audioElement.pause();
|
|
popup.style.display = 'none'; // 隐藏弹出窗口
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |