/
feed
366 lines (333 loc) · 17 KB
/
feed
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
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
<!doctype html>
<!--
Copyright 2015 Google Inc. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Share your pics. Powered by Firebase.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Friendly Pix</title>
<link rel="shortcut icon" href="images/favicon.png">
<!-- Disable tap highlight on IE -->
<meta name="msapplication-tap-highlight" content="no">
<!-- Web Application Manifest -->
<link rel="manifest" href="manifest.json">
<!-- Add to home screen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="Friendly Pix">
<meta name="theme-color" content="#303F9F">
<link rel="icon" sizes="192x192" href="images/touch/touch-icon-192x192.png">
<link rel="icon" sizes="128x128" href="images/touch/touch-icon-128x128.png">
<!-- Add to home screen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Web Starter Kit">
<link rel="apple-touch-icon" href="images/touch/touch-icon-180x180.png">
<link rel="apple-touch-icon-precomposed" href="images/touch/touch-icon-180x180.png">
<meta name="apple-mobile-web-app-status-bar-style" content="#303F9F">
<!-- Tile icon for Win8 -->
<meta name="msapplication-TileImage" content="/images/touch/touch-icon-144x144.png">
<meta name="msapplication-TileColor" content="#3372DF">
<meta name="msapplication-navbutton-color" content="#303F9F">
<!-- Firebase UI Auth -->
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/live/0.4/firebase-ui-auth.css" />
<!-- Material Design Lite -->
<link rel="stylesheet" href="bower_components/material-design-lite/material.min.css">
<script defer src="bower_components/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Styling -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,300">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Amaranth:700">
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<!-- Theatre mode viewer -->
<div class="fp-theatre"><img class="fp-fullpic"></div>
<!-- Splash screen -->
<section id="page-splash">
<h3 class="fp-logo"><i class="material-icons">photo</i> Friendly Pix</h3>
<div class="fp-caption">The friendliest way to share your pics</div>
<div class="fp-signed-out-only fp-initially-hidden">
<div id="firebaseui-auth-container" class="fp-signed-out-only fp-initially-hidden"></div>
<a class="fp-skip" href="feed">skip sign in</a>
</div>
</section>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<!-- Header section containing logo and menu -->
<header class="fp-header mdl-layout__header mdl-color-text--white mdl-color--light-blue-700">
<div class="mdl-layout__header-row fp-titlebar">
<!-- Logo -->
<h3 class="fp-logo"><a href="feed"><i class="material-icons">photo</i> Friendly Pix</a></h3>
<div class="mdl-layout-spacer"></div>
<!-- Search bar -->
<div class="fp-searchcontainer mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class="mdl-button mdl-js-button mdl-button--icon" for="searchQuery">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="searchQuery">
<label class="mdl-textfield__label" for="searchQuery">Enter your query...</label>
</div>
<div id="fp-searchResults" class="mdl-card mdl-shadow--2dp"></div>
</div>
<!-- Singed-in User Info -->
<a href="index.html"><button class="fp-sign-in-button fp-signed-out-only mdl-button mdl-js-button mdl-js-ripple-effect"><i class="material-icons">account_circle</i> Sign in</button></a>
<div class="fp-signed-in-user-container mdl-cell--hide-phone fp-signed-in-only">
<a class="fp-usernamelink mdl-button mdl-js-button">
<div class="fp-avatar"></div>
<div class="fp-username mdl-color-text--white"></div>
</a>
</div>
<!-- Drop Down Menu -->
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-cell--hide-phone" id="fp-menu">
<i class="material-icons">more_vert</i>
</button>
<ul class="fp-menu-list mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" for="fp-menu">
<a href="about">
<li class="mdl-menu__item"><i class="material-icons">perm_contact_calendar</i> About - Help - Contact</li>
</a>
<li class="fp-sign-out mdl-menu__item fp-signed-in-only"><i class="material-icons">exit_to_app</i> Sign out</li>
</ul>
</div>
<!-- Navigation Bar -->
<div class="fp-tab mdl-layout__header-row mdl-cell--hide-phone mdl-color--light-blue-600">
<div class="mdl-tab">
<a href="index.html" id="fp-menu-home" class="mdl-layout__tab fp-signed-in-only is-active mdl-button mdl-js-button mdl-js-ripple-effect"><i class="material-icons">home</i> Home</a>
<a href="feed" id="fp-menu-feed" class="mdl-layout__tab mdl-button mdl-js-button mdl-js-ripple-effect"><i class="material-icons">trending_up</i> Feed</a>
<input id="fp-mediacapture" type="file" accept="image/*;capture=camera">
<button class="fp-signed-in-only mdl-button mdl-js-button mdl-button--fab mdl-cell--hide-tablet mdl-color--amber-400 mdl-shadow--4dp mdl-js-ripple-effect" id="add">
<i class="material-icons">file_upload</i>
</button>
</div>
</div>
<button class="fp-signed-in-only mdl-cell--hide-desktop mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-color--amber-400 mdl-shadow--4dp" id="add-floating">
<i class="material-icons">photo_camera</i>
</button>
</header>
<!-- Drawer menu -->
<div class="mdl-cell--hide-desktop mdl-cell--hide-tablet mdl-layout__drawer">
<button class="fp-sign-in-button fp-signed-out-only mdl-button mdl-js-button mdl-js-ripple-effect"><i class="material-icons">account_circle</i> Sign in</button>
<div class="fp-signed-in-user-container mdl-color--light-blue-700 fp-signed-in-only">
<a class="fp-usernamelink">
<div class="fp-avatar"></div>
<div class="fp-username mdl-color-text--white"></div>
</a>
</div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link is-active fp-signed-in-only" href="index.html"><i class="material-icons">home</i> Home</a>
<a class="mdl-navigation__link" href="feed"><i class="material-icons">trending_up</i> Feed</a>
<hr />
<a class="mdl-navigation__link" href="about"><i class="material-icons">perm_contact_calendar</i> About - Help - Contact</a>
<hr class="fp-signed-in-only"/>
<a class="fp-sign-out mdl-navigation__link fp-signed-in-only"><i class="material-icons">exit_to_app</i> Sign Out</a>
</nav>
</div>
<main class="mdl-layout__content mdl-color--grey-100">
<!-- Show a feed of posts -->
<section id="page-feed" class="mdl-grid fp-content" style="display: none;">
<div class="fp-new-posts-button">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--amber-400">
Show new posts...
</button>
</div>
<div class="fp-image-container mdl-cell mdl-cell--12-col mdl-grid">
<div class="fp-no-posts fp-help mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--8-col-tablet
mdl-cell--8-col-desktop mdl-grid mdl-grid--no-spacing">
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
<i class="fp-info material-icons">help</i>
<div>
<p>Start following people to see their posts!</p>
<p>
Use the <strong><i class="material-icons">search</i> search bar</strong> to find people you know and have
a look at the <a href="feed"><i class="material-icons">trending_up</i> feed</a> to discover interesting people.
</p>
<p>Then <i class="material-icons">favorite</i> like and comment their posts!</p>
</div>
</div>
</div>
</div>
<div class="fp-next-page-button">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--fab">
<i class="material-icons">expand_more</i>
</button>
</div>
</section>
<!-- Show a single post with comments -->
<section id="page-post" class="mdl-grid fp-content" style="display: none;">
<div class="fp-image-container mdl-cell mdl-cell--12-col mdl-grid"></div>
</section>
<!-- About & Contact page -->
<section id="page-about" class="mdl-grid fp-content" style="display: none;">
<div class="fp-help mdl-card mdl-shadow--2dp mdl-cell
mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--8-col-desktop">
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
<i class="fp-info material-icons">info</i>
<div>
<p>Friendly Pix is a photo sharing app showcasing the use of the <a href="https://firebase.google.com">Firebase Platform</a>.</p>
</div>
</div>
</div>
<div class="fp-help mdl-card mdl-shadow--2dp mdl-cell
mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--8-col-desktop">
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
<i class="fp-info material-icons">help</i>
<div>
<p>Start following people to see their posts in your <a href="index.html"><i class="material-icons">home</i>home</a>!</p>
<p>
Use the <strong><i class="material-icons">search</i>search bar</strong> to find people you know and have
a look at the <a href="feed"><i class="material-icons">trending_up</i>feed</a> to discover interesting people.
</p>
<p>Then <i class="material-icons">favorite</i>like and comment their posts!</p>
<p>
Share your pics with your friends using the <i class="material-icons">file_upload</i>or <i class="material-icons">photo_camera</i>buttons.
</p>
</div>
</div>
</div>
<div class="fp-help mdl-card mdl-shadow--2dp mdl-cell
mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--8-col-desktop">
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
<i class="fp-info material-icons">contacts</i>
<div>
<p>Feel free to file issues on our <a href="https://github.com/firebase/friendlypix">GitHub repo</a>.</p>
</div>
</div>
</div>
</section>
<!-- User Profile page -->
<section id="page-user-info" class="mdl-grid fp-content" style="display: none;">
<div class="fp-user-container mdl-shadow--2dp mdl-cell mdl-cell--12-col">
<div class="fp-user-avatar"></div>
<div class="fp-name-follow-container mdl-cell mdl-cell--5-col">
<div class="fp-user-username"></div>
<div class="fp-signed-in-only">
<label class="fp-follow mdl-switch mdl-js-switch mdl-js-ripple-effect" for="follow">
<input type="checkbox" id="follow" class="mdl-switch__input" value="true">
<span class="mdl-switch__label">Follow</span>
</label>
</div>
<div class="fp-user-detail-container">
<div class="fp-user-detail"><span class="fp-user-nbposts">0</span> posts</div>
<div class="fp-user-detail"><span class="fp-user-nbfollowers">0</span> followers</div>
<div class="fp-user-detail fp-user-nbfollowing-container"><span class="fp-user-nbfollowing">0</span> following</div>
</div>
</div>
</div>
<div class="fp-user-following mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col">
<button class="fp-close-following mdl-button mdl-js-button mdl-button--raised mdl-button--fab">
<i class="material-icons">expand_less</i>
</button>
</div>
<div class="fp-image-container mdl-cell mdl-cell--12-col mdl-grid">
<div class="fp-no-posts mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop mdl-grid mdl-grid--no-spacing">
<div class="mdl-card mdl-shadow--2dp mdl-cell
mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--8-col-desktop">
No posts yet.
</div>
</div>
</div>
<div class="fp-next-page-button">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--fab">
<i class="material-icons">expand_more</i>
</button>
</div>
</section>
<!-- Post new pic page -->
<section id="page-add" class="mdl-grid fp-content" style="display: none;">
<div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid mdl-grid--no-spacing">
<div class="fp-addcontainer mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop">
<div class="fp-overlay">
<i class="material-icons">hourglass_full</i>
</div>
<img id="newPictureContainer" src="feed">
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
<form id="uploadPicForm" action="feed#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="imageCaptionInput">
<label class="mdl-textfield__label" for="imageCaptionInput">Image caption...</label>
</div>
<br />
<button type="submit" class="fp-upload mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--amber-400">
Upload this pic!
</button>
</form>
</div>
</div>
</div>
</section>
<!-- Toast -->
<div aria-live="assertive" aria-atomic="true" aria-relevant="text" class="mdl-snackbar mdl-js-snackbar">
<div class="mdl-snackbar__text"></div>
<button type="button" class="mdl-snackbar__action"></button>
</div>
</main>
</div>
<!-- Page.js -->
<script src="bower_components/page/page.js"></script>
<!-- jQuery -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- Latinize -->
<script src="bower_components/latinize/latinize.js"></script>
<!-- SweetAlert -->
<script src="bower_components/sweetalert/dist/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="bower_components/sweetalert/dist/sweetalert.css">
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/live/3.2/firebase.js"></script>
<script>
// Initialize Firebase SDK
var config = {
apiKey: "AIzaSyBdjTzzr-Ou7Xi_VduywqTecrnZ9OsNdNA",
authDomain: "test-77c48.firebaseapp.com",
databaseURL: "https://test-77c48.firebaseio.com",
storageBucket: "test-77c48.appspot.com"
};
firebase.initializeApp(config);
</script>
<!-- Firebase UI for Auth -->
<script src="https://www.gstatic.com/firebasejs/ui/live/0.4/firebase-ui-auth.js"></script>
<script type="text/javascript">
// FirebaseUI config.
var uiConfig = {
'signInSuccessUrl': '/',
'signInOptions': [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.FacebookAuthProvider.PROVIDER_ID
]
};
var ui = new firebaseui.auth.AuthUI(firebase.auth());
ui.start('#firebaseui-auth-container', uiConfig);
</script>
<!-- Friendly Pix ES5 scripts -->
<script src="lib/utils.js"></script>
<script src="lib/firebase.js"></script>
<script src="lib/auth.js"></script>
<script src="lib/search.js"></script>
<script src="lib/uploader.js"></script>
<script src="lib/userpage.js"></script>
<script src="lib/post.js"></script>
<script src="lib/feed.js"></script>
<script src="lib/routing.js"></script>
<!-- Friendly Pix ES2015 scripts -->
<!-- Uncomment and replace scripts above to serve ES2015 scripts directly -->
<!-- <script src="/scripts/utils.js"></script>
<script src="/scripts/firebase.js"></script>
<script src="/scripts/auth.js"></script>
<script src="/scripts/search.js"></script>
<script src="/scripts/uploader.js"></script>
<script src="/scripts/userpage.js"></script>
<script src="/scripts/post.js"></script>
<script src="/scripts/feed.js"></script>
<script src="/scripts/routing.js"></script> -->
</body>
</html>