-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
300 lines (262 loc) · 13.5 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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- start of canvas js scripts -->
<script type="text/javascript" src="js/events/displayCanvas.js"></script>
<script type="text/javascript" src="js/events/displayAlerts.js"></script>
<script type="text/javascript" src="js/events/handleUserInputs.js"></script>
<meta charset="UTF-8">
<!-- end of start of canvas js scripts-->
<!-- start of date popup scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<script type="text/javascript" src="js/events/displayDatePicker.js"></script>
<!-- end of date popup scripts -->
<title>Sentiment Analysis</title>
</head>
<body>
<!-- start of notification class -->
<div class="span4 hidden">
<div class="alert alert-warning fade" style="text-align: center;">
<strong >Warning!</strong> The prototype does not support the given query.
</div>
</div>
<!-- end of notification class-->
<div class="container page-wrap ">
<!--Start of the Navigation Bar -->
<div class="row">
<div class="col-md-12 col-xs-12">
<nav class="navbar navbar-default" id = "navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Sentiment Analysis</a>
</div>
<ul class="nav navbar-nav collapse navbar-collapse" id="myNavbar" >
<li class="active"> <a class="navItem" href="#">Home</a></li>
<li> <a class="navItem" href="#">Trends</a></li>
<li> <a class="navItem" href="#">About us</a></li>
</ul>
</div>
</nav>
</div>
</div>
<!--End of the Navigation Bar -->
<!--Start of graph section-->
<div class="row hidden" id="graphRow">
<div class="col-md-10 col-xs-12 " id="mainGraph" >
<!--Start of day/week/month/year tabs -->
<ul class="nav nav-pills">
<li><a href="#1b" data-toggle="tab" >Day</a></li>
<li ><a href="#1b" data-toggle="tab">Week</a></li>
<li class="active"><a href="#2b" data-toggle="tab">Month</a></li> <!--Only month tab is supported by the prototype-->
<li ><a href="#1b" data-toggle="tab">Year</a></li>
</ul>
<!--End of day/week/month/year tabs -->
<div class="tab-content clearfix" >
<!-- Start of message for unsuported tabs -->
<div class="tab-pane fade" id="1b">
<div class="form-group row col-xs-12 col-md-12">
<div class="row col-md-12 col-xs-12">
<h3 style="color:white; text-align: center;">Action not supported for the prototype</h3>
</div>
</div>
</div>
<!-- End of message for unsuported tabs -->
<!--Start of main bubble chart-->
<div class="tab-pane fade in active" id="2b">
<div class="text-right">
<button type="button" class="btn btn-info btn-sm hidden-xs hidden-sm" id="resize">
<span class="glyphicon glyphicon-resize-full"></span>
</button>
</div>
<div class="form-group ">
<div id="chartContainer" style="height: 190px; max-width: 700px; margin: 0px auto;"></div> <!--Holds canvas bubble chart-->
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
</div>
</div>
<!--End of main bubble char-->
</div>
</div>
<!-- Start of happiness axis -->
<div class="axis1 col-md-1 hidden-xs hidden-sm" id="axis1" data-toggle="tooltip" data-placement="top" title="The average sentiment value shown on y axis is defined on a scale from 0 to 10 with 0 being negative and 10 being positive.">
<label id="label0">Positive</label>
<img src="images/happinessAxis.png" id="happinessImg" >
<label id="label1">Negative</label>
</div>
<!-- End of happiness axis -->
<!-- Start of confidence axis -->
<div class="axis2 col-md-1 hidden-xs hidden-sm" id="axis2" data-toggle="tooltip" data-placement="top" title="The colour of the bubble represents the confidence level of the average sentiment value. High-confidence is represented with dark blue and low-confidence with light blue.">
<label id="label2">High Confidence</label>
<img src="images/confidence.png" id="confidenceImg">
<label id="label3">Low Confidence</label>
</div>
<!-- end of confidence axis -->
</div>
<!--End of graph section -->
<!-- Start of Search -->
<div class="row row-m-t">
<div class="col-md-12 col-xs-12">
<div id="exTab1">
<ul class="nav nav-pills">
<li class="active"><a href="#1a" data-toggle="tab" >Simple</a></li>
<li ><a href="#2a" data-toggle="tab">Advanced</a></li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane active" id="1a">
<!-- start of simple search -->
<div class="form-group required row col-xs-12 col-md-12">
<div class="row col-md-12 col-xs-12 ">
<!-- Start of search query input field-->
<div class="col-md-11 col-xs-10">
<label class="control-label">search query:</label>
<input id="keyword" class="form-control" type="text" placeholder="Enter your keyword or search phrase">
</div>
<!-- End of search query input field-->
<!-- Start of search button-->
<div class="col-md-1 col-xs-2 padding-search mobile-search-button-simple">
<button id="simple-search" class="btn btn-info" >Search</button>
</div>
<!-- End of search button-->
</div>
<div class="row col-md-12 col-xs-12 ">
<div class="col-xs-12 col-md-12">
<label class="before-label">required field</label>
</div>
</div>
</div>
<!--end of simple search-->
</div>
<div class="tab-pane" id="2a">
<!-- start of advanced search -->
<div class="form-group required row col-xs-12 col-md-12">
<div class="row col-md-12 col-xs-12">
<div class="col-md-5 col-xs-12 padding-keyword">
<label class="control-label">search query:</label>
<input class="form-control" id="advanced-keyword" type="text" placeholder="Enter your keyword or search phrase">
</div>
<!--Start of location input field-->
<div class="col-md-2 col-xs-12 padding-location">
<label>location:</label>
<input id="location" class="form-control" placeholder="Worldwide">
</div>
<!--End of location input field-->
<!--Start of start data and end data date pickers-->
<div class="col-md-2 col-xs-6 padding-dates">
<label>start date:</label>
<div class='input-group date' id='datetimepicker1'>
<input type='text' id='startDateInput' class="form-control" placeholder="dd/mm/yyyy" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-md-2 col-xs-6 padding-dates">
<label>end date:</label>
<div class='input-group date' id='datetimepicker2'>
<input type='text' id='endDateInput' class="form-control" placeholder="dd/mm/yyyy" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<!--End of start data and end data date pickers-->
<!-- Start of search button-->
<div class="col-md-1 col-xs-12 padding-search ">
<button class="btn btn-info mobile-search-button-advanced" id='advanced-search'>Search</button>
</div>
<!-- End of search button-->
<!--Start of datasources section-->
<div class="row col-md-12 col-xs-11">
<div class="col-xs-12 col-md-12">
<!--Start of IMDb checkbox -->
<input type="checkbox" class="form-check-input" id="imdb">
<label class="form-check-label" for="imdb">IMDb</label>
<!--End of IMDb checkbox -->
<!--Start of Twitter checkbox-->
<input type="checkbox" class="form-check-input" id="twitter">
<label class="form-check-label" for="twitter">Twitter</label>
<!--End of Twitter checkbox-->
<!--Start of Trends checkbox-->
<input type="checkbox" class="form-check-input" id="trends">
<label class="form-check-label" for="trends">Trends</label>
<!--End of Trends checkbox-->
</div>
</div>
<!--End of datasources section-->
</div>
<div class="row col-md-12 col-xs-12 padding-required">
<div class="col-xs-12 col-md-12">
<label class="before-label">required field</label>
</div>
</div>
</div>
<!--end of advanced search -->
</div>
</div>
</div>
</div>
</div>
<!-- End of search -->
<!-- Start of explanation -->
<div class="row row-m-t hidden" id="explanation_text">
<!--Start of explanation tittle -->
<div class="col-md-12 col-xs-12 text-center">
<h2>How to interpret the data shown in the graph?</h2>
</div>
<!--End of explanation tittle -->
<!--Start of explanation main content -->
<div class="col-md-4 col-xs-12">
<h3>Location</h3>
<p>Refers to the geographic region that the query is targeted at. Twitter offers tags to trace down tweets from specific regions and Google Trends delivers search volumes on a country basis. Default location is "Worldwide". Accepted locations are on a country basis only.</p>
<h3>Start and end date</h3>
<p>Refers to the first date of data points. With twitter this will catch tweets that were published in the time horizon between start and end date. For Google Trends the tool presents the volumes of search queries of the specified keyword in the chosen time horizon. Default end date is the day of using this tool. Default start date is "endDate - 12 months".</p>
</div>
<div class="col-md-4 col-xs-12">
<h3>Average sentiment value</h3>
<p>This tool evaluates input data and assigns averaged sentiment values that are presented as data points. On "Month" tab, the tool presents an average value for each month or an average over two months depending on the chose time horzion. The value is defined on a scale from 0 to 10 with 0 being "negative" and 10 being "positive". For instance, a value of 5 reflects a classification as "neutral".</p>
<h3>Confidence level</h3>
<p>The confidence level describes the analysis' certainty of correctly classifying input data as "positive" or "negative". The value is presented on a scale from 0.01 to 1.00 (1% to 100%). There is also an image with shades of blue(at the right of the graph) which illustrate how we map the confidence level to a color.</p>
</div>
<div class="col-md-4 col-xs-12">
<h3>Population</h3>
<p>By default, the quantity of input data is presented as population value on a scale from 1 to 100 representing relative values of maximum and minimum occurrences (i.e. percentage value). For IMDb, population contains the absolute number of movie reviews.</p>
</div>
<!--End of explanation main content -->
</div>
<!-- End of explanation -->
<!--Start of the Footer -->
<div class="row row-m-t text-center">
<footer class="footer navbar-fixed-bottom site-footer">
<!--
<div class="col-md-3 col-xs-6">
<i class="fa fa-phone" > </i>
<i >+44 0131 656 0798</i>
</div>
<div class="col-md-3 col-xs-12">@ sentiment-analysis@gmail.com</div>
-->
<div class="col-md-12 social-icons" style="padding:10px!important">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter" ></i>
<i class="fa fa-google-plus" ></i>
</div>
<div class="col-md-12">Sentiment Analysis 2019 © - All rights reserved.</div>
</footer>
</div>
<!--End of the Footer -->
</div>
</body>
</html>