-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
232 lines (232 loc) · 9.54 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sprint03-Lyft Mobile</title>
<link rel="shortcut icon" href="assets/images/th.jfif">
<link href="css/materialize.min.css" rel="stylesheet" type="text/css">
<link href="css/material-design-iconic-font.min.css" rel="stylesheet">
<link href="css/materialize.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<main>
<!-- SPLASH SECTION -->
<section id="start" class="view mt-0">
<!-- SPLASH VIEW -->
<div class="container-fluid mt-0">
<div class="row">
<div class="col s10 offset-s1">
<img id="splash" class="responsive-img main-logo" src="assets/images/logo-white.png" alt="logo1">
</div>
</div>
</div>
<!-- MAIN VIEW-->
<div class="container-fluid" id="main-page">
<div class="row center" id="lyftlife-pink">
<div class="col s10 offset-s1">
<figure>
<img id="liftlyfe-pink" class="responsive-img" src="assets/images/lyftlyfe-pink.png" alt="logo1">
</figure
</div>
<div class="row center" id="main-btns">
<button class="col s3 offset-s2 btn btn-large btn-theme-1 flow-text modal-trigger" href="#modal-login" id="login">LOG IN</button>
<button class="col s3 offset-s2 btn btn-large btn-theme-1 flow-text " id="signing"> SIGN UP</button>
</div>
</div>
</div>
</div>
</section>
<!--END SPLASH SECTION -->
<!--SIGN-UP SECTION-->
<section class="container-fluid bkg-white view mt-40" id="sign-up">
<div class="container">
<div class="col s10 offset-1 center mt-40">
<h2>Sign Up</h2>
<h4>Join now for a free ride credit</h4>
</div>
<div class="row">
<div class="input-field">
<select id="flags" class="col s10 offset-s1 flags">
<option value="">Choose your country</option>
<option class="country" value="0"> México</option>
<option class="country" value="1"> Peru</option>
<option class="country" value="2"> Chile</option>
<option class="country" value="3"> Colombia</option>
</select>
</div>
<div class="input-field col s10 offset-s1 mt-40 mb-20">
<label><div id="country-flag" class="non-flag"></div>
<i class="fa fa-phone"></i> Phone number
<div id="phone-prefix prefix">(<span id="prefix-number" class="prefix-digits">Prefix</span>)</div>
</label>
<input id="phone-number" class="validate" type="number" maxlength="10">
<div class="row center mt-40">
<h5 class=" mt-20 mb-20">We'll send you a text to verify your phone</h5>
</div>
</div>
<div class="row mt-40">
<button class="btn btn-large btn-theme-2 col s10 offset-s1 disabled" id="next">Next</button>
</div>
</div>
<button id="showView0" class="btn btn-theme-3 btn-flat back-btn" data-launch-view="start"><i class="fa fa-chevron-left" aria-hidden="true"></i></button>
</div>
</section>
<!--/SIGN-UP SECTION-->
<!--VERIFY-FORM -->
<section class="container view hide bkg-white mt-40" id="sign-form">
<div class="row center">
<div class="col s10 offset-s1">
<h2>Verify your code</h2>
</div>
<div class="col s10 offset-s1">
<h4>Join now for free ride credit</h4>
</div>
<div class="col s4 offset-s4 input-field mt-40">
<label><h6 class="tex-pink bolder">LAB - </h6></label>
<input id="input-code" type="text" maxlength="3" class="center">
<button class="btn btn-theme-2 col s10 offset-s1 disabled" id="verify" type="submit">Verify</button>
</div>
<div class="col s10 offset-s1 mt-40">
<h4 class="mt-20 mb-20">Enter the code sent to</h4>
<div class="sms-prefix"></div>
<div class="sms"></div>
</div>
<div class="col s4 offset-s4 input-field mt-40">
<button class="btn btn-theme-2 col s10 offset-s1 disabled" id="resend">Resend</button>
</div>
</div>
<button id="showView1" class="btn btn-theme-3 btn-flat back-btn" data-launch-view="sign-up"><i class="fa fa-chevron-left" aria-hidden="true"></i></button>
</section>
<!--/VERIFY-FORM-->
<!--USER DATA-SECTION-->
<section class="container view hide bkg-white mt-40" id="user-data">
<div class="row">
<form class="col s12 mt-40">
<div class="row">
<div class="input-field col s12 m6">
<i class="fa fa-user"></i>
<input id="name" type="text" class="validate" placeholder="Name">
</div>
<div class="input-field col s12 m6">
<i class="fa fa-check"></i>
<input id="surname" type="text" class="validate" placeholder="Last Name">
</div>
</div>
<div class="row">
<div class="input-field col s12">
<i class="fa fa-envelope"></i>
<input id="email" type="email" class="validate" placeholder="email">
</div>
</div>
</form>
</div>
<div class="row mt-20">
<form action="#">
<h5>
<input type="checkbox" id="terms" />
<label for="terms">I agree to Lyft's <a href="#modal-terms" class="btn modal-trigger btn-flat btn-theme-3 bolder">Terms of service</a></label>
</h5>
</form>
<div class="row mt-40" id="row-sign2">
<div class="col s12">
<a class="btn-large btn-theme-2 col s12 disabled" id="register">Next</a>
</div>
</div>
</div>
<button id="showView2" class="btn btn-theme-3 btn-flat back-btn" data-launch-view="sign-form"><i class="fa fa-chevron-left" aria-hidden="true"></i></button>
</section>
<!--/USER DATA-SECTION-->
<!--REGISTERED-->
<section class="container-fluid view hide bkg-black" id="registered">
<div class="row center mt-40">
<h2 class="text-pink">Succesful registered</h2>
</div>
<div class="row center mt-40 mb-0">
<figure id="register-logo"><img src="assets/images/logo-white.png"></figure>
</div>
<div class="row center mt-0">
<figure id="register-moustache"><img src="assets/images/moustached.png"></figure>
</div>
<div class="row center">
<h3 class="text-white">Enjoy the ride!</h3>
</div>
<div class="row center mt-40">
<a class="btn-large btn-theme-1 col s4 offset-s4 modal-trigger" href="#modal-login" id="register">LOGIN</a>
</div>
</section>
<!--/REGISTERED-->
<!--MODALS-->
<!--MODAL LOGIN-->
<div id="modal-login" class="modal container-login center responsive flow-text">
<div class="modal-content mt-40">
<form action="">
<div class="input-field col s6 offset-s3">
<input id="UserName" type="text" class="validate">
<label for="UserName"><i class="fa fa-user"></i> Name</label>
</div>
<div class="input-field col s6 offset-s3 mt-20">
<input id="Password" type="password" class="validate">
<label for="Password"><i class="fa fa-lock"></i> Password</label>
</div>
<button class="btn btn-theme-2">LOGIN</i></button>
</form>
</div>
<div class="modal-footer flow-text">
<div class="row">
<p class="center">¿Did you forget your password?
<a href="#modal-recovery" class="btn modal-trigger btn-flat btn-theme-3 bolder" id="recovery-btn">Recover it!</a>
</p>
</div>
<div class="row">
<a href="#!" class="modal-action modal-close right">
<i class="fa fa-times responsive-img"></i>
<strong>Close</strong>
</a>
</div>
</div>
</div>
<!--/MODAL LOGIN-->
<!--MODAL RECOVERY-->
<div id="modal-recovery" class="modal container-login">
<div class="modal-content">
<form action="">
<div class="input-field col s10 offset-s1">
<input id="recovery-email" type="email" class="validate">
<label for="Password"><i class="fa fa-lock"></i> Email</label>
</div>
<button class="btn-flat btn-theme-2">Recover <i class="fa fa-send"></i></button>
</form>
</div>
<a href="#!" class="modal-action modal-close right">
<i class="fa fa-times class="responsive-img""></i>
<strong>Close</strong>
</a>
</div>
<!--/MODAL RECOVERY-->
<!--MODAL ALERT -->
<div id="modal-alert" class="modal container-login center responsive flow-text">
<div class="modal-content">
<div id="alert" class="alert"></div>
</div>
<div class="modal-footer flow-text">
<div class="row">
<a href="#!" class="modal-action modal-close right">
<i class="fa fa-times responsive-img"></i>
<strong>Close</strong>
</a>
</div>
</div>
</div>
<!--/MODAL ALERT -->
</main>
<!--SCRIPTS-->
<script src="js/jquery.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/app.js"></script>
</body>
</html>