-
Notifications
You must be signed in to change notification settings - Fork 2
/
reserve2.html
240 lines (227 loc) · 14.6 KB
/
reserve2.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
<!DOCTYPE html>
<html lang="en" class="h6">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Roo Storage</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.9.1/tachyons.min.css" />
<link rel="stylesheet" href="tachyons.css" />
<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="Custom.css" />
</head>
<!-- User experience:
Renter
Clicks reserve from listing
Takes you to my reservations page
1. Summary of space
a. Date of use, price, specs, etc.
2. Payment
3. Contract
4. Waiting of confirmation
a. Renter can cancel at anytime prior to host confirmation
5. Drop off date
a. Cancellation
i. Renter can cancel anytime prior to 7 days of drop-off
ii. Within 1-7 days, charged 25% of first months stay
iii. Within 24 hours, Charged 50% of first months stay
6. Pick up date
a. Renter can request early pick up
i. Must give host 24 hour notice
ii. Renter will be charge remaining month’s stay
1. A month is considered one date to the same date the next month (i.e. 1 month = July 13th to August 13th)
b. Renter can request an extension
i. Host can either accept or deny extension
ii. After requesting extension, they need to be able to Change the date of pick-up. Minimum of 7 days (unless hosts allows for shorter extensions)
7. Review
a. Rating and review of space
Host
Clicks and confirms all the inputted information is correct and the host has entered the necessary information for background check API (Still deciding on background checks). Maybe this could be apart of the timeline as well.
1. Confirm Listing information
a. Information of space from roo vetting check
2. Waiting on approval of Background check
3. Waiting on approval
a. Space can be approved or denied by roo
4. Waiting on reservation
a. Host can Remove from listings at anytime
b. Host can delete space at anytime
i. DOUBLE CHECK that the host wants to delete the space
Contact information is available at the time of confirmation for both parties
5. Waiting on Drop-off
a. Host can cancel anytime (following applies on a yearly basis)
i. Will be marked/flagged
ii. 1st cancellation
1. Greater than 1 week, no charge
a. First cancellation is waived
2. 1 day – 7 days, charged 25% of first month’s rent or $25, whichever is less
3. within 24 hours, charged 50% of first month’s rent or $50, whichever is less
iii. 2nd cancellation
1. Host under review (temporary deactivation)
2. Greater than 1 week 25% of first month’s rent or $25, whichever is less
3. 1 day – 7 days, charged 50% of first month’s rent or $50, whichever is less
4. within 24 hours, charged 75% of first month’s rent or $75, whichever is less
iv. 3rd cancellation
1. Deactivated until reapproved
6. Waiting on pick-up
a. Host most approve extension if requested by renter
7. Review
a. Rating and review of renter
b. Host can let us know that the items were never picked up
-->
<body class="f6 fw5 flex flex-column-l flex-row-m flex-column-reverse items-stretch vh-100">
<nav id="nav" class="f5-ns fw6-ns f7 fw7 flex-none pv3-m ph4-l pa0 shadow-hover z-9999 flex flex-column-l bg-white">
<ul class="flex flex-column-m no-underline list ma0 pa0 overflow-visible-ns overflow-hidden w-100 w-auto-ns">
<li class="dn flex-auto-l flex-ns items-center ph4 pv3-m">
<a href="index.html" class="fw9 f3 f2-m grow-large hover-navy dib black no-underline">Roo</a>
</li>
<li class="flex dn-ns hide-child o-80 glow w-20 w-auto-ns">
<a href="index.html" class="flex flex-column-reverse items-stretch self-stretch flex-auto no-underline black">
<span class="grow flex-auto flex flex-column flex-row-ns items-center pv3-ns pv2">
<span class="mb1 pl3 pt3 pr2 pb2 cover o-60 rotate-270" style="background:url('https://icongr.am/clarity/caret.svg')"></span>
Back</span>
<div class="b--navy ba child"></div>
</a>
</li>
<li class="flex hide-child o-80 ph3-l glow w-20 w-auto-ns">
<a href="listings.html" class="flex flex-column-l flex-row-m flex-column-reverse items-stretch self-stretch flex-auto no-underline black">
<span class="grow flex-auto flex flex-column flex-row-ns items-center pv3-ns pv2 pv4-l ph2-l mv1-m pl3-m pr4-m w-auto-ns">
<span class="mr3-l mr2-m mb1 mb0-ns pa2-ns pl3 pt3 pr2 pb2 cover o-60" style="background:url('https://icongr.am/clarity/view-list.svg')"></span>
Reserved</span>
<div class="b--navy ba child"></div>
</a>
</li>
<li class="flex hide-child o-80 ph3-l glow w-20 w-auto-ns">
<a href="listing.html" class="flex flex-column-l flex-row-m flex-column-reverse items-stretch self-stretch flex-auto no-underline black">
<span class="grow flex-auto flex flex-column flex-row-ns items-center pv3-ns pv2 pv4-l ph2-l mv1-m pl3-m pr4-m w-auto-ns">
<span class="mr3-l mr2-m mb1 mb0-ns pa2-ns pl3 pt3 pr2 pb2 cover o-60" style="background:url('https://icongr.am/clarity/house.svg')"></span>
Hosting</span>
<div class="b--navy ba child"></div>
</a>
</li>
<li class="flex hide-child o-80 ph3-l glow w-20 w-auto-ns">
<a href="listings.html" class="flex flex-column-l flex-row-m flex-column-reverse items-stretch self-stretch flex-auto no-underline black">
<span class="grow flex-auto flex flex-column flex-row-ns items-center pv3-ns pv2 pv4-l ph2-l mv1-m pl3-m pr4-m w-auto-ns">
<span class="mr3-l mr2-m mb1 mb0-ns pa2-ns pl3 pt3 pr2 pb2 cover o-60" style="background:url('https://icongr.am/clarity/history.svg')"></span>
History</span>
<div class="b--navy ba child"></div>
</a>
</li>
<li class="flex hide-child o-80 ph3-l glow w-20 w-auto-ns">
<a href="myprofile.html" class="flex flex-column-l flex-row-m flex-column-reverse items-stretch self-stretch flex-auto no-underline black">
<span class="grow flex-auto flex flex-column flex-row-ns items-center pv3-ns pv2 pv4-l ph2-l mv1-m pl3-m pr4-m w-auto-ns">
<span class="mr3-l mr2-m mb1 mb0-ns pa2-ns pl3 pt3 pr2 pb2 cover o-60" style="background:url('https://icongr.am/clarity/bell.svg')"></span>
Alerts</span>
<div class="b--navy ba child"></div>
</a>
</li>
</ul>
</nav>
<div class="flex-auto overflow-auto flex-ns flex-column">
<main class="flex-auto-l flex-none-m flex cover" style="background:url('https://fthmb.tqn.com/OiHafI02UCiFNrdDnPogfwwmHoU=/2121x1414/filters:no_upscale():fill(transparent,1)/about/Car-garage-GettyImages-528098460-58a1fba93df78c475869ff29.jpg') center;">
<div class="bg-black-70 flex self-stretch flex-auto flex-column-l flex-column-reverse">
<section class="flex-auto overflow-auto self-center flex flex-row-l flex-column-reverse justify-center relative mw8">
<div class="flex-auto flex flex-column overflow-auto bg-white mv4 br1 pa5-l pa4-m pa3 lh-copy">
<div class="f3 mv3">
Terms of Service
</div>
<div class="mv3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, culpa nihil amet ea cupiditate provident nulla sequi nemo
aliquid cumque ipsa obcaecati autem. Illum nisi hic unde in voluptatum perspiciatis?
</div>
<div class="mv3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores culpa blanditiis et in omnis sequi quo voluptates inventore
similique eius. Aut doloribus placeat ipsam iste rem delectus expedita laboriosam accusamus?
</div>
<div class="mv3">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum necessitatibus quidem non id commodi ut animi doloribus
quos cupiditate facilis soluta inventore recusandae quis, quibusdam autem ex impedit vero aliquid.
</div>
<div class="mv3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus veniam, velit quisquam quod est laboriosam ex veritatis,
odio in obcaecati iste molestias, itaque ea commodi! Ducimus consectetur beatae facilis veniam!
</div>
<div class="mv3">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores eveniet voluptatibus animi modi distinctio eligendi dolores
id incidunt pariatur impedit? Odit impedit amet totam mollitia modi error iste alias ipsum?
</div>
<div class="mv3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, culpa nihil amet ea cupiditate provident nulla sequi nemo
aliquid cumque ipsa obcaecati autem. Illum nisi hic unde in voluptatum perspiciatis?
</div>
<div class="mv3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores culpa blanditiis et in omnis sequi quo voluptates inventore
similique eius. Aut doloribus placeat ipsam iste rem delectus expedita laboriosam accusamus?
</div>
<div class="mv3">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum necessitatibus quidem non id commodi ut animi doloribus
quos cupiditate facilis soluta inventore recusandae quis, quibusdam autem ex impedit vero aliquid.
</div>
<div class="mv3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus veniam, velit quisquam quod est laboriosam ex veritatis,
odio in obcaecati iste molestias, itaque ea commodi! Ducimus consectetur beatae facilis veniam!
</div>
<div class="mv3">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores eveniet voluptatibus animi modi distinctio eligendi dolores
id incidunt pariatur impedit? Odit impedit amet totam mollitia modi error iste alias ipsum?
</div>
<div class="bg-orange breathe ph4 pv3 br1 white fw7 f5 self-center">Sure, I agree!</div>
</div>
<div class="mw6 self-center flex justify-center flex-column flex-none">
<div class="bg-white shadow-6 z-2 pa4 ma4 br1">
<div class="f2 fw7">Contract</div>
<div class="ph1 pv3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae repellat libero doloremque incidunt sunt ex quis est fuga,
eius dolore tenetur eveniet? Repellendus enim repudiandae nihil, dolor veniam debitis nemo?
</div>
<a href="reserve3.html#nav" class="bg-orange breathe dib ph4 pv3 br1 white fw7 f5 self-center link">Sure, I agree!</a>
</div>
</div>
</section>
<div class="flex-none self-stretch flex justify-center relative pa2 bg-navy">
<div class="self-center flex flex-row justify-around white tc lh-copy f6 fw3 mw7 w-100">
<div class="relative flex-column flex-row-l flex items-center o-50 glow">
<div class="z-3 br-pill ba bw1 blue ma2-l ma1 h2 w2 flex justify-center items-center f5 fw7">1</div>
<div class="fw5 f5-l f7 blue">Summary</div>
</div>
<div class="relative flex-column flex-row-l flex items-center">
<div class="z-3 br-pill bg-white blue ma2-l ma1 h2 w2 flex justify-center items-center f5 fw7">2</div>
<div class="fw5 f5-l f7">Contract</div>
</div>
<div class="relative flex-column flex-row-l flex items-center">
<div class="z-3 br-pill ba bw1 blue ma2-l ma1 h2 w2 flex justify-center items-center f5 fw7">3</div>
<div class="fw5 f5-l f7 blue">Payment</div>
</div>
</div>
</div>
</div>
</main>
<footer class="flex-none flex flex-wrap items-center justify-between ma3 ma4-l o-50 black-50 glow">
<div class="flex flex-column flex-row-l">
<div class="flex items-center grow ma2 hover-navy">
<div class="o-50 cover h1 w1 ma2 grow flex-shrink-0" style="background:url(
'https://icongr.am/clarity/email.svg')"></div>
<div class="flex-shrink-1">[email protected]</div>
</div>
<div class="flex items-center grow ma2 hover-navy">
<div class="o-50 cover h1 w1 ma2 grow flex-shrink-0" style="background:url(
'https://icongr.am/simple/facebook.svg')"></div>
<div class="flex-shrink-1">fb.com/roo</div>
</div>
<div class="flex items-center grow ma2 hover-navy">
<div class="o-50 cover h1 w1 ma2 grow flex-shrink-0" style="background:url(
'https://icongr.am/simple/twitter.svg')"></div>
<div class="flex-shrink-1">@roo</div>
</div>
<div class="flex items-center grow ma2 hover-navy">
<div class="o-50 cover h1 w1 ma2 grow flex-shrink-0" style="background:url(
'https://icongr.am/simple/instagram.svg')"></div>
<div class="flex-shrink-1">@roo</div>
</div>
</div>
<div class="ma2 ma2 self-center">
Copyright © Roo 2018
</div>
</footer>
</div>
</body>
</html>