104 lines
4.6 KiB
HTML
104 lines
4.6 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"></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);
|
||
|
|
var 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();
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|