-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
94 lines (90 loc) · 3.61 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
<!DOCTYPE HTML>
<html>
<head>
<title>WhatsApp Log Prettifier</title>
<script src="https://code.angularjs.org/1.4.0-rc.0/angular.js"> </script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Amaranth' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Amaranth', sans-serif;
background: url(background.jpg);
}
.bubble {
max-width: 100%;
padding: 0px;
background: #f4ffd9;
border: 1px solid;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
margin: 5px;
}
.highlight-text {
background-color: hsla(60,100%,90%,0.5);
}
</style>
</head>
<body>
<div class="container" ng-app="testing" ng-controller="testController">
<h1 class="highlight-text">Whatsapp Log Prettifier</h1>
<p class="highlight-text">Paste your Whatsapp Chat Log below:</p>
<textarea rows="20" cols="100" ng-model="chatlog" ng-trim="false" ng-list=" ">
Enter your whatsapp conversation in here...
</textarea>
<p class="highlight-text"> Your Prettified Whatsapp Log that you can copy paste into your blog or email: </p>
<div ng-repeat="line in chatlog">
<span ng-init="parts=getPartsFromLine(line)"></span>
<div class="bubble" style="font-family: 'Amaranth', sans-serif;background-color:#FFFFFF">
<p>
<div style="color:#878282;text-align:center;font-size:12"> {{parts.date}} </div>
<div id="sender" style="padding-left:10px;font-size:15; color: {{getRandomColor(parts.sender)}}"><span></span>{{parts.sender}}</div>
<div style="padding-left:10px;font-size:20;padding-right:20px">{{parts.message}}</div>
<div style="font-size:10;color:#878282;text-align:right;padding-right:10px;padding-bottom:5px">{{parts.time}}</div>
</p>
</div>
</div>
</div>
</body>
<script>
var app = angular.module('testing',[]);
app.controller('testController', function($scope) {
var prevparts = {};
$scope.getPartsFromLine = function(line){
var parts = {};
var pattern = /^[0-9]{1,2}\/[0-9]{1,2}\/[0-9]{2}$/;
if(pattern.test(line.split(',')[0].trim()))
{
parts.date = line.split(',')[0].trim();
parts.time = line.split(',')[1].split('-')[0].trim();
parts.sender = line.split(',')[1].split('-')[1].split(':')[0].trim();
parts.message = line.split(':')[2].trim();
prevparts.date = line.split(',')[0].trim();
prevparts.time = line.split(',')[1].split('-')[0].trim();
prevparts.sender = line.split(',')[1].split('-')[1].split(':')[0].trim();
prevparts.message = line.split(':')[2].trim();
return parts;
}
else
{
console.log("Hello there");
parts.date = prevparts.date;
parts.time = prevparts.time;
parts.sender = prevparts.sender;
parts.message = line;
return parts;
}
}
$scope.getRandomColor = function(sender){
$scope.colors = $scope.colors||{};
if (!$scope.colors.hasOwnProperty(sender)) {
$scope.colors[sender] = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
console.log($scope.colors[sender]);
}
return $scope.colors[sender];
}
});
</script>
</html>