mirror of
https://github.com/LC044/WeChatMsg
synced 2025-02-23 03:22:17 +08:00
增加html模板
This commit is contained in:
shuaikangzhou
parent
f132796fd6
commit
e412e0afc8
196
app/web_ui/templates/index.html
Normal file
196
app/web_ui/templates/index.html
Normal file
@ -0,0 +1,196 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<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,
|
||||||
|
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%;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
#pageUl {
|
||||||
|
color: #8a6d3b;
|
||||||
|
position: fixed;
|
||||||
|
right: 10px;
|
||||||
|
}
|
||||||
|
#nextButton,#lastButton {
|
||||||
|
color: #000;
|
||||||
|
background-color: #8a6d3b;
|
||||||
|
border: none;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
</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>
|
||||||
|
</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" frameborder="0" height="100%" width="100%" class="if00"></iframe>
|
||||||
|
</div>
|
||||||
|
<div style="background-color: #8a6d3b" id="page3" class="page">
|
||||||
|
<iframe src="/test" frameborder="0" id="iframe0" height="100%" width="100%" class="if00"></iframe>
|
||||||
|
</div>
|
||||||
|
<div style="background-color: #337ab7" id="page4" class="page">
|
||||||
|
<iframe src="test" frameborder="0" id="iframe3" height="100%" width="100%" class="if00"></iframe>
|
||||||
|
</div>
|
||||||
|
<div style="background-color: #337ab7" id="page5" class="page">
|
||||||
|
<iframe src="test" frameborder="0" id="iframe4" height="100%" width="100%" class="if00"></iframe>
|
||||||
|
</div>
|
||||||
|
<div style="background-color: #337ab7" id="page6" class="page">
|
||||||
|
<iframe src="test" frameborder="0" id="iframe5" height="100%" width="100%" class="if00"></iframe>
|
||||||
|
</div>
|
||||||
|
<div style="background-color: #337ab7" id="page7" class="page">
|
||||||
|
<iframe src="test" frameborder="0" id="iframe6" height="100%" width="100%" class="if00"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
window.onload = resizeImages;
|
||||||
|
window.onresize = resizeImages;
|
||||||
|
|
||||||
|
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);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
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>
|
||||||
|
|
||||||
|
</html>
|
||||||
99
app/web_ui/templates/wordcloud.html
Normal file
99
app/web_ui/templates/wordcloud.html
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<!-- saved from url=(0167)http://m2.link/c/year2018/j3POd/?uid=53899B14C24F351212F4DC92673113FC&full_screen=true&keep_status_bar=true&top_bar_bg_color=f9f9f9&status_bar_type=dark&userid=2227269 -->
|
||||||
|
<html lang="en" class=" z-ios">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
|
<meta name="format-detection" content="telephone=no">
|
||||||
|
<meta name="applicable-device" content="mobile">
|
||||||
|
<meta name="viewport"
|
||||||
|
content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
|
<title>年度聊天报告</title>
|
||||||
|
<meta name="yixin-share-desc" content="点击查看，我的年度聊天报告">
|
||||||
|
<meta name="yixin-share-image" content="https://p1.music.126.net/uLDm27B4bC_kKSD8le3WwA==/109951163754269117.jpg">
|
||||||
|
<link rel="shortcut icon" href="http://s1.music.126.net/style/favicon.ico">
|
||||||
|
<script src="http://share.lc044.love:8080/static/my_resource/raven.min.js"></script>
|
||||||
|
<script type="text/javascript" src="http://share.lc044.love:8080/static/my_resource/tool.min.js"></script>
|
||||||
|
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
|
||||||
|
<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
|
||||||
|
<script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts.min.js"></script>
|
||||||
|
<script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts-wordcloud.min.js"></script>
|
||||||
|
<link href="http://share.lc044.love:8080/static/my_resource/vendors.a07adb27.css" rel="stylesheet">
|
||||||
|
<link href="http://share.lc044.love:8080/static/my_resource/main.ff465555.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="j-root" class="g-bd">
|
||||||
|
<div class="m-app">
|
||||||
|
<div class="m-module m-module-report z-modshow">
|
||||||
|
<div class="m-reportcontent f-page">
|
||||||
|
<div class="m-page m-page-01 f-page z-enter">
|
||||||
|
<div class="bg f-page"></div>
|
||||||
|
<div class="tt f-animOpac" style="font-size:30px !important">
|
||||||
|
<h1>二零二三</h1>
|
||||||
|
<h1>你说的最多的是</h1></div>
|
||||||
|
<div class="ckeywords j-anim01 z-anim">
|
||||||
|
<div class="hands">
|
||||||
|
<div class="hand2"></div>
|
||||||
|
<div class="hand1"></div>
|
||||||
|
<div class="hand3"></div>
|
||||||
|
</div>
|
||||||
|
<div class="words words-2">
|
||||||
|
{% for t in keyword %}
|
||||||
|
<span class="word word-1" style="font-size:80px !important">
|
||||||
|
<i class="u-word">{{t}}</i></span>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
<div class="nums f-animOpac">
|
||||||
|
{% for n in max_num[::-1] %}
|
||||||
|
<span class="n">{{n}}</span>
|
||||||
|
{% endfor %}
|
||||||
|
<i class="unit"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hand4"></div>
|
||||||
|
<ul class="lyrics">
|
||||||
|
{% for dialog in dialogs %}
|
||||||
|
<li class="itm f-animLineUp">
|
||||||
|
<div style="transform: translateX(13.7643px);">
|
||||||
|
<div class="line1 f-thide" style="font-size:20px !important">
|
||||||
|
{% for p in dialog[0][2][:-1] %}
|
||||||
|
{{p}}
|
||||||
|
<em class="s-fcRed">{{keyword}}</em>
|
||||||
|
{% endfor %}
|
||||||
|
{{dialog[0][2][-1]}}
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="line2 f-thide">- {{dialog[1][2]}}<br>{{dialog[0][3]}}</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
|
<!-- <li class="itm f-animLineUp">
|
||||||
|
<div style="transform: translateX(26.2581px);">
|
||||||
|
<div class="line1 f-thide" style="font-size:20px !important">我还是
|
||||||
|
<em class="s-fcRed">喜欢</em>大城市
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="line2 f-thide">- 很繁华</div>
|
||||||
|
</div>
|
||||||
|
</li> -->
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div id="word_cloud" class="chart-container" style="width:780px; height:720px;margin: auto;top:22%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="m-btmbar"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
var chart = echarts.init(document.getElementById('word_cloud'), 'white', {renderer: 'canvas'});
|
||||||
|
var result = {{chart_data|safe}};
|
||||||
|
console.log(result);
|
||||||
|
chart.setOption(result);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user