forked from AAMartine/ListIt
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
182 lines (174 loc) · 7.12 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
<!doctype html>
<html lang="en" ng-app="listIt" data-framework="firebase">
<head>
<meta charset="utf-8">
<title>List-it</title>
<script src="https://www.gstatic.com/firebasejs/live/4.3/firebase.js"></script>
<script src="firebase-login/config.js"></script>
<script src="firebase-login/common.js"></script>
<script src="https://cdn.firebase.com/libs/firebaseui/2.6.0/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.6.0/firebaseui.css" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-teal.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>[ng-cloak] { display: none; }</style>
</head>
<!--header and app declaration-->
<div id="listItapp" ng-controller="listItCtrl">
<header class="w3-container w3-theme w3-padding" id="myHeader">
<img src="http://www.flatstanleyproject.com/images/pushpin4.png" alt="Red pin" style="margin-right:20px; padding:0; float:left;">
<h1 class="w3-xxxlarge w3-animate-bottom">list It</h1>
</header>
<!--fin header__>
<!--login handler-->
<div id="loading"></div>
<div id="loaded" class="hidden">
<div id="loginAuth">
<!--login form-->
<div class="w3-row-padding w3-center w3-margin-top">
<div class="w3-third">
<div style="min-height:260px">
</div>
</div>
<div class="w3-third">
<div class="w3-card w3-container" style="min-height:260px">
<form class="w3-container">
<div class="w3-container">
<h3 class="w3-theme"> Have an account? </h3>
</div>
<div class="w3-container">
<input class ="w3-input" type="text" ng-model="email" placeholder="Enter email" name="email" required>
</div>
<div class="w3-container">
<input class ="w3-input" type="password" ng-model="password" placeholder="Enter Password" name="password" required>
</div>
<div class="w3-container">
<button class="w3-button w3-right w3-theme" type="button" ng-click="signIn()">Login</button>
</div>
<div class="w3-container ">
<label>
<input class="w3-check" type="checkbox" checked="checked" name="remember"> Remember me |
</label>
<span class="w3-text-teal"><a href="#">Forgot password?</a></span>
</div>
<div class="w3-container ">
<label>
New user?
</label>
<span class="w3-text-teal"><a href="#">Sign up here</a></span>
</div>
</form>
</div>
</div>
<div class="w3-third">
<div style="min-height:260px">
</div>
</div>
<div/>
</div>
<!--fin login form-->
<!--login by providers-->
<div id="container">
<div>
<div id="user-signed-out" class="hidden">
<h4>You are signed out.</h4>
<div id="firebaseui-spa">
<div id="firebaseui-container"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--fin login section-->
</section>
<!--user signed in showing pic and logout button-->
<section id="main" style="display: none;">
<div id="user-signed-in" class="hidden">
<div id="user-info">
<div id="photo-container">
<img id="photo">
</div>
<div id="name"></div>
<div id="email"></div>
<div id="phone"></div>
<div class="clearfix"></div>
</div>
<p>
<button id="sign-out">Sign Out</button>
<button id="delete-account">Delete account</button>
</p>
</div>
<!--user signed in showing the list of places-->
<div>
<form class="w3-container w3-card-4" id="listform" ng-submit="addPlace()">
<div class="w3-section">
<input class="w3-input" id="new-place" placeholder="What is your new list of places about?" ng-model="newPlace" ng-disabled="saving" autofocus>
</div>
</form>
</div>
<div class="w3-row-padding w3-center w3-margin-top">
<div class="w3-quarter w3-container">
<section id="placesList" ng-show="totalCount" ng-cloak>
<input id="toggle-all" type="checkbox" ng-model="allChecked" ng-click="markAll(allChecked)">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">
<li ng-repeat="(id, place) in places | listItFilter" ng-class="{completed: place.completed, editing: place == editedPlace}">
<div class="view">
<input class="toggle" type="checkbox" ng-model="place.completed" ng-change="places.$save(place)">
<label ng-dblclick="editPlace(place)">{{place.title}}</label>
<button class="destroy" ng-click="removePlace(place)"></button>
</div>
<form ng-submit="doneEditing(place)">
<input class="edit" ng-model="place.title" todo-escape="revertEditing(place)" todo-blur="doneEditing(place)" todo-focus="place == editedPlace">
</form>
</li>
</ul>
</section>
</div>
</div>
<div ng-show="totalCount" ng-cloak>
<span id="place-count"><strong>{{remainingCount}}</strong>
<ng-pluralize count="remainingCount" when="{ one: 'item left', other: 'items left' }"></ng-pluralize>
</span>
<ul id="filters">
<li>
<a ng-class="{selected: location.path() == '/'} " href="#/">All</a>
</li>
<li>
<a ng-class="{selected: location.path() == '/active'}" href="#/active">Active</a>
</li>
<li>
<a ng-class="{selected: location.path() == '/completed'}" href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed" ng-click="clearCompletedPlaces()" ng-show="completedCount">Clear completed</button>
</div>
</section>
<footer class="w3-container w3-theme w3-padding-16">
<h3>Footer</h3>
<p>Credits:
<p>Used angularjs template from <a href="http://todomvc.com" target="_blank">TodoMVC</a></p>
<p>Used Css template from <a href="https://www.w3schools.com/w3css/tryw3css_templates_teal.htm" target="_blank">w3.css</a></p>
</p>
<div style="position:relative;bottom:55px;" class="w3-tooltip w3-right">
<span class="w3-text w3-theme-light w3-padding">Go To Top</span>
<a class="w3-text-white" href="#myHeader"><span class="w3-xlarge">
<i class="fa fa-chevron-circle-up"></i></span></a>
</div>
</footer>
</section>
</div>
<script src="node_modules/todomvc-common/base.js"></script>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angularfire/dist/angularfire.js"></script>
<script src="node_modules/angular-route/angular-route.js"></script>
<script src="node_modules/angular-resource/angular-resource.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/listItCtrl.js"></script>
<script src="js/directives/todoFocus.js"></script>
<script src="js/directives/todoBlur.js"></script>
<script src="js/directives/todoEscape.js"></script>
<script src="firebase-login/loginConfig.js"></script>
</body>
</html>