-
Notifications
You must be signed in to change notification settings - Fork 2
/
reserve1.html
275 lines (263 loc) · 16.9 KB
/
reserve1.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
<!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">
<header class="flex-none flex flex-wrap-reverse justify-between items-end z-3 h2 ph4-l ph3 mt6-l">
<div class="flex justify-around items-center bg-white br1 shadow-6 relative f7 lh-copy">
<div class="hover-bg-gold hide-child br1">
<div class="ma3 pa2 cover bg-center" style="background-image: url('https://icongr.am/clarity/lock.svg');">
</div>
<div class="absolute left-0 bottom-2 child bg-white mb4 pa3 br1">
incidunt nisi in quidem porro modi aut omnis distinctio culpa vero?
</div>
</div>
<div class="hover-bg-gold hide-child br1">
<div class="ma3 pa2 cover bg-center" style="background-image: url('https://icongr.am/clarity/shield.svg');">
</div>
<div class="absolute left-0 bottom-2 child bg-white mb4 pa3 br1">
suscipit blanditiis eligendi aliquam sapiente ratione quasi, magnam optio corrupti earum modi!
</div>
</div>
<div class="hover-bg-gold hide-child br1">
<div class="ma3 pa2 cover bg-center" style="background-image: url('https://icongr.am/clarity/check.svg');">
</div>
<div class="absolute left-0 bottom-2 child bg-white mb4 pa3 br1">
quae mollitia architecto cumque nobis quidem, possimus, recusandae aperiam aspernatur vitae in!
</div>
</div>
<div class="hover-bg-gold hide-child br1">
<div class="ma3 pa2 cover bg-center" style="background-image: url('https://icongr.am/clarity/history.svg');">
</div>
<div class="absolute left-0 bottom-2 child bg-white mb4 pa3 br1">
officiis, debitis sed quibusdam veniam autem aliquid vel architecto.
</div>
</div>
</div>
<div class="bg-black pt5-ns pl5-ns pa4 mv2 br-pill cover ba bw1 shadow-6 white" style="background:url('https://images.unsplash.com/photo-1494790108377-be9c29b29330')"></div>
</header>
<div class="flex flex-none flex-wrap items-start justify-center-l bg-white pa4-l pa3-m mh4-m pa2 br1 br--top shadow-6 z-2 lh-copy">
<div class="pa3 mw6">
<div class="f1-l f2 fw3 pv3 lh-solid flex-auto items-end flex">
Joanne's Garage
</div>
<div class="f6">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque repellendus fugiat nihil consequatur voluptatem ipsum.
Repellendus ipsam quos. Labore excepturi a amet.
</div>
</div>
<section class="pa3 flex-auto mw5-ns">
<div class="f4 fw5 pv2">Reviews</div>
<div class="flex-auto flex flex-column justify-between f6">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sit, velit eaque placeat tempora est totam architecto.
</div>
<div class="pv2 i fw3">
-- Borth Filmuth
</div>
</section>
<section class="pa3 flex-auto mw5-ns">
<div class="f4 fw5 pv2">Features</div>
<div class="flex-auto flex flex-column justify-between">
<div class="flex">
<div class="dib pa2 pt3 pl3 contain" style="background: url('https://icongr.am/clarity/thermometer.svg') no-repeat center;"></div>
<span class="dib pa2">Climate Controlled</span>
</div>
<div class="flex">
<div class="dib pa2 pt3 pl3 contain" style="background: url('https://icongr.am/clarity/shield.svg') no-repeat center;"></div>
<span class="dib pa2">Security System</span>
</div>
<div class="flex">
<div class="dib pa2 pt3 pl3 contain" style="background: url('https://icongr.am/clarity/eye-show.svg') no-repeat center;"></div>
<span class="dib pa2">Security Camera</span>
</div>
</div>
</section>
</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">Summary</div>
<div class="ph1 pv2">
<div class="pv3">
<div class="pv1 f7">Drop-off Date</div>
<div class="pv1 bb b--black-05">Saturday, June 5th, 2018</div>
</div>
<div class="pv3">
<div class="pv1 f7">Pick-up Date</div>
<div class="pv1 bb b--black-05">Monday, July 5th, 2018</div>
</div>
<div class="pv3">
<div class="pv1 f7">Total Price</div>
<div class="pv1 bb b--black-05">$78.55</div>
</div>
</div>
<a href="reserve2.html#nav" class="bg-orange breathe dib ph4 pv3 br1 white fw7 f5 self-center link">Sounds Good! I'll take it!</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>