mirror of
https://github.com/LC044/WeChatMsg
synced 2025-02-22 10:52:18 +08:00
新增我的年度聊天报告
This commit is contained in:
SiYuan
parent
cb83c5bd81
commit
0d979b2e62
@ -1,196 +1,336 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
|
||||
<title></title>
|
||||
<style type="text/css">
|
||||
html,
|
||||
<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.lc044.love/static/css/fullpage.min.css" />
|
||||
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
|
||||
<script type="text/javascript" src="https://memotrace.lc044.love/static/js/fullpage.min.js"></script>
|
||||
<script type="text/javascript" src="https://davidshimjs.github.io/qrcodejs/qrcode.min.js"></script>
|
||||
<style>
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
body,
|
||||
ul,
|
||||
li,
|
||||
a,
|
||||
p,
|
||||
div {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
#wrap {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
#main {
|
||||
top: 0;
|
||||
position: relative;
|
||||
}
|
||||
.page {
|
||||
width: 100%;
|
||||
/* background-color: rgb(57,56,206); */
|
||||
background: linear-gradient(to right, #9ebdd8,#84aeea),
|
||||
url("critters.png");
|
||||
/* background-image: url('../img/背景.png'); */
|
||||
margin: 0;
|
||||
}
|
||||
#pageUl {
|
||||
color: #8a6d3b;
|
||||
display: flex;
|
||||
color: #fcf5f5;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.section{
|
||||
height: 100vh;
|
||||
margin: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
#snow {
|
||||
position: fixed;
|
||||
right: 10px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
}
|
||||
@keyframes snowfall {
|
||||
from {
|
||||
transform: translateY(-100vh);
|
||||
}
|
||||
#nextButton,#lastButton {
|
||||
color: #000;
|
||||
background-color: #8a6d3b;
|
||||
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;
|
||||
border-radius: 10px;
|
||||
font-size: 1em;
|
||||
margin-top: 20px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
#enterButton:hover {
|
||||
background-color: #001a33;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="wrap">
|
||||
<div id="main">
|
||||
<div><button id="nextButton" style="position: fixed; bottom: 10px; right: 10px;">Next Page</button></div>
|
||||
<div><button id="lastButton" style="position: fixed; bottom: 10px; right: 100px;">Last Page</button></div>
|
||||
<ul id="pageUl" type="circle">
|
||||
<li id="pageUlLi1" class="pageUlLi" style="color: red;"> </li>
|
||||
<li id="pageUlLi2" class="pageUlLi"> </li>
|
||||
<li id="pageUlLi3" class="pageUlLi"> </li>
|
||||
<li id="pageUlLi4" class="pageUlLi"> </li>
|
||||
<li id="pageUlLi5" class="pageUlLi"> </li>
|
||||
<li id="pageUlLi6" class="pageUlLi"> </li>
|
||||
<li id="pageUlLi7" class="pageUlLi"> </li>
|
||||
<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>我的年度好友</h1>
|
||||
<h2>聊天榜单</h2>
|
||||
<ul>
|
||||
{% for contact,msg_num 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">000</span>字</div>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div id="page1" class="page">
|
||||
<iframe src="/home" frameborder="0" height="100%" width="100%" class="if00"></iframe>
|
||||
</div>
|
||||
<div id="page2" class="page">
|
||||
<iframe src="/wordcloud/1" frameborder="0" height="100%" width="100%" class="if00"></iframe>
|
||||
</div>
|
||||
<div id="page3" class="page">
|
||||
<iframe src="/wordcloud/0" frameborder="0" height="100%" width="100%" class="if00"></iframe>
|
||||
</div>
|
||||
<div style="background-color: #8a6d3b" id="page4" class="page">
|
||||
<iframe src="/test" frameborder="0" id="iframe0" height="100%" width="100%" class="if00"></iframe>
|
||||
</div>
|
||||
<div style="background-color: #337ab7" id="page5" class="page">
|
||||
<iframe src="test" frameborder="0" id="iframe3" height="100%" width="100%" class="if00"></iframe>
|
||||
</div>
|
||||
<div style="background-color: #337ab7" id="page6" class="page">
|
||||
<iframe src="test" frameborder="0" id="iframe4" height="100%" width="100%" class="if00"></iframe>
|
||||
</div>
|
||||
<div style="background-color: #337ab7" id="page7" class="page">
|
||||
<iframe src="test" frameborder="0" id="iframe5" height="100%" width="100%" class="if00"></iframe>
|
||||
<div class="section" style="text-align: center;display:flex;justify-content: center;align-items: center;">
|
||||
<h1>分享此页面</h1>
|
||||
<div>
|
||||
<a id="share" href="https://memotrace.lc044.love/" target="_blank">https://memotrace.lc044.love/</a>
|
||||
</div>
|
||||
<button onclick="confirmUpload()">上传并显示二维码</button>
|
||||
<div id="qrcode"></div>
|
||||
<a href="https://memotrace.lc044.love/" target="_blank">点击生成我的年度聊天报告</a>
|
||||
</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);
|
||||
|
||||
<script type="text/javascript">
|
||||
window.onload = resizeImages;
|
||||
window.onresize = resizeImages;
|
||||
// 设置雪花的随机大小
|
||||
const size = ran * 20 + 10; // 随机大小在 10 到 30 之间
|
||||
snowflake.style.width = `${size}px`;
|
||||
snowflake.style.height = `${size}px`;
|
||||
|
||||
function resizeImages() {
|
||||
$(function (e) {
|
||||
var screenWeight = document.documentElement.clientWidth;
|
||||
var screenHeight = document.documentElement.clientHeight;
|
||||
$("[name=pageImg]").css("width", screenWeight).css("height", screenHeight);
|
||||
$("#pageUl").css("bottom", screenHeight >> 1);
|
||||
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);
|
||||
}
|
||||
|
||||
var index = 1;
|
||||
var curIndex = 1;
|
||||
var wrap = document.getElementById("wrap");
|
||||
var main = document.getElementById("main");
|
||||
var hei = document.body.clientHeight;
|
||||
wrap.style.height = hei + "px";
|
||||
var obj = document.getElementsByTagName("div");
|
||||
for (var i = 0; i < obj.length; i++) {
|
||||
if (obj[i].className == 'page') {
|
||||
obj[i].style.height = hei + "px";
|
||||
}
|
||||
}
|
||||
var pageNum = document.querySelectorAll(".page").length;
|
||||
|
||||
var startTime = 0,
|
||||
endTime = 0,
|
||||
now = 0;
|
||||
if ((navigator.userAgent.toLowerCase().indexOf("firefox") != -1)) {
|
||||
document.addEventListener("DOMMouseScroll", scrollFun, false);
|
||||
} else if (document.addEventListener) {
|
||||
document.addEventListener("wheel", scrollFun, false);
|
||||
} else if (document.attachEvent) {
|
||||
document.attachEvent("onmousewheel", scrollFun);
|
||||
} else {
|
||||
document.onmousewheel = scrollFun;
|
||||
}
|
||||
|
||||
function scrollFun(event) {
|
||||
startTime = new Date().getTime();
|
||||
var delta = event.detail || (-event.wheelDelta);
|
||||
console.info(index);
|
||||
if ((endTime - startTime) < -1000) {
|
||||
if (delta > 0 && parseInt(main.offsetTop) > -(hei * (pageNum - 1))) {
|
||||
index++;
|
||||
toPage(index);
|
||||
// iframeAddEventListener();
|
||||
}
|
||||
if (delta < 0 && parseInt(main.offsetTop) < 0) {
|
||||
index--;
|
||||
toPage(index);
|
||||
// iframeAddEventListener();
|
||||
}
|
||||
endTime = new Date().getTime();
|
||||
} else {
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
function toPage(idx) {
|
||||
if (idx != curIndex) {
|
||||
index = idx
|
||||
var delta = idx - curIndex;
|
||||
now = now - delta * hei;
|
||||
$("#main").animate({
|
||||
top: (now + 'px')
|
||||
}, 500);
|
||||
curIndex = idx;
|
||||
$(".pageUlLi").css("color", "#8a6d3b");
|
||||
$("#pageUlLi" + idx).css("color", "red");
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById("nextButton").onclick = function () {
|
||||
if (index < pageNum) {
|
||||
index++;
|
||||
toPage(index);
|
||||
}
|
||||
};
|
||||
document.getElementById("lastButton").onclick = function () {
|
||||
if (index > 1) {
|
||||
index--;
|
||||
toPage(index);
|
||||
}
|
||||
};
|
||||
document.getElementById("pageUlLi1").onclick = function () {
|
||||
toPage(1);
|
||||
}
|
||||
document.getElementById("pageUlLi2").onclick = function () {
|
||||
toPage(2);
|
||||
}
|
||||
document.getElementById("pageUlLi3").onclick = function () {
|
||||
toPage(3);
|
||||
}
|
||||
document.getElementById("pageUlLi4").onclick = function () {
|
||||
toPage(4);
|
||||
}
|
||||
document.getElementById("pageUlLi5").onclick = function () {
|
||||
toPage(5);
|
||||
}
|
||||
document.getElementById("pageUlLi6").onclick = function () {
|
||||
toPage(6);
|
||||
}
|
||||
document.getElementById("pageUlLi7").onclick = function () {
|
||||
toPage(7);
|
||||
</script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('#fullpage').fullpage();
|
||||
});
|
||||
// 获取按钮元素
|
||||
var scrollToNextButton = document.getElementById('scrollToNext');
|
||||
function navigateToNextPage(){
|
||||
fullpage_api.moveSectionDown();
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -22,6 +22,7 @@ time_range = (start_time, end_time)
|
||||
html: str = ''
|
||||
api_url = 'http://api.lc044.love/upload'
|
||||
|
||||
|
||||
def get_contact(wxid):
|
||||
contact_info_list = micro_msg_db.get_contact_by_username(wxid)
|
||||
contact_info = {
|
||||
@ -36,10 +37,19 @@ def get_contact(wxid):
|
||||
contact = Contact(contact_info)
|
||||
return contact
|
||||
|
||||
|
||||
@app.route("/")
|
||||
def index():
|
||||
# 渲染模板，并传递图表的 HTML 到模板中
|
||||
return "index.html"
|
||||
contact_topN_num = msg_db.get_chatted_top_contacts(time_range=time_range, top_n=6)
|
||||
contact_topN = []
|
||||
for wxid,num in contact_topN_num:
|
||||
contact = get_contact(wxid)
|
||||
contact_topN.append([contact,num])
|
||||
data = {
|
||||
'avatar': Me().smallHeadImgUrl,
|
||||
'contact_topN':contact_topN,
|
||||
}
|
||||
return render_template('index.html', **data)
|
||||
|
||||
|
||||
@app.route("/christmas/<wxid>")
|
||||
@ -225,7 +235,7 @@ def charts(wxid):
|
||||
except TypeError:
|
||||
first_time = '2023-01-01 00:00:00'
|
||||
data = {
|
||||
'wxid':wxid,
|
||||
'wxid': wxid,
|
||||
'my_nickname': Me().name,
|
||||
'ta_nickname': contact.remark,
|
||||
'first_time': first_time
|
||||
@ -236,7 +246,7 @@ def charts(wxid):
|
||||
@app.route('/calendar', methods=['POST'])
|
||||
def get_calendar():
|
||||
wxid = request.json.get('wxid')
|
||||
time_range = request.json.get('time_range',[])
|
||||
time_range = request.json.get('time_range', [])
|
||||
world_cloud_data = analysis.calendar_chart(wxid, time_range=time_range)
|
||||
return jsonify(world_cloud_data)
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user