-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathreserve.html
503 lines (493 loc) · 28.7 KB
/
reserve.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
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
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
<html lang="en">
<head>
<meta charset="utf-8">
<title>Roo</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1"
>
<meta
name="description"
content="Find affordable storage in your neighborhood and only pay for the days that you need it. We make storage simple. Roo is a neighborhood friendly platform that connects those with extra space to those in need of storage. Sign up now to ensure you get storage for the summer!"
>
<meta
name="keywords"
content="Storage,Roo Storage,Roo,roo,storage,college"
>
<link
href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet"
>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"
>
<link
rel="stylesheet"
href="style.css"
>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sticky-js/1.2.0/sticky.min.js">
</script>
<style>
/* CARD ANIMATION */
details[open] {
/* shadow-5 */
-webkit-box-shadow: 0px 0px 64px 0px rgba(0, 0, 0, 0.08);
box-shadow: 0px 0px 64px 0px rgba(0, 0, 0, 0.08);
/* mv3 */
margin-top: 1rem;
margin-bottom: 1rem;
/* pt2 */
padding-top: 0.5rem;
}
details[open] summary {
font-size: 1.62em;
}
details[open] summary~* {
animation-direction: alternate;
animation-name: animate-card;
animation-duration: 1s;
}
@keyframes animate-card {
from {
max-height: 0%
}
to {
max-height: 100%;
}
}
/* details summary~* {
overflow: hidden;
transition-duration: 5s;
transition-property: max-height opacity;
opacity: 0;
max-height: 0;
} */
</style>
</head>
<!--
Here it is:
- Improve navigation (put navigation under compose request instead of the request message)
- Reduce clutter on mobile (possibly put the request message in a section)
- Change header to non-image (maybe similar to the features page)
- Remove modals
- Add confirm details page (phone number, email, and name)
- use emoji in message
-->
<body class="flex-l items-stretch justify-center ma3-ns ma4-l">
<section class="measure-wide center flex-auto">
<div class="sticky top-0">
<h2
id="1"
class="z-2 sticky top-0 bg-white ph3 pt2 pt3-ns f3-ns f2"
><span class="flex justify-between">
<span>Compose Request
</span>
<span class="blue"><sup class="f-1 fw7 tracked-3">$
</sup>63
</span>
</span>
<progress
style="height:0.25rem"
class="mt1 mv2-ns"
value="2"
min="0"
max="5"
>
</progress>
</h2>
<p class="measure mt3 ma1 ph3 lh-copy">
Hosts get to approve or deny reservation requests. Let's build your reservation request and send
it to Ned!
</p>
<ul class="pv2">
<li>
<details class="br5-ns">
<summary class="f1 relative pointer z-1 pa3 ma2 blue lh-solid">
<span class="mr3 ml2">📝
</span>Confirm Listing Details
</summary>
<div class="pa2 nt3 mh3">
<p class="measure ma2 lh-copy">
This should look familiar! It's just the summary of the listing you're
requesting.
We'll email you all of these details if the host confirms your request.
</p>
<article class="shadow-3 flex-auto mt3 flex flex-column br4 overflow-hidden">
<header class="z-1 flex-auto flex items-start justify-between mb2 relative">
<div class="absolute absolute--fill img-child">
<img
src="https://images.unsplash.com/photo-1480074568708-e7b720bb3f09"
alt="Ned's Header Image"
>
</div>
<div class="relative flex lh-solid items-center fw6 pa2 br3 ma1 bg-white blue">
<img
src="https://icongr.am/clarity/shield-check.svg?color=027bc2"
alt="Verification Icon"
class="contain mr1"
style="width:1em; height:1em;"
>
<span class="i mr1 f7">Roo Verified
</span>
</div>
<img
src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91"
alt="Ned's Avatar"
class="relative br-pill ba bw2-ns bw1 white f3 nb4 ma4"
style="width:4em; height:4em;"
>
</header>
<main class="flex-none flex flex-column bg-white ma2">
<h1 class="mv2 mh3 fw3 f3 lh-solid">
Ned's Shed
</h1>
<p class="measure mh3 mv2 lh-copy">
Description Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<ul class="flex flex-wrap items-center">
<li class="flex-auto mv2 mh3">
<h2 class="f-1 tracked-1 hover-blue db mv1">Space
</h2>
<p class="measure ">15
<sup>sqft
</sup>
</p>
</li>
<li class="flex-auto mv2 mh3">
<h2 class="f-1 tracked-1 hover-blue db mv1">Dimensions
</h2>
<p class="measure ">5
<sup>ft
</sup> x 3
<sup>ft
</sup>
</p>
</li>
<li class="flex-auto mv2 mh3">
<h2 class="f-1 tracked-1 hover-blue db mv1">Location
</h2>
<p class="measure ">East Campus
</p>
</li>
</ul>
<ol class="flex">
<li class="flex-auto ma2">
<label
class="f-1 tracked-1 hover-blue db mv1 mh2"
for="listingsFilterStartDate"
>Start Date
</label>
<input
class="w-100"
type="datetime"
value="2019-04-09"
>
</li>
<li class="flex-auto ma2">
<label
class="f-1 tracked-1 hover-blue db mv1 mh2"
for="listingsFilterEndDate"
>End Date
</label>
<input
class="w-100"
type="datetime"
value="2019-04-09"
>
</li>
</ol>
</main>
</article>
<menu class="lg-white-fade-up pv3 sticky bottom-0">
<button
type="button"
class="ba bg-white blue db w-100"
>Listing Summary Approved
</button>
</menu>
</div>
</details>
</li>
<li>
<details class="br5-ns">
<summary class="f1 relative pointer z-1 pa3 ma2 blue lh-solid">
<span class="mr3 ml2">📦
</span>What You're storing
</summary>
<div class="pa2 nt3 mh3">
<p class="measure ma2 lh-copy">
This section is where you're describing what you'd like to store. It's needed for
insurance purposes.
</p>
<p class="measure ma2 lh-copy">
Is this section essential for the process? If this is a proxy question for figuring
out who is using roo and why they're using it? Is this something we could move to
the "responsibility" of the host? It seems the host may be able to answer this
question more directly by just being a little conversational during the drop-off,
and in turn we could improve our marketing efforts to host their space more
frequently. Idk, we could discuss it next time we meet or something. :)
</p>
<textarea
name=""
id=""
id="storing"
class="mt2 w-100 lh-phi"
>I need to store my furniture between leases.
</textarea>
<menu class="lg-white-fade-up pv3 sticky bottom-0">
<button
type="button"
class="bg-blue white db w-100"
>Save Storage Description
</button>
</menu>
</div>
</details>
</li>
<li>
<details class="br5-ns">
<summary class="f1 relative pointer z-1 pa3 ma2 blue lh-solid">
<span class="mr3 ml2">💳
</span>Setup Payment
</summary>
<div class="br5-ns pa2 nt3 mh3">
<div>
<p class="mv2 lh-copy"> Select your payment type below. You won't be charged
until your host
confirms your reservation request!
</p>
<p class="mv2 lh-copy "> Upfront pricing is a one time
payment of <b>$108 paid
upon confirmation from your host.
</b> Installment pricing for this
reservation is <b>$30 paid 4 times for a total of
$120.
</b>
</p>
</div>
<fieldset class="mv3 lh-copy">
<div class="flex justify-between navy">
<label
for="cc-num"
class="f-1 hover-blue mh2 tracked-1 fw6"
>Credit Card</label>
<button class="f-2 hover-blue mh2 pa0">Change Card</button>
</div>
<div class="pa0 input-wrapper flex items-center relative">
<label for="cc-num">
<img
src="https://icongr.am/clarity/credit-card.svg"
alt=""
class="o-30 f2 ml2 pointer"
style="width:1em;height:1em;"
></label>
<input
id="cc-num"
type="text"
class="w-60 flex-auto ma0 bn bg-transparent hover-bg-transparent"
placeholder="Card number"
>
<input
type="text"
class="w-20 tracked-3 flex-auto ma0 bn bg-transparent hover-bg-transparent"
placeholder="MM/YY"
>
<input
type="text"
class="w-20 tracked-3 flex-auto ma0 bn bg-transparent hover-bg-transparent"
placeholder="CVC"
>
</div>
</fieldset>
<fieldset class="mv3 lh-copy">
<div class="flex justify-between navy">
<label
for="cc-num"
class="f-1 hover-blue mh2 tracked-1 fw6"
>Payment Strategy</label>
<button class="f-2 hover-blue mh2 pa0">More Info</button>
</div>
<menu class="input-wrapper fw5 pa0 flex overflow-hidden">
<button class="br0 hover-white hover-bg-blue flex-auto flex justify-between">
<div> Lump Sum </div>
<div> $108 </div>
</button>
<div class="flex-none ba o-10 blue"></div>
<button class="br0 hover-white hover-bg-blue flex-auto flex justify-between">
<div> Installments </div>
<div> 4 x $30 </div>
</button>
</menu>
</fieldset>
<button
class="mv3 bg-blue white db w-100 "
type="button"
> Save Payment Info
</button>
</div>
</details>
</li>
<li>
<details
open
class="br5-ns overflow-hidden relative"
>
<summary class="f1 relative pointer z-1 pa3 ma2 blue lh-solid">
<span class="mr3 ml2">🤝
</span>Send Request
</summary>
<div class="br5-ns pa2 nt3 mh3">
<p class="mv2 lh-copy">
Once you send the request to the host and they approve it, They'll reach out and
sort out the finer details of the drop-off.
</p>
<div class="flex items-end mv3 ">
<a
href="#openIntercom"
class="pr3 na2"
>
<img
class="h2 w2"
src="https://s3.us-east-2.amazonaws.com/roo-image-storage/static-images/logo/Tight/PNG/BOLD/Orange_Filled.png"
></a>
<div class="relative">
<article
class="z-1 relative overflow-hidden shadow-3 bg-orange measure-narrow-ns mw5 mr-auto white br5 pa1 fw5 lh-title"
>
<div
class="parallax absolute absolute--fill lg-white-fade-down o-30"
style="mix-blend-mode:soft-light;"
></div>
<p class="relative lh-title ma2">
You're almost done! Your request looks good to us! Make sure it looks
right to you! and then tap <button
type="button"
class="pa0 ma0 ba ph1 br-pill inline-flex items-center justify-center hover-bg-blue"
><img
src="https://icongr.am/clarity/arrow.svg?color=ffffff"
alt=""
class="pointer"
style="width:1em;height:1em;"
>
<span class="white ml1 mr2 pointer f-2 dn db-ns">
Send Request
</span>
</button>
</p>
</article>
<div
class="br bw4 b--orange absolute bottom-0 left--1"
style="border-bottom-right-radius:1rem; height: 1rem; width: 1.5rem;"
></div>
</div>
</div>
<!-- You can comment this back in to see what the message would look like when it's sent -->
<!--
<div class="relative mv3">
<article
class="z-1 relative overflow-hidden shadow-3 bg-blue measure-narrow-ns mw5 ml-auto white br5 pa1 fw5 lh-title"
>
<div
class="parallax absolute absolute--fill lg-white-fade-down o-30"
style="mix-blend-mode:soft-light;"
></div>
<form
action=""
class="relative lh-title"
novalidate=""
contenteditable="true"
>
<p class="measure ma2 tracked-1">Hey Joe,</p>
<p class="measure mv1 mh2 "> My name is Jack, and I'd like to
rent your space for about 4 months. </p>
<p class="measure mv1 mh2 "> My plan is to drop all my stuff on
<a class="underline">Thursday, May 30, 2019.</a> and I'll pick it up on
<a class="underline">Friday, August 30, 2019.</a></p>
<p class="measure mv1 mh2 "><a class="underline">books</a></p>
<p class="measure mv1 mh2 "> I will be paying <a class="underline"> $30 in 4
installments or </a><a
class="underline"
href="#payment"
> $108 total. </a></p>
<p class="measure mv1 mh2"> 📇 Here is my contact info <br> 📧 Email :
[email protected] </p>
<p class="measure mv1 mh2">Thanks,</p>
<p class="measure mv1 mh2">Jack</p>
</form>
</article>
<div
class="bl bw4 b--blue absolute bottom-0 right--1"
style="border-bottom-left-radius:1rem; height: 1rem; width: 1.5rem;"
></div>
</div>
<button
class="mv3 bg-blue white db w-100 "
type="button"
> Looks Good, Send Request
</button> -->
</div>
<div class="relative bottom-0 bg-black-05 flex items-start justify-between pa3-ns pa2 bt b--black-10">
<button
type="button"
class="flex-none sticky bottom-1 self-end pa2 bn bg-blue br-pill"
><img
src="https://icongr.am/clarity/add.svg?color=ffffff"
alt=""
class="f1 pointer"
style="width:1em;height:1em;"
>
</button>
<article
class="z-1 bg-white measure-narrow-ns mw5 navy br5 pa1 fw5 lh-title ba b--black-10 hover-b--blue mh2"
>
<form
class="relative lh-title"
contenteditable="true"
>
<p class="measure ma2 tracked-1">Hey Joe,</p>
<p class="measure mv1 mh2 "> My name is Jack, and I'd like to
rent your space for about 4 months. </p>
<p class="measure mv1 mh2 "> My plan is to drop all my stuff on
<a class="underline">Thursday, May 30, 2019.</a> and I'll pick it up on
<a class="underline">Friday, August 30, 2019.</a></p>
<p class="measure mv1 mh2 "><a class="underline">I need to store my furniture
between leases.
</a></p>
<p class="measure mv1 mh2 "> I will be paying <a class="underline"> $30 in 4
installments or </a><a
class="underline"
href="#payment"
> $108 total. </a></p>
<p class="measure mv1 mh2"> 📇 Here is my contact info <br> 📧 Email :
[email protected] </p>
<p class="measure mv1 mh2">Thanks,</p>
<p class="measure mv1 mh2">Jack</p>
</form>
</article>
<button
type="button"
class="flex-none sticky bottom-1 self-end pa2 bn bg-blue br-pill"
><img
src="https://icongr.am/clarity/arrow.svg?color=ffffff"
alt=""
class="f1 pointer"
style="width:1em;height:1em;"
>
<span class="white ml1 mr2 pointer f-1 dn db-ns">
Send Request
</span>
</button>
</div>
</details>
</li>
</ul>
</div>
</section>
<!-- <section class="relative measure flex-column justify-end">
<div class="sticky top-0">
This would hold the reservation details during the process if the page feels to empty
</div>
</section> -->
</body>
</html>