pages updated and docs added

SMS/asgi.py

@@ -0,0 +1,13 @@
+import os
+
+import django
+from channels.http import AsgiHandler
+from channels.routing import ProtocolTypeRouter
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'SMS.settings')
+django.setup()
+
+application = ProtocolTypeRouter({
+  "http": AsgiHandler(),
+  # Just HTTP for now. (We can add other protocols later.)
+})

SMS/settings.py

@@ -46,6 +46,7 @@ INSTALLED_APPS = [
     # custom apps
     'app.apps.AppConfig',
     'accounts.apps.AccountsConfig',
+    'coursemanagement',
     'course.apps.CourseConfig',
     'result.apps.ResultConfig',
     'search.apps.SearchConfig',
@@ -54,6 +55,7 @@ INSTALLED_APPS = [
 
     'crispy_forms',
     'rest_framework',
+    'channels',
 ]
 
 MIDDLEWARE = [
@@ -91,18 +93,32 @@ TEMPLATES = [
 
 WSGI_APPLICATION = 'SMS.wsgi.application'
 
+ASGI_APPLICATION = "SMS.asgi.application"
+
 
 # Database
 # https://docs.djangoproject.com/en/2.2/ref/settings/#databases
 
+# DATABASES = {
+#     'default': {
+#         'ENGINE': 'django.db.backends.sqlite3',
+#         'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
+#     }
+# }
+
+# connect to postgresql database
+
 DATABASES = {
     'default': {
-        'ENGINE': 'django.db.backends.sqlite3',
+        'ENGINE': 'django.db.backends.postgresql_psycopg2',
-        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
+        'NAME': 'django_sms_data',
+        'USER': 'postgres',
+        'PASSWORD': 'testing321',
+        'HOST': 'localhost',
+        'POST': '',
     }
 }
 
-
 # Password validation
 # https://docs.djangoproject.com/en/2.2/ref/settings/#auth-password-validators
 

SMS/urls.py

@@ -7,7 +7,6 @@ from django.conf.urls.static import static
 
 
 urlpatterns = [
-    path('accounts/', include('django.contrib.auth.urls')),
     url(r'^', include('app.urls')),
     url(r'^accounts/', include('accounts.urls')),
     url(r'^programs/', include('course.urls')),

accounts/forms.py

@@ -66,6 +66,7 @@ class StudentAddForm(UserCreationForm):
             attrs={
                 'type': 'text',
                 'class': 'form-control',
+                'id': 'username_id'
             }
         ),
         label="Username",

accounts/migrations/0011_auto_20210823_0825.py

@@ -0,0 +1,29 @@
+# Generated by Django 3.1.3 on 2021-08-23 05:25
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('course', '0004_auto_20200822_2238'),
+        ('accounts', '0010_auto_20210401_1718'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='user',
+            name='is_dep_head',
+            field=models.BooleanField(default=False),
+        ),
+        migrations.CreateModel(
+            name='DepHead',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('department', models.ForeignKey(null=True, on_delete=django.db.models.deletion.CASCADE, to='course.program')),
+                ('user', models.OneToOneField(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
+            ],
+        ),
+    ]

accounts/models.py

@@ -56,6 +56,7 @@ class User(AbstractUser):
     is_student = models.BooleanField(default=False)
     is_lecturer = models.BooleanField(default=False)
     is_parent = models.BooleanField(default=False)
+    is_dep_head = models.BooleanField(default=False)
     phone = models.CharField(max_length=60, blank=True, null=True)
     address = models.CharField(max_length=60, blank=True, null=True)
     picture = models.ImageField(upload_to='profile_pictures/%y/%m/%d/', default='default.png', null=True)
@@ -159,3 +160,15 @@ class Parent(models.Model):
 
     def __str__(self):
         return self.user.username
+
+class DepHead(models.Model):
+    user = models.OneToOneField(User, on_delete=models.CASCADE)
+    department = models.ForeignKey(Program, on_delete=models.CASCADE, null=True)
+
+    def __str__(self):
+        return "{}".format(self.user)
+
+    # def save(self, *args, **kwarg):
+    #     pass
+    # dep
+    # 

accounts/templates/registration/login.html

@@ -2,20 +2,19 @@
 {% block title %}DjangoSMS - Login{% endblock title %}
 {% load crispy_forms_tags %}
 {% block content %}
+
 <div id="login">
   <div class="login-title blue-gradient"><i class="fas fa-lock"></i>Sign in</div>
 
   <form action="" method="POST" id="login-form">{% csrf_token %}
-      <!-- {{ form|crispy }} -->
     <div class="form-group px-3">
-        <label for="username"><i class="fas fa-address-card"></i>ID Number</label>
+        <label for="username_id"><i class="fas fa-address-card"></i>ID Number</label>
-        <!-- {{ form.username }} -->
+        <input type="text" name="username" id="username_id" class="form-control" required>
-        <input type="text" name="username" id="username" class="form-control" required>
+        <div id="message-wrapper"></div>
     </div>
     <div class="form-group px-3">
-        <label for="password"><i class="fas fa-key"></i>Password</label>
+        <label for="password_id"><i class="fas fa-key"></i>Password</label>
-        <!-- {{ form.password }} -->
+        <input type="password" name="password" id="password_id" class="form-control" required>
-        <input type="password" name="password" id="password" class="form-control" required>
     </div>
     {% if form.errors %}
           <span class="text-danger"><i class="fas fa-exclamation-circle"></i> Invalid ID & Password.</span><br>
@@ -26,61 +25,37 @@
   <br>
   <a href="{% url 'password_reset' %}" class="link">Forgot password ?</a>
 </div>
+{% endblock content %}
+
+{% block js %}
 
 <script>
-  const loginFormEl = document.getElementById('login-form');
+  $('#login-form').submit(function (e) {
-  const loginBtnEl = document.getElementById('login-btn');
+    // e.preventDefault();
-  // const method = 'POST';
+    $('#login-btn').addClass('disabled')
-
+    $('#login-btn').html(`<i class="fas fa-sign-in-alt"></i> Signining you in . . .`)
-  loginFormEl.addEventListener('submit', ()=>{
-    // console.log(loginBtnEl);
-    loginBtnEl.innerHTML = '<i class="fas fa-sign-in-alt"></i> Signining you in . . .';
-    loginBtnEl.classList.add("disabled");
   })
-  // function replaceHTML(){
-  //   // loginBtnEl.classList.add('disabled');
-  //   // loginBtnEl.style.cursor = 'not-allowed';
-  //   loginBtnEl.setAttribute("disabled")
-  //   console.log(loginBtnEl)
-  //   loginBtnEl.innerHTML = '<i class="fas fa-sign-in-alt"></i> Signining you in . . .';
-  // }
-  // loginBtnEl.addEventListener('click', ()=>{
-  //   loginBtnEl.classList.add('disabled');
-  //   loginBtnEl.style.cursor = 'not-allowed';
-  //   loginBtnEl.innerHTML = '<i class="fas fa-sign-in-alt"></i> Signining you in &point . . .';
-  // })
-    // console.log(FormData)
-  // const xhr = new XMLHttpRequest()
-  // console.log(xhr)
-  // console.log(xhr.response)
-  // console.log(xhr.response.username)
-  // console.log(xhr.response.password)
-  // if (xhr.method == 'POST'){
-  //   console.log(xhr.response)
-  //   console.log("Hey there")
-  //   function replaceHTML(){
-  //     loginBtnEl.classList.add('disabled');
-  //     loginBtnEl.style.cursor = 'not-allowed';
-  //     loginBtnEl.innerHTML = '<i class="fas fa-sign-in-alt"></i> Signining you in . . .';
-  //   }
-  // }
-  // xhr.onload = function replaceHTML(){
-  //   loginBtnEl.addEventListener('click', ()=>{
-  //     loginBtnEl.classList.add('disabled');
-  //     loginBtnEl.style.cursor = 'not-allowed';
-  //     loginBtnEl.innerHTML = '<i class="fas fa-sign-in-alt"></i> Signining you in . . .';
-  //   })
-  // }
-  // xhr.send()
-  // const method = 'GET'
-  // const url = "/accounts/login/"
-  // const responseType = "json"
 
-  // xhr.responseType = responseType
+  $("#username").on("input", function () {
-  // xhr.open(method, url)
+    username = $(this).val();
-  // xhr.onload = function() {
+
-  //   console.log(xhr.response)
+    $.ajax({
-  // }
+      url: "/accounts/ajax/validate-username/",
-  // xhr.send()
+      data: {
+        username: username
+      },
+      dataType: 'json',
+      success: function (data) {
+        if (data.is_taken) {
+          console.log(data.is_taken);
+          $('#message-wrapper').html(`<p class="my-2 text-danger"><span class="bg-error p-2"><b>${username}</b> already taken :( try another one </span></p>`)
+        }
+        else {
+          $('#message-wrapper').html(`<p class="my-2 text-success"><span class="bg-correct p-2"><b>${username}</b> is valid </span></p>`)
+        }
+      }
+
+    })
+  })
 </script>
-{% endblock content %}
+{% endblock %}

accounts/templates/registration/register.html

@@ -0,0 +1,111 @@
+{% extends 'registration/registration_base.html' %}
+{% block title %} Register - DjangoSMS {% endblock title %}
+{% load crispy_forms_tags %}
+
+{% block content %}
+
+<div class="container py-5">
+	
+  <div class="blue-gradient text-light p-3 mb-5">
+	  <h1 class="lead my-0">
+		<i class="fas fa-lock mr-2"></i>Create Your Account
+	  </h1>
+  </div>
+
+  <form action="" method="POST" id="login-form">
+	  {% csrf_token %}
+	  <div class="row">
+		  <div class="col-lg-6">
+			<h1 class="lead p-2 bg-light">Login Form</h1>
+			<div class="mb-3">
+				<label for="username_id" class="form-label">{{ form.username.label }}</label>
+				{{ form.username }}
+				<div id="message-wrapper"></div>
+			</div>
+			<div class="mb-3">
+				<label for="email_id" class="form-label">{{ form.email.label }}</label>
+				{{ form.email }}
+			</div>
+			<div class="mb-3">
+				<label for="password1_id" class="form-label">{{ form.password1.label }}</label>
+				{{ form.password1 }}
+			</div>
+			<div class="mb-3">
+				<label for="password2_id" class="form-label">{{ form.password2.label }}</label>
+				{{ form.password2 }}
+			</div>
+		  </div>
+		  <div class="col-lg-6">
+			<h1 class="lead p-2 bg-light">Personal Info</h1>
+			<div class="mb-3">
+				<label for="address_id" class="form-label">{{ form.address.label }}</label>
+				{{ form.address }}
+			</div>
+			<div class="mb-3">
+				<label for="phone_id" class="form-label">{{ form.phone.label }}</label>
+				{{ form.phone }}
+			</div>
+			<div class="mb-3">
+				<label for="first_name_id" class="form-label">{{ form.first_name.label }}</label>
+				{{ form.first_name }}
+			</div>
+			<div class="mb-3">
+				<label for="last_name_id" class="form-label">{{ form.last_name.label }}</label>
+				{{ form.last_name }}
+			</div>
+			<div class="mb-3">
+				<label for="level_id" class="form-label">{{ form.level.label }}</label>
+				{{ form.level }}
+			</div>
+			<div class="mb-3">
+				<label for="department_id" class="form-label">{{ form.department.label }}</label>
+				{{ form.department }}
+			</div>
+		  </div>
+	  </div>
+
+    {% if form.errors %}
+          <p class="text-danger my-2"><i class="fas fa-exclamation-circle"></i> Invalid ID & Password.</p><br>
+    {% endif %}
+
+    <button type="submit" class="btn btn-primary" id="login-btn"><i class="fas fa-sign-in-alt"></i><small> SIGN UP</small></button>
+  </form>
+  <br>
+  <span> Already Registered ? </span><a href="{% url 'login' %}" class="link">Login</a>
+</div>
+{% endblock content %}
+
+{% block js %}
+
+<script>
+  const loginFormEl = document.getElementById('login-form');
+  const loginBtnEl = document.getElementById('login-btn');
+
+  loginFormEl.addEventListener('submit', () => {
+    loginBtnEl.innerHTML = '<i class="fas fa-sign-in-alt"></i> Signining you in . . .';
+    loginBtnEl.classList.add("disabled");
+  })
+
+  $("#username_id").on("input", function () {
+    username = $(this).val();
+
+    $.ajax({
+      url: "/accounts/ajax/validate-username/",
+      data: {
+        username: username
+      },
+      dataType: 'json',
+      success: function (data) {
+        if (data.is_taken) {
+          console.log(data.is_taken);
+          $('#message-wrapper').html(`<p class="my-2 text-danger"><span class="bg-error p-2"><b>${username}</b> already taken :( try another one </span></p>`)
+        }
+        else {
+          $('#message-wrapper').html(`<p class="my-2 text-success"><span class="bg-correct p-2"><b>${username}</b> is valid </span></p>`)
+        }
+      }
+
+    })
+  })
+</script>
+{% endblock %}

accounts/templates/registration/registration_base.html

@@ -20,5 +20,10 @@
       {% block content %}
       {% endblock content %}
     </div>
+
+    <script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
+
+    {% block js %}
+    {% endblock %}
 </body>
 </html>

accounts/templates/setting/password_change.html

@@ -57,4 +57,14 @@
     </div>
 </div>
 
+
+<p>
+    Signing up signifies that you have read and agree to the <br>
+    <a href="#term-of-service" data-bs-toggle="modal" data-bs-target="#term-of-service">Terms of Service</a> 
+    and our <a href="#privacy-policy" data-bs-toggle="modal" data-bs-target="#privacy-policy">Privacy Policy</a>.
+  </p>
+  {% include 'term.html' %}
+  {% include 'privacy.html' %}
+  
+
 {% endblock content %}

accounts/urls.py

@@ -1,5 +1,5 @@
 from django.conf.urls import url
-from django.urls import path
+from django.urls import path, include
 from django.contrib.auth.views import (
     PasswordResetView, PasswordResetDoneView, PasswordResetConfirmView, 
     PasswordResetCompleteView, LoginView, LogoutView
@@ -10,12 +10,14 @@ from .views import (
         LecturerListView, StudentListView, 
         staff_add_view, edit_staff, 
         delete_staff, student_add_view, 
-        edit_student, delete_student, ParentAdd
+        edit_student, delete_student, ParentAdd, validate_username, register
     )
 from .forms import EmailValidationOnForgotPassword
 
 
 urlpatterns = [
+    path('', include('django.contrib.auth.urls')),
+
     url(r'^admin_panel/$', admin_panel, name='admin_panel'),
 
     url(r'^profile/$', profile, name='profile'),
@@ -35,6 +37,10 @@ urlpatterns = [
 
     url(r'^parents/add/$', ParentAdd.as_view(), name='add_parent'),
 
+    url(r'^ajax/validate-username/$', validate_username, name='validate_username'),
+
+    url(r'^register/$', register, name='register'),
+
     # url(r'^add-student/$', StudentAddView.as_view(), name='add_student'),
 
     # url(r'^programs/course/delete/(?P<pk>\d+)/$', course_delete, name='delete_course'),

accounts/views.py

@@ -1,3 +1,4 @@
+from django.http.response import HttpResponse, JsonResponse
 from django.shortcuts import render, redirect, get_object_or_404
 from django.http import Http404
 from django.contrib import messages
@@ -17,6 +18,27 @@ from .forms import StaffAddForm, StudentAddForm, ProfileUpdateForm, ParentAddFor
 from .models import User, Student, Parent
 
 
+def validate_username(request):
+    username = request.GET.get("username", None)
+    data = {
+        "is_taken": User.objects.filter(username__iexact = username).exists()
+    }
+    return JsonResponse (data)
+
+
+def register(request):
+    if request.method == 'POST':
+        form = StudentAddForm(request.POST)
+        if form.is_valid():
+            form.save()
+            messages.success(request, f'Account created successfuly.')
+        else:
+            messages.error(request, f'Somthing is not correct, please fill all fields correctly.')
+    else:
+        form = StudentAddForm(request.POST)
+    return render(request, "registration/register.html", {'form': form})
+
+
 @login_required
 def profile(request):
     """ Show profile of any user that fire out the request """

app/templates/app/dashboard.html

@@ -0,0 +1,727 @@
+{% extends 'base.html' %}
+{% block title %} Dashboard | Ezod System {% endblock title %}
+{% load static %}
+
+{% block header %}
+{% endblock %}
+
+{% block content %}
+
+<div id="input-nav" class="p-2"><a href="/"> Home </a> Dashboard</div>
+
+{% if messages %}
+{% for message in messages %}
+{% if message.tags == 'error' %}
+<div class="alert alert-danger">
+	<i class="fas fa-exclamation-circle"></i>{{ message }}
+</div>
+{% else %}
+<div class="alert alert-success">
+	<i class="fas fa-check-circle"></i>{{ message }}
+</div>
+{% endif %}
+{% endfor %}
+{% endif %}
+
+<style>
+	.chart-wrap {
+		position: relative;
+		padding: 1rem;
+		transition: .5s;
+		background-color: #fff;
+		border-radius: 10px;
+	}
+
+	.fa-expand-alt {
+		display: none;
+		position: absolute;
+		top: .5rem;
+		right: .5rem;
+		padding: .5rem;
+		cursor: pointer;
+		transition: .3s;
+	}
+
+	.fa-expand-alt:hover {
+		background-color: #f1f1f1;
+	}
+
+	.chart-wrap:hover {
+		box-shadow: 0 0 0 1px inset #666;
+	}
+
+	.chart-wrap:hover .fa-expand-alt {
+		display: block;
+	}
+
+	.full-screen {
+		transform: translateY(100%);
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		z-index: 999;
+		max-width: 100%;
+		max-height: 100%;
+		-ms-flex: 0 0 100%;
+		flex: 0 0 100%;
+		background-color: #fff;
+		/* For Internet Explorer */
+		box-shadow: 0 0 0 10000px rgba(0, 0, 0, 0.5) !important;
+		/* For other browsers */
+		box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5) !important;
+		transform-origin: bottom left;
+		animation: popupAnim forwards alternate .5s ease-in-out;
+		overflow: auto;
+	}
+
+	.full-screen .fa-expand-alt {
+		display: block;
+	}
+
+	@keyframes popupAnim {
+		from {
+			transform: translateY(100%);
+		}
+
+		to {
+			transform: translateY(0);
+		}
+	}
+
+	.users-count .card-count {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		background-color: #fff;
+	}
+
+	.users-count .card-count h2 {
+		font-weight: 1000;
+	}
+
+	.users-count .card-count h3 {
+		flex: 0 0 40%;
+		border-right: 1px solid rgb(230, 230, 230);
+	}
+
+	.users-count .card-count h3 i {
+		display: inline-flex;
+		width: 60px;
+		height: 60px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 50%;
+	}
+
+	.bg-light-aqua {
+		background-color: rgba(86, 224, 224, 0.5);
+		box-shadow: 0 0 0 10px rgba(86, 224, 224, 0.1);
+		color: #fff;
+	}
+
+	.bg-light-orange {
+		background-color: rgba(253, 174, 28, 0.5);
+		box-shadow: 0 0 0 10px rgba(253, 174, 28, 0.1);
+		color: #fff;
+	}
+
+	.bg-light-purple {
+		background-color: rgba(203, 31, 255, 0.5);
+		box-shadow: 0 0 0 10px rgba(203, 31, 255, 0.1);
+		color: #fff;
+	}
+
+	.bg-light-red {
+		background-color: rgba(255, 19, 157, 0.5);
+		box-shadow: 0 0 0 10px rgba(255, 19, 157, 0.1);
+		color: #fff;
+	}
+
+	.activities ul {
+		padding-left: .5rem;
+	}
+
+	.activities ul li {
+		list-style-type: disc;
+	}
+</style>
+
+<div class="page-header">
+	<h1 class="title-1 mb-5">Dashboard</h1>
+	<div class="btn-group">
+		<button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
+			aria-expanded="false">
+			<i class="fas fa-cog"></i>
+		</button>
+		<div class="dropdown-menu dropdown-menu-right">
+			<h6 class="dropdown-header">Dashboard settings</h6>
+			<button class="dropdown-item" type="button">Display row</button>
+			<button class="dropdown-item" type="button">Display column</button>
+			<button class="dropdown-item" type="button">Display table</button>
+			<hr>
+			<button class="dropdown-item" type="button">Manage dashboard</button>
+		</div>
+	</div>
+</div>
+
+<div class="row users-count px-3">
+	<div class="col-md-3 mb-3 px-2">
+		<div class="card-count p-3">
+			<h3><i class="fas fa-users bg-light-aqua"></i></h3>
+			<div class="text-right">
+				Students
+				<h2>12,040</h2>
+			</div>
+		</div>
+	</div>
+	<div class="col-md-3 mb-3 px-2">
+		<div class="card-count p-3">
+			<h3><i class="fas fa-users bg-light-orange"></i></h3>
+			<div class="text-right">
+				Lecturers
+				<h2>1,350</h2>
+			</div>
+		</div>
+	</div>
+	<div class="col-md-3 mb-3 px-2">
+		<div class="card-count p-3">
+			<h3><i class="fas fa-users bg-light-purple"></i></h3>
+			<div class="text-right">
+				Lab Assistance
+				<h2>500</h2>
+			</div>
+		</div>
+	</div>
+	<div class="col-md-3 mb-3 px-2">
+		<div class="card-count p-3">
+			<h3><i class="fas fa-users bg-light-red"></i></h3>
+			<div class="text-right">
+				Administrators
+				<h2>125</h2>
+			</div>
+		</div>
+	</div>
+	<div class="col-md-3 mb-3 px-2">
+		<div class="card-count p-3">
+			<h3><i class="fas fa-users bg-light-red"></i></h3>
+			<div class="text-right">
+				Librarian
+				<h2>300</h2>
+			</div>
+		</div>
+	</div>
+	<div class="col-md-3 mb-3 px-2">
+		<div class="card-count p-3">
+			<h3><i class="fas fa-users bg-light-purple"></i></h3>
+			<div class="text-right">
+				Supervisors
+				<h2>660</h2>
+			</div>
+		</div>
+	</div>
+	<div class="col-md-3 mb-3 px-2">
+		<div class="card-count p-3">
+			<h3><i class="fas fa-users bg-light-orange"></i></h3>
+			<div class="text-right pl-2">
+				Office Assistance
+				<h2>1,700</h2>
+			</div>
+		</div>
+	</div>
+	<div class="col-md-3 mb-3 px-2">
+		<div class="card-count p-3">
+			<h3><i class="fas fa-users bg-light-aqua"></i></h3>
+			<div class="text-right">
+				Others
+				<h2>1,250</h2>
+			</div>
+		</div>
+	</div>
+</div>
+
+<div class="row px-2">
+	<div class="col-md-6 p-2">
+		<div class="chart-wrap">
+			<i class="fas fa-expand-alt"></i>
+			<canvas id="myChart"></canvas>
+		</div>
+	</div>
+	<div class="col-md-6 p-2">
+		<div class="chart-wrap">
+			<i class="fas fa-expand-alt"></i>
+			<canvas id="myChart2"></canvas>
+		</div>
+	</div>
+	<div class="col-md-6 p-2">
+		<div class="chart-wrap">
+			<i class="fas fa-expand-alt"></i>
+			<canvas id="myChart3"></canvas>
+		</div>
+	</div>
+	<div class="col-md-6 px-3">
+		<div class="row">
+			<div class="col-md-6 p-2">
+				<div class="card p-3 activities">
+					<h5>Your recent activities</h5>
+					<ul class="small">
+						<li>Created a survey of something</li>
+						<li>Added new admin user</li>
+						<li><span class="text-danger">Deleted</span> 1 video from CSE course</li>
+						<li>New documentation <span class="text-success">attached</span> for Arch</li>
+						<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
+						<li>Veniam magnam reiciendis modi explicabo sed aliquid natus</li>
+						<li>molestias corrupti suscipit similique ex adipisci praesentium</li>
+						<li>sint dolore, quo quibusdam ea, neque cupiditate.</li>
+					</ul>
+				</div>
+			</div>
+			<div class="col-md-6 p-2">
+				<div class="card p-3 activities">
+					<h5>Overall recent activities</h5>
+					<ul class="small">
+						<li>Created a survey of something</li>
+						<li>Added new admin user</li>
+						<li><span class="text-danger">Deleted</span> 1 video from CSE course</li>
+						<li>New documentation <span class="text-success">attached</span> for Arch</li>
+						<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
+						<li>Veniam magnam reiciendis modi explicabo sed aliquid natus</li>
+						<li>molestias corrupti suscipit similique ex adipisci praesentium</li>
+						<li>sint dolore, quo quibusdam ea, neque cupiditate.</li>
+					</ul>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col-md-4 p-2">
+		<div class="chart-wrap">
+			<i class="fas fa-expand-alt"></i>
+			<canvas id="attendance"></canvas>
+		</div>
+	</div>
+	<div class="col-md-4 p-2">
+		<div class="chart-wrap">
+			<i class="fas fa-expand-alt"></i>
+			<canvas id="quiz_status"></canvas>
+		</div>
+	</div>
+	<div class="col-md-4 p-2">
+		<div class="chart-wrap">
+			<i class="fas fa-expand-alt"></i>
+			<canvas id="other1"></canvas>
+		</div>
+	</div>
+	<div class="col-md-6">
+		<h5>Event Calender</h5>
+	</div>
+	<div class="col-md-6 p-2">
+		<h5>School Demographics</h5>
+		<div class="row">
+			<div class="col-md-6">
+				<i class="fas fa-expand-alt"></i>
+				<canvas id="gender"></canvas>
+			</div>
+			<div class="col-md-6">
+				<i class="fas fa-expand-alt"></i>
+				<canvas id="ethnicity"></canvas>
+			</div>
+			<div class="col-md-6">
+				<i class="fas fa-expand-alt"></i>
+				<canvas id="language"></canvas>
+			</div>
+		</div>
+	</div>
+	<div class="col-md-6 p-2">
+		<div class="chart-wrap">
+			<i class="fas fa-expand-alt"></i>
+			<canvas id="myChart7"></canvas>
+		</div>
+	</div>
+	<div class="col-md-6 p-2">
+		<div class="chart-wrap">
+			<i class="fas fa-expand-alt"></i>
+			<canvas id="myChart8"></canvas>
+		</div>
+	</div>
+	<!-- <div class="col-md-6 p-2">
+		<div class="chart-wrap">
+		<i class="fas fa-expand-alt"></i>
+		<canvas id="myChart9"></canvas></div>
+	</div> -->
+	<div class="col-md-6 p-2">
+		<div class="chart-wrap">
+			<i class="fas fa-expand-alt"></i>
+			<canvas id="myChart9"></canvas>
+		</div>
+	</div>
+</div>
+
+{% endblock content %}
+
+{% block js %}
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
+<script>
+	$(document).ready(function () {
+
+		// Setup
+		const labels = [
+			'January',
+			'February',
+			'March',
+			'April',
+			'May',
+			'June',
+		];
+		const data = {
+			labels: labels,
+			datasets: [{
+				label: 'Students',
+				backgroundColor: 'rgba(86, 224, 224, 0.5)',
+				borderColor: 'rgb(86, 224, 224)',
+				hoverBorderWidth: 3,
+				data: [0, 10, 5, 2, 20, 30, 45]
+			}, {
+				label: 'Teachers',
+				backgroundColor: 'rgba(253, 174, 28, 0.5)',
+				borderColor: 'rgb(253, 174, 28)',
+				hoverBorderWidth: 3,
+				data: [20, 0, 15, 4, 6, 4, 60],
+			}, {
+				label: 'Admins',
+				backgroundColor: 'rgba(203, 31, 255, 0.5)',
+				borderColor: 'rgb(203, 31, 255)',
+				hoverBorderWidth: 3,
+				data: [85, 30, 34, 20, 20, 55, 45],
+			}, {
+				label: 'Stuffs',
+				backgroundColor: 'rgba(255, 19, 157, 0.5)',
+				borderColor: 'rgb(255, 19, 157)',
+				hoverBorderWidth: 3,
+				data: [45, 75, 70, 80, 20, 30, 90],
+			}]
+		};
+
+		var myChart = document.getElementById('myChart');
+		var chart = new Chart(myChart, {
+			type: 'line',
+			data: data,
+			options: {
+				plugins: {
+					title: {
+						display: true,
+						text: 'Website Traffic',
+						padding: 15
+					}
+				}
+			}
+		});
+
+		// Setup
+		const labelsEnrollment = [
+			'2016',
+			'2017',
+			'2018',
+			'2019',
+			'2020',
+			'2021',
+		];
+		const dataEnrollment = {
+			labels: labelsEnrollment,
+			datasets: [{
+				label: 'Comp.S',
+				backgroundColor: 'rgba(86, 224, 224, 0.5)',
+				borderColor: 'rgb(86, 224, 224)',
+				hoverBorderWidth: 3,
+				data: [0, 10, 5, 2, 20, 30, 45]
+			}, {
+				label: 'Architecture',
+				backgroundColor: 'rgba(253, 174, 28, 0.5)',
+				borderColor: 'rgb(253, 174, 28)',
+				hoverBorderWidth: 3,
+				data: [20, 0, 15, 4, 6, 4, 60],
+			}, {
+				label: 'Civil Eng',
+				backgroundColor: 'rgba(203, 31, 255, 0.5)',
+				borderColor: 'rgb(203, 31, 255)',
+				hoverBorderWidth: 3,
+				data: [85, 30, 34, 20, 20, 55, 45],
+			}, {
+				label: 'Accounting',
+				backgroundColor: 'rgba(255, 19, 157, 0.5)',
+				borderColor: 'rgb(255, 19, 157)',
+				hoverBorderWidth: 3,
+				data: [45, 75, 70, 80, 20, 30, 90],
+			}, {
+				label: 'Business Man',
+				backgroundColor: 'rgba(0, 0, 0, 0.5)',
+				borderColor: 'rgb(0, 0, 0)',
+				hoverBorderWidth: 3,
+				data: [15, 75, 45, 90, 60, 30, 90],
+			}]
+		};
+
+		var myChart2 = document.getElementById('myChart2');
+		var chart = new Chart(myChart2, {
+			type: 'bar',
+			data: dataEnrollment,
+			options: {
+				plugins: {
+					title: {
+						display: true,
+						text: 'Enrollment per course',
+						padding: 20
+					}
+				}
+			}
+		});
+		var myChart3 = document.getElementById('myChart3');
+		var chart = new Chart(myChart3, {
+			type: 'radar',
+			data: data,
+			options: {
+				plugins: {
+					title: {
+						display: true,
+						text: 'Custom Chart Title',
+						padding: 20
+					}
+				}
+			}
+		});
+		var attendance = document.getElementById('attendance');
+		var chart = new Chart(attendance, {
+			type: 'doughnut',
+			data: data,
+			options: {
+				plugins: {
+					title: {
+						display: true,
+						text: 'Overall Attendance',
+						padding: 20
+					}
+				}
+			}
+		});
+		var quiz_status = document.getElementById('quiz_status');
+		var chart = new Chart(quiz_status, {
+			type: 'pie',
+			data: data,
+			options: {
+				plugins: {
+					title: {
+						display: true,
+						text: 'Students Online Quiz Status',
+						padding: 20
+					}
+				}
+			}
+		});
+		var other1 = document.getElementById('other1');
+		var chart = new Chart(other1, {
+			type: 'pie',
+			data: data,
+			options: {
+				plugins: {
+					title: {
+						display: true,
+						text: 'Students Online Quiz Status',
+						padding: 20
+					}
+				}
+			}
+		});
+
+		const dataGender = {
+			labels: ['Man', 'Women'],
+			datasets: [{
+				label: 'Man',
+				backgroundColor: 'rgba(86, 224, 224, 0.5)',
+				borderColor: 'rgb(86, 224, 224)',
+				hoverBorderWidth: 3,
+				data: [56]
+			}, {
+				label: 'Women',
+				backgroundColor: 'rgba(253, 174, 28, 0.5)',
+				borderColor: 'rgb(253, 174, 28)',
+				hoverBorderWidth: 3,
+				data: [44],
+			}]
+		};
+
+		var gender = document.getElementById('gender');
+		var chart = new Chart(gender, {
+			type: 'polarArea',
+			data: dataGender,
+			options: {
+				plugins: {
+					title: {
+						display: true,
+						text: 'Students Gender',
+						padding: 20
+					}
+				}
+			}
+		});
+		var ethnicity = document.getElementById('ethnicity');
+		var chart = new Chart(ethnicity, {
+			type: 'polarArea',
+			data: dataGender,
+			options: {
+				plugins: {
+					title: {
+						display: true,
+						text: 'Race/Ethinicity',
+						padding: 20
+					}
+				}
+			}
+		});
+		var language = document.getElementById('language');
+		var chart = new Chart(language, {
+			type: 'polarArea',
+			data: dataGender,
+			options: {
+				plugins: {
+					title: {
+						display: true,
+						text: 'Home Language',
+						padding: 20
+					}
+				}
+			}
+		});
+
+		const dataBubble = {
+			datasets: [{
+				label: 'First Dataset',
+				data: [{
+					x: 20,
+					y: 30,
+					r: 15
+				}, {
+					x: 40,
+					y: 10,
+					r: 10
+				}],
+				backgroundColor: 'rgb(255, 99, 132)'
+			}]
+		};
+		var myChart7 = document.getElementById('myChart7');
+		var chart = new Chart(myChart7, {
+			type: 'bubble',
+			data: dataBubble,
+			options: {
+				plugins: {
+					title: {
+						display: true,
+						text: 'Custom Chart Title',
+						padding: 20
+					}
+				}
+			}
+		});
+
+		const dataScatter = {
+			datasets: [{
+				label: 'Scatter Dataset',
+				data: [{
+					x: -10,
+					y: 0
+				}, {
+					x: 0,
+					y: 10
+				}, {
+					x: 10,
+					y: 5
+				}, {
+					x: 0.5,
+					y: 5.5
+				}],
+				backgroundColor: 'rgb(255, 99, 132)'
+			}],
+		};
+
+		var myChart8 = document.getElementById('myChart8');
+		var chart = new Chart(myChart8, {
+			type: 'scatter',
+			data: dataScatter,
+			options: {
+				plugins: {
+					title: {
+						display: true,
+						text: 'Custom Chart Title',
+						padding: 20
+					}
+				},
+				scales: {
+					x: {
+						type: 'linear',
+						position: 'bottom'
+					}
+				}
+			}
+		});
+
+		const dataMixed = {
+			labels: [
+				'January',
+				'February',
+				'March',
+				'April'
+			],
+			datasets: [{
+				type: 'bar',
+				label: 'Bar Dataset',
+				data: [10, 20, 30, 40],
+				borderColor: 'rgb(255, 99, 132)',
+				backgroundColor: 'rgba(255, 99, 132, 0.2)'
+			}, {
+				type: 'line',
+				label: 'Line Dataset',
+				data: [50, 50, 50, 50],
+				fill: false,
+				borderColor: 'rgb(54, 162, 235)'
+			}]
+		};
+
+		var myChart9 = document.getElementById('myChart9');
+		var chart = new Chart(myChart9, {
+			type: 'mixed',
+			data: dataMixed,
+			options: {
+				plugins: {
+					title: {
+						display: true,
+						text: 'Custom Chart Title',
+						padding: 20
+					}
+				},
+				scales: {
+					y: {
+						beginAtZero: true
+					}
+				}
+			}
+		});
+	})
+
+</script>
+
+<script>
+	$('.fa-expand-alt').click(function () {
+		if ($(this).parent('.chart-wrap').parent('.col-md-6').hasClass('full-screen')) {
+			$('.col-md-6.full-screen').removeClass('full-screen');
+		}
+		else {
+			$('.col-md-6.full-screen')?.removeClass('full-screen');
+			$(this).parent('.chart-wrap').parent('.col-md-6').addClass('full-screen');
+		}
+	})
+</script>
+
+{% endblock %}

app/templates/app/index.html

@@ -7,84 +7,102 @@
 <div id="input-nav" class="p-2">Home</div>
 
 {% if request.user.is_superuser %}
-<a class="add-button" href="{% url 'add_item' %}"><i class="fas fa-plus"></i>Add New Post</a>
+<div class="manage-wrap">
+    <a class="btn btn-primary" href="{% url 'add_item' %}"><i class="fas fa-plus"></i>Add New Post</a>
+</div>
 {% endif %}
 
 {% if messages %}
-    {% for message in messages %}
+{% for message in messages %}
-        {% if message.tags == 'error' %}
+{% if message.tags == 'error' %}
-            <div class="alert alert-danger">
+<div class="alert alert-danger">
-                <i class="fas fa-exclamation-circle"></i>{{ message }}
+    <i class="fas fa-exclamation-circle"></i>{{ message }}
-            </div>
+</div>
-        {% else %}
+{% else %}
-            <div class="alert alert-success">
+<div class="alert alert-success">
-                <i class="fas fa-check-circle"></i>{{ message }}
+    <i class="fas fa-check-circle"></i>{{ message }}
-            </div>
+</div>
-        {% endif %}
+{% endif %}
-    {% endfor %}
+{% endfor %}
-{% endif %}<br>
+{% endif %}
+
+<style>
+    .color-indicator {
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        border-radius: 2px;
+    }
+
+    .bg-purple {
+        background-color: #6f42c1;
+    }
+</style>
 
 <div class="title-1">News & Events</div>
-<div class="title-line mb-4"></div>
 
+<ul class="col-md-2 ml-auto d-flex">
+    <li class="mr-3">
+        <span class="color-indicator bg-primary"></span> News
+    </li>
+    <li>
+        <span class="color-indicator bg-purple"></span> Events
+    </li>
+</ul>
+<style>
+    .card-header-ne {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .card-header-ne .title {
+        vertical-align: middle;
+    }
+</style>
 {% if items %}
 <div class="row">
     {% for item in items %}
     <div class="col-md-4 mb-4 mx-auto">
-        <div class="card bs-md">
+        <div class="bg-white">
-        <div class="{% if item.posted_as == 'News' %}news{% else %}events{% endif %} pl-5 pr-2">{{ item.title|title }}</div>
+            <div class="card-header-ne {% if item.posted_as == 'News' %}news{% else %}events{% endif %} p-2">
-        <div class="news-events-wrapper">
+                <span class="p-0">
-            <span class="info-text">{{ item.posted_as }}</span>
+                    {{ item.title|title }}
-        </div>
+                </span>
-        {% if request.user.is_superuser %}
+                {% if request.user.is_superuser %}
-        <!-- <div class="update-delete-wrapper">
+                <div class="dropdown">
-            <div class="drop-down">
+                    <button class="btn btn-sm" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
-                <a href="#"><i class="fas fa-ellipsis-v"></i></a>
+                        aria-expanded="false">
-                <div class="content">
+                        <i class="fas fa-ellipsis-v text-white"></i>
-                    <div class="content-a">
+                    </button>
-                        <a href="{% url 'edit_post' pk=item.id %}" class="update" title="Edit"><i class="fas fa-pencil-alt"></i> Edit</a>
+                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
-                        <a href="{% url 'delete_post' pk=item.id %}" class="delete" title="Delete"><i class="fas fa-trash-alt"></i> Delete</a>
+                        <a class="dropdown-item" href="{% url 'edit_post' pk=item.id %}"><i
+                                class="fas fa-pencil-alt"></i> Edit</a>
+                        <a class="dropdown-item" href="{% url 'delete_post' pk=item.id %}"><i
+                                class="fas fa-trash-alt"></i> Delete</a>
                     </div>
                 </div>
+                {% endif %}
             </div>
-        </div> -->
+
-        <div class="update-delete-wrapper">
+            <div class="p-2">{{ item.summary }}</div>
-          <div class="dropdown">
+
-            <button class="btn btn-sm " type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <div class="date-wrapper">
-              <i class="fas fa-ellipsis-v text-white"></i>
+                <i class="fa fa-calendar mr-2"></i>
-            </button>
+                {{ item.updated_date|timesince }} ago
-            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
-              <a class="dropdown-item" href="{% url 'edit_post' pk=item.id %}" class="update"><i class="fas fa-pencil-alt"></i> Edit</a>
-              <a class="dropdown-item" href="{% url 'delete_post' pk=item.id %}" class="delete"><i class="fas fa-trash-alt"></i> Delete</a>
-              <!-- <a class="dropdown-item" href="#">Something else here</a> -->
             </div>
-          </div>
+
-        </div>
-        <!-- <div class="update-delete-wrapper">
-            <div class="navbar">
-                <li class="dropdown">
-                    <a class="dropdown-toggle-split" href="#" id="dropdown01" data-toggle="dropdown"><i class="fas fa-ellipsis-v text-white"></i></a>
-                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown01">
-                        <a href="{% url 'edit_post' pk=item.id %}" class="update"><i class="fas fa-pencil-alt"></i> Edit</a>
-                        <a href="{% url 'delete_post' pk=item.id %}" class="delete"><i class="fas fa-trash-alt"></i> Delete</a>
-                    </div>
-                </li>
-            </div>
-        </div> -->
-        {% endif %}
-        <div class="card-subtitle m-2">{{ item.summary }}</div><br><br><br>
-        <div class="date-wrapper"><i class="fa fa-calendar mr-2"></i>{{ item.updated_date|timesince }} ago</div>
-        {% if forloop.counter|divisibleby:3 %}</div></div></div><div class="row">
-        {% else %}
         </div>
     </div>
-        {% endif %}
     {% endfor %}
 </div>
+
 {% else %}
-<div class="col-md-12">
+<p>
-    <div class="form-title"><i class="far fa-frown fa-2x"></i>No News & Events yet.</div>
+    <i class="far fa-frown fa-2x"></i>So empty.
-</div>
+</p>
+
 {% endif %}
 
-{% endblock content %}
+{% endblock content %}

app/templates/app/semester_list.html

@@ -13,17 +13,17 @@
 <div class="title-line"></div>
 
 {% if messages %}
-    {% for message in messages %}
+{% for message in messages %}
-        {% if message.tags == 'error' %}
+{% if message.tags == 'error' %}
-            <div class="alert alert-danger">
+<div class="alert alert-danger">
-                <i class="fas fa-exclamation-circle"></i>{{ message }}
+    <i class="fas fa-exclamation-circle"></i>{{ message }}
-            </div>
+</div>
-        {% else %}
+{% else %}
-            <div class="alert alert-success">
+<div class="alert alert-success">
-                <i class="fas fa-check-circle"></i>{{ message }}
+    <i class="fas fa-check-circle"></i>{{ message }}
-            </div>
+</div>
-        {% endif %}
+{% endif %}
-    {% endfor %}
+{% endfor %}
 {% endif %}
 
 <div class="table-responsive table-shadow p-0 mt-5">
@@ -45,47 +45,52 @@
             <tr>
                 <td> {{ forloop.counter }}.</td>
                 <td>{{ semester.semester }}</td>
-                <th>{% if semester.is_current_semester == False %}<i class="fas fa-times-circle fa-1-5x danger"></i>
+                <th>
-                    {% else %}<i class="fas fa-check-circle fa-1-5x"></i>
+                    {% if semester.is_current_semester == False %}
-                    <i class="icon-times-circle">
+                    <i class="fas fa-times-circle fa-1-5x danger"></i>
-                    
+                    {% else %}
-                    </i>{% endif %}
+                    <i class="fas fa-check-circle fa-1-5x"></i>
+                    <i class="icon-times-circle"></i>
+                    {% endif %}
                 </th>
                 <td>{{ semester.session }}</td>
                 <td>{{ semester.next_semester_begins }}</td>
 
                 {% if request.user.is_superuser %}
-                <td> <div class="update-delete">
+                <td>
-                    <a href="{% url 'edit_semester' pk=semester.pk %}" class="update" title="Edit"><i class="fas fa-pencil-alt"></i></a>
+                    <div class="update-delete">
-                    <a href="{% url 'delete_semester' pk=semester.pk %}" class="delete" title="Delete"><i class="fas fa-trash-alt"></i></a>
+                        <a href="{% url 'edit_semester' pk=semester.pk %}" class="update" title="Edit"><i
+                                class="fas fa-pencil-alt"></i></a>
+                        <a href="{% url 'delete_semester' pk=semester.pk %}" class="delete" title="Delete"><i
+                                class="fas fa-trash-alt"></i></a>
                     </div>
                 </td>
                 {% endif %}
-                
+
                 {% empty %}
-                <tr>
+            <tr>
-                  <td></td>
+                <td></td>
-                  <td></td>
+                <td></td>
-                  <td>
+                <td>
-                  <span class="text-danger">
+                    <span class="text-danger">
-                    <i class="far fa-frown"></i>No Semester.
+                        <i class="far fa-frown"></i>No Semester.
-                    {% if request.user.is_superuser %}
+                        {% if request.user.is_superuser %}
-                    <a href="{% url 'add_semester' %}">
+                        <a href="{% url 'add_semester' %}">
-                    <i class="primary" style="font-size: 22px;">
+                            <i class="primary" style="font-size: 22px;">
-                       Add Semester Now.
+                                Add Semester Now.
-                    </i>
+                            </i>
-                    {% endif %}
+                            {% endif %}
-                    </a>
+                        </a>
-                  </span>
+                    </span>
                 </td>
                 <td></td>
                 <td></td>
                 <td></td>
-                </tr>
+            </tr>
 
             </tr>
             {% endfor %}
         </tbody>
     </table>
 </div>
-{% endblock content %}
+{% endblock content %}

app/urls.py

@@ -4,7 +4,8 @@ from django.urls import path
 from .views import (
     home_view, post_add, edit_post, delete_post, 
     session_list_view, session_add_view, session_update_view, session_delete_view, 
-    semester_list_view, semester_add_view, semester_update_view, semester_delete_view
+    semester_list_view, semester_add_view, semester_update_view, semester_delete_view,
+    dashboard_view
 ) 
 
 
@@ -24,4 +25,6 @@ urlpatterns = [
     url(r'^semester/add/$', semester_add_view, name="add_semester"),
     url(r'^semester/(?P<pk>\d+)/edit/$', semester_update_view, name="edit_semester"),
     url(r'^semester/(?P<pk>\d+)/delete/$', semester_delete_view, name="delete_semester"),
+
+    url(r'^dashboard/$', dashboard_view, name="dashboard"),
 ]

app/views.py

@@ -290,3 +290,7 @@ def semester_delete_view(request, pk):
 #     response.status_code = 400
 
 #     return response
+
+
+def dashboard_view(request):
+    return render(request, 'app/dashboard.html')

course/templates/course/course_single.html

@@ -6,50 +6,58 @@
 
 <div class="container">
 
-<div id="input-nav"><a href="{% url 'home' %}" class="primary1">Home </a> <i>&rsaquo;</i>
+    <div id="input-nav"><a href="{% url 'home' %}" class="primary1">Home </a>
-    <a href="{% url 'programs' %}" class="primary1">Programs </a> <i>&rsaquo;</i> 
+        <a href="{% url 'programs' %}" class="primary1">Programs </a>
-    <a href="{% url 'program_detail' course.program.id %}" class="primary1"> {{ course.program }}</a> <i>&rsaquo;</i> {{ course }}
+        <a href="{% url 'program_detail' course.program.id %}" class="primary1"> {{ course.program }}</a>
-</div>
+        {{ course }}
-
-<div class="row">
-    <div class="col ml-auto">
-        {% if request.user.is_superuser or request.user.is_lecturer %}
-        <a class="add-button" href="{% url 'upload_file_view' course.slug %}"><i class="fas fa-plus"></i>Upload new file</a>
-        <a class="add-button" href="{% url 'upload_video' course.slug %}"><i class="fas fa-plus"></i>Upload new video</a>
-        {% endif %}
     </div>
-    <div class="col text-right">
+
-        <a class="btn btn-lg btn-warning" href="{% url 'quiz_index' course.slug %}"><i class="fas fa-list"></i> Take a Quiz</a>
+    <div class="manage-wrap">
+        <div class="row">
+            <div class="col ml-auto">
+                {% if request.user.is_superuser or request.user.is_lecturer %}
+                <a class="add-button" href="{% url 'upload_file_view' course.slug %}"><i class="fas fa-plus"></i>
+                    Upload new file
+                </a>
+                <a class="add-button" href="{% url 'upload_video' course.slug %}"><i class="fas fa-plus"></i>
+                    Upload new video
+                </a>
+                {% endif %}
+            </div>
+            <div class="col text-right">
+                <a class="btn btn-lg btn-warning" href="{% url 'quiz_index' course.slug %}"><i class="fas fa-list"></i>
+                    Take a Quiz
+                </a>
+            </div>
+        </div>
     </div>
-</div>
 
-<div class="title-1">{{ course }}</div>
+    <div class="title-1">{{ course }}</div>
-<div class="title-line"></div><br>
+    <p class="program-description">{{ course.summary }}</p>
-<p class="program-description">{{ course.summary }}</p>
 
-{% if request.user.is_superuser %}
+    {% if request.user.is_superuser %}
-<div class="btn-flex">
+    <div class="btn-flex">
-    <a class="edit-btn" href="{% url 'edit_course' course.slug %}">
+        <a class="edit-btn" href="{% url 'edit_course' course.slug %}">
-        <i class="fas fa-pencil-alt"></i><span class="mobile-hide">Edit This course</span>
+            <i class="fas fa-pencil-alt"></i><span class="mobile-hide">Edit This course</span>
-    </a>
+        </a>
-</div>
+    </div>
-{% endif %}
+    {% endif %}
 
-{% if messages %}
+    {% if messages %}
     {% for message in messages %}
-        {% if message.tags == 'error' %}
+    {% if message.tags == 'error' %}
-            <div class="alert alert-danger">
+    <div class="alert alert-danger">
-                <i class="fas fa-exclamation-circle"></i>{{ message }}
+        <i class="fas fa-exclamation-circle"></i>{{ message }}
-            </div>
+    </div>
-        {% else %}
+    {% else %}
-            <div class="alert alert-success">
+    <div class="alert alert-success">
-                <i class="fas fa-check-circle"></i>{{ message }}
+        <i class="fas fa-check-circle"></i>{{ message }}
-            </div>
+    </div>
-        {% endif %}
+    {% endif %}
     {% endfor %}
-{% endif %}
+    {% endif %}
 
-<!-- <div class="row">
+    <!-- <div class="row">
 <div class="col-md-12 mb-5 p-0">
     <p class="form-title m-0">Instructor(s)</p>
     <div class="table-responsive">
@@ -114,151 +122,159 @@
     </div>
 </div> -->
 
-<div class="row mb-5">
+    <div class="row mb-5">
-    <div class="col-md-12 p-0">
+        <div class="col-md-12 p-0">
-        <p class="form-title m-0">Video Tutorials</p>
+            <p class="form-title m-0">Video Tutorials</p>
-        <div class="table-responsive">
+            <div class="table-responsive">
-            <table class="table">
+                <table class="table">
-                <thead>
+                    <thead>
-                    <tr>
-                        <th>#</th>
-                        <th>Video Title</th>
-                        <th>Uploaded Date</th>
-                        <th>Get Started</th>
-                        {% if request.user.is_superuser or request.user.is_lecturer %}
-                        <th>Actions</th>
-                        {% endif %}
-                    </tr>
-                </thead>
-                <tbody>
-                    {% for video in videos %}
-                    <tr>
-                        <td>{{ forloop.counter }}</td>
-                        <td><a href="{{ video.get_absolute_url }}" title="{{ video }}">
-                                <i style="font-size: 20px; padding-right: 10px;" class="fas fa-video"></i>
-                                {{ video.title|title }}
-                            </a>
-                        </td>
-                        <td>{{ video.timestamp|date }}</td>
-                        <th>
-                            <div>
-                                <a class="download-btn" href="{{ video.get_absolute_url }}" title="Download to your device">
-                                    <i class="fas fa-download"></i>Get Started</a>
-                            </div>
-                        </th>
-    
-                        {% if request.user.is_superuser or request.user.is_lecturer %}
-                        <td> <div class="update-delete">
-                            <a href="{% url 'upload_video_edit' slug=course.slug video_slug=video.slug %}" class="update" title="Edit">
-                                <i class="fas fa-pencil-alt"></i>
-                            </a>
-                            <a href="{% url 'upload_video_delete' slug=course.slug video_slug=video.slug %}" class="delete" title="Delete">
-                                <i class="fas fa-trash-alt"></i>
-                            </a>
-                            </div>
-                        </td>
-                        {% endif %}
-    
-                        {% empty %}
                         <tr>
-                          <td></td>
+                            <th>#</th>
-                          <td></td>
+                            <th>Video Title</th>
-                          <td>
+                            <th>Uploaded Date</th>
-                          <span class="text-danger">
+                            <th>Get Started</th>
-                            <i class="far fa-frown fa-1x"></i> No video Uploaded.
                             {% if request.user.is_superuser or request.user.is_lecturer %}
-                            <a href="{% url 'upload_video' course.slug %}">
+                            <th>Actions</th>
-                            <i class="primary" style="font-size: 22px;">
-                               Upload now.
-                            </i>
                             {% endif %}
-                            </a>
-                          </span>
-                        </td>
-                        <td></td>
-                        <td></td>
-                        <td></td>
                         </tr>
-                    {% endfor %}
+                    </thead>
-                </tbody>
+                    <tbody>
-            </table>
+                        {% for video in videos %}
+                        <tr>
+                            <td>{{ forloop.counter }}</td>
+                            <td><a href="{{ video.get_absolute_url }}" title="{{ video }}">
+                                    <i style="font-size: 20px; padding-right: 10px;" class="fas fa-video"></i>
+                                    {{ video.title|title }}
+                                </a>
+                            </td>
+                            <td>{{ video.timestamp|date }}</td>
+                            <th>
+                                <div>
+                                    <a class="download-btn" href="{{ video.get_absolute_url }}"
+                                        title="Download to your device">
+                                        <i class="fas fa-download"></i>Get Started</a>
+                                </div>
+                            </th>
+
+                            {% if request.user.is_superuser or request.user.is_lecturer %}
+                            <td>
+                                <div class="update-delete">
+                                    <a href="{% url 'upload_video_edit' slug=course.slug video_slug=video.slug %}"
+                                        class="update" title="Edit">
+                                        <i class="fas fa-pencil-alt"></i>
+                                    </a>
+                                    <a href="{% url 'upload_video_delete' slug=course.slug video_slug=video.slug %}"
+                                        class="delete" title="Delete">
+                                        <i class="fas fa-trash-alt"></i>
+                                    </a>
+                                </div>
+                            </td>
+                            {% endif %}
+
+                            {% empty %}
+                        <tr>
+                            <td></td>
+                            <td></td>
+                            <td>
+                                <span class="text-danger">
+                                    <i class="far fa-frown fa-1x"></i> No video Uploaded.
+                                    {% if request.user.is_superuser or request.user.is_lecturer %}
+                                    <a href="{% url 'upload_video' course.slug %}">
+                                        <i class="primary" style="font-size: 22px;">
+                                            Upload now.
+                                        </i>
+                                        {% endif %}
+                                    </a>
+                                </span>
+                            </td>
+                            <td></td>
+                            <td></td>
+                            <td></td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
         </div>
     </div>
-</div>
 
-<div class="row">
+    <div class="row">
-<div class="col-md-12 p-0">
+        <div class="col-md-12 p-0">
-    <p class="form-title m-0">Documentations</p>
+            <p class="form-title m-0">Documentations</p>
-    <div class="table-responsive">
+            <div class="table-responsive">
-        <table class="table">
+                <table class="table">
-            <thead>
+                    <thead>
-                <tr>
+                        <tr>
-                    <th>#</th>
+                            <th>#</th>
-                    <th>File name</th>
+                            <th>File name</th>
-                    <th>Uploaded Date</th>
+                            <th>Uploaded Date</th>
-                    <th>Updated Date</th>
+                            <th>Updated Date</th>
-                    <th>Downloads</th>
+                            <th>Downloads</th>
-                    {% if request.user.is_superuser or request.user.is_lecturer %}
+                            {% if request.user.is_superuser or request.user.is_lecturer %}
-                    <th>Actions</th>
+                            <th>Actions</th>
-                    {% endif %}
+                            {% endif %}
-                </tr>
+                        </tr>
-            </thead>
+                    </thead>
-            <tbody>
+                    <tbody>
-                {% for file in files %}
+                        {% for file in files %}
-                <tr>
+                        <tr>
-                    <td>{{ forloop.counter }}</td>
+                            <td>{{ forloop.counter }}</td>
-                    <td><a href="{{ file.file.url }}" title="{{ file }}">
+                            <td><a href="{{ file.file.url }}" title="{{ file }}">
-                            <i style="font-size: 20px; padding-right: 10px;" class="fas fa-file-{{ file.get_extension_short }}"></i>
+                                    <i style="font-size: 20px; padding-right: 10px;"
-                            {{ file.title|title }}
+                                        class="fas fa-file-{{ file.get_extension_short }}"></i>
-                        </a>
+                                    {{ file.title|title }}
-                    </td>
+                                </a>
-                    <td>{{ file.upload_time|date }}</td>
+                            </td>
-                    <td>{{ file.updated_date|date }}</td>
+                            <td>{{ file.upload_time|date }}</td>
-                    <th>
+                            <td>{{ file.updated_date|date }}</td>
-                        <div>
+                            <th>
-                            <a class="download-btn" href="{{ file.file.url }}" title="Download to your device">
+                                <div>
-                                <i class="fas fa-download"></i>Download</a>
+                                    <a class="download-btn" href="{{ file.file.url }}" title="Download to your device">
-                        </div>
+                                        <i class="fas fa-download"></i>Download</a>
-                    </th>
+                                </div>
+                            </th>
 
-                    {% if request.user.is_superuser or request.user.is_lecturer %}
+                            {% if request.user.is_superuser or request.user.is_lecturer %}
-                    <td> <div class="update-delete">
+                            <td>
-                        <a href="{% url 'upload_file_edit' slug=course.slug file_id=file.pk %}" class="update" title="Edit">
+                                <div class="update-delete">
-                            <i class="fas fa-pencil-alt"></i>
+                                    <a href="{% url 'upload_file_edit' slug=course.slug file_id=file.pk %}"
-                        </a>
+                                        class="update" title="Edit">
-                        <a href="{% url 'upload_file_delete' slug=course.slug file_id=file.pk %}" class="delete" title="Delete">
+                                        <i class="fas fa-pencil-alt"></i>
-                            <i class="fas fa-trash-alt"></i>
+                                    </a>
-                        </a>
+                                    <a href="{% url 'upload_file_delete' slug=course.slug file_id=file.pk %}"
-                        </div>
+                                        class="delete" title="Delete">
-                    </td>
+                                        <i class="fas fa-trash-alt"></i>
-                    {% endif %}
+                                    </a>
+                                </div>
+                            </td>
+                            {% endif %}
 
-                    {% empty %}
+                            {% empty %}
-                    <tr>
+                        <tr>
-                      <td></td>
+                            <td></td>
-                      <td></td>
+                            <td></td>
-                      <td>
+                            <td>
-                      <span class="text-danger">
+                                <span class="text-danger">
-                        <i class="far fa-frown fa-1x"></i> No File Uploaded.
+                                    <i class="far fa-frown fa-1x"></i> No File Uploaded.
-                        {% if request.user.is_superuser or request.user.is_lecturer %}
+                                    {% if request.user.is_superuser or request.user.is_lecturer %}
-                        <a href="{% url 'upload_file_view' course.slug %}">
+                                    <a href="{% url 'upload_file_view' course.slug %}">
-                        <i class="primary" style="font-size: 22px;">
+                                        <i class="primary" style="font-size: 22px;">
-                           Upload now.
+                                            Upload now.
-                        </i>
+                                        </i>
-                        {% endif %}
+                                        {% endif %}
-                        </a>
+                                    </a>
-                      </span>
+                                </span>
-                    </td>
+                            </td>
-                    <td></td>
+                            <td></td>
-                    <td></td>
+                            <td></td>
-                    <td></td>
+                            <td></td>
-                    </tr>
+                        </tr>
-                {% endfor %}
+                        {% endfor %}
-            </tbody>
+                    </tbody>
-        </table>
+                </table>
+            </div>
+        </div>
     </div>
-</div>
-</div>
 
 </div>
 
@@ -270,15 +286,19 @@
             {% for lecturer in lecturers %}
             <div class="col-lg-4 mx-auto" style="background: transparent; box-shadow: none;">
                 <img class="" src="{{ lecturer.lecturer.picture.url }}" alt="" style="width:140px;">
-            <h2>{{ lecturer|title }}</h2>
+                <h2>{{ lecturer|title }}</h2>
-            <p style="color: #6c757d;">{{ lecturer.lecturer.email }}</p>
+                <p style="color: #6c757d;">{{ lecturer.lecturer.email }}</p>
-            <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+                <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies
-            <p>
+                    vehicula ut id elit.</p>
-                <a class="btn rounded-circle btn-secondary" href="#" role="button"><i class="fab fa-twitter"></i></a>
+                <p>
-                <a class="btn rounded-circle btn-secondary" href="#" role="button"><i class="fab fa-facebook-f"></i></a>
+                    <a class="btn rounded-circle btn-secondary" href="#" role="button"><i
-                <a class="btn rounded-circle btn-secondary" href="#" role="button"><i class="fab fa-linkedin-in"></i></a>
+                            class="fab fa-twitter"></i></a>
-            </p>
+                    <a class="btn rounded-circle btn-secondary" href="#" role="button"><i
-            <!-- <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p> -->
+                            class="fab fa-facebook-f"></i></a>
+                    <a class="btn rounded-circle btn-secondary" href="#" role="button"><i
+                            class="fab fa-linkedin-in"></i></a>
+                </p>
+                <!-- <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p> -->
             </div>
             {% endfor %}
 
@@ -286,4 +306,4 @@
     </div>
 </div>
 
-{% endblock content %}
+{% endblock content %}

course/templates/course/program_list.html

@@ -12,22 +12,23 @@
 <div class="title-line"></div>
 
 {% if messages %}
-    {% for message in messages %}
+{% for message in messages %}
-        {% if message.tags == 'error' %}
+{% if message.tags == 'error' %}
-            <div class="alert alert-danger">
+<div class="alert alert-danger">
-                <i class="fas fa-exclamation-circle"></i>{{ message }}
+    <i class="fas fa-exclamation-circle"></i>{{ message }}
-            </div>
+</div>
-        {% else %}
+{% else %}
-            <div class="alert alert-success">
+<div class="alert alert-success">
-                <i class="fas fa-check-circle"></i>{{ message }}
+    <i class="fas fa-check-circle"></i>{{ message }}
-            </div>
+</div>
-        {% endif %}
+{% endif %}
-    {% endfor %}
+{% endfor %}
 {% endif %}
 
 <div class="content-center">
     <form class="search-form mx-auto" action="" method="GET">{% csrf_token %}
-        <input class="au-input" type="text" name="program_filter" placeholder="Program name" value="{{ request.GET.program_filter }}"/>
+        <input class="au-input" type="text" name="program_filter" placeholder="Program name"
+            value="{{ request.GET.program_filter }}" />
         <button class="btn btn-light" type="submit">
             <i class="fas fa-search"></i> Filter
         </button>
@@ -41,75 +42,79 @@
 <!-- Modal -->
 {% for program in programs %}
 <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
-  <div class="modal-dialog">
+    <div class="modal-dialog">
-    <div class="modal-content">
+        <div class="modal-content">
-      <p class="p-4">
+            <p class="p-4">
-        Are you sure you want to delete this item?
+                Are you sure you want to delete this item?
-      </p>
+            </p>
-      <div class="modal-footer">
+            <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-        <a class="btn btn-danger" href="{% url 'program_delete' pk=program.pk %}">Delete</a>
+                <a class="btn btn-danger" href="{% url 'program_delete' pk=program.pk %}">Delete</a>
-      </div>
+            </div>
+        </div>
     </div>
-  </div>
 </div>
 {% endfor %}
 
 
 <div class="table-responsive p-0 px-2 mt-5">
     <div class="table-shadow">
-    <table class="table">
+        <table class="table table-light">
-        <thead>
+            <thead>
-            <tr>
+                <tr>
-                <th>#</th>
+                    <th>#</th>
-                <th>Program Name</th>
+                    <th>Program Name</th>
-                <th>Summary</th>
+                    <th>Summary</th>
-                {% if request.user.is_superuser %}
+                    {% if request.user.is_superuser %}
-                <th>Action</th>
+                    <th>Action</th>
-                {% endif %}
+                    {% endif %}
-            </tr>
+                </tr>
-        </thead>
+            </thead>
-        <tbody>
+            <tbody>
-            {% for program in programs %}
+                {% for program in programs %}
-            <tr>
+                <tr>
-                <td>{{ forloop.counter }}.</td>
+                    <td>{{ forloop.counter }}.</td>
-                <td><a class="a-list" href="{{ program.get_absolute_url }}">
+                    <td><a class="a-list" href="{{ program.get_absolute_url }}">
-                    {{ program.title}}</a></td>
+                            {{ program.title}}</a></td>
-                <td>{{ program.summary }} </td>
+                    <td>{{ program.summary }} </td>
-                {% if request.user.is_superuser %}
+                    {% if request.user.is_superuser %}
 
-                <td>
+                    <td>
-                    <div class="update-delete">
+                        <div class="update-delete">
-                        <a href="{% url 'edit_program' pk=program.pk %}" class="update"><i class="fas fa-edit"></i></a> 
+                            <a href="{% url 'edit_program' pk=program.pk %}" class="update"><i
-                        <button type="button" class="delete" data-toggle="modal" data-target="#exampleModal">
+                                    class="fas fa-edit"></i></a>
-                            <i class="fas fa-trash-alt"></i>
+                            <button type="button" class="delete" data-toggle="modal" data-target="#exampleModal">
-                        </button>
+                                <i class="fas fa-trash-alt"></i>
-                    </div>
+                            </button>
-                    
-                    <!-- Modal -->
-                    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
-                      <div class="modal-dialog">
-                        <div class="modal-content">
-                          <p class="p-4">
-                            Are you sure you want to delete this program?
-                          </p>
-                          <div class="modal-footer">
-                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                            <a class="btn btn-danger" href="{% url 'program_delete' pk=program.pk %}">Delete</a>
-                          </div>
                         </div>
-                      </div>
+
-                    </div>
+                        <!-- Modal -->
-                <!-- <td> <div class="update-delete">
+                        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
+                            aria-hidden="true">
+                            <div class="modal-dialog">
+                                <div class="modal-content">
+                                    <p class="p-4">
+                                        Are you sure you want to delete this program?
+                                    </p>
+                                    <div class="modal-footer">
+                                        <button type="button" class="btn btn-secondary"
+                                            data-dismiss="modal">Close</button>
+                                        <a class="btn btn-danger"
+                                            href="{% url 'program_delete' pk=program.pk %}">Delete</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- <td> <div class="update-delete">
                     <a href="{% url 'edit_program' pk=program.pk %}" class="update"><i class="fas fa-edit"></i></a> 
                     <a href="{% url 'program_delete' pk=program.pk %}" class="delete"><i class="fas fa-trash-alt"></i></a>
                     </div> -->
-                </td>
+                    </td>
-                {% endif %}
+                    {% endif %}
-            </tr>
+                </tr>
-            {% endfor %}
+                {% endfor %}
-        </tbody>
+            </tbody>
-    </table>
+        </table>
+    </div>
 </div>
-</div>
+{% endblock content %}
-{% endblock content %}

course/templates/course/program_single.html

@@ -4,41 +4,44 @@
 
 {% block content %}
 
-<div id="input-nav"><a href="{% url 'home' %}" class="primary1">Home</a> <i>&rsaquo;</i> 
+<div id="input-nav"><a href="{% url 'home' %}" class="primary1">Home</a> <i>&rsaquo;</i>
-    <a href="{% url 'programs' %}" class="primary1">Programs</a> <i>&rsaquo;</i> {{ program.title }}</div>
+    <a href="{% url 'programs' %}" class="primary1">Programs</a> <i>&rsaquo;</i> {{ program.title }}
+</div>
 
 {% if request.user.is_superuser %}
-<a class="add-button" href="{% url 'course_add' pk=program.pk %}"><i class="fas fa-plus"></i>Add Course</a>
+<div class="manage-wrap">
+    <a class="btn btn-sm btn-primary" href="{% url 'course_add' pk=program.pk %}"><i class="fas fa-plus"></i>Add
+        Course</a>
+</div>
 {% endif %}
 
 
 {% if program %}
-    <div class="title-1">{{ program.title }}</div>
+<div class="title-1">{{ program.title }}</div>
-    <div class="title-line"></div>
+{% if program.summary %}
-    {% if program.summary %}
+<p class="program-description">{{ program.summary }}</p>
-    <p class="program-description">{{ program.summary }}</p>
+{% endif %}
-    {% endif %}
 {% endif %}
 
 {% if messages %}
-    {% for message in messages %}
+{% for message in messages %}
-        {% if message.tags == 'error' %}
+{% if message.tags == 'error' %}
-            <div class="alert alert-danger">
+<div class="alert alert-danger">
-                <i class="fas fa-exclamation-circle"></i>{{ message }}
+    <i class="fas fa-exclamation-circle"></i>{{ message }}
-            </div>
+</div>
-        {% else %}
+{% else %}
-            <div class="alert alert-success">
+<div class="alert alert-success">
-                <i class="fas fa-check-circle"></i>{{ message }}
+    <i class="fas fa-check-circle"></i>{{ message }}
-            </div>
+</div>
-        {% endif %}
+{% endif %}
-    {% endfor %}
+{% endfor %}
 {% endif %}
 
 <div class="content-center">
     <form class="search-form" action="" method="GET">
-        <input class="au-input" type="text" name="name" placeholder="Course Name" value="{{ request.GET.name }}"/>
+        <input class="au-input" type="text" name="name" placeholder="Course Name" value="{{ request.GET.name }}" />
-        <input class="au-input" type="text" name="code" placeholder="Course Code" value="{{ request.GET.code }}"/>
+        <input class="au-input" type="text" name="code" placeholder="Course Code" value="{{ request.GET.code }}" />
-        <input class="au-input" type="number" name="year" placeholder="Course Year" value="{{ request.GET.year }}"/>
+        <input class="au-input" type="number" name="year" placeholder="Course Year" value="{{ request.GET.year }}" />
         <button class="btn btn-light" type="submit">
             <i class="fas fa-search"></i> filter
         </button>
@@ -47,7 +50,7 @@
 
 <div class="table-responsive p-0 px-2 mt-5">
     <div class="table-shadow">
-        <table class="table">
+        <table class="table table-light table-striped">
             <thead>
                 <tr>
                     <th>#</th>
@@ -66,22 +69,36 @@
             <tbody>
                 {% for course in courses %}
                 <tr>
-                    <td>{{ forloop.counter }}.</td> 
+                    <td>{{ forloop.counter }}.</td>
                     <td><a href="{{ course.get_absolute_url }}">
-                        {{ course.title }}</a></td>
+                            {{ course.title }}</a></td>
                     <td>{{ course.code }}</td>
                     <td>{{ course.credit }}</td>
                     <td>{{ course.level }}</td>
                     <td>{{ course.year }}</td>
                     <td>{{ course.semester }}</td>
-                    <th>{% if course.is_current_semester == False %}<i class="fas fa-times-circle fa-1-5x danger"></i>
+                    <th>
-                        {% elif course.is_current_semester == True %}<i class="fas fa-check-circle fa-1-5x"></i>
+                        {% if course.is_current_semester == False %}
+                        <i class="fas fa-times-circle fa-1-5x danger"></i>
+                        {% elif course.is_current_semester == True %}
+                        <i class="fas fa-check-circle fa-1-5x"></i>
                         {% endif %}
                     </th>
                     {% if request.user.is_superuser %}
-                    <td> <div class="update-delete">
+                    <td>
-                        <a href="{% url 'edit_course' slug=course.slug %}" class="update"><i class="fas fa-edit"></i></a> 
+                        <div class="dropdown">
-                        <a href="{% url 'delete_course' slug=course.slug %}" class="delete"><i class="fas fa-trash-alt"></i></a>
+                            <button class="btn btn-sm" id="dropdownMenuButton" data-toggle="dropdown"
+                                aria-haspopup="true" aria-expanded="false">
+                                <i class="fas fa-ellipsis-v"></i>
+                            </button>
+                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
+                                <a class="dropdown-item" href="{% url 'edit_course' slug=course.slug %}">
+                                    <i class="fas fa-pencil-alt"></i> Edit
+                                </a>
+                                <a class="dropdown-item" href="{% url 'delete_course' slug=course.slug %}">
+                                    <i class="fas fa-trash-alt"></i> Delete
+                                </a>
+                            </div>
                         </div>
                     </td>
                     {% endif %}
@@ -97,15 +114,15 @@
     <div class="pagination">
         <a href="?page=1">&laquo;</a>
         {% for i in courses.paginator.page_range %}
-            {% if i == courses.number %}
+        {% if i == courses.number %}
-                <a class="pagination-active" href="?page={{ i }}"><b>{{ i }}</b></a>
+        <a class="pagination-active" href="?page={{ i }}"><b>{{ i }}</b></a>
-            {% else %}
+        {% else %}
-                <a href="?page={{ i }}">{{ i }}</a>
+        <a href="?page={{ i }}">{{ i }}</a>
-            {% endif %}
+        {% endif %}
         {% endfor %}
         <a href="?page={{ courses.paginator.num_pages }}">&raquo;</a>
     </div>
 </div>
 {% endif %}
 
-{% endblock content %}
+{% endblock content %}

coursemanagement/admin.py

@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.

coursemanagement/apps.py

@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+
+class CoursemanagementConfig(AppConfig):
+    name = 'coursemanagement'

coursemanagement/migrations/0001_initial.py

@@ -0,0 +1,23 @@
+# Generated by Django 3.1.3 on 2021-08-23 05:26
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+        ('accounts', '0011_auto_20210823_0825'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='CourseOffer',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('dep_head', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='accounts.dephead')),
+            ],
+        ),
+    ]

coursemanagement/models.py

@@ -0,0 +1,10 @@
+from django.db import models
+from course.models import Course
+from accounts.models import DepHead
+
+
+class CourseOffer(models.Model):
+	dep_head = models.ForeignKey(DepHead, on_delete=models.CASCADE)
+
+	def __str__(self):
+		return "{}".format(self.dep_head)

coursemanagement/tests.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

coursemanagement/views.py

@@ -0,0 +1,3 @@
+from django.shortcuts import render
+
+# Create your views here.

docs/TODO.txt

@@ -0,0 +1,40 @@
+New features to add:- 
+	- News that publicly available
+		- it can be about the highest scorer of the year from all branch of the college:
+		  	this motivate other students
+		- privacy and policy update 
+	
+	- course add and drop should offer by the department head
+
+Long term TODOs 
+	- Payments integration
+
+
+Dashboard: -
+	Chart.js or d3.js
+
+	containes: -
+		Overall attendance (doughnut)
+
+		- School Demographics
+			gender (pie)
+			Race/Ethnicity
+			Home language
+			new/all students
+			new/all lecturers
+
+		- Recent activities
+			- added videos, courses, documentations
+		- Students Online Quiz Status
+			- ongoing, pass, fail
+		- Overall Course Resources
+			- Total number of videos, courses, documentations
+		- Event calender
+		- Enrollments per course (vertical bar)
+	
+	- Message
+	- Notification
+	- Survey
+	- Polls
+	- Website Traffic
+	- Recent activities

locale/es/LC_MESSAGES/django.po

@@ -0,0 +1,479 @@
+# SOME DESCRIPTIVE TITLE.
+# Copyright (C) YEAR THE PACKAGE'S COPYRIGHT HOLDER
+# This file is distributed under the same license as the PACKAGE package.
+# FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
+#
+#, fuzzy
+msgid ""
+msgstr ""
+"Project-Id-Version: PACKAGE VERSION\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2021-05-06 12:13+0300\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <LL@li.org>\n"
+"Language: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+#: .\accounts\templates\accounts\profile.html:121
+#: .\accounts\templates\accounts\profile_single.html:119
+msgid " can see your attendace, assesment, and grade result"
+msgstr ""
+
+#: .\accounts\validators.py:12
+msgid ""
+"Enter a valid username. This value may contain only English letters, "
+"numbers, and @/./+/-/_ characters."
+msgstr ""
+
+#: .\quiz\admin.py:22 .\quiz\admin.py:24 .\quiz\forms.py:36 .\quiz\forms.py:38
+#: .\quiz\models.py:362
+msgid "Questions"
+msgstr ""
+
+#: .\quiz\models.py:20 .\quiz\models.py:413
+msgid "Content"
+msgstr ""
+
+#: .\quiz\models.py:21
+msgid "Random"
+msgstr ""
+
+#: .\quiz\models.py:22
+msgid "None"
+msgstr ""
+
+#: .\quiz\models.py:26
+msgid "Assignment"
+msgstr ""
+
+#: .\quiz\models.py:27
+msgid "Exam"
+msgstr ""
+
+#: .\quiz\models.py:28
+msgid "Practice Quiz"
+msgstr ""
+
+#: .\quiz\models.py:47
+msgid "Title"
+msgstr ""
+
+#: .\quiz\models.py:49
+msgid "Description"
+msgstr ""
+
+#: .\quiz\models.py:49
+msgid "a description of the quiz"
+msgstr ""
+
+#: .\quiz\models.py:51
+msgid "Random Order"
+msgstr ""
+
+#: .\quiz\models.py:52
+msgid "Display the questions in a random order or as they are set?"
+msgstr ""
+
+#: .\quiz\models.py:57
+msgid "Answers at end"
+msgstr ""
+
+#: .\quiz\models.py:58
+msgid ""
+"Correct answer is NOT shown after question. Answers displayed at the end."
+msgstr ""
+
+#: .\quiz\models.py:60
+msgid "Exam Paper"
+msgstr ""
+
+#: .\quiz\models.py:61
+msgid ""
+"If yes, the result of each attempt by a user will be stored. Necessary for "
+"marking."
+msgstr ""
+
+#: .\quiz\models.py:63
+msgid "Single Attempt"
+msgstr ""
+
+#: .\quiz\models.py:64
+msgid "If yes, only one attempt by a user will be permitted."
+msgstr ""
+
+#: .\quiz\models.py:66
+msgid "Pass Mark"
+msgstr ""
+
+#: .\quiz\models.py:67
+msgid "Percentage required to pass exam."
+msgstr ""
+
+#: .\quiz\models.py:69
+msgid "Draft"
+msgstr ""
+
+#: .\quiz\models.py:70
+msgid ""
+"If yes, the quiz is not displayed in the quiz list and can only be taken by "
+"users who can edit quizzes."
+msgstr ""
+
+#: .\quiz\models.py:89 .\quiz\models.py:216 .\quiz\models.py:350
+#: .\quiz\templates\quiz\sitting_list.html:31
+msgid "Quiz"
+msgstr ""
+
+#: .\quiz\models.py:90
+msgid "Quizzes"
+msgstr ""
+
+#: .\quiz\models.py:123 .\quiz\models.py:215
+#: .\quiz\templates\quiz\sitting_detail.html:18
+#: .\quiz\templates\quiz\sitting_list.html:29
+msgid "User"
+msgstr ""
+
+#: .\quiz\models.py:124 .\quiz\templates\progress.html:63
+#: .\quiz\templates\quiz\sitting_detail.html:20
+#: .\quiz\templates\quiz\sitting_list.html:33
+msgid "Score"
+msgstr ""
+
+#: .\quiz\models.py:129
+msgid "User Progress"
+msgstr ""
+
+#: .\quiz\models.py:130
+msgid "User progress records"
+msgstr ""
+
+#: .\quiz\models.py:147
+msgid "error"
+msgstr ""
+
+#: .\quiz\models.py:147
+msgid "category does not exist or invalid score"
+msgstr ""
+
+#: .\quiz\models.py:217 .\quiz\templates\quiz\sitting_list.html:30
+msgid "Course"
+msgstr ""
+
+#: .\quiz\models.py:219
+msgid "Question Order"
+msgstr ""
+
+#: .\quiz\models.py:222
+msgid "Question List"
+msgstr ""
+
+#: .\quiz\models.py:225
+msgid "Incorrect questions"
+msgstr ""
+
+#: .\quiz\models.py:228
+msgid "Current Score"
+msgstr ""
+
+#: .\quiz\models.py:229
+msgid "Complete"
+msgstr ""
+
+#: .\quiz\models.py:230
+msgid "User Answers"
+msgstr ""
+
+#: .\quiz\models.py:231 .\quiz\templates\quiz\sitting_detail.html:21
+msgid "Start"
+msgstr ""
+
+#: .\quiz\models.py:232 .\quiz\templates\quiz\sitting_detail.html:22
+msgid "End"
+msgstr ""
+
+#: .\quiz\models.py:237
+msgid "Can see completed exams."
+msgstr ""
+
+#: .\quiz\models.py:351
+msgid "Figure"
+msgstr ""
+
+#: .\quiz\models.py:353
+msgid "Enter the question text that you want displayed"
+msgstr ""
+
+#: .\quiz\models.py:353 .\quiz\models.py:361 .\quiz\models.py:409
+#: .\quiz\templates\question.html:115
+#: .\quiz\templates\quiz\sitting_detail.html:28
+msgid "Question"
+msgstr ""
+
+#: .\quiz\models.py:355
+msgid "Explanation to be shown after the question has been answered."
+msgstr ""
+
+#: .\quiz\models.py:356 .\quiz\templates\question.html:74
+#: .\quiz\templates\question.html:83 .\quiz\templates\result.html:76
+#: .\quiz\templates\result.html:148 .\quiz\templates\result.html:195
+#: .\quiz\templates\result.html:261
+msgid "Explanation"
+msgstr ""
+
+#: .\quiz\models.py:373
+msgid "The order in which multichoice choice options are displayed to the user"
+msgstr ""
+
+#: .\quiz\models.py:374
+msgid "Choice Order"
+msgstr ""
+
+#: .\quiz\models.py:404
+msgid "Multiple Choice Question"
+msgstr ""
+
+#: .\quiz\models.py:405
+msgid "Multiple Choice Questions"
+msgstr ""
+
+#: .\quiz\models.py:412
+msgid "Enter the choice text that you want displayed"
+msgstr ""
+
+#: .\quiz\models.py:416
+msgid "Is this a correct answer?"
+msgstr ""
+
+#: .\quiz\models.py:417 .\quiz\templates\quiz\sitting_detail.html:50
+msgid "Correct"
+msgstr ""
+
+#: .\quiz\models.py:423
+msgid "Choice"
+msgstr ""
+
+#: .\quiz\models.py:424
+msgid "Choices"
+msgstr ""
+
+#: .\quiz\models.py:445
+msgid "Essay style question"
+msgstr ""
+
+#: .\quiz\models.py:446
+msgid "Essay style questions"
+msgstr ""
+
+#: .\quiz\templates\correct_answer.html:6 .\quiz\templates\question.html:45
+#: .\quiz\templates\result.html:48
+msgid "You answered the above question incorrectly"
+msgstr ""
+
+#: .\quiz\templates\correct_answer.html:16 .\quiz\templates\question.html:55
+#: .\quiz\templates\result.html:58
+msgid "This is the correct answer"
+msgstr ""
+
+#: .\quiz\templates\correct_answer.html:23 .\quiz\templates\question.html:62
+#: .\quiz\templates\result.html:65
+msgid "This was your answer."
+msgstr ""
+
+#: .\quiz\templates\progress.html:4
+msgid "Progress Page"
+msgstr ""
+
+#: .\quiz\templates\progress.html:5
+msgid "User Progress Page"
+msgstr ""
+
+#: .\quiz\templates\progress.html:13
+msgid "Question Category Scores"
+msgstr ""
+
+#: .\quiz\templates\progress.html:20 .\quiz\templates\quiz\quiz_list.html:71
+#: .\quiz\templates\quiz\sitting_detail.html:13
+msgid "Category"
+msgstr ""
+
+#: .\quiz\templates\progress.html:21
+msgid "Correctly answererd"
+msgstr ""
+
+#: .\quiz\templates\progress.html:22
+msgid "Incorrect"
+msgstr ""
+
+#: .\quiz\templates\progress.html:51
+msgid "Previous exam papers"
+msgstr ""
+
+#: .\quiz\templates\progress.html:53
+msgid "Below are the results of exams that you have sat."
+msgstr ""
+
+#: .\quiz\templates\progress.html:62
+msgid "Quiz Title"
+msgstr ""
+
+#: .\quiz\templates\progress.html:64
+msgid "Possible Score"
+msgstr ""
+
+#: .\quiz\templates\question.html:23 .\quiz\templates\result.html:35
+#: .\quiz\templates\result.html:187
+msgid "The previous question"
+msgstr ""
+
+#: .\quiz\templates\question.html:32
+msgid "Your answer was"
+msgstr ""
+
+#: .\quiz\templates\question.html:79 .\quiz\templates\result.html:81
+msgid "No explanation set to this question."
+msgstr ""
+
+#: .\quiz\templates\question.html:115
+msgid "of"
+msgstr ""
+
+#: .\quiz\templates\question.html:120
+msgid "Quiz category"
+msgstr ""
+
+#: .\quiz\templates\question.html:145
+msgid "Check"
+msgstr ""
+
+#: .\quiz\templates\question.html:146
+msgid "Previous"
+msgstr ""
+
+#: .\quiz\templates\quiz\quiz_list.html:66
+msgid "You will only get one attempt at this quiz"
+msgstr ""
+
+#: .\quiz\templates\quiz\quiz_list.html:74
+msgid "Start quiz"
+msgstr ""
+
+#: .\quiz\templates\quiz\sitting_detail.html:4
+msgid "Result of"
+msgstr ""
+
+#: .\quiz\templates\quiz\sitting_detail.html:4
+msgid "for"
+msgstr ""
+
+#: .\quiz\templates\quiz\sitting_detail.html:12
+msgid "Quiz title"
+msgstr ""
+
+#: .\quiz\templates\quiz\sitting_detail.html:19
+#: .\quiz\templates\quiz\sitting_list.html:32
+msgid "Completed"
+msgstr ""
+
+#: .\quiz\templates\quiz\sitting_detail.html:29
+msgid "User answer"
+msgstr ""
+
+#: .\quiz\templates\quiz\sitting_detail.html:48
+msgid "incorrect"
+msgstr ""
+
+#: .\quiz\templates\quiz\sitting_detail.html:56
+msgid "Toggle whether correct"
+msgstr ""
+
+#: .\quiz\templates\quiz\sitting_list.html:3
+msgid "All Quizzes"
+msgstr ""
+
+#: .\quiz\templates\quiz\sitting_list.html:9
+msgid "List of complete exams"
+msgstr ""
+
+#: .\quiz\templates\quiz\sitting_list.html:18
+msgid "Filter"
+msgstr ""
+
+#: .\quiz\templates\quiz\sitting_list.html:48
+msgid "View details"
+msgstr ""
+
+#: .\quiz\templates\quiz\sitting_list.html:56
+msgid "There are no matching results for your search..."
+msgstr ""
+
+#: .\quiz\templates\result.html:8
+msgid "Exam Results for"
+msgstr ""
+
+#: .\quiz\templates\result.html:92 .\quiz\templates\result.html:206
+msgid "Exam results"
+msgstr ""
+
+#: .\quiz\templates\result.html:95 .\quiz\templates\result.html:208
+msgid "Exam title"
+msgstr ""
+
+#: .\quiz\templates\result.html:99 .\quiz\templates\result.html:212
+msgid "You answered"
+msgstr ""
+
+#: .\quiz\templates\result.html:99 .\quiz\templates\result.html:212
+msgid "questions correctly out of"
+msgstr ""
+
+#: .\quiz\templates\result.html:99 .\quiz\templates\result.html:212
+msgid "giving you"
+msgstr ""
+
+#: .\quiz\templates\result.html:99
+#, python-format
+msgid "%% correct"
+msgstr ""
+
+#: .\quiz\templates\result.html:112 .\quiz\templates\result.html:222
+msgid "Review the questions below and try the exam again in the future"
+msgstr ""
+
+#: .\quiz\templates\result.html:116
+msgid "The result of this exam will be stored in your progress section"
+msgstr ""
+
+#: .\quiz\templates\result.html:118
+msgid "so you can review and monitor your progression"
+msgstr ""
+
+#: .\quiz\templates\result.html:132 .\quiz\templates\result.html:240
+msgid "Your session score is"
+msgstr ""
+
+#: .\quiz\templates\result.html:132 .\quiz\templates\result.html:240
+msgid "out of a possible"
+msgstr ""
+
+#: .\quiz\templates\result.html:153
+msgid "No explanation set for this question."
+msgstr ""
+
+#: .\quiz\templates\result.html:160 .\quiz\templates\result.html:258
+msgid "Your answer"
+msgstr ""
+
+#: .\quiz\templates\result.html:212
+msgid "percent correct"
+msgstr ""
+
+#: .\quiz\templates\result.html:226
+msgid ""
+"The result of this exam will be stored in your progress section so you can "
+"review and monitor your progression"
+msgstr ""

payments/migrations/0001_initial.py

@@ -1,6 +1,7 @@
-# Generated by Django 3.1.3 on 2021-04-04 16:24
+# Generated by Django 3.1.3 on 2021-04-11 09:30
 
 from django.conf import settings
+import django.contrib.postgres.fields
 from django.db import migrations, models
 import django.db.models.deletion
 
@@ -14,12 +15,21 @@ class Migration(migrations.Migration):
     ]
 
     operations = [
+        migrations.CreateModel(
+            name='TestClass',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('test_name', models.CharField(blank=True, max_length=120, null=True)),
+            ],
+        ),
         migrations.CreateModel(
             name='Invoice',
             fields=[
                 ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
                 ('total', models.FloatField(blank=True, null=True)),
                 ('amount', models.FloatField(blank=True, null=True)),
+                ('payment_complete', models.BooleanField(default=False)),
+                ('invoice_code', models.CharField(blank=True, max_length=200, null=True)),
                 ('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
             ],
         ),

payments/migrations/0002_invoice_payment_complete.py

@@ -1,18 +0,0 @@
-# Generated by Django 3.1.3 on 2021-04-04 16:54
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('payments', '0001_initial'),
-    ]
-
-    operations = [
-        migrations.AddField(
-            model_name='invoice',
-            name='payment_complete',
-            field=models.BooleanField(default=False),
-        ),
-    ]

payments/migrations/0002_testclass_array.py

@@ -0,0 +1,19 @@
+# Generated by Django 3.1.3 on 2021-04-16 09:14
+
+import django.contrib.postgres.fields
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('payments', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='testclass',
+            name='array',
+            field=django.contrib.postgres.fields.ArrayField(base_field=models.IntegerField(), blank=True, default=list, null=True, size=200),
+        ),
+    ]

payments/migrations/0003_delete_testclass.py

@@ -0,0 +1,16 @@
+# Generated by Django 3.1.3 on 2021-04-16 09:18
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('payments', '0002_testclass_array'),
+    ]
+
+    operations = [
+        migrations.DeleteModel(
+            name='TestClass',
+        ),
+    ]

payments/migrations/0003_invoice_invoice_code.py

@@ -1,18 +0,0 @@
-# Generated by Django 3.1.3 on 2021-04-05 05:02
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('payments', '0002_invoice_payment_complete'),
-    ]
-
-    operations = [
-        migrations.AddField(
-            model_name='invoice',
-            name='invoice_code',
-            field=models.CharField(blank=True, max_length=200, null=True),
-        ),
-    ]

payments/models.py

@@ -1,5 +1,7 @@
 from django.db import models
 from django.contrib.auth.views import get_user_model
+from django.contrib.postgres.fields import ArrayField
+from accounts.models import User
 
 User = get_user_model()
 

quiz/models.py

@@ -313,7 +313,7 @@ class Sitting(models.Model):
         if self.check_if_passed:
             return f"You have passed this quiz, congratulation"
         else:
-            return f"You failed this quiz, don't give up! try until you have passed."
+            return f"You failed this quiz, give it one chance again."
 
     def add_user_answer(self, question, guess):
         current = json.loads(self.user_answers)

templates/aside.html

@@ -0,0 +1,141 @@
+{% load static %}
+
+<style>
+	.top-side {
+		background-size: cover;
+		background-position: top center;
+	}
+</style>
+
+<div id="side-nav" draggable="true" dropzone="">
+	<div class="main-menu">
+		<div class="top-side text-center py-4" style="background-image: url({% static 'img/dotted.jpg' %});">
+			<div class="desktop-hide">
+				<div class="toggle-btn" onclick="toggleSidebar()">
+					<i class="fas fa-times"></i>
+				</div>
+			</div>
+			<h1 style="font-weight: 1000; font-size: 40px;">
+				<span class="text-warning">LOGO</span> HERE
+			</h1>
+			<p class="text-orange">
+				<i class="far fa-hand-point-right"></i>
+				{{ request.user.get_user_role }}
+			</p>
+		</div>
+		{% url 'home' as hom %} {% url 'dashboard' as dash %} {% url 'profile' as prof %}
+		{% url 'lecturer_list' as lec %}
+		{% url 'student_list' as stu %} {% url 'course_allocation_view' as cav %}
+		{% url 'programs' as pro %} {% url 'session_list' as sess %} {% url 'semester_list' as sem %}
+		{% url 'add_score' as ascore %} {% url 'grade_results' as vr %}{% url 'ass_results' as ar %}
+		{% url 'course_registration' as cr %} {% url 'edit_profile' as ep %} {% url 'change_password' as cp %}
+		{% url 'quiz_progress' as qpr %} {% url 'quiz_marking' as qce %} {% url 'user_course_list' as ucl %}
+		{% url 'admin_panel' as admin_p %}
+		<ul>
+			<li class="{% if request.path == dash %}active{% endif %}">
+				<a href="{% url 'dashboard' %}"><i class="fas fa-tachometer-alt"></i>Dashboard</a>
+			</li>
+			<li class="{% if request.path == hom %}active{% endif %}">
+				<a href="{% url 'home' %}"><i class="fas fa-home"></i>Home</a>
+			</li>
+			<li class="{% if request.path == prof %}active{% endif %}">
+				<a href="{% url 'profile' %}"><i class="fas fa-user"></i>Profile</a>
+			</li>
+
+			{% if request.user.is_superuser %}
+			<li class="{% if request.path == admin_p %}active{% endif %}">
+				<a href="{% url 'admin_panel' %}"><i class="fas fa-user-tie"></i>Admin Panel</a>
+			</li>
+			<li class="{% if request.path == lec %}active{% endif %}">
+				<a href="{% url 'lecturer_list' %}"><i class="fas fa-chalkboard-teacher"></i>Lecturers</a>
+			</li>
+			<li class="{% if request.path == stu %}active{% endif %}">
+				<a href="{% url 'student_list' %}"><i class="fas fa-user-graduate"></i>Students</a>
+			</li>
+			{% endif %}
+
+			{% if request.user.is_lecturer or request.user.is_student %}
+			<li class="{% if request.path == ucl %}active{% endif %}">
+				<a href="{% url 'user_course_list' %}"><i class="fas fa-book"></i>My Courses</a>
+			</li>
+			{% endif %}
+
+			<li class="{% if request.path == pro %}active{% endif %}">
+				<a href="{% url 'programs' %}"><i class="fas fa-book-open"></i>Programs & Courses</a>
+			</li>
+
+			{% if request.user.is_superuser or request.user.is_lecturer %}
+			<li class="{% if request.path == qce %}active{% endif %}">
+				<a href="{% url 'quiz_marking' %}"><i class="fas fa-check-double"></i>Complete Exams</a>
+			</li>
+			{% endif %}
+
+			{% if request.user.is_superuser %}
+			<li class="{% if request.path == qpr %}active{% endif %}">
+				<a href="{% url 'quiz_progress' %}"><i class="fas fa-record-vinyl"></i>Quiz Progress Rec</a>
+			</li>
+			<li class="{% if request.path == cav %}active{% endif %}">
+				<a href="{% url 'course_allocation_view' %}"><i class="fas fa-tasks"></i>Course Allocation</a>
+			</li>
+			<li class="{% if request.path == sess %}active{% endif %}">
+				<a href="{% url 'session_list' %}"><i class="fas fa-calendar-week"></i>Manage Session</a>
+			</li>
+			<li class="{% if request.path == sem %}active{% endif %}">
+				<a href="{% url 'semester_list' %}"><i class="fas fa-calendar-alt"></i>Manage Semester</a>
+			</li>
+			{% endif %}
+
+			{% if request.user.is_lecturer %}
+			<li class="{% if request.path == ascore %}active{% endif %}">
+				<a href="{% url 'add_score' %}"><i class="fas fa-table"></i>Manage Score</a>
+			</li>
+			{% endif %}
+
+			{% if request.user.is_student %}
+			<li class="{% if request.path == qpr %}active{% endif %}">
+				<a href="{% url 'quiz_progress' %}"><i class="fas fa-record-vinyl"></i>Quiz Progress Rec</a>
+			</li>
+			<li class="{% if request.path == vr %}active{% endif %}">
+				<a href="{% url 'grade_results' %}"><i class="fab fa-page4"></i>Grade Results</a>
+			</li>
+			<li class="{% if request.path == ar %}active{% endif %}">
+				<a href="{% url 'ass_results' %}"><i class="fa fa-spell-check"></i>Assesment Results</a>
+			</li>
+			<li class="{% if request.path == cr %}active{% endif %}">
+				<a href="{% url 'course_registration' %}"><i class="fas fa-plus"></i>Add & Drop Course</a>
+			</li>
+			{% endif %}
+			<br />
+			<p class="ml-3">&RightArrow; Others</p>
+			<li class="{% if request.path == ep %}active{% endif %}">
+				<a href="{% url 'edit_profile' %}"><i class="fas fa-cogs"></i>Account Setting</a>
+			</li>
+			<li class="{% if request.path == cp %}active{% endif %}">
+				<a href="{% url 'change_password' %}"><i class="fas fa-key"></i>Change Password</a>
+			</li>
+			<!-- <div class="navbar">
+                <li class="dropdown">
+                    <a class="dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown"><i class="fas fa-cogs"></i>Account Setting</a>
+                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown01">
+                        <a href="#"><i class="fas fa-pencil-alt"></i> Edit</a>
+                        <a href="#"><i class="fas fa-trash-alt"></i> Delete</a>
+                    </div>
+                </li>
+            </div> -->
+		</ul>
+	</div>
+
+	<footer class="card-footer mt-5 py-3 px-2">
+		<div class="col-12">
+			<p class="small">
+				Read our <a href="#"> Privacy </a> · <a href="#"> Terms. </a>
+				Ezod Admin &copy;
+				<script>document.write(new Date().getFullYear());</script>
+				Lorem ipsum dolor sit amet consectetur adipisicing elit.
+			</p>
+			<a href="https://ezop.herokuapp.com" class="btn btn-sm btn-primary mx-auto" target="_blank">
+				Ezod Softwares
+			</a>
+		</div>
+	</footer>
+</div>

templates/base.html

@@ -1,211 +1,65 @@
 {% load static %}
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
     <title>{% block title %}DjangoSMS{% endblock title %}</title>
 
-    <link href="{% static 'css/font-face.css' %}" rel="stylesheet" media="all">
+    <!-- <link href="{% static 'css/font-face.css' %}" rel="stylesheet" media="all"> -->
-    
+
-    <!-- <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}"> -->
+    <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}">
-    <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.css' %}">
+    <!-- <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.css' %}"> -->
     <!-- <link rel="stylesheet" href="{% static 'css/owl.carousel.min.css' %}"> -->
 
     <link rel="stylesheet" type="text/css" href="{% static 'css/all.css' %}">
 
     <!-- <link rel="stylesheet" type="text/css" href="{% static 'css/black.css' %}"> -->
     <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
-    
+
-    <script src="https://js.stripe.com/v3/"></script>
+    <!-- <script src="https://js.stripe.com/v3/"></script> -->
     {% block header %}{% endblock %}
 </head>
+
 <body>
-
+    {% include 'aside.html' %}
-    <div id="side-nav">
-        <div class="top-side" style="height: 130px;">
-            <div class="desktop-hide">
-                <div class="toggle-btn" onclick="toggleSidebar()">
-                    <i class="fas fa-times"></i>
-                </div>
-            </div>
-            <center>
-                <div class="logo">
-                    <img src="{% static 'img/you-logo-here.png' %}" alt="">
-                </div>
-                <p class="text-orange p-2"><i class="far fa-hand-point-right"></i>
-                    {{ request.user.get_user_role }}
-                </p>
-            </center>
-        </div>
-        {% url 'home' as hom %} {% url 'profile' as prof %} {% url 'lecturer_list' as lec %} 
-        {% url 'student_list' as stu %} {% url 'course_allocation_view' as cav %}  
-        {% url 'programs' as pro %} {% url 'session_list' as sess %} {% url 'semester_list' as sem %} 
-        {% url 'add_score' as ascore %} {% url 'grade_results' as vr %}{% url 'ass_results' as ar %} 
-        {% url 'course_registration' as cr %} {% url 'edit_profile' as ep %} {% url 'change_password' as cp %}
-        {% url 'quiz_progress' as qpr %} {% url 'quiz_marking' as qce %} {% url 'user_course_list' as ucl %}
-        {% url 'admin_panel' as admin_p %}
-        <ul>
-            <li class="{% if request.path == hom %}active{% endif %}">
-                <a href="{% url 'home' %}"><i class="fas fa-home"></i>Home</a>
-            </li>
-            <li class="{% if request.path == prof %}active{% endif %}">
-                <a href="{% url 'profile' %}"><i class="fas fa-user"></i>Profile</a>
-            </li>
-            
-            {% if request.user.is_superuser %}
-            <li class="{% if request.path == admin_p %}active{% endif %}">
-                <a href="{% url 'admin_panel' %}"><i class="fas fa-user-tie"></i>Admin Panel</a>
-            </li>
-            <li class="{% if request.path == lec %}active{% endif %}">
-                <a href="{% url 'lecturer_list' %}"><i class="fas fa-chalkboard-teacher"></i>Lecturers</a>
-            </li>
-            <li class="{% if request.path == stu %}active{% endif %}">
-                <a href="{% url 'student_list' %}"><i class="fas fa-user-graduate"></i>Students</a>
-            </li>
-            {% endif %}
-
-            {% if request.user.is_lecturer or request.user.is_student %}
-            <li class="{% if request.path == ucl %}active{% endif %}">
-                <a href="{% url 'user_course_list' %}"><i class="fas fa-book"></i>My Courses</a>
-            </li>
-            {% endif %}
-
-            <li class="{% if request.path == pro %}active{% endif %}">
-                <a href="{% url 'programs' %}"><i class="fas fa-book-open"></i>All Programs & Courses</a>
-            </li>
-
-            {% if request.user.is_superuser or request.user.is_lecturer %}
-            <li class="{% if request.path == qce %}active{% endif %}">
-                <a href="{% url 'quiz_marking' %}"><i class="fas fa-check-double"></i>Complete Exams</a>
-            </li>
-            {% endif %}
-
-            {% if request.user.is_superuser %}
-            <li class="{% if request.path == qpr %}active{% endif %}">
-                <a href="{% url 'quiz_progress' %}"><i class="fas fa-record-vinyl"></i>Quiz Progress Rec</a>
-            </li>
-            <li class="{% if request.path == cav %}active{% endif %}">
-                <a href="{% url 'course_allocation_view' %}"><i class="fas fa-tasks"></i>Course Allocation</a>
-            </li>
-            <li class="{% if request.path == sess %}active{% endif %}">
-                <a href="{% url 'session_list' %}"><i class="fas fa-calendar-week"></i>Manage Session</a>
-            </li>
-            <li class="{% if request.path == sem %}active{% endif %}">
-                <a href="{% url 'semester_list' %}"><i class="fas fa-calendar-alt"></i>Manage Semester</a>
-            </li>
-            {% endif %}
-
-            {% if request.user.is_lecturer %}
-            <li class="{% if request.path == ascore %}active{% endif %}">
-                <a href="{% url 'add_score' %}"><i class="fas fa-table"></i>Manage Score</a>
-            </li>
-            {% endif %}
-
-            {% if request.user.is_student %}
-            <li class="{% if request.path == qpr %}active{% endif %}">
-                <a href="{% url 'quiz_progress' %}"><i class="fas fa-record-vinyl"></i>Quiz Progress Rec</a>
-            </li>
-            <li class="{% if request.path == vr %}active{% endif %}">
-                <a href="{% url 'grade_results' %}"><i class="fab fa-page4"></i>Grade Results</a>
-            </li>
-            <li class="{% if request.path == ar %}active{% endif %}">
-                <a href="{% url 'ass_results' %}"><i class="fa fa-spell-check"></i>Assesment Results</a>
-            </li>
-            <li class="{% if request.path == cr %}active{% endif %}">
-                <a href="{% url 'course_registration' %}"><i class="fas fa-plus"></i>Add & Drop Course</a>
-            </li>
-            {% endif %}
-            <br/>
-            <p class="ml-3">others</p>
-            <hr/>
-            <li class="{% if request.path == ep %}active{% endif %}">
-                <a href="{% url 'edit_profile' %}"><i class="fas fa-cogs"></i>Account Setting</a>
-            </li>
-            <li class="{% if request.path == cp %}active{% endif %}">
-                <a href="{% url 'change_password' %}"><i class="fas fa-key"></i>Change Password</a>
-            </li>
-            <!-- <div class="navbar">
-                <li class="dropdown">
-                    <a class="dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown"><i class="fas fa-cogs"></i>Account Setting</a>
-                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown01">
-                        <a href="#"><i class="fas fa-pencil-alt"></i> Edit</a>
-                        <a href="#"><i class="fas fa-trash-alt"></i> Delete</a>
-                    </div>
-                </li>
-            </div> -->
-        </ul>
-    </div>
     <div id="main">
-        <div id="top-navbar">
+        {% include 'navbar.html' %}
-            <div class="container">
-                <div class="nav-wrapper">
-                    <div class="toggle-btn" onclick="toggleSidebar()">
-                        <i class="fas fa-bars"></i>
-                    </div>
 
-                    <form class="form-header" action="{% url 'query' %}" method="GET">
+        <div class="container-fluid" id="main-content">
-                        <input class="au-input au-input--xl" type="text" name="q" value="{{ request.GET.q }}" placeholder="Search All... #course, #program, #Quiz, #News, #Events" required/>
-                        <button class="au-btn--submit" type="submit">
-                            <i class="fas fa-search"></i>
-                        </button>
-                    </form>
-
-                    <div class="dropdown">
-                        <button class="btn btn-sm btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                        <img class="profile-pic" src="{{ request.user.picture.url }}">
-                            {{ request.user.get_full_name|truncatechars:15 }}
-                        </button>
-                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                          <p class="container text-muted-xs text-center"> Last login: {{ request.user.last_login|date }}</p>
-
-                          {% if request.user.is_lecturer or request.user.is_student %}
-                          <a class="dropdown-item" href="{% url 'user_course_list' %}"><i class="fas fa-book"></i>My Courses</a>
-                          {% endif %}
-
-                          {% if request.user.is_superuser %}
-                          <a class="dropdown-item" href="{% url 'admin_panel' %}"><i class="fas fa-user-tie"></i>Admin Panel</a>
-                          {% endif %}
-
-                          <a class="dropdown-item" href="{% url 'profile' %}"><i class="fas fa-user"></i>Profile</a>
-                          <a class="dropdown-item" href="{% url 'edit_profile' %}"><i class="fas fa-cogs"></i>Setting</a>
-                          <hr>
-                          <div  style="display: flex; justify-content: center; align-items: center;">
-                              <a class="btn btn-secondary" href="{% url 'logout' %}">
-                                <i class="fas fa-sign-out-alt"></i> Signout
-                              </a>
-                          </div>
-                        </div>
-                    </div>
-
-                </div>
-            </div>
-        </div>
-        
-        <div class="container">
             {% block content %}{% endblock content %}
         </div>
 
-        <footer class="card-footer mt-5">
-            <div class="container-fluid py-5">
-                <div class="text-center">
-                    Copyright &copy; <script>document.write(new Date().getFullYear());</script> All rights reserved | Powered by <a href="https://ezop.herokuapp.com" class="btn-sm btn-secondary" target="_blank">Ezod</a>
-                </div>
-            </div>
-        </footer>
-
     </div>
-    
+
-    <script type="text/javascript" src="{% static 'js/jquery-3.5.1.slim.min.js' %}"></script>
+    <script type="text/javascript" src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
     <script type="text/javascript" src="{% static 'js/popper.min.js' %}"></script>
     <script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
-    
+
     <script type="text/javascript" src="{% static 'js/main.js' %}"></script>
 
+    <script>
+        $(document).ready(function () {
+            $('.au-input').focus(function () {
+                $('#top-navbar').attr('class', 'dim');
+                $('#side-nav').css('pointer-events', 'none');
+                $('#main-content').css('pointer-events', 'none');
+            });
+            $('.au-input').focusout(function () {
+                $('#top-navbar').removeAttr('class');
+                $('#side-nav').css('pointer-events', 'auto');
+                $('#main-content').css('pointer-events', 'auto');
+            });
+        })
+    </script>
+
     {% block js %}
     {% endblock js %}
 </body>
+
 </html>
 
 <!-- {% if request.user.is_superuser %}
@@ -242,4 +96,4 @@
             </a>
         </div>
     </div>
-</div> -->
+</div> -->

templates/navbar.html

@@ -0,0 +1,50 @@
+<div id="top-navbar">
+	<div class="container">
+		<div class="nav-wrapper">
+
+			<div class="toggle-btn" onclick="toggleSidebar()">
+				<i class="fas fa-bars"></i>
+			</div>
+
+			<form class="form-header" action="{% url 'query' %}" method="GET">
+				<input class="au-input au-input--xl" type="text" name="q" value="{{ request.GET.q }}"
+					placeholder="Search All... #course, #program, #Quiz, #News, #Events" required />
+				<button class="au-btn--submit" type="submit">
+					<i class="fas fa-search"></i>
+				</button>
+			</form>
+
+			<div class="dropdown">
+				<button class="btn btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
+					aria-haspopup="true" aria-expanded="false">
+					<img class="profile-pic" src="{{ request.user.picture.url }}">
+					{{ request.user.get_full_name|truncatechars:15 }}
+				</button>
+				<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+					<p class="container text-muted-xs text-center">
+						Last login: {{ request.user.last_login|date }}</p>
+
+					{% if request.user.is_lecturer or request.user.is_student %}
+					<a class="dropdown-item" href="{% url 'user_course_list' %}"><i class="fas fa-book"></i>My
+						Courses</a>
+					{% endif %}
+
+					{% if request.user.is_superuser %}
+					<a class="dropdown-item" href="{% url 'admin_panel' %}"><i class="fas fa-user-tie"></i>Admin
+						Panel</a>
+					{% endif %}
+
+					<a class="dropdown-item" href="{% url 'profile' %}"><i class="fas fa-user"></i>Profile</a>
+					<a class="dropdown-item" href="{% url 'edit_profile' %}"><i class="fas fa-cogs"></i>Setting</a>
+					<hr>
+					<div style="display: flex; justify-content: center; align-items: center;">
+						<a class="btn btn-secondary" href="{% url 'logout' %}">
+							<i class="fas fa-sign-out-alt"></i> Signout
+						</a>
+					</div>
+				</div>
+			</div>
+
+		</div>
+	</div>
+</div>

templates/privacy.html

@@ -0,0 +1,69 @@
+<!-- Privacy Modal -->
+<div class="modal fade" id="privacy-policy" tabindex="-1" aria-labelledby="privacyPolicy" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-scrollable">
+    <div class="modal-content">
+        <div class="modal-header">
+        <h5 class="modal-title" id="privacyPolicy">Privacy Policy</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+        <p>
+            What follows is just some placeholder text for this modal dialog. You just gotta ignite the light 
+            and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with 
+            your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.
+        </p>
+        <p>
+            I can't sleep let's run away and don't ever look back, don't ever look back. I can't sleep let's run 
+            away and don't ever look back, don't ever look back. Yes, we make angels cry, raining down on earth 
+            from up above. I'm walking on air (tonight). Let you put your hands on me in my skin-tight jeans. 
+            Stinging like a bee I earned my stripes. I went from zero, to my own hero. Even brighter than the 
+            moon, moon, moon. Make 'em go, 'Aah, aah, aah' as you shoot across the sky-y-y! Why don't you let me 
+            stop by?
+        </p>
+        <p>
+            Boom, boom, boom. Never made me blink one time. Yeah, you're lucky if you're on her plane. 
+            Talk about our future like we had a clue. Oh my God no exaggeration. You're original, cannot be replaced. 
+            The girl's a freak, she drive a jeep in Laguna Beach. It's no big deal, it's no big deal, 
+            it's no big deal. In another life I would make you stay. I'm ma get your heart racing in my 
+            skin-tight jeans. I wanna walk on your wave length and be there when you vibrate Never made me 
+            blink one time.
+        </p>
+        <p>
+            We'd keep all our promises be us against the world. In another life I would be your girl. We can 
+            dance, until we die, you and I, will be young forever. And on my 18th Birthday we got matching 
+            tattoos. So open up your heart and just let it begin. 'Cause she's the muse and the artist. 
+            She eats your heart out. Like Jeffrey Dahmer (woo). Pop your confetti. (This is how we do) I 
+            know one spark will shock the world, yeah yeah. If you only knew what the future holds.
+        </p>
+        <p>
+            Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. 
+            So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever 
+            feel already buried deep six feet under? It's time to bring out the big balloons. 
+            You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, 
+            every move is magic.
+        </p>
+        <p> 
+            We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. 
+            Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep 
+            in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.
+        </p>
+        <p>
+            Before you met me I was alright but things were kinda heavy. Peach-pink lips, yeah, everybody stares. 
+            This is no big deal. Calling out my name. I could have rewrite your addiction. She's got that, je ne 
+            sais quoi, you know it. Heavy is the head that wears the crown. 'Cause, baby, you're a firework. 
+            Like thunder gonna shake the ground.
+        </p>
+        <p>
+            Just own the night like the 4th of July! I’m gon’ put her in a coma. What you're waiting for, it's 
+            time for you to show it off. Can't replace you with a million rings. You open my eyes and I'm ready 
+            to go, lead me into the light. And here you are. I’m gon’ put her in a coma. Come on, let your 
+            colours burst. So cover your eyes, I have a surprise. As I march alone to a different beat. 
+            Glitter all over the room pink flamingos in the pool.
+        </p>
+        </div>
+        <div class="modal-footer">
+        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Understood</button>
+        </div>
+    </div>
+    </div>
+</div>

templates/term.html

@@ -0,0 +1,69 @@
+<!-- Term Modal -->
+<div class="modal fade" id="term-of-service" tabindex="-1" aria-labelledby="termOfService" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-scrollable">
+    <div class="modal-content">
+        <div class="modal-header">
+        <h5 class="modal-title" id="termOfService">Terms of Service</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+        <p>
+            What follows is just some placeholder text for this modal dialog. You just gotta ignite the light 
+            and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with 
+            your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.
+        </p>
+        <p>
+            I can't sleep let's run away and don't ever look back, don't ever look back. I can't sleep let's run 
+            away and don't ever look back, don't ever look back. Yes, we make angels cry, raining down on earth 
+            from up above. I'm walking on air (tonight). Let you put your hands on me in my skin-tight jeans. 
+            Stinging like a bee I earned my stripes. I went from zero, to my own hero. Even brighter than the 
+            moon, moon, moon. Make 'em go, 'Aah, aah, aah' as you shoot across the sky-y-y! Why don't you let me 
+            stop by?
+        </p>
+        <p>
+            Boom, boom, boom. Never made me blink one time. Yeah, you're lucky if you're on her plane. 
+            Talk about our future like we had a clue. Oh my God no exaggeration. You're original, cannot be replaced. 
+            The girl's a freak, she drive a jeep in Laguna Beach. It's no big deal, it's no big deal, 
+            it's no big deal. In another life I would make you stay. I'm ma get your heart racing in my 
+            skin-tight jeans. I wanna walk on your wave length and be there when you vibrate Never made me 
+            blink one time.
+        </p>
+        <p>
+            We'd keep all our promises be us against the world. In another life I would be your girl. We can 
+            dance, until we die, you and I, will be young forever. And on my 18th Birthday we got matching 
+            tattoos. So open up your heart and just let it begin. 'Cause she's the muse and the artist. 
+            She eats your heart out. Like Jeffrey Dahmer (woo). Pop your confetti. (This is how we do) I 
+            know one spark will shock the world, yeah yeah. If you only knew what the future holds.
+        </p>
+        <p>
+            Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. 
+            So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever 
+            feel already buried deep six feet under? It's time to bring out the big balloons. 
+            You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, 
+            every move is magic.
+        </p>
+        <p> 
+            We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. 
+            Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep 
+            in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.
+        </p>
+        <p>
+            Before you met me I was alright but things were kinda heavy. Peach-pink lips, yeah, everybody stares. 
+            This is no big deal. Calling out my name. I could have rewrite your addiction. She's got that, je ne 
+            sais quoi, you know it. Heavy is the head that wears the crown. 'Cause, baby, you're a firework. 
+            Like thunder gonna shake the ground.
+        </p>
+        <p>
+            Just own the night like the 4th of July! I’m gon’ put her in a coma. What you're waiting for, it's 
+            time for you to show it off. Can't replace you with a million rings. You open my eyes and I'm ready 
+            to go, lead me into the light. And here you are. I’m gon’ put her in a coma. Come on, let your 
+            colours burst. So cover your eyes, I have a surprise. As I march alone to a different beat. 
+            Glitter all over the room pink flamingos in the pool.
+        </p>
+        </div>
+        <div class="modal-footer">
+        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Understood</button>
+        </div>
+    </div>
+    </div>
+</div>