mirror of
https://github.com/LC044/WeChatMsg
synced 2024-11-15 14:31:18 +08:00
325 lines
16 KiB
HTML
325 lines
16 KiB
HTML
<!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>
|