Minor UI changes.

This update contains Minor UI changes representing bootstrap.

Base_Master/urls.py

@@ -11,6 +11,7 @@
     path('home', views.home, name="home"),
     path('register/', views.signup_view, name="sign_up"),
     path('profile/', views.profile, name="profile"),
+    path('ui-elements/', views.ui_elements, name="ui_elements"),
     path('update/', views.profile_update, name="update"),
     path('disable/<str:id>/', views.disable_user, name="disable_user"),
     path('theme', views.theme, name="theme"),

firstapp/views.py

@@ -114,4 +114,7 @@ def theme(request):
             user4 = Theme(user=request.user, color='light')
             user4.save()
 
-    return HttpResponseRedirect(request.META.get('HTTP_REFERER', '/'))
+    return HttpResponseRedirect(request.META.get('HTTP_REFERER', '/'))
+
+def ui_elements(request):
+    return render(request, 'UI/ui_elements.html')

templates/UI/ui_elements.html

@@ -0,0 +1,116 @@
+{% extends 'base.html' %}
+{% load static %}
+{% block pagetitle %}UI Elements{% endblock %}
+{% block content %}
+<div class="alert alert-primary d-flex align-items-center alert-dismissible fade show" role="alert">
+  <i class="bi bi-info-circle-fill"></i>
+  <div>
+    &nbsp;Click this link to enhance the website's UI using Bootstrap components and develop new UI elements. <a href="https://getbootstrap.com/" target="_blank">Bootstrap</a>
+  </div>
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+</div>
+<ul class="nav nav-tabs" id="myTab" role="tablist">
+  <li class="nav-item" role="presentation">
+    <button class="nav-link active" id="form-tab" data-bs-toggle="tab" data-bs-target="#form-tab-pane" type="button" role="tab" aria-controls="form-tab-pane" aria-selected="true">Forms</button>
+  </li>
+  <li class="nav-item" role="presentation">
+    <button class="nav-link" id="component-tab" data-bs-toggle="tab" data-bs-target="#components-tab-pane" type="button" role="tab" aria-controls="components-tab-pane" aria-selected="false">Components</button>
+  </li>
+  <li class="nav-item" role="presentation">
+    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#layout-tab-pane" type="button" role="tab" aria-controls="layout-tab-pane" aria-selected="false">Layout</button>
+  </li>
+</ul>
+<div class="tab-content" id="myTabContent">
+  <div class="tab-pane fade show active" id="form-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
+    <br>
+    <form>
+      <hr>
+      <h6><i>This is a Basic form with a check box.</i></h6>
+      <hr>
+      <div class="mb-3">
+        <label for="exampleInputEmail1" class="form-label">Email address</label>
+        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
+        <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
+      </div>
+      <div class="mb-3">
+        <label for="exampleInputPassword1" class="form-label">Password</label>
+        <input type="password" class="form-control" id="exampleInputPassword1">
+      </div>
+      <div class="mb-3 form-check">
+        <input type="checkbox" class="form-check-input" id="exampleCheck1">
+        <label class="form-check-label" for="exampleCheck1">Check me out</label>
+      </div>
+      <button type="submit" class="btn btn-primary">Submit</button>
+    </form>
+    <hr>
+    <h6><i>Forms with Validation</i></h6>
+    <hr>
+    <form class="row g-3 needs-validation" novalidate>
+      <div class="col-md-4">
+        <label for="validationCustom01" class="form-label">First name</label>
+        <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
+        <div class="valid-feedback">
+          Looks good!
+        </div>
+      </div>
+      <div class="col-md-4">
+        <label for="validationCustom02" class="form-label">Last name</label>
+        <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
+        <div class="valid-feedback">
+          Looks good!
+        </div>
+      </div>
+      <div class="col-md-4">
+        <label for="validationCustomUsername" class="form-label">Username</label>
+        <div class="input-group has-validation">
+          <span class="input-group-text" id="inputGroupPrepend">@</span>
+          <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
+          <div class="invalid-feedback">
+            Please choose a username.
+          </div>
+        </div>
+      </div>
+      <div class="col-md-6">
+        <label for="validationCustom03" class="form-label">City</label>
+        <input type="text" class="form-control" id="validationCustom03" required>
+        <div class="invalid-feedback">
+          Please provide a valid city.
+        </div>
+      </div>
+      <div class="col-md-3">
+        <label for="validationCustom04" class="form-label">State</label>
+        <select class="form-select" id="validationCustom04" required>
+          <option selected disabled value="">Choose...</option>
+          <option>...</option>
+        </select>
+        <div class="invalid-feedback">
+          Please select a valid state.
+        </div>
+      </div>
+      <div class="col-md-3">
+        <label for="validationCustom05" class="form-label">Zip</label>
+        <input type="text" class="form-control" id="validationCustom05" required>
+        <div class="invalid-feedback">
+          Please provide a valid zip.
+        </div>
+      </div>
+      <div class="col-12">
+        <div class="form-check">
+          <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
+          <label class="form-check-label" for="invalidCheck">
+            Agree to terms and conditions
+          </label>
+          <div class="invalid-feedback">
+            You must agree before submitting.
+          </div>
+        </div>
+      </div>
+      <div class="col-12">
+        <button class="btn btn-primary" type="submit">Submit form</button>
+      </div>
+    </form>
+  </div>
+  <div class="tab-pane fade" id="components-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">Demostration of tab list</div>
+  <div class="tab-pane fade" id="layout-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">Demostration of tab list</div>
+</div>
+{% endblock %}

templates/base.html

@@ -32,10 +32,7 @@
           </li>
           {% endif %}
           <li class="nav-item">
-            <a class="nav-link" href="#"><i class="bi bi-list-task"></i> Tasks</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#"><i class="bi bi-file-earmark-break"></i> Reports</a>
+            <a class="nav-link" href="{% url 'ui_elements' %}"><i class="bi bi-plugin"></i> UI Elements</a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="{% url 'logout' %}"><i class="bi bi-box-arrow-left"></i> Logout</a>