<!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/19/6581b8a72bbaf.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/19/6581b720efae7.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>