diff --git a/web_dynamic/0-hbnb.html b/web_dynamic/0-hbnb.html new file mode 100644 index 0000000..4de854f --- /dev/null +++ b/web_dynamic/0-hbnb.html @@ -0,0 +1,89 @@ + + + + + + + + + + + AirBnb Clone + + +
+ +
+
+
+
+

States

+

 

+
    + {% for state in states.values()|sort(attribute='name') %} +
  • +

    {{ state.name }}

    +
      + {% for city in state.cities|sort(attribute='name') %} +
    • {{ city.name }}
      • + {% endfor %} +
    +
    • + {% endfor %} +
+
+
+

Amenities

+

 

+
    + {% for amty in amenities.values() %} +
  • {{ amty.name }}
    • + {% endfor %} +
+
+ +
+
+

Places

+ {% for place in places.values()|sort(attribute='name') %} +
+

{{ place.name }}

+
+

${{ place.price_by_night }}

+
+
+
+
+

{{ place.max_guest }}

+
+
+
+

{{ place.number_rooms }}

+
+
+
+

{{ place.number_bathrooms }}

+
+
+
+

Owner: {{ place.user.first_name ~ ' ' ~ place.user.last_name }}

+
+
+ {% autoescape false %} +

{{ place.description }}

+ {% endautoescape %} +
+
+ {% endfor %} +
+
+ + + diff --git a/web_dynamic/0-hbnb.py b/web_dynamic/0-hbnb.py new file mode 100755 index 0000000..4eaf3e6 --- /dev/null +++ b/web_dynamic/0-hbnb.py @@ -0,0 +1,29 @@ +#!/usr/bin/python3 +"""Flask app to generate complete html page containing location/amenity +dropdown menus and rental listings""" +from flask import Flask, render_template +from models import storage +app = Flask('web_flask') +app.url_map.strict_slashes = False + + +@app.route('/hbnb') +def display_hbnb(): + """Generate page with popdown menu of states/cities""" + states = storage.all('State') + amenities = storage.all('Amenity') + places = storage.all('Place') + return render_template('0-hbnb.html', + states=states, + amenities=amenities, + places=places) + + +@app.teardown_appcontext +def teardown_db(*args, **kwargs): + """Close database or file storage""" + storage.close() + + +if __name__ == '__main__': + app.run(host='0.0.0.0', port=5000) diff --git a/web_dynamic/__init__.py b/web_dynamic/__init__.py new file mode 100755 index 0000000..a93a4bf --- /dev/null +++ b/web_dynamic/__init__.py @@ -0,0 +1 @@ +#!/usr/bin/python3 diff --git a/web_dynamic/static/images/icon.png b/web_dynamic/static/images/icon.png new file mode 100644 index 0000000..93492bb Binary files /dev/null and b/web_dynamic/static/images/icon.png differ diff --git a/web_dynamic/static/images/icon_bath.png b/web_dynamic/static/images/icon_bath.png new file mode 100644 index 0000000..7a9bfed Binary files /dev/null and b/web_dynamic/static/images/icon_bath.png differ diff --git a/web_dynamic/static/images/icon_bed.png b/web_dynamic/static/images/icon_bed.png new file mode 100644 index 0000000..2a63284 Binary files /dev/null and b/web_dynamic/static/images/icon_bed.png differ diff --git a/web_dynamic/static/images/icon_group.png b/web_dynamic/static/images/icon_group.png new file mode 100644 index 0000000..3e012ab Binary files /dev/null and b/web_dynamic/static/images/icon_group.png differ diff --git a/web_dynamic/static/images/logo.png b/web_dynamic/static/images/logo.png new file mode 100644 index 0000000..9b255c9 Binary files /dev/null and b/web_dynamic/static/images/logo.png differ diff --git a/web_dynamic/static/styles/3-footer.css b/web_dynamic/static/styles/3-footer.css new file mode 100644 index 0000000..19fe711 --- /dev/null +++ b/web_dynamic/static/styles/3-footer.css @@ -0,0 +1,11 @@ +footer { + position: fixed; + bottom: 0; + width: 100%; + background-color: white; + height: 60px; + border-top: 1px solid #CCCCCC; + display: flex; + justify-content: center; + align-items: center; +} diff --git a/web_dynamic/static/styles/3-header.css b/web_dynamic/static/styles/3-header.css new file mode 100644 index 0000000..70dd644 --- /dev/null +++ b/web_dynamic/static/styles/3-header.css @@ -0,0 +1,15 @@ +header { + width: 100%; + background-color: white; + height: 70px; + border-bottom: 1px solid #CCCCCC; + display: flex; + align-items: center; +} + +.logo { + width: 142px; + height: 60px; + background: url("../images/logo.png") no-repeat center; + padding-left: 20px; +} diff --git a/web_dynamic/static/styles/4-common.css b/web_dynamic/static/styles/4-common.css new file mode 100644 index 0000000..1f2f05d --- /dev/null +++ b/web_dynamic/static/styles/4-common.css @@ -0,0 +1,15 @@ +body { + margin: 0; + padding: 0; + color: #484848; + font-size: 14px; + font-family: Circular,"Helvetica Neue",Helvetica,Arial,sans-serif; +} + +.container { + max-width: 1000px; + margin-top: 30px; + margin-bottom: 30px; + margin-left: auto; + margin-right: auto; +} diff --git a/web_dynamic/static/styles/6-filters.css b/web_dynamic/static/styles/6-filters.css new file mode 100644 index 0000000..413ad40 --- /dev/null +++ b/web_dynamic/static/styles/6-filters.css @@ -0,0 +1,93 @@ +.filters { + background-color: white; + height: 70px; + width: 100%; + border: 1px solid #DDDDDD; + border-radius: 4px; + display: flex; + align-items: center; +} + +section.filters > button{ + font-size: 18px; + color: white; + background-color: #FF5A5F; + height: 48px; + border: 0px; + border-radius: 4px; + width: 20%; + margin-left: auto; + margin-right: 30px; + opacity: 1; +} + +section.filters > button:hover { + opacity: 0.9; +} + +.locations, .amenities { + height: 100%; + width: 25%; + padding-left: 50px; +} + +.locations { + border-right: 1px solid #DDDDDD; +} +.locations > h3, .amenities > h3 { + font-weight: 600; + margin: 12px 0 5px 0; +} + +.locations > h4, .amenities > h4 { + font-weight: 400; + font-size: 14px; + margin: 0 0 5px 0; +} + +.popover { + display: none; + position: relative; + left: -51px; + background-color: #FAFAFA; + width: 100%; + max-height: 300px; + border: 1px solid #DDDDDD; + border-radius: 4px; + z-index: 1; + padding: 30px 50px 30px 0; + margin-top: 17px; + overflow: scroll; +} + +.popover, .popover ul { + list-style-type: none; +} +.locations:hover > .popover { + display: block; +} + +.amenities:hover > .popover { + display: block; +} + +.popover h2 { + margin-top: 0px; + margin-bottom: 5px; +} + +.locations > .popover > li { + margin-bottom: 30px; + margin-left: 30px; +} +.locations > .popover > li > ul { + padding-left: 20px; +} +.locations > .popover > li > ul > li { + margin-bottom: 10px; +} + +.amenities > .popover > li { + margin-left: 50px; + margin-bottom: 10px; +} diff --git a/web_dynamic/static/styles/8-places.css b/web_dynamic/static/styles/8-places.css new file mode 100644 index 0000000..ec2cdcb --- /dev/null +++ b/web_dynamic/static/styles/8-places.css @@ -0,0 +1,108 @@ +.places { + width: 100%; + border: 0; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; +} + +.places > h1 { + font-size: 30px; + padding-left: 20px; + padding-top: 20px; + margin-bottom: 0px; + flex: 0 1 100%; +} +.places > article { + width: 390px; + max-height: fit-content; + padding: 20px 20px 20px 20px; + margin: 20px 20px 20px 20px; + border: 1px solid #FF5A5F; + border-radius: 4px; + display: flex; + flex-direction: column; + justify-content: flex-start; + position: relative; +} + +.places > article > h2 { + font-size: 30px; + margin: 0 20% 0 0; + align-self: center; +} + +.price_by_night { + color: #FF5A5F; + border: 4px solid #FF5A5F; + min-width: 60px; + height: 60px; + font-size: 30px; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + margin-left: auto; + position: absolute; + top: 10px; + right: 20px; +} +.price_by_night > p { + margin: 0 0 0 0; +} + +.information { + align-self: center; + height: 80px; + width: 100%; + border-top: 1px solid #DDDDDD; + border-bottom: 1px solid #DDDDDD; + margin-top: 30px; + display: flex; + justify-content: center; + align-items: center; +} + +.max_guest, .number_rooms, .number_bathrooms { + width: 100px; + text-align: center; +} + +.max_guest > p, .number_rooms > p, .number_bathrooms > p{ + margin-top: auto; + margin-bottom: auto; +} + +.guest_image { + margin-left: auto; + margin-right: auto; + height: 50px; + width: 50px; + background: url("../images/icon_group.png") no-repeat center; +} + +.bed_image { + margin-left: auto; + margin-right: auto; + height: 50px; + width: 50px; + background: url("../images/icon_bed.png") no-repeat center; +} + +.bath_image { + margin-left: auto; + margin-right: auto; + height: 50px; + width: 50px; + background: url("../images/icon_bath.png") no-repeat center; +} + +.user > p { + margin-top: 20px; + margin-bottom: 0px; +} +.description > p { + margin-top: 7px; + margin-bottom: 0px; +}