<!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>