Add bootstrap frontend
This commit is contained in:
Ranga Gonnage
67
templates/base.html
Normal file
67
templates/base.html
Normal file
@@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
{% load static %}
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||
<meta name="description" content="" />
|
||||
<meta name="author" content="" />
|
||||
<title>{% block title %}{% endblock title %}</title>
|
||||
<link href="{% static 'css/styles.css' %}" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
|
||||
<link rel="icon" type="image/x-icon" href="{% static 'assets/img/logo.png' %}" />
|
||||
<script data-search-pseudo-elements defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.24.1/feather.min.js" crossorigin="anonymous"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="layoutDefault">
|
||||
<div id="layoutDefault_content">
|
||||
<main>
|
||||
<!-- Navbar-->
|
||||
<nav class="navbar navbar-expand-lg bg-white navbar-light">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="{% url 'index'%}"><img class="img-responsive" src="{% static 'assets/img/logo.png' %}" width="70px" height="70px" alt="Logo Orange County Lettings"/></a>
|
||||
<div>
|
||||
<a class="btn fw-500 ms-lg-4 btn-primary" href="{% url 'profiles_index' %}">
|
||||
Profiles
|
||||
</a>
|
||||
<a class="btn fw-500 ms-lg-4 btn-primary" href="{% url 'lettings_index' %}">
|
||||
Lettings
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<hr class="m-0" />
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
</div>
|
||||
<div id="layoutDefault_footer">
|
||||
<footer class="footer pb-5 mt-auto bg-dark footer-dark">
|
||||
<div class="container px-5">
|
||||
<hr class="my-5" />
|
||||
<div class="row gx-5 align-items-center">
|
||||
<div class="col-md-6 small">Copyright © Orange County Lettings 2023</div>
|
||||
<div class="col-md-6 text-md-end small">
|
||||
<a href="#!">Privacy Policy</a>
|
||||
·
|
||||
<a href="#!">Terms & Conditions</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
|
||||
<script src="{% static 'js/scripts.js' %}"></script>
|
||||
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
|
||||
<script>
|
||||
AOS.init({
|
||||
disable: 'mobile',
|
||||
duration: 600,
|
||||
once: true,
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,4 +1,26 @@
|
||||
<title>Holiday Homes</title>
|
||||
<h1>Welcome to Holiday Homes</h1>
|
||||
<div><a href="{% url 'profiles_index' %}">Profiles</a></div>
|
||||
<div><a href="{% url 'lettings_index' %}">Lettings</a></div>
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Holiday Homes{% endblock title %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
|
||||
<div class="container px-5 py-5 text-center">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<h1 class="page-header-ui-title mb-3 display-6">Welcome to Holiday Homes</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container px-5 py-5 text-center">
|
||||
<div class="justify-content-center">
|
||||
<a class="btn fw-500 ms-lg-4 btn-primary px-10" href="{% url 'profiles_index' %}">
|
||||
Profiles
|
||||
</a>
|
||||
<a class="btn fw-500 ms-lg-4 btn-primary px-10" href="{% url 'lettings_index' %}">
|
||||
Lettings
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
@@ -1,8 +1,41 @@
|
||||
<title>{{ title }}</title>
|
||||
<h1>{{ title }}</h1>
|
||||
<p>{{ address.number }} {{ address.street }}</p>
|
||||
<p>{{ address.city }}, {{ address.state }} {{ address.zip_code }}</p>
|
||||
<p>{{ address.country_iso_code }}</p>
|
||||
<div><a href="{% url 'lettings_index' %}">Back</a></div>
|
||||
<div><a href="{% url 'index' %}">Home</a></div>
|
||||
<div><a href="{% url 'profiles_index' %}">Profiles</a></div>
|
||||
{% extends "base.html" %}
|
||||
{% load static %}
|
||||
{% block title %}{{ title }}{% endblock title %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="container px-5 py-5 text-center">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<h1 class="page-header-ui-title mb-3 display-6">{{ title }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container px-5 py-5 text-center">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="icon-stack icon-stack-lg bg-primary text-white mb-3"><i data-feather="home"></i></div>
|
||||
<p>{{ address.number }} {{ address.street }}</p>
|
||||
<p>{{ address.city }}, {{ address.state }} {{ address.zip_code }}</p>
|
||||
<p>{{ address.country_iso_code }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container px-5 py-5 text-center">
|
||||
<div class="justify-content-center">
|
||||
<a class="btn fw-500 ms-lg-4 btn-primary px-10" href="{% url 'lettings_index' %}">
|
||||
<i class="ms-2" data-feather="arrow-right"></i>
|
||||
Back
|
||||
</a>
|
||||
<a class="btn fw-500 ms-lg-4 btn-primary px-10" href="{% url 'index' %}">
|
||||
Home
|
||||
</a>
|
||||
<a class="btn fw-500 ms-lg-4 btn-primary px-10" href="{% url 'profiles_index' %}">
|
||||
Profiles
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
@@ -1,17 +1,45 @@
|
||||
<title>Lettings</title>
|
||||
<h1>Lettings</h1>
|
||||
{% if lettings_list %}
|
||||
<ul>
|
||||
{% for letting in lettings_list %}
|
||||
<li>
|
||||
<a href="{% url 'letting' letting_id=letting.id %}">
|
||||
{{ letting.title }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<p>No lettings are available.</p>
|
||||
{% endif %}
|
||||
<div><a href="{% url 'index' %}">Home</a></div>
|
||||
<div><a href="{% url 'profiles_index' %}">Profiles</a></div>
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Lettings{% endblock title %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
|
||||
<div class="container px-5 py-5 text-center">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<h1 class="page-header-ui-title mb-3 display-6">Lettings</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container px-5">
|
||||
<div class="row gx-5 justify-content-center">
|
||||
<div class="col-lg-10">
|
||||
<hr class="mb-0" />
|
||||
{% if lettings_list %}
|
||||
<ul class="list-group list-group-flush list-group-careers">
|
||||
{% for letting in lettings_list %}
|
||||
<li class="list-group-item">
|
||||
<a href="{% url 'letting' letting_id=letting.id %}">{{ letting.title }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<p>No lettings are available.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container px-5 py-5 text-center">
|
||||
<div class="justify-content-center">
|
||||
<a class="btn fw-500 ms-lg-4 btn-primary px-10" href="{% url 'index' %}">
|
||||
Home
|
||||
</a>
|
||||
<a class="btn fw-500 ms-lg-4 btn-primary px-10" href="{% url 'profiles_index' %}">
|
||||
Profiles
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
@@ -1,9 +1,40 @@
|
||||
<title>{{ profile.user.username }}</title>
|
||||
<h1>{{ profile.user.username }}</h1>
|
||||
<p>First name: {{ profile.user.first_name }}</p>
|
||||
<p>Last name: {{ profile.user.last_name }}</p>
|
||||
<p>Email: {{ profile.user.email }}</p>
|
||||
<p>Favorite city: {{ profile.favorite_city }}</p>
|
||||
<div><a href="{% url 'profiles_index' %}">Back</a></div>
|
||||
<div><a href="{% url 'index' %}">Home</a></div>
|
||||
<div><a href="{% url 'lettings_index' %}">Lettings</a></div>
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ profile.user.username }}{% endblock title %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container px-5 py-5 text-center">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<h1 class="page-header-ui-title mb-3 display-6">{{ profile.user.username }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container px-5 py-5 text-center">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="icon-stack icon-stack-lg bg-primary text-white mb-3"><i data-feather="user"></i></div>
|
||||
<p><strong>First name :</strong> {{ profile.user.first_name }}</p>
|
||||
<p><strong>Last name :</strong> {{ profile.user.last_name }}</p>
|
||||
<p><strong>Email :</strong> {{ profile.user.email }}</p>
|
||||
<p><strong>Favorite city :</strong> {{ profile.favorite_city }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container px-5 py-5 text-center">
|
||||
<div class="justify-content-center">
|
||||
<a class="btn fw-500 ms-lg-4 btn-primary px-10" href="{% url 'profiles_index' %}">
|
||||
<i class="ms-2" data-feather="arrow-left"></i>
|
||||
Back
|
||||
</a>
|
||||
<a class="btn fw-500 ms-lg-4 btn-primary px-10" href="{% url 'index' %}">
|
||||
Home
|
||||
</a>
|
||||
<a class="btn fw-500 ms-lg-4 btn-primary px-10" href="{% url 'lettings_index' %}">
|
||||
Lettings
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
@@ -1,17 +1,43 @@
|
||||
<title>Profiles</title>
|
||||
<h1>Profiles</h1>
|
||||
{% if profiles_list %}
|
||||
<ul>
|
||||
{% for profile in profiles_list %}
|
||||
<li>
|
||||
<a href="{% url 'profile' username=profile.user.username %}">
|
||||
{{ profile.user.username }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<p>No profiles are available.</p>
|
||||
{% endif %}
|
||||
<div><a href="{% url 'index' %}">Home</a></div>
|
||||
<div><a href="{% url 'lettings_index' %}">Lettings</a></div>
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Profiles{% endblock title %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container px-5 py-5 text-center">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<h1 class="page-header-ui-title mb-3 display-6">Profiles</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container px-5">
|
||||
<div class="row gx-5 justify-content-center">
|
||||
<div class="col-lg-10">
|
||||
<hr class="mb-0" />
|
||||
{% if profiles_list %}
|
||||
<ul class="list-group list-group-flush list-group-careers">
|
||||
{% for profile in profiles_list %}
|
||||
<li class="list-group-item">
|
||||
<a href="{% url 'profile' username=profile.user.username %}">{{ profile.user.username }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<p>No profiles are available.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container px-5 py-5 text-center">
|
||||
<div class="justify-content-center">
|
||||
<a class="btn fw-500 ms-lg-4 btn-primary px-10" href="{% url 'index' %}">
|
||||
Home
|
||||
</a>
|
||||
<a class="btn fw-500 ms-lg-4 btn-primary px-10" href="{% url 'lettings_index' %}">
|
||||
Lettings
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user