mirror of
https://github.com/LC044/WeChatMsg
synced 2025-02-22 19:02:17 +08:00
442 lines
12 KiB
HTML
442 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>微信年度聊天报告</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<link rel="stylesheet" href="https://memotrace.cn/static/css/fullpage.min.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>
|
|
<script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/maps/china.js"></script>
|
|
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
|
|
<script type="text/javascript" src="https://memotrace.cn/static/js/fullpage.min.js"></script>
|
|
<script type="text/javascript" src="https://davidshimjs.github.io/qrcodejs/qrcode.min.js"></script>
|
|
<style>
|
|
body {
|
|
/* background-color: rgb(57,56,206); */
|
|
background: linear-gradient(to right, #9ebdd8,#84aeea),
|
|
url("critters.png");
|
|
/* background-image: url('../img/背景.png'); */
|
|
margin: 0;
|
|
display: flex;
|
|
color: #fcf5f5;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.section{
|
|
height: 100vh;
|
|
margin: 0px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.slide{
|
|
margin: 0px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
#snow {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
pointer-events: none;
|
|
z-index: 1000;
|
|
}
|
|
@keyframes snowfall {
|
|
from {
|
|
transform: translateY(-100vh);
|
|
}
|
|
to {
|
|
transform: translateY(100vh);
|
|
}
|
|
}
|
|
.snowflake {
|
|
position: absolute;
|
|
background-image: url('../img/snow2.png');
|
|
background-size: contain; /* ä¿æŒé›ªèŠ±å›¾ç‰‡çš„原始比例 */
|
|
animation: snowfall linear infinite;
|
|
animation-duration: 15s; /* ä¿®æ”¹ä¸ºä½ å¸Œæœ›çš„åŠ¨ç”»æŒç»æ—¶é—´ */
|
|
animation-delay: calc(-15s * var(--animation-order));
|
|
}
|
|
.snowflake0 {
|
|
position: absolute;
|
|
background-color: #fff;
|
|
border-radius: 50%;
|
|
content: '';
|
|
z-index: -1;
|
|
}
|
|
.Mountain-Image{
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
max-height: 20%;
|
|
}
|
|
/* home */
|
|
|
|
ul,li{
|
|
list-style:none;
|
|
}
|
|
ul{
|
|
overflow:hidden;
|
|
padding:3em;
|
|
}
|
|
ul li a{
|
|
text-decoration:none;
|
|
color:#000 ;
|
|
background:#ffc ;
|
|
display:block;
|
|
height:10em;
|
|
width:10em;
|
|
padding:1em;
|
|
}
|
|
ul li{
|
|
margin:1em;
|
|
float:left;
|
|
}
|
|
|
|
ul li h2
|
|
{
|
|
margin: 0;
|
|
font-size: 140%;
|
|
font-weight: bold;
|
|
padding-bottom: 10px;
|
|
}
|
|
ul li p
|
|
{
|
|
margin: 0;
|
|
font-family: “Reenie Beanie” ,arial,sans-serif,微软雅黑;
|
|
font-size: 110%;
|
|
}
|
|
|
|
ul li a
|
|
{
|
|
text-decoration: none;
|
|
color: #000 ;
|
|
background: #ffc ;
|
|
display: block;
|
|
height: 10em;
|
|
width: 10em;
|
|
padding: 1em; /* Firefox */
|
|
-moz-box-shadow: 5px 5px 7px rgba(33,33,33,1) ; /* Safari+Chrome */
|
|
-webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7) ; /* Opera */
|
|
box-shadow: 5px 5px 7px rgba(33,33,33,.7) ;
|
|
}
|
|
ul li a{
|
|
-webkit-transform:rotate(-6deg);
|
|
-o-transform:rotate(-6deg);
|
|
-moz-transform:rotate(-6deg);
|
|
}
|
|
|
|
ul li:nth-child(even) a{
|
|
-o-transform:rotate(4deg);
|
|
-webkit-transform:rotate(4deg);
|
|
-moz-transform:rotate(4deg);
|
|
position:relative;
|
|
top:5px;
|
|
}
|
|
ul li:nth-child(3n) a{
|
|
-o-transform:rotate(-3deg);
|
|
-webkit-transform:rotate(-3deg);
|
|
-moz-transform:rotate(-3deg);
|
|
position:relative;
|
|
top:-5px;
|
|
}
|
|
ul li:nth-child(5n) a{
|
|
-o-transform:rotate(5deg);
|
|
-webkit-transform:rotate(5deg);
|
|
-moz-transform:rotate(5deg);
|
|
position:relative;
|
|
top:-10px;
|
|
}
|
|
|
|
ul li a:hover,ul li a:focus{
|
|
-moz-box-shadow:10px 10px 7px rgba(0,0,0,.7) ;
|
|
-webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7) ;
|
|
box-shadow:10px 10px 7px rgba(0,0,0,.7) ;
|
|
-webkit-transform: scale(1.25);
|
|
-moz-transform: scale(1.25);
|
|
-o-transform: scale(1.25);
|
|
position:relative;
|
|
z-index:5;
|
|
}
|
|
|
|
ul li:nth-child(even) a{
|
|
-o-transform:rotate(4deg);
|
|
-webkit-transform:rotate(4deg);
|
|
-moz-transform:rotate(4deg);
|
|
position:relative;
|
|
top:5px;
|
|
background:#cfc ;
|
|
}
|
|
ul li:nth-child(3n) a{
|
|
-o-transform:rotate(-3deg);
|
|
-webkit-transform:rotate(-3deg);
|
|
-moz-transform:rotate(-3deg);
|
|
position:relative;
|
|
top:-5px;
|
|
background:#ccf ;
|
|
}
|
|
a{
|
|
padding: 0px;
|
|
}
|
|
.contact-container{
|
|
padding-bottom: 5px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.avatar{
|
|
height: 45px;
|
|
width: 45px;
|
|
border-radius: 50%;
|
|
}
|
|
.nickname{
|
|
font: 1.1em sans-serif;
|
|
font-weight: bold;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
text-overflow: ellipsis; /* 显示省略号 */
|
|
max-width: 200px; /* 设置最大宽度，可以根据需要调整 */
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
/* CSS代码 */
|
|
.number {
|
|
font: 1.1em sans-serif;
|
|
color: #af27ca;
|
|
margin: 5px;
|
|
}
|
|
|
|
|
|
#cover {
|
|
text-align: center;
|
|
animation: fadeIn 3s ease-out;
|
|
}
|
|
|
|
.cover {
|
|
text-align: center;
|
|
animation: fadeIn 3s ease-out;
|
|
}
|
|
h1 {
|
|
color: #003366;
|
|
font-size: 3em;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
p {
|
|
color: #0066cc;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
#enterButton {
|
|
cursor: pointer;
|
|
padding: 10px 20px;
|
|
background-color: #003366;
|
|
color: #fff;
|
|
border: none;
|
|
font-size: 1em;
|
|
margin-top: 20px;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
#enterButton:hover {
|
|
background-color: #001a33;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.chart{
|
|
width: 800px;
|
|
height: 500px;
|
|
}
|
|
.chart-container{
|
|
display: flex;
|
|
}
|
|
#word_cloud{
|
|
width: 700px;
|
|
height: 600px;
|
|
}
|
|
@media screen and (max-width:480px){
|
|
.chart{
|
|
width: 300px;
|
|
height: 400px;
|
|
}
|
|
.chart-container{
|
|
display:flex;
|
|
flex-direction: column;
|
|
}
|
|
#word_cloud{
|
|
width: 400px;
|
|
height: 400px;
|
|
}
|
|
}
|
|
|
|
#keywords {
|
|
font-size: 2.5em;
|
|
color: #003366;
|
|
animation: slideIn 1.5s ease-out;
|
|
transform: skew(-15deg);
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-50px) skew(-15deg);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0) skew(-15deg);
|
|
}
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="snow"></div>
|
|
<!-- Your content goes here -->
|
|
<div id="fullpage">
|
|
<div class="section">
|
|
<div id="cover">
|
|
<h1>年度聊天报告</h1>
|
|
<p>可掌控的才真正属于你</p>
|
|
<button id="enterButton" onclick="navigateToNextPage()">进入报告</button>
|
|
</div>
|
|
</div>
|
|
<div class="section cover">
|
|
<h1>2023年</h1>
|
|
<p>你一共给<span class="number">{{contact_num}}</span>个联系人<br>发送了<span class="number">{{send_msg_num}}</span>条消息<br>收到了<span class="number">{{receive_msg_num}}</span>条消息<br>总计<span class="number">{{total_text_num}}</span>字</p>
|
|
<p>男<span class="number">{{man_contact_num}}</span>人 女<span class="number">{{woman_contact_num}}</span>人 </p>
|
|
<div class="slide" data-anchor="slide1">
|
|
<div id="contact_region_map" class="chart" ></div>
|
|
</div>
|
|
<div class="slide" data-anchor="slide1">
|
|
<div id="types-chart" class="chart"></div>
|
|
</div>
|
|
<div class="slide" data-anchor="slide1">
|
|
<div id="sender-chart" class="chart" ></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="section cover">
|
|
<h1>年度关键词</h1>
|
|
<div id="keywords">“{{keyword}}”<span class="number">{{keyword_max_num}}</span>次</div>
|
|
<div id="word_cloud"></div>
|
|
</div>
|
|
<div class="section cover">
|
|
<h1>年度聊天好友</h1>
|
|
<h2>聊天榜单</h2>
|
|
<ul>
|
|
{% for contact,msg_num,text_length in contact_topN:%}
|
|
<li>
|
|
<a href="/charts/{{contact.wxid}}" target="_blank">
|
|
<div class="contact-container">
|
|
<p class="nickname">{{contact.remark}}</p>
|
|
<img class="avatar" src="{{contact.smallHeadImgUrl}}">
|
|
</div>
|
|
<div style="color: blueviolet;"><span class="number">{{msg_num}}</span>条消息<br><span class="number">{{text_length}}</span>字</div>
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
<div class="section" style="text-align: center;display:flex;justify-content: center;align-items: center;">
|
|
<h1>敬请期待</h1>
|
|
<div>
|
|
<img src="https://memotrace.cn/img/logo3.0.png" alt="Logo">
|
|
<p class="text-larger mb-2">Copyrights © 2022-2024 <a href="https://memotrace.cn/">SiYuan</a> 版权所有. Inc.</p>
|
|
<!-- <span class="op-07">请遵守所在国家的相关法律法规</span> -->
|
|
</div>
|
|
</div>
|
|
</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>
|
|
$(document).ready(function() {
|
|
$('#fullpage').fullpage();
|
|
});
|
|
// 获取按钮元素
|
|
var scrollToNextButton = document.getElementById('scrollToNext');
|
|
function navigateToNextPage(){
|
|
fullpage_api.moveSectionDown();
|
|
}
|
|
</script>
|
|
<script>
|
|
var chart_51ebd4312946429e9c32b2b55b96a479 = echarts.init(
|
|
document.getElementById('types-chart'), 'white', {renderer: 'canvas'});
|
|
var result = {{chart_data_types|safe}};
|
|
chart_51ebd4312946429e9c32b2b55b96a479.setOption(result);
|
|
|
|
var chart_51ebd4312946429e9c32b2b55b96a479 = echarts.init(
|
|
document.getElementById('contact_region_map'), 'white', {renderer: 'canvas'});
|
|
var result = {{contact_region_map|safe}};
|
|
chart_51ebd4312946429e9c32b2b55b96a479.setOption(result);
|
|
|
|
var chart_51ebd4312946429e9c32b2b55b96a4 = echarts.init(
|
|
document.getElementById('sender-chart'), 'white', {renderer: 'canvas'});
|
|
var result = {{chart_data_sender|safe}};
|
|
chart_51ebd4312946429e9c32b2b55b96a4.setOption(result);
|
|
|
|
var chart_51ebd4312946429e9c32b2b55b96 = echarts.init(
|
|
document.getElementById('word_cloud'), 'white', {renderer: 'canvas'});
|
|
var result = {{chart_data_wordcloud|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_51ebd4312946429e9c32b2b55b96.setOption(result);
|
|
</script>
|
|
</body>
|
|
</html>
|