forked from David-Byrne/Hangons
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
154 lines (136 loc) · 8.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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hangons - A Hangouts.json parser</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta name="description" content="A completely client side Hangouts.json parser to convert your json file from hangouts to a preferred format">
<meta name="author" content="David Byrne">
<meta name="theme-color" content="#1AA260">
<link rel="icon" sizes="192x192" type="image/png" href="images/favicon.png">
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/paper/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="hangons.css" />
<script src="https://bootswatch.com/bower_components/jquery/dist/jquery.js"></script>
<script src="https://bootswatch.com/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="hangons.js"></script>
</head>
<body ng-App="hangons" ng-controller="mainController" id="body">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="images/Hangons3.png" class="pull-left " id="logo" alt="Hangons Logo">
<!--Source for logo: http://romannurik.github.io/AndroidAssetStudio/ -->
<a class="navbar-brand" href="index.html">Hangons</a>
<p class="navbar-text hidden-xs">A clientside hangouts.json parser</p>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="faq.html">FAQ</a></li>
<li><a href="contribute.html">Contriubte</a></li>
<li><a href="https://github.com/David-Byrne/Hangons">Github</a></li>
</ul>
</div>
</div>
</nav>
<div id="mainContent" class="container">
<div class="row">
First go to <a href="https://takeout.google.com/settings/takeout" target="_blank">Google Takeout</a> and download
your hangouts data. Extract the Hangouts.json file from the zip and upload it here.
<span class="input-group-btn">
<span class="btn btn-default btn-file colouredButton">
Browse<input type="file" id="fileinput">
<input type="text" class="form-control brightText" disabled="" id="fileNameTextBox" readonly>
</span>
</span>
</div>
<div id="cannotParseAlert" class="row hidden">
<br>
<div class="col-sm-offset-3 col-sm-6 col-md-offset-4 col-md-4 col-lg-offset-4 col-lg-4">
<div class="alert alert-dismissible alert-danger">
<button type="button" class="close" data-dismiss="alert">✖</button>
<strong>The chosen file cannot be parsed</strong>
<p id="cannotParseAlertDes"></p>
</div>
</div>
</div>
<div id="unknownMessageAlert" class="row hidden">
<br>
<div class="col-sm-offset-3 col-sm-6 col-md-offset-4 col-md-4 col-lg-offset-4 col-lg-4">
<div class="alert alert-dismissible alert-warning">
<button type="button" class="close" data-dismiss="alert">✖</button>
<strong>Certain messages were not recorded</strong>
<p>We didn't recognise the format of some of the message(s) so they couldn't be backed up.
If you report the console messages (f12)
<a href='https://docs.google.com/forms/d/1YEmJ5ScZbtJ6_U6RtpCLdhoSZs1i6kMipM0jVOBQnpc/viewform?usp=send_form'>
here</a> I will try fix the issue.
</p>
</div>
</div>
</div>
<br>
<div class="row">
<div class="progress">
<div id = "parseBar" class="progress-bar colouredProgressBar" style="width: 0%;"></div>
</div>
</div>
<div class="row">
Now choose what format you'd like it in. The dropdown box gives more information about the file types.
<br>
<div class="btn-group spacedButton">
<a href="#" class="btn btn-default disabled colouredButton" id="jsonBtn">Simplified JSON</a>
<a href="#" class="btn btn-default dropdown-toggle colouredButton dropdown" data-toggle="dropdown" aria-expanded="false"><span class="caret brightText"></span></a>
<span class="dropdown-menu dataDescription">
<span class="dataDescription">
<abbr title="JavaScript Object Natation">JSON</abbr> array of conversation objects and each conversation contains an array of participants and an
array of message objects. Each message object has a sender, time and content attribute.
</span>
</span>
</div>
<div class="btn-group spacedButton">
<a href="#" class="btn btn-default disabled colouredButton" id="txtBtn">Plain Text</a>
<a href="#" class="btn btn-default dropdown-toggle colouredButton dropdown" data-toggle="dropdown" aria-expanded="false"><span class="caret brightText"></span></a>
<span class="dropdown-menu dataDescription">
A plain .txt file with the sender, time, date and content with one message's attributes per line.
</span>
</div>
<div class="btn-group spacedButton">
<a href="#" class="btn btn-default disabled colouredButton" id="csvBtn">Comma Separated Value</a>
<a href="#" class="btn btn-default dropdown-toggle colouredButton dropdown" data-toggle="dropdown" aria-expanded="false"><span class="caret brightText"></span></a>
<span class="dropdown-menu dataDescription">
A .csv file with the sender, time, date and content separated with commas. One message is printed per line.
</span>
</div>
<div class="btn-group spacedButton">
<a href="#" class="btn btn-default disabled colouredButton" id="htmlBtn">HTML</a>
<a href="#" class="btn btn-default dropdown-toggle colouredButton dropdown" data-toggle="dropdown" aria-expanded="false"><span class="caret brightText"></span></a>
<span class="dropdown-menu dataDescription">
A <abbr title="Hyper Text Markup Language">HTML</abbr> file with the messages styled like the hangouts interface you're used to.
</span>
</div>
</div>
<br>
<div class="row">
<div class="progress">
<div id = "toFileBar" class="progress-bar colouredProgressBar" style="width: 0%;"></div>
</div>
</div>
<div class="row">
<div class="navbar-form form-group center-block" ng-hide="angFiles === undefined || angFiles.length === 0">
<input type="text" placeholder="Search by Name" class="form-control" id="inputDefault" ng-model="query">
</div>
<span ng-repeat="file in angFiles track by $index" >
<span class="fileButton" ng-hide="file.name.toUpperCase().search(query.toUpperCase()) === -1">
<a href="#" class="btn btn-default colouredButton fileButton" ng-click="angDownload(file.name+file.type, file.messages )"> {{file.name+file.type}}</a>
</span>
</span>
</div>
</div>
</body>
</html>