Skip to content

Commit ce73eb1

Browse files
alexaorricoalexaorrico
committed
add task 11
1 parent 1c17062 commit ce73eb1

8 files changed

Lines changed: 214 additions & 0 deletions

File tree

‎web_flask/10-hbnb_filters.py‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
#!/usr/bin/python3
2+
"""
3+
starts a Flask web application
4+
"""
5+
6+
from flask import Flask, render_template
7+
from models import *
8+
from models import storage
9+
app = Flask(__name__)
10+
11+
12+
@app.route('/hbnb_filters', strict_slashes=False)
13+
def filters():
14+
"""display a HTML page like 6-index.html from static"""
15+
states = storage.all("State").values()
16+
amenities = storage.all("Amenity").values()
17+
return render_template('10-hbnb_filters.html', states=states,
18+
amenities=amenities)
19+
20+
21+
@app.teardown_appcontext
22+
def teardown_db(exception):
23+
"""closes the storage on teardown"""
24+
storage.close()
25+
26+
if __name__ == '__main__':
27+
app.run(host='0.0.0.0', port='5000')

‎web_flask/static/images/icon.png‎

2.89 KB
Loading

‎web_flask/static/images/logo.png‎

9.64 KB
Loading

‎web_flask/static/styles/3-footer.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
footer {
2+
position: fixed;
3+
bottom: 0;
4+
width: 100%;
5+
background-color: white;
6+
height: 60px;
7+
border-top: 1px solid #CCCCCC;
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
}

‎web_flask/static/styles/3-header.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
header {
2+
width: 100%;
3+
background-color: white;
4+
height: 70px;
5+
border-bottom: 1px solid #CCCCCC;
6+
display: flex;
7+
align-items: center;
8+
}
9+
10+
.logo {
11+
width: 142px;
12+
height: 60px;
13+
background: url("../images/logo.png") no-repeat center;
14+
padding-left: 20px;
15+
}

‎web_flask/static/styles/4-common.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
color: #484848;
5+
font-size: 14px;
6+
font-family: Circular,"Helvetica Neue",Helvetica,Arial,sans-serif;
7+
}
8+
9+
.container {
10+
max-width: 1000px;
11+
margin-top: 30px;
12+
margin-bottom: 30px;
13+
margin-left: auto;
14+
margin-right: auto;
15+
}

‎web_flask/static/styles/6-filters.css‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
.filters {
2+
background-color: white;
3+
height: 70px;
4+
width: 100%;
5+
border: 1px solid #DDDDDD;
6+
border-radius: 4px;
7+
display: flex;
8+
align-items: center;
9+
}
10+
11+
section.filters > button{
12+
font-size: 18px;
13+
color: white;
14+
background-color: #FF5A5F;
15+
height: 48px;
16+
border: 0px;
17+
border-radius: 4px;
18+
width: 20%;
19+
margin-left: auto;
20+
margin-right: 30px;
21+
opacity: 1;
22+
}
23+
24+
section.filters > button:hover {
25+
opacity: 0.9;
26+
}
27+
28+
.locations, .amenities {
29+
height: 100%;
30+
width: 25%;
31+
padding-left: 50px;
32+
}
33+
34+
.locations {
35+
border-right: 1px solid #DDDDDD;
36+
}
37+
.locations > h3, .amenities > h3 {
38+
font-weight: 600;
39+
margin: 12px 0 5px 0;
40+
}
41+
42+
.locations > h4, .amenities > h4 {
43+
font-weight: 400;
44+
font-size: 14px;
45+
margin: 0 0 5px 0;
46+
}
47+
48+
.popover {
49+
display: none;
50+
position: relative;
51+
left: -51px;
52+
background-color: #FAFAFA;
53+
width: 100%;
54+
border: 1px solid #DDDDDD;
55+
border-radius: 4px;
56+
z-index: 1;
57+
padding: 30px 50px 30px 0;
58+
margin-top: 17px;
59+
}
60+
61+
.popover, .popover ul {
62+
list-style-type: none;
63+
}
64+
.locations:hover > .popover {
65+
display: block;
66+
}
67+
68+
.amenities:hover > .popover {
69+
display: block;
70+
}
71+
72+
.popover h2 {
73+
margin-top: 0px;
74+
margin-bottom: 5px;
75+
}
76+
77+
.locations > .popover > li {
78+
margin-bottom: 30px;
79+
margin-left: 30px;
80+
}
81+
.locations > .popover > li > ul {
82+
padding-left: 20px;
83+
}
84+
.locations > .popover > li > ul > li {
85+
margin-bottom: 10px;
86+
}
87+
88+
.amenities > .popover > li {
89+
margin-left: 50px;
90+
margin-bottom: 10px;
91+
}

‎web_flask/templates/10-hbnb_filters.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<link rel="stylesheet" href="styles/4-common.css">
6+
<link rel="stylesheet" href="styles/3-header.css">
7+
<link rel="stylesheet" href="styles/3-footer.css">
8+
<link rel="stylesheet" href="styles/6-filters.css">
9+
<link rel="icon" href="images/icon.png" type="image/png">
10+
<title>AirBnb Clone</title>
11+
</head>
12+
<body>
13+
<header>
14+
<div class="logo">
15+
</div>
16+
</header>
17+
<div class="container">
18+
<section class="filters">
19+
<div class="locations">
20+
<h3>States</h3>
21+
<h4>&nbsp;</h4>
22+
<ul class="popover">
23+
{% for state in states|sort(attribute='name') %}
24+
<li>
25+
<h2>{{ state.name }}:</h2>
26+
<ul>
27+
{% for city in state.cities|sort(attribute='name') %}
28+
<li>{{ city.name }}</li>
29+
{% endfor %}
30+
</ul>
31+
</li>
32+
{% endfor %}
33+
</ul>
34+
</div>
35+
<div class="amenities">
36+
<h3>Amenities</h3>
37+
<h4>&nbsp;</h4>
38+
<ul class="popover">
39+
{% for amenity in amenities|sort(attribute='name') %}
40+
<li>{{ amenity.name }}</li>
41+
{% endfor %}
42+
</ul>
43+
</div>
44+
<button>
45+
Search
46+
</button>
47+
</section>
48+
</div>
49+
<footer>
50+
<p>
51+
Holberton School
52+
</p>
53+
</footer>
54+
</body>
55+
</html>

0 commit comments

Comments
 (0)