-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
159 lines (133 loc) · 4.74 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cognitive API Emotion in Social Media</title>
<!-- Bootstrap core CSS -->
<link href="Bootstrap/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="ie10-viewport-bug-workaround.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="hashtag.ico">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<h3></h3>
</div>
</div>
</nav>
<div style="display:block;" class="introduction">
<h3>Hashtag Emotion Analyzer</h3>
<hr>
<p>
Sure, it might have seemed like a <font color="#800080"><b>#party</b></font>.
But were the people at <font color="80080"><b>#Coachella</b></font> really having as much fun as
you think they were?
</p>
<p>Find out if the <font color="800080"><b>#GoodTimes</b></font> were just <font color="800080"><b>#FakeNews</b></font>,
with our <font color="800080"><b>Hashtag Emotion Analyzer</b></font>!
<br><br><i>Enter a hashtag below!</i>
</p>
</div>
<div class="enter_hashtag">
<form name="search" id="search_form">
<input name="tag" id="hashtag" type="text">
<input type="button" name="submit" value="Submit" onclick="useHashtag();">
</form>
<h1 id="showHash"></h1>
</div>
<hr>
<div class="results" id="results">
<h2 style="font-variant:small-caps;">Results</h2>
<table class="center">
<tr>
<th>EMOTION</th>
<th>SCORE (%)</th>
</tr>
<tr>
<td>ANGER</td>
<td><p id="anger"></p></td>
</tr>
<tr>
<td>CONTEMPT</td>
<td><p id="contempt"></p></td>
</tr>
<tr>
<td>DISGUST</td>
<td> <p id="disgust"></p></td>
</tr>
<tr>
<td>FEAR</td>
<td><p id="fear"></p></td>
</tr>
<tr>
<td>HAPPINESS</td>
<td><p id="happiness"></p></td>
</tr>
<tr>
<td>NEUTRAL</td>
<td><p id="neutral"></p></td>
</tr>
<tr>
<td>SADNESS</td>
<td><p id="sadness"></p></td>
</tr>
<tr>
<td>SURPRISE</td>
<td><p id="surprise"></p></td>
</tr>
</table>
<div id="dominant_emotion">
<h3 id="highest"></h3>
</div>
<!-- Results-dependant divs, just for funs -->
<div id="anger_div">
<p>Wow - this hashtag is angry! </p>
<img src="images/angry.jpg" style="width:350px;height:250px;">
</div>
<div id="contempt_div">
<p>This hashtag doesn't like what it sees... hmph!</p>
<img src="images/contempt.jpg" style="width:350px;height:250px;">
</div>
<div id="disgust_div">
<p>Yuck. This hashtag seems to be pretty disgusted!</p>
<img src="images/disgust.gif" style="width:350px;height:250px;">
</div>
<div id="fear_div">
<p>Spooky! This hashtag is primariy associated with fear!</p>
<img src="images/fear.gif" style="width:350px;height:250px;">
</div>
<div id="happiness_div">
<p>How lovely! Individuals in these photos are primarily happy. </p>
<img src="images/happy.gif" style="width:350px;height:250px;">
</div>
<div id="neutral_div">
<p>Well, that's kind of boring. Most people in these photos are feeling pretty neutral.</p>
<img src="images/neutral.jpg" style="width:350px;height:250px;">
</div>
<div id="sadness_div">
<p>Oh no, these aren't happy photos at all! What a sad hashtag. </p>
<img src="images/sad.jpg" style="width:350px;height:250px;">
</div>
<div id="surprise_div">
<p>Shocking! This hashtag is mostly associated with surprise. </p>
<img src="images/surprise.gif" style="width:350px;height:250px;">
</div>
</div>
<div class="container" id="footer">
<footer>
<hr>
<p><i>Team </i><b>R U Fake</b> - <i>Global AI Hackathon 2017</i></p>
</footer>
</div>
<!-- Javascript at the bottom for fast page loading -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="/js/global-ai-apis.js"></script>
</body>
</html>