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