<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信年度聊天报告</title>
    <link rel="stylesheet" href="https://memotrace.lc044.love/static/css/style.css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts-wordcloud.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullpage.js/dist/fullpage.min.css" />
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullpage.js/dist/fullpage.min.js"></script>
</head>
<body>
    <div id="snow"></div>
    <!-- Your content goes here -->
<div id="fullpage">
    <div class="section">
        <div>
            <img class="Mountain-Image" src="https://www.freeimg.cn/i/2023/12/20/6582c04711cd2.png" alt="Mountain Image">
            <img class="corner-light light-top-left" src="https://www.freeimg.cn/i/2023/12/20/6582c05d9dcbb.png" alt="Top Left Light">
            <img class="corner-light light-top-right" src="https://www.freeimg.cn/i/2023/12/20/6582c07b257db.png" alt="Bottom Right Light">
            <img src="https://www.freeimg.cn/i/2023/12/20/6582c0514c518.png" alt="Left Bottom Image" class="corner-image left-bottom">
            <img src="https://www.freeimg.cn/i/2023/12/20/6582c04946138.png" alt="Right Top Image" class="corner-image right-bottom">

        <div class="center-container">
            <div>
                <img src="https://www.freeimg.cn/i/2023/12/20/6582c05a78e58.png">
            </div>
            <div class="user-container">
                <div class="user">
                    <img class="avatar" src="{{my_avatar_path}}">
                  <span class="nickname">{{my_nickname}}</span>
                </div>

                <img src="https://memotrace.lc044.love/static/img/铃铛.png" alt="Right Top Image" class="spliter-img">
                <div class="user">
                    <img class="avatar" src="{{ta_avatar_path}}">
                  <span class="nickname">{{ta_nickname}}</span>
                </div>
            </div>
            <div>
                <p class="mt-3">我们第一次聊天在</p>
                <p id="first_time" class="first-time">{{first_time}}</p>
                <p class="mt-3">距今已有</p>
                <div class="mt-3">
                    <span id="t_d"></span>
                    <span id="t_h"></span>
                    <span id="t_m"></span>
                    <span id="t_s"></span>
                </div>
            </div>
            <!-- <div>
                <img src="img/雪人.gif">
            </div>
            <div>
                <img src="img/雪人1.gif">
            </div> -->
        </div>
        </div>
    </div>
    <div class="section">
        <div>
            <img class="Mountain-Image" src="https://www.freeimg.cn/i/2023/12/20/6582c04711cd2.png" alt="Mountain Image">
            <img class="corner-light light-top-left" src="https://www.freeimg.cn/i/2023/12/20/6582c05d9dcbb.png" alt="Top Left Light">
            <img class="corner-light light-top-right" src="https://www.freeimg.cn/i/2023/12/20/6582c07b257db.png" alt="Bottom Right Light">
            <img src="https://www.freeimg.cn/i/2023/12/20/6582c07223f22.png" alt="礼袋" class="corner-image left-bottom-gift">
            <img src="https://www.freeimg.cn/i/2023/12/20/6582c055cc6df.png" alt="圣诞老人" class="corner-image right-bottom-oldman">
        </div>
        <div class="wordcloud">
            <div id="word_cloud" class="chart-container"></div>
        </div>
        <div class="keyword-container">
            <div class="tp1">二〇二三</div>
            <div class="tp1">你们说的最多的是</div>
            <div class="keyword">“{{keyword}}”<span class="keyword-num">{{keyword_max_num}}</span><span class="tp1">次</span></div>
            <!-- <img src="static/img/窗雪.png"> -->
        </div>
        <div class="dialog-container">
            {% for dialog in dialogs %}
               <div class="item item-center">{{dialog[0][3]}}</div>
                {% if dialog[0][0]==0: %}
                     <div class="item item-left">
                        <img class="bubble-avatar" src="{{ta_avatar_path}}">
                        <div class="bubble bubble-left">
                            {% for p in dialog[0][2][:-1] %}
                                {{p}}<span style="color:red">{{keyword}}</span>
                            {% endfor %}
                            {{dialog[0][2][-1]}}
                        </div>
                    </div>
                    <div class="item item-right">
                        <div class="bubble bubble-right">
                            {{dialog[1][2]}}
                        </div>
                        <img class="bubble-avatar" src="{{my_avatar_path}}">
                    </div>
                {% endif %}
                {% if dialog[0][0]==1: %}
                     <div class="item item-right">
                        <div class="bubble bubble-right">
                            {% for p in dialog[0][2][:-1] %}
                                {{p}}<span style="color:red">{{keyword}}</span>
                            {% endfor %}
                            {{dialog[0][2][-1]}}
                        </div>
                         <img class="bubble-avatar" src="{{my_avatar_path}}">
                    </div>
                    <div class="item item-left">
                        <img class="bubble-avatar" src="{{ta_avatar_path}}">
                        <div class="bubble bubble-left">
                            {{dialog[1][2]}}
                        </div>
                    </div>
                {% endif %}
            {% endfor %}
        </div>
    </div>
    <div class="section">
        <div>
            <img class="Mountain-Image" src="https://www.freeimg.cn/i/2023/12/20/6582c04711cd2.png" alt="Mountain Image">
            <img class="corner-light light-top-left txt" src="https://www.freeimg.cn/i/2023/12/20/6582c05d9dcbb.png" alt="Top Left Light">
            <img class="corner-light light-top-right txt" src="https://www.freeimg.cn/i/2023/12/20/6582c07b257db.png" alt="Bottom Right Light">
            <img src="https://www.freeimg.cn/i/2023/12/20/6582c04589c47.png" alt="Left Bottom Image" class="corner-image left-bottom">
            <img src="https://www.freeimg.cn/i/2023/12/21/65831360a36d4.gif" alt="Right Top Image" class="corner-image right-bottom" style="max-height: 500px;">
            <img src="https://www.freeimg.cn/i/2023/12/20/6582c054816cf.png" alt="圣诞老人" class="center-top-time">
            <img src="https://memotrace.lc044.love/static/img/平安夜.png" alt="Right Top Image" class="left-time">
            <div class="time-container">
                <div class="text112">{{latest_time}}</div>
                <div class="text112">这么晚了你们还在聊天</div>
                <div class="text112">那天一定有你们<span style="color: brown;">难忘的回忆</span>吧</div>
                <div><br></div>
                <div class="text112">你们都是<span style="color: brown;">{{chat_time_label}}</span></div>
                <div class="text113">{{chat_time}}</div>
                <div class="text112">你们一共发送了<span style="color: brown;">{{chat_time_num}}</span>条消息</div>
            </div>
            <div class="parent">
                <div class="dialog-container-time">
                    <div class="item item-center">{{latest_time}}</div>
                    {% for dialog in latest_time_dialog %}
                        {% if dialog[0]==0: %}
                             <div class="item item-left">
                                <img class="bubble-avatar" src="{{ta_avatar_path}}">
                                <div class="bubble bubble-left">
                                    {{dialog[1]}}
                                </div>
                            </div>
                        {% endif %}
                        {% if dialog[0]==1: %}
                             <div class="item item-right">
                                <div class="bubble bubble-right">
                                    {{dialog[1]}}
                                </div>
                                 <img class="bubble-avatar" src="{{my_avatar_path}}">
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    <div class="section">
        <div>
            <img class="Mountain-Image" src="https://www.freeimg.cn/i/2023/12/20/6582c04711cd2.png" alt="Mountain Image">
            <img class="corner-light light-top-left txt" src="https://www.freeimg.cn/i/2023/12/20/6582c05d9dcbb.png" alt="Top Left Light">
            <img class="corner-light light-top-right txt" src="https://www.freeimg.cn/i/2023/12/20/6582c07b257db.png" alt="Bottom Right Light">
            <img src="https://www.freeimg.cn/i/2023/12/20/6582c03ce4548.png" alt="Left Bottom Image" class="corner-image left-bottom">
            <img src="https://www.freeimg.cn/i/2023/12/20/6582c05a9a4bd.png" alt="滑雪的小女孩" class="corner-image right-bottom">
            <img src="https://www.freeimg.cn/i/2023/12/20/6582c04d5151f.png" alt="Right Top Image" class="snow-ball">
            <img src="https://memotrace.lc044.love/static/img/礼盒1.png" alt="Right Top Image" class="ttq">
            <div class="time-container">
                <div class="text112">过去的一年里</div>
                <div class="text112">你们一共发送了<span style="color: brown;">{{total_msg_num}}</span>条消息</div>
                <div class="text112">总计<span style="color: brown;">{{total_num}}</span>字</div>
                <div><br></div>
                <div class="text112">你们的聊天似乎没有规律</div>
                <div class="text112">
                    <span style="color: brown;">{{max_month}}</span>
                    一共发送了
                    <span style="color: brown;">{{max_month_num}}</span>
                    条消息
                </div>
                <div class="text112">对你的话说不完</div>
                <div><br></div>
                <div class="text112">
                    <span style="color: brown;">{{min_month}}</span>
                    只有
                    <span style="color: brown;">{{min_month_num}}</span>
                    条消息
                </div>
                <div class="text112">有时候你们也想静静</div>
            </div>
        </div>
    </div>
    <div class="section">
            <div>
                <img class="Mountain-Image" src="https://www.freeimg.cn/i/2023/12/20/6582c04711cd2.png" alt="Mountain Image">
                <img class="corner-light light-top-left txt" src="https://www.freeimg.cn/i/2023/12/20/6582c05d9dcbb.png" alt="Top Left Light">
                <img class="corner-light light-top-right txt" src="https://www.freeimg.cn/i/2023/12/20/6582c07b257db.png" alt="Bottom Right Light">
                <img src="https://www.freeimg.cn/i/2023/12/20/6582c064276db.png" alt="包饺子" class="corner-image left-bottom">
                <img src="https://www.freeimg.cn/i/2023/12/21/658313714609b.png" alt="Right Top Image" class="corner-image right-bottom">
                <div class="calendar-container">
                    <div class="text012">{{year}}年</div>
                    <div class="text012">
                        我们有
                        <span style="color: brown;">{{chat_days}}</span>
                        天在聊天
                    </div>
                    <div class="text012">有你在的日子里</div>
                    <div class="text012">
                        都很有
                        <span style="color: brown;">意义</span>！
                    </div>
                    <div><br></div>
                    <div class="text012">这一年</div>
                    <div class="text012">
                        一共发送了
                        <span style="color: brown;">{{emoji_total_num}}</span>
                        个表情包
                    </div>
                    <div class="text012">Ta最常用的表情包是</div>
                    <img src="{{emoji_url}}" class="emoji">
                    <div class="text012">
                        一共
                        <span style="color: brown;">{{emoji_num}}</span>次
                    </div>
                </div>
                <div id="calendar-chart" class="calendar-chart"></div>
            </div>
    </div>
    <div class="section">
        <h1 style="text-align: center;">敬请期待</h1>
    </div>
    <!-- Add more sections as needed -->
</div>


<script>
    // JavaScript 代码用于生成聊天内容和雪花动画
    document.addEventListener('DOMContentLoaded', function () {
        const snowContainer = document.getElementById('snow');
        // 生成雪花动画
        for (let i = 0; i < 50; i++) {
            const snowflake = document.createElement('div');
            snowflake.className = 'snowflake';
            var ran = Math.random();
            var ran0 = 1-ran;
            snowflake.style.left = `${Math.random() * 150}vw`;
            snowflake.style.animationDuration = `${ran0  * 20 + 7}s`;
            snowflake.style.setProperty('--animation-order', i);

            // 设置雪花的随机大小
            const size = ran * 20 + 10; // 随机大小在 10 到 30 之间
            snowflake.style.width = `${size}px`;
            snowflake.style.height = `${size}px`;

            snowContainer.appendChild(snowflake);
        }
    });
    function createSnowflake(top, left) {
      const snowflake = document.createElement('div');
      snowflake.className = 'snowflake0';
      snowflake.style.top = `${top}vh`;
      snowflake.style.left = `${left}vw`;
      // 设置雪花的随机大小
      const size = Math.random() * 20 + 10; // 随机大小在 10 到 30 之间
        snowflake.style.width = `${size}px`;
        snowflake.style.height = `${size}px`;
      document.body.appendChild(snowflake);
    }
</script>
<script>
    var chart = echarts.init(document.getElementById('word_cloud'), 'white', {renderer: 'canvas'});
    var result = {{wordcloud_chart_data|safe}};
    // 获取屏幕宽度
    const screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

    // 根据屏幕宽度设置字体范围
    let fontSizeRange;
    if (screenWidth < 768) { // 手机屏幕
        fontSizeRange = [5, 40];
    } else { // 电脑屏幕
        fontSizeRange = [10, 100];
    }
    result.series[0].sizeRange = fontSizeRange;
    chart.setOption(result);
</script>
<script>
    $(document).ready(function() {
      $('#fullpage').fullpage();
    });
  </script>
  <script type="text/javascript"> function getRTime() {
    var tt = document.getElementById("first_time").innerText;
    var EndTime = new Date(tt);
    var NowTime = new Date();
    var t = NowTime.getTime()-EndTime.getTime();
    var d = Math.floor(t / 1000 / 60 / 60 / 24);
    var h = Math.floor(t / 1000 / 60 / 60 % 24);
    var m = Math.floor(t / 1000 / 60 % 60);
    var s = Math.floor(t / 1000 % 60);
    document.getElementById("t_d").innerHTML = d + " 天";
    document.getElementById("t_h").innerHTML = h + " 时";
    document.getElementById("t_m").innerHTML = m + " 分";
    document.getElementById("t_s").innerHTML = s + " 秒";
}
setInterval(getRTime, 1000);

</script>
<script>
    var chart_51ebd4312946429e9c32b2b55b96a479 = echarts.init(
        document.getElementById('calendar-chart'), 'white', {renderer: 'canvas'});
    var result = {{calendar_chart_data|safe}};
    // 根据屏幕宽度设置字体范围
    let cellSize;
    if (screenWidth < 768) { // 手机屏幕
        result.calendar.cellSize = 10;
    } else { // 电脑屏幕
        result.calendar.cellSize = 15;
    }
    chart_51ebd4312946429e9c32b2b55b96a479.setOption(result);
</script>
</body>
</html>
