-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
136 lines (102 loc) · 4.88 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Reaction When</title>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap/Fontawesome -->
<link rel="stylesheet" type="text/css" href="assets/css/reset.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script async src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->
<!-- Firebase-Complete (not needed unless you want to do something fancy.) -->
<!-- <script src="https://www.gstatic.com/firebasejs/4.3.0/firebase.js"></script> -->
<!-- Firebase app, auth, DB -->
<script async src="https://www.gstatic.com/firebasejs/4.2.0/firebase-app.js"></script>
<script async src="https://www.gstatic.com/firebasejs/4.2.0/firebase-auth.js"></script>
<script async src="https://www.gstatic.com/firebasejs/4.2.0/firebase-database.js"></script>
<!-- Moment -->
<script async src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<!-- Our Libraries -->
<script async type="text/javascript" src="assets/javascript/dbhandler.js"></script>
<!-- Favicon, font, & style -->
<link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=Raleway|Righteous" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
<div class="loader">
<div class="loading-small">
<img src="svgtest.svg" alt="">
</div>
</div>
<div class="container goodbye-div hidden">
<h1 id="goodbye-message">Sorry to see you go!</h1>
</div> <!-- goodbye-div -->
<!--navigation -->
<header>
<div class="container">
<div class="buttonToolbar signed-in-only">
<button id="sign-out-btn">Sign Out</button>
<button target="#feed" id="feed-btn">Feed</button>
<button target="#react" id="react-btn">News</button>
<button target="#diary" id="diary-btn">Diary</button>
</div>
</div>
</header><br>
<!-- this will be for the trending news item -->
<div class="container jumbotron-container">
<div class="jumbotron">
<h1>My Reaction When</h1>
<p id="tinytext">Gif Reacts to News</p>
<!-- </div> -->
<!-- <div class="panel panel-body" id="sign-in-area"> -->
<!-- <p>Sign in with your GitHub account below.</p> -->
<!-- Button that handles sign-in/sign-out -->
<button class="mdl-button mdl-js-button mdl-button--raised signed-out-only sign-in-out-btn hidden" id="sign-in-btn">Sign in with GitHub</button>
</div>
</div>
<div class="container signed-in-only section" id="react">
<div class="panel panel-default" id="user-area">
<div class="news" id="news-container"></div>
</div>
<div class="panel panel-default" id="response-area">
<div class="panel-body">Share your feelings:</div>
<!-- <form class="form-inline"> -->
<div class="form-group" id="emoField">
<form class="" id="emo-form" method="post">
<label for="emo-input"></label>
<input type="text" id="emo-input" class="form-control mx-sm-3" aria-describedby="emo-input">
<button type="button" id="i-feel">I feel!</button>
</form>
</div> <!-- id="emoField" -->
</div> <!-- </form> -->
<div class="panel panel-default" style="display:none"id="gif-area">
<div class="panel-body">Click a gif to save this feeling</div>
<div class="gif-dump"></div>
</div>
</div>
<div class="container signed-in-only section hidden" id="diary">
<div class="panel panel-default">
<em><h4 class="panel-default panel-body">Your feelings over time:</h4></em>
</div>
<div class="timeline" id="diary-container"></div>
</div>
<div class="container signed-in-only section hidden" id="feed">
<div class="panel panel-default">
<em><h4 class="panel-default panel-body">How the news made us feel:</h4></em>
</div>
<div id="feed-container"></div>
</div>
<!-- <div class="container signed-in-only section hidden" id="feed">
<div class="panel panel-default">
<div class="panel-default panel-body">Other people's feelings:</div>
<div id="feed-container">
</div>
</div>
</div> -->
<script type="text/javascript" src="assets/javascript/main.js"></script>
</body>
</html>