-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (135 loc) · 6.07 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="author" content="maseuko">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<link rel="shortcut icon" href="../../../images/favicon.png" type="image/x-icon">-->
<script src="js/jszip.min.js" defer></script>
<script src="js/main.js" type="module" defer></script>
<link rel="stylesheet" href="style.css">
<title>maseuko - Messenger Analyser</title>
</head>
<body>
<!-- ONLINE VERSION ONLY
<div class="backtohome">
<a href="..">> back <</a>
<a href="/">> home <</a>
</div><br>
-->
<h1>Messenger Analyser</h1>
<div class="tabs">
<button id="tab_upload_btn">File and filters</button>
<button id="tab_msgper_btn">Messages count per week</button>
<button id="tab_msgtot_btn">Total messages count</button>
<button id="tab_wordstot_btn">Words count</button>
</div>
<div id="tab_upload" class="tab">
<h2>Basic usage:</h3>
<p>
1. Visit <a href="https://www.facebook.com/dyi/">this page</a><br>
2. Request a download of your Facebook information. Make sure to select personalized copy instead of complete one, select only "Messages" and make sure the format is JSON (not HTML)<br>
3. Wait until your download is ready<br>
4. Only the last part of your copy is nessesary (if there are more), download it<br>
5. If your file is bigger than 1GB, your browser may refuse to process it. In that case, use <a href="./messenger-shrinker.py" download>this script</a> to shrink it<br>
6. Go back to this page and upload your .zip file below (any informations you submit here are stored only on your computer, the script won't send any data about you to the server)<br>
7. Click "OK"<br>
8. Wait until the status says: "ready!"<br>
9. Select threads of your interest or leave it as it is to display only top 20 of your threads (recomended)<br>
10. Go to the "Messages count per week" tab<br>
<br>
Graphs will be generated showing how many messages were send in each selected thread per week and in total.<br>
Now you can move your cursor along the graph to show more info in the table below or just play with the site to discover more about your Facebook messaging! Have fun!<br>
<br>
© 2023 maseuko. GPL-3.0 License
</p>
<hr>
<h2>Select a file</h3>
<input type="file" id="zipFile" accept=".zip"><button id="zipFileSend">OK</button><br>
Status: <span id="status">please select your .zip file and click "OK"</span><br><br>
<hr>
<h2>Filters</h2>
<form id="filter_r_form">
<input type="radio" name="filter_r" id="filter_r_all">
<label for="filter_r_all">All threads</label>
<input type="radio" name="filter_r" id="filter_r_ng">
<label for="filter_r_ng">All threads (no groups)</label>
<input type="radio" name="filter_r" id="filter_r_top" checked>
<label for="filter_r_top">Only top 20 (no groups)</label>
<input type="radio" name="filter_r" id="filter_r_sel">
<label for="filter_r_sel">Only selected</label><br>
</form>
<table>
<tr>
<td><select id="filter_s" multiple></select></td>
<td>
<form id="filter_s_form">
<label for="filter_s_byname">Select by name: </label>
<input type="text" id="filter_s_byname">
<input type="submit" id="filter_s_selbyname" value="Select"><br>
Selected threads: <span id="filter_s_count">0/0</span><br>
</form>
</td>
</tr>
</table>
</div>
<div id="tab_msgper" class="tab">
<h2>Messages count per week</h2>
<button id="recolor">Change colors</button><br><br>
Messages per day:<br>
<canvas id="msgpercanv" class="graph"></canvas><br>
Messages total:<br>
<canvas id="msgtotalcanv" class="graph"></canvas><br>
<div id="msgperinfo" class="visibletable"></div>
</div>
<div id="tab_msgtot" class="tab">
<h2>Total messages count</h2>
<div class="scrollcont">
<table class="visibletable">
<tr class="tablestaticheader">
<th rowspan="2">Title</th>
<th colspan="5">Messages count</th>
<th rowspan="2"> </th>
<th colspan="5">Characters count</th>
</tr>
<tr>
<th>Outcoming</th>
<th></th>
<th>Incoming</th>
<th>Total</th>
<th>% of all</th>
<th>Outcoming</th>
<th></th>
<th>Incoming</th>
<th>Total</th>
<th>% of all</th>
</tr>
<tbody id="msgtotinfo"></tbody>
</table>
</div>
</div>
<div id="tab_wordstot" class="tab">
<h2>Total words count</h2>
<div class="scrollcont">
<table class="visibletable">
<tr class="tablestaticheader">
<th>Word</th>
<th>Total</th>
<th>Outcoming</th>
<th>Incoming</th>
<th>O/I ratio</th>
<th>Total ‰</th>
</tr>
<tr>
<td colspan="6" id="wordstotinfo_up" class="graytdbutton">▲ PREVIOUS PAGE ▲</td>
</tr>
<tbody id="wordstotinfo"></tbody>
<tr>
<td colspan="6" id="wordstotinfo_down" class="graytdbutton">▼ NEXT PAGE ▼</td>
</tr>
</table>
</div>
</div>
</body>
</html>