Committing the integrated project structure

AttendanceApp/admin.py

+from django.contrib import admin
+
+# Register your models here.

AttendanceApp/apps.py

+from django.apps import AppConfig
+
+
+class AttendanceappConfig(AppConfig):
+    name = 'AttendanceApp'

AttendanceApp/models.py

+from django.db import models
+
+# Create your models here.

AttendanceApp/tests.py

+from django.test import TestCase
+
+# Create your tests here.

AttendanceApp/urls.py

+from django.urls import path, re_path, include
+from django.conf.urls import url
+from . import views
+
+urlpatterns = [
+    path('', views.first)
+]

AttendanceApp/views.py

+from django.shortcuts import render
+from django.http import HttpResponse
+
+
+# Create your views here.
+def first(request):
+    return HttpResponse('<h1>Hello Attendance App</h1>')

FirstApp/ImageOperations.py

+import cv2
+import os
+import re
+import base64
+import shutil
+
+
+def saveImage(response):
+
+
+    dataUrlPattern = re.compile('data:image/(png|jpeg);base64,(.*)$')
+    base_path = os.path.join(os.path.abspath(__file__))
+    root_dir = os.path.dirname(os.path.dirname(base_path))
+    new_dir_name = "static\\FirstApp\\images\\{}".format(response["imageName"])
+    new_dir = os.path.join(root_dir, new_dir_name)
+
+    if (os.path.isdir(new_dir)):
+        # delete the previous directory
+        shutil.rmtree(new_dir)
+
+    # create the new directory
+    os.mkdir(new_dir)
+
+
+    count = 0
+
+    for url in response["ImageURLS"]:
+        url = dataUrlPattern.match(url).group(2)
+        encoded = url.encode()
+        image = base64.b64decode(encoded)
+        imageName = response["imageName"] + '_img_' + format(count) + '.png'
+
+        new_file = os.path.join(new_dir, imageName)
+
+        count += 1
+
+        # saving the images (method 1)
+        with open(new_file, "wb") as f:
+            f.write(image)
+
+    # respond 'yes' to the command line prompt
+    p = os.popen('python manage.py collectstatic', "w")
+    p.write("yes")
+
+
+
+

FirstApp/MongoModels.py

+from djongo import models
+from datetime import datetime
+
+# Lecture model
+class Lecture(models.Model):
+    lecture_id = models.CharField(max_length=10)
+    date = models.DateTimeField(auto_created=True, default=None)
+
+
+
+# Faculty model
+class Faculty(models.Model):
+    faculty_id = models.CharField(max_length=10)
+    name = models.CharField(max_length=100)
+
+    def __str__(self):
+        return self.faculty_id
+
+# Subjects model
+class Subject(models.Model):
+    subject_code = models.TextField()
+    name = models.TextField()
+    year = models.IntegerField()
+    faculty = models.ForeignKey(Faculty, on_delete=models.CASCADE, default={})
+
+    def __str__(self):
+        return self.subject_code
+
+
+# Lecturer model
+class Lecturer(models.Model):
+    lecturer_id = models.CharField(max_length=7)
+    fname = models.TextField()
+    lname = models.TextField()
+    email = models.EmailField()
+    telephone = models.CharField(max_length=10)
+    faculty = models.ForeignKey(Faculty, on_delete=models.CASCADE)
+
+    def __str__(self):
+        return self.lecturer_id
+
+
+# Lecturer_subject model
+class LecturerSubject(models.Model):
+    lec_subject_id = models.CharField(max_length=10)
+    lecturer_id = models.ForeignKey(Lecturer, on_delete=models.CASCADE)
+    subjects = models.ManyToManyField(to=Subject)
+
+    def __str__(self):
+        return self.lec_subject_id
+
+
+# lecturer credential details
+class LecturerCredentials(models.Model):
+    username = models.ForeignKey(Lecturer, on_delete=models.CASCADE)
+    password = models.CharField(max_length=15)
+
+
+# timetable based on daily basis
+class DailyTimeTable(models.Model):
+    slot_id = models.AutoField(auto_created=True, primary_key=True)
+    start_time = models.TimeField()
+    end_time = models.TimeField()
+    subject = models.ForeignKey(Subject, on_delete=models.CASCADE)
+    lecturer = models.ForeignKey(Lecturer, on_delete=models.CASCADE)
+    location = models.CharField(max_length=10)
+
+    def __str__(self):
+        return self.location
+
+    class Meta:
+        abstract = True
+
+
+# Timetable based on day basis
+class DateTimeTable(models.Model):
+    date = models.DateField()
+    time_slots = models.ArrayField(
+        model_container=DailyTimeTable
+    )
+
+    def __bool__(self):
+        return True if self.date is not None else False
+
+    class Meta:
+        abstract = True
+
+
+# faculty timetable
+class FacultyTimetable(models.Model):
+    timetable_id = models.CharField(max_length=10)
+    faculty = models.ForeignKey(Faculty, on_delete=models.CASCADE)
+    timetable = models.ArrayField(DateTimeTable)
+
+    def __str__(self):
+        return self.timetable_id
+
+
+# lecture video table
+class LectureVideo(models.Model):
+    lecture_video_id = models.CharField(max_length=10)
+    date = models.DateField()
+    video_name = models.CharField(max_length=50)
+    video_length = models.DurationField()
+    lecturer = models.ForeignKey(Lecturer, on_delete=models.CASCADE, default=0)
+    subject = models.ForeignKey(Subject, on_delete=models.CASCADE, default=0)
+
+    models.UniqueConstraint(fields=[date], name='date_unique')
+
+    def __str__(self):
+        return self.lecture_video_id
+
+
+# lecture activity table
+class LectureActivity(models.Model):
+    lecture_activity_id = models.CharField(max_length=10)
+    lecture_video_id = models.ForeignKey(LectureVideo, on_delete=models.CASCADE)
+    talking_perct = models.DecimalField(default=0.0, max_digits=3, decimal_places=1)
+    listening_perct = models.DecimalField(default=0.0, max_digits=3, decimal_places=1)
+    writing_perct = models.DecimalField(default=0.0, max_digits=3, decimal_places=1)
+    phone_perct = models.DecimalField(default=0.0, max_digits=3, decimal_places=1)
+
+    def __str__(self):
+        return self.lecture_activity_id
+
+
+# EMOTIONS section
+# Lecture emotion report
+class LectureEmotionReport(models.Model):
+    lecture_emotion_id = models.CharField(max_length=10)
+    lecture_video_id = models.ForeignKey(LectureVideo, on_delete=models.CASCADE)
+    happy_perct = models.DecimalField(default=0.0, max_digits=3, decimal_places=1)
+    sad_perct = models.DecimalField(default=0.0, max_digits=3, decimal_places=1)
+    angry_perct = models.DecimalField(default=0.0, max_digits=3, decimal_places=1)
+    disgust_perct = models.DecimalField(default=0.0, max_digits=3, decimal_places=1)
+    surprise_perct = models.DecimalField(default=0.0, max_digits=3, decimal_places=1)
+    neutral_perct = models.DecimalField(default=0.0, max_digits=3, decimal_places=1)
+
+
+    def __str__(self):
+        return self.lecture_emotion_id
+
+
+# POSE section
+# lecture pose estimation
+class LecturePoseEstimation(models.Model):
+    lecture_pose_id = models.CharField(max_length=10)
+    lecture_video_id = models.ForeignKey(LectureVideo, on_delete=models.CASCADE)
\ No newline at end of file

FirstApp/admin.py

+from django.contrib import admin
+from .MongoModels import *
+from . models import Teachers, RegisterUser
+
+# registering the lecture emotions model
+admin.site.register(LectureEmotionReport)
+admin.site.register(Lecturer)
+admin.site.register(Faculty)
+admin.site.register(Subject)
+admin.site.register(LecturerSubject)
+admin.site.register(LecturerCredentials)
+admin.site.register(FacultyTimetable)
+admin.site.register(LectureVideo)
+admin.site.register(LectureActivity)
\ No newline at end of file

FirstApp/api.py

+from rest_framework.permissions import IsAuthenticated, IsAdminUser
+from rest_framework.authentication import SessionAuthentication, BasicAuthentication
+
+from . MongoModels import *
+from rest_framework.views import *
+from . ImageOperations import saveImage
+from . logic import head_pose_estimation
+from . logic import video_extraction
+from . logic import activity_recognition as ar
+from . logic import posenet_calculation as pc
+from . import emotion_detector as ed
+from . logic import id_generator as ig
+from . models import Teachers, Video, VideoMeta, RegisterUser
+from . MongoModels import *
+from . serializers import *
+
+# to create images
+class ImageViewSet(APIView):
+
+    def post(self, request):
+        saveImage(request.data)
+        return Response({"response": "successful"})
+
+
+# to perform pose estimation on images
+class GazeEstimationViewSet(APIView):
+
+    def post(self, request):
+        response = head_pose_estimation.estimatePose(request.data)
+        return Response({"response": response})
+
+
+# to perform video extraction
+class VideoExtractionViewSet(APIView):
+
+    def get(self, request):
+        response = video_extraction.getExtractedFrames(request.query_params)
+        return Response({"response": response})
+
+    def post(self, request):
+        response = video_extraction.VideoExtractor(request.data)
+        return Response({"response": response})
+
+# lecture emotions view set
+class LectureEmotionViewSet(APIView):
+
+    def get(self, request):
+        emotions = LectureEmotionReport.objects.all().order_by('lecture_id')
+        serializer = LectureEmotionSerializer(emotions, many=True)
+        return Response({"response": serializer.data})
+
+    def post(self, request):
+        LectureEmotionReport(
+            lecture_id=request.data["lecture_id"],
+            happy_perct=request.data["happy_perct"],
+            sad_perct=request.data["sad_perct"],
+            angry_perct=request.data["angry_perct"],
+            surprise_perct=request.data["surprise_perct"],
+            disgust_perct=request.data["disgust_perct"],
+            neutral_perct=request.data["neutral_perct"]
+        ).save()
+        return Response({"response": request.data})
+
+
+class LectureViewSet(APIView):
+
+    def get(self, request):
+        lectures = Lecture.objects.all().order_by('date')
+        serializer = LectureSerializer(lectures, many=True)
+        return Response(serializer.data)
+
+    def post(self, request):
+        Lecture(
+            lecture_id=request.data['lecture_id']
+        ).save()
+        return Response({"response": request})
+
+# API for Faculties
+class FacultyViewSet(APIView):
+
+    def get(self, request):
+        faculties = Faculty.objects.all().order_by('faculty_id')
+        serializer = FacultySerializer(faculties, many=True)
+        return Response(serializer.data)
+
+    def post(self, request):
+        Faculty(
+            faculty_id=request.data['faculty_id'],
+            name=request.data['name']
+        ).save()
+        return Response(status=201, data={"response": "successfully added"})
+
+# API for subjects
+class SubjectViewSet(APIView):
+
+    def get(self, request):
+        subjects = Subject.objects.all().order_by('subject_code')
+        serializer = SubjectSerializer(subjects, many=True)
+        return Response(serializer.data)
+
+    def post(self, request):
+
+        serializer = SubjectSerializer(data=request.data)
+        if serializer.is_valid(raise_exception=ValueError):
+            serializer.create(validated_data=request.data)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+
+        return Response(serializer.error_messages,
+                        status=status.HTTP_400_BAD_REQUEST)
+
+
+# API for lecturers
+class LecturerViewSet(APIView):
+
+    def get(self, request):
+        lecturers = Lecturer.objects.all().order_by('lecturer_id')
+        serializer = LecturerSerializer(lecturers, many=True)
+        return Response(serializer.data)
+
+    def post(self, request):
+
+        serializer = LecturerSerializer(data=request.data)
+        if serializer.is_valid(raise_exception=ValueError):
+            serializer.create(validated_data=request.data)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+
+        return Response(serializer.error_messages,
+                        status=status.HTTP_400_BAD_REQUEST)
+
+
+# API for lecturers and their subjects
+class LecturerSubjectViewSet(APIView):
+
+    def get(self, request):
+        lecturer_subjects = LecturerSubject.objects.all().order_by('lec_subject_id')
+        serializer = LecturerSubjectSerializer(lecturer_subjects, many=True)
+        return Response(serializer.data)
+
+    def post(self, request):
+
+        serializer = LecturerSubjectSerializer(data=request.data)
+        if serializer.is_valid(raise_exception=ValueError):
+            serializer.create(validated_data=request.data)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+
+        return Response(serializer.error_messages,
+                        status=status.HTTP_400_BAD_REQUEST)
+
+
+# API for timetables
+class FacultyTimetableViewSet(APIView):
+
+    def get(self, request):
+        timetable = FacultyTimetable.objects.all().filter()
+        serializer = FacultyTimetableSerializer(timetable, many=True)
+        return Response(serializer.data)
+
+    def post(self, request):
+
+        serializer = FacultyTimetableSerializer(data=request.data)
+        if serializer.is_valid(raise_exception=ValueError):
+            serializer.create(validated_data=request.data)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+
+        return Response(serializer.error_messages,
+                        status=status.HTTP_400_BAD_REQUEST)
+
+
+# API for lecture videos
+class LectureVideoViewSet(APIView):
+
+    def get(self, request):
+        lecture_videos = LectureVideo.objects.all()
+        serializer = LectureVideoSerializer(lecture_videos, many=True)
+        return Response(serializer.data)
+
+    def post(self, request):
+
+        serializer = LectureVideoSerializer(data=request.data)
+        if serializer.is_valid(raise_exception=ValueError):
+            serializer.create(validated_data=request.data)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+
+        return Response(serializer.error_messages,
+                        status=status.HTTP_400_BAD_REQUEST)
+
+
+class GetLectureVideoViewSet(APIView):
+
+    def get(self, request):
+        lecturer = request.query_params.get('lecturer')
+        date = request.query_params.get('date')
+        index = int(request.query_params.get('index'))
+        lecturer_video = LectureVideo.objects.filter(lecturer_id=lecturer, date=date)
+        serializer = LectureVideoSerializer(lecturer_video, many=True)
+
+        lecture_video_id = serializer.data[index]['lecture_video_id']
+        print('lecture video id: ', lecture_video_id)
+        activities = LectureActivity.objects.filter(lecture_video_id__lecture_video_id=lecture_video_id)
+        isActivityFound = (len(activities) > 0)
+
+        return Response({
+            "response": serializer.data[index],
+            "isActivityFound": isActivityFound
+        })
+
+
+# ACTIVITY
+# API for lecture activities
+class LectureActivityViewSet(APIView):
+
+    def get(self, request):
+        lecture_activities = LectureActivity.objects.all()
+        serializer = LectureActivitySerializer(lecture_activities, many=True)
+        return Response(serializer.data)
+
+    def post(self, request):
+
+        serializer = LectureActivitySerializer(data=request.data)
+        if serializer.is_valid(raise_exception=ValueError):
+            serializer.create(validated_data=request.data)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+
+        return Response(serializer.error_messages,
+                        status=status.HTTP_400_BAD_REQUEST)
+
+
+# API to retrieve one lecture activity
+class GetLectureActivityViewSet(APIView):
+
+    def get(self, request):
+        lecture_video_id = request.query_params.get('lecture_video_id')
+        lecture_video_name = request.query_params.get('lecture_video_name')
+        # retrieve the extracted frames
+        extracted = ar.getExtractedFrames(lecture_video_name)
+
+        lecture_activities = LectureActivity.objects.filter(lecture_video_id__lecture_video_id=lecture_video_id)
+        serializer = LectureActivitySerializer(lecture_activities, many=True)
+
+        return Response({
+            "response": serializer.data,
+            "extracted": extracted
+        })
+
+
+# API to process lecture activity
+class LectureActivityProcess(APIView):
+
+    def get(self, request):
+        video_name = request.query_params.get('lecture_video_name')
+        video_id = request.query_params.get('lecture_video_id')
+        percentages = ar.activity_recognition(video_name)
+        self.activity(video_id, percentages)
+        return Response({"response": True})
+
+    def post(self, request):
+        pass
+
+    def activity(self, lec_video_id, percentages):
+        lec_video = LectureVideo.objects.get(lecture_video_id=lec_video_id)
+        last_lec_activity = LectureActivity.objects.order_by('lecture_activity_id').last()
+        lec_video_serializer = LectureVideoSerializer(lec_video, many=True)
+        new_lecture_activity_id = ig.generate_new_id(last_lec_activity.lecture_activity_id)
+
+        # creating a new lecture activity
+        LectureActivity(
+            lecture_activity_id=new_lecture_activity_id,
+            lecture_video_id=lec_video,
+            talking_perct=percentages['talking_perct'],
+            phone_perct=percentages['phone_perct'],
+            listening_perct=percentages['listening_perct'],
+            writing_perct=percentages['writing_perct']
+        ).save()
+
+
+class GetLectureActivityDetections(APIView):
+
+    def get(self, request):
+        video_name = request.query_params.get('video_name')
+        frame_name = request.query_params.get('frame_name')
+        detections = ar.get_detections(video_name, frame_name)
+
+        return Response({
+            "detections": detections
+        })
+
+
+# the API class for getting student detections for a label
+class GetLectureActvityDetectionsForLabel(APIView):
+
+    def get(self, request):
+        video_name = request.query_params.get('video_name')
+        label = request.query_params.get('label')
+        labelled_detections, detected_people = ar.get_detections_for_label(video_name, label)
+
+        return Response({
+            "response": labelled_detections,
+            "people": detected_people
+        })
+
+
+# the API class for getting students activity evaluations
+class GetLectureActivityStudentEvaluation(APIView):
+
+    def get(self, request):
+        video_name = request.query_params.get('video_name')
+        labelled_detections, detected_people = ar.get_student_activity_evaluation(video_name)
+
+        return Response({
+            "response": labelled_detections,
+            "people": detected_people
+        })
+
+
+# the API class to retrieve individual student evaluation (activity)
+class GetLectureActivityIndividualStudentEvaluation(APIView):
+
+    def get(self, request):
+        video_name = request.query_params.get('video_name')
+        student_name = request.query_params.get('student_name')
+        meta_data = ar.get_individual_student_evaluation(video_name, student_name)
+
+        return Response({
+            "response": meta_data
+        })
+
+
+# API to retrieve activity detections for frames
+class GetLectureActivityRecognitionsForFrames(APIView):
+
+    def get(self, request):
+        video_name = request.query_params.get('video_name')
+        frame_detections = ar.get_frame_activity_recognition(video_name)
+
+        return Response({
+            "response": frame_detections
+        })
+
+
+
+
+###### EMOTIONS section #####
+class GetLectureEmotionAvailability(APIView):
+
+    def get(self, request):
+        lecturer = request.query_params.get('lecturer')
+        date = request.query_params.get('date')
+        index = int(request.query_params.get('index'))
+        lecturer_emotion = LectureVideo.objects.filter(lecturer_id=lecturer, date=date)
+        serializer = LectureVideoSerializer(lecturer_emotion, many=True)
+
+        lecture_video_id = serializer.data[index]['lecture_video_id']
+        activities = LectureEmotionReport.objects.filter(lecture_video_id__lecture_video_id=lecture_video_id)
+        isActivityFound = (len(activities) > 0)
+
+        return Response({
+            "response": serializer.data[index],
+            "isActivityFound": isActivityFound
+        })
+
+# to process lecture emotions for a lecture video
+class LectureEmotionProcess(APIView):
+
+    def get(self, request):
+        video_name = request.query_params.get('lecture_video_name')
+        video_id = request.query_params.get('lecture_video_id')
+        percentages = ed.detect_emotion(video_name)
+        percentages.calcPercentages()
+        self.save_emotion_report(video_id, percentages)
+        return Response({"response": True})
+
+    def post(self, request):
+        pass
+
+    def save_emotion_report(self, lec_video_id, percentages):
+        lec_video = LectureVideo.objects.get(lecture_video_id=lec_video_id)
+        lec_video_serializer = LectureVideoSerializer(lec_video, many=True)
+        last_lec_emotion = LectureEmotionReport.objects.order_by('lecture_emotion_id').last()
+        new_lecture_emotion_id = ig.generate_new_id(last_lec_emotion.lecture_emotion_id)
+
+        # creating a new lecture emotion report
+        LectureEmotionReport(
+            lecture_emotion_id=new_lecture_emotion_id,
+            lecture_video_id=lec_video,
+            happy_perct=percentages.happy_perct,
+            sad_perct=percentages.sad_perct,
+            angry_perct=percentages.angry_perct,
+            neutral_perct=percentages.neutral_perct,
+            surprise_perct=percentages.surprise_perct
+        ).save()
+
+
+# to get a lecture emotion report
+class GetLectureEmotionReportViewSet(APIView):
+
+    def get(self, request):
+        lecture_video_id = request.query_params.get('lecture_video_id')
+        lecture_video_name = request.query_params.get('lecture_video_name')
+        # retrieve the extracted frames
+        extracted = ar.getExtractedFrames(lecture_video_name)
+
+        lecture_emotions = LectureEmotionReport.objects.filter(lecture_video_id__lecture_video_id=lecture_video_id)
+        serializer = LectureEmotionSerializer(lecture_emotions, many=True)
+
+        print(len(serializer.data))
+
+        return Response({
+            "response": serializer.data,
+            "extracted": extracted
+        })
+
+
+# the API class for getting students activity evaluations (emotions)
+class GetLectureEmotionStudentEvaluations(APIView):
+
+    def get(self, request):
+        video_name = request.query_params.get('video_name')
+        labelled_detections, detected_people = ed.get_student_emotion_evaluations(video_name)
+
+        return Response({
+            "response": labelled_detections,
+            "people": detected_people
+        })
+
+
+# the API class to retrieve individual student evaluation (emotion)
+class GetLectureEmotionIndividualStudentEvaluation(APIView):
+
+    def get(self, request):
+        video_name = request.query_params.get('video_name')
+        student_name = request.query_params.get('student_name')
+        meta_data = ed.get_individual_student_evaluation(video_name, student_name)
+        serialized = VideoMetaSerializer(meta_data)
+
+        return Response({
+            "response": serialized.data
+        })
+
+
+# API to retrieve emotion detections for frames
+class GetLectureEmotionRecognitionsForFrames(APIView):
+
+    def get(self, request):
+        video_name = request.query_params.get('video_name')
+        frame_detections = ed.get_frame_emotion_recognition(video_name)
+
+        return Response({
+            "response": frame_detections
+        })
+
+
+##### POSE #####
+class GetLectureVideoForPose(APIView):
+
+    def get(self, request):
+        lecturer = request.query_params.get('lecturer')
+        date = request.query_params.get('date')
+        lecturer_video = LectureVideo.objects.filter(lecturer_id=lecturer, date=date)
+        serializer = LectureVideoSerializer(lecturer_video, many=True)
+
+        return Response({
+            "response": serializer.data
+        })
+
+
+# API to retrieve one lecture activity
+class GetLectureVideoExtractedFrames(APIView):
+
+    def get(self, request):
+        lecture_video_id = request.query_params.get('lecture_video_id')
+        lecture_video_name = request.query_params.get('lecture_video_name')
+        # retrieve the extracted frames
+        extracted = ar.getExtractedFrames(lecture_video_name)
+
+        # lecture_activities = LectureActivity.objects.filter(lecture_video_id__lecture_video_id=lecture_video_id)
+        # serializer = LectureActivitySerializer(lecture_activities, many=True)
+
+        return Response({
+            # "response": serializer.data,
+            "extracted": extracted
+        })
+
+
+# API to retrieve individual student detections
+class GetLectureVideoIndividualStudentFrames(APIView):
+
+    def get(self, request):
+        video_name = request.query_params.get('video_name')
+        labelled_detections, detected_people = pc.get_pose_estimations(video_name)
+
+        return Response({
+            "response": labelled_detections,
+            "people": detected_people
+        })
+
+
+# API to process pose estimation for an individual student
+class ProcessIndividualStudentPoseEstimation(APIView):
+    authentication_classes = [BasicAuthentication]
+    permission_classes = [IsAuthenticated, IsAdminUser]
+
+    def get(self):
+        pass
+
+    # POST method
+    def post(self, request):
+        video_name = request.data['video_name']
+        student = request.data['student']
+        poses = request.data['poses']
+
+        pc.calculate_pose_estimation_for_student(video_name, student, poses)
+        return Response({
+            "response": video_name
+        })
+
+

FirstApp/apps.py

+from django.apps import AppConfig
+
+
+class FirstappConfig(AppConfig):
+    name = 'FirstApp'

FirstApp/emotion_detector.py

+from tensorflow.keras.models import load_model
+from time import sleep
+from keras.preprocessing.image import img_to_array
+from keras.preprocessing import image
+import cv2
+import os
+import numpy as np
+from . models import VideoMeta
+from . logic import custom_sorter as cs
+
+
+# emotion recognition method
+def emotion_recognition(classifier, face_classifier, image):
+    label = ""
+    class_labels = ['Angry', 'Happy', 'Neutral', 'Sad', 'Surprise']
+
+    gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
+    faces = face_classifier.detectMultiScale(gray, 1.3, 5)
+
+    for (x, y, w, h) in faces:
+        roi_gray = gray[y:y + h, x:x + w]
+        roi_gray = cv2.resize(roi_gray, (48, 48), interpolation=cv2.INTER_AREA)
+        # rect,face,image = face_detector(frame)
+
+        if np.sum([roi_gray]) != 0:
+            roi = roi_gray.astype('float') / 255.0
+            roi = img_to_array(roi)
+            roi = np.expand_dims(roi, axis=0)
+
+            # make a prediction on the ROI, then lookup the class
+
+            preds = classifier.predict(roi)[0]
+            label = class_labels[preds.argmax()]
+
+    return label
+
+
+def detect_emotion(video):
+    BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+    VIDEO_DIR = os.path.join(BASE_DIR, "assets\\FirstApp\\videos\\{}".format(video))
+    face_classifier = cv2.CascadeClassifier(os.path.join(BASE_DIR, 'FirstApp\classifiers\haarcascade_frontalface_default.xml'))
+    classifier_path = os.path.join(BASE_DIR, 'FirstApp\classifiers\Emotion_little_vgg.h5')
+    classifier = load_model(classifier_path)
+    path = ''
+    meta_data = VideoMeta()
+
+    class_labels = ['Angry', 'Happy', 'Neutral', 'Sad', 'Surprise']
+
+
+    cap = cv2.VideoCapture(VIDEO_DIR)
+    fps = cap.get(cv2.CAP_PROP_FPS)  # OpenCV2 version 2 used "CV_CAP_PROP_FPS"
+    frame_count = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
+
+    #taking a count on each label
+    count_frames = 0
+    count_angry = 0
+    count_happy = 0
+    count_sad = 0
+    count_neutral = 0
+    count_surprise = 0
+
+    while (count_frames < frame_count):
+        # Grab a single frame of video
+        ret, frame = cap.read()
+        labels = []
+        gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
+        faces = face_classifier.detectMultiScale(gray,1.3,5)
+
+        print('number of faces: ', len(faces))
+
+        for (x, y, w, h) in faces:
+            cv2.rectangle(frame, (x, y), (x+w, y+h), (255, 0, 0), 2)
+            roi_gray = gray[y:y+h, x:x+w]
+            roi_gray = cv2.resize(roi_gray, (48, 48), interpolation=cv2.INTER_AREA)
+        # rect,face,image = face_detector(frame)
+
+
+            if np.sum([roi_gray])!=0:
+                roi = roi_gray.astype('float')/255.0
+                roi = img_to_array(roi)
+                roi = np.expand_dims(roi, axis=0)
+
+            # make a prediction on the ROI, then lookup the class
+
+                preds = classifier.predict(roi)[0]
+                label = class_labels[preds.argmax()]
+
+                # counting the number of frames for each label, to calculate the percentage for each emotion later on...
+
+                if (label == 'Anger'):
+                    count_angry += 1
+                    # path = os.path.join(BASE_DIR, 'static\\images\\Anger')
+                    # cv2.imwrite(os.path.join(path, 'Anger-{0}.jpg'.format(count)), frame)
+
+                elif (label == 'Happy'):
+                    count_happy += 1
+                    # path = os.path.join(BASE_DIR, 'static\\images\\Happy')
+                    # cv2.imwrite(os.path.join(path, 'Happy-{0}.jpg'.format(count)), frame)
+
+                elif (label == 'Neutral'):
+                    count_neutral += 1
+                    # path = os.path.join(BASE_DIR, 'static\\images\\Neutral')
+                    # cv2.imwrite(os.path.join(path, 'Neutral-{0}.jpg'.format(count)), frame)
+
+                elif (label == 'Sad'):
+                    count_sad += 1
+                    # path = os.path.join(BASE_DIR, 'static\\images\\Sad')
+                    # cv2.imwrite(os.path.join(path, 'Sad-{0}.jpg'.format(count)), frame)
+
+                elif (label == 'Surprise'):
+                    count_surprise += 1
+                    # path = os.path.join(BASE_DIR, 'static\\images\\Surprise')
+                    # cv2.imwrite(os.path.join(path, 'Surprise-{0}.jpg'.format(count)), frame)
+
+                label_position = (x, y)
+                # cv2.putText(frame, label, label_position, cv2.FONT_HERSHEY_SIMPLEX, 2, (0, 255, 0), 3)
+                # cv2.imwrite("".format(label, count), frame)
+            else:
+                cv2.putText(frame, 'No Face Found', (20, 60), cv2.FONT_HERSHEY_SIMPLEX, 2, (0, 255, 0), 3)
+
+        # cv2.imshow('Emotion Detector',frame)
+        count_frames += 1
+        # if cv2.waitKey(1) & 0xFF == ord('q'):
+        #     break
+
+    # setting up the counted values
+
+    meta_data.frame_count = count_frames
+    meta_data.happy_count = count_happy
+    meta_data.sad_count = count_sad
+    meta_data.angry_count = count_angry
+    meta_data.neutral_count = count_neutral
+    meta_data.surprise_count = count_surprise
+
+    cap.release()
+    cv2.destroyAllWindows()
+
+    return meta_data
+
+
+# to retrieve student evaluation for emotions
+def get_student_emotion_evaluations(video_name):
+    BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+    # face_classifier = cv2.CascadeClassifier(
+    #     os.path.join(BASE_DIR, 'FirstApp\classifiers\haarcascade_frontalface_default.xml'))
+    # classifier_path = os.path.join(BASE_DIR, 'FirstApp\classifiers\Emotion_little_vgg.h5')
+    # classifier = load_model(classifier_path)
+    EXTRACTED_DIR = os.path.join(BASE_DIR, "assets\\FirstApp\\activity\\{}".format(video_name))
+
+    class_labels = ['Angry', 'Happy', 'Neutral', 'Sad', 'Surprise']
+
+    detections = []
+    frames = []
+
+    for frame_folder in os.listdir(EXTRACTED_DIR):
+
+        FRAME_DIR = os.path.join(EXTRACTED_DIR, frame_folder)
+        frame_details = {}
+        frame_details['frame'] = frame_folder
+
+        # for each detection in the frame directory
+        detected_images = []
+        for detection in os.listdir(FRAME_DIR):
+
+            if "frame" not in detection:
+                DETECTION_PATH = os.path.join(FRAME_DIR, detection)
+
+                image = cv2.imread(DETECTION_PATH)
+
+                # label = emotion_recognition(classifier, face_classifier, image)
+
+                detected_images.append(detection)
+                detections.append(detection)
+
+        frame_details['detections'] = detected_images
+        frames.append(frame_details)
+
+    sorted_frames = cs.custom_object_sorter(frames)
+    set_detections = set(detections)
+    list_set_detections = list(set_detections)
+
+    sorted_list_set_detections = cs.custom_sort(list_set_detections)
+
+    return sorted_frames, sorted_list_set_detections
+
+
+# this method will retrieve individual student evaluations
+def get_individual_student_evaluation(video_name, student_name):
+    BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+    face_classifier = cv2.CascadeClassifier(
+        os.path.join(BASE_DIR, 'FirstApp\classifiers\haarcascade_frontalface_default.xml'))
+    classifier_path = os.path.join(BASE_DIR, 'FirstApp\classifiers\Emotion_little_vgg.h5')
+    classifier = load_model(classifier_path)
+    EXTRACTED_DIR = os.path.join(BASE_DIR, "assets\\FirstApp\\activity\\{}".format(video_name))
+
+    # the object of type 'VideoMeta'
+    meta_data = VideoMeta()
+
+    # the class labels
+    class_labels = ['Angry', 'Happy', 'Neutral', 'Sad', 'Surprise']
+
+    # taking a count on each label
+    count_frames = 0
+    count_angry = 0
+    count_happy = 0
+    count_sad = 0
+    count_neutral = 0
+    count_surprise = 0
+
+    for frame in os.listdir(EXTRACTED_DIR):
+        # getting the frame folder
+        FRAME_FOLDER = os.path.join(EXTRACTED_DIR, frame)
+
+        for detections in os.listdir(FRAME_FOLDER):
+
+            # only take the images with the student name
+            if detections == student_name:
+                # get the label for this image
+                IMAGE_PATH = os.path.join(FRAME_FOLDER, detections)
+                image = cv2.imread(IMAGE_PATH)
+
+                label = emotion_recognition(classifier, face_classifier, image)
+
+                # check for the label of the image
+                if (label == 'Anger'):
+                    count_angry += 1
+                    # path = os.path.join(BASE_DIR, 'static\\images\\Anger')
+                    # cv2.imwrite(os.path.join(path, 'Anger-{0}.jpg'.format(count)), frame)
+
+                elif (label == 'Happy'):
+                    count_happy += 1
+                    # path = os.path.join(BASE_DIR, 'static\\images\\Happy')
+                    # cv2.imwrite(os.path.join(path, 'Happy-{0}.jpg'.format(count)), frame)
+
+                elif (label == 'Neutral'):
+                    count_neutral += 1
+                    # path = os.path.join(BASE_DIR, 'static\\images\\Neutral')
+                    # cv2.imwrite(os.path.join(path, 'Neutral-{0}.jpg'.format(count)), frame)
+
+                elif (label == 'Sad'):
+                    count_sad += 1
+                    # path = os.path.join(BASE_DIR, 'static\\images\\Sad')
+                    # cv2.imwrite(os.path.join(path, 'Sad-{0}.jpg'.format(count)), frame)
+
+                elif (label == 'Surprise'):
+                    count_surprise += 1
+                    # path = os.path.join(BASE_DIR, 'static\\images\\Surprise')
+                    # cv2.imwrite(os.path.join(path, 'Surprise-{0}.jpg'.format(count)), frame)
+
+        # incrementing the frame_count
+        count_frames += 1
+    # setting up the counted values
+
+    meta_data.frame_count = count_frames
+    meta_data.happy_count = count_happy
+    meta_data.sad_count = count_sad
+    meta_data.angry_count = count_angry
+    meta_data.neutral_count = count_neutral
+    meta_data.surprise_count = count_surprise
+
+    # calculating the percentages
+    meta_data.calcPercentages()
+
+    return meta_data
+
+# this method will
+def get_frame_emotion_recognition(video_name):
+    BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+    face_classifier = cv2.CascadeClassifier(
+        os.path.join(BASE_DIR, 'FirstApp\classifiers\haarcascade_frontalface_default.xml'))
+    classifier_path = os.path.join(BASE_DIR, 'FirstApp\classifiers\Emotion_little_vgg.h5')
+    classifier = load_model(classifier_path)
+    EXTRACTED_DIR = os.path.join(BASE_DIR, "assets\\FirstApp\\activity\\{}".format(video_name))
+
+    # initializing the count variables
+    frame_count = 0
+
+
+    # frame activity recognitions
+    frame_emotion_recognitions = []
+
+
+    # # class labels
+    class_labels = ['Angry', 'Happy', 'Neutral', 'Sad', 'Surprise']
+
+    for frame in os.listdir(EXTRACTED_DIR):
+        # derive the frame folder path
+        FRAME_FOLDER = os.path.join(EXTRACTED_DIR, frame)
+
+        frame_details = {}
+        frame_details['frame_name'] = frame
+
+        # initialize the count variables for a frame
+        happy_count = 0
+        sad_count = 0
+        angry_count = 0
+        neutral_count = 0
+        surprise_count = 0
+
+        # to count the extracted detections for a frame
+        detection_count = 0
+
+        for detections in os.listdir(FRAME_FOLDER):
+
+            # only take the images with the student name
+            if "frame" not in detections:
+                # get the label for this image
+                IMAGE_PATH = os.path.join(FRAME_FOLDER, detections)
+                image = cv2.imread(IMAGE_PATH)
+
+                label = emotion_recognition(classifier, face_classifier, image)
+
+                # checking for the label
+                if label == class_labels[0]:
+                    angry_count += 1
+                elif label == class_labels[1]:
+                    happy_count += 1
+                elif label == class_labels[2]:
+                    neutral_count += 1
+                elif label == class_labels[3]:
+                    sad_count += 1
+                elif label == class_labels[4]:
+                    surprise_count += 1
+
+                # increment the detection count
+                detection_count += 1
+
+
+
+        # calculating the percentages for the frame
+        happy_perct = float(happy_count / detection_count) * 100
+        sad_perct = float(sad_count / detection_count) * 100
+        angry_perct = float(angry_count / detection_count) * 100
+        neutral_perct = float(neutral_count / detection_count) * 100
+        surprise_perct = float(surprise_count / detection_count) * 100
+
+        # this dictionary will be returned
+        frame_details['happy_perct'] = happy_perct
+        frame_details['sad_perct'] = sad_perct
+        frame_details['angry_perct'] = angry_perct
+        frame_details['neutral_perct'] = neutral_perct
+        frame_details['surprise_perct'] = surprise_perct
+
+        # push to all the frame details
+        frame_emotion_recognitions.append(frame_details)
+
+    # sort the recognitions based on the frame number
+    sorted_activity_frame_recognitions = cs.custom_object_sorter(frame_emotion_recognitions)
+
+    # return the detected frame percentages
+    return sorted_activity_frame_recognitions
\ No newline at end of file

FirstApp/forms.py

+from django import forms
+from django.contrib.auth import authenticate
+from django.contrib.auth.models import User
+from . MongoModels import *
+
+# testing the login form
+class LoginForm(forms.Form):
+    # username = forms.CharField(max_length=100)
+    email = forms.EmailField()
+    password = forms.CharField(widget=forms.PasswordInput())
+
+    def clean(self):
+        # cleaned_username = self.cleaned_data.get('username')
+        cleaned_email = self.cleaned_data.get('email')
+        cleaned_password = self.cleaned_data.get('password')
+
+        lecturer = Lecturer.objects.get(email=cleaned_email)
+
+        # if a lecturer is already in the system
+        if (lecturer):
+            # retrieve the User object
+            user = User.objects.get(email=cleaned_email)
+            is_user = user.check_password(cleaned_password)
+
+            # if the password is correct
+            if (is_user):
+                # lec_credentials = LecturerCredentials.objects.filter(username_id=lecturer.id)
+                lec_credentials = LecturerCredentials.objects.get(username_id=lecturer.id)
+
+                print('credentials: ', lec_credentials)
+
+                # if lecture credentials are already created
+                if (lec_credentials):
+                    lec_credentials.password = user.password
+                    lec_credentials.save(force_update=True)
+
+                else:
+                    LecturerCredentials(
+                        username_id=lecturer.id,
+                        password=user.password
+                    ).save()
+
+            else:
+                raise forms.ValidationError("Username or password is incorrect")
+
+        else:
+            raise forms.ValidationError("The lecturer does not exist")
+
+        return super(LoginForm, self).clean()
+
+
+# model form for Lecturer credentials
+class LecturerCredentialsForm(forms.ModelForm):
+
+    class Meta:
+        model = LecturerCredentials
+        fields = '__all__'
+        widgets = {
+            'password': forms.PasswordInput()
+        }
\ No newline at end of file

FirstApp/logic/activity_recognition.py

+import tensorflow as tf
+import tensorflow.keras
+from PIL import Image, ImageOps
+import numpy as np
+import cv2
+import os
+import shutil
+from . custom_sorter import *
+
+
+def activity_recognition(video_path):
+    BASE_DIR = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+    VIDEO_DIR = os.path.join(BASE_DIR, "assets\\FirstApp\\videos\\{}".format(video_path))
+    # CLASSIFIER_DIR = os.path.join(BASE_DIR, "FirstApp\\classifiers\\student_activity_version_02.h5")
+    # CLASSIFIER_DIR = os.path.join(BASE_DIR, "FirstApp\\classifiers\\student_activity_version_03.h5")
+    CLASSIFIER_DIR = os.path.join(BASE_DIR, "FirstApp\\classifiers\\student_activity_version_04.h5")
+    ACTIVITY_DIR = os.path.join(BASE_DIR, "static\\FirstApp\\activity")
+
+    # files required for person detection
+    config_file = os.path.join(BASE_DIR, "FirstApp\\classifiers\\MobileNetSSD_deploy.prototxt.txt")
+    model_file = os.path.join(BASE_DIR, "FirstApp\\classifiers\\MobileNetSSD_deploy.caffemodel")
+
+    # load our serialized persosn detection model from disk
+    print("[INFO] loading model...")
+    net = cv2.dnn.readNetFromCaffe(config_file, model_file)
+
+    # dictionary to hold the percentage values
+    percentages = {}
+
+    np.set_printoptions(suppress=True)
+
+    # class_labels = ['Phone checking', 'Talking with friends', 'note taking']
+    # class labels
+    class_labels = ['Phone checking', 'Listening', 'Note taking']
+
+    model = tensorflow.keras.models.load_model(CLASSIFIER_DIR)
+    model.compile(optimizer='adam',
+                  loss=tf.keras.losses.SparseCategoricalCrossentropy(from_logits=True),
+                  metrics=['accuracy'])
+
+    data = np.ndarray(shape=(1, 224, 224, 3), dtype=np.float32)
+    size = (224, 224)
+
+    # iteration
+    video = cv2.VideoCapture(VIDEO_DIR)
+    no_of_frames = video.get(cv2.CAP_PROP_FRAME_COUNT)
+    frame_count = 0
+    total_detections = 0
+    phone_checking_count = 0
+    talking_count = 0
+    note_taking_count = 0
+    listening_count = 0
+
+    # video activity didrectory
+    VIDEO_ACTIVITY_DIR = os.path.join(ACTIVITY_DIR, video_path)
+
+    # creating the directory for the video
+    if (os.path.isdir(VIDEO_ACTIVITY_DIR)):
+        shutil.rmtree(VIDEO_ACTIVITY_DIR)
+
+    # create the video directory
+    os.mkdir(VIDEO_ACTIVITY_DIR)
+
+    while (frame_count < no_of_frames):
+        ret, image = video.read()
+        FRAME_DIR = os.path.join(VIDEO_ACTIVITY_DIR, "frame-{}".format(frame_count))
+        frame_name = "frame-{}.png".format(frame_count)
+
+        FRAME_IMG = os.path.join(FRAME_DIR, frame_name)
+
+        if (os.path.isdir(FRAME_DIR)):
+            shutil.rmtree(FRAME_DIR)
+
+        # create the new frame directory
+        os.mkdir(FRAME_DIR)
+
+        image = cv2.resize(image, size)
+        # image = ImageOps.fit(image, size, Image.ANTIALIAS)
+        detections = person_detection(image, net)
+
+        image = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
+        cv2.imwrite(FRAME_IMG, image)
+
+        # if there are any person detections
+        if (len(detections) > 0):
+
+            total_detections += len(detections)
+
+            detection_count = 0
+
+            for detection in detections:
+
+                detection = cv2.resize(detection, size)
+
+                image_array = np.asarray(detection)
+                normalized_image_array = (detection.astype(np.float32) / 127.0) - 1
+
+                # Load the image into the array
+                data[0] = normalized_image_array
+
+                # run the inference
+                prediction = model.predict(data)
+                # print('the prediction: ', prediction)
+                label = class_labels[prediction.argmax()]
+
+                # counting the detections under each label
+                if (label == class_labels[0]):
+                    phone_checking_count += 1
+                elif (label == class_labels[1]):
+                    listening_count += 1
+                elif (label == class_labels[2]):
+                    note_taking_count += 1
+
+                # saving the detection for the particular frame
+                detection_name = "detection-{}.png".format(detection_count)
+                detection_image_path = os.path.join(FRAME_DIR, detection_name)
+
+                # converting detected image into grey-scale
+                detection = cv2.cvtColor(detection, cv2.COLOR_BGR2GRAY)
+
+                cv2.imwrite(detection_image_path, detection)
+
+                detection_count += 1
+
+
+        frame_count += 1
+
+    # after extracting the frames, save the changes to static content
+    p = os.popen("python manage.py collectstatic", "w")
+    p.write("yes")
+
+    # calculating the percentages for each label
+    phone_perct = float(phone_checking_count / total_detections) * 100
+    talking_perct = float(talking_count / total_detections) * 100
+    note_perct = float(note_taking_count / total_detections) * 100
+    listening_perct = float(listening_count / total_detections) * 100
+
+    # assigning the percentages to the dictionary
+    percentages["phone_perct"] = phone_perct
+    percentages["talking_perct"] = talking_perct
+    percentages["writing_perct"] = note_perct
+    percentages["listening_perct"] = listening_perct
+
+
+    return percentages
+
+
+def person_detection(image, net):
+    BASE_DIR = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+
+    config_file = os.path.join(BASE_DIR, "FirstApp\\classifiers\\MobileNetSSD_deploy.prototxt.txt")
+    model_file = os.path.join(BASE_DIR, "FirstApp\\classifiers\\MobileNetSSD_deploy.caffemodel")
+    threshold = 0.2
+    detected_person = []
+
+    # initialize the list of class labels MobileNet SSD was trained to
+    # detect, then generate a set of bounding box colors for each class
+    CLASSES = ["background", "aeroplane", "bicycle", "bird", "boat",
+               "bottle", "bus", "car", "cat", "chair", "cow", "diningtable",
+               "dog", "horse", "motorbike", "person", "pottedplant", "sheep",
+               "sofa", "train", "tvmonitor"]
+    COLORS = np.random.uniform(0, 255, size=(len(CLASSES), 3))
+
+    person_count = 0
+
+
+
+    # load the input image and construct an input blob for the image
+    # by resizing to a fixed 300x300 pixels and then normalizing it
+    # (note: normalization is done via the authors of the MobileNet SSD
+    # implementation)
+    (h, w) = image.shape[:2]
+    blob = cv2.dnn.blobFromImage(cv2.resize(image, (300, 300)), 0.007843, (300, 300), 127.5)
+
+    # pass the blob through the network and obtain the detections and
+    # predictions
+    print("[INFO] computing object detections...")
+    net.setInput(blob)
+    detections = net.forward()
+
+    # loop over the detections
+    for i in np.arange(0, detections.shape[2]):
+        # extract the confidence (i.e., probability) associated with the
+        # prediction
+        confidence = detections[0, 0, i, 2]
+
+        # filter out weak detections by ensuring the `confidence` is
+        # greater than the minimum confidence
+        if confidence > threshold:
+            # extract the index of the class label from the `detections`,
+            # then compute the (x, y)-coordinates of the bounding box for
+            # the object
+            idx = int(detections[0, 0, i, 1])
+            box = detections[0, 0, i, 3:7] * np.array([w, h, w, h])
+            (startX, startY, endX, endY) = box.astype("int")
+
+            # display the prediction
+            label = "{}: {:.2f}%".format(CLASSES[idx], confidence * 100)
+
+            # print("[INFO] {}".format(label))
+
+            if (format(label).__contains__("person")):
+                startX = 0 if startX < 0 else startX
+                startY = 0 if startY < 0 else startY
+
+                person = image[startY:startY + endY, startX:startX + endX]
+                detected_person.append(person)
+
+                person_count += 1
+
+    return detected_person
+
+
+# retrieving the extracted frames and detections for a given video
+def getExtractedFrames(folder_name):
+
+    image_list = []
+
+
+    BASE_DIR = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+    EXTRACTED_DIR = os.path.join(BASE_DIR, "assets\\FirstApp\\activity\\{}".format(folder_name))
+
+    # listing all the images in the directory
+    for frame_folders in os.listdir(EXTRACTED_DIR):
+        FRAME_FOLDER = os.path.join(EXTRACTED_DIR, frame_folders)
+        frame_details = {}
+        frame_details['frame'] = frame_folders
+        detection_details = []
+
+        for detections in os.listdir(FRAME_FOLDER):
+            detection_details.append(detections)
+
+        frame_details['detections'] = detection_details
+        image_list.append(frame_details)
+
+    # checking for the number of frames
+    if (len(image_list) > 0):
+        image_list = custom_object_sorter(image_list)
+        return image_list
+
+    else:
+        return "No extracted frames were found"
+
+# get detections for a given frame name
+def get_detections(video_name, frame_name):
+
+    BASE_DIR = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+    EXTRACTED_DIR = os.path.join(BASE_DIR, "assets\\FirstApp\\activity\\{}".format(video_name))
+    FRAME_DIR = os.path.join(EXTRACTED_DIR, frame_name)
+    detections = []
+
+    for detection in os.listdir(FRAME_DIR):
+        if 'frame' not in detection:
+            detections.append(detection)
+
+    return detections
+
+
+# get detections for a given class name
+def get_detections_for_label(video_name, label_index):
+
+    BASE_DIR = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+    EXTRACTED_DIR = os.path.join(BASE_DIR, "assets\\FirstApp\\activity\\{}".format(video_name))
+    CLASSIFIER_DIR = os.path.join(BASE_DIR, "FirstApp\\classifiers\\student_activity_version_02.h5")
+
+    np.set_printoptions(suppress=True)
+
+    model = tensorflow.keras.models.load_model(CLASSIFIER_DIR)
+    model.compile(optimizer='adam',
+                  loss=tf.keras.losses.SparseCategoricalCrossentropy(from_logits=True),
+                  metrics=['accuracy'])
+
+    data = np.ndarray(shape=(1, 224, 224, 3), dtype=np.float32)
+    size = (224, 224)
+
+    class_labels = ['Phone checking', 'Talking with friends', 'note taking']
+
+    label_index = int(label_index)
+
+    given_label = class_labels[label_index]
+
+    detections = []
+    frames = []
+
+    for frame_folder in os.listdir(EXTRACTED_DIR):
+
+        FRAME_DIR = os.path.join(EXTRACTED_DIR, frame_folder)
+        frame_details = {}
+        frame_details['frame'] = frame_folder
+
+        # for each detection in the frame directory
+        detected_images = []
+        for detection in os.listdir(FRAME_DIR):
+
+            if "frame" not in detection:
+                DETECTION_PATH = os.path.join(FRAME_DIR, detection)
+
+                image = cv2.imread(DETECTION_PATH)
+
+                image = cv2.resize(image, size)
+
+                image_array = np.asarray(image)
+                normalized_image_array = (image_array.astype(np.float32) / 127.0) - 1
+
+                # Load the image into the array
+                data[0] = normalized_image_array
+
+                # run the inference
+                prediction = model.predict(data)
+
+                label = class_labels[prediction.argmax()]
+
+                # checking for equality in selected label and given label
+                if (label == given_label):
+                    detected_images.append(detection)
+                    detections.append(detection)
+
+        frame_details['detections'] = detected_images
+        frames.append(frame_details)
+
+    sorted_frames = custom_object_sorter(frames)
+    set_detections = set(detections)
+    list_set_detections = list(set_detections)
+
+    sorted_list_set_detections = custom_sort(list_set_detections)
+
+    return sorted_frames, sorted_list_set_detections
+
+
+# to get the student evaluations
+def get_student_activity_evaluation(video_name):
+
+    BASE_DIR = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+    EXTRACTED_DIR = os.path.join(BASE_DIR, "assets\\FirstApp\\activity\\{}".format(video_name))
+    # CLASSIFIER_DIR = os.path.join(BASE_DIR, "FirstApp\\classifiers\\student_activity_version_02.h5")
+    # CLASSIFIER_DIR = os.path.join(BASE_DIR, "FirstApp\\classifiers\\student_activity_version_03.h5")
+    CLASSIFIER_DIR = os.path.join(BASE_DIR, "FirstApp\\classifiers\\student_activity_version_04.h5")
+
+    np.set_printoptions(suppress=True)
+
+    model = tensorflow.keras.models.load_model(CLASSIFIER_DIR)
+    model.compile(optimizer='adam',
+                  loss=tf.keras.losses.SparseCategoricalCrossentropy(from_logits=True),
+                  metrics=['accuracy'])
+
+    data = np.ndarray(shape=(1, 224, 224, 3), dtype=np.float32)
+    size = (224, 224)
+
+    class_labels = ['Phone checking', 'Talking with friends', 'note taking']
+
+    detections = []
+    frames = []
+
+    for frame_folder in os.listdir(EXTRACTED_DIR):
+
+        FRAME_DIR = os.path.join(EXTRACTED_DIR, frame_folder)
+        frame_details = {}
+        frame_details['frame'] = frame_folder
+
+        # for each detection in the frame directory
+        detected_images = []
+        for detection in os.listdir(FRAME_DIR):
+
+            if "frame" not in detection:
+                DETECTION_PATH = os.path.join(FRAME_DIR, detection)
+
+                image = cv2.imread(DETECTION_PATH)
+
+                image = cv2.resize(image, size)
+
+                image_array = np.asarray(image)
+                normalized_image_array = (image_array.astype(np.float32) / 127.0) - 1
+
+                # Load the image into the array
+                data[0] = normalized_image_array
+
+                # run the inference
+                prediction = model.predict(data)
+
+                label = class_labels[prediction.argmax()]
+
+                detected_images.append(detection)
+                detections.append(detection)
+
+        frame_details['detections'] = detected_images
+        frames.append(frame_details)
+
+    sorted_frames = custom_object_sorter(frames)
+    set_detections = set(detections)
+    list_set_detections = list(set_detections)
+
+    sorted_list_set_detections = custom_sort(list_set_detections)
+
+    return sorted_frames, sorted_list_set_detections
+
+
+# recognize the activity for each frame
+def get_frame_activity_recognition(video_name):
+    BASE_DIR = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+    EXTRACTED_DIR = os.path.join(BASE_DIR, "assets\\FirstApp\\activity\\{}".format(video_name))
+    # CLASSIFIER_DIR = os.path.join(BASE_DIR, "FirstApp\\classifiers\\student_activity_version_03.h5")
+    # CLASSIFIER_DIR = os.path.join(BASE_DIR, "FirstApp\\classifiers\\student_activity_version_02.h5")
+    CLASSIFIER_DIR = os.path.join(BASE_DIR, "FirstApp\\classifiers\\student_activity_version_04.h5")
+
+
+    np.set_printoptions(suppress=True)
+
+    # load the model
+    model = tensorflow.keras.models.load_model(CLASSIFIER_DIR)
+    model.compile(optimizer='adam',
+                  loss=tf.keras.losses.SparseCategoricalCrossentropy(from_logits=True),
+                  metrics=['accuracy'])
+
+    data = np.ndarray(shape=(1, 224, 224, 3), dtype=np.float32)
+    size = (224, 224)
+
+    # class labels
+    class_labels = ['Phone checking', 'Listening', 'Note taking']
+
+    frame_count = 0
+    # total_detections = 10
+
+    # frame activity recognitions
+    frame_activity_recognitions = []
+
+    # looping through the frames
+    for frame in os.listdir(EXTRACTED_DIR):
+
+        # define the count variables for each frame
+        phone_checking_count = 0
+        listening_count = 0
+        note_taking_count = 0
+
+        # derive the frame folder path
+        FRAME_FOLDER = os.path.join(EXTRACTED_DIR, frame)
+
+        frame_details = {}
+        frame_details['frame_name'] = frame
+
+        # to count the extracted detections for a frame
+        detection_count = 0
+        detected_percentages = []
+
+        # loop through each detection in the frame
+        for detection in os.listdir(FRAME_FOLDER):
+
+            DETECTION_PATH = os.path.join(FRAME_FOLDER, detection)
+
+            # check whether the image is not the frame itself
+            if "frame" not in detection:
+                image = cv2.imread(DETECTION_PATH)
+
+                image = cv2.resize(image, size)
+
+                image_array = np.asarray(image)
+                normalized_image_array = (image_array.astype(np.float32) / 127.0) - 1
+
+                # Load the image into the array
+                data[0] = normalized_image_array
+
+                # run the inference
+                prediction = model.predict(data)
+
+                label = class_labels[prediction.argmax()]
+
+                # increment the relevant count, based on the label
+                if (label == class_labels[0]):
+                    phone_checking_count += 1
+                elif (label == class_labels[1]):
+                    listening_count += 1
+                elif (label == class_labels[2]):
+                    note_taking_count += 1
+
+                # increment the detection count
+                detection_count += 1
+
+
+        # calculating the percentages for the frame
+        phone_checking_perct = float(phone_checking_count / detection_count) * 100 if detection_count > 0 else 0
+        listening_perct = float(listening_count / detection_count) * 100 if detection_count > 0 else 0
+        note_taking_perct = float(note_taking_count / detection_count) * 100 if detection_count > 0 else 0
+
+        # adding the percentage values to the frame details
+        frame_details['phone_perct'] = phone_checking_perct
+        frame_details['listening_perct'] = listening_perct
+        frame_details['note_perct'] = note_taking_perct
+
+        # push to all the frame details
+        frame_activity_recognitions.append(frame_details)
+
+    # sort the recognitions based on the frame number
+    sorted_activity_frame_recognitions = custom_object_sorter(frame_activity_recognitions)
+
+    # return the detected frame percentages
+    return sorted_activity_frame_recognitions
+
+
+# this method will retrieve individual student evaluation
+def get_individual_student_evaluation(video_name, student_name):
+    BASE_DIR = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+    EXTRACTED_DIR = os.path.join(BASE_DIR, "assets\\FirstApp\\activity\\{}".format(video_name))
+    # CLASSIFIER_DIR = os.path.join(BASE_DIR, "FirstApp\\classifiers\\student_activity_version_03.h5")
+    # CLASSIFIER_DIR = os.path.join(BASE_DIR, "FirstApp\\classifiers\\student_activity_version_02.h5")
+    # CLASSIFIER_DIR = os.path.join(BASE_DIR, "FirstApp\\classifiers\\student_activity_version_04.h5")
+    CLASSIFIER_DIR = os.path.join(BASE_DIR, "FirstApp\\classifiers\\student_activity_version_05.h5")
+
+    np.set_printoptions(suppress=True)
+
+    # load the model
+    model = tensorflow.keras.models.load_model(CLASSIFIER_DIR)
+    model.compile(optimizer='adam',
+                  loss=tf.keras.losses.SparseCategoricalCrossentropy(from_logits=True),
+                  metrics=['accuracy'])
+
+    data = np.ndarray(shape=(1, 224, 224, 3), dtype=np.float32)
+    size = (224, 224)
+
+    # initializing the count variables
+    frame_count = 0
+    phone_count = 0
+    note_count = 0
+    listen_count = 0
+
+    # class labels
+    class_labels = ['Phone checking', 'Listening', 'Note taking']
+
+    for frame in os.listdir(EXTRACTED_DIR):
+        # getting the frame folder
+        FRAME_FOLDER = os.path.join(EXTRACTED_DIR, frame)
+
+        for detections in os.listdir(FRAME_FOLDER):
+
+            # only take the images with the student name
+            if detections == student_name:
+                # get the label for this image
+                IMAGE_PATH = os.path.join(FRAME_FOLDER, detections)
+                image = cv2.imread(IMAGE_PATH)
+
+                image = cv2.resize(image, size)
+
+                image_array = np.asarray(image)
+                normalized_image_array = (image_array.astype(np.float32) / 127.0) - 1
+
+                # Load the image into the array
+                data[0] = normalized_image_array
+
+                # run the inference
+                prediction = model.predict(data)
+
+                label = class_labels[prediction.argmax()]
+
+                # checking for the label
+                if label == class_labels[0]:
+                    phone_count += 1
+                elif label == class_labels[1]:
+                    listen_count += 1
+                elif label == class_labels[2]:
+                    note_count += 1
+
+        # increment the frame count
+        frame_count += 1
+
+    # calculating the percentages
+    phone_perct = float(phone_count / frame_count) * 100
+    writing_perct = float(note_count / frame_count) * 100
+    listening_perct = float(listen_count / frame_count) * 100
+
+    # this dictionary will be returned
+    percentages = {}
+    percentages['phone_perct'] = phone_perct
+    percentages['writing_perct'] = writing_perct
+    percentages['listening_perct'] = listening_perct
+
+    return percentages
\ No newline at end of file

FirstApp/logic/classes/pose.py

+
+class PoseResponse:
+    # directory = ''
+    # image_name = ''
+    # label = ''
+
+    def __init__(self, directory, image_name, label):
+        self.directory = directory
+        self.image_name = image_name
+        self.labels = label
+

FirstApp/logic/custom_sorter.py

+import re
+
+def custom_sort(array):
+
+    number_arr = []
+
+    for words in array:
+        result = [int(s) for s in re.findall(r'\b\d+\b', words)]
+        new_number = result[0] if len(result) == 1 else 0
+        number_arr.append(int(new_number))
+
+    sorted_num_arr = sorted(number_arr)
+
+    set_number = set(sorted_num_arr)
+
+    list_set_number = list(set_number)
+
+    new_arr = [0 for i in range(len(list_set_number))]
+
+    for word in array:
+
+        result = [int(s) for s in re.findall(r'\b\d+\b', word)]
+        new_number = result[0] if len(result) == 1 else 0
+        number = int(new_number)
+
+        if number in list_set_number:
+            index = list_set_number.index(number)
+            new_arr[index] = word
+
+    return new_arr
+
+
+def custom_object_sorter(obj_array):
+    # this list will keep the extracted keys
+    key_arr = []
+    # this list will returned the ordered object array
+    new_obj_array = [0 for i in range(len(obj_array))]
+
+    # this loop will extract the keys and append to the defined list
+    for obj in obj_array:
+        key_list = list(obj.keys())
+        main_key = key_list[0]
+        key_arr.append(obj[main_key])
+
+    # this method will arrange the keys in the order
+    sorted_keys = custom_sort(key_arr)
+
+    # iterate through the object array once again, to arrange them in the correct order
+    for obj in obj_array:
+        key_list = list(obj.keys())
+        main_key = key_list[0]
+
+        # compare the main key element and the ordered key list
+        if obj[main_key] in sorted_keys:
+            index = sorted_keys.index(obj[main_key])
+            # assign to the new list according to the given index
+            new_obj_array[index] = obj
+
+    return new_obj_array
\ No newline at end of file

FirstApp/logic/facial_landmarks.py

+from imutils import face_utils
+import os
+import cv2
+import dlib
+import numpy as np
+import imutils
+
+
+def get2DPoints(image):
+
+    BASE_DIR = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+    CLASSIFIER_DIR = os.path.join(BASE_DIR, "FirstApp\\classifiers")
+
+    detector_path = os.path.join(CLASSIFIER_DIR, "shape_predictor_68_face_landmarks.dat")
+    detector = dlib.get_frontal_face_detector()
+    predictor = dlib.shape_predictor(detector_path)
+
+    gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
+
+    # detect faces in the grayscale image
+    rects = detector(gray, 1)
+
+    left_corner_arr = None
+    right_corner_arr = None
+    nose_tip_arr = None
+    right_mouth_arr = None
+    left_mouth_arr = None
+    chin_arr = None
+    face_center_arr = None
+    face_center_top_arr = None
+    face_center_bottom_arr = None
+    count = 0
+
+    print('no of faces: ', len(rects))
+
+    if (len(rects)):
+        left_corner_arr = np.zeros((len(rects), 2))
+        right_corner_arr = np.zeros((len(rects), 2))
+        nose_tip_arr = np.zeros((len(rects), 2))
+        right_mouth_arr = np.zeros((len(rects), 2))
+        left_mouth_arr = np.zeros((len(rects), 2))
+        chin_arr = np.zeros((len(rects), 2))
+        face_center_top_arr = np.zeros((len(rects), 2))
+        face_center_bottom_arr = np.zeros((len(rects), 2))
+
+
+        for (i, rect) in enumerate(rects):
+
+            left_corner = None
+            right_corner = None
+            nose_tip = None
+            right_mouth = None
+            left_mouth = None
+            chin = None
+
+
+            (fx, fy, fw, fh) = face_utils.rect_to_bb(rect)
+            cv2.rectangle(image, (fx, fy), (fx+fw, fy+fh), (0, 255, 0), 2)
+            face_center_top = [int(fx + fw/2), int(fy)]
+            face_center_bottom = [int(fx + fw/2), int(fy + fh)]
+            cv2.line(image, (int(fx + fw/2), int(fy)), (int(fx + fw/2), int(fy + fh)), (0, 255, 0), 2)
+
+            shape = predictor(gray, rect)
+            shape = face_utils.shape_to_np(shape)
+
+            # looping through each facial landmark category
+            for (name, (i, j)) in face_utils.FACIAL_LANDMARKS_IDXS.items():
+                # clone the original image so we can draw on it, then
+                # display the name of the face part on the image
+                clone = image
+
+                # loop over the subset of facial landmarks, drawing the
+                # specific face part
+
+                for (x, y) in shape[i:j]:
+                    if (name == 'left_eye'):
+                        # maxArr = np.amax(shape[i:j], axis=0)
+                        # minArr = np.amin(shape[i:j], axis=0)
+                        left_corner = np.amax(shape[i:j], axis=0)
+
+                    elif (name == 'right_eye'):
+                        # maxArr = np.amax(shape[i:j], axis=0)
+                        # minArr = np.amin(shape[i:j], axis=0)
+                        right_corner = np.amin(shape[i:j], axis=0)
+
+                    elif (name == 'jaw'):
+                        minArr = np.array(shape[i:j][8], dtype=int)
+                        chin = np.array(shape[i:j][8], dtype=int)
+
+                        # cv2.putText(clone, "Chin", (int(minArr[0]), int(minArr[1])), cv2.FONT_HERSHEY_SIMPLEX, 0.7, (0, 0, 255), 2)
+                        cv2.circle(image, (int(minArr[0]), int(minArr[1])), 3, (255, 0, 255), -1)
+                        # cv2.circle(clone, (int(minArr[0]), int(minArr[1])), 3, (0, 255, 255), -1)
+
+                    elif (name == 'nose'):
+                        # nose_tip = np.array(shape[i:j][3], dtype=int)
+                        nose_tip = np.array(shape[i:j][3], dtype=int)
+                        # cv2.putText(clone, "Nose tip", (int(nose_tip[0]), int(nose_tip[1])), cv2.FONT_HERSHEY_SIMPLEX, 0.7, (0, 0, 255),
+                        #             2)
+                        # cv2.circle(clone, (int(nose_tip[0]), int(nose_tip[1])), 3, (255, 0, 255), -1)
+
+                    elif (name == 'inner_mouth'):
+                        # maxArr = np.amax(shape[i:j], axis=0)
+                        # minArr = np.amin(shape[i:j], axis=0)
+                        right_mouth = np.amin(shape[i:j], axis=0)
+                        left_mouth = np.amax(shape[i:j], axis=0)
+                        # cv2.circle(clone, (maxArr[0], maxArr[1]), 3, (127, 0, 255), -1)
+                        # cv2.circle(clone, (minArr[0], minArr[1]), 3, (127, 0, 255), -1)
+
+                    # else:
+                    # cv2.circle(image, (x, y), 3, (255, 0, 255), -1)
+
+            left_corner_arr[count] = left_corner
+            right_corner_arr[count] = right_corner
+            nose_tip_arr[count] = nose_tip
+            right_mouth_arr[count] = right_mouth
+            left_mouth_arr[count] = left_mouth
+            chin_arr[count] = chin
+            face_center_top_arr[count] = face_center_top
+            face_center_bottom_arr[count] = face_center_bottom
+
+            count += 1
+
+
+
+    return left_corner_arr, right_corner_arr, nose_tip_arr, right_mouth_arr, left_mouth_arr, chin_arr, face_center_top_arr, face_center_bottom_arr, count
+
+            # extract the ROI of the face region as a separate image
+        #     (x, y, w, h) = cv2.boundingRect(np.array([shape[i:j]]))
+        #     roi = image[y:y + h, x:x + w]
+        #     roi = imutils.resize(roi, width=250, inter=cv2.INTER_CUBIC)
+        #
+        #     # show the particular face part
+        #     cv2.imshow("ROI", roi)
+        #     cv2.imshow("Image", clone)
+        #     cv2.waitKey(0)
+        #
+        #     # visualize all facial landmarks with a transparent overlay
+        # output = face_utils.visualize_facial_landmarks(image, shape)
+        # cv2.imshow("Image", output)
+        # cv2.waitKey(0)
\ No newline at end of file

FirstApp/logic/head_pose_estimation.py

+
+import os
+import cv2
+import numpy as np
+import shutil
+from .facial_landmarks import get2DPoints
+from .classes import pose
+# Read Image
+
+
+def estimatePose(request):
+
+
+    directory = request['directory']
+    images = request['images']
+
+    BASE_DIR = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+    IMAGE_DIR = os.path.join(BASE_DIR, "assets\\FirstApp\\images")
+    SPEC_DIR = os.path.join(IMAGE_DIR, "{}".format(directory))
+
+    # new directory will be created to store pose estimations
+    new_dir_name = "static\\FirstApp\\poses\\{}".format(directory)
+    new_dir = os.path.join(BASE_DIR, new_dir_name)
+    face_count_response = 0
+    pose_response_list = []
+
+    if (os.path.isdir(new_dir)):
+        # delete the previous directory
+        shutil.rmtree(new_dir)
+
+    # create the new directory
+    os.mkdir(new_dir)
+
+    for im in images:
+
+        IMAGE_PATH = os.path.join(SPEC_DIR, "{}".format(im))
+        image = cv2.imread(IMAGE_PATH)
+        size = image.shape
+
+        left_corner, right_corner, nose_tip, right_mouth, left_mouth, chin, face_center_top, face_center_bottom, face_count = get2DPoints(image)
+
+        # if faces are found
+        if left_corner is not None:
+
+
+            # 3D model points.
+            model_points = np.array([
+                (0.0, 0.0, 0.0),  # Nose tip
+                (0.0, -330.0, -65.0),  # Chin
+                (-225.0, 170.0, -135.0),  # Left eye left corner
+                (225.0, 170.0, -135.0),  # Right eye right corne
+                (-150.0, -150.0, -125.0),  # Left Mouth corner
+                (150.0, -150.0, -125.0)  # Right mouth corner
+
+            ])
+
+            # Camera internals
+
+            focal_length = size[1]
+            center = (size[1] / 2, size[0] / 2)
+            camera_matrix = np.array(
+                [[focal_length, 0, center[0]],
+                 [0, focal_length, center[1]],
+                 [0, 0, 1]], dtype="double"
+            )
+
+            # print("Camera Matrix :\n {0}".format(camera_matrix))
+
+            for i in range (face_count):
+
+                text = ''
+                # 2D image points. If you change the image, you need to change vector
+                image_points = np.array([
+                    nose_tip[i],
+                    chin[i],
+                    left_corner[i],
+                    right_corner[i],
+                    left_mouth[i],
+                    right_mouth[i]
+                ], dtype="double")
+
+
+                dist_coeffs = np.zeros((4, 1))  # Assuming no lens distortion
+                (success, rotation_vector, translation_vector) = cv2.solvePnP(model_points, image_points, camera_matrix, dist_coeffs,
+                                                                              flags=cv2.SOLVEPNP_ITERATIVE)
+
+
+                # Project a 3D point (0, 0, 1000.0) onto the image plane.
+                # We use this to draw a line sticking out of the nose
+
+
+                (nose_end_point2D, jacobian) = cv2.projectPoints(np.array([(0.0, 0.0, 1000.0)]), rotation_vector, translation_vector,
+                                                                 camera_matrix, dist_coeffs)
+
+                # for p in image_points:
+                #     cv2.circle(im, (int(p[0]), int(p[1])), 3, (0, 0, 255), -1)
+
+                p1 = (int(image_points[0][0]), int(image_points[0][1]))
+                p2 = (int(nose_end_point2D[0][0][0]), int(nose_end_point2D[0][0][1]))
+
+                if (p2[0] < face_center_top[i][0]):
+                    text = 'RIGHT'
+                else:
+                    text = 'LEFT'
+
+                cv2.putText(image, text, p2, cv2.FONT_HERSHEY_COMPLEX, 0.8, (0, 0, 255), 2)
+                cv2.line(image, p1, p2, (255, 0, 0), 2)
+
+                # saving the image
+                new_file = os.path.join(new_dir, im)
+
+                cv2.imwrite(new_file, image)
+
+                face_count_response += 1
+
+                # create a response object for the image
+                pose_response = {}
+                pose_response["directory"] = directory
+                pose_response["image"] = im
+                pose_response["label"] = text
+
+                pose_response_list.append(pose_response)
+
+
+
+
+
+        else:
+            print('No faces found')
+
+
+    # respond 'yes' to the command line prompt
+    p = os.popen('python manage.py collectstatic', "w")
+    p.write("yes")
+
+    # returning the static path
+    STATIC_POSE = os.path.join(BASE_DIR, "assets\\FirstApp\\pose")
+    STATIC_SPEC = os.path.join(STATIC_POSE, "{}".format(directory))
+
+    # if no images were created
+    if (face_count_response < 1):
+        shutil.rmtree(new_dir)
+        return "No faces were found"
+
+    return pose_response_list
\ No newline at end of file

FirstApp/logic/id_generator.py

+def generate_new_id(prev_id):
+
+    alpha = []
+    digit_index = 0
+    value_index = 0
+    zero_index = 0
+    count = 0
+    text_len = len(prev_id)
+
+    for letter in list(prev_id):
+
+        if (letter.isalpha()):
+            alpha.append(letter)
+
+        if (letter.isdigit()):
+            digit_index = count
+            break
+
+        count += 1
+
+    print('digit index: ', digit_index)
+
+    zero_index = digit_index
+
+    for i in range(digit_index, text_len):
+        if (prev_id[i] == '0'):
+            zero_index += 1
+        else:
+            value_index = i
+            break
+
+    sub_text = prev_id[value_index:text_len]
+    number = int(sub_text)
+    number += 1
+
+    number_str = str(number)
+    len_number_str = len(number_str)
+    num_of_zeros = text_len - (len_number_str + digit_index)
+    zero_text = ''
+    new_str = ''
+    returned_id = prev_id
+
+    # converting the list into a string
+    for l in alpha:
+        new_str += l
+
+    if (num_of_zeros >= 0):
+
+        for i in range(0, num_of_zeros):
+            zero_text += '0'
+
+        returned_id = new_str + zero_text + number_str
+
+    # returning the new id
+    if (returned_id == prev_id):
+        return prev_id
+
+    return returned_id
\ No newline at end of file

FirstApp/logic/posenet_calculation.py

+import tensorflow as tf
+import tensorflow.keras
+from PIL import Image, ImageOps
+import numpy as np
+import cv2
+import os
+import math
+import shutil
+from . import custom_sorter as cs
+
+
+def get_pose_estimations(video_name):
+    BASE_DIR = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+    # face_classifier = cv2.CascadeClassifier(
+    #     os.path.join(BASE_DIR, 'FirstApp\classifiers\haarcascade_frontalface_default.xml'))
+    # classifier_path = os.path.join(BASE_DIR, 'FirstApp\classifiers\Emotion_little_vgg.h5')
+    # classifier = load_model(classifier_path)
+    EXTRACTED_DIR = os.path.join(BASE_DIR, "assets\\FirstApp\\activity\\{}".format(video_name))
+
+    class_labels = ['Angry', 'Happy', 'Neutral', 'Sad', 'Surprise']
+
+    detections = []
+    frames = []
+
+    for frame_folder in os.listdir(EXTRACTED_DIR):
+
+        FRAME_DIR = os.path.join(EXTRACTED_DIR, frame_folder)
+        frame_details = {}
+        frame_details['frame'] = frame_folder
+
+        # for each detection in the frame directory
+        detected_images = []
+        for detection in os.listdir(FRAME_DIR):
+
+            if "frame" not in detection:
+                DETECTION_PATH = os.path.join(FRAME_DIR, detection)
+
+                image = cv2.imread(DETECTION_PATH)
+
+                # label = emotion_recognition(classifier, face_classifier, image)
+
+                detected_images.append(detection)
+                detections.append(detection)
+
+        frame_details['detections'] = detected_images
+        frames.append(frame_details)
+
+    sorted_frames = cs.custom_object_sorter(frames)
+    set_detections = set(detections)
+    list_set_detections = list(set_detections)
+
+    sorted_list_set_detections = cs.custom_sort(list_set_detections)
+
+    return sorted_frames, sorted_list_set_detections
+
+
+# calculate pose estimations for a student
+def calculate_pose_estimation_for_student(video_name, student, poses):
+
+    BASE_DIR = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+    VIDEO_DIR = os.path.join(BASE_DIR, "assets\\FirstApp\\activity\\{}".format(video_name))
+    POSE_DIR = os.path.join(BASE_DIR, "assets\\FirstApp\\poses")
+    POSE_VIDEO_DIR = os.path.join(POSE_DIR, video_name)
+    pose_count = 0
+
+    # checking whether the pose directory
+    if os.path.isdir(POSE_VIDEO_DIR) == False:
+        # create the pose directory
+        os.mkdir(POSE_VIDEO_DIR)
+
+
+    # loop through each frame of the directory
+    for frame in os.listdir(VIDEO_DIR):
+
+        FRAME_FOLDER = os.path.join(VIDEO_DIR, frame)
+
+        for detection in os.listdir(FRAME_FOLDER):
+
+            DETECTION_PATH = os.path.join(FRAME_FOLDER, detection)
+            # detection image
+            detection_img = cv2.imread(DETECTION_PATH)
+
+            # checking for the given student
+            if detection == student:
+
+                # select the correct pose detection
+                pose = poses[pose_count]
+
+                # extract the coordinates
+                x1 = int(pose['keypoints'][5]['position']['x'])
+                y1 = int(pose['keypoints'][5]['position']['y'])
+                x2 = int(pose['keypoints'][6]['position']['x'])
+                y2 = int(pose['keypoints'][6]['position']['y'])
+
+                # extract the head positions
+                x_diff = x1 - x2
+                y_diff = y1 - y2
+                x_pow = math.pow(x_diff, 2)
+                y_pow = math.pow(y_diff, 2)
+                summation = x_pow + y_pow
+
+                distance = int(math.sqrt(summation))
+
+                # defining the hyperparameter
+                param = 0.6
+
+                fraction = int(math.floor(distance * param)) if int(math.floor(distance * param)) > 0 else 1
+
+                middle_x = x2 + fraction
+
+                # middle_y = y2 - 20
+                middle_y = y2
+
+                head_x = middle_x
+
+                head_y = 0 if (middle_y - fraction) < 0 else (middle_y - fraction)
+
+                left_upper_x = 0 if (middle_x - fraction) < 0 else (middle_x - fraction)
+
+                print('head_y: ', head_y)
+                print('fraction: ', fraction)
+                print('distance: ', distance)
+                print('left_upper_x: ', left_upper_x)
+
+                # extract the new image
+                new_img = detection_img[head_y:head_y+fraction, left_upper_x:left_upper_x+distance]
+
+                # new directory name
+                # new_img_dir = os.path.join(POSE_VIDEO_DIR, frame)
+                new_img_dir = os.path.join(POSE_VIDEO_DIR, detection)
+
+                # check if the directory exists
+                if os.path.isdir(new_img_dir) == False:
+                    # create the new directory
+                    os.mkdir(new_img_dir)
+
+                # create new image name
+                frame_name = frame + ".png"
+
+                new_img_path = os.path.join(new_img_dir, frame_name)
+
+                # saving the new image
+                cv2.imwrite(new_img_path, new_img)
+
+                # increment the count
+                pose_count += 1
+
+                print('saving the image')
+
+

FirstApp/logic/video_extraction.py

+import os
+import cv2
+import shutil
+
+def VideoExtractor(request):
+
+    BASE_DIR = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+    video_name = request["video_name"]
+
+    VIDEO_DIR = os.path.join(BASE_DIR, "assets\\FirstApp\\videos")
+    VIDEO_PATH = os.path.join(VIDEO_DIR, video_name)
+
+    # creating the new path to store extracted frames
+    NEW_DIR = os.path.join(BASE_DIR, "static\\FirstApp\\extracted\\{}".format(video_name))
+
+    # check whether a specific directory exists
+    if (os.path.isdir(NEW_DIR)):
+        shutil.rmtree(NEW_DIR)
+
+    # create the new directory
+    os.mkdir(NEW_DIR)
+
+    video = cv2.VideoCapture(VIDEO_PATH)
+
+    no_of_frames = int(video.get(cv2.CAP_PROP_FRAME_COUNT))
+    frame_count = 0
+
+
+    while (frame_count < no_of_frames):
+
+        ret, frame = video.read()
+        gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
+
+        new_file_name = "{}_frame_{}.png".format(video_name, frame_count)
+        new_file_path = os.path.join(NEW_DIR, new_file_name)
+
+        # save the extracted frames
+        cv2.imwrite(new_file_path, gray)
+
+        frame_count += 1
+
+
+    # after extracting the frames, save the changes to static content
+    p = os.popen("python manage.py collectstatic", "w")
+    p.write("yes")
+
+# retrieving the extracted frames for a given video
+def getExtractedFrames(request):
+
+    folder_name = request.get("folder_name")
+    image_list = []
+
+    print('folder name: ', folder_name)
+
+    BASE_DIR = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+    EXTRACTED_DIR = os.path.join(BASE_DIR, "assets\\FirstApp\\extracted\\{}".format(folder_name))
+
+    # listing all the images in the directory
+    for image in os.listdir(EXTRACTED_DIR):
+        image_details = {"image": image}
+        image_list.append(image_details)
+
+
+
+    # checking for the number of frames
+    if (len(image_list) > 0):
+        return image_list
+
+    else:
+        return "No extracted frames were found"

FirstApp/migrations/0001_initial.py

+# Generated by Django 3.0.3 on 2020-03-04 11:15
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Teachers',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('firstName', models.CharField(max_length=10)),
+                ('lastName', models.CharField(max_length=15)),
+                ('age', models.IntegerField()),
+            ],
+        ),
+    ]

FirstApp/migrations/0002_registeruser_video_videometa.py

+# Generated by Django 2.2.11 on 2020-03-16 12:47
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('FirstApp', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='RegisterUser',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('firstName', models.CharField(max_length=20)),
+                ('lastName', models.CharField(max_length=30)),
+                ('email', models.CharField(max_length=30)),
+                ('password', models.CharField(max_length=50)),
+            ],
+        ),
+        migrations.CreateModel(
+            name='Video',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=100)),
+                ('path', models.CharField(max_length=100)),
+                ('duration', models.CharField(max_length=100)),
+                ('hours', models.IntegerField()),
+                ('minutes', models.IntegerField()),
+                ('seconds', models.IntegerField()),
+            ],
+        ),
+        migrations.CreateModel(
+            name='VideoMeta',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('fps', models.IntegerField()),
+                ('frame_count', models.IntegerField()),
+                ('happy_count', models.IntegerField()),
+                ('sad_count', models.IntegerField()),
+                ('angry_count', models.IntegerField()),
+                ('neutral_count', models.IntegerField()),
+                ('surprise_count', models.IntegerField()),
+                ('happy_perct', models.IntegerField()),
+                ('sad_perct', models.IntegerField()),
+                ('angry_perct', models.IntegerField()),
+                ('neutral_perct', models.IntegerField()),
+                ('surprise_perct', models.IntegerField()),
+            ],
+        ),
+    ]

FirstApp/migrations/0003_lectureemotionreport.py

+# Generated by Django 2.2.11 on 2020-05-10 15:32
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('FirstApp', '0002_registeruser_video_videometa'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='LectureEmotionReport',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('lecture_id', models.CharField(max_length=10)),
+                ('happy_perct', models.FloatField()),
+                ('sad_perct', models.FloatField()),
+                ('angry_perct', models.FloatField()),
+                ('surprise_perct', models.FloatField()),
+                ('disgust_perct', models.FloatField()),
+                ('neutral_perct', models.FloatField()),
+            ],
+        ),
+    ]

FirstApp/migrations/0004_lecture.py

+# Generated by Django 2.2.11 on 2020-05-11 16:58
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('FirstApp', '0003_lectureemotionreport'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Lecture',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('date', models.DateTimeField(auto_created=True)),
+                ('lecture_id', models.CharField(max_length=10)),
+            ],
+        ),
+    ]

FirstApp/migrations/0005_auto_20200513_1551.py

+# Generated by Django 2.2.11 on 2020-05-13 10:21
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('FirstApp', '0004_lecture'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Faculty',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('faculty_id', models.CharField(max_length=10)),
+                ('name', models.CharField(max_length=100)),
+            ],
+        ),
+        migrations.CreateModel(
+            name='Lecturer',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('lecturer_id', models.CharField(max_length=7)),
+                ('fname', models.TextField()),
+                ('lname', models.TextField()),
+                ('email', models.EmailField(max_length=254)),
+                ('telephone', models.CharField(max_length=10)),
+                ('faculty', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='FirstApp.Faculty')),
+            ],
+        ),
+        migrations.AlterField(
+            model_name='lecture',
+            name='date',
+            field=models.DateTimeField(auto_created=True, default=None),
+        ),
+        migrations.CreateModel(
+            name='Subject',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('subject_code', models.TextField()),
+                ('name', models.TextField()),
+                ('year', models.IntegerField()),
+                ('faculty', models.ForeignKey(default={}, on_delete=django.db.models.deletion.CASCADE, to='FirstApp.Faculty')),
+            ],
+        ),
+        migrations.CreateModel(
+            name='LecturerSubject',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('lec_subject_id', models.CharField(max_length=10)),
+                ('lecturer_id', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='FirstApp.Lecturer')),
+                ('subjects', models.ManyToManyField(to='FirstApp.Subject')),
+            ],
+        ),
+    ]

FirstApp/migrations/0006_lecturercredentials.py

+# Generated by Django 2.2.11 on 2020-05-13 15:46
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('FirstApp', '0005_auto_20200513_1551'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='LecturerCredentials',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('password', models.CharField(max_length=15)),
+                ('username', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='FirstApp.Lecturer')),
+            ],
+        ),
+    ]

FirstApp/models.py

+from django.db import models
+
+class Teachers(models.Model):
+    firstName = models.CharField(max_length=10)
+    lastName = models.CharField(max_length=15)
+    age = models.IntegerField()
+
+    def __str__(self):
+        return self.firstName
+
+
+class Video(models.Model):
+    name = models.CharField(max_length=100)
+    path = models.CharField(max_length=100)
+    duration = models.CharField(max_length=100)
+    hours = models.IntegerField()
+    minutes = models.IntegerField()
+    seconds = models.IntegerField()
+
+    def __str__(self):
+        return self.name
+
+
+class VideoMeta(models.Model):
+    fps = models.IntegerField()
+    frame_count = models.IntegerField()
+    happy_count = models.IntegerField()
+    sad_count = models.IntegerField()
+    angry_count = models.IntegerField()
+    neutral_count = models.IntegerField()
+    surprise_count = models.IntegerField()
+    happy_perct = models.IntegerField()
+    sad_perct = models.IntegerField()
+    angry_perct = models.IntegerField()
+    neutral_perct = models.IntegerField()
+    surprise_perct = models.IntegerField()
+
+    def __int__(self):
+        return self.frame_count
+
+    def calcHappyPerct(self):
+        self.happy_perct = int((self.happy_count / self.frame_count) * 100)
+
+    def calcSadPerct(self):
+        self.sad_perct = int((self.sad_count / self.frame_count) * 100)
+
+    def calcAngryPerct(self):
+        self.angry_perct = int((self.angry_count / self.frame_count) * 100)
+
+    def calcNeutralPerct(self):
+        self.neutral_perct = int((self.neutral_count / self.frame_count) * 100)
+
+    def calcSurprisePerct(self):
+        self.surprise_perct = int((self.surprise_count / self.frame_count) * 100)
+
+    def calcPercentages(self):
+        self.calcHappyPerct()
+        self.calcAngryPerct()
+        self.calcSadPerct()
+        self.calcNeutralPerct()
+        self.calcSurprisePerct()
+
+
+class RegisterUser(models.Model):
+    firstName = models.CharField(max_length=20)
+    lastName = models.CharField(max_length=30)
+    email = models.CharField(max_length=30)
+    password = models.CharField(max_length=50)
+
+    def __str__(self):
+        return self.firstName
+
+

FirstApp/serializers.py

+from rest_framework import serializers
+from .models import Teachers, RegisterUser
+from .MongoModels import *
+from .logic import classes
+from . models import VideoMeta
+
+class TeachersSerializer(serializers.ModelSerializer):
+
+    class Meta:
+        model = Teachers
+        fields = ('firstName', 'lastName')
+# fields = __all__
+
+class RegisterUserSerializer(serializers.ModelSerializer):
+
+    class Meta:
+        model = RegisterUser
+        fields = ('firstName', 'lastName', 'email', 'password')
+
+
+# image serializer
+class ImageSerializer(serializers.Serializer):
+
+    metaData = serializers.CharField()
+
+
+# image serializer
+class PoseSerializer(serializers.Serializer):
+
+    directory = serializers.CharField()
+    image_name = serializers.CharField()
+    text = serializers.CharField()
+
+
+# lecture serializer
+class LectureSerializer(serializers.ModelSerializer):
+
+    class Meta:
+        model = Lecture
+        fields = '__all__'
+
+
+# faculty serializer
+class FacultySerializer(serializers.ModelSerializer):
+
+    class Meta:
+        model = Faculty
+        fields = '__all__'
+
+
+# subject serializer
+class SubjectSerializer(serializers.ModelSerializer):
+
+    faculty = FacultySerializer()
+
+    class Meta:
+        model = Subject
+        fields = '__all__'
+
+
+    # overriding the create method
+    def create(self, validated_data):
+
+        faculty = None
+
+        faculty_data = validated_data.pop('faculty')
+        serialized_faculty = FacultySerializer(data=faculty_data)
+
+
+        if (serialized_faculty.is_valid()):
+            # faculty, faculty_created = Faculty.objects.get_or_create(defaults={}, faculty_id=serialized_faculty.data['faculty_id'])
+            faculty = Faculty.objects.filter(faculty_id=serialized_faculty.data['faculty_id'])
+
+            if (len(faculty) == 1):
+
+                subject, created = Subject.objects.update_or_create(
+                    faculty=faculty[0],
+                    subject_code=validated_data.pop('subject_code'),
+                    name=validated_data.pop('name'),
+                    year=validated_data.pop('year')
+                )
+
+                print(type(subject.year))
+                return subject
+
+            return None
+
+        return None
+
+
+
+    def get_embedded_field(self, obj):
+        return_data = None
+        if type(obj.embedded_field) == list:
+            embedded_list = []
+            for item in obj.embedded_field:
+                embedded_dict = item.__dict__
+                for key in list(embedded_dict.keys()):
+                    if key.startswith('_'):
+                        embedded_dict.pop(key)
+                embedded_list.append(embedded_dict)
+            return_data = embedded_list
+        else:
+            embedded_dict = obj.embedded_field.__dict__
+            for key in list(embedded_dict.keys()):
+                if key.startswith('_'):
+                    embedded_dict.pop(key)
+            return_data = embedded_dict
+        return return_data
+
+
+# serializer for lecturer
+class LecturerSerializer(serializers.ModelSerializer):
+
+    faculty = FacultySerializer(required=True)
+
+    class Meta:
+        model = Lecturer
+        fields = '__all__'
+
+    # overriding the create method
+    def create(self, validated_data):
+
+        faculty = None
+
+        faculty_data = validated_data.pop('faculty')
+        serialized_faculty = FacultySerializer(data=faculty_data)
+
+        if (serialized_faculty.is_valid()):
+            # faculty, faculty_created = Faculty.objects.get_or_create(defaults={}, faculty_id=serialized_faculty.data['faculty_id'])
+            faculty = Faculty.objects.filter(faculty_id=serialized_faculty.data['faculty_id'])
+
+            if (len(faculty) == 1):
+                lecturer, created = Lecturer.objects.update_or_create(
+                    faculty=faculty[0],
+                    lecturer_id=validated_data.pop('lecturer_id'),
+                    fname=validated_data.pop('fname'),
+                    lname=validated_data.pop('lname'),
+                    email=validated_data.pop('email'),
+                    telephone=validated_data('telephone')
+                )
+
+                return lecturer
+
+            return None
+
+        return None
+
+
+# serializer for Lecturer_Subject
+class LecturerSubjectSerializer(serializers.ModelSerializer):
+
+    lecturer_id = LecturerSerializer()
+
+    class Meta:
+        model = LecturerSubject
+        fields = '__all__'
+
+
+# serializer for timetables
+class FacultyTimetableSerializer(serializers.ModelSerializer):
+
+    faculty = FacultySerializer(required=True)
+    timetable = serializers.SerializerMethodField()
+
+    def get_timetable(self, obj):
+        return_data = []
+
+        for table in obj.timetable:
+            time_table = {}
+            time_slots = []
+            time_table["date"] = table.date
+
+            for slot in table.time_slots:
+                slot_data = {"start_time": slot.start_time, "end_time": slot.end_time,
+                             "subject": SubjectSerializer(slot.subject).data,
+                             "lecturer": LecturerSerializer(slot.lecturer).data, "location": slot.location}
+
+                time_slots.append(slot_data)
+
+            time_table["time_slots"] = time_slots
+
+            return_data.append(time_table)
+
+        return return_data
+
+
+    class Meta:
+        model = FacultyTimetable
+        fields = ('timetable_id', 'faculty', 'timetable')
+
+
+# lecture video serializer
+class LectureVideoSerializer(serializers.ModelSerializer):
+
+    lecturer = LecturerSerializer()
+    subject = SubjectSerializer()
+
+    class Meta:
+        model = LectureVideo
+        fields = '__all__'
+
+
+class LectureActivitySerializer(serializers.ModelSerializer):
+
+    lecture_video_id = LectureVideoSerializer()
+
+    class Meta:
+        model = LectureActivity
+        fields = '__all__'
+
+
+# EMOTIONS section
+# lecture emotions serailzier
+class LectureEmotionSerializer(serializers.ModelSerializer):
+    lecture_video_id = LectureVideoSerializer()
+
+    class Meta:
+        model = LectureEmotionReport
+        fields = '__all__'
+
+
+# lecture video meta serializer
+class VideoMetaSerializer(serializers.ModelSerializer):
+
+    class Meta:
+        model = VideoMeta
+        fields = '__all__'

FirstApp/templates/FirstApp/404.html

+{% extends 'FirstApp/template.html' %}
+<!DOCTYPE html>
+<html lang="en">
+
+
+<body id="page-top">
+
+
+  <!-- Page Wrapper -->
+  <div id="wrapper">
+
+
+
+    <!-- Content Wrapper -->
+    <div id="content-wrapper" class="d-flex flex-column">
+
+      <!-- Main Content -->
+      <div id="content">
+
+
+
+        <!-- Begin Page Content -->
+          {% block 'container-fluid' %}
+        <div class="container-fluid">
+            {% load static %}
+
+          <!-- 404 Error Text -->
+          <div class="text-center">
+            <div class="error mx-auto" data-text="404">404</div>
+            <p class="lead text-gray-800 mb-5">Page Not Found</p>
+            <p class="text-gray-500 mb-0">It looks like you found a glitch in the matrix...</p>
+            <a href="/">&larr; Back to Dashboard</a>
+          </div>
+
+        </div>
+          {% endblock %}
+        <!--end of container-fluid -->
+
+      </div>
+      <!-- End of Main Content -->
+
+      <!-- Footer -->
+      <footer class="sticky-footer bg-white">
+        <div class="container my-auto">
+          <div class="copyright text-center my-auto">
+            <span>Copyright &copy; Your Website 2019</span>
+          </div>
+        </div>
+      </footer>
+      <!-- End of Footer -->
+
+    </div>
+    <!-- End of Content Wrapper -->
+
+  </div>
+  <!-- End of Page Wrapper -->
+
+  <!-- Scroll to Top Button-->
+  <a class="scroll-to-top rounded" href="#page-top">
+    <i class="fas fa-angle-up"></i>
+  </a>
+
+  <!-- Logout Modal-->
+  <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
+          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">×</span>
+          </button>
+        </div>
+        <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
+          <a class="btn btn-primary" href="login.html">Logout</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Bootstrap core JavaScript-->
+  <script src="vendor/jquery/jquery.min.js"></script>
+  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+
+  <!-- Core plugin JavaScript-->
+  <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
+
+  <!-- Custom scripts for all pages-->
+  <script src="js/sb-admin-2.min.js"></script>
+
+</body>
+
+</html>

FirstApp/templates/FirstApp/500.html

+{% extends 'FirstApp/template.html' %}
+<!DOCTYPE html>
+<html lang="en">
+
+
+<body id="page-top">
+
+
+  <!-- Page Wrapper -->
+  <div id="wrapper">
+
+
+
+    <!-- Content Wrapper -->
+    <div id="content-wrapper" class="d-flex flex-column">
+
+      <!-- Main Content -->
+      <div id="content">
+
+
+
+        <!-- Begin Page Content -->
+          {% block 'container-fluid' %}
+        <div class="container-fluid">
+            {% load static %}
+
+          <!-- 404 Error Text -->
+          <div class="text-center">
+            <div class="error mx-auto" data-text="404">500</div>
+            <p class="lead text-gray-800 mb-5">Something went wrong</p>
+            <p class="text-gray-500 mb-0">This will be fixed soon...</p>
+            <a href="/">&larr; Back to Dashboard</a>
+          </div>
+
+        </div>
+          {% endblock %}
+        <!--end of container-fluid -->
+
+      </div>
+      <!-- End of Main Content -->
+
+      <!-- Footer -->
+      <footer class="sticky-footer bg-white">
+        <div class="container my-auto">
+          <div class="copyright text-center my-auto">
+            <span>Copyright &copy; Your Website 2019</span>
+          </div>
+        </div>
+      </footer>
+      <!-- End of Footer -->
+
+    </div>
+    <!-- End of Content Wrapper -->
+
+  </div>
+  <!-- End of Page Wrapper -->
+
+  <!-- Scroll to Top Button-->
+  <a class="scroll-to-top rounded" href="#page-top">
+    <i class="fas fa-angle-up"></i>
+  </a>
+
+  <!-- Logout Modal-->
+  <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
+          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">×</span>
+          </button>
+        </div>
+        <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
+          <a class="btn btn-primary" href="login.html">Logout</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Bootstrap core JavaScript-->
+  <script src="vendor/jquery/jquery.min.js"></script>
+  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+
+  <!-- Core plugin JavaScript-->
+  <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
+
+  <!-- Custom scripts for all pages-->
+  <script src="js/sb-admin-2.min.js"></script>
+
+</body>
+
+</html>

FirstApp/templates/FirstApp/Home.html

+{% extends 'FirstApp/template.html' %}
+<!DOCTYPE html>
+<html lang="en">
+<!--{% block 'head' %}-->
+<!--{% endblock %}-->
+<body id="page-top">
+    <!-- Page Wrapper -->
+  <div id="wrapper">
+
+    <!-- Content Wrapper -->
+    <div id="content-wrapper" class="d-flex flex-column">
+
+      <!-- Main Content -->
+      <div id="content">
+
+        <!-- Begin Page Content -->
+        {% block 'container-fluid' %}
+        <div class="container-fluid">
+
+          <!-- Page Heading -->
+          <div class="d-sm-flex align-items-center justify-content-between mb-4">
+            <h1 class="h3 mb-0 text-gray-800">{{object.Message}}</h1>
+            <a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="fas fa-download fa-sm text-white-50"></i> Generate Report</a>
+          </div>
+
+          <!-- Content Row -->
+          <div class="row">
+
+            <!-- Earnings (Monthly) Card Example -->
+            <div class="col-xl-3 col-md-6 mb-4">
+              <div class="card border-left-primary shadow h-100 py-2">
+                <div class="card-body">
+                  <div class="row no-gutters align-items-center">
+                    <div class="col mr-2">
+                      <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Earnings (Monthly)</div>
+                      <div class="h5 mb-0 font-weight-bold text-gray-800">$40,000</div>
+                    </div>
+                    <div class="col-auto">
+                      <i class="fas fa-calendar fa-2x text-gray-300"></i>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Earnings (Monthly) Card Example -->
+            <div class="col-xl-3 col-md-6 mb-4">
+              <div class="card border-left-success shadow h-100 py-2">
+                <div class="card-body">
+                  <div class="row no-gutters align-items-center">
+                    <div class="col mr-2">
+                      <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Earnings (Annual)</div>
+                      <div class="h5 mb-0 font-weight-bold text-gray-800">$215,000</div>
+                    </div>
+                    <div class="col-auto">
+                      <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Earnings (Monthly) Card Example -->
+            <div class="col-xl-3 col-md-6 mb-4">
+              <div class="card border-left-info shadow h-100 py-2">
+                <div class="card-body">
+                  <div class="row no-gutters align-items-center">
+                    <div class="col mr-2">
+                      <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Tasks</div>
+                      <div class="row no-gutters align-items-center">
+                        <div class="col-auto">
+                          <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">50%</div>
+                        </div>
+                        <div class="col">
+                          <div class="progress progress-sm mr-2">
+                            <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="col-auto">
+                      <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Pending Requests Card Example -->
+            <div class="col-xl-3 col-md-6 mb-4">
+              <div class="card border-left-warning shadow h-100 py-2">
+                <div class="card-body">
+                  <div class="row no-gutters align-items-center">
+                    <div class="col mr-2">
+                      <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Pending Requests</div>
+                      <div class="h5 mb-0 font-weight-bold text-gray-800">18</div>
+                    </div>
+                    <div class="col-auto">
+                      <i class="fas fa-comments fa-2x text-gray-300"></i>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+          </div>
+
+          <!-- Content Row -->
+
+          <div class="row">
+
+            <!-- Area Chart -->
+            <div class="col-xl-8 col-lg-7">
+              <div class="card shadow mb-4">
+                <!-- Card Header - Dropdown -->
+                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
+                  <h6 class="m-0 font-weight-bold text-primary">Attendance Overview</h6>
+                  <div class="dropdown no-arrow">
+                    <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                      <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
+                    </a>
+                    <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
+                      <div class="dropdown-header">Dropdown Header:</div>
+                      <a class="dropdown-item" href="#">Action</a>
+                      <a class="dropdown-item" href="#">Another action</a>
+                      <div class="dropdown-divider"></div>
+                      <a class="dropdown-item" href="#">Something else here</a>
+                    </div>
+                  </div>
+                </div>
+                <!-- Card Body -->
+                <div class="card-body">
+                  <div class="chart-area">
+                    <canvas id="myAreaChart"></canvas>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Pie Chart -->
+            <div class="col-xl-4 col-lg-5">
+              <div class="card shadow mb-4">
+                <!-- Card Header - Dropdown -->
+                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
+                  <h6 class="m-0 font-weight-bold text-primary">Revenue Sources</h6>
+                  <div class="dropdown no-arrow">
+                    <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                      <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
+                    </a>
+                    <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
+                      <div class="dropdown-header">Dropdown Header:</div>
+                      <a class="dropdown-item" href="#">Action</a>
+                      <a class="dropdown-item" href="#">Another action</a>
+                      <div class="dropdown-divider"></div>
+                      <a class="dropdown-item" href="#">Something else here</a>
+                    </div>
+                  </div>
+                </div>
+                <!-- Card Body -->
+                <div class="card-body">
+                  <div class="chart-pie pt-4 pb-2">
+                    <canvas id="myPieChart"></canvas>
+                  </div>
+                  <div class="mt-4 text-center small">
+                    <span class="mr-2">
+                      <i class="fas fa-circle text-primary"></i> Direct
+                    </span>
+                    <span class="mr-2">
+                      <i class="fas fa-circle text-success"></i> Social
+                    </span>
+                    <span class="mr-2">
+                      <i class="fas fa-circle text-info"></i> Referral
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Content Row -->
+          <div class="row">
+
+            <!-- Content Column -->
+            <div class="col-lg-6 mb-4">
+
+              <!-- Project Card Example -->
+              <div class="card shadow mb-4">
+                <div class="card-header py-3">
+                  <h6 class="m-0 font-weight-bold text-primary">Student Behavior</h6>
+                </div>
+                <div class="card-body">
+                  {% load static %}
+                  <video width="500" height="300" controls>
+                      <source src="{% static 'FirstApp/videos/Classroom_Video.mp4' %}" type="video/mp4">
+                      Your browser does not support the video tag.
+                  </video>
+
+                  <a href="/webcam" class="btn btn-outline-primary" id="processBtn">Process</a>
+                </div>
+              </div>
+
+              <!-- Color System -->
+              <div class="row">
+                <div class="col-lg-6 mb-4">
+                  <div class="card bg-primary text-white shadow">
+                    <div class="card-body">
+                      Primary
+                      <div class="text-white-50 small">#4e73df</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-lg-6 mb-4">
+                  <div class="card bg-success text-white shadow">
+                    <div class="card-body">
+                      Success
+                      <div class="text-white-50 small">#1cc88a</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-lg-6 mb-4">
+                  <div class="card bg-info text-white shadow">
+                    <div class="card-body">
+                      Info
+                      <div class="text-white-50 small">#36b9cc</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-lg-6 mb-4">
+                  <div class="card bg-warning text-white shadow">
+                    <div class="card-body">
+                      Warning
+                      <div class="text-white-50 small">#f6c23e</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-lg-6 mb-4">
+                  <div class="card bg-danger text-white shadow">
+                    <div class="card-body">
+                      Danger
+                      <div class="text-white-50 small">#e74a3b</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-lg-6 mb-4">
+                  <div class="card bg-secondary text-white shadow">
+                    <div class="card-body">
+                      Secondary
+                      <div class="text-white-50 small">#858796</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+            </div>
+
+            <div class="col-lg-6 mb-4">
+
+              <!-- Illustrations -->
+              <div class="card shadow mb-4">
+                <div class="card-header py-3">
+                  <h6 class="m-0 font-weight-bold text-primary">Lecture Recordings</h6>
+                </div>
+                <div class="card-body">
+                  <table class="table table-bordered">
+                    <thead>
+                      <tr>
+                        <th>Video Name</th>
+                        <th>Length</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {% for video in Videos %}
+                      <tr>
+                        <td>
+                          <a href="{% url 'video' %}?video_name={{video.name}}" class="btn btn-link">{{video.name}}</a>
+                        </td>
+                        <td>{{video.duration}}</td>
+                        <td>
+                          <a href="{% url 'video' %}?video_name={{video.name}}" class="btn btn-outline-info">Process</a>
+                        </td>
+                      </tr>
+                      {% endfor %}
+                    </tbody>
+                  </table>
+<!--                  <div class="text-center">-->
+<!--                    <img class="img-fluid px-3 px-sm-4 mt-3 mb-4" style="width: 25rem;" src="img/undraw_posting_photo.svg" alt="">-->
+<!--                  </div>-->
+<!--                  <p>Add some quality, svg illustrations to your project courtesy of <a target="_blank" rel="nofollow" href="https://undraw.co/">unDraw</a>, a constantly updated collection of beautiful svg images that you can use completely free and without attribution!</p>-->
+<!--                  <a target="_blank" rel="nofollow" href="https://undraw.co/">Browse Illustrations on unDraw &rarr;</a>-->
+                </div>
+              </div>
+
+              <!-- Approach -->
+              <div class="card shadow mb-4">
+                <div class="card-header py-3">
+                  <h6 class="m-0 font-weight-bold text-primary">Development Approach</h6>
+                </div>
+                <div class="card-body">
+                  <p>SB Admin 2 makes extensive use of Bootstrap 4 utility classes in order to reduce CSS bloat and poor page performance. Custom CSS classes are used to create custom components and custom utility classes.</p>
+                  <p class="mb-0">Before working with this theme, you should become familiar with the Bootstrap framework, especially the utility classes.</p>
+                </div>
+              </div>
+
+            </div>
+          </div>
+
+        </div>
+        <!-- /.container-fluid -->
+        {% endblock %}
+
+      </div>
+      <!-- End of Main Content -->
+
+    </div>
+    <!-- End of Content Wrapper -->
+
+  </div>
+  <!-- End of Page Wrapper -->
+
+  <!--    scroll to top button-->
+  {% block 'modal' %}
+  <a class="scroll-to-top rounded" href="#page-top">
+    <i class="fas fa-angle-up"></i>
+  </a>
+
+  <!-- Logout Modal-->
+  <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
+          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">×</span>
+          </button>
+        </div>
+        <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
+          <a class="btn btn-primary" href="/logout">Logout</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  {% endblock %}
+<!--scripts-->
+    {% block 'scripts' %}
+    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
+
+    <script src="{% static 'FirstApp/vendor/jquery/jquery.min.js' %}"></script>
+    <script src="{% static 'FirstApp/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
+
+    <!-- Core plugin JavaScript-->
+    <script src="{% static 'FirstApp/vendor/jquery-easing/jquery.easing.min.js' %}"></script>
+
+    <!-- Custom scripts for all pages-->
+    <script src="{% static 'FirstApp/js/sb-admin-2.min.js' %}"></script>
+
+    <!-- Page level plugins -->
+    <script src="{% static 'FirstApp/vendor/chart.js/Chart.min.js' %}"></script>
+
+    <!-- Page level custom scripts -->
+    <script src="{% static 'FirstApp/js/demo/chart-area-demo.js' %}"></script>
+    <script src="{% static 'FirstApp/js/demo/chart-pie-demo.js' %}"></script>
+
+    {% endblock %}
+</body>
+</html>
\ No newline at end of file

FirstApp/templates/FirstApp/activity.html

+{% extends 'FirstApp/template.html' %}
+<!DOCTYPE html>
+<html lang="en">
+<body id="page-top">
+<!-- Page Wrapper -->
+
+{% block javascript %}
+    {% load static %}
+
+    <!-- Bootstrap core JavaScript-->
+    <script src="{% static 'FirstApp/vendor/jquery/jquery.min.js' %}"></script>
+    <script src="{% static 'FirstApp/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
+
+    <!-- Page level plugins -->
+    <script src="{% static 'FirstApp/vendor/datatables/jquery.dataTables.min.js' %}"></script>
+    <script src="{% static 'FirstApp/vendor/datatables/dataTables.bootstrap4.min.js' %}"></script>
+
+    <!-- Page level custom scripts -->
+    <script src="{% static 'FirstApp/js/demo/datatables-demo.js' %}"></script>
+
+    <!-- Core plugin JavaScript-->
+    <script src="{% static 'FirstApp/vendor/jquery-easing/jquery.easing.min.js' %}"></script>
+
+
+    <script type="text/javascript">
+
+        var global_subject = '';
+        var global_lecturer = '';
+        var global_lecture_video_id = '';
+        var global_video_name = '';
+        var global_lecturer_subject_index = 0;
+
+        //jquery
+        $(document).ready(function () {
+
+            //select a particular subject
+            $('input[type=radio]').click(function () {
+                let subject_id = $(this).attr('id');
+                global_subject = subject_id;
+                let lecturer = $(this).attr('data-lecturer');
+                global_lecturer = lecturer;
+                let subject_name = $(this).attr('data-name');
+
+                $('#timetable').attr('hidden', true);
+                $('#no_timetable_content').attr('hidden', true);
+                $('.student-detection-rows').remove();
+
+                $('#timetable_body').children().map(function () {
+                    $(this).remove();
+                });
+
+
+                $('#no_subject_selected').attr('hidden', true);
+
+                $('#timetable_caption').text('subject: ' + subject_name);
+                $('#loader').attr('hidden', false);
+
+                //fetching the timetable from the db
+                fetch('http://127.0.0.1:8000/timetables')
+                    .then((res) => res.json())
+                    .then((out) => createTimeTable(out, subject_id, lecturer))
+                    .catch((error) => alert('this is the error: ' + error))
+
+            });
+
+
+            $(document).on('click', '.btn-info', function (e) {
+
+                let clicked_class = e.target.className;
+                let object = e;
+                let real_class = clicked_class.split(' ')[1];
+                real_class = '.' + real_class;
+
+                let date = e.target.parentNode.parentNode.firstChild.innerHTML;
+
+                fetch('http://127.0.0.1:8000/get-lecture-video/?lecturer=' + global_lecturer + '&date=' + date + '&index=' + global_lecturer_subject_index)
+                    .then((res) => res.json())
+                    .then((out) => displayLectureVideoDetails(out, object))
+                    .catch((error) => alert('an error occurred: ' + error));
+            });
+
+
+            function createTimeTable(timetable, subject, lecturer) {
+                $('#loader').attr('hidden', true);
+                $('#timetable').attr('hidden', false);
+                let isTimetableSubject = false;
+
+                timetable.map((item, i) => {
+                    item.timetable.map((table, index) => {
+
+                        let lecturer_subject_index_arr = [];
+
+
+                        //to get the number of subjects taught by the lecturer in a day
+                        table.time_slots.forEach((slot1, ind) => {
+                            let isLecturer = slot1.lecturer.id === Number(lecturer);
+
+                            if (isLecturer) {
+                                lecturer_subject_index_arr.push(ind);
+                            }
+                        });
+
+                        //iterating each slot (for a given day)
+                        table.time_slots.forEach((slot, in1) => {
+                            let isLecturer = slot.lecturer.id === Number(lecturer);
+                            let isLecSubject = slot.subject.subject_code === subject;
+                            if (isLecturer && isLecSubject) {
+                                let html = '';
+                                global_lecturer_subject_index = lecturer_subject_index_arr.findIndex((inner) => inner === in1);
+                                isTimetableSubject = true;
+                                html += "<tr class='lecture-details'><td class='slot_date'>" + table.date + "</td>"
+                                    + "<td>" + slot.location + "</td>"
+                                    + "<td>" + slot.start_time + "</td>"
+                                    + "<td>" + slot.end_time + "</td>"
+                                    + "<td><button type='button' class='btn btn-info'>Video</button></td>"
+                                    + "<td></td>"
+                                    + "</tr>";
+
+                                $('#timetable_body').append(html);
+
+                            }
+                        });
+                    });
+
+                    if (!isTimetableSubject) {
+                        $('#timetable').attr('hidden', true);
+                        $('#no_timetable_content').attr('hidden', false);
+                    }
+
+
+                });
+            }
+
+            //function to display lecture video details
+            function displayLectureVideoDetails(lectureVideo, e) {
+
+                //get the lecture video response
+                let video = lectureVideo.response;
+
+                $('#video_name').text(video.video_name);
+                $('#video_duration').text(video.video_length);
+                $('#video_date').text(video.date);
+                global_lecture_video_id = video.lecture_video_id;
+                global_video_name = video.video_name;
+
+
+
+                if (lectureVideo.isActivityFound) {
+                    e.target.parentNode.parentNode.lastChild.innerHTML = '<button type="button" class="btn btn-primary">Results</button>';
+                } else {
+                    e.target.parentNode.parentNode.lastChild.innerHTML = '<button type="button" class="btn btn-success">Process</button>';
+                }
+
+                $('#video_modal').modal();
+            }
+
+            //binding a click event for 'btn-primary' buttons
+            $(document).on('click', '.btn-primary', function (e) {
+
+                //removing the previous frames (if there is any)
+                $('#main_frames').remove();
+
+                //displaying the loader (for the frames)
+                $('#frame_loader').attr('hidden', false);
+                //hiding the temporary text
+                $('#temporary_text').attr('hidden', true);
+
+                fetch('http://127.0.0.1:8000/get-lecture-activity/?lecture_video_id=' + global_lecture_video_id + '&lecture_video_name=' + global_video_name)
+                    .then((res) => res.json())
+                    .then((out) => {
+                        let frames = createFrames(out);
+                        return frames
+                    })
+                    .then((obj) => {
+                        $('#video_frames').prepend(obj);
+                        $('#frame_loader').attr('hidden', true);
+                        $('#slidecontainer').attr('hidden', false);
+                    })
+                    .catch((error) => alert('this is the error: ' + error));
+            });
+
+            //displaying the activity percentages in the progress bars
+            function displayActivity(activity) {
+
+                //hiding the loader (for the frames)
+                $('#frame_loader').attr('hidden', true);
+
+                let src = "{% static '' %}FirstApp/videos/" + global_video_name;
+
+                //setting the video (set of frames)
+                $('video').attr({'hidden': false, 'src': src});
+
+
+                activity.response.map((act, index) => {
+                    //setting the percentage values
+                    $('#phone_perct').text(act.phone_perct + '%');
+                    $('#talking_perct').text(act.talking_perct + '%');
+                    $('#listening_perct').text(act.listening_perct + '%');
+                    $('#writing_perct').text(act.writing_perct + '%');
+
+                    //setting the width in the progress bars
+                    $('#phone_width').width(act.phone_perct + '%');
+                    $('#talking_width').width(act.talking_perct + '%');
+                    $('#listening_width').width(act.listening_perct + '%');
+                    $('#writing_width').width(act.writing_perct + '%');
+                });
+
+                //display the progress bar area
+                $('.progress_area').attr('hidden', false);
+            }
+
+            //to handle the 'btn-success' (process) button
+            $(document).on('click', '.btn-success', function (e) {
+
+                //sending the POST request to process the lecture activities
+                fetch('http://127.0.0.1:8000/process-lecture-activity/?lecture_video_name=' + global_video_name + '&lecture_video_id=' + global_lecture_video_id)
+                    .then((res) => res.json())
+                    .then((out) => handleResponse(out.response, e))
+                    .catch((error) => alert('error: ' + error));
+            });
+
+            //this is to change the button from 'process' to 'results'
+            function handleResponse(response, e) {
+                //change the button, if the response is positive
+                if (response) {
+                    e.target.parentNode.parentNode.lastChild.innerHTML = '<button type="button" class="btn btn-primary">Results</button>';
+                }
+            }
+
+
+            //this section is responsible for displaying the frames as  video
+            //creating the frame content
+            function createFrames(res) {
+                let main_frame_content = "<div class='row' id='main_frames'>";
+                main_frame_content += "<ul class='list-group list-group-horizontal'>";
+                let count = 0;
+                //loop through the frames
+                res.extracted.map((image) => {
+                    let img_src = "";
+                    let len = image.detections.length;
+
+
+                    if (count === 0) {
+                        main_frame_content += "<li class='list-group-item text-center' id='image_0'>";
+                        img_src = "<img src='{% static '' %}FirstApp/activity/" + global_video_name + "/" + res.extracted[0].frame + "/" + res.extracted[0].detections[0] + "' width='400' height='400'>";
+                    } else {
+                        main_frame_content += "<li class='list-group-item other-frames' id='image_" + count + "' hidden>";
+                        img_src = "<img src='{% static '' %}FirstApp/activity/" + global_video_name + "/" + image.frame + "/" + image.detections[len - 1] + "' class='img-link' width='400' height='400'>";
+                    }
+
+
+                    main_frame_content += img_src;
+                    main_frame_content += "</li>";
+                    count++;
+                });
+
+                main_frame_content += "</ul>";
+                main_frame_content += "</div>";
+
+
+                //setting the min, max values of the slider
+                $('#myActivityRange').attr({'min': 0, 'max': count});
+
+                //display the progress bars
+                displayActivity(res);
+
+                return main_frame_content;
+            }
+
+
+            //declaring the variable for setInterval function
+            let timeVar = null;
+
+            //handling the play button
+            $('#play_pause_icon_activity').click(function () {
+                //defining the two possible classes
+                let play_class = "fas fa-play";
+                let pause_class = "fas fa-pause";
+
+
+                //retrieving the current icon class
+                let current_class = $(this).attr('class');
+
+                //assigning the correct class based on the icon clicked
+                let new_class = (current_class === play_class) ? pause_class : play_class;
+
+                //setting the new class
+                $(this).attr('class', new_class);
+
+                //handling the slider
+                let slider = document.getElementById("myActivityRange");
+                let output = document.getElementById("demo");
+
+                //when the button is playing
+                if (current_class === play_class) {
+                    timeVar = setInterval(() => {
+                        let value = slider.value;
+                        let new_slider_value = Number(value) + 1;
+                        slider.value = new_slider_value;
+                        output.innerHTML = new_slider_value.toString();
+
+
+                        let selectedImage = '#image_' + Number(value);
+
+                        //displaying the relevant image
+                        $('#image_0').html($(selectedImage).html());
+
+                    }, 50);
+                }
+                //when the button is paused
+                else if (current_class === pause_class) {
+                    clearInterval(timeVar);
+                }
+
+
+            });
+
+
+            //handling the slider
+            let slider = document.getElementById("myActivityRange");
+            let output = document.getElementById("demo");
+            output.innerHTML = slider.value;
+
+            slider.oninput = function () {
+                output.innerHTML = this.value;
+                let selectedImage = '#image_' + Number(this.value);
+
+                //hide
+                {#$('#image_0').attr('hidden', true);#}
+                $('#image_0').html($(selectedImage).html());
+
+                //setting the selected image
+                {#$(selectedImage).attr('hidden', false);#}
+
+
+            };
+
+            $(document).on('click', '.img-link', function (e) {
+
+                //removing previously displayed detections
+                $('.detections').remove();
+
+                //removing the no-content message
+                $('#no_detection_message_content').hide();
+
+                //appearing the loader
+                $('#detection_loader').attr('hidden', false);
+
+                let img_src_arr = e.target.src.split('/');
+                let len = img_src_arr.length;
+                let src = img_src_arr[len - 1];
+                let frame_name_arr = src.split('.');
+                let frame_name = frame_name_arr[0];
+
+                //fetching the detection for the selected frame
+                fetch('http://127.0.0.1:8000/get-lecture-activity-frame-detection/?video_name=' + global_video_name + "&frame_name=" + frame_name)
+                    .then((res) => res.json())
+                    .then((out) => displayDetections(out.detections, frame_name))
+                    .catch((error) => alert('this is an error'));
+
+            });
+
+            //the function to display detections
+            function displayDetections(detections, frame_name) {
+                let img_string = '';
+                let no_of_detections = detections.length;
+
+                //disabling the loader
+                $('#detection_loader').attr('hidden', true);
+
+                //appearing the no of detections number area
+                $('#detection_number_area').attr('hidden', false);
+                $('#no_of_detections').text(no_of_detections);
+
+                detections.map((detection) => {
+                    img_string += "<img src='{% static '' %}FirstApp/activity/" + global_video_name + "/" + frame_name + "/" + detection + "' class='detections m-2' width='100' height='100' >"
+                });
+
+                $('#detection_frames').prepend(img_string);
+
+            }
+
+
+            //listening for click events in labels
+            $('.labels').click(function () {
+
+                let label = Number($(this).attr('data-number'));
+                let label_name = $(this).attr('data-label');
+
+                //removing the previous student detection lists
+                $('.student_detection_lists').remove();
+
+                //appearing the loader
+                $('#detection_student_loader').attr('hidden', false);
+                //appearing the loader
+                $('#activity_type').attr('hidden', false);
+                $('#activity_type_text').text(label_name);
+                //disappearing the no content message
+                $('#no_detection_student_content').attr('hidden', true);
+
+                //fetching from the api
+                fetch('http://127.0.0.1:8000/get-lecture-activity-detection-for-label/?video_name=' + global_video_name + '&label=' + label)
+                    .then((res) => res.json())
+                    .then((out) => createDetectedStudentFrames(out))
+                    .catch((error) => alert('this is the error: ' + error))
+            });
+
+
+            //creating the detected students frames
+            function createDetectedStudentFrames(detections) {
+
+                let htmlString = "";
+                //iterating through the student
+                detections.people.map((student) => {
+
+                    let title = student.split('.')[0];
+                    let images = "";
+                    htmlString += "<div class='row p-3 student-detection-rows'>";
+
+                    let student_count = 0;
+
+                    //iterating through the frames
+                    detections.response.map((frame) => {
+                        let frame_detections = frame.detections;
+
+                        if (frame_detections.includes(student)) {
+
+
+                            if (student_count === 0) {
+                                images += "<li class='list-group-item frame-0' id='image_0_" + title + "'>";
+                            } else {
+                                images += "<li class='list-group-item other-student-frames' id='image_" + student_count + "_" + title + "' hidden>";
+                            }
+
+                            images += "<img src='{% static '' %}FirstApp/Activity/" + global_video_name + "/" + frame.frame + "/" + student + "' width='200' height='200'>";
+                            images += "</li>";
+
+                            //increment the student count
+                            student_count++;
+                        }
+                    });
+
+                    htmlString += "<ul class='list-group'>";
+                    htmlString += "<li class='list-group-item'>";
+                    htmlString += "<div class='row m-3'>";
+                    htmlString += "<h4 class='font-weight-bold'>Student ID: <span>" + title + "</span></h4>";
+                    htmlString += "</div>";
+                    htmlString += "</li>";
+                    {#htmlString += "<div class='row m-3'></div>";#}
+                    htmlString += "<li class='list-group-item'>";
+                    htmlString += "<div class='row'>";
+                    htmlString += "<ul class='list-group list-group-horizontal student_detection_lists' style='overflow-x: scroll'>";
+                    htmlString += images;
+                    htmlString += "</ul>";
+                    htmlString += "</div>";
+                    htmlString += "</li>";
+                    htmlString += "<li class='list-group-item'>";
+                    htmlString += "<div class='slidecontainer'>";
+                    htmlString += "<div class='row m-3'></div>";
+                    htmlString += "<div class='row'>";
+                    htmlString += "<span><i class='fas fa-play play-pause-icon-student-frames' id='icon_" + title + "'></i></span>";
+                    htmlString += "</div>";
+                    htmlString += "<input type='range' min='1' max='100' value='0' class='slider' id='slider_" + title + "'>";
+                    htmlString += "<p>No of frames: <span id='demo_" + title + "'></span></p>";
+                    htmlString += "</div>";
+                    htmlString += "</div>";
+                    htmlString += "</li>";
+                    htmlString += "</ul>";
+                });
+
+                //disappearing the loader
+                $('#detection_student_loader').attr('hidden', true);
+
+                //append to the relevant html card content
+                $('#detection_students').append(htmlString);
+
+            }
+
+
+            let studentTimeVar = null;
+
+            //playing the frames for each student detection
+            $(document).on('click', '.play-pause-icon-student-frames', function (e) {
+
+                //defining the two possible classes
+                let play_class = "fas fa-play play-pause-icon-student-frames";
+                let pause_class = "fas fa-pause play-pause-icon-student-frames";
+
+
+                //retrieving the current icon class
+                let current_class = $(this).attr('class');
+
+
+                //assigning the correct class based on the icon clicked
+                let new_class = (current_class === play_class) ? pause_class : play_class;
+
+
+                //setting the new class
+                $(this).attr('class', new_class);
+
+                //extracting the title pf the clicked icon
+                let title_part = $(this).attr('id');
+                let title = title_part.split("_")[1];
+
+
+                //handling the slider
+                let slider = document.getElementById("slider_" + title);
+                let output = document.getElementById("demo_" + title);
+
+
+                //when the button is playing
+                if (current_class === play_class) {
+                    studentTimeVar = setInterval(() => {
+                        let value = slider.value;
+                        let new_slider_value = Number(value) + 1;
+                        slider.value = new_slider_value;
+                        output.innerHTML = new_slider_value.toString();
+
+
+                        let selectedImage = '#image_' + Number(value) + '_' + title;
+
+                        //displaying the relevant image
+                        $('#image_0_' + title).html($(selectedImage).html());
+
+                    }, 100);
+                }
+
+                //when the button is paused
+                else if (current_class === pause_class) {
+                    clearInterval(studentTimeVar);
+                }
+
+            });
+
+            //this is to handle the 'evaluate' button
+            $('#evaluate_button').click(function () {
+
+                //hide the message
+                $('#no_evaluated_student_content').attr('hidden', true);
+                //show the loader
+                $('#evaluate_student_loader').attr('hidden', false);
+
+
+                //using the fetch api
+                fetch('http://127.0.0.1:8000/get-lecture-activity-student-evaluation/?video_name=' + global_video_name)
+                    .then((res) => res.json())
+                    .then((out) => evaluate_student(out))
+                    .catch((error) => alert('this is the error: ' + error))
+            });
+
+
+            //to create html for evaluate function
+            function evaluate_student(response) {
+                let htmlString = "";
+                //iterating through the student
+                response.people.map((student) => {
+
+                    let title = student.split('.')[0];
+                    let images = "";
+                    htmlString += "<div class='row p-3 student-evaluation-rows'>";
+
+                    let student_count = 0;
+
+                    //iterating through the frames
+                    response.response.map((frame) => {
+                        let frame_detections = frame.detections;
+                        let frame_detection_length = frame_detections.length;
+
+                        if (frame_detections.includes(student)) {
+
+
+                            if (student_count === 0) {
+                                images += "<li class='list-group-item frame-0' id='image_0_evaluation" + title + "'>";
+                            } else {
+                                images += "<li class='list-group-item other-student-frames' id='image_evaluation" + student_count + "_" + title + "' hidden>";
+                            }
+
+                            images += "<img src='{% static '' %}FirstApp/Activity/" + global_video_name + "/" + frame.frame + "/" + student + "' width='200' height='200'>";
+                            images += "</li>";
+
+                            if (student_count === (frame_detection_length)) {
+                                images += "<li class='list-group-item'>";
+                                images += "<button type='button' class='btn btn-dark individual-evaluation' id='evaluate_student_" + title + "'>evaluate</button>";
+                                images += "</li>";
+                            }
+
+
+                            //increment the student count
+                            student_count++;
+                        }
+                    });
+
+                    htmlString += "<ul class='list-group'>";
+                    htmlString += "<li class='list-group-item'>";
+                    htmlString += "<div class='row m-3'>";
+                    htmlString += "<h4 class='font-weight-bold'>Student ID: <span>" + title + "</span></h4>";
+                    htmlString += "</div>";
+                    htmlString += "</li>";
+                    {#htmlString += "<div class='row m-3'></div>";#}
+                    htmlString += "<li class='list-group-item'>";
+                    htmlString += "<div class='row'>";
+                    htmlString += "<ul class='list-group list-group-horizontal student_detection_lists' style='overflow-x: scroll'>";
+                    htmlString += images;
+                    htmlString += "</ul>";
+                    htmlString += "</div>";
+                    htmlString += "</li>";
+                    htmlString += "<li class='list-group-item'>";
+                    htmlString += "<div class='slidecontainer'>";
+                    htmlString += "<div class='row m-3'></div>";
+                    htmlString += "<div class='row'>";
+                    htmlString += "<span><i class='fas fa-play play-pause-icon-student-evaluations' id='icon_" + title + "'></i></span>";
+                    htmlString += "</div>";
+                    htmlString += "<input type='range' min='1' max='100' value='0' class='slider' id='slider_evaluation" + title + "'>";
+                    htmlString += "<p>No of frames: <span id='demo_evaluation" + title + "'></span></p>";
+                    htmlString += "</div>";
+                    htmlString += "</div>";
+                    htmlString += "</li>";
+                    htmlString += "</ul>";
+                });
+
+                //disappearing the loader
+                $('#evaluate_student_loader').attr('hidden', true);
+
+                //append to the relevant html card content
+                $('#evaluation_students').append(htmlString);
+
+            }
+
+
+            //interval variable for individual students
+            let studentEvaluationVar = null;
+
+            //playing the frames for each student evaluation
+            $(document).on('click', '.play-pause-icon-student-evaluations', function (e) {
+
+                //defining the two possible classes
+                let play_class = "fas fa-play play-pause-icon-student-evaluations";
+                let pause_class = "fas fa-pause play-pause-icon-student-evaluations";
+
+
+                //retrieving the current icon class
+                let current_class = $(this).attr('class');
+
+
+                //assigning the correct class based on the icon clicked
+                let new_class = (current_class === play_class) ? pause_class : play_class;
+
+
+                //setting the new class
+                $(this).attr('class', new_class);
+
+                //extracting the title pf the clicked icon
+                let title_part = $(this).attr('id');
+                let title = title_part.split("_")[1];
+
+
+                //handling the slider
+                let slider = document.getElementById("slider_evaluation" + title);
+                let output = document.getElementById("demo_evaluation" + title);
+
+
+                //when the button is playing
+                if (current_class === play_class) {
+                    studentEvaluationVar = setInterval(() => {
+                        let value = slider.value;
+                        let new_slider_value = Number(value) + 1;
+                        slider.value = new_slider_value;
+                        output.innerHTML = new_slider_value.toString();
+
+
+                        let selectedImage = '#image_evaluation' + Number(value) + '_' + title;
+
+                        //displaying the relevant image
+                        $('#image_0_evaluation' + title).html($(selectedImage).html());
+
+                    }, 100);
+                }
+
+                //when the button is paused
+                else if (current_class === pause_class) {
+                    clearInterval(studentEvaluationVar);
+                }
+
+            });
+            //end of student evaluation video frame
+
+
+             //to evaluate the individual student
+            $(document).on('click', '.individual-evaluation', function (e) {
+
+                let individual_id = $(this).attr('id');
+                let student_name = individual_id.split('_')[2];
+                student_name += ".png";
+                let html = $(this).html();
+
+                //after clicking, change the html
+                $(this).html("<span class='font-italic'>loading...</span>");
+
+
+                //fetching from the API
+                fetch('http://127.0.0.1:8000/get-lecture-activity-individual-student-evaluation/?video_name=' + global_video_name + '&student_name=' + student_name)
+                    .then((res) => res.json())
+                    .then((out) => displayIndividualStudentActivity(out.response, e, student_name))
+                    .catch((error) => alert('something went wrong'));
+
+
+            });
+
+
+            //this function will display the individual student emotions
+            function displayIndividualStudentActivity(res, e, title) {
+
+                let phone_perct = Math.round(res.phone_perct, 1);
+                let writing_perct = Math.round(res.writing_perct, 1);
+                let listening_perct = Math.round(res.listening_perct, 1);
+
+                //set the percentage values
+                //$('#talking_individual_perct').text(res.talking_perct + '%');
+                $('#phone_individual_perct').text(phone_perct + '%');
+                $('#writing_individual_perct').text(writing_perct + '%');
+                $('#listening_individual_perct').text(listening_perct + '%');
+
+                //set the width
+                //$('#talking_individual_width').width(res.talking_perct + '%');
+                $('#phone_individual_width').width(phone_perct + '%');
+                $('#writing_individual_width').width(writing_perct + '%');
+                $('#listening_individual_width').width(listening_perct + '%');
+
+                //open the student individual modal
+                $('#student_individual_modal').modal();
+
+                //set the button to default
+                e.target.innerHTML = "<span>evaluate</span>";
+
+            }
+
+
+            //to handle the 'integrate' modal
+            $('#integrate_activity').click(function () {
+                //define the student video src
+                let video_src = "{% static '' %}FirstApp/videos/" + global_video_name;
+
+                //assign the video src
+                $('#student_video').attr('src', video_src);
+
+                $('#integrate_modal').modal();
+
+
+                //fetch data from the API
+                fetch('http://127.0.0.1:8000/get-lecture-activity-for-frame?video_name=' + global_video_name)
+                .then((res) => res.json())
+                .then((out) => displayActivityRecognitionForFrame(out.response))
+                .catch((err) => alert('error: ' + err));
+
+            });
+
+            //this function will load the activity recognition for frames
+            function displayActivityRecognitionForFrame(response) {
+                //hide the loader
+                $('#student_video_progress_loader').attr('hidden', true);
+                //show the progress bars
+                $('#student_video_progress').attr('hidden', false);
+
+                //creating the html string
+                let htmlString = "";
+
+                //creating the html string, iteratively
+                response.map((frame) => {
+                   let frame_name = frame.frame_name;
+                   let phone_perct = Math.round(frame.phone_perct, 0);
+                   let listen_perct = Math.round(frame.listening_perct, 0);
+                   let note_perct = Math.round(frame.note_perct, 0);
+
+                   //append to the html string
+                   //phone checking
+                   htmlString += "<div class='progress_area' id='progress_" +frame_name+ "' hidden>";
+                   htmlString += "<h4 class='small font-weight-bold'>Phone checking</h4>";
+                   htmlString += "<span class='float-right' id='phone_checking_instant_" +frame_name+ "'>" +phone_perct+ "%</span>";
+                   htmlString += "<div class='progress mb-4'>";
+                   htmlString += "<div class='progress-bar bg-warning' role='progressbar' id='phone_checking_instant_value_" +frame_name+ "' style='width: " +phone_perct+ "%' aria-valuenow='40' aria-valuemin='0' aria-valuemax='100'></div>";
+                   htmlString += "</div>";
+
+                   //note taking
+                   htmlString += "<h4 class='small font-weight-bold'>Writing</h4>";
+                   htmlString += "<span class='float-right' id='note_taking_instant_" +frame_name+ "'>" +note_perct+ "%</span>";
+                   htmlString += "<div class='progress mb-4'>";
+                   htmlString += "<div class='progress-bar' role='progressbar' id='note_taking_instant_value_" +frame_name+ "' style='width: " +note_perct+ "%' aria-valuenow='0' aria-valuemin='0' aria-valuemax='100'></div>";
+                   htmlString += "</div>";
+
+                   //listening
+                   htmlString += "<h4 class='small font-weight-bold'>Listening</h4>";
+                   htmlString += "<span class='float-right' id='listening_instant_" +frame_name+ "'>" +listen_perct+ "%</span>";
+                   htmlString += "<div class='progress mb-4'>";
+                   htmlString += "<div class='progress-bar bg-info' role='progressbar' id='listening_instant_value_" +frame_name+ "' style='width: " +listen_perct+ "%' aria-valuenow='80' aria-valuemin='0' aria-valuemax='100'></div>";
+                   htmlString += "</div>";
+
+                   //ending the progress area
+                   htmlString += "</div>";
+
+                });
+
+                //append the html
+                $('#student_video_column').append(htmlString);
+
+            }
+
+
+            //to handle the 'integrate' play button
+            $('#play_integrate_button').click(function () {
+                let video = $('video')[0];
+                let test_video = document.getElementsByTagName('video')[0];
+                let play_class = 'btn btn-outline-danger play';
+                let pause_class = 'btn btn-outline-danger pause';
+                let count = 0;
+
+                let classes = $(this).attr('class');
+
+
+                let video_interval = setInterval(() => {
+                    let talking_number = Math.round(Math.random() * 100, 0);
+                    let phone_number = Math.round(Math.random() * 100, 0);
+                    let note_number = Math.round(Math.random() * 100, 0);
+                    let listening_number = Math.round(Math.random() * 100, 0);
+
+                    //get the relevant progress area
+                    let progress_area = "progress_frame-" + count;
+                    let progress_area_id = "#" + progress_area;
+
+                    //find the corresponding progress area
+                    let progress_area_html = document.getElementById(progress_area);
+
+                    //display the retrieved progress area
+                    $(progress_area_id).attr('hidden', false);
+
+                    //replace the current progress area with the selected one
+                    $('#student_video_progress').html(progress_area_html);
+
+                    //increment the count
+                    count++;
+
+                    //setting the values
+                    /*
+                    $('#talking_instant').text(talking_number + '%');
+                    $('#phone_checking_instant').text(phone_number + '%');
+                    $('#note_taking_instant').text(note_number + '%');
+                    $('#listening_instant').text(listening_number + '%');
+
+                    //setting the width
+                    $('#talking_instant_value').width(talking_number + '%');
+                    $('#phone_checking_instant_value').width(phone_number + '%');
+                    $('#note_taking_instant_value').width(note_number + '%');
+                    $('#listening_instant_value').width(listening_number + '%');
+
+                     */
+                }, 1000);
+
+                //check for the current class
+                if (classes === play_class) {
+                    $(this).text('Pause');
+                    $(this).attr('class', pause_class);
+                    video.play();
+
+                } else if (classes === pause_class) {
+                    $(this).text('Play');
+                    $(this).attr('class', play_class);
+                    video.pause();
+
+                }
+                //function to do when the video is paused
+
+
+                //function to do when the video is ended
+                video.onended = function (e) {
+                    //stop changing the activity values
+                    clearInterval(video_interval);
+                }
+
+            });
+
+
+
+        });
+
+    </script>
+
+
+{% endblock %}
+
+<div id="wrapper">
+    <!-- Sidebar -->
+
+    <!-- Content Wrapper -->
+    <div id="content-wrapper" class="d-flex flex-column">
+
+        <!-- Main Content -->
+        <div id="content">
+
+            <!-- Begin Page Content -->
+            {% block 'container-fluid' %}
+                <div class="container-fluid">
+                    {% load static %}
+
+                    <!-- Page Heading -->
+                    <div class="d-sm-flex align-items-center justify-content-between mb-4">
+                        <h1 class="h3 mb-0 text-gray-800">Student Activity Recognition</h1>
+                    </div>
+
+                    <!--first row -->
+                    <div class="row p-2">
+
+                        <!--first column -->
+                        <div class="col-lg-6" style="overflow-x: scroll">
+                            <div class="card shadow mb-4">
+                                <!--card header -->
+                                <div class="card-header py-3">
+                                    <h5 class="m-0 font-weight-bold text-primary">Lecturer Subjects</h5>
+                                </div>
+
+                                <!--card body -->
+                                <div class="card-body">
+                                    {% if lecturer_subjects.count == 0 %}
+                                        <div class="text-center">
+                                            <span class="font-italic">No subjects</span>
+                                        </div>
+                                    {% else %}
+                                        <div class="table-responsive">
+                                            <table class="table table-bordered" id="datatable">
+                                                <thead>
+                                                <tr>
+                                                    <th></th>
+                                                    <th>Subject Name</th>
+                                                    <th>Code</th>
+                                                    <th>Year</th>
+                                                </tr>
+                                                </thead>
+                                                <tbody>
+                                                {% for subject in subjects %}
+                                                    <tr class="subjects not_clicked" id="{{ subject.0.subject_code }}">
+                                                        <td>
+                                                            <div class="radio">
+                                                                <label><input type="radio"
+                                                                              id="{{ subject.0.subject_code }}"
+                                                                              name="subject_radio"
+                                                                              data-name="{{ subject.0.name }}"
+                                                                              data-lecturer="{{ lecturer }}"></label>
+                                                            </div>
+                                                        </td>
+                                                        <td>{{ subject.0.name }}</td>
+                                                        <td>{{ subject.0.subject_code }}</td>
+                                                        <td>{{ subject.0.year }}</td>
+                                                    </tr>
+                                                {% endfor %}
+                                                </tbody>
+                                            </table>
+                                        </div>
+
+                                    {% endif %}
+                                </div>
+                            </div>
+                        </div>
+                        <!--end of first column -->
+
+                        <!--second column (timetable column) -->
+                        <div class="col-lg-6" style="overflow-x: scroll">
+                            <div class="card shadow mb-4">
+                                <!--card header -->
+                                <div class="card-header py-3">
+                                    <h5 class="m-0 font-weight-bold text-primary">View timetable</h5>
+                                </div>
+
+                                <!--card body -->
+                                <div class="card-body">
+
+                                    <!--loading gif -->
+                                    <div class="text-center" id="no_subject_selected">
+                                        <span class="font-italic">No lecture is selected</span>
+                                    </div>
+                                    <!--no lecture selected message -->
+                                    <div class="text-center" id="loader" hidden>
+                                        <img src="{% static 'FirstApp/images/ajax-loader.gif' %}" alt="Loader">
+                                    </div>
+                                    <!--no lecture selected message -->
+                                    <div class="text-center" id="no_timetable_content" hidden>
+                                        <span class="font-italic">Not included in the timetable</span>
+                                    </div>
+                                    <!--displaying the timetable -->
+                                    <table class="table table-striped" id="timetable" hidden>
+                                        {#                                    <caption id="timetable_caption"></caption>#}
+                                        <thead>
+                                        <tr>
+                                            <th>Date</th>
+                                            <th>Hall No.</th>
+                                            <th>start time</th>
+                                            <th>end time</th>
+                                        </tr>
+                                        </thead>
+                                        <tbody id="timetable_body">
+
+                                        </tbody>
+                                    </table>
+
+
+                                </div>
+                            </div>
+                        </div>
+                        <!--end of second column -->
+
+                    </div>
+                    <!--end of 1st row -->
+
+                    <!--2nd row -->
+                    <div class="row p-2">
+
+                        <!--1st column -->
+                        <div class="col-lg-6">
+                            <!--card content -->
+                            <div class="card shadow mb-4">
+                                <!--card header -->
+                                <div class="card-header py-3">
+                                    <h5 class="m-0 font-weight-bold text-primary">Activity Recognition</h5>
+                                </div>
+
+                                <!--card body -->
+                                <div class="card-body">
+
+                                    <!--nav tabs-->
+                                    <ul class="nav nav-tabs nav-fill" id="nav_bar" role="tablist">
+                                        <li class="nav-item">
+                                            <a class="nav-link active" id="frame-tab" data-toggle="tab" href="#frame"
+                                               role="tab" aria-controls="frame" aria-selected="true">Frame</a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a class="nav-link" id="graph-tab" data-toggle="tab" href="#graph"
+                                               role="tab" aria-controls="graph" aria-selected="false">Graphs</a>
+                                        </li>
+                                    </ul>
+
+                                    <!--tab content -->
+                                    <div class="tab-content" id="tabContentDetails">
+                                        <!--frame tab -->
+                                        <div class="tab-pane fade show active" id="frame" role="tabpanel"
+                                             aria-labelledby="home-tab">
+                                            <!--this area will display the frame -->
+                                            <div class="text-center" id="frame_area" style="height: 600px">
+                                                <!--temporary text -->
+                                                <span class="font-italic" id="temporary_text">Frame will be displayed here</span>
+
+                                                <!--loading buffer area-->
+                                                <div class="text-center" id="frame_loader" hidden>
+                                                    <img src="{% static 'FirstApp/images/ajax-loader.gif' %}"
+                                                         alt="Loader">
+                                                </div>
+
+                                                <!--frames -->.
+                                                <div class="text-center p-4" id="video_frames">
+                                                    <!-- slide container -->
+                                                    <div id="slidecontainer" hidden>
+                                                        <div class="row m-3"></div>
+                                                        <!-- play/pause icon -->
+                                                        <div class="row">
+                                                            <span><i class="fas fa-play"
+                                                                     id="play_pause_icon_activity"></i></span>
+                                                        </div>
+                                                        <input type="range" min="1" max="100" value="0" class="slider"
+                                                               id="myActivityRange">
+                                                        <p>No of frames: <span id="demo"></span></p>
+                                                    </div>
+                                                </div>
+                                            </div>
+
+                                            <!--this area will display the progress bars -->
+                                            <div class="progress_area" hidden>
+                                                <!--talking with friends -->
+                                                <a href="#" class="btn btn-link labels" data-number="1"
+                                                   data-label="talking-with-friends">
+                                                    <h4 class="small font-weight-bold">Talking with friends</h4>
+                                                </a>
+                                                <span class="float-right" id="talking_perct">40%</span>
+                                                <div class="progress mb-4">
+                                                    <div class="progress-bar bg-danger" role="progressbar"
+                                                         id="talking_width"
+                                                         style="width: 20%"
+                                                         aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
+                                                </div>
+
+                                                <!--phone checking -->
+                                                <a href="#" class="btn btn-link labels" data-number="0"
+                                                   data-label="phone-checking">
+                                                    <h4 class="small font-weight-bold">Phone checking</h4>
+                                                </a>
+                                                <span class="float-right" id="phone_perct">45%</span>
+                                                <div class="progress mb-4">
+                                                    <div class="progress-bar bg-warning" role="progressbar"
+                                                         id="phone_width"
+                                                         style="width: 40%"
+                                                         aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
+                                                </div>
+
+                                                <!--note taking -->
+                                                <a href="#" class="btn btn-link labels" data-number="2"
+                                                   data-label="note-taking">
+                                                    <h4 class="small font-weight-bold">Writing</h4>
+                                                </a>
+                                                <span class="float-right" id="writing_perct">50%</span>
+                                                <div class="progress mb-4">
+                                                    <div class="progress-bar" role="progressbar" id="writing_width"
+                                                         style="width: 60%"
+                                                         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
+                                                </div>
+
+                                                <!--listening-->
+                                                <a href="#" class="btn btn-link labels">
+                                                    <h4 class="small font-weight-bold">Listening</h4>
+                                                </a>
+                                                <span class="float-right" id="listening_perct">60%</span>
+                                                <div class="progress mb-4">
+                                                    <div class="progress-bar bg-info" role="progressbar"
+                                                         id="listening_width" style="width: 80%"
+                                                         aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
+                                                </div>
+
+                                                <!--evaluate button -->
+                                                <button type="button" class="btn btn-danger float-right"
+                                                        id="evaluate_button">Evaluate
+                                                </button>
+
+                                            </div>
+
+                                        </div>
+
+                                        <!--graph tab -->
+                                        <div class="tab-pane fade" id="graph" role="tabpanel"
+                                             aria-labelledby="profile-tab">
+                                            <!--card content -->
+                                            <div class="card shadow mb-4 p-3">
+                                                <!-- Card Header - Dropdown -->
+                                                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
+                                                    <h6 class="m-0 font-weight-bold text-primary">Student
+                                                        Activities</h6>
+                                                    <div class="dropdown no-arrow">
+                                                        <a class="dropdown-toggle" href="#" role="button"
+                                                           id="dropdownMenuLink" data-toggle="dropdown"
+                                                           aria-haspopup="true" aria-expanded="false">
+                                                            <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
+                                                        </a>
+                                                        <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in"
+                                                             aria-labelledby="dropdownMenuLink">
+                                                            <div class="dropdown-header">Dropdown Header:</div>
+                                                            <a class="dropdown-item" href="#">Action</a>
+                                                            <a class="dropdown-item" href="#">Another action</a>
+                                                            <div class="dropdown-divider"></div>
+                                                            <a class="dropdown-item" href="#">Something else here</a>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <!-- Card Body -->
+                                                <div class="card-body">
+                                                    <div class="chart-pie pt-4 pb-2">
+                                                        <canvas id="myPieChart"></canvas>
+                                                    </div>
+                                                    <div class="mt-4 text-center small">
+                    <span class="mr-2">
+                      <i class="fas fa-circle text-primary"></i> Direct
+                    </span>
+                                                        <span class="mr-2">
+                      <i class="fas fa-circle text-success"></i> Social
+                    </span>
+                                                        <span class="mr-2">
+                      <i class="fas fa-circle text-info"></i> Referral
+                    </span>
+                                                    </div>
+                                                </div>
+                                            </div>
+
+                                        </div>
+
+                                    </div>
+
+
+                                </div>
+                            </div>
+                        </div>
+
+
+                        <!--2nd column -->
+                        <div class="col-lg-6">
+                            <!--card content -->
+                            <div class="card shadow mb-4">
+                                <!--card header -->
+                                <div class="card-header py-3">
+                                    <h5 class="m-0 font-weight-bold text-primary">Frame Detections</h5>
+                                </div>
+
+                                <!--card body -->
+                                <div class="text-center p-4" id="detection_frames">
+
+                                    <!--no content message-->
+                                    <div class="text-center p-2" id="no_detection_message_content">
+                                        <span class="font-italic">No frame is selected</span>
+                                    </div>
+
+                                    <div class="text-left m-3" id="detection_number_area" hidden>
+                                        <p>No of detections: <span id="no_of_detections"></span></p>
+                                    </div>
+                                    <!--the detection loader -->
+                                    <div class="text-center p-2" id="detection_loader" hidden>
+                                        <img src="{% static 'FirstApp/images/ajax-loader.gif' %}"
+                                             alt="Loader">
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!--detection person card -->
+                            <div class="card shadow mb-4">
+                                <!--card header -->
+                                <div class="card-header py-3">
+                                    <h5 class="m-0 font-weight-bold text-primary">Detected Students (by activity
+                                        type)</h5>
+                                </div>
+
+                                <!--card body -->
+                                <div class="text-center p-4" id="detection_students">
+                                    <!--activity type line -->
+                                    <div class="text-center p-2" id="activity_type" hidden>
+                                        <p>Activity Type: <span class="font-weight-bold" id="activity_type_text"></span>
+                                        </p>
+                                    </div>
+
+                                    <!--no content message-->
+                                    <div class="text-center p-2" id="no_detection_student_content">
+                                        <span class="font-italic">No activity type is selected</span>
+                                    </div>
+
+                                    <!--the detection student loader -->
+                                    <div class="text-center p-2" id="detection_student_loader" hidden>
+                                        <img src="{% static 'FirstApp/images/ajax-loader.gif' %}"
+                                             alt="Loader">
+                                    </div>
+
+                                </div>
+                            </div>
+                        </div>
+
+
+                    </div>
+                    <!-- end of 2nd row -->
+
+                    <!--3rd row -->
+                    <div class="row p-2">
+
+                        <!--1st column -->
+                        <div class="col-lg-6">
+                            <!--card -->
+                            <div class="card shadow mb-4">
+                                <!--card header -->
+                                <div class="card-header">
+                                    <h5 class="m-0 font-weight-bold text-primary">Evaluated Students</h5>
+                                </div>
+
+                                <!--card body -->
+                                <div class="card-body" id="evaluation_students">
+
+                                    <!--no content message-->
+                                    <div class="text-center p-2" id="no_evaluated_student_content">
+                                        <span class="font-italic">Press 'Evaluate' button to evaluate students</span>
+                                    </div>
+
+                                    <!--the detection student loader -->
+                                    <div class="text-center p-2" id="evaluate_student_loader" hidden>
+                                        <img src="{% static 'FirstApp/images/ajax-loader.gif' %}"
+                                             alt="Loader">
+                                    </div>
+                                    <!--end of student detection loader -->
+
+
+                                </div>
+
+                            </div>
+
+
+                        </div>
+                        <!--end of 1st column -->
+
+                        <!--2nd column -->
+                        <div class="col-lg-6">
+                            <!--card -->
+                            <div class="card shadow mb-4">
+                                <!--card header -->
+                                <div class="card-header">
+                                    <h5 class="m-0 font-weight-bold text-primary">Integrated Evaluation</h5>
+                                </div>
+
+                                <!--card body -->
+                                <div class="card-body">
+                                    <div class="text-center" id="integrate_message">
+                                        <span class="font-italic">The integrated version student and lecturer evaluations will display here.</span>
+                                    </div>
+
+                                    <!--button -->
+                                    <div class="text-right m-4">
+                                        <button type="button" class="btn btn-outline-success" id="integrate_activity">
+                                            Process
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <!--end of 2nd column -->
+
+                    </div>
+                    <!--end of 3rd row -->
+
+
+                </div>
+            {% endblock %}
+            <!-- End of container-fluid -->
+
+        </div>
+        <!-- End of Main Content -->
+
+    </div>
+    <!-- End of Content Wrapper -->
+
+</div>
+
+{% block 'modal' %}
+    <!--Video detail modal -->
+    <div class="modal fade" id="video_modal" role="dialog" aria-labelledby="gif-body">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h2 class="modal-title">Video details</h2>
+                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">×</span>
+                    </button>
+                </div>
+
+                <div class="modal-body">
+                    <table class="table table-borderless">
+                        <tr>
+                            <td class="font-weight-bold">Video Name</td>
+                            <td id="video_name"></td>
+                        </tr>
+                        <tr>
+                            <td class="font-weight-bold">Duration</td>
+                            <td id="video_duration"></td>
+                        </tr>
+                        <tr>
+                            <td class="font-weight-bold">Date of Creation</td>
+                            <td id="video_date"></td>
+                        </tr>
+                    </table>
+                </div>
+
+                <!-- modal footer -->
+                <div class="modal-footer">
+                    <button type="button" data-dismiss="modal" class="btn btn-danger text-white">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!--end of Video details modal -->
+
+    <!-- individual evaluation modal -->
+    <div class="modal fade" id="student_individual_modal" role="dialog" aria-labelledby="gif-body">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h2 class="modal-title">Individual evaluation (Emotion)</h2>
+                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">×</span>
+                    </button>
+                </div>
+
+                <div class="modal-body">
+                    <div class="text-center">
+                        <!--progress area -->
+                        <div class="progress_area" hidden>
+                            <!--talking with friends -->
+                            <!--
+                            <h4 class="small font-weight-bold">Talking with friends</h4>
+                            <span class="float-right" id="talking_individual_perct">40%</span>
+                            <div class="progress mb-4">
+                                <div class="progress-bar bg-danger" role="progressbar"
+                                     id="talking_individual_width"
+                                     style="width: 20%"
+                                     aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
+                            </div>
+                            -->
+
+                            <!--phone checking -->
+                            <h4 class="small font-weight-bold">Phone checking</h4>
+                            <span class="float-right" id="phone_individual_perct">45%</span>
+                            <div class="progress mb-4">
+                                <div class="progress-bar bg-warning" role="progressbar"
+                                     id="phone_individual_width"
+                                     style="width: 40%"
+                                     aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
+                            </div>
+
+                            <!--writing -->
+                            <h4 class="small font-weight-bold">Writing</h4>
+                            <span class="float-right" id="writing_individual_perct">50%</span>
+                            <div class="progress mb-4">
+                                <div class="progress-bar" role="progressbar" id="writing_individual_width"
+                                     style="width: 60%"
+                                     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
+                            </div>
+
+                            <!--listening-->
+                            <h4 class="small font-weight-bold">Listening</h4>
+                            <span class="float-right" id="listening_individual_perct">60%</span>
+                            <div class="progress mb-4">
+                                <div class="progress-bar bg-info" role="progressbar"
+                                     id="listening_individual_width" style="width: 80%"
+                                     aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+
+                <!-- modal footer -->
+                <div class="modal-footer">
+                    <button type="button" data-dismiss="modal" class="btn btn-danger text-white">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- end of individual evaluation modal -->
+
+
+    <!-- Logout Modal-->
+    <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
+         aria-hidden="true">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
+                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">×</span>
+                    </button>
+                </div>
+                <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
+                <div class="modal-footer">
+                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
+                    <a class="btn btn-primary" href="/logout">Logout</a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <!--integrate modal -->
+    <div class="modal fade" id="integrate_modal" tabindex="-1" role="dialog" aria-labelledby="integrate_modal">
+        <div class="modal-dialog" style="max-width: 1300px">
+            <div class="modal-content">
+                <!--modal header -->
+                <div class="modal-header">
+                    <h4 class="modal-title">Integrated Version</h4>
+                </div>
+
+                <!--modal body -->
+                <div class="modal-body">
+                    <div class="container-fluid">
+                        <div class="row">
+                            <!--1st column -->
+                            <div class="col-md-6" id="student_video_column" style="border-right: 1px solid black">
+                                <div class="text-center">
+                                    <span class="h3 font-italic font-weight-bold">Student Behavior</span>
+                                </div>
+
+                                <!--display student video -->
+                                <div class="text-center m-3" id="student_video_section">
+                                    <video width="500" height="300" id="student_video" controls>
+                                        <source src="#"
+                                                type="video/mp4">
+                                        Your browser does not support the video tag.
+                                    </video>
+                                </div>
+                                <!--end of student video section -->
+
+                                <!-- ajax loader section -->
+                                <div class="text-center mt-3" id="student_video_progress_loader">
+                                    <img src="{% static 'FirstApp/images/ajax-loader-1.gif' %}" alt="loader">
+                                </div>
+
+                                <!--progress bar section -->
+                                <div class="progress_area" id="student_video_progress" hidden>
+                                    <!--talking with friends -->
+                                    <h4 class="small font-weight-bold">Talking with friends</h4>
+                                    <span class="float-right" id="talking_instant">0%</span>
+                                    <div class="progress mb-4">
+                                        <div class="progress-bar bg-danger" role="progressbar"
+                                             id="talking_instant_value"
+{#                                             style="width: 0%"#}
+                                             aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+
+                                    <!--phone checking -->
+
+                                    <h4 class="small font-weight-bold">Phone checking</h4>
+                                    <span class="float-right" id="phone_checking_instant">0%</span>
+                                    <div class="progress mb-4">
+                                        <div class="progress-bar bg-warning" role="progressbar"
+                                             id="phone_checking_instant_value"
+{#                                             style="width: 0%"#}
+                                             aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+
+                                    <!--note taking -->
+
+                                    <h4 class="small font-weight-bold">Writing</h4>
+                                    <span class="float-right" id="note_taking_instant">0%</span>
+                                    <div class="progress mb-4">
+                                        <div class="progress-bar" role="progressbar"
+                                             id="note_taking_instant_value"
+{#                                             style="width: 0%"#}
+                                             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+
+                                    <!--listening-->
+
+                                    <h4 class="small font-weight-bold">Listening</h4>
+                                    <span class="float-right" id="listening_instant">0%</span>
+                                    <div class="progress mb-4">
+                                        <div class="progress-bar bg-info" role="progressbar"
+                                             id="listening_instant_value"
+{#                                             style="width: 80%"#}
+                                             aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+
+                                </div>
+                                <!--end of progress bar section -->
+                            </div>
+                            <!--end of 1st column -->
+
+                            <!--2nd column -->
+                            <div class="col-md-6">
+                                <div class="text-center">
+                                    <span class="h3 font-italic font-weight-bold">Lecturer Performance</span>
+                                </div>
+
+                                <!--display lecture video -->
+                                <div class="text-center m-3" id="lecturer_video_section">
+                                    <!--temporary text -->
+                                    <div class="text-center" id="temp_lecturer_text">
+                                        <span class="font-italic">No video was found</span>
+                                    </div>
+
+
+                                    <video width="500" height="300" id="lecturer_video" controls>
+                                        <source src="#"
+                                                type="video/mp4">
+                                        Your browser does not support the video tag.
+                                    </video>
+
+                                </div>
+                                <!--end of lecture video section -->
+                            </div>
+                            <!--end of 2nd column -->
+                        </div>
+                        <!--end of 1st row -->
+
+                        <!--2nd row -->
+                        <div class="row">
+                            <!--play button -->
+                            <div class="col-md-12">
+
+                                <div class="text-center p-3">
+                                    <button type="button" class="btn btn-outline-danger play"
+                                            id="play_integrate_button">Play
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <!--end of 2nd row -->
+                    </div>
+                </div>
+
+                <!-- modal footer -->
+                <div class="modal-footer">
+                    <button type="button" data-dismiss="modal" class="btn btn-danger text-white">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!--end of integrate modal -->
+{% endblock %}
+
+</body>
+</html>
\ No newline at end of file

FirstApp/templates/FirstApp/base.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link rel="stylesheet" href="style.css">
+    <title>{% block title %}My amazing site{% endblock %}</title>
+</head>
+
+<body>
+    <div id="sidebar">
+        {% block sidebar %}
+        <ul>
+            <li><a href="/">Home</a></li>
+            <li><a href="/blog/">Blog</a></li>
+        </ul>
+        {% endblock %}
+    </div>
+
+    <div id="content">
+        {% block content %}{% endblock %}
+    </div>
+</body>
+</html>
\ No newline at end of file

FirstApp/templates/FirstApp/blank.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="">
+  <meta name="author" content="">
+
+  <title>SB Admin 2 - Blank</title>
+
+  <!-- Custom fonts for this template-->
+  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
+  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
+
+  <!-- Custom styles for this template-->
+  <link href="css/sb-admin-2.min.css" rel="stylesheet">
+
+</head>
+
+<body id="page-top">
+
+  <!-- Page Wrapper -->
+  <div id="wrapper">
+
+    <!-- Sidebar -->
+    <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
+
+      <!-- Sidebar - Brand -->
+      <a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
+        <div class="sidebar-brand-icon rotate-n-15">
+          <i class="fas fa-laugh-wink"></i>
+        </div>
+        <div class="sidebar-brand-text mx-3">SB Admin <sup>2</sup></div>
+      </a>
+
+      <!-- Divider -->
+      <hr class="sidebar-divider my-0">
+
+      <!-- Nav Item - Dashboard -->
+      <li class="nav-item">
+        <a class="nav-link" href="index.html">
+          <i class="fas fa-fw fa-tachometer-alt"></i>
+          <span>Dashboard</span></a>
+      </li>
+
+      <!-- Divider -->
+      <hr class="sidebar-divider">
+
+      <!-- Heading -->
+      <div class="sidebar-heading">
+        Interface
+      </div>
+
+      <!-- Nav Item - Pages Collapse Menu -->
+      <li class="nav-item">
+        <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
+          <i class="fas fa-fw fa-cog"></i>
+          <span>Components</span>
+        </a>
+        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
+          <div class="bg-white py-2 collapse-inner rounded">
+            <h6 class="collapse-header">Custom Components:</h6>
+            <a class="collapse-item" href="gaze.html">Buttons</a>
+            <a class="collapse-item" href="pose.html">Cards</a>
+          </div>
+        </div>
+      </li>
+
+      <!-- Nav Item - Utilities Collapse Menu -->
+      <li class="nav-item">
+        <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities" aria-expanded="true" aria-controls="collapseUtilities">
+          <i class="fas fa-fw fa-wrench"></i>
+          <span>Utilities</span>
+        </a>
+        <div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities" data-parent="#accordionSidebar">
+          <div class="bg-white py-2 collapse-inner rounded">
+            <h6 class="collapse-header">Custom Utilities:</h6>
+            <a class="collapse-item" href="utilities-color.html">Colors</a>
+            <a class="collapse-item" href="utilities-border.html">Borders</a>
+            <a class="collapse-item" href="utilities-animation.html">Animations</a>
+            <a class="collapse-item" href="utilities-other.html">Other</a>
+          </div>
+        </div>
+      </li>
+
+      <!-- Divider -->
+      <hr class="sidebar-divider">
+
+      <!-- Heading -->
+      <div class="sidebar-heading">
+        Addons
+      </div>
+
+      <!-- Nav Item - Pages Collapse Menu -->
+      <li class="nav-item active">
+        <a class="nav-link" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages">
+          <i class="fas fa-fw fa-folder"></i>
+          <span>Pages</span>
+        </a>
+        <div id="collapsePages" class="collapse show" aria-labelledby="headingPages" data-parent="#accordionSidebar">
+          <div class="bg-white py-2 collapse-inner rounded">
+            <h6 class="collapse-header">Login Screens:</h6>
+            <a class="collapse-item" href="login.html">Login</a>
+            <a class="collapse-item" href="register.html">Register</a>
+            <a class="collapse-item" href="forgot-password.html">Forgot Password</a>
+            <div class="collapse-divider"></div>
+            <h6 class="collapse-header">Other Pages:</h6>
+            <a class="collapse-item" href="404.html">404 Page</a>
+            <a class="collapse-item active" href="blank.html">Blank Page</a>
+          </div>
+        </div>
+      </li>
+
+      <!-- Nav Item - Charts -->
+      <li class="nav-item">
+        <a class="nav-link" href="charts.html">
+          <i class="fas fa-fw fa-chart-area"></i>
+          <span>Charts</span></a>
+      </li>
+
+      <!-- Nav Item - Tables -->
+      <li class="nav-item">
+        <a class="nav-link" href="tables.html">
+          <i class="fas fa-fw fa-table"></i>
+          <span>Tables</span></a>
+      </li>
+
+      <!-- Divider -->
+      <hr class="sidebar-divider d-none d-md-block">
+
+      <!-- Sidebar Toggler (Sidebar) -->
+      <div class="text-center d-none d-md-inline">
+        <button class="rounded-circle border-0" id="sidebarToggle"></button>
+      </div>
+
+    </ul>
+    <!-- End of Sidebar -->
+
+    <!-- Content Wrapper -->
+    <div id="content-wrapper" class="d-flex flex-column">
+
+      <!-- Main Content -->
+      <div id="content">
+
+        <!-- Topbar -->
+        <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
+
+          <!-- Sidebar Toggle (Topbar) -->
+          <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
+            <i class="fa fa-bars"></i>
+          </button>
+
+          <!-- Topbar Search -->
+          <form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
+            <div class="input-group">
+              <input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
+              <div class="input-group-append">
+                <button class="btn btn-primary" type="button">
+                  <i class="fas fa-search fa-sm"></i>
+                </button>
+              </div>
+            </div>
+          </form>
+
+          <!-- Topbar Navbar -->
+          <ul class="navbar-nav ml-auto">
+
+            <!-- Nav Item - Search Dropdown (Visible Only XS) -->
+            <li class="nav-item dropdown no-arrow d-sm-none">
+              <a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="fas fa-search fa-fw"></i>
+              </a>
+              <!-- Dropdown - Messages -->
+              <div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in" aria-labelledby="searchDropdown">
+                <form class="form-inline mr-auto w-100 navbar-search">
+                  <div class="input-group">
+                    <input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
+                    <div class="input-group-append">
+                      <button class="btn btn-primary" type="button">
+                        <i class="fas fa-search fa-sm"></i>
+                      </button>
+                    </div>
+                  </div>
+                </form>
+              </div>
+            </li>
+
+            <!-- Nav Item - Alerts -->
+            <li class="nav-item dropdown no-arrow mx-1">
+              <a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="fas fa-bell fa-fw"></i>
+                <!-- Counter - Alerts -->
+                <span class="badge badge-danger badge-counter">3+</span>
+              </a>
+              <!-- Dropdown - Alerts -->
+              <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="alertsDropdown">
+                <h6 class="dropdown-header">
+                  Alerts Center
+                </h6>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="mr-3">
+                    <div class="icon-circle bg-primary">
+                      <i class="fas fa-file-alt text-white"></i>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="small text-gray-500">December 12, 2019</div>
+                    <span class="font-weight-bold">A new monthly report is ready to download!</span>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="mr-3">
+                    <div class="icon-circle bg-success">
+                      <i class="fas fa-donate text-white"></i>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="small text-gray-500">December 7, 2019</div>
+                    $290.29 has been deposited into your account!
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="mr-3">
+                    <div class="icon-circle bg-warning">
+                      <i class="fas fa-exclamation-triangle text-white"></i>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="small text-gray-500">December 2, 2019</div>
+                    Spending Alert: We've noticed unusually high spending for your account.
+                  </div>
+                </a>
+                <a class="dropdown-item text-center small text-gray-500" href="#">Show All Alerts</a>
+              </div>
+            </li>
+
+            <!-- Nav Item - Messages -->
+            <li class="nav-item dropdown no-arrow mx-1">
+              <a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="fas fa-envelope fa-fw"></i>
+                <!-- Counter - Messages -->
+                <span class="badge badge-danger badge-counter">7</span>
+              </a>
+              <!-- Dropdown - Messages -->
+              <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="messagesDropdown">
+                <h6 class="dropdown-header">
+                  Message Center
+                </h6>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/fn_BT9fwg_E/60x60" alt="">
+                    <div class="status-indicator bg-success"></div>
+                  </div>
+                  <div class="font-weight-bold">
+                    <div class="text-truncate">Hi there! I am wondering if you can help me with a problem I've been having.</div>
+                    <div class="small text-gray-500">Emily Fowler · 58m</div>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/AU4VPcFN4LE/60x60" alt="">
+                    <div class="status-indicator"></div>
+                  </div>
+                  <div>
+                    <div class="text-truncate">I have the photos that you ordered last month, how would you like them sent to you?</div>
+                    <div class="small text-gray-500">Jae Chun · 1d</div>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/CS2uCrpNzJY/60x60" alt="">
+                    <div class="status-indicator bg-warning"></div>
+                  </div>
+                  <div>
+                    <div class="text-truncate">Last month's report looks great, I am very happy with the progress so far, keep up the good work!</div>
+                    <div class="small text-gray-500">Morgan Alvarez · 2d</div>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/Mv9hjnEUHR4/60x60" alt="">
+                    <div class="status-indicator bg-success"></div>
+                  </div>
+                  <div>
+                    <div class="text-truncate">Am I a good boy? The reason I ask is because someone told me that people say this to all dogs, even if they aren't good...</div>
+                    <div class="small text-gray-500">Chicken the Dog · 2w</div>
+                  </div>
+                </a>
+                <a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>
+              </div>
+            </li>
+
+            <div class="topbar-divider d-none d-sm-block"></div>
+
+            <!-- Nav Item - User Information -->
+            <li class="nav-item dropdown no-arrow">
+              <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <span class="mr-2 d-none d-lg-inline text-gray-600 small">Valerie Luna</span>
+                <img class="img-profile rounded-circle" src="https://source.unsplash.com/QAB-WJcbgJk/60x60">
+              </a>
+              <!-- Dropdown - User Information -->
+              <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
+                <a class="dropdown-item" href="#">
+                  <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Profile
+                </a>
+                <a class="dropdown-item" href="#">
+                  <i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Settings
+                </a>
+                <a class="dropdown-item" href="#">
+                  <i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Activity Log
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
+                  <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Logout
+                </a>
+              </div>
+            </li>
+
+          </ul>
+
+        </nav>
+        <!-- End of Topbar -->
+
+        <!-- Begin Page Content -->
+        <div class="container-fluid">
+
+          <!-- Page Heading -->
+          <h1 class="h3 mb-4 text-gray-800">Blank Page</h1>
+        </div>
+        <!-- /.container-fluid -->
+
+      </div>
+      <!-- End of Main Content -->
+
+      <!-- Footer -->
+      <footer class="sticky-footer bg-white">
+        <div class="container my-auto">
+          <div class="copyright text-center my-auto">
+            <span>Copyright &copy; Your Website 2019</span>
+          </div>
+        </div>
+      </footer>
+      <!-- End of Footer -->
+
+    </div>
+    <!-- End of Content Wrapper -->
+
+  </div>
+  <!-- End of Page Wrapper -->
+
+  <!-- Scroll to Top Button-->
+  <a class="scroll-to-top rounded" href="#page-top">
+    <i class="fas fa-angle-up"></i>
+  </a>
+
+  <!-- Logout Modal-->
+  <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
+          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">×</span>
+          </button>
+        </div>
+        <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
+          <a class="btn btn-primary" href="login.html">Logout</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Bootstrap core JavaScript-->
+  <script src="vendor/jquery/jquery.min.js"></script>
+  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+
+  <!-- Core plugin JavaScript-->
+  <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
+
+  <!-- Custom scripts for all pages-->
+  <script src="js/sb-admin-2.min.js"></script>
+
+</body>
+
+</html>

FirstApp/templates/FirstApp/charts.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="">
+  <meta name="author" content="">
+
+  <title>SB Admin 2 - Charts</title>
+
+  <!-- Custom fonts for this template-->
+  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
+  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
+
+  <!-- Custom styles for this template-->
+  <link href="css/sb-admin-2.min.css" rel="stylesheet">
+
+</head>
+
+<body id="page-top">
+
+  <!-- Page Wrapper -->
+  <div id="wrapper">
+
+    <!-- Sidebar -->
+    <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
+
+      <!-- Sidebar - Brand -->
+      <a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
+        <div class="sidebar-brand-icon rotate-n-15">
+          <i class="fas fa-laugh-wink"></i>
+        </div>
+        <div class="sidebar-brand-text mx-3">SB Admin <sup>2</sup></div>
+      </a>
+
+      <!-- Divider -->
+      <hr class="sidebar-divider my-0">
+
+      <!-- Nav Item - Dashboard -->
+      <li class="nav-item">
+        <a class="nav-link" href="index.html">
+          <i class="fas fa-fw fa-tachometer-alt"></i>
+          <span>Dashboard</span></a>
+      </li>
+
+      <!-- Divider -->
+      <hr class="sidebar-divider">
+
+      <!-- Heading -->
+      <div class="sidebar-heading">
+        Interface
+      </div>
+
+      <!-- Nav Item - Pages Collapse Menu -->
+      <li class="nav-item">
+        <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
+          <i class="fas fa-fw fa-cog"></i>
+          <span>Components</span>
+        </a>
+        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
+          <div class="bg-white py-2 collapse-inner rounded">
+            <h6 class="collapse-header">Custom Components:</h6>
+            <a class="collapse-item" href="gaze.html">Buttons</a>
+            <a class="collapse-item" href="pose.html">Cards</a>
+          </div>
+        </div>
+      </li>
+
+      <!-- Nav Item - Utilities Collapse Menu -->
+      <li class="nav-item">
+        <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities" aria-expanded="true" aria-controls="collapseUtilities">
+          <i class="fas fa-fw fa-wrench"></i>
+          <span>Utilities</span>
+        </a>
+        <div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities" data-parent="#accordionSidebar">
+          <div class="bg-white py-2 collapse-inner rounded">
+            <h6 class="collapse-header">Custom Utilities:</h6>
+            <a class="collapse-item" href="utilities-color.html">Colors</a>
+            <a class="collapse-item" href="utilities-border.html">Borders</a>
+            <a class="collapse-item" href="utilities-animation.html">Animations</a>
+            <a class="collapse-item" href="utilities-other.html">Other</a>
+          </div>
+        </div>
+      </li>
+
+      <!-- Divider -->
+      <hr class="sidebar-divider">
+
+      <!-- Heading -->
+      <div class="sidebar-heading">
+        Addons
+      </div>
+
+      <!-- Nav Item - Pages Collapse Menu -->
+      <li class="nav-item">
+        <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages">
+          <i class="fas fa-fw fa-folder"></i>
+          <span>Pages</span>
+        </a>
+        <div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
+          <div class="bg-white py-2 collapse-inner rounded">
+            <h6 class="collapse-header">Login Screens:</h6>
+            <a class="collapse-item" href="login.html">Login</a>
+            <a class="collapse-item" href="register.html">Register</a>
+            <a class="collapse-item" href="forgot-password.html">Forgot Password</a>
+            <div class="collapse-divider"></div>
+            <h6 class="collapse-header">Other Pages:</h6>
+            <a class="collapse-item" href="404.html">404 Page</a>
+            <a class="collapse-item" href="blank.html">Blank Page</a>
+          </div>
+        </div>
+      </li>
+
+      <!-- Nav Item - Charts -->
+      <li class="nav-item active">
+        <a class="nav-link" href="charts.html">
+          <i class="fas fa-fw fa-chart-area"></i>
+          <span>Charts</span></a>
+      </li>
+
+      <!-- Nav Item - Tables -->
+      <li class="nav-item">
+        <a class="nav-link" href="tables.html">
+          <i class="fas fa-fw fa-table"></i>
+          <span>Tables</span></a>
+      </li>
+
+      <!-- Divider -->
+      <hr class="sidebar-divider d-none d-md-block">
+
+      <!-- Sidebar Toggler (Sidebar) -->
+      <div class="text-center d-none d-md-inline">
+        <button class="rounded-circle border-0" id="sidebarToggle"></button>
+      </div>
+
+    </ul>
+    <!-- End of Sidebar -->
+
+    <!-- Content Wrapper -->
+    <div id="content-wrapper" class="d-flex flex-column">
+
+      <!-- Main Content -->
+      <div id="content">
+
+        <!-- Topbar -->
+        <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
+
+          <!-- Sidebar Toggle (Topbar) -->
+          <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
+            <i class="fa fa-bars"></i>
+          </button>
+
+          <!-- Topbar Search -->
+          <form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
+            <div class="input-group">
+              <input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
+              <div class="input-group-append">
+                <button class="btn btn-primary" type="button">
+                  <i class="fas fa-search fa-sm"></i>
+                </button>
+              </div>
+            </div>
+          </form>
+
+          <!-- Topbar Navbar -->
+          <ul class="navbar-nav ml-auto">
+
+            <!-- Nav Item - Search Dropdown (Visible Only XS) -->
+            <li class="nav-item dropdown no-arrow d-sm-none">
+              <a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="fas fa-search fa-fw"></i>
+              </a>
+              <!-- Dropdown - Messages -->
+              <div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in" aria-labelledby="searchDropdown">
+                <form class="form-inline mr-auto w-100 navbar-search">
+                  <div class="input-group">
+                    <input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
+                    <div class="input-group-append">
+                      <button class="btn btn-primary" type="button">
+                        <i class="fas fa-search fa-sm"></i>
+                      </button>
+                    </div>
+                  </div>
+                </form>
+              </div>
+            </li>
+
+            <!-- Nav Item - Alerts -->
+            <li class="nav-item dropdown no-arrow mx-1">
+              <a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="fas fa-bell fa-fw"></i>
+                <!-- Counter - Alerts -->
+                <span class="badge badge-danger badge-counter">3+</span>
+              </a>
+              <!-- Dropdown - Alerts -->
+              <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="alertsDropdown">
+                <h6 class="dropdown-header">
+                  Alerts Center
+                </h6>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="mr-3">
+                    <div class="icon-circle bg-primary">
+                      <i class="fas fa-file-alt text-white"></i>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="small text-gray-500">December 12, 2019</div>
+                    <span class="font-weight-bold">A new monthly report is ready to download!</span>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="mr-3">
+                    <div class="icon-circle bg-success">
+                      <i class="fas fa-donate text-white"></i>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="small text-gray-500">December 7, 2019</div>
+                    $290.29 has been deposited into your account!
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="mr-3">
+                    <div class="icon-circle bg-warning">
+                      <i class="fas fa-exclamation-triangle text-white"></i>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="small text-gray-500">December 2, 2019</div>
+                    Spending Alert: We've noticed unusually high spending for your account.
+                  </div>
+                </a>
+                <a class="dropdown-item text-center small text-gray-500" href="#">Show All Alerts</a>
+              </div>
+            </li>
+
+            <!-- Nav Item - Messages -->
+            <li class="nav-item dropdown no-arrow mx-1">
+              <a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="fas fa-envelope fa-fw"></i>
+                <!-- Counter - Messages -->
+                <span class="badge badge-danger badge-counter">7</span>
+              </a>
+              <!-- Dropdown - Messages -->
+              <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="messagesDropdown">
+                <h6 class="dropdown-header">
+                  Message Center
+                </h6>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/fn_BT9fwg_E/60x60" alt="">
+                    <div class="status-indicator bg-success"></div>
+                  </div>
+                  <div class="font-weight-bold">
+                    <div class="text-truncate">Hi there! I am wondering if you can help me with a problem I've been having.</div>
+                    <div class="small text-gray-500">Emily Fowler · 58m</div>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/AU4VPcFN4LE/60x60" alt="">
+                    <div class="status-indicator"></div>
+                  </div>
+                  <div>
+                    <div class="text-truncate">I have the photos that you ordered last month, how would you like them sent to you?</div>
+                    <div class="small text-gray-500">Jae Chun · 1d</div>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/CS2uCrpNzJY/60x60" alt="">
+                    <div class="status-indicator bg-warning"></div>
+                  </div>
+                  <div>
+                    <div class="text-truncate">Last month's report looks great, I am very happy with the progress so far, keep up the good work!</div>
+                    <div class="small text-gray-500">Morgan Alvarez · 2d</div>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/Mv9hjnEUHR4/60x60" alt="">
+                    <div class="status-indicator bg-success"></div>
+                  </div>
+                  <div>
+                    <div class="text-truncate">Am I a good boy? The reason I ask is because someone told me that people say this to all dogs, even if they aren't good...</div>
+                    <div class="small text-gray-500">Chicken the Dog · 2w</div>
+                  </div>
+                </a>
+                <a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>
+              </div>
+            </li>
+
+            <div class="topbar-divider d-none d-sm-block"></div>
+
+            <!-- Nav Item - User Information -->
+            <li class="nav-item dropdown no-arrow">
+              <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <span class="mr-2 d-none d-lg-inline text-gray-600 small">Valerie Luna</span>
+                <img class="img-profile rounded-circle" src="https://source.unsplash.com/QAB-WJcbgJk/60x60">
+              </a>
+              <!-- Dropdown - User Information -->
+              <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
+                <a class="dropdown-item" href="#">
+                  <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Profile
+                </a>
+                <a class="dropdown-item" href="#">
+                  <i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Settings
+                </a>
+                <a class="dropdown-item" href="#">
+                  <i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Activity Log
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
+                  <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Logout
+                </a>
+              </div>
+            </li>
+
+          </ul>
+
+        </nav>
+        <!-- End of Topbar -->
+
+        <!-- Begin Page Content -->
+        <div class="container-fluid">
+
+          <!-- Page Heading -->
+          <h1 class="h3 mb-2 text-gray-800">Charts</h1>
+          <p class="mb-4">Chart.js is a third party plugin that is used to generate the charts in this theme. The charts below have been customized - for further customization options, please visit the <a target="_blank" href="https://www.chartjs.org/docs/latest/">official Chart.js documentation</a>.</p>
+
+          <!-- Content Row -->
+          <div class="row">
+
+            <div class="col-xl-8 col-lg-7">
+
+              <!-- Area Chart -->
+              <div class="card shadow mb-4">
+                <div class="card-header py-3">
+                  <h6 class="m-0 font-weight-bold text-primary">Area Chart</h6>
+                </div>
+                <div class="card-body">
+                  <div class="chart-area">
+                    <canvas id="myAreaChart"></canvas>
+                  </div>
+                  <hr>
+                  Styling for the area chart can be found in the <code>/js/demo/chart-area-demo.js</code> file.
+                </div>
+              </div>
+
+              <!-- Bar Chart -->
+              <div class="card shadow mb-4">
+                <div class="card-header py-3">
+                  <h6 class="m-0 font-weight-bold text-primary">Bar Chart</h6>
+                </div>
+                <div class="card-body">
+                  <div class="chart-bar">
+                    <canvas id="myBarChart"></canvas>
+                  </div>
+                  <hr>
+                  Styling for the bar chart can be found in the <code>/js/demo/chart-bar-demo.js</code> file.
+                </div>
+              </div>
+
+            </div>
+
+            <!-- Donut Chart -->
+            <div class="col-xl-4 col-lg-5">
+              <div class="card shadow mb-4">
+                <!-- Card Header - Dropdown -->
+                <div class="card-header py-3">
+                  <h6 class="m-0 font-weight-bold text-primary">Donut Chart</h6>
+                </div>
+                <!-- Card Body -->
+                <div class="card-body">
+                  <div class="chart-pie pt-4">
+                    <canvas id="myPieChart"></canvas>
+                  </div>
+                  <hr>
+                  Styling for the donut chart can be found in the <code>/js/demo/chart-pie-demo.js</code> file.
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+        <!-- /.container-fluid -->
+
+      </div>
+      <!-- End of Main Content -->
+
+      <!-- Footer -->
+      <footer class="sticky-footer bg-white">
+        <div class="container my-auto">
+          <div class="copyright text-center my-auto">
+            <span>Copyright &copy; Your Website 2019</span>
+          </div>
+        </div>
+      </footer>
+      <!-- End of Footer -->
+
+    </div>
+    <!-- End of Content Wrapper -->
+
+  </div>
+  <!-- End of Page Wrapper -->
+
+  <!-- Scroll to Top Button-->
+  <a class="scroll-to-top rounded" href="#page-top">
+    <i class="fas fa-angle-up"></i>
+  </a>
+
+  <!-- Logout Modal-->
+  <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
+          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">×</span>
+          </button>
+        </div>
+        <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
+          <a class="btn btn-primary" href="login.html">Logout</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Bootstrap core JavaScript-->
+  <script src="vendor/jquery/jquery.min.js"></script>
+  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+
+  <!-- Core plugin JavaScript-->
+  <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
+
+  <!-- Custom scripts for all pages-->
+  <script src="js/sb-admin-2.min.js"></script>
+
+  <!-- Page level plugins -->
+  <script src="vendor/chart.js/Chart.min.js"></script>
+
+  <!-- Page level custom scripts -->
+  <script src="js/demo/chart-area-demo.js"></script>
+  <script src="js/demo/chart-pie-demo.js"></script>
+  <script src="js/demo/chart-bar-demo.js"></script>
+
+</body>
+
+</html>

FirstApp/templates/FirstApp/child.html

+{% extends "FirstApp/base.html" %}
+
+{% block title %}My amazing blog{% endblock %}
+
+{% block content %}
+{% for entry in blog_entries %}
+    <h2>{{ entry.title }}</h2>
+    <p>{{ entry.body }}</p>
+{% endfor %}
+{% endblock %}
\ No newline at end of file

FirstApp/templates/FirstApp/emotion.html

+{% extends 'FirstApp/template.html' %}
+<!DOCTYPE html>
+<html lang="en">
+<body id="page-top">
+<!-- Page Wrapper -->
+
+{% block javascript %}
+    {% load static %}
+
+    <!-- Bootstrap core JavaScript-->
+    <script src="{% static 'FirstApp/vendor/jquery/jquery.min.js' %}"></script>
+    <script src="{% static 'FirstApp/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
+
+    <!-- Page level plugins -->
+    <script src="{% static 'FirstApp/vendor/datatables/jquery.dataTables.min.js' %}"></script>
+    <script src="{% static 'FirstApp/vendor/datatables/dataTables.bootstrap4.min.js' %}"></script>
+
+    <!-- Page level custom scripts -->
+    <script src="{% static 'FirstApp/js/demo/datatables-demo.js' %}"></script>
+
+    <!-- Core plugin JavaScript-->
+    <script src="{% static 'FirstApp/vendor/jquery-easing/jquery.easing.min.js' %}"></script>
+
+
+    <script type="text/javascript">
+
+        var global_subject = '';
+        var global_lecturer = '';
+        var global_lecture_video_id = '';
+        var global_video_name = '';
+        var global_lecturer_subject_index = 0;
+
+        //jquery
+        $(document).ready(function () {
+
+            //select a particular subject
+            $('input[type=radio]').click(function () {
+                let subject_id = $(this).attr('id');
+                global_subject = subject_id;
+                let lecturer = $(this).attr('data-lecturer');
+                global_lecturer = lecturer;
+                let subject_name = $(this).attr('data-name');
+
+                $('#timetable').attr('hidden', true);
+                $('#no_timetable_content').attr('hidden', true);
+                $('.student-detection-rows').remove();
+
+                $('#timetable_body').children().map(function () {
+                    $(this).remove();
+                });
+
+
+                $('#no_subject_selected').attr('hidden', true);
+
+                $('#timetable_caption').text('subject: ' + subject_name);
+                $('#loader').attr('hidden', false);
+
+                //fetching the timetable from the db
+                fetch('http://127.0.0.1:8000/timetables')
+                    .then((res) => res.json())
+                    .then((out) => createTimeTable(out, subject_id, lecturer))
+                    .catch((error) => alert('this is the error: ' + error))
+
+            });
+
+
+            $(document).on('click', '.btn-info', function (e) {
+
+                let clicked_class = e.target.className;
+                let object = e;
+                let real_class = clicked_class.split(' ')[1];
+                real_class = '.' + real_class;
+
+                let date = e.target.parentNode.parentNode.firstChild.innerHTML;
+
+                fetch('http://127.0.0.1:8000/get-lecture-emotion-availability/?lecturer=' + global_lecturer + '&date=' + date + '&index=' + global_lecturer_subject_index)
+                    .then((res) => res.json())
+                    .then((out) => displayLectureVideoDetails(out, object))
+                    .catch((error) => alert('an error occurred: ' + error));
+            });
+
+            //this function will create a timetable
+            function createTimeTable(timetable, subject, lecturer) {
+                $('#loader').attr('hidden', true);
+                $('#timetable').attr('hidden', false);
+                let isTimetableSubject = false;
+
+                timetable.map((item, i) => {
+                    item.timetable.map((table, index) => {
+
+                        let lecturer_subject_index_arr = [];
+
+
+                        //to get the number of subjects taught by the lecturer in a day
+                        table.time_slots.forEach((slot1, ind) => {
+                            let isLecturer = slot1.lecturer.id === Number(lecturer);
+
+                            if (isLecturer) {
+                                lecturer_subject_index_arr.push(ind);
+                            }
+                        });
+
+
+                        //iterating each slot (for a given day)
+                        table.time_slots.forEach((slot, in1) => {
+                            let isLecturer = slot.lecturer.id === Number(lecturer);
+                            let isLecSubject = slot.subject.subject_code === subject;
+                            if (isLecturer && isLecSubject) {
+                                let html = '';
+                                global_lecturer_subject_index = lecturer_subject_index_arr.findIndex((inner) => inner === in1);
+                                isTimetableSubject = true;
+                                html += "<tr class='lecture-details'><td class='slot_date'>" + table.date + "</td>"
+                                    + "<td>" + slot.location + "</td>"
+                                    + "<td>" + slot.start_time + "</td>"
+                                    + "<td>" + slot.end_time + "</td>"
+                                    + "<td><button type='button' class='btn btn-info'>Video</button></td>"
+                                    + "<td></td>"
+                                    + "</tr>";
+
+                                $('#timetable_body').append(html);
+
+                            }
+                        });
+                    });
+
+                    if (!isTimetableSubject) {
+                        $('#timetable').attr('hidden', true);
+                        $('#no_timetable_content').attr('hidden', false);
+                    }
+
+
+                });
+            }
+
+            //function to display lecture video details
+            function displayLectureVideoDetails(lectureVideo, e) {
+
+                //get the lecture video response
+                let video = lectureVideo.response;
+
+                $('#video_name').text(video.video_name);
+                $('#video_duration').text(video.video_length);
+                $('#video_date').text(video.date);
+                global_lecture_video_id = video.lecture_video_id;
+                global_video_name = video.video_name;
+
+
+                if (lectureVideo.isActivityFound) {
+                    e.target.parentNode.parentNode.lastChild.innerHTML = '<button type="button" class="btn btn-primary">Results</button>';
+                } else {
+                    e.target.parentNode.parentNode.lastChild.innerHTML = '<button type="button" class="btn btn-success">Process</button>';
+                }
+
+                $('#video_modal').modal();
+            }
+
+            //binding a click event for 'btn-primary' buttons
+            $(document).on('click', '.btn-primary', function (e) {
+
+                //removing the previous frames (if there is any)
+                $('#main_frames').remove();
+                //removing the previous evaluations
+                $('.student-evaluation-rows').remove();
+
+                //displaying the loader (for the frames)
+                $('#frame_loader').attr('hidden', false);
+                //hiding the temporary text
+                $('#temporary_text').attr('hidden', true);
+
+                fetch('http://127.0.0.1:8000/get-lecture-emotion/?lecture_video_id=' + global_lecture_video_id + '&lecture_video_name=' + global_video_name)
+                    .then((res) => res.json())
+                    .then((out) => {
+                        let frames = createFrames(out);
+                        return frames
+                    })
+                    .then((obj) => {
+                        $('#video_frames').prepend(obj);
+                        $('#frame_loader').attr('hidden', true);
+                        $('#slidecontainer').attr('hidden', false);
+                    })
+                    .catch((error) => alert('this is the error: ' + error));
+            });
+
+            //displaying the activity percentages in the progress bars
+            function displayActivity(activity) {
+
+                //hiding the loader (for the frames)
+                $('#frame_loader').attr('hidden', true);
+
+                let src = "{% static '' %}FirstApp/videos/" + global_video_name;
+
+                //setting the video (set of frames)
+                $('video').attr({'hidden': false, 'src': src});
+
+
+                activity.response.map((act, index) => {
+                    //setting the percentage values
+                    alert('happy perct: ' + act);
+                    $('#happy_perct').text(act.happy_perct + '%');
+                    $('#sad_perct').text(act.sad_perct + '%');
+                    $('#anger_perct').text(act.angry_perct + '%');
+                    $('#surprise_perct').text(act.surprise_perct + '%');
+                    $('#neutral_perct').text(act.neutral_perct + '%');
+
+                    //setting the width in the progress bars
+                    $('#happy_width').width(act.happy_perct + '%');
+                    $('#sad_width').width(act.sad_perct + '%');
+                    $('#anger_width').width(act.angry_perct + '%');
+                    $('#surprise_width').width(act.surprise_perct + '%');
+                    $('#neutral_width').width(act.neutral_perct + '%');
+                });
+
+                //display the progress bar area
+                $('.progress_area').attr('hidden', false);
+            }
+
+            //to handle the 'btn-success' (process) button
+            $(document).on('click', '.btn-success', function (e) {
+
+                //sending the POST request to process the lecture activities
+                fetch('http://127.0.0.1:8000/process-lecture-emotion/?lecture_video_name=' + global_video_name + '&lecture_video_id=' + global_lecture_video_id)
+                    .then((res) => res.json())
+                    .then((out) => handleResponse(out.response, e))
+                    .catch((error) => alert('error: ' + error));
+            });
+
+            //this is to change the button from 'process' to 'results'
+            function handleResponse(response, e) {
+                //change the button, if the response is positive
+                if (response) {
+                    e.target.parentNode.parentNode.lastChild.innerHTML = '<button type="button" class="btn btn-primary">Results</button>';
+                }
+            }
+
+
+            //this section is responsible for displaying the frames as  video
+            //creating the frame content
+            function createFrames(res) {
+                let main_frame_content = "<div class='row' id='main_frames'>";
+                main_frame_content += "<ul class='list-group list-group-horizontal'>";
+                let count = 0;
+                //loop through the frames
+                res.extracted.map((image) => {
+                    let img_src = "";
+                    let len = image.detections.length;
+
+
+                    if (count === 0) {
+                        main_frame_content += "<li class='list-group-item text-center' id='image_0'>";
+                        img_src = "<img src='{% static '' %}FirstApp/activity/" + global_video_name + "/" + res.extracted[0].frame + "/" + res.extracted[0].detections[0] + "' width='400' height='400'>";
+                    } else {
+                        main_frame_content += "<li class='list-group-item other-frames' id='image_" + count + "' hidden>";
+                        img_src = "<img src='{% static '' %}FirstApp/activity/" + global_video_name + "/" + image.frame + "/" + image.detections[len - 1] + "' class='img-link' width='400' height='400'>";
+                    }
+
+
+                    main_frame_content += img_src;
+                    main_frame_content += "</li>";
+                    count++;
+                });
+
+                main_frame_content += "</ul>";
+                main_frame_content += "</div>";
+
+
+                //setting the min, max values of the slider
+                $('#myActivityRange').attr({'min': 0, 'max': count});
+
+                //display the progress bars
+                displayActivity(res);
+
+                return main_frame_content;
+            }
+
+
+            //declaring the variable for setInterval function
+            let timeVar = null;
+
+            //handling the play button
+            $('#play_pause_icon_activity').click(function () {
+                //defining the two possible classes
+                let play_class = "fas fa-play";
+                let pause_class = "fas fa-pause";
+
+
+                //retrieving the current icon class
+                let current_class = $(this).attr('class');
+
+                //assigning the correct class based on the icon clicked
+                let new_class = (current_class === play_class) ? pause_class : play_class;
+
+                //setting the new class
+                $(this).attr('class', new_class);
+
+                //handling the slider
+                let slider = document.getElementById("myActivityRange");
+                let output = document.getElementById("demo");
+
+                //when the button is playing
+                if (current_class === play_class) {
+                    timeVar = setInterval(() => {
+                        let value = slider.value;
+                        let new_slider_value = Number(value) + 1;
+                        slider.value = new_slider_value;
+                        output.innerHTML = new_slider_value.toString();
+
+
+                        let selectedImage = '#image_' + Number(value);
+
+                        //displaying the relevant image
+                        $('#image_0').html($(selectedImage).html());
+
+                    }, 50);
+                }
+                //when the button is paused
+                else if (current_class === pause_class) {
+                    clearInterval(timeVar);
+                }
+
+
+            });
+
+
+            //handling the slider
+            let slider = document.getElementById("myActivityRange");
+            let output = document.getElementById("demo");
+            output.innerHTML = slider.value;
+
+            slider.oninput = function () {
+                output.innerHTML = this.value;
+                let selectedImage = '#image_' + Number(this.value);
+
+                //hide
+                {#$('#image_0').attr('hidden', true);#}
+                $('#image_0').html($(selectedImage).html());
+
+                //setting the selected image
+                {#$(selectedImage).attr('hidden', false);#}
+
+
+            };
+
+            $(document).on('click', '.img-link', function (e) {
+
+                //removing previously displayed detections
+                $('.detections').remove();
+
+                //removing the no-content message
+                $('#no_detection_message_content').hide();
+
+                //appearing the loader
+                $('#detection_loader').attr('hidden', false);
+
+                let img_src_arr = e.target.src.split('/');
+                let len = img_src_arr.length;
+                let src = img_src_arr[len - 1];
+                let frame_name_arr = src.split('.');
+                let frame_name = frame_name_arr[0];
+
+                //fetching the detection for the selected frame
+                fetch('http://127.0.0.1:8000/get-lecture-activity-frame-detection/?video_name=' + global_video_name + "&frame_name=" + frame_name)
+                    .then((res) => res.json())
+                    .then((out) => displayDetections(out.detections, frame_name))
+                    .catch((error) => alert('this is an error'));
+
+            });
+
+            //the function to display detections
+            function displayDetections(detections, frame_name) {
+                let img_string = '';
+                let no_of_detections = detections.length;
+
+                //disabling the loader
+                $('#detection_loader').attr('hidden', true);
+
+                //appearing the no of detections number area
+                $('#detection_number_area').attr('hidden', false);
+                $('#no_of_detections').text(no_of_detections);
+
+                detections.map((detection) => {
+                    img_string += "<img src='{% static '' %}FirstApp/activity/" + global_video_name + "/" + frame_name + "/" + detection + "' class='detections m-2' width='100' height='100' >"
+                });
+
+                $('#detection_frames').prepend(img_string);
+
+            }
+
+
+            //listening for click events in labels
+            $('.labels').click(function () {
+
+                let label = Number($(this).attr('data-number'));
+                let label_name = $(this).attr('data-label');
+
+                //removing the previous student detection lists
+                $('.student_detection_lists').remove();
+
+                //appearing the loader
+                $('#detection_student_loader').attr('hidden', false);
+                //appearing the loader
+                $('#activity_type').attr('hidden', false);
+                $('#activity_type_text').text(label_name);
+                //disappearing the no content message
+                $('#no_detection_student_content').attr('hidden', true);
+
+                //fetching from the api
+                fetch('http://127.0.0.1:8000/get-lecture-activity-detection-for-label/?video_name=' + global_video_name + '&label=' + label)
+                    .then((res) => res.json())
+                    .then((out) => createDetectedStudentFrames(out))
+                    .catch((error) => alert('this is the error: ' + error))
+            });
+
+
+            //creating the detected students frames
+            function createDetectedStudentFrames(detections) {
+
+                let htmlString = "";
+                //iterating through the student
+                detections.people.map((student) => {
+
+                    let title = student.split('.')[0];
+                    let images = "";
+                    htmlString += "<div class='row p-3 student-detection-rows'>";
+
+                    let student_count = 0;
+
+                    //iterating through the frames
+                    detections.response.map((frame) => {
+                        let frame_detections = frame.detections;
+
+                        if (frame_detections.includes(student)) {
+
+
+                            if (student_count === 0) {
+                                images += "<li class='list-group-item frame-0' id='image_0_" + title + "'>";
+                            } else {
+                                images += "<li class='list-group-item other-student-frames' id='image_" + student_count + "_" + title + "' hidden>";
+                            }
+
+                            images += "<img src='{% static '' %}FirstApp/Activity/" + global_video_name + "/" + frame.frame + "/" + student + "' width='200' height='200'>";
+                            images += "</li>";
+
+                            //increment the student count
+                            student_count++;
+                        }
+                    });
+
+                    htmlString += "<h6 class='font-italic'>" + title + "</h6>";
+                    htmlString += "<ul class='list-group list-group-horizontal student_detection_lists' style='overflow-x: scroll'>";
+                    htmlString += images;
+                    htmlString += "</ul>";
+                    htmlString += "<div class='slidecontainer'>";
+                    htmlString += "<div class='row m-3'></div>";
+                    htmlString += "<div class='row'>";
+                    htmlString += "<span><i class='fas fa-play play-pause-icon-student-frames' id='icon_" + title + "'></i></span>";
+                    htmlString += "</div>";
+                    htmlString += "<input type='range' min='1' max='100' value='0' class='slider' id='slider_" + title + "'>";
+                    htmlString += "<p>No of frames: <span id='demo_" + title + "'></span></p>";
+                    htmlString += "</div>";
+                    htmlString += "</div>";
+                });
+
+                //disappearing the loader
+                $('#detection_student_loader').attr('hidden', true);
+
+                //append to the relevant html card content
+                $('#detection_students').append(htmlString);
+
+            }
+
+
+            let studentTimeVar = null;
+
+            //playing the frames for each student detection (by label)
+            $(document).on('click', '.play-pause-icon-student-frames', function (e) {
+
+                //defining the two possible classes
+                let play_class = "fas fa-play play-pause-icon-student-frames";
+                let pause_class = "fas fa-pause play-pause-icon-student-frames";
+
+
+                //retrieving the current icon class
+                let current_class = $(this).attr('class');
+
+
+                //assigning the correct class based on the icon clicked
+                let new_class = (current_class === play_class) ? pause_class : play_class;
+
+
+                //setting the new class
+                $(this).attr('class', new_class);
+
+                //extracting the title pf the clicked icon
+                let title_part = $(this).attr('id');
+                let title = title_part.split("_")[1];
+
+
+                //handling the slider
+                let slider = document.getElementById("slider_" + title);
+                let output = document.getElementById("demo_" + title);
+
+
+                //when the button is playing
+                if (current_class === play_class) {
+                    studentTimeVar = setInterval(() => {
+                        let value = slider.value;
+                        let new_slider_value = Number(value) + 1;
+                        slider.value = new_slider_value;
+                        output.innerHTML = new_slider_value.toString();
+
+
+                        let selectedImage = '#image_' + Number(value) + '_' + title;
+
+                        //displaying the relevant image
+                        $('#image_0_' + title).html($(selectedImage).html());
+
+                    }, 100);
+                }
+
+                //when the button is paused
+                else if (current_class === pause_class) {
+                    clearInterval(studentTimeVar);
+                }
+
+            });
+
+            //this is to handle the 'evaluate' button
+            $('#evaluate_button').click(function () {
+
+                //hide the message
+                $('#no_evaluated_student_content').attr('hidden', true);
+                //show the loader
+                $('#evaluate_student_loader').attr('hidden', false);
+
+
+                //using the fetch api
+                fetch('http://127.0.0.1:8000/get-lecture-emotion-student-evaluation/?video_name=' + global_video_name)
+                    .then((res) => res.json())
+                    .then((out) => evaluate_student(out))
+                    .catch((error) => alert('this is the error: ' + error))
+            });
+
+
+            //to create html for evaluate function
+            function evaluate_student(response) {
+
+                let htmlString = "";
+                //iterating through the student
+                response.people.map((student) => {
+
+                    let title = student.split('.')[0];
+                    let images = "";
+                    htmlString += "<div class='row p-3 student-evaluation-rows'>";
+
+                    let student_count = 0;
+
+                    //iterating through the frames
+                    response.response.map((frame) => {
+                        let frame_detections = frame.detections;
+                        let frame_detection_length = frame_detections.length;
+
+                        if (frame_detections.includes(student)) {
+
+
+                            if (student_count === 0) {
+                                images += "<li class='list-group-item frame-0' id='image_0_evaluation" + title + "'>";
+                            } else {
+                                images += "<li class='list-group-item other-student-frames' id='image_evaluation" + student_count + "_" + title + "' hidden>";
+                            }
+
+                            images += "<img src='{% static '' %}FirstApp/Activity/" + global_video_name + "/" + frame.frame + "/" + student + "' width='200' height='200'>";
+                            images += "</li>";
+
+                            if (student_count === (frame_detection_length)) {
+                                images += "<li class='list-group-item'>";
+                                images += "<button type='button' class='btn btn-dark individual-evaluation' id='evaluate_student_" + title + "'>evaluate</button>";
+                                images += "</li>";
+                            }
+
+
+                            //increment the student count
+                            student_count++;
+                        }
+                    });
+
+                    htmlString += "<ul class='list-group'>";
+                    htmlString += "<li class='list-group-item'>";
+                    htmlString += "<div class='row m-3'>";
+                    htmlString += "<h4 class='font-weight-bold'>Student ID: <span>" + title + "</span></h4>";
+                    htmlString += "</div>";
+                    htmlString += "</li>";
+                    {#htmlString += "<div class='row m-3'></div>";#}
+                    htmlString += "<li class='list-group-item'>";
+                    htmlString += "<div class='row'>";
+                    htmlString += "<ul class='list-group list-group-horizontal student_detection_lists' style='overflow-x: scroll'>";
+                    htmlString += images;
+                    htmlString += "</ul>";
+                    htmlString += "</div>";
+                    htmlString += "</li>";
+                    htmlString += "<li class='list-group-item'>";
+                    htmlString += "<div class='slidecontainer'>";
+                    htmlString += "<div class='row m-3'></div>";
+                    htmlString += "<div class='row'>";
+                    htmlString += "<span><i class='fas fa-play play-pause-icon-student-evaluations' id='icon_" + title + "'></i></span>";
+                    htmlString += "</div>";
+                    htmlString += "<input type='range' min='1' max='100' value='0' class='slider' id='slider_evaluation" + title + "'>";
+                    htmlString += "<p>No of frames: <span id='demo_evaluation" + title + "'></span></p>";
+                    htmlString += "</div>";
+                    htmlString += "</div>";
+                    htmlString += "</li>";
+                    htmlString += "</ul>";
+                });
+
+                //disappearing the loader
+                $('#evaluate_student_loader').attr('hidden', true);
+
+                //append to the relevant html card content
+                $('#evaluation_students').append(htmlString);
+
+
+            }
+
+
+            let studentEvaluationVar = null;
+
+            //playing the frames for each student evaluation
+            $(document).on('click', '.play-pause-icon-student-evaluations', function (e) {
+
+                //defining the two possible classes
+                let play_class = "fas fa-play play-pause-icon-student-evaluations";
+                let pause_class = "fas fa-pause play-pause-icon-student-evaluations";
+
+
+                //retrieving the current icon class
+                let current_class = $(this).attr('class');
+
+
+                //assigning the correct class based on the icon clicked
+                let new_class = (current_class === play_class) ? pause_class : play_class;
+
+
+                //setting the new class
+                $(this).attr('class', new_class);
+
+                //extracting the title pf the clicked icon
+                let title_part = $(this).attr('id');
+                let title = title_part.split("_")[1];
+
+
+                //handling the slider
+                let slider = document.getElementById("slider_evaluation" + title);
+                let output = document.getElementById("demo_evaluation" + title);
+
+
+                //when the button is playing
+                if (current_class === play_class) {
+                    studentEvaluationVar = setInterval(() => {
+                        let value = slider.value;
+                        let new_slider_value = Number(value) + 1;
+                        slider.value = new_slider_value;
+                        output.innerHTML = new_slider_value.toString();
+
+
+                        let selectedImage = '#image_evaluation' + Number(value) + '_' + title;
+
+                        //displaying the relevant image
+                        $('#image_0_evaluation' + title).html($(selectedImage).html());
+
+                    }, 100);
+                }
+
+                //when the button is paused
+                else if (current_class === pause_class) {
+                    clearInterval(studentEvaluationVar);
+                }
+
+            });
+
+
+            //to evaluate the individual student
+            $(document).on('click', '.individual-evaluation', function (e) {
+
+                let individual_id = $(this).attr('id');
+                let student_name = individual_id.split('_')[2];
+                student_name += ".png";
+                let html = $(this).html();
+
+                //after clicking, change the html
+                $(this).html("<span class='font-italic'>loading...</span>");
+
+
+                //fetching from the API
+                fetch('http://127.0.0.1:8000/get-lecture-emotion-individual-student-evaluation/?video_name=' + global_video_name + '&student_name=' + student_name)
+                    .then((res) => res.json())
+                    .then((out) => displayIndividualStudentEmotion(out.response, e, student_name))
+                    .catch((error) => alert('something went wrong'));
+
+                //after 5 seconds, replace with the original html
+
+                /*
+                setTimeout(() => {
+                    $(this).html(html);
+
+                    //open the student individual modal
+                    $('#student_individual_modal').modal();
+                }, 5000);
+                */
+
+            });
+
+
+            //this function will display the individual student emotions
+            function displayIndividualStudentEmotion(res, e, title) {
+
+                //set the percentage values
+                $('#happy_individual_perct').text(res.happy_perct + '%');
+                $('#sad_individual_perct').text(res.sad_perct + '%');
+                $('#anger_individual_perct').text(res.angry_perct + '%');
+                $('#surprise_individual_perct').text(res.surprise_perct + '%');
+                $('#neutral_individual_perct').text(res.neutral_perct + '%');
+
+                //set the width
+                $('#happy_individual_width').width(res.happy_perct + '%');
+                $('#sad_individual_width').width(res.sad_perct + '%');
+                $('#anger_individual_width').width(res.angry_perct + '%');
+                $('#surprise_individual_width').width(res.surprise_perct + '%');
+                $('#neutral_individual_width').width(res.neutral_perct + '%');
+
+                //open the student individual modal
+                $('#student_individual_modal').modal();
+
+                //set the button to default
+                e.target.innerHTML = "<span>evaluate</span>";
+
+            }
+
+
+            //to handle the 'integrate' modal
+            $('#integrate_activity').click(function () {
+                //define the student video src
+                let video_src = "{% static '' %}FirstApp/videos/" + global_video_name;
+
+                //assign the video src
+                $('#student_video').attr('src', video_src);
+
+                $('#integrate_modal').modal();
+
+
+                //fetch data from the API
+
+                fetch('http://127.0.0.1:8000/get-lecture-emotion-for-frame?video_name=' + global_video_name)
+                .then((res) => res.json())
+                .then((out) => displayEmotionRecognitionForFrame(out.response))
+                .catch((err) => alert('error: ' + err));
+
+
+
+            });
+
+
+            //this function will display the emotion percentages for each frame
+            function displayEmotionRecognitionForFrame(response) {
+
+                //hide the loader
+                $('#student_video_progress_loader').attr('hidden', true);
+                //show the progress bars
+                $('#student_video_progress').attr('hidden', false);
+
+                //creating the html string
+                let htmlString = "";
+
+                //creating the html string, iteratively
+                response.map((frame) => {
+                   let frame_name = frame.frame_name;
+                   let happy_perct = Math.round(frame.happy_perct, 0);
+                   let sad_perct = Math.round(frame.sad_perct, 0);
+                   let angry_perct = Math.round(frame.angry_perct, 0);
+                   let neutral_perct = Math.round(frame.neutral_perct, 0);
+                   let surprise_perct = Math.round(frame.surprise_perct, 0);
+
+                   //append to the html string
+                   //Happy
+                   htmlString += "<div class='progress_area' id='progress_" +frame_name+ "' hidden>";
+                   htmlString += "<h4 class='small font-weight-bold'>Happy</h4>";
+                   htmlString += "<span class='float-right' id='happy_instant_" +frame_name+ "'>" +happy_perct+ "%</span>";
+                   htmlString += "<div class='progress mb-4'>";
+                   htmlString += "<div class='progress-bar bg-warning' role='progressbar' id='phone_checking_instant_value_" +frame_name+ "' style='width: " +happy_perct+ "%' aria-valuenow='40' aria-valuemin='0' aria-valuemax='100'></div>";
+                   htmlString += "</div>";
+
+                   //Sad
+                   htmlString += "<h4 class='small font-weight-bold'>Sad</h4>";
+                   htmlString += "<span class='float-right' id='note_taking_instant_" +frame_name+ "'>" +sad_perct+ "%</span>";
+                   htmlString += "<div class='progress mb-4'>";
+                   htmlString += "<div class='progress-bar' role='progressbar' id='note_taking_instant_value_" +frame_name+ "' style='width: " +sad_perct+ "%' aria-valuenow='0' aria-valuemin='0' aria-valuemax='100'></div>";
+                   htmlString += "</div>";
+
+                   //Angry
+                   htmlString += "<h4 class='small font-weight-bold'>Angry</h4>";
+                   htmlString += "<span class='float-right' id='listening_instant_" +frame_name+ "'>" +angry_perct+ "%</span>";
+                   htmlString += "<div class='progress mb-4'>";
+                   htmlString += "<div class='progress-bar bg-info' role='progressbar' id='listening_instant_value_" +frame_name+ "' style='width: " +angry_perct+ "%' aria-valuenow='80' aria-valuemin='0' aria-valuemax='100'></div>";
+                   htmlString += "</div>";
+
+                   //Neutral
+                   htmlString += "<h4 class='small font-weight-bold'>Neutral</h4>";
+                   htmlString += "<span class='float-right' id='note_taking_instant_" +frame_name+ "'>" +neutral_perct+ "%</span>";
+                   htmlString += "<div class='progress mb-4'>";
+                   htmlString += "<div class='progress-bar' role='progressbar' id='note_taking_instant_value_" +frame_name+ "' style='width: " +neutral_perct+ "%' aria-valuenow='0' aria-valuemin='0' aria-valuemax='100'></div>";
+                   htmlString += "</div>";
+
+                   //Surprise
+                   htmlString += "<h4 class='small font-weight-bold'>Surprise</h4>";
+                   htmlString += "<span class='float-right' id='listening_instant_" +frame_name+ "'>" +surprise_perct+ "%</span>";
+                   htmlString += "<div class='progress mb-4'>";
+                   htmlString += "<div class='progress-bar bg-info' role='progressbar' id='listening_instant_value_" +frame_name+ "' style='width: " +surprise_perct+ "%' aria-valuenow='80' aria-valuemin='0' aria-valuemax='100'></div>";
+                   htmlString += "</div>";
+
+                   //ending the progress area
+                   htmlString += "</div>";
+
+                });
+
+                //append the html
+                $('#student_video_column').append(htmlString);
+            }
+
+
+            //to handle the 'integrate' play button
+            $('#play_integrate_button').click(function () {
+                let video = $('video')[0];
+                let test_video = document.getElementsByTagName('video')[0];
+                let play_class = 'btn btn-outline-danger play';
+                let pause_class = 'btn btn-outline-danger pause';
+                let count = 0;
+
+                let classes = $(this).attr('class');
+
+
+                let video_interval = setInterval(() => {
+                    let talking_number = Math.round(Math.random() * 100, 0);
+                    let phone_number = Math.round(Math.random() * 100, 0);
+                    let note_number = Math.round(Math.random() * 100, 0);
+                    let listening_number = Math.round(Math.random() * 100, 0);
+
+                    //get the relevant progress area
+                    let progress_area = "progress_frame-" + count;
+                    let progress_area_id = "#" + progress_area;
+
+                    //find the corresponding progress area
+                    let progress_area_html = document.getElementById(progress_area);
+
+                    //display the retrieved progress area
+                    $(progress_area_id).attr('hidden', false);
+
+                    //replace the current progress area with the selected one
+                    $('#student_video_progress').html(progress_area_html);
+
+                    //increment the count
+                    count++;
+
+                    //setting the values
+                    /*
+                    $('#talking_instant').text(talking_number + '%');
+                    $('#phone_checking_instant').text(phone_number + '%');
+                    $('#note_taking_instant').text(note_number + '%');
+                    $('#listening_instant').text(listening_number + '%');
+
+                    //setting the width
+                    $('#talking_instant_value').width(talking_number + '%');
+                    $('#phone_checking_instant_value').width(phone_number + '%');
+                    $('#note_taking_instant_value').width(note_number + '%');
+                    $('#listening_instant_value').width(listening_number + '%');
+
+                     */
+                }, 1000);
+
+                //check for the current class
+                if (classes === play_class) {
+                    $(this).text('Pause');
+                    $(this).attr('class', pause_class);
+                    video.play();
+
+                } else if (classes === pause_class) {
+                    $(this).text('Play');
+                    $(this).attr('class', play_class);
+                    video.pause();
+
+                }
+                //function to do when the video is paused
+
+
+                //function to do when the video is ended
+                video.onended = function (e) {
+                    //stop changing the activity values
+                    clearInterval(video_interval);
+                }
+
+            });
+
+
+        });
+
+    </script>
+
+
+{% endblock %}
+
+<div id="wrapper">
+    <!-- Sidebar -->
+
+    <!-- Content Wrapper -->
+    <div id="content-wrapper" class="d-flex flex-column">
+
+        <!-- Main Content -->
+        <div id="content">
+
+            <!-- Begin Page Content -->
+            {% block 'container-fluid' %}
+                <div class="container-fluid">
+                    {% load static %}
+
+                    <!-- Page Heading -->
+                    <div class="d-sm-flex align-items-center justify-content-between mb-4">
+                        <h1 class="h3 mb-0 text-gray-800">Student Emotion Recognition</h1>
+                    </div>
+
+                    <!--first row -->
+                    <div class="row p-2">
+
+                        <!--first column -->
+                        <div class="col-lg-6" style="overflow-x: scroll">
+                            <div class="card shadow mb-4">
+                                <!--card header -->
+                                <div class="card-header py-3">
+                                    <h5 class="m-0 font-weight-bold text-primary">Lecturer Subjects</h5>
+                                </div>
+
+                                <!--card body -->
+                                <div class="card-body">
+                                    {% if lecturer_subjects.count == 0 %}
+                                        <div class="text-center">
+                                            <span class="font-italic">No subjects</span>
+                                        </div>
+                                    {% else %}
+                                        <div class="table-responsive">
+                                            <table class="table table-bordered" id="datatable">
+                                                <thead>
+                                                <tr>
+                                                    <th></th>
+                                                    <th>Subject Name</th>
+                                                    <th>Code</th>
+                                                    <th>Year</th>
+                                                </tr>
+                                                </thead>
+                                                <tbody>
+                                                {% for subject in subjects %}
+                                                    <tr class="subjects not_clicked" id="{{ subject.0.subject_code }}">
+                                                        <td>
+                                                            <div class="radio">
+                                                                <label><input type="radio"
+                                                                              id="{{ subject.0.subject_code }}"
+                                                                              name="subject_radio"
+                                                                              data-name="{{ subject.0.name }}"
+                                                                              data-lecturer="{{ lecturer }}"></label>
+                                                            </div>
+                                                        </td>
+                                                        <td>{{ subject.0.name }}</td>
+                                                        <td>{{ subject.0.subject_code }}</td>
+                                                        <td>{{ subject.0.year }}</td>
+                                                    </tr>
+                                                {% endfor %}
+                                                </tbody>
+                                            </table>
+                                        </div>
+
+                                    {% endif %}
+                                </div>
+                            </div>
+                        </div>
+                        <!--end of first column -->
+
+                        <!--second column (timetable column) -->
+                        <div class="col-lg-6" style="overflow-x: scroll">
+                            <div class="card shadow mb-4">
+                                <!--card header -->
+                                <div class="card-header py-3">
+                                    <h5 class="m-0 font-weight-bold text-primary">View timetable</h5>
+                                </div>
+
+                                <!--card body -->
+                                <div class="card-body">
+
+                                    <!--loading gif -->
+                                    <div class="text-center" id="no_subject_selected">
+                                        <span class="font-italic">No lecture is selected</span>
+                                    </div>
+                                    <!--no lecture selected message -->
+                                    <div class="text-center" id="loader" hidden>
+                                        <img src="{% static 'FirstApp/images/ajax-loader.gif' %}" alt="Loader">
+                                    </div>
+                                    <!--no lecture selected message -->
+                                    <div class="text-center" id="no_timetable_content" hidden>
+                                        <span class="font-italic">Not included in the timetable</span>
+                                    </div>
+                                    <!--displaying the timetable -->
+                                    <table class="table table-striped" id="timetable" hidden>
+                                        {#                                    <caption id="timetable_caption"></caption>#}
+                                        <thead>
+                                        <tr>
+                                            <th>Date</th>
+                                            <th>Hall No.</th>
+                                            <th>start time</th>
+                                            <th>end time</th>
+                                        </tr>
+                                        </thead>
+                                        <tbody id="timetable_body">
+
+                                        </tbody>
+                                    </table>
+
+
+                                </div>
+                            </div>
+                        </div>
+                        <!--end of second column -->
+
+                    </div>
+                    <!--end of 1st row -->
+
+                    <!--2nd row -->
+                    <div class="row p-2">
+
+                        <!--1st column -->
+                        <div class="col-lg-6">
+                            <!--card content -->
+                            <div class="card shadow mb-4">
+                                <!--card header -->
+                                <div class="card-header py-3">
+                                    <h5 class="m-0 font-weight-bold text-primary">Emotion Recognition</h5>
+                                </div>
+
+                                <!--card body -->
+                                <div class="card-body">
+
+                                    <!--nav tabs-->
+                                    <ul class="nav nav-tabs nav-fill" id="nav_bar" role="tablist">
+                                        <li class="nav-item">
+                                            <a class="nav-link active" id="frame-tab" data-toggle="tab" href="#frame"
+                                               role="tab" aria-controls="frame" aria-selected="true">Frame</a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a class="nav-link" id="graph-tab" data-toggle="tab" href="#graph"
+                                               role="tab" aria-controls="graph" aria-selected="false">Graphs</a>
+                                        </li>
+                                    </ul>
+
+                                    <!--tab content -->
+                                    <div class="tab-content" id="tabContentDetails">
+                                        <!--frame tab -->
+                                        <div class="tab-pane fade show active" id="frame" role="tabpanel"
+                                             aria-labelledby="home-tab">
+                                            <!--this area will display the frame -->
+                                            <div class="text-center" id="frame_area" style="height: 600px">
+                                                <!--temporary text -->
+                                                <span class="font-italic" id="temporary_text">Frame will be displayed here</span>
+
+                                                <!--loading buffer area-->
+                                                <div class="text-center" id="frame_loader" hidden>
+                                                    <img src="{% static 'FirstApp/images/ajax-loader.gif' %}"
+                                                         alt="Loader">
+                                                </div>
+
+                                                <!--frames -->.
+                                                <div class="text-center p-4" id="video_frames">
+                                                    <!-- slide container -->
+                                                    <div id="slidecontainer" hidden>
+                                                        <div class="row m-3"></div>
+                                                        <!-- play/pause icon -->
+                                                        <div class="row">
+                                                            <span><i class="fas fa-play"
+                                                                     id="play_pause_icon_activity"></i></span>
+                                                        </div>
+                                                        <input type="range" min="1" max="100" value="0" class="slider"
+                                                               id="myActivityRange">
+                                                        <p>No of frames: <span id="demo"></span></p>
+                                                    </div>
+                                                </div>
+                                            </div>
+
+                                            <!--this area will display the progress bars -->
+                                            <div class="progress_area" hidden>
+                                                <!--Happy -->
+                                                <a href="#" class="btn btn-link labels" data-number="1"
+                                                   data-label="Happy">
+                                                    <h4 class="small font-weight-bold">Happy</h4>
+                                                </a>
+                                                <span class="float-right" id="happy_perct">40%</span>
+                                                <div class="progress mb-4">
+                                                    <div class="progress-bar bg-danger" role="progressbar"
+                                                         id="happy_width"
+                                                         style="width: 20%"
+                                                         aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
+                                                </div>
+
+                                                <!--sad -->
+                                                <a href="#" class="btn btn-link labels" data-number="0"
+                                                   data-label="sad">
+                                                    <h4 class="small font-weight-bold">Sad</h4>
+                                                </a>
+                                                <span class="float-right" id="sad_perct">45%</span>
+                                                <div class="progress mb-4">
+                                                    <div class="progress-bar bg-warning" role="progressbar"
+                                                         id="sad_width"
+                                                         style="width: 40%"
+                                                         aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
+                                                </div>
+
+                                                <!--anger -->
+                                                <a href="#" class="btn btn-link labels" data-number="2"
+                                                   data-label="anger">
+                                                    <h4 class="small font-weight-bold">Anger</h4>
+                                                </a>
+                                                <span class="float-right" id="anger_perct">50%</span>
+                                                <div class="progress mb-4">
+                                                    <div class="progress-bar" role="progressbar" id="anger_width"
+                                                         style="width: 60%"
+                                                         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
+                                                </div>
+
+                                                <!--surprise-->
+                                                <a href="#" class="btn btn-link labels" data-number="2"
+                                                   data-label="surprise">
+                                                    <h4 class="small font-weight-bold">Surprise</h4>
+                                                </a>
+                                                <span class="float-right" id="surprise_perct">60%</span>
+                                                <div class="progress mb-4">
+                                                    <div class="progress-bar bg-info" role="progressbar"
+                                                         id="surprise_width" style="width: 80%"
+                                                         aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
+                                                </div>
+
+                                                <!--neutral-->
+                                                <a href="#" class="btn btn-link labels" data-number="2"
+                                                   data-label="neutral">
+                                                    <h4 class="small font-weight-bold">Neutral</h4>
+                                                </a>
+                                                <span class="float-right" id="neutral_perct">60%</span>
+                                                <div class="progress mb-4">
+                                                    <div class="progress-bar bg-info" role="progressbar"
+                                                         id="neutral_width" style="width: 80%"
+                                                         aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
+                                                </div>
+
+                                                <!--evaluate button -->
+                                                <button type="button" class="btn btn-danger float-right"
+                                                        id="evaluate_button">Evaluate
+                                                </button>
+
+                                            </div>
+
+                                        </div>
+
+                                        <!--graph tab -->
+                                        <div class="tab-pane fade" id="graph" role="tabpanel"
+                                             aria-labelledby="profile-tab">
+                                            <!--card content -->
+                                            <div class="card shadow mb-4 p-3">
+                                                <!-- Card Header - Dropdown -->
+                                                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
+                                                    <h6 class="m-0 font-weight-bold text-primary">Student
+                                                        Activities</h6>
+                                                    <div class="dropdown no-arrow">
+                                                        <a class="dropdown-toggle" href="#" role="button"
+                                                           id="dropdownMenuLink" data-toggle="dropdown"
+                                                           aria-haspopup="true" aria-expanded="false">
+                                                            <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
+                                                        </a>
+                                                        <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in"
+                                                             aria-labelledby="dropdownMenuLink">
+                                                            <div class="dropdown-header">Dropdown Header:</div>
+                                                            <a class="dropdown-item" href="#">Action</a>
+                                                            <a class="dropdown-item" href="#">Another action</a>
+                                                            <div class="dropdown-divider"></div>
+                                                            <a class="dropdown-item" href="#">Something else here</a>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <!-- Card Body -->
+                                                <div class="card-body">
+                                                    <div class="chart-pie pt-4 pb-2">
+                                                        <canvas id="myPieChart"></canvas>
+                                                    </div>
+                                                    <div class="mt-4 text-center small">
+                    <span class="mr-2">
+                      <i class="fas fa-circle text-primary"></i> Direct
+                    </span>
+                                                        <span class="mr-2">
+                      <i class="fas fa-circle text-success"></i> Social
+                    </span>
+                                                        <span class="mr-2">
+                      <i class="fas fa-circle text-info"></i> Referral
+                    </span>
+                                                    </div>
+                                                </div>
+                                            </div>
+
+                                        </div>
+
+                                    </div>
+
+
+                                </div>
+                            </div>
+                        </div>
+
+
+                        <!--2nd column -->
+                        <div class="col-lg-6">
+                            <!--card content -->
+                            <div class="card shadow mb-4">
+                                <!--card header -->
+                                <div class="card-header py-3">
+                                    <h5 class="m-0 font-weight-bold text-primary">Frame Detections</h5>
+                                </div>
+
+                                <!--card body -->
+                                <div class="text-center p-4" id="detection_frames">
+
+                                    <!--no content message-->
+                                    <div class="text-center p-2" id="no_detection_message_content">
+                                        <span class="font-italic">No frame is selected</span>
+                                    </div>
+
+                                    <div class="text-left m-3" id="detection_number_area" hidden>
+                                        <p>No of detections: <span id="no_of_detections"></span></p>
+                                    </div>
+                                    <!--the detection loader -->
+                                    <div class="text-center p-2" id="detection_loader" hidden>
+                                        <img src="{% static 'FirstApp/images/ajax-loader.gif' %}"
+                                             alt="Loader">
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!--detection person card -->
+                            <div class="card shadow mb-4">
+                                <!--card header -->
+                                <div class="card-header py-3">
+                                    <h5 class="m-0 font-weight-bold text-primary">Detected Students (by emotion
+                                        type)</h5>
+                                </div>
+
+                                <!--card body -->
+                                <div class="text-center p-4" id="detection_students">
+                                    <!--activity type line -->
+                                    <div class="text-center p-2" id="activity_type" hidden>
+                                        <p>Activity Type: <span class="font-weight-bold" id="activity_type_text"></span>
+                                        </p>
+                                    </div>
+
+                                    <!--no content message-->
+                                    <div class="text-center p-2" id="no_detection_student_content">
+                                        <span class="font-italic">No activity type is selected</span>
+                                    </div>
+
+                                    <!--the detection student loader -->
+                                    <div class="text-center p-2" id="detection_student_loader" hidden>
+                                        <img src="{% static 'FirstApp/images/ajax-loader.gif' %}"
+                                             alt="Loader">
+                                    </div>
+
+                                </div>
+                            </div>
+                        </div>
+
+
+                    </div>
+                    <!-- end of 2nd row -->
+
+                    <!--3rd row -->
+                    <div class="row p-2">
+
+                        <!--1st column -->
+                        <div class="col-lg-6">
+                            <!--card -->
+                            <div class="card shadow mb-4">
+                                <!--card header -->
+                                <div class="card-header">
+                                    <h5 class="m-0 font-weight-bold text-primary">Evaluated Students</h5>
+                                </div>
+
+                                <!--card body -->
+                                <div class="card-body" id="evaluation_students">
+
+                                    <!--no content message-->
+                                    <div class="text-center p-2" id="no_evaluated_student_content">
+                                        <span class="font-italic">Press 'Evaluate' button to evaluate students</span>
+                                    </div>
+
+                                    <!--the detection student loader -->
+                                    <div class="text-center p-2" id="evaluate_student_loader" hidden>
+                                        <img src="{% static 'FirstApp/images/ajax-loader.gif' %}"
+                                             alt="Loader">
+                                    </div>
+                                    <!--end of student detection loader -->
+
+
+                                </div>
+
+                            </div>
+
+
+                        </div>
+                        <!--end of 1st column -->
+
+
+                        <!--2nd column -->
+                        <div class="col-lg-6">
+                            <!--card -->
+                            <div class="card shadow mb-4">
+                                <!--card header -->
+                                <div class="card-header">
+                                    <h5 class="m-0 font-weight-bold text-primary">Integrated Evaluation</h5>
+                                </div>
+
+                                <!--card body -->
+                                <div class="card-body">
+                                    <div class="text-center" id="integrate_message">
+                                        <span class="font-italic">The integrated version student and lecturer evaluations will display here.</span>
+                                    </div>
+
+                                    <!--button -->
+                                    <div class="text-right m-4">
+                                        <button type="button" class="btn btn-outline-success" id="integrate_activity">
+                                            Process
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <!--end of 2nd column -->
+
+                    </div>
+                    <!--end of 3rd row -->
+
+
+                </div>
+            {% endblock %}
+            <!-- End of container-fluid -->
+
+        </div>
+        <!-- End of Main Content -->
+
+    </div>
+    <!-- End of Content Wrapper -->
+
+</div>
+
+{% block 'modal' %}
+    <div class="modal fade" id="video_modal" role="dialog" aria-labelledby="gif-body">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h2 class="modal-title">Video details</h2>
+                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">×</span>
+                    </button>
+                </div>
+
+                <div class="modal-body">
+                    <table class="table table-borderless">
+                        <tr>
+                            <td class="font-weight-bold">Video Name</td>
+                            <td id="video_name"></td>
+                        </tr>
+                        <tr>
+                            <td class="font-weight-bold">Duration</td>
+                            <td id="video_duration"></td>
+                        </tr>
+                        <tr>
+                            <td class="font-weight-bold">Date of Creation</td>
+                            <td id="video_date"></td>
+                        </tr>
+                    </table>
+                </div>
+
+                <!-- modal footer -->
+                <div class="modal-footer">
+                    <button type="button" data-dismiss="modal" class="btn btn-danger text-white">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <!-- individual evaluation modal -->
+    <div class="modal fade" id="student_individual_modal" role="dialog" aria-labelledby="gif-body">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h2 class="modal-title">Individual evaluation (Emotion)</h2>
+                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">×</span>
+                    </button>
+                </div>
+
+                <div class="modal-body">
+                    <div class="text-center">
+                        <!--progress area -->
+                        <div class="progress_area" hidden>
+                            <!--Happy -->
+                            <h4 class="small font-weight-bold">Happy</h4>
+                            <span class="float-right" id="happy_individual_perct">40%</span>
+                            <div class="progress mb-4">
+                                <div class="progress-bar bg-danger" role="progressbar"
+                                     id="happy_individual_width"
+                                     style="width: 20%"
+                                     aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
+                            </div>
+
+                            <!--sad -->
+                            <h4 class="small font-weight-bold">Sad</h4>
+                            <span class="float-right" id="sad_individual_perct">45%</span>
+                            <div class="progress mb-4">
+                                <div class="progress-bar bg-warning" role="progressbar"
+                                     id="sad_individual_width"
+                                     style="width: 40%"
+                                     aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
+                            </div>
+
+                            <!--anger -->
+                            <h4 class="small font-weight-bold">Anger</h4>
+                            <span class="float-right" id="anger_individual_perct">50%</span>
+                            <div class="progress mb-4">
+                                <div class="progress-bar" role="progressbar" id="anger_individual_width"
+                                     style="width: 60%"
+                                     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
+                            </div>
+
+                            <!--surprise-->
+                            <h4 class="small font-weight-bold">Surprise</h4>
+                            <span class="float-right" id="surprise_individual_perct">60%</span>
+                            <div class="progress mb-4">
+                                <div class="progress-bar bg-info" role="progressbar"
+                                     id="surprise_individual_width" style="width: 80%"
+                                     aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
+                            </div>
+
+                            <!--neutral-->
+                            <h4 class="small font-weight-bold">Neutral</h4>
+                            <span class="float-right" id="neutral_individual_perct">60%</span>
+                            <div class="progress mb-4">
+                                <div class="progress-bar bg-info" role="progressbar"
+                                     id="neutral_individual_width" style="width: 80%"
+                                     aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+
+                <!-- modal footer -->
+                <div class="modal-footer">
+                    <button type="button" data-dismiss="modal" class="btn btn-danger text-white">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <!-- Logout Modal-->
+    <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
+         aria-hidden="true">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
+                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">×</span>
+                    </button>
+                </div>
+                <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
+                <div class="modal-footer">
+                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
+                    <a class="btn btn-primary" href="/logout">Logout</a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!--integrate modal -->
+    <div class="modal fade" id="integrate_modal" tabindex="-1" role="dialog" aria-labelledby="integrate_modal">
+        <div class="modal-dialog" style="max-width: 1300px">
+            <div class="modal-content">
+                <!--modal header -->
+                <div class="modal-header">
+                    <h4 class="modal-title">Integrated Version</h4>
+                </div>
+
+                <!--modal body -->
+                <div class="modal-body">
+                    <div class="container-fluid">
+                        <div class="row">
+                            <!--1st column -->
+                            <div class="col-md-6" id="student_video_column" style="border-right: 1px solid black">
+                                <div class="text-center">
+                                    <span class="h3 font-italic font-weight-bold">Student Behavior</span>
+                                </div>
+
+                                <!--display student video -->
+                                <div class="text-center m-3" id="student_video_section">
+                                    <video width="500" height="300" id="student_video" controls>
+                                        <source src="#"
+                                                type="video/mp4">
+                                        Your browser does not support the video tag.
+                                    </video>
+                                </div>
+                                <!--end of student video section -->
+
+                                <!-- ajax loader section -->
+                                <div class="text-center mt-3" id="student_video_progress_loader">
+                                    <img src="{% static 'FirstApp/images/ajax-loader-1.gif' %}" alt="loader">
+                                </div>
+
+                                <!--progress bar section -->
+                                <div class="progress_area" id="student_video_progress" hidden>
+                                    <!--Happy -->
+                                    <h4 class="small font-weight-bold">Happy</h4>
+                                    <span class="float-right" id="happy_instant">0%</span>
+                                    <div class="progress mb-4">
+                                        <div class="progress-bar bg-danger" role="progressbar"
+                                             id="happy_instant_value"
+{#                                             style="width: 0%"#}
+                                             aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+
+                                    <!--Sad -->
+
+                                    <h4 class="small font-weight-bold">Sad</h4>
+                                    <span class="float-right" id="sad_instant">0%</span>
+                                    <div class="progress mb-4">
+                                        <div class="progress-bar bg-warning" role="progressbar"
+                                             id="sad_instant_value"
+{#                                             style="width: 0%"#}
+                                             aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+
+                                    <!--Angry -->
+
+                                    <h4 class="small font-weight-bold">Angry</h4>
+                                    <span class="float-right" id="angry_instant">0%</span>
+                                    <div class="progress mb-4">
+                                        <div class="progress-bar" role="progressbar"
+                                             id="angry_instant_value"
+{#                                             style="width: 0%"#}
+                                             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+
+                                    <!-- Neutral-->
+
+                                    <h4 class="small font-weight-bold">Neutral</h4>
+                                    <span class="float-right" id="neutral_instant">0%</span>
+                                    <div class="progress mb-4">
+                                        <div class="progress-bar bg-info" role="progressbar"
+                                             id="neutral_instant_value"
+{#                                             style="width: 80%"#}
+                                             aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+
+
+                                     <!-- Surprise-->
+
+                                    <h4 class="small font-weight-bold">Surprise</h4>
+                                    <span class="float-right" id="surprise_instant">0%</span>
+                                    <div class="progress mb-4">
+                                        <div class="progress-bar bg-info" role="progressbar"
+                                             id="surprise_instant_value"
+{#                                             style="width: 80%"#}
+                                             aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+
+                                </div>
+                                <!--end of progress bar section -->
+                            </div>
+                            <!--end of 1st column -->
+
+                            <!--2nd column -->
+                            <div class="col-md-6">
+                                <div class="text-center">
+                                    <span class="h3 font-italic font-weight-bold">Lecturer Performance</span>
+                                </div>
+
+                                <!--display lecture video -->
+                                <div class="text-center m-3" id="lecturer_video_section">
+                                    <!--temporary text -->
+                                    <div class="text-center" id="temp_lecturer_text">
+                                        <span class="font-italic">No video was found</span>
+                                    </div>
+
+
+                                    <video width="500" height="300" id="lecturer_video" controls>
+                                        <source src="#"
+                                                type="video/mp4">
+                                        Your browser does not support the video tag.
+                                    </video>
+
+                                </div>
+                                <!--end of lecture video section -->
+                            </div>
+                            <!--end of 2nd column -->
+                        </div>
+                        <!--end of 1st row -->
+
+                        <!--2nd row -->
+                        <div class="row">
+                            <!--play button -->
+                            <div class="col-md-12">
+
+                                <div class="text-center p-3">
+                                    <button type="button" class="btn btn-outline-danger play"
+                                            id="play_integrate_button">Play
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <!--end of 2nd row -->
+                    </div>
+                </div>
+
+                <!-- modal footer -->
+                <div class="modal-footer">
+                    <button type="button" data-dismiss="modal" class="btn btn-danger text-white">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!--end of integrate modal -->
+{% endblock %}
+
+</body>
+</html>
\ No newline at end of file

FirstApp/templates/FirstApp/extractor.html

+{% extends 'FirstApp/template.html' %}
+<!DOCTYPE html>
+<html lang="en">
+<body id="page-top">
+<!-- Page Wrapper -->
+
+{% block javascript %}
+        {% load static %}
+
+        <!-- Bootstrap core JavaScript-->
+      <script src="{% static 'FirstApp/vendor/jquery/jquery.min.js' %}"></script>
+      <script src="{% static 'FirstApp/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
+
+      <!-- Core plugin JavaScript-->
+      <script src="{% static 'FirstApp/vendor/jquery-easing/jquery.easing.min.js' %}"></script>
+
+
+    <script type="text/javascript">
+        const cur_date = new Date().toDateString();
+        let video_name = '';
+        $(document).ready(function () {
+            $('.video_row').click(function () {
+                video_name = $(this).attr('id');
+                let video_duration = $(this).attr('data-duration');
+                let src = "{% static '' %}FirstApp/videos/" + video_name;
+
+                //assigning the src
+                $("video").attr('src', src);
+
+                //setting the video details
+                $('#video_name').text(video_name);
+                $('#video_duration').text(video_duration);
+                $('#video_date').text(cur_date);
+
+            });
+
+            //to handle video extraction button
+
+            $('#extractBtn').click(function () {
+                //run the api
+                fetch('http://127.0.0.1:8000/videoExtract', {
+                   method: 'POST',
+                   headers: {
+                       "Content-type": "application/json"
+                   },
+                   body: JSON.stringify({
+                       "video_name": video_name
+                   })
+                })
+                .then((res) => res.json())
+                .then((out) => alert(out.response))
+                .catch((error) => alert('this is an error'));
+            });
+        });
+    </script>
+
+
+{% endblock %}
+
+<div id="wrapper">
+    <!-- Sidebar -->
+
+    <!-- Content Wrapper -->
+    <div id="content-wrapper" class="d-flex flex-column">
+
+        <!-- Main Content -->
+        <div id="content">
+
+            <!-- Begin Page Content -->
+            {% block 'container-fluid' %}
+                <div class="container-fluid">
+                    {% load static %}
+
+                    <!-- Page Heading -->
+                    <div class="d-sm-flex align-items-center justify-content-between mb-4">
+                        <h1 class="h3 mb-0 text-gray-800">Video Extractor</h1>
+                    </div>
+
+                    <!--1st row -->
+                    <div class="row p-2">
+
+                        <!--first column -->
+                        <div class="col-lg-6">
+
+                            <!-- Main Video Context -->
+                            <div class="card shadow mb-4">
+                                <div class="card-header py-3">
+                                    <h6 class="m-0 font-weight-bold text-primary">Main Video</h6>
+                                </div>
+                                <div class="card-body">
+                                    <video width="500" height="300" id="first_video" controls>
+                                        <source src="{% static '' %}FirstApp/videos/{{ firstVideo.name }}"
+                                                type="video/mp4">
+                                        Your browser does not support the video tag.
+                                    </video>
+
+                                    <table class="table table-borderless table-striped m-1">
+                                        <tbody>
+                                            <tr>
+                                                <td class="font-weight-bold">Name</td>
+                                                <td id="video_name">{{ firstVideo.name }}</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="font-weight-bold">Duration</td>
+                                                <td id="video_duration">{{ firstVideo.duration }}</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="font-weight-bold">Date</td>
+                                                <td id="video_date"></td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+
+                                    <div class="col-lg-3 p-3">
+                                        <button type="button" class="btn btn-outline-primary" id="extractBtn">Extract</button>
+                                    </div>
+
+                                </div>
+                            </div>
+                        </div>
+
+
+                        <!--second column -->
+                        <div class="col-lg-6">
+
+                            <!-- Main Video Context -->
+                            <div class="card shadow mb-4">
+                                <div class="card-header py-3">
+                                    <h6 class="m-0 font-weight-bold text-primary">List of Lectures</h6>
+                                </div>
+                                <div class="card-body">
+                                    <table class="table table-bordered">
+                                        <thead>
+                                        <tr>
+                                            <th>Video Name</th>
+                                            <th>Length</th>
+                                        </tr>
+                                        </thead>
+                                        <tbody>
+                                        {% for video in Videos %}
+                                            <tr class="video_row" id="{{ video.name }}" data-duration="{{ video.duration }}">
+                                                <td>
+                                                    {{ video.name }}
+                                                </td>
+                                                <td>{{ video.duration }}</td>
+                                            </tr>
+                                        {% endfor %}
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+
+
+
+                </div>
+            {% endblock %}
+            <!-- End of container-fluid -->
+
+        </div>
+        <!-- End of Main Content -->
+
+    </div>
+    <!-- End of Content Wrapper -->
+
+</div>
+
+{% block 'modal' %}
+    <div class="modal fade" id="gif-body" role="dialog" aria-labelledby="gif-body">
+        <div class="modal-dialog modal-lg" style="max-width: 1600px; max-height: 800px">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h2 class="modal-title">Processing....</h2>
+                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">×</span>
+                    </button>
+                </div>
+
+                <div class="modal-body text-center">
+                    <img src="{% static 'FirstApp/images/ajax-loader.gif' %}" width="200" height="500"
+                         alt="This is a GIF">
+                    <h5>This might take few seconds...</h5>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}
+
+</body>
+</html>
\ No newline at end of file

FirstApp/templates/FirstApp/forgot-password.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="">
+  <meta name="author" content="">
+
+  <title>SB Admin 2 - Forgot Password</title>
+
+  <!-- Custom fonts for this template-->
+  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
+  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
+
+  <!-- Custom styles for this template-->
+  <link href="css/sb-admin-2.min.css" rel="stylesheet">
+
+</head>
+
+<body class="bg-gradient-primary">
+
+  <div class="container">
+
+    <!-- Outer Row -->
+    <div class="row justify-content-center">
+
+      <div class="col-xl-10 col-lg-12 col-md-9">
+
+        <div class="card o-hidden border-0 shadow-lg my-5">
+          <div class="card-body p-0">
+            <!-- Nested Row within Card Body -->
+            <div class="row">
+              <div class="col-lg-6 d-none d-lg-block bg-password-image"></div>
+              <div class="col-lg-6">
+                <div class="p-5">
+                  <div class="text-center">
+                    <h1 class="h4 text-gray-900 mb-2">Forgot Your Password?</h1>
+                    <p class="mb-4">We get it, stuff happens. Just enter your email address below and we'll send you a link to reset your password!</p>
+                  </div>
+                  <form class="user">
+                    <div class="form-group">
+                      <input type="email" class="form-control form-control-user" id="exampleInputEmail" aria-describedby="emailHelp" placeholder="Enter Email Address...">
+                    </div>
+                    <a href="login.html" class="btn btn-primary btn-user btn-block">
+                      Reset Password
+                    </a>
+                  </form>
+                  <hr>
+                  <div class="text-center">
+                    <a class="small" href="register.html">Create an Account!</a>
+                  </div>
+                  <div class="text-center">
+                    <a class="small" href="login.html">Already have an account? Login!</a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+
+  </div>
+
+  <!-- Bootstrap core JavaScript-->
+  <script src="vendor/jquery/jquery.min.js"></script>
+  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+
+  <!-- Core plugin JavaScript-->
+  <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
+
+  <!-- Custom scripts for all pages-->
+  <script src="js/sb-admin-2.min.js"></script>
+
+</body>
+
+</html>

FirstApp/templates/FirstApp/gaze.html

+{% extends 'FirstApp/template.html' %}
+<!DOCTYPE html>
+<html lang="en">
+<body id="page-top">
+<!-- Page Wrapper -->
+
+{% block javascript %}
+    {% load static %}
+
+    <!-- Bootstrap core JavaScript-->
+    <script src="{% static 'FirstApp/vendor/jquery/jquery.min.js' %}"></script>
+    <script src="{% static 'FirstApp/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
+
+    <!-- Page level plugins -->
+    <script src="{% static 'FirstApp/vendor/datatables/jquery.dataTables.min.js' %}"></script>
+    <script src="{% static 'FirstApp/vendor/datatables/dataTables.bootstrap4.min.js' %}"></script>
+
+    <!-- Page level custom scripts -->
+    <script src="{% static 'FirstApp/js/demo/datatables-demo.js' %}"></script>
+
+    <!-- Core plugin JavaScript-->
+    <script src="{% static 'FirstApp/vendor/jquery-easing/jquery.easing.min.js' %}"></script>
+
+
+    <script type="text/javascript">
+
+        var global_subject = '';
+        var global_lecturer = '';
+        var global_lecture_video_id = '';
+        var global_video_name = '';
+        var global_lecturer_subject_index = 0;
+
+        //jquery
+        $(document).ready(function () {
+
+            //select a particular subject
+            $('input[type=radio]').click(function () {
+                let subject_id = $(this).attr('id');
+                global_subject = subject_id;
+                let lecturer = $(this).attr('data-lecturer');
+                global_lecturer = lecturer;
+                let subject_name = $(this).attr('data-name');
+
+                $('#timetable').attr('hidden', true);
+                $('#no_timetable_content').attr('hidden', true);
+                $('.student-detection-rows').remove();
+
+                $('#timetable_body').children().map(function () {
+                    $(this).remove();
+                });
+
+
+                $('#no_subject_selected').attr('hidden', true);
+
+                $('#timetable_caption').text('subject: ' + subject_name);
+                $('#loader').attr('hidden', false);
+
+                //fetching the timetable from the db
+                fetch('http://127.0.0.1:8000/timetables')
+                    .then((res) => res.json())
+                    .then((out) => createTimeTable(out, subject_id, lecturer))
+                    .catch((error) => alert('this is the error: ' + error))
+
+            });
+
+
+            $(document).on('click', '.btn-info', function (e) {
+
+                let clicked_class = e.target.className;
+                let object = e;
+                let real_class = clicked_class.split(' ')[1];
+                real_class = '.' + real_class;
+
+                let date = e.target.parentNode.parentNode.firstChild.innerHTML;
+
+                fetch('http://127.0.0.1:8000/get-lecture-video/?lecturer=' + global_lecturer + '&date=' + date + '&index=' + global_lecturer_subject_index)
+                    .then((res) => res.json())
+                    .then((out) => displayLectureVideoDetails(out, object))
+                    .catch((error) => alert('an error occurred: ' + error));
+            });
+
+
+            function createTimeTable(timetable, subject, lecturer) {
+                $('#loader').attr('hidden', true);
+                $('#timetable').attr('hidden', false);
+                let isTimetableSubject = false;
+
+                timetable.map((item, i) => {
+                    item.timetable.map((table, index) => {
+
+                        let lecturer_subject_index_arr = [];
+
+
+                        //to get the number of subjects taught by the lecturer in a day
+                        table.time_slots.forEach((slot1, ind) => {
+                            let isLecturer = slot1.lecturer.id === Number(lecturer);
+
+                            if (isLecturer) {
+                                lecturer_subject_index_arr.push(ind);
+                            }
+                        });
+
+
+                        //iterating each slot (for a given day)
+                        table.time_slots.forEach((slot, in1) => {
+                            let isLecturer = slot.lecturer.id === Number(lecturer);
+                            let isLecSubject = slot.subject.subject_code === subject;
+                            if (isLecturer && isLecSubject) {
+                                let html = '';
+                                global_lecturer_subject_index = lecturer_subject_index_arr.findIndex((inner) => inner === in1);
+                                isTimetableSubject = true;
+                                html += "<tr class='lecture-details'><td class='slot_date'>" + table.date + "</td>"
+                                    + "<td>" + slot.location + "</td>"
+                                    + "<td>" + slot.start_time + "</td>"
+                                    + "<td>" + slot.end_time + "</td>"
+                                    + "<td><button type='button' class='btn btn-info'>Video</button></td>"
+                                    + "<td></td>"
+                                    + "</tr>";
+
+                                $('#timetable_body').append(html);
+
+                            }
+                        });
+                    });
+
+                    if (!isTimetableSubject) {
+                        $('#timetable').attr('hidden', true);
+                        $('#no_timetable_content').attr('hidden', false);
+                    }
+
+
+                });
+            }
+
+            //function to display lecture video details
+            function displayLectureVideoDetails(lectureVideo, e) {
+
+                let video = lectureVideo.response;
+
+                $('#video_name').text(video.video_name);
+                $('#video_duration').text(video.video_length);
+                $('#video_date').text(video.date);
+                global_lecture_video_id = video.lecture_video_id;
+                global_video_name = video.video_name;
+
+
+                if (lectureVideo.isActivityFound) {
+                    e.target.parentNode.parentNode.lastChild.innerHTML = '<button type="button" class="btn btn-primary">Results</button>';
+                } else {
+                    e.target.parentNode.parentNode.lastChild.innerHTML = '<button type="button" class="btn btn-success">Process</button>';
+                }
+
+                $('#video_modal').modal();
+            }
+
+            //binding a click event for 'btn-primary' buttons
+            $(document).on('click', '.btn-primary', function (e) {
+
+                //removing the previous frames (if there is any)
+                $('#main_frames').remove();
+
+                //displaying the loader (for the frames)
+                $('#frame_loader').attr('hidden', false);
+                //hiding the temporary text
+                $('#temporary_text').attr('hidden', true);
+
+                fetch('http://127.0.0.1:8000/get-lecture-activity/?lecture_video_id=' + global_lecture_video_id + '&lecture_video_name=' + global_video_name)
+                    .then((res) => res.json())
+                    .then((out) => {
+                        let frames = createFrames(out);
+                        return frames
+                    })
+                    .then((obj) => {
+                        $('#video_frames').prepend(obj);
+                        $('#frame_loader').attr('hidden', true);
+                        $('#slidecontainer').attr('hidden', false);
+                    })
+                    .catch((error) => alert('this is the error: ' + error));
+            });
+
+            //displaying the activity percentages in the progress bars
+            function displayActivity(activity) {
+
+                //hiding the loader (for the frames)
+                $('#frame_loader').attr('hidden', true);
+
+                let src = "{% static '' %}FirstApp/videos/" + global_video_name;
+
+                //setting the video (set of frames)
+                $('video').attr({'hidden': false, 'src': src});
+
+
+                activity.response.map((act, index) => {
+                    //setting the percentage values
+                    $('#phone_perct').text(act.phone_perct + '%');
+                    $('#talking_perct').text(act.talking_perct + '%');
+                    $('#listening_perct').text(act.listening_perct + '%');
+                    $('#writing_perct').text(act.writing_perct + '%');
+
+                    //setting the width in the progress bars
+                    $('#phone_width').width(act.phone_perct + '%');
+                    $('#talking_width').width(act.talking_perct + '%');
+                    $('#listening_width').width(act.listening_perct + '%');
+                    $('#writing_width').width(act.writing_perct + '%');
+                });
+
+                //display the progress bar area
+                $('.progress_area').attr('hidden', false);
+            }
+
+            //to handle the 'btn-success' (process) button
+            $(document).on('click', '.btn-success', function (e) {
+
+                //sending the POST request to process the lecture activities
+                fetch('http://127.0.0.1:8000/process-lecture-activity/?lecture_video_name=' + global_video_name + '&lecture_video_id=' + global_lecture_video_id)
+                    .then((res) => res.json())
+                    .then((out) => handleResponse(out.response, e))
+                    .catch((error) => alert('error: ' + error));
+            });
+
+            //this is to change the button from 'process' to 'results'
+            function handleResponse(response, e) {
+                //change the button, if the response is positive
+                if (response) {
+                    e.target.parentNode.parentNode.lastChild.innerHTML = '<button type="button" class="btn btn-primary">Results</button>';
+                }
+            }
+
+
+            //this section is responsible for displaying the frames as  video
+            //creating the frame content
+            function createFrames(res) {
+                let main_frame_content = "<div class='row' id='main_frames'>";
+                main_frame_content += "<ul class='list-group list-group-horizontal'>";
+                let count = 0;
+                //loop through the frames
+                res.extracted.map((image) => {
+                    let img_src = "";
+                    let len = image.detections.length;
+
+
+                    if (count === 0) {
+                        main_frame_content += "<li class='list-group-item text-center' id='image_0'>";
+                        img_src = "<img src='{% static '' %}FirstApp/activity/" + global_video_name + "/" + res.extracted[0].frame + "/" + res.extracted[0].detections[0] + "' width='400' height='400'>";
+                    } else {
+                        main_frame_content += "<li class='list-group-item other-frames' id='image_" + count + "' hidden>";
+                        img_src = "<img src='{% static '' %}FirstApp/activity/" + global_video_name + "/" + image.frame + "/" + image.detections[len - 1] + "' class='img-link' width='400' height='400'>";
+                    }
+
+
+                    main_frame_content += img_src;
+                    main_frame_content += "</li>";
+                    count++;
+                });
+
+                main_frame_content += "</ul>";
+                main_frame_content += "</div>";
+
+
+                //setting the min, max values of the slider
+                $('#myActivityRange').attr({'min': 0, 'max': count});
+
+                //display the progress bars
+                displayActivity(res);
+
+                return main_frame_content;
+            }
+
+
+            //declaring the variable for setInterval function
+            let timeVar = null;
+
+            //handling the play button
+            $('#play_pause_icon_activity').click(function () {
+                //defining the two possible classes
+                let play_class = "fas fa-play";
+                let pause_class = "fas fa-pause";
+
+
+                //retrieving the current icon class
+                let current_class = $(this).attr('class');
+
+                //assigning the correct class based on the icon clicked
+                let new_class = (current_class === play_class) ? pause_class : play_class;
+
+                //setting the new class
+                $(this).attr('class', new_class);
+
+                //handling the slider
+                let slider = document.getElementById("myActivityRange");
+                let output = document.getElementById("demo");
+
+                //when the button is playing
+                if (current_class === play_class) {
+                    timeVar = setInterval(() => {
+                        let value = slider.value;
+                        let new_slider_value = Number(value) + 1;
+                        slider.value = new_slider_value;
+                        output.innerHTML = new_slider_value.toString();
+
+
+                        let selectedImage = '#image_' + Number(value);
+
+                        //displaying the relevant image
+                        $('#image_0').html($(selectedImage).html());
+
+                    }, 100);
+                }
+                //when the button is paused
+                else if (current_class === pause_class) {
+                    clearInterval(timeVar);
+                }
+
+
+            });
+
+
+            //handling the slider
+            let slider = document.getElementById("myActivityRange");
+            let output = document.getElementById("demo");
+            output.innerHTML = slider.value;
+
+            slider.oninput = function () {
+                output.innerHTML = this.value;
+                let selectedImage = '#image_' + Number(this.value);
+
+                //hide
+                {#$('#image_0').attr('hidden', true);#}
+                $('#image_0').html($(selectedImage).html());
+
+                //setting the selected image
+                {#$(selectedImage).attr('hidden', false);#}
+
+
+            };
+
+            $(document).on('click', '.img-link', function (e) {
+
+                //removing previously displayed detections
+                $('.detections').remove();
+
+                //removing the no-content message
+                $('#no_detection_message_content').hide();
+
+                //appearing the loader
+                $('#detection_loader').attr('hidden', false);
+
+                let img_src_arr = e.target.src.split('/');
+                let len = img_src_arr.length;
+                let src = img_src_arr[len - 1];
+                let frame_name_arr = src.split('.');
+                let frame_name = frame_name_arr[0];
+
+                //fetching the detection for the selected frame
+                fetch('http://127.0.0.1:8000/get-lecture-activity-frame-detection/?video_name=' + global_video_name + "&frame_name=" + frame_name)
+                    .then((res) => res.json())
+                    .then((out) => displayDetections(out.detections, frame_name))
+                    .catch((error) => alert('this is an error'));
+
+            });
+
+            //the function to display detections
+            function displayDetections(detections, frame_name) {
+                let img_string = '';
+                let no_of_detections = detections.length;
+
+                //disabling the loader
+                $('#detection_loader').attr('hidden', true);
+
+                //appearing the no of detections number area
+                $('#detection_number_area').attr('hidden', false);
+                $('#no_of_detections').text(no_of_detections);
+
+                detections.map((detection) => {
+                    img_string += "<img src='{% static '' %}FirstApp/activity/" + global_video_name + "/" + frame_name + "/" + detection + "' class='detections m-2' width='100' height='100' >"
+                });
+
+                $('#detection_frames').prepend(img_string);
+
+            }
+
+
+            //listening for click events in labels
+            $('.labels').click(function () {
+
+                let label = Number($(this).attr('data-number'));
+
+                //removing the previous student detection lists
+                $('.student_detection_lists').remove();
+
+                //appearing the loader
+                $('#detection_student_loader').attr('hidden', false);
+                //disappearing the no content message
+                $('#no_detection_student_content').attr('hidden', true);
+
+                //fetching from the api
+                fetch('http://127.0.0.1:8000/get-lecture-activity-detection-for-label/?video_name=' + global_video_name + '&label=' + label)
+                    .then((res) => res.json())
+                    .then((out) => createDetectedStudentFrames(out))
+                    .catch((error) => alert('this is the error: ' + error))
+            });
+
+
+            //creating the detected students frames
+            function createDetectedStudentFrames(detections) {
+
+                let htmlString = "";
+                //iterating through the student
+                detections.people.map((student) => {
+
+                    let title = student.split('.')[0];
+                    let images = "";
+                    htmlString += "<div class='row p-3 student-detection-rows'>";
+
+                    let student_count = 0;
+
+                    //iterating through the frames
+                    detections.response.map((frame) => {
+                        let frame_detections = frame.detections;
+
+                        if (frame_detections.includes(student)) {
+
+
+                            if (student_count === 0) {
+                                images += "<li class='list-group-item frame-0' id='image_0_" +title+ "'>";
+                            }
+                            else {
+                                images += "<li class='list-group-item other-student-frames' id='image_" +student_count+ "_" +title+ "' hidden>";
+                            }
+
+                            images += "<img src='{% static '' %}FirstApp/Activity/" + global_video_name + "/" + frame.frame + "/" + student + "' width='200' height='200'>";
+                            images += "</li>";
+
+                            //increment the student count
+                            student_count++;
+                        }
+                    });
+
+                    htmlString += "<h6 class='font-italic'>" + title + "</h6>";
+                    htmlString += "<ul class='list-group list-group-horizontal student_detection_lists' style='overflow-x: scroll'>";
+                    htmlString += images;
+                    htmlString += "</ul>";
+                    htmlString += "<div class='slidecontainer'>";
+                    htmlString += "<div class='row m-3'></div>";
+                    htmlString += "<div class='row'>";
+                    htmlString += "<span><i class='fas fa-play play-pause-icon-student-frames' id='icon_" +title+ "'></i></span>";
+                    htmlString += "</div>";
+                    htmlString += "<input type='range' min='1' max='100' value='0' class='slider' id='slider_" +title+ "'>";
+                    htmlString += "<p>No of frames: <span id='demo_" +title+ "'></span></p>";
+                    htmlString += "</div>";
+                    htmlString += "</div>";
+                });
+
+                //disappearing the loader
+                $('#detection_student_loader').attr('hidden', true);
+
+                //append to the relevant html card content
+                $('#detection_students').append(htmlString);
+
+            }
+
+
+            let studentTimeVar = null;
+
+            //playing the frames for each student detection
+            $(document).on('click', '.play-pause-icon-student-frames', function (e) {
+
+                //defining the two possible classes
+                let play_class = "fas fa-play play-pause-icon-student-frames";
+                let pause_class = "fas fa-pause play-pause-icon-student-frames";
+
+
+                //retrieving the current icon class
+                let current_class = $(this).attr('class');
+
+
+                //assigning the correct class based on the icon clicked
+                let new_class = (current_class === play_class) ? pause_class : play_class;
+
+
+                //setting the new class
+                $(this).attr('class', new_class);
+
+                //extracting the title pf the clicked icon
+                let title_part = $(this).attr('id');
+                let title = title_part.split("_")[1];
+
+
+                //handling the slider
+                let slider = document.getElementById("slider_" + title);
+                let output = document.getElementById("demo_" + title);
+
+
+                //when the button is playing
+                if (current_class === play_class) {
+                    studentTimeVar = setInterval(() => {
+                        let value = slider.value;
+                        let new_slider_value = Number(value) + 1;
+                        slider.value = new_slider_value;
+                        output.innerHTML = new_slider_value.toString();
+
+
+                        let selectedImage = '#image_' +Number(value)+ '_' + title;
+
+                        //displaying the relevant image
+                        $('#image_0_' + title).html($(selectedImage).html());
+
+                    }, 100);
+                }
+
+                //when the button is paused
+                else if (current_class === pause_class) {
+                    clearInterval(studentTimeVar);
+                }
+
+            })
+
+
+        });
+
+    </script>
+
+
+{% endblock %}
+
+<div id="wrapper">
+    <!-- Sidebar -->
+
+    <!-- Content Wrapper -->
+    <div id="content-wrapper" class="d-flex flex-column">
+
+        <!-- Main Content -->
+        <div id="content">
+
+            <!-- Begin Page Content -->
+            {% block 'container-fluid' %}
+                <div class="container-fluid">
+                    {% load static %}
+
+                    <!-- Page Heading -->
+                    <div class="d-sm-flex align-items-center justify-content-between mb-4">
+                        <h1 class="h3 mb-0 text-gray-800">Student Gaze Estimation</h1>
+                    </div>
+
+                    <!--first row -->
+                    <div class="row p-2">
+
+                        <!--first column -->
+                        <div class="col-lg-6" style="overflow-x: scroll">
+                            <div class="card shadow mb-4">
+                                <!--card header -->
+                                <div class="card-header py-3">
+                                    <h5 class="m-0 font-weight-bold text-primary">Lecturer Subjects</h5>
+                                </div>
+
+                                <!--card body -->
+                                <div class="card-body">
+                                    {% if lecturer_subjects.count == 0 %}
+                                        <div class="text-center">
+                                            <span class="font-italic">No subjects</span>
+                                        </div>
+                                    {% else %}
+                                        <div class="table-responsive">
+                                            <table class="table table-bordered" id="datatable">
+                                                <thead>
+                                                <tr>
+                                                    <th></th>
+                                                    <th>Subject Name</th>
+                                                    <th>Code</th>
+                                                    <th>Year</th>
+                                                </tr>
+                                                </thead>
+                                                <tbody>
+                                                {% for subject in subjects %}
+                                                    <tr class="subjects not_clicked" id="{{ subject.0.subject_code }}">
+                                                        <td>
+                                                            <div class="radio">
+                                                                <label><input type="radio"
+                                                                              id="{{ subject.0.subject_code }}"
+                                                                              name="subject_radio"
+                                                                              data-name="{{ subject.0.name }}"
+                                                                              data-lecturer="{{ lecturer }}"></label>
+                                                            </div>
+                                                        </td>
+                                                        <td>{{ subject.0.name }}</td>
+                                                        <td>{{ subject.0.subject_code }}</td>
+                                                        <td>{{ subject.0.year }}</td>
+                                                    </tr>
+                                                {% endfor %}
+                                                </tbody>
+                                            </table>
+                                        </div>
+
+                                    {% endif %}
+                                </div>
+                            </div>
+                        </div>
+                        <!--end of first column -->
+
+                        <!--second column (timetable column) -->
+                        <div class="col-lg-6" style="overflow-x: scroll">
+                            <div class="card shadow mb-4">
+                                <!--card header -->
+                                <div class="card-header py-3">
+                                    <h5 class="m-0 font-weight-bold text-primary">View timetable</h5>
+                                </div>
+
+                                <!--card body -->
+                                <div class="card-body">
+
+                                    <!--loading gif -->
+                                    <div class="text-center" id="no_subject_selected">
+                                        <span class="font-italic">No lecture is selected</span>
+                                    </div>
+                                    <!--no lecture selected message -->
+                                    <div class="text-center" id="loader" hidden>
+                                        <img src="{% static 'FirstApp/images/ajax-loader.gif' %}" alt="Loader">
+                                    </div>
+                                    <!--no lecture selected message -->
+                                    <div class="text-center" id="no_timetable_content" hidden>
+                                        <span class="font-italic">Not included in the timetable</span>
+                                    </div>
+                                    <!--displaying the timetable -->
+                                    <table class="table table-striped" id="timetable" hidden>
+                                        {#                                    <caption id="timetable_caption"></caption>#}
+                                        <thead>
+                                        <tr>
+                                            <th>Date</th>
+                                            <th>Hall No.</th>
+                                            <th>start time</th>
+                                            <th>end time</th>
+                                        </tr>
+                                        </thead>
+                                        <tbody id="timetable_body">
+
+                                        </tbody>
+                                    </table>
+
+
+                                </div>
+                            </div>
+                        </div>
+                        <!--end of second column -->
+
+                    </div>
+                    <!--end of 1st row -->
+
+                    <!--2nd row -->
+                    <div class="row p-2">
+
+                        <!--1st column -->
+                        <div class="col-lg-6">
+                            <!--card content -->
+                            <div class="card shadow mb-4">
+                                <!--card header -->
+                                <div class="card-header py-3">
+                                    <h5 class="m-0 font-weight-bold text-primary">Gaze Estimation</h5>
+                                </div>
+
+                                <!--card body -->
+                                <div class="card-body">
+
+                                    <!--nav tabs-->
+                                    <ul class="nav nav-tabs nav-fill" id="nav_bar" role="tablist">
+                                        <li class="nav-item">
+                                            <a class="nav-link active" id="frame-tab" data-toggle="tab" href="#frame"
+                                               role="tab" aria-controls="frame" aria-selected="true">Frame</a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a class="nav-link" id="graph-tab" data-toggle="tab" href="#graph"
+                                               role="tab" aria-controls="graph" aria-selected="false">Graphs</a>
+                                        </li>
+                                    </ul>
+
+                                    <!--tab content -->
+                                    <div class="tab-content" id="tabContentDetails">
+                                        <!--frame tab -->
+                                        <div class="tab-pane fade show active" id="frame" role="tabpanel"
+                                             aria-labelledby="home-tab">
+                                            <!--this area will display the frame -->
+                                            <div class="text-center" id="frame_area" style="height: 600px">
+                                                <!--temporary text -->
+                                                <span class="font-italic" id="temporary_text">Frame will be displayed here</span>
+
+                                                <!--loading buffer area-->
+                                                <div class="text-center" id="frame_loader" hidden>
+                                                    <img src="{% static 'FirstApp/images/ajax-loader.gif' %}"
+                                                         alt="Loader">
+                                                </div>
+
+                                                <!--frames -->.
+                                                <div class="text-center p-4" id="video_frames">
+                                                    <!-- slide container -->
+                                                    <div id="slidecontainer" hidden>
+                                                        <div class="row m-3"></div>
+                                                        <!-- play/pause icon -->
+                                                        <div class="row">
+                                                            <span><i class="fas fa-play"
+                                                                     id="play_pause_icon_activity"></i></span>
+                                                        </div>
+                                                        <input type="range" min="1" max="100" value="0" class="slider"
+                                                               id="myActivityRange">
+                                                        <p>No of frames: <span id="demo"></span></p>
+                                                    </div>
+                                                </div>
+                                            </div>
+
+                                            <!--this area will display the progress bars -->
+                                            <div class="progress_area" hidden>
+                                                <!--talking with friends -->
+                                                <a href="#" class="btn btn-link labels" data-number="1">
+                                                    <h4 class="small font-weight-bold">Talking with friends</h4>
+                                                </a>
+                                                <span class="float-right" id="talking_perct">40%</span>
+                                                <div class="progress mb-4">
+                                                    <div class="progress-bar bg-danger" role="progressbar"
+                                                         id="talking_width"
+                                                         style="width: 20%"
+                                                         aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
+                                                </div>
+
+                                                <!--phone checking -->
+                                                <a href="#" class="btn btn-link labels" data-number="0">
+                                                    <h4 class="small font-weight-bold">Phone checking</h4>
+                                                </a>
+                                                <span class="float-right" id="phone_perct">45%</span>
+                                                <div class="progress mb-4">
+                                                    <div class="progress-bar bg-warning" role="progressbar"
+                                                         id="phone_width"
+                                                         style="width: 40%"
+                                                         aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
+                                                </div>
+
+                                                <!--note taking -->
+                                                <a href="#" class="btn btn-link labels" data-number="2">
+                                                    <h4 class="small font-weight-bold">Writing</h4>
+                                                </a>
+                                                <span class="float-right" id="writing_perct">50%</span>
+                                                <div class="progress mb-4">
+                                                    <div class="progress-bar" role="progressbar" id="writing_width"
+                                                         style="width: 60%"
+                                                         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
+                                                </div>
+
+                                                <!--listening-->
+                                                <a href="#" class="btn btn-link labels">
+                                                    <h4 class="small font-weight-bold">Listening</h4>
+                                                </a>
+                                                <span class="float-right" id="listening_perct">60%</span>
+                                                <div class="progress mb-4">
+                                                    <div class="progress-bar bg-info" role="progressbar"
+                                                         id="listening_width" style="width: 80%"
+                                                         aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
+                                                </div>
+
+                                            </div>
+
+                                        </div>
+
+                                        <!--graph tab -->
+                                        <div class="tab-pane fade" id="graph" role="tabpanel"
+                                             aria-labelledby="profile-tab">
+                                            <!--card content -->
+                                            <div class="card shadow mb-4 p-3">
+                                                <!-- Card Header - Dropdown -->
+                                                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
+                                                    <h6 class="m-0 font-weight-bold text-primary">Student
+                                                        Activities</h6>
+                                                    <div class="dropdown no-arrow">
+                                                        <a class="dropdown-toggle" href="#" role="button"
+                                                           id="dropdownMenuLink" data-toggle="dropdown"
+                                                           aria-haspopup="true" aria-expanded="false">
+                                                            <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
+                                                        </a>
+                                                        <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in"
+                                                             aria-labelledby="dropdownMenuLink">
+                                                            <div class="dropdown-header">Dropdown Header:</div>
+                                                            <a class="dropdown-item" href="#">Action</a>
+                                                            <a class="dropdown-item" href="#">Another action</a>
+                                                            <div class="dropdown-divider"></div>
+                                                            <a class="dropdown-item" href="#">Something else here</a>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <!-- Card Body -->
+                                                <div class="card-body">
+                                                    <div class="chart-pie pt-4 pb-2">
+                                                        <canvas id="myPieChart"></canvas>
+                                                    </div>
+                                                    <div class="mt-4 text-center small">
+                    <span class="mr-2">
+                      <i class="fas fa-circle text-primary"></i> Direct
+                    </span>
+                                                        <span class="mr-2">
+                      <i class="fas fa-circle text-success"></i> Social
+                    </span>
+                                                        <span class="mr-2">
+                      <i class="fas fa-circle text-info"></i> Referral
+                    </span>
+                                                    </div>
+                                                </div>
+                                            </div>
+
+                                        </div>
+
+                                    </div>
+
+
+                                </div>
+                            </div>
+                        </div>
+
+
+                        <!--2nd column -->
+                        <div class="col-lg-6">
+                            <!--card content -->
+                            <div class="card shadow mb-4">
+                                <!--card header -->
+                                <div class="card-header py-3">
+                                    <h5 class="m-0 font-weight-bold text-primary">Frame Detections</h5>
+                                </div>
+
+                                <!--card body -->
+                                <div class="text-center p-4" id="detection_frames">
+
+                                    <!--no content message-->
+                                    <div class="text-center p-2" id="no_detection_message_content">
+                                        <span class="font-italic">No frame is selected</span>
+                                    </div>
+
+                                    <div class="text-left m-3" id="detection_number_area" hidden>
+                                        <p>No of detections: <span id="no_of_detections"></span></p>
+                                    </div>
+                                    <!--the detection loader -->
+                                    <div class="text-center p-2" id="detection_loader" hidden>
+                                        <img src="{% static 'FirstApp/images/ajax-loader.gif' %}"
+                                             alt="Loader">
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!--detection person card -->
+                            <div class="card shadow mb-4">
+                                <!--card header -->
+                                <div class="card-header py-3">
+                                    <h5 class="m-0 font-weight-bold text-primary">Detected Students</h5>
+                                </div>
+
+                                <!--card body -->
+                                <div class="text-center p-4" id="detection_students">
+                                    <!--no content message-->
+                                    <div class="text-center p-2" id="no_detection_student_content">
+                                        <span class="font-italic">No activity type is selected</span>
+                                    </div>
+
+                                    <!--the detection student loader -->
+                                    <div class="text-center p-2" id="detection_student_loader" hidden>
+                                        <img src="{% static 'FirstApp/images/ajax-loader.gif' %}"
+                                             alt="Loader">
+                                    </div>
+
+                                </div>
+                            </div>
+                        </div>
+
+
+                    </div>
+                    <!-- end of 2nd row -->
+
+                    <!--3rd row -->
+                    <div class="row p-2">
+
+
+                    </div>
+                    <!--end of 3rd row -->
+
+
+                </div>
+            {% endblock %}
+            <!-- End of container-fluid -->
+
+        </div>
+        <!-- End of Main Content -->
+
+    </div>
+    <!-- End of Content Wrapper -->
+
+</div>
+
+{% block 'modal' %}
+    <div class="modal fade" id="video_modal" role="dialog" aria-labelledby="gif-body">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h2 class="modal-title">Video details</h2>
+                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">×</span>
+                    </button>
+                </div>
+
+                <div class="modal-body">
+                    <table class="table table-borderless">
+                        <tr>
+                            <td class="font-weight-bold">Video Name</td>
+                            <td id="video_name"></td>
+                        </tr>
+                        <tr>
+                            <td class="font-weight-bold">Duration</td>
+                            <td id="video_duration"></td>
+                        </tr>
+                        <tr>
+                            <td class="font-weight-bold">Date of Creation</td>
+                            <td id="video_date"></td>
+                        </tr>
+                    </table>
+                </div>
+
+                <!-- modal footer -->
+                <div class="modal-footer">
+                    <button type="button" data-dismiss="modal" class="btn btn-danger text-white">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <!-- Logout Modal-->
+    <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
+         aria-hidden="true">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
+                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">×</span>
+                    </button>
+                </div>
+                <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
+                <div class="modal-footer">
+                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
+                    <a class="btn btn-primary" href="/logout">Logout</a>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}
+
+</body>
+</html>
\ No newline at end of file

FirstApp/templates/FirstApp/loggedIn.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+    <p>This is my username{{ username }}</p>
+</body>
+</html>
\ No newline at end of file

FirstApp/templates/FirstApp/login.html

+{% load static %}
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <title>SLPES</title>
+
+    <!-- Custom fonts for this template-->
+    <link href="{% static 'FirstApp/vendor/fontawesome-free/css/all.min.css' %}" rel="stylesheet" type="text/css">
+    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
+          rel="stylesheet">
+
+    <!-- Custom styles for this template-->
+    <link href="{% static 'FirstApp/css/sb-admin-2.min.css' %}" rel="stylesheet">
+
+</head>
+
+<body class="bg-gradient-primary">
+
+<div class="container">
+
+    <!-- Outer Row -->
+    <div class="row justify-content-center">
+
+        <div class="col-xl-10 col-lg-12 col-md-9">
+
+            <div class="card o-hidden border-0 shadow-lg my-5">
+                <div class="card-body p-0">
+                    <!-- Nested Row within Card Body -->
+                    <div class="row">
+                        <div class="col-lg-6 d-none d-lg-block">
+                            <img src="{% static 'FirstApp/images/login_image.jpg' %}" width="400" height="600"
+                                 alt="No image">
+                        </div>
+                        <div class="col-lg-6">
+                            <div class="p-5">
+                                <div class="text-center">
+                                    <h1 class="h4 text-gray-900 mb-4">Welcome Back!</h1>
+                                </div>
+
+                                <!--form -->
+                                <form action="/process-login" method="POST" name="loginForm" class="user">
+                                    {% csrf_token %}
+{#                                    <div class="form-group">#}
+{#                                        <input type="text" name="username" class="form-control form-control-user"#}
+{#                                               id="exampleInputEmail" aria-describedby="emailHelp"#}
+{#                                               placeholder="Enter Email Address...">#}
+{#                                    </div>#}
+                                    <div class="form-group">
+                                        <input type="email" name="email" class="form-control form-control-user"
+                                               id="exampleInputEmail" aria-describedby="emailHelp"
+                                               placeholder="Enter Email Address...">
+                                    </div>
+                                    <div class="form-group">
+                                        <input type="password" name="password" class="form-control form-control-user"
+                                               id="exampleInputPassword" placeholder="Password">
+                                        <div class="alert alert-danger m-4">{{ message }}</div>
+                                    </div>
+                                    <div class="form-group">
+                                        <div class="custom-control custom-checkbox small">
+                                            <input type="checkbox" class="custom-control-input" id="customCheck">
+                                            <label class="custom-control-label" for="customCheck">Remember Me</label>
+                                        </div>
+                                    </div>
+
+                                    <button type="submit" class="btn btn-primary btn-user btn-block">Login</button>
+
+{#                                    <a href="index.html" class="btn btn-primary btn-user btn-block">#}
+{#                                        Login#}
+{#                                    </a>#}
+                                    <hr>
+                                    {#                    <a href="index.html" class="btn btn-google btn-user btn-block">#}
+                                    {#                      <i class="fab fa-google fa-fw"></i> Login with Google#}
+                                    {#                    </a>#}
+                                    {#                    <a href="index.html" class="btn btn-facebook btn-user btn-block">#}
+                                    {#                      <i class="fab fa-facebook-f fa-fw"></i> Login with Facebook#}
+                                    {#                    </a>#}
+                                </form>
+                                <hr>
+                                <div class="text-center">
+                                    <a class="text-md-left" href="forgot-password.html">Forgot Password?</a>
+                                </div>
+                                {#                  <div class="text-center">#}
+                                {#                    <a class="small" href="register.html">Create an Account!</a>#}
+                                {#                  </div>#}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+
+    </div>
+
+</div>
+
+<!-- Bootstrap core JavaScript-->
+<script src="{% static 'FirstApp/vendor/jquery/jquery.min.js' %}"></script>
+<script src="{% static 'FirstApp/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
+
+<!-- Core plugin JavaScript-->
+<script src="{% static 'FirstApp/vendor/jquery-easing/jquery.easing.min.js' %}"></script>
+
+<!-- Custom scripts for all pages-->
+<script src="{% static 'FirstApp/js/sb-admin-2.min.js' %}"></script>
+
+</body>
+
+</html>

FirstApp/templates/FirstApp/pose.html

+{% extends 'FirstApp/template.html' %}
+<!DOCTYPE html>
+<html lang="en">
+<body id="page-top">
+<!-- Page Wrapper -->
+
+{% block javascript %}
+    {% load static %}
+
+    <!-- Bootstrap core JavaScript-->
+    <script src="{% static 'FirstApp/vendor/jquery/jquery.min.js' %}"></script>
+    <script src="{% static 'FirstApp/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
+
+    <!-- Page level plugins -->
+    <script src="{% static 'FirstApp/vendor/datatables/jquery.dataTables.min.js' %}"></script>
+    <script src="{% static 'FirstApp/vendor/datatables/dataTables.bootstrap4.min.js' %}"></script>
+
+    <!-- Page level custom scripts -->
+    <script src="{% static 'FirstApp/js/demo/datatables-demo.js' %}"></script>
+
+    <!-- Core plugin JavaScript-->
+    <script src="{% static 'FirstApp/vendor/jquery-easing/jquery.easing.min.js' %}"></script>
+
+    <!-- Load TensorFlow.js -->
+    <script src="https://unpkg.com/@tensorflow/tfjs"></script>
+    <!-- Load Posenet -->
+    <script src="https://unpkg.com/@tensorflow-models/posenet">
+    </script>
+
+    <script type="text/javascript">
+
+        var global_subject = '';
+        var global_lecturer = '';
+        var global_lecture_video_id = '';
+        var global_video_name = '';
+        var global_lecturer_subject_index = 0;
+
+        //jquery
+        $(document).ready(function () {
+
+            //select a particular subject
+            $('input[type=radio]').click(function () {
+                let subject_id = $(this).attr('id');
+                global_subject = subject_id;
+                let lecturer = $(this).attr('data-lecturer');
+                global_lecturer = lecturer;
+                let subject_name = $(this).attr('data-name');
+
+                $('#timetable').attr('hidden', true);
+                $('#no_timetable_content').attr('hidden', true);
+                $('.student-detection-rows').remove();
+
+                $('#timetable_body').children().map(function () {
+                    $(this).remove();
+                });
+
+
+                $('#no_subject_selected').attr('hidden', true);
+
+                $('#timetable_caption').text('subject: ' + subject_name);
+                $('#loader').attr('hidden', false);
+
+                //fetching the timetable from the db
+                fetch('http://127.0.0.1:8000/timetables')
+                    .then((res) => res.json())
+                    .then((out) => createTimeTable(out, subject_id, lecturer))
+                    .catch((error) => alert('this is the error: ' + error))
+
+            });
+
+
+            $(document).on('click', '.btn-info', function (e) {
+
+                let clicked_class = e.target.className;
+                let object = e;
+                let real_class = clicked_class.split(' ')[1];
+                real_class = '.' + real_class;
+
+                let date = e.target.parentNode.parentNode.firstChild.innerHTML;
+
+                fetch('http://127.0.0.1:8000/get-lecture-video-for-pose/?lecturer=' + global_lecturer + '&date=' + date + '&index=' + global_lecturer_subject_index)
+                    .then((res) => res.json())
+                    .then((out) => displayLectureVideoDetails(out, object))
+                    .catch((error) => alert('an error occurred: ' + error));
+            });
+
+
+            function createTimeTable(timetable, subject, lecturer) {
+                $('#loader').attr('hidden', true);
+                $('#timetable').attr('hidden', false);
+                let isTimetableSubject = false;
+
+                timetable.map((item, i) => {
+                    item.timetable.map((table, index) => {
+
+                        let lecturer_subject_index_arr = [];
+
+
+                        //to get the number of subjects taught by the lecturer in a day
+                        table.time_slots.forEach((slot1, ind) => {
+                            let isLecturer = slot1.lecturer.id === Number(lecturer);
+
+                            if (isLecturer) {
+                                lecturer_subject_index_arr.push(ind);
+                            }
+                        });
+
+
+                        //iterating each slot (for a given day)
+                        table.time_slots.forEach((slot, in1) => {
+                            let isLecturer = slot.lecturer.id === Number(lecturer);
+                            let isLecSubject = slot.subject.subject_code === subject;
+                            if (isLecturer && isLecSubject) {
+                                let html = '';
+                                global_lecturer_subject_index = lecturer_subject_index_arr.findIndex((inner) => inner === in1);
+                                isTimetableSubject = true;
+                                html += "<tr class='lecture-details'><td class='slot_date'>" + table.date + "</td>"
+                                    + "<td>" + slot.location + "</td>"
+                                    + "<td>" + slot.start_time + "</td>"
+                                    + "<td>" + slot.end_time + "</td>"
+                                    + "<td><button type='button' class='btn btn-info'>Video</button></td>"
+                                    + "<td></td>"
+                                    + "</tr>";
+
+                                $('#timetable_body').append(html);
+
+                            }
+                        });
+                    });
+
+                    if (!isTimetableSubject) {
+                        $('#timetable').attr('hidden', true);
+                        $('#no_timetable_content').attr('hidden', false);
+                    }
+
+
+                });
+            }
+
+            //function to display lecture video details
+            function displayLectureVideoDetails(lectureVideo, e) {
+
+
+                //get the lecture video response
+                let video = lectureVideo.response;
+
+                $('#video_name').text(video.video_name);
+                $('#video_duration').text(video.video_length);
+                $('#video_date').text(video.date);
+                global_lecture_video_id = video.lecture_video_id;
+                global_video_name = video.video_name;
+
+                //display the modal
+                $('#video_modal').modal();
+
+                //showing the video frames
+                //removing the previous frames (if there is any)
+                $('#main_frames').remove();
+
+                //displaying the loader (for the frames)
+                $('#frame_loader').attr('hidden', false);
+                //hiding the temporary text
+                $('#temporary_text').attr('hidden', true);
+
+                fetch('http://127.0.0.1:8000/get-lecture-video-extracted-frames/?lecture_video_id=' + global_lecture_video_id + '&lecture_video_name=' + global_video_name)
+                    .then((res) => res.json())
+                    .then((out) => {
+                        let frames = createFrames(out);
+                        return frames
+                    })
+                    .then((obj) => {
+                        $('#video_frames').prepend(obj);
+                        $('#frame_loader').attr('hidden', true);
+                        $('#slidecontainer').attr('hidden', false);
+                    })
+                    .catch((error) => alert('this is the error: ' + error));
+            }
+
+
+            //to handle the 'btn-success' (process) button
+            $(document).on('click', '.btn-success', function (e) {
+
+                //sending the POST request to process the lecture activities
+                fetch('http://127.0.0.1:8000/process-lecture-activity/?lecture_video_name=' + global_video_name + '&lecture_video_id=' + global_lecture_video_id)
+                    .then((res) => res.json())
+                    .then((out) => handleResponse(out.response, e))
+                    .catch((error) => alert('error: ' + error));
+            });
+
+            //this is to change the button from 'process' to 'results'
+            function handleResponse(response, e) {
+                //change the button, if the response is positive
+                if (response) {
+                    e.target.parentNode.parentNode.lastChild.innerHTML = '<button type="button" class="btn btn-primary">Results</button>';
+                }
+            }
+
+
+            //this section is responsible for displaying the frames as  video
+            //creating the frame content
+            function createFrames(res) {
+                let main_frame_content = "<div class='row' id='main_frames'>";
+                main_frame_content += "<ul class='list-group list-group-horizontal'>";
+                let count = 0;
+                //loop through the frames
+                res.extracted.map((image) => {
+                    let img_src = "";
+                    let len = image.detections.length;
+
+
+                    if (count === 0) {
+                        main_frame_content += "<li class='list-group-item text-center' id='image_0'>";
+                        img_src = "<img src='{% static '' %}FirstApp/activity/" + global_video_name + "/" + res.extracted[0].frame + "/" + res.extracted[0].detections[0] + "' width='400' height='400'>";
+                    } else {
+                        main_frame_content += "<li class='list-group-item other-frames' id='image_" + count + "' hidden>";
+                        img_src = "<img src='{% static '' %}FirstApp/activity/" + global_video_name + "/" + image.frame + "/" + image.detections[len - 1] + "' class='img-link' width='400' height='400'>";
+                    }
+
+
+                    main_frame_content += img_src;
+                    main_frame_content += "</li>";
+                    count++;
+                });
+
+                main_frame_content += "</ul>";
+                main_frame_content += "</div>";
+
+
+                //setting the min, max values of the slider
+                $('#myActivityRange').attr({'min': 0, 'max': count});
+
+                //dsiplay the 'process' button
+                $('#process_btn').attr('hidden', false);
+
+                return main_frame_content;
+            }
+
+
+            //declaring the variable for setInterval function
+            let timeVar = null;
+
+            //handling the play button
+            $('#play_pause_icon_activity').click(function () {
+                //defining the two possible classes
+                let play_class = "fas fa-play";
+                let pause_class = "fas fa-pause";
+
+
+                //retrieving the current icon class
+                let current_class = $(this).attr('class');
+
+                //assigning the correct class based on the icon clicked
+                let new_class = (current_class === play_class) ? pause_class : play_class;
+
+                //setting the new class
+                $(this).attr('class', new_class);
+
+                //handling the slider
+                let slider = document.getElementById("myActivityRange");
+                let output = document.getElementById("demo");
+
+                //when the button is playing
+                if (current_class === play_class) {
+                    timeVar = setInterval(() => {
+                        let value = slider.value;
+                        let new_slider_value = Number(value) + 1;
+                        slider.value = new_slider_value;
+                        output.innerHTML = new_slider_value.toString();
+
+
+                        let selectedImage = '#image_' + Number(value);
+
+                        //displaying the relevant image
+                        $('#image_0').html($(selectedImage).html());
+
+                    }, 100);
+                }
+                //when the button is paused
+                else if (current_class === pause_class) {
+                    clearInterval(timeVar);
+                }
+
+
+            });
+
+
+            //handling the slider
+            let slider = document.getElementById("myActivityRange");
+            let output = document.getElementById("demo");
+            output.innerHTML = slider.value;
+
+            slider.oninput = function () {
+                output.innerHTML = this.value;
+                let selectedImage = '#image_' + Number(this.value);
+
+                //hide
+                {#$('#image_0').attr('hidden', true);#}
+                $('#image_0').html($(selectedImage).html());
+
+                //setting the selected image
+                {#$(selectedImage).attr('hidden', false);#}
+
+
+            };
+
+            $(document).on('click', '.img-link', function (e) {
+
+                //removing previously displayed detections
+                $('.detections').remove();
+
+                //removing the no-content message
+                $('#no_detection_message_content').hide();
+
+                //appearing the loader
+                $('#detection_loader').attr('hidden', false);
+
+                let img_src_arr = e.target.src.split('/');
+                let len = img_src_arr.length;
+                let src = img_src_arr[len - 1];
+                let frame_name_arr = src.split('.');
+                let frame_name = frame_name_arr[0];
+
+                //fetching the detection for the selected frame
+                fetch('http://127.0.0.1:8000/get-lecture-activity-frame-detection/?video_name=' + global_video_name + "&frame_name=" + frame_name)
+                    .then((res) => res.json())
+                    .then((out) => displayDetections(out.detections, frame_name))
+                    .catch((error) => alert('this is an error'));
+
+            });
+
+            //the function to display detections
+            function displayDetections(detections, frame_name) {
+                let img_string = '';
+                let no_of_detections = detections.length;
+
+                //disabling the loader
+                $('#detection_loader').attr('hidden', true);
+
+                //appearing the no of detections number area
+                $('#detection_number_area').attr('hidden', false);
+                $('#no_of_detections').text(no_of_detections);
+
+                detections.map((detection) => {
+                    img_string += "<img src='{% static '' %}FirstApp/activity/" + global_video_name + "/" + frame_name + "/" + detection + "' class='detections m-2' width='100' height='100' >"
+                });
+
+                $('#detection_frames').prepend(img_string);
+
+            }
+
+
+            //listening for click events in labels
+            $('.labels').click(function () {
+
+                let label = Number($(this).attr('data-number'));
+
+                //removing the previous student detection lists
+                $('.student_detection_lists').remove();
+
+                //appearing the loader
+                $('#detection_student_loader').attr('hidden', false);
+                //disappearing the no content message
+                $('#no_detection_student_content').attr('hidden', true);
+
+                //fetching from the api
+                fetch('http://127.0.0.1:8000/get-lecture-activity-detection-for-label/?video_name=' + global_video_name + '&label=' + label)
+                    .then((res) => res.json())
+                    .then((out) => createDetectedStudentFrames(out))
+                    .catch((error) => alert('this is the error: ' + error))
+            });
+
+
+            //creating the detected students frames
+            function createDetectedStudentFrames(detections) {
+
+                let htmlString = "";
+                //iterating through the student
+                detections.people.map((student) => {
+
+                    let title = student.split('.')[0];
+                    let images = "";
+                    htmlString += "<div class='row p-3 student-detection-rows'>";
+
+                    let student_count = 0;
+
+                    //iterating through the frames
+                    detections.response.map((frame) => {
+                        let frame_detections = frame.detections;
+
+                        if (frame_detections.includes(student)) {
+
+
+                            if (student_count === 0) {
+                                images += "<li class='list-group-item frame-0' id='image_0_" + title + "'>";
+                            } else {
+                                images += "<li class='list-group-item other-student-frames' id='image_" + student_count + "_" + title + "' hidden>";
+                            }
+
+                            images += "<img src='{% static '' %}FirstApp/Activity/" + global_video_name + "/" + frame.frame + "/" + student + "' width='200' height='200'>";
+                            images += "</li>";
+
+                            //increment the student count
+                            student_count++;
+                        }
+                    });
+
+                    htmlString += "<h6 class='font-italic'>" + title + "</h6>";
+                    htmlString += "<ul class='list-group list-group-horizontal student_detection_lists' style='overflow-x: scroll'>";
+                    htmlString += images;
+                    htmlString += "</ul>";
+                    htmlString += "<div class='slidecontainer'>";
+                    htmlString += "<div class='row m-3'></div>";
+                    htmlString += "<div class='row'>";
+                    htmlString += "<span><i class='fas fa-play play-pause-icon-student-frames' id='icon_" + title + "'></i></span>";
+                    htmlString += "</div>";
+                    htmlString += "<input type='range' min='1' max='100' value='0' class='slider' id='slider_" + title + "'>";
+                    htmlString += "<p>No of frames: <span id='demo_" + title + "'></span></p>";
+                    htmlString += "</div>";
+                    htmlString += "</div>";
+                });
+
+                //disappearing the loader
+                $('#detection_student_loader').attr('hidden', true);
+
+                //append to the relevant html card content
+                $('#detection_students').append(htmlString);
+
+            }
+
+
+            let studentTimeVar = null;
+
+            //playing the frames for each student detection
+            $(document).on('click', '.play-pause-icon-student-frames', function (e) {
+
+                //defining the two possible classes
+                let play_class = "fas fa-play play-pause-icon-student-frames";
+                let pause_class = "fas fa-pause play-pause-icon-student-frames";
+
+
+                //retrieving the current icon class
+                let current_class = $(this).attr('class');
+
+
+                //assigning the correct class based on the icon clicked
+                let new_class = (current_class === play_class) ? pause_class : play_class;
+
+
+                //setting the new class
+                $(this).attr('class', new_class);
+
+                //extracting the title pf the clicked icon
+                let title_part = $(this).attr('id');
+                let title = title_part.split("_")[1];
+
+
+                //handling the slider
+                let slider = document.getElementById("slider_" + title);
+                let output = document.getElementById("demo_" + title);
+
+
+                //when the button is playing
+                if (current_class === play_class) {
+                    studentTimeVar = setInterval(() => {
+                        let value = slider.value;
+                        let new_slider_value = Number(value) + 1;
+                        slider.value = new_slider_value;
+                        output.innerHTML = new_slider_value.toString();
+
+
+                        let selectedImage = '#image_' + Number(value) + '_' + title;
+
+                        //displaying the relevant image
+                        $('#image_0_' + title).html($(selectedImage).html());
+
+                    }, 100);
+                }
+
+                //when the button is paused
+                else if (current_class === pause_class) {
+                    clearInterval(studentTimeVar);
+                }
+
+            });
+
+
+            //processing the video frames for pose estimation
+            $('#process_btn').click(function () {
+                //hide the message
+                $('#no_individual_student_frames').attr('hidden', true);
+                //show the loader
+                $('#individual_student_frames_loader').attr('hidden', false);
+
+
+                //using the fetch api
+                fetch('http://127.0.0.1:8000/get-lecture-video-individual-student-frames/?video_name=' + global_video_name)
+                    .then((res) => res.json())
+                    .then((out) => displayStudentIndividualFrames(out))
+                    .catch((error) => alert('this is the error: ' + error))
+            });
+
+            //this function will display each student individual frames
+            function displayStudentIndividualFrames(response) {
+                let htmlString = "";
+                //iterating through the student
+                response.people.map((student) => {
+
+                    let title = student.split('.')[0];
+                    let images = "";
+                    htmlString += "<div class='row p-3 student-individual-rows'>";
+
+                    let student_count = 0;
+
+                    //iterating through the frames
+                    response.response.map((frame) => {
+                        let frame_detections = frame.detections;
+                        let frame_detection_length = frame_detections.length;
+
+                        if (frame_detections.includes(student)) {
+
+
+                            if (student_count === 0) {
+                                images += "<li class='list-group-item frame-0' id='image_0_individual_" + title + "'>";
+                            } else {
+                                images += "<li class='list-group-item other-student-frames' id='list_item_individual_" + student_count + "_" + title + "' hidden>";
+                            }
+
+                            images += "<img src='{% static '' %}FirstApp/Activity/" + global_video_name + "/" + frame.frame + "/" + student + "' id='image_individual_" + student_count + "_" + title + "' width='200' height='200'>";
+                            images += "</li>";
+
+                            if (student_count === (frame_detection_length - 1)) {
+                                images += "<li class='list-group-item'>";
+                                images += "<button type='button' class='btn btn-dark individual-student-frame' id='individual_student_" + title + "'>calculate</button>";
+                                images += "</li>";
+                            }
+
+
+                            //increment the student count
+                            student_count++;
+                        }
+                    });
+
+                    htmlString += "<ul class='list-group'>";
+                    htmlString += "<li class='list-group-item'>";
+                    htmlString += "<div class='row m-3'>";
+                    htmlString += "<h4 class='font-weight-bold'>Student ID: <span>" + title + "</span></h4>";
+                    htmlString += "</div>";
+                    htmlString += "</li>";
+                    htmlString += "<li class='list-group-item'>";
+                    htmlString += "<div class='row'>";
+                    htmlString += "<ul class='list-group list-group-horizontal student_individual_lists' id='student_individual_" + title + "' style='overflow-x: scroll'>";
+                    htmlString += images;
+                    htmlString += "</ul>";
+                    htmlString += "</div>";
+                    htmlString += "</li>";
+                    htmlString += "<li class='list-group-item'>";
+                    htmlString += "<div class='slidecontainer'>";
+                    htmlString += "<div class='row m-3'></div>";
+                    htmlString += "<div class='row'>";
+                    htmlString += "<span><i class='fas fa-play play-pause-icon-student-evaluations' id='icon_" + title + "'></i></span>";
+                    htmlString += "</div>";
+                    htmlString += "<input type='range' min='1' max='100' value='0' class='slider' id='slider_evaluation" + title + "'>";
+                    htmlString += "<p>No of frames: <span id='demo_evaluation" + title + "'></span></p>";
+                    htmlString += "</div>";
+                    htmlString += "</div>";
+                    htmlString += "</li>";
+                    htmlString += "</ul>";
+                });
+
+                //disappearing the loader
+                $('#individual_student_frames_loader').attr('hidden', true);
+
+                //append to the relevant html card content
+                $('#individual_student_frames').append(htmlString);
+            }
+
+            //to listen to click event from individual students
+            $(document).on('click', '.individual-student-frame', function (e) {
+                let student_id_parts = $(this).attr('id');
+                let student_id = student_id_parts.split('_')[2];
+
+                let frame_list_id = '#student_individual_' + student_id;
+
+                //traverse through the children of the selected list
+                let image_list = $(frame_list_id).children().map((i, child) => {
+                    //traversing the <li>
+                    return $(child).find('img').attr('id');
+
+                });
+
+                student_id += ".png";
+
+                e.target.innerHTML = "<span class='font-italic'>Processing</span>";
+
+                //running the posenet model
+                loadModel(image_list, student_id, e);
+            });
+
+
+            //POSENET model
+            //this function will load the posenet model
+            async function loadModel(imageList, student, e) {
+                const imageScaleFactor = 1.0;
+                const flipHorizontal = false;
+                const outputStride = 16;
+                // get up to 5 poses
+                const maxPoseDetections = 20;
+                // minimum confidence of the root part of a pose
+                const scoreThreshold = 0.2;
+                // minimum distance in pixels between the root parts of poses
+                const nmsRadius = 20;
+
+                //load the model
+                const model = await posenet.load();
+
+                //this array will keep all the detected poses
+                let keypoints_arr = [];
+
+                //loop through the selected image IDs
+                for (let i = 0; i < imageList.length; i++) {
+                    let image_id = imageList[i];
+                    let imageElement = document.getElementById(image_id);
+
+                    //estimate the poses
+                    const poses = await model.estimateSinglePose(imageElement, {
+                        imageScaleFactor: 1.0,
+                        flipHorizontal: false,
+                        outputStride: 8,
+                        maxDetections: 10,
+                        scoreThreshold: 0.5,
+                        nmsRadius: 20
+                    });
+
+                    //push to the created keypoints array
+                    keypoints_arr.push(poses)
+
+                }
+
+                //using the fetch API to POST the data
+                await fetch('http://127.0.0.1:8000/process-lecture-video-individual-pose-estimation', {
+                    method: 'POST',
+                    headers: {
+                        "Content-type": "application/json"
+                    },
+                    body: JSON.stringify({
+                        "video_name": global_video_name,
+                        "student": student,
+                        "poses": keypoints_arr
+                    })
+                })
+                    .then((res) => res.json())
+                    .then((out) => {
+                        e.target.innerHTML = "<span>Completed</span>";
+                    })
+                    .catch((err) => alert('this is the error: ' + err));
+
+                /*
+                const imageElement = document.getElementById(id);
+
+                let isImageDisplayed = true;
+
+                if (isImageDisplayed) {
+                    $('#message').hide();
+                    $('#croppedMessage').hide();
+                }
+
+                let splitted = imageElement.src.split('/');
+
+                //assigning the image name
+                imageName = splitted[7].split('.')[0];
+
+
+                //show the loading screen
+                $('#loading').attr('hidden', false);
+                $('#cropped_loading').attr('hidden', false);
+
+                const model = await posenet.load();
+
+                const poses = await model.estimateMultiplePoses(imageElement, {
+                    imageScaleFactor: 1.0,
+                    flipHorizontal: false,
+                    outputStride: 8,
+                    maxDetections: 10,
+                    scoreThreshold: 0.5,
+                    nmsRadius: 20
+                });
+
+                let keypoints_arr = [];
+
+                //hide the loading screen
+                $('#loading').hide();
+                $('#cropped_loading').hide();
+
+                //removing the previous canvas
+                $('#showFace').remove();
+
+                //removing the previous canvas row
+                $('#canvas-frame').remove();
+
+                //creating the same canvas
+                let newCanvasContent = "<canvas id='showFace' width='500' height='300'></canvas>";
+                $(newCanvasContent).prependTo('#canvas-body');
+
+                let canvas = document.getElementById('showFace');
+
+                let context = canvas.getContext('2d');
+
+                context.drawImage(imageElement, 0, 0, 500, 300);
+
+
+                let htmlContent = "<div id='canvas-frame'><div class='row'>";
+
+
+
+
+                {#drawing rectangle for each person face#}
+                for (let count = 0; count < poses.length; count++) {
+                    let person = poses[count];
+
+                    let new_canvas_id = 'canvas-' + (count + 1);
+                    let new_canvas = document.getElementById(new_canvas_id);
+
+
+                {#let new_context = new_canvas.getContext('2d');#}
+
+                    let x1 = Math.round(Number(person.keypoints[5].position.x));
+                    let y1 = Math.round(Number(person.keypoints[5].position.y));
+                    let x2 = Math.round(Number(person.keypoints[6].position.x));
+                    let y2 = Math.round(Number(person.keypoints[6].position.y));
+
+                    let x_diff = x1 - x2;
+                    let y_diff = y1 - y2;
+                    let x_pow = Math.pow(x_diff, 2);
+                    let y_pow = Math.pow(y_diff, 2);
+                    let summation = x_pow + y_pow;
+
+                    let distance = Math.sqrt(summation);
+                    let fraction = Math.round(distance * 0.6);
+
+                    let middle_x = x2 + fraction;
+                    let middle_y = y2 - 20;
+
+                    let head_x = middle_x;
+                    let head_y = middle_y - fraction;
+
+                    let left_upper_x = middle_x - fraction;
+                    context.rect(left_upper_x, head_y, distance, fraction);
+
+
+                {#context.fillStyle = 'red';#}
+                    context.stroke();
+
+                    let canvasHtml = "<canvas id='" + new_canvas_id + "' height='200' width='200'></canvas>";
+
+
+                    htmlContent += "<div class='flex-column' style='width: 30%'>" +
+                        canvasHtml
+                        + "</div>";
+
+                    if (((count + 1)) % 3 === 0) {
+                        htmlContent += "</div><div class='row'>";
+                    }
+
+                    //appending the keypoints to the array
+                    keypoints_arr[keypoints_arr.length] = {
+                        'left_x': left_upper_x,
+                        'left_y': head_y,
+                        'width': distance,
+                        'height': fraction
+                    };
+
+                    //appending the keypoints to the global array
+                    points[points.length] = {
+                        'left_x': left_upper_x,
+                        'left_y': head_y,
+                        'width': distance,
+                        'height': fraction
+                    };
+
+                }
+
+                htmlContent += "</div>";
+                htmlContent += "</div>";
+
+
+                //append the html content
+                $('#test-canvas').prepend(htmlContent);
+
+
+
+                {#getting the natural dimensions of the image#}
+                let originalWidth = imageElement.naturalWidth;
+                let originalHeight = imageElement.naturalHeight;
+
+                //drawing extracted faces on the canvas
+                for (let i = 0; i < poses.length; i++) {
+                    let canvas_id = 'canvas-' + (i + 1);
+                    let canvasDoc = document.getElementById(canvas_id);
+                    let canvasCont = canvasDoc.getContext('2d');
+
+                    let left_x = keypoints_arr[i].left_x;
+                    let left_y = keypoints_arr[i].left_y;
+                    let width = keypoints_arr[i].width;
+                    let height = keypoints_arr[i].height;
+
+                    let x_scale = originalWidth / imageElement.offsetWidth;
+                    let y_scale = originalHeight / imageElement.offsetHeight;
+
+                    let x_corner = left_x * x_scale;
+                    let y_corner = left_y * y_scale;
+                    let modified_width = width * x_scale;
+                    let modified_height = height * y_scale;
+
+
+
+
+                {#canvasCont.drawImage(imageElement, left_x * 6, left_y * 6, width * 10, height * 10, 0, 0, 100, 150);#}
+
+
+                {#canvasCont.drawImage(imageElement, 0, 800, 800, 500, 0, 0, 100, 150);#}
+
+
+                {#canvasCont.drawImage(imageElement, 230.2, 700, 400, 400, 0, 0, 150, 150);#}
+
+
+                {#canvasCont.drawImage(imageElement, left_x, left_y, width * 10, height * 10, 0, 0, 100, 150);#}
+
+
+                {#canvasCont.drawImage(imageElement, left_x, left_y, width, height, 0, 0, 100, 150);#}
+
+
+                {#canvasCont.drawImage(imageElement, left_x * 10, left_y * 10, width * 10, height * 10, 0, 0, 100, 150);#}
+
+                    canvasCont.drawImage(imageElement, x_corner, y_corner, modified_width, modified_height, 0, 0, 199, 199);
+
+
+                }
+                //displaying the download button
+
+
+                {#$('#downloadBtn').attr('hidden', false);#}
+
+                //then save the images
+                //saveImages();
+                */
+            }
+
+
+        });
+
+    </script>
+
+
+{% endblock %}
+
+<div id="wrapper">
+    <!-- Sidebar -->
+
+    <!-- Content Wrapper -->
+    <div id="content-wrapper" class="d-flex flex-column">
+
+        <!-- Main Content -->
+        <div id="content">
+
+            <!-- Begin Page Content -->
+            {% block 'container-fluid' %}
+                <div class="container-fluid">
+                    {% load static %}
+
+                    <!-- Page Heading -->
+                    <div class="d-sm-flex align-items-center justify-content-between mb-4">
+                        <h1 class="h3 mb-0 text-gray-800">Student Pose Estimation</h1>
+                    </div>
+
+                    <!--first row -->
+                    <div class="row p-2">
+
+                        <!--first column -->
+                        <div class="col-lg-6" style="overflow-x: scroll">
+                            <div class="card shadow mb-4">
+                                <!--card header -->
+                                <div class="card-header py-3">
+                                    <h5 class="m-0 font-weight-bold text-primary">Lecturer Subjects</h5>
+                                </div>
+
+                                <!--card body -->
+                                <div class="card-body">
+                                    {% if lecturer_subjects.count == 0 %}
+                                        <div class="text-center">
+                                            <span class="font-italic">No subjects</span>
+                                        </div>
+                                    {% else %}
+                                        <div class="table-responsive">
+                                            <table class="table table-bordered" id="datatable">
+                                                <thead>
+                                                <tr>
+                                                    <th></th>
+                                                    <th>Subject Name</th>
+                                                    <th>Code</th>
+                                                    <th>Year</th>
+                                                </tr>
+                                                </thead>
+                                                <tbody>
+                                                {% for subject in subjects %}
+                                                    <tr class="subjects not_clicked" id="{{ subject.0.subject_code }}">
+                                                        <td>
+                                                            <div class="radio">
+                                                                <label><input type="radio"
+                                                                              id="{{ subject.0.subject_code }}"
+                                                                              name="subject_radio"
+                                                                              data-name="{{ subject.0.name }}"
+                                                                              data-lecturer="{{ lecturer }}"></label>
+                                                            </div>
+                                                        </td>
+                                                        <td>{{ subject.0.name }}</td>
+                                                        <td>{{ subject.0.subject_code }}</td>
+                                                        <td>{{ subject.0.year }}</td>
+                                                    </tr>
+                                                {% endfor %}
+                                                </tbody>
+                                            </table>
+                                        </div>
+
+                                    {% endif %}
+                                </div>
+                            </div>
+                        </div>
+                        <!--end of first column -->
+
+                        <!--second column (timetable column) -->
+                        <div class="col-lg-6" style="overflow-x: scroll">
+                            <div class="card shadow mb-4">
+                                <!--card header -->
+                                <div class="card-header py-3">
+                                    <h5 class="m-0 font-weight-bold text-primary">View timetable</h5>
+                                </div>
+
+                                <!--card body -->
+                                <div class="card-body">
+
+                                    <!--loading gif -->
+                                    <div class="text-center" id="no_subject_selected">
+                                        <span class="font-italic">No lecture is selected</span>
+                                    </div>
+                                    <!--no lecture selected message -->
+                                    <div class="text-center" id="loader" hidden>
+                                        <img src="{% static 'FirstApp/images/ajax-loader.gif' %}" alt="Loader">
+                                    </div>
+                                    <!--no lecture selected message -->
+                                    <div class="text-center" id="no_timetable_content" hidden>
+                                        <span class="font-italic">Not included in the timetable</span>
+                                    </div>
+                                    <!--displaying the timetable -->
+                                    <table class="table table-striped" id="timetable" hidden>
+                                        {#                                    <caption id="timetable_caption"></caption>#}
+                                        <thead>
+                                        <tr>
+                                            <th>Date</th>
+                                            <th>Hall No.</th>
+                                            <th>start time</th>
+                                            <th>end time</th>
+                                        </tr>
+                                        </thead>
+                                        <tbody id="timetable_body">
+
+                                        </tbody>
+                                    </table>
+
+
+                                </div>
+                            </div>
+                        </div>
+                        <!--end of second column -->
+
+                    </div>
+                    <!--end of 1st row -->
+
+                    <!--2nd row -->
+                    <div class="row p-2">
+
+                        <!--1st column -->
+                        <div class="col-lg-6">
+                            <!--card content -->
+                            <div class="card shadow mb-4">
+                                <!--card header -->
+                                <div class="card-header py-3">
+                                    <h5 class="m-0 font-weight-bold text-primary">Pose Estimation</h5>
+                                </div>
+
+                                <!--card body -->
+                                <div class="card-body">
+
+                                    <!--nav tabs-->
+                                    <ul class="nav nav-tabs nav-fill" id="nav_bar" role="tablist">
+                                        <li class="nav-item">
+                                            <a class="nav-link active" id="frame-tab" data-toggle="tab" href="#frame"
+                                               role="tab" aria-controls="frame" aria-selected="true">Frame</a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a class="nav-link" id="graph-tab" data-toggle="tab" href="#graph"
+                                               role="tab" aria-controls="graph" aria-selected="false">Graphs</a>
+                                        </li>
+                                    </ul>
+
+                                    <!--tab content -->
+                                    <div class="tab-content" id="tabContentDetails">
+                                        <!--frame tab -->
+                                        <div class="tab-pane fade show active" id="frame" role="tabpanel"
+                                             aria-labelledby="home-tab">
+                                            <!--this area will display the frame -->
+                                            <div class="text-center" id="frame_area" style="height: 600px">
+                                                <!--temporary text -->
+                                                <span class="font-italic" id="temporary_text">Frame will be displayed here</span>
+
+                                                <!--loading buffer area-->
+                                                <div class="text-center" id="frame_loader" hidden>
+                                                    <img src="{% static 'FirstApp/images/ajax-loader.gif' %}"
+                                                         alt="Loader">
+                                                </div>
+
+                                                <!--frames -->.
+                                                <div class="text-center p-4" id="video_frames">
+                                                    <!-- slide container -->
+                                                    <div id="slidecontainer" hidden>
+                                                        <div class="row m-3"></div>
+                                                        <!-- play/pause icon -->
+                                                        <div class="row">
+                                                            <span><i class="fas fa-play"
+                                                                     id="play_pause_icon_activity"></i></span>
+                                                        </div>
+                                                        <input type="range" min="1" max="100" value="0" class="slider"
+                                                               id="myActivityRange">
+                                                        <p>No of frames: <span id="demo"></span></p>
+                                                    </div>
+                                                </div>
+                                                <!--end of video frames -->
+                                                <button type="button" class="btn btn-danger float-right"
+                                                        id="process_btn" hidden>Process
+                                                </button>
+                                            </div>
+
+
+                                        </div>
+                                        <!--end of tab content (frames) -->
+
+                                        <!--graph tab -->
+                                        <div class="tab-pane fade" id="graph" role="tabpanel"
+                                             aria-labelledby="profile-tab">
+                                            <!--card content -->
+                                            <div class="card shadow mb-4 p-3">
+                                                <!-- Card Header - Dropdown -->
+                                                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
+                                                    <h6 class="m-0 font-weight-bold text-primary">Student
+                                                        Activities</h6>
+                                                    <div class="dropdown no-arrow">
+                                                        <a class="dropdown-toggle" href="#" role="button"
+                                                           id="dropdownMenuLink" data-toggle="dropdown"
+                                                           aria-haspopup="true" aria-expanded="false">
+                                                            <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
+                                                        </a>
+                                                        <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in"
+                                                             aria-labelledby="dropdownMenuLink">
+                                                            <div class="dropdown-header">Dropdown Header:</div>
+                                                            <a class="dropdown-item" href="#">Action</a>
+                                                            <a class="dropdown-item" href="#">Another action</a>
+                                                            <div class="dropdown-divider"></div>
+                                                            <a class="dropdown-item" href="#">Something else here</a>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <!-- Card Body -->
+                                                <div class="card-body">
+                                                    <div class="chart-pie pt-4 pb-2">
+                                                        <canvas id="myPieChart"></canvas>
+                                                    </div>
+                                                    <div class="mt-4 text-center small">
+                    <span class="mr-2">
+                      <i class="fas fa-circle text-primary"></i> Direct
+                    </span>
+                                                        <span class="mr-2">
+                      <i class="fas fa-circle text-success"></i> Social
+                    </span>
+                                                        <span class="mr-2">
+                      <i class="fas fa-circle text-info"></i> Referral
+                    </span>
+                                                    </div>
+                                                </div>
+                                            </div>
+
+                                        </div>
+
+                                    </div>
+
+
+                                </div>
+                            </div>
+                        </div>
+
+
+                        <!--2nd column -->
+                        <div class="col-lg-6">
+                            <!--card content -->
+                            <div class="card shadow mb-4">
+                                <!--card header -->
+                                <div class="card-header py-3">
+                                    <h5 class="m-0 font-weight-bold text-primary">Frame Detections</h5>
+                                </div>
+
+                                <!--card body -->
+                                <div class="text-center p-4" id="detection_frames">
+
+                                    <!--no content message-->
+                                    <div class="text-center p-2" id="no_detection_message_content">
+                                        <span class="font-italic">No frame is selected</span>
+                                    </div>
+
+                                    <div class="text-left m-3" id="detection_number_area" hidden>
+                                        <p>No of detections: <span id="no_of_detections"></span></p>
+                                    </div>
+                                    <!--the detection loader -->
+                                    <div class="text-center p-2" id="detection_loader" hidden>
+                                        <img src="{% static 'FirstApp/images/ajax-loader.gif' %}"
+                                             alt="Loader">
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!--detection person card -->
+                            <div class="card shadow mb-4">
+                                <!--card header -->
+                                <div class="card-header py-3">
+                                    <h5 class="m-0 font-weight-bold text-primary">Detected Students</h5>
+                                </div>
+
+                                <!--card body -->
+                                <div class="text-center p-4" id="detection_students">
+                                    <!--no content message-->
+                                    <div class="text-center p-2" id="no_detection_student_content">
+                                        <span class="font-italic">No activity type is selected</span>
+                                    </div>
+
+                                    <!--the detection student loader -->
+                                    <div class="text-center p-2" id="detection_student_loader" hidden>
+                                        <img src="{% static 'FirstApp/images/ajax-loader.gif' %}"
+                                             alt="Loader">
+                                    </div>
+
+                                </div>
+                            </div>
+                        </div>
+
+
+                    </div>
+                    <!-- end of 2nd row -->
+
+
+                    <!--3rd row -->
+                    <div class="row p-2">
+
+                        <!--this column will display individual student frames -->
+                        <!--1st column -->
+                        <div class="col-lg-6">
+                            <!--card -->
+                            <div class="card shadow mb-4">
+                                <!--card header -->
+                                <div class="card-header">
+                                    <h5 class="m-0 font-weight-bold text-primary">Individual Student Frames</h5>
+                                </div>
+
+                                <!--card body -->
+                                <div class="card-body" id="individual_student_frames">
+
+                                    <!--no content message-->
+                                    <div class="text-center p-2" id="no_individual_student_frames">
+                                        <span class="font-italic">Press 'Process' button to display Individual Student Frames</span>
+                                    </div>
+
+                                    <!--the detection student loader -->
+                                    <div class="text-center p-2" id="individual_student_frames_loader" hidden>
+                                        <img src="{% static 'FirstApp/images/ajax-loader.gif' %}"
+                                             alt="Loader">
+                                    </div>
+                                </div>
+
+                            </div>
+
+
+                        </div>
+
+                    </div>
+                    <!--end of 3rd row -->
+
+
+                </div>
+            {% endblock %}
+            <!-- End of container-fluid -->
+
+        </div>
+        <!-- End of Main Content -->
+
+    </div>
+    <!-- End of Content Wrapper -->
+
+</div>
+
+{% block 'modal' %}
+    <div class="modal fade" id="video_modal" role="dialog" aria-labelledby="gif-body">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h2 class="modal-title">Video details</h2>
+                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">×</span>
+                    </button>
+                </div>
+
+                <div class="modal-body">
+                    <table class="table table-borderless">
+                        <tr>
+                            <td class="font-weight-bold">Video Name</td>
+                            <td id="video_name"></td>
+                        </tr>
+                        <tr>
+                            <td class="font-weight-bold">Duration</td>
+                            <td id="video_duration"></td>
+                        </tr>
+                        <tr>
+                            <td class="font-weight-bold">Date of Creation</td>
+                            <td id="video_date"></td>
+                        </tr>
+                    </table>
+                </div>
+
+                <!-- modal footer -->
+                <div class="modal-footer">
+                    <button type="button" data-dismiss="modal" class="btn btn-danger text-white">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <!-- Logout Modal-->
+    <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
+         aria-hidden="true">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
+                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">×</span>
+                    </button>
+                </div>
+                <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
+                <div class="modal-footer">
+                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
+                    <a class="btn btn-primary" href="/logout">Logout</a>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}
+
+</body>
+</html>
\ No newline at end of file

FirstApp/templates/FirstApp/register.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="">
+  <meta name="author" content="">
+
+  <title>SB Admin 2 - Register</title>
+  {% load static %}
+  <link href="{% static 'FirstApp/vendor/fontawesome-free/css/all.min.css' %}" rel="stylesheet" type="text/css">
+  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
+  <link href="{% static 'FirstApp/css/sb-admin-2.min.css' %}" rel="stylesheet">
+
+</head>
+
+<body class="bg-gradient-primary">
+
+  <script type="text/javascript">
+    function insert() {
+      fetch('http://127.0.0.1:8000/register/', {
+        method: 'POST',
+        headers: {
+          "Content-type": "application/json"
+        },
+        body: JSON.stringify({
+          "firstName": document.getElementById('exampleFirstName').value,
+          "lastName": document.getElementById('exampleLastName').value,
+          "email": document.getElementById('exampleInputEmail').value,
+          "password": document.getElementById('exampleInputPassword').value
+        })
+      })
+      .then(resposne => resposne.json())
+      .then(json => {
+          if (json) {
+            alert('successfully inserted');
+          }
+        }
+      )
+    }
+  </script>
+
+  <div class="container">
+
+    <div class="card o-hidden border-0 shadow-lg my-5">
+      <div class="card-body p-0">
+        <!-- Nested Row within Card Body -->
+        <div class="row">
+          <div class="col-lg-5 d-none d-lg-block bg-register-image"></div>
+          <div class="col-lg-7">
+            <div class="p-5">
+              <div class="text-center">
+                <h1 class="h4 text-gray-900 mb-4">Create an Account!</h1>
+              </div>
+              <form action="#" class="user">
+                <div class="form-group row">
+                  <div class="col-sm-6 mb-3 mb-sm-0">
+                    <input type="text" class="form-control form-control-user" id="exampleFirstName" placeholder="First Name">
+                  </div>
+                  <div class="col-sm-6">
+                    <input type="text" class="form-control form-control-user" id="exampleLastName" placeholder="Last Name">
+                  </div>
+                </div>
+                <div class="form-group">
+                  <input type="email" class="form-control form-control-user" id="exampleInputEmail" placeholder="Email Address">
+                </div>
+                <div class="form-group row">
+                  <div class="col-sm-6 mb-3 mb-sm-0">
+                    <input type="password" class="form-control form-control-user" id="exampleInputPassword" placeholder="Password">
+                  </div>
+                  <div class="col-sm-6">
+                    <input type="password" class="form-control form-control-user" id="exampleRepeatPassword" placeholder="Repeat Password">
+                  </div>
+                </div>
+                <button type="submit" class="btn btn-primary btn-user btn-block" onclick="insert()">
+                  Register Account
+                </button>
+                <hr>
+                <a href="index.html" class="btn btn-google btn-user btn-block">
+                  <i class="fab fa-google fa-fw"></i> Register with Google
+                </a>
+                <a href="index.html" class="btn btn-facebook btn-user btn-block">
+                  <i class="fab fa-facebook-f fa-fw"></i> Register with Facebook
+                </a>
+              </form>
+              <hr>
+              <div class="text-center">
+                <a class="small" href="forgot-password.html">Forgot Password?</a>
+              </div>
+              <div class="text-center">
+                <a class="small" href="login.html">Already have an account? Login!</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+  <!-- Bootstrap core JavaScript-->
+  <script src="{% static 'FirstApp/vendor/jquery/jquery.js' %}"></script>
+  <script src="{% static 'FirstApp/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
+
+  <!-- Core plugin JavaScript-->
+  <script src="{% static 'FirstApp/vendor/jquery-easing/jquery.easing.min.js' %}"></script>
+
+  <!-- Custom scripts for all pages-->
+  <script src="{% static 'FirstApp/js/sb-admin-2.min.js' %}"></script>
+
+</body>
+
+</html>

FirstApp/templates/FirstApp/template.html

+<!DOCTYPE html>
+<html lang="en">
+{% block head %}
+<head>
+    <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="">
+  <meta name="author" content="">
+
+  <title>SLPES</title>
+  {% load static %}
+    <link rel="shortcut icon" href="{% static 'FirstApp/images/favicon.ico' %}" type="image/x-icon" />
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+    <link rel="stylesheet" href="{% static 'FirstApp/css/sb-admin-2.min.css' %}">
+    <link rel="stylesheet" href="{% static 'FirstApp/css/slider.css' %}">
+    <link href="{% static 'FirstApp/vendor/fontawesome-free/css/all.min.css' %}" rel="stylesheet" type="text/css">
+
+    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
+    <link rel="stylesheet" href="{% static 'FirstApp/css/all.min.css' %}">
+    <link href="{% static 'FirstApp/vendor/datatables/dataTables.bootstrap4.min.css' %}" rel="stylesheet">
+
+</head>
+{% endblock %}
+
+<body id="page-top">
+    <!-- Page Wrapper -->
+
+    {% block javascript %}
+    {% load static %}
+    <script type="text/javascript" src="{% static 'FirstApp/vendor/jquery/jquery.js' %}"></script>
+    <script src="{% static 'FirstApp/vendor/jquery/jquery.js' %}"></script>
+    <script src="{% static 'FirstApp/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
+
+    {% endblock %}
+  <div id="wrapper">
+    <!-- Sidebar -->
+    <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
+
+      <!-- Sidebar - Brand -->
+      <a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
+        <div class="sidebar-brand-icon rotate-n-15">
+          <i class="fas fa-laugh-wink"></i>
+        </div>
+        <div class="sidebar-brand-text mx-3">SLPES Lecturer</div>
+      </a>
+
+      <!-- Divider -->
+      <hr class="sidebar-divider my-0">
+
+      <!-- Nav Item - Dashboard -->
+      <li class="nav-item active">
+        <a class="nav-link" href="/">
+          <i class="fas fa-fw fa-tachometer-alt"></i>
+          <span>Dashboard</span></a>
+      </li>
+
+      <!-- Divider -->
+      <hr class="sidebar-divider">
+
+      <!-- Heading -->
+      <div class="sidebar-heading">
+        Interface
+      </div>
+
+      <!-- Nav Item - Pages Collapse Menu -->
+      <li class="nav-item">
+        <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
+          <i class="fas fa-fw fa-cog"></i>
+          <span>Estimations</span>
+        </a>
+        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
+          <div class="bg-white py-2 collapse-inner rounded">
+            <h6 class="collapse-header">Components:</h6>
+              <a class="collapse-item" href="/pose">Pose</a>
+              <a class="collapse-item" href="/gaze">Gaze</a>
+              <a class="collapse-item" href="/emotion">Emotion</a>
+              <a class="collapse-item" href="/activity">Activity</a>
+          </div>ac
+        </div>
+      </li>
+
+      <!-- Nav Item - Utilities Collapse Menu -->
+      <li class="nav-item">
+        <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities" aria-expanded="true" aria-controls="collapseUtilities">
+          <i class="fas fa-fw fa-wrench"></i>
+          <span>Utilities</span>
+        </a>
+        <div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities" data-parent="#accordionSidebar">
+          <div class="bg-white py-2 collapse-inner rounded">
+            <h6 class="collapse-header">Custom Utilities:</h6>
+            <a class="collapse-item" href="/extract">Video Extractor</a>
+            <a class="collapse-item" href="/video_result">Video Results</a>
+            <a class="collapse-item" href="utilities-animation.html">Animations</a>
+            <a class="collapse-item" href="utilities-other.html">Other</a>
+          </div>
+        </div>
+      </li>
+
+      <!-- Divider -->
+      <hr class="sidebar-divider">
+
+      <!-- Heading -->
+      <div class="sidebar-heading">
+        Addons
+      </div>
+
+      <!-- Nav Item - Pages Collapse Menu -->
+      <li class="nav-item">
+        <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages">
+          <i class="fas fa-fw fa-folder"></i>
+          <span>Pages</span>
+        </a>
+        <div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
+          <div class="bg-white py-2 collapse-inner rounded">
+            <h6 class="collapse-header">Login Screens:</h6>
+            <a class="collapse-item" href="/login">Login</a>
+            <a class="collapse-item" href="/register">Register</a>
+            <a class="collapse-item" href="/forgot-password">Forgot Password</a>
+            <div class="collapse-divider"></div>
+            <h6 class="collapse-header">Other Pages:</h6>
+            <a class="collapse-item" href="/404">404 Page</a>
+            <a class="collapse-item" href="/blank">Blank Page</a>
+          </div>
+        </div>
+      </li>
+
+      <!-- Nav Item - Charts -->
+      <li class="nav-item">
+        <a class="nav-link" href="charts.html">
+          <i class="fas fa-fw fa-chart-area"></i>
+          <span>Charts</span></a>
+      </li>
+
+      <!-- Nav Item - Tables -->
+      <li class="nav-item">
+        <a class="nav-link" href="/tables">
+          <i class="fas fa-fw fa-table"></i>
+          <span>Tables</span></a>
+      </li>
+
+      <!-- Divider -->
+      <hr class="sidebar-divider d-none d-md-block">
+
+      <!-- Sidebar Toggler (Sidebar) -->
+      <div class="text-center d-none d-md-inline">
+        <button class="rounded-circle border-0" id="sidebarToggle"></button>
+      </div>
+
+    </ul>
+    <!-- End of Sidebar -->
+
+    <div id="content-wrapper" class="d-flex flex-column">
+
+      <!-- Main Content -->
+      <div id="content">
+
+        <!-- Topbar -->
+        <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
+
+          <!-- Sidebar Toggle (Topbar) -->
+          <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
+            <i class="fa fa-bars"></i>
+          </button>
+
+          <!-- Topbar Search -->
+          <form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
+            <div class="input-group">
+              <input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
+              <div class="input-group-append">
+                <button class="btn btn-primary" type="button">
+                  <i class="fas fa-search fa-sm"></i>
+                </button>
+              </div>
+            </div>
+          </form>
+
+          <!-- Topbar Navbar -->
+          <ul class="navbar-nav ml-auto">
+
+            <!-- Nav Item - Search Dropdown (Visible Only XS) -->
+            <li class="nav-item dropdown no-arrow d-sm-none">
+              <a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="fas fa-search fa-fw"></i>
+              </a>
+              <!-- Dropdown - Messages -->
+              <div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in" aria-labelledby="searchDropdown">
+                <form class="form-inline mr-auto w-100 navbar-search">
+                  <div class="input-group">
+                    <input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
+                    <div class="input-group-append">
+                      <button class="btn btn-primary" type="button">
+                        <i class="fas fa-search fa-sm"></i>
+                      </button>
+                    </div>
+                  </div>
+                </form>
+              </div>
+            </li>
+
+            <!-- Nav Item - Alerts -->
+            <li class="nav-item dropdown no-arrow mx-1">
+              <a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="fas fa-bell fa-fw"></i>
+                <!-- Counter - Alerts -->
+                <span class="badge badge-danger badge-counter">3+</span>
+              </a>
+              <!-- Dropdown - Alerts -->
+              <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="alertsDropdown">
+                <h6 class="dropdown-header">
+                  Alerts Center
+                </h6>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="mr-3">
+                    <div class="icon-circle bg-primary">
+                      <i class="fas fa-file-alt text-white"></i>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="small text-gray-500">December 12, 2019</div>
+                    <span class="font-weight-bold">A new monthly report is ready to download!</span>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="mr-3">
+                    <div class="icon-circle bg-success">
+                      <i class="fas fa-donate text-white"></i>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="small text-gray-500">December 7, 2019</div>
+                    $290.29 has been deposited into your account!
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="mr-3">
+                    <div class="icon-circle bg-warning">
+                      <i class="fas fa-exclamation-triangle text-white"></i>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="small text-gray-500">December 2, 2019</div>
+                    Spending Alert: We've noticed unusually high spending for your account.
+                  </div>
+                </a>
+                <a class="dropdown-item text-center small text-gray-500" href="#">Show All Alerts</a>
+              </div>
+            </li>
+
+            <!-- Nav Item - Messages -->
+            <li class="nav-item dropdown no-arrow mx-1">
+              <a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="fas fa-envelope fa-fw"></i>
+                <!-- Counter - Messages -->
+                <span class="badge badge-danger badge-counter">7</span>
+              </a>
+              <!-- Dropdown - Messages -->
+              <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="messagesDropdown">
+                <h6 class="dropdown-header">
+                  Message Center
+                </h6>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/fn_BT9fwg_E/60x60" alt="">
+                    <div class="status-indicator bg-success"></div>
+                  </div>
+                  <div class="font-weight-bold">
+                    <div class="text-truncate">Hi there! I am wondering if you can help me with a problem I've been having.</div>
+                    <div class="small text-gray-500">Emily Fowler · 58m</div>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/AU4VPcFN4LE/60x60" alt="">
+                    <div class="status-indicator"></div>
+                  </div>
+                  <div>
+                    <div class="text-truncate">I have the photos that you ordered last month, how would you like them sent to you?</div>
+                    <div class="small text-gray-500">Jae Chun · 1d</div>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/CS2uCrpNzJY/60x60" alt="">
+                    <div class="status-indicator bg-warning"></div>
+                  </div>
+                  <div>
+                    <div class="text-truncate">Last month's report looks great, I am very happy with the progress so far, keep up the good work!</div>
+                    <div class="small text-gray-500">Morgan Alvarez · 2d</div>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/Mv9hjnEUHR4/60x60" alt="">
+                    <div class="status-indicator bg-success"></div>
+                  </div>
+                  <div>
+                    <div class="text-truncate">Am I a good boy? The reason I ask is because someone told me that people say this to all dogs, even if they aren't good...</div>
+                    <div class="small text-gray-500">Chicken the Dog · 2w</div>
+                  </div>
+                </a>
+                <a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>
+              </div>
+            </li>
+
+            <div class="topbar-divider d-none d-sm-block"></div>
+
+            <!-- Nav Item - User Information -->
+            <li class="nav-item dropdown no-arrow">
+              <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <span class="mr-2 d-none d-lg-inline text-gray-600 small">{{ request.user.username }}</span>
+                  {% load static %}
+                <img class="img-profile rounded-circle" src="{% static 'FirstApp/images/user_profile.png' %}">
+              </a>
+              <!-- Dropdown - User Information -->
+              <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
+                <a class="dropdown-item" href="#">
+                  <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Profile
+                </a>
+                <a class="dropdown-item" href="#">
+                  <i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Settings
+                </a>
+                <a class="dropdown-item" href="#">
+                  <i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Activity Log
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
+                  <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Logout
+                </a>
+              </div>
+            </li>
+
+          </ul>
+
+        </nav>
+        <!-- End of Topbar -->
+
+        {% block 'container-fluid' %}
+          {% load static %}
+        {% endblock %}
+      </div>
+
+      {% block 'footer' %}
+      <footer class="sticky-footer bg-white">
+        <div class="container my-auto">
+          <div class="copyright text-center my-auto">
+            <span>Copyright &copy; Student and Lecturer Performance Enhancement System 2019</span>
+          </div>
+        </div>
+      </footer>
+      {% endblock %}
+    </div>
+  </div>
+
+  {% block 'modal' %}
+    {% load static %}
+      <script type="text/javascript" src="{% static 'FirstApp/vendor/jquery/jquery.js' %}"></script>
+      <script src="{% static 'FirstApp/vendor/jquery/jquery.js' %}"></script>
+      <script src="{% static 'FirstApp/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
+
+
+      <a class="scroll-to-top rounded" href="#page-top">
+          <i class="fas fa-angle-up"></i>
+      </a>
+
+
+      <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
+           aria-hidden="true">
+          <div class="modal-dialog" role="document">
+              <div class="modal-content">
+                  <div class="modal-header">
+                      <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
+                      <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+                          <span aria-hidden="true">×</span>
+                      </button>
+                  </div>
+                  <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
+                  <div class="modal-footer">
+                      <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
+                      <a class="btn btn-primary" href="/logout">Logout</a>
+                  </div>
+              </div>
+          </div>
+      </div>
+
+  {% endblock %}
+
+  {% block 'scripts' %}
+    {% load static %}
+    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
+
+    <script src="{% static 'FirstApp/vendor/jquery/jquery.js' %}"></script>
+    <script src="{% static 'FirstApp/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
+
+    <!-- Core plugin JavaScript-->
+    <script src="{% static 'FirstApp/vendor/jquery-easing/jquery.easing.min.js' %}"></script>
+
+    <!-- Custom scripts for all pages-->
+    <script src="{% static 'FirstApp/js/sb-admin-2.min.js' %}"></script>
+
+    <!-- Page level plugins -->
+    <script src="{% static 'FirstApp/vendor/chart.js/Chart.min.js' %}"></script>
+
+    <!-- Page level custom scripts -->
+    <script src="{% static 'FirstApp/js/demo/chart-area-demo.js' %}"></script>
+    <script src="{% static 'FirstApp/js/demo/chart-pie-demo.js' %}"></script>
+  {% endblock %}
+
+  </body>
+</html>
\ No newline at end of file

FirstApp/templates/FirstApp/video.html

+{% extends 'FirstApp/template.html' %}
+<!DOCTYPE html>
+<html lang="en">
+<body id="page-top">
+    <!-- Page Wrapper -->
+
+  <div id="wrapper">
+    <!-- Sidebar -->
+
+    <!-- Content Wrapper -->
+    <div id="content-wrapper" class="d-flex flex-column">
+
+      <!-- Main Content -->
+      <div id="content">
+
+        <!-- Begin Page Content -->
+        {% block 'container-fluid' %}
+        <div class="container-fluid">
+          {% load static %}
+          <!-- Page Heading -->
+
+          <div class="d-sm-flex align-items-center justify-content-between mb-4">
+            <h1 class="h3 mb-0 text-gray-800">{{video_name}}</h1>
+            <a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="fas fa-download fa-sm text-white-50"></i> Generate Report</a>
+          </div>
+
+<!--          &lt;!&ndash; Content Row &ndash;&gt;-->
+          <div class="row">
+
+            <!-- Earnings (Monthly) Card Example -->
+            <div class="col-xl-12 col-md-6 mb-4">
+              <div class="card border-left-primary shadow h-100 py-2">
+                <div class="card-body">
+                  <div class="row">
+                    <div class="col-3">
+                      <video width="500" height="300" controls>
+                        <source src="{% static '' %}FirstApp/videos/{{video_name}}" type="video/mp4">
+                        Your browser does not support the video tag.
+                      </video>
+                    </div>
+
+                    <div class="col-3"></div>
+                    <!--progress bars-->
+<!--                    showing the percentage for each emotion-->
+                    <div class="col-6">
+                      <h2 class="big font-weight-bold">Emotion Detection</h2>
+                      <h4 class="small font-weight-bold">Anger
+                        <span class="float-right">{{meta.angry_perct}}%</span></h4>
+                      <div class="progress mb-4">
+                        <div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
+                      </div>
+                      <h4 class="small font-weight-bold">Happy
+                        <span class="float-right">{{meta.happy_perct}}%</span></h4>
+                      <div class="progress mb-4">
+                        <div class="progress-bar bg-warning" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
+                      </div>
+                      <h4 class="small font-weight-bold">Sadness
+                        <span class="float-right">{{meta.sad_perct}}%</span></h4>
+                      <div class="progress mb-4">
+                        <div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
+                      </div>
+                      <h4 class="small font-weight-bold">Surprise
+                        <span class="float-right">{{meta.surprise_perct}}%</span></h4>
+                      <div class="progress mb-4">
+                        <div class="progress-bar bg-info" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
+                      </div>
+                      <h4 class="small font-weight-bold">Neutral
+                        <span class="float-right">{{meta.neutral_perct}}%</span></h4>
+                      <div class="progress">
+                        <div class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+                      </div>
+
+                      <div class="form-control">
+                        <button type="button" id="test" data-target="#gif-body" data-toggle="modal">Test</button>
+                      </div>
+
+                    </div>
+
+                  </div>
+
+                  <div class="row">
+                    <h2 class="big font-weight-bold">Eye Gaze Estimation</h2>
+                  </div>
+
+                  <div class="row">
+                    <div class="col-6">
+                      <div class="progress">
+                        <div class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+                      </div>
+                    </div>
+                  </div>
+
+                </div>
+              </div>
+            </div>
+
+          </div>
+
+        </div>
+        {% endblock %}
+        <!-- End of container-fluid -->
+
+      </div>
+      <!-- End of Main Content -->
+
+    </div>
+    <!-- End of Content Wrapper -->
+
+  </div>
+
+  {% block 'modal' %}
+    <div class="modal fade" id="gif-body" role="dialog" aria-labelledby="gif-body">
+      <div class="modal-dialog modal-lg" style="max-width: 1600px; max-height: 800px">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h2 class="modal-title">Processing....</h2>
+            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">×</span>
+            </button>
+          </div>
+
+          <div class="modal-body text-center">
+            <img src="{% static 'FirstApp/images/ajax-loader.gif' %}" width="200" height="500" alt="This is a GIF">
+            <h5>This might take few seconds...</h5>
+          </div>
+        </div>
+      </div>
+   </div>
+  {% endblock %}
+
+</body>
+</html>
\ No newline at end of file

FirstApp/templates/FirstApp/video_results.html

+{% extends 'FirstApp/template.html' %}
+<!DOCTYPE html>
+<html lang="en">
+<body id="page-top">
+<!-- Page Wrapper -->
+
+{% block javascript %}
+        {% load static %}
+
+        <!-- Bootstrap core JavaScript-->
+      <script src="{% static 'FirstApp/vendor/jquery/jquery.min.js' %}"></script>
+      <script src="{% static 'FirstApp/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
+
+    <!-- Page level plugins -->
+    <script src="{% static 'FirstApp/vendor/datatables/jquery.dataTables.min.js' %}"></script>
+    <script src="{% static 'FirstApp/vendor/datatables/dataTables.bootstrap4.min.js' %}"></script>
+
+    <!-- Page level custom scripts -->
+    <script src="{% static 'FirstApp/js/demo/datatables-demo.js' %}"></script>
+
+      <!-- Core plugin JavaScript-->
+      <script src="{% static 'FirstApp/vendor/jquery-easing/jquery.easing.min.js' %}"></script>
+
+
+    <script type="text/javascript">
+
+        //jquery
+        $(document).ready(function () {
+            let folder = '';
+
+            //select a particular subject
+            $('input[type=radio]').click(function () {
+                let subject_id = $(this).attr('id');
+                let subject_name = $(this).attr('data-name');
+
+                $('#timetable').attr('hidden', false);
+                $('#no_subject_selected').attr('hidden', true);
+
+                $('#timetable_caption').text('subject: ' +subject_name);
+
+            });
+
+            //view the video details
+            $('.modal-expand').click(function () {
+                let clicked_id = $(this).attr('id');
+                folder = clicked_id;
+
+                $('input[type=hidden]').each(function () {
+                    let hidden_id = $(this).attr('id');
+
+                    if (clicked_id === hidden_id) {
+                        let duration = $(this).attr('data-duration');
+                        $('#video_name').text(clicked_id);
+                        $('#video_duration').text(duration);
+                        $('#video_date').text(new Date().toDateString());
+
+                    }
+                });
+
+
+                //after data assigning, load the modal
+                $('#video_modal').modal();
+            });
+
+            //retrieve the lecture details
+            $('.retrieve').click(function () {
+                let lecture = $(this).attr('data-id');
+
+                //removing the previous frames
+                $('#main_frames').remove();
+
+                $('#error_message').attr('hidden', true);
+                $('#nav_bar').attr('hidden', true);
+                $('#tabContentDetails').attr('hidden', true);
+
+                //disabling all the 'retrive' buttons
+                $('.retrieve').each(function () {
+                    $(this).attr('disabled', 'disabled');
+
+                });
+
+
+                let url = 'http://127.0.0.1:8000/videoExtract/?folder_name=' + lecture;
+                //retrieve frames
+                fetch(url)
+                    .then((res) => res.json())
+                    .then((out) => {
+                        //create the frames
+                        let frameHTML = createFrames(out.response, lecture);
+                        return frameHTML;
+                    })
+                    .then((obj) => {
+                        //after loading the frames, display the rest of the images
+                        $('#loader').attr('hidden', false);
+                        setTimeout(() => {
+                            $('#nav_bar').attr('hidden', false);
+                            $('#tabContentDetails').attr('hidden', false);
+                            $('#loader').attr('hidden', true);
+
+                            //enabling the 'retrive' buttons
+                            $('.retrieve').each(function () {
+                                $(this).removeAttr('disabled');
+
+                            });
+                        }, 65000);
+                        {#$('#nav_bar').attr('hidden', false);#}
+                        {#$('#tabContentDetails').attr('hidden', false);#}
+                        //load the frames
+                        $('#emotion_frames').prepend(obj);
+
+
+                    })
+                    .catch((error) => {
+                        $('#error_message').attr('hidden', false);
+                        //enabling the 'retrieve' buttons
+                        $('.retrieve').each(function () {
+                            $(this).removeAttr('disabled');
+
+                        });
+                    });
+
+                //setting some values
+                $('#no_content_message').attr('hidden', true);
+
+            });
+
+
+
+            //creating the frame content
+            function createFrames(response, folder) {
+                let main_frame_content = "<div class='row' id='main_frames'>";
+                main_frame_content += "<ul class='list-group list-group-horizontal'>";
+                let count = 0;
+                //loop through the frames
+                response.map((image) => {
+                    let img_src = "";
+
+                    if (count === 0) {
+                        main_frame_content += "<li class='list-group-item text-center' id='image_0'>";
+                        img_src = "<img src='{% static '' %}FirstApp/extracted/" + folder + "/" + response[0].image + "' width='500' height='500'>";
+                    }
+                    else {
+                        main_frame_content += "<li class='list-group-item other-frames' id='image_" +count+ "' hidden>";
+                        img_src = "<img src='{% static '' %}FirstApp/extracted/" + folder + "/" + image.image + "' width='500' height='500'>";
+                    }
+
+
+                    main_frame_content += img_src;
+                    main_frame_content += "</li>";
+                    count++;
+                });
+
+                main_frame_content += "</ul>";
+                main_frame_content += "</div>";
+
+
+                //setting the min, max values of the slider
+                $('#myRange').attr({'min': 0, 'max': count});
+
+                return main_frame_content;
+            }
+
+            //declaring the variable for setInterval function
+            let timeVar = null;
+
+            //handling the play button
+            $('#play_pause_icon').click(function () {
+                //defining the two possible classes
+                let play_class = "fas fa-play";
+                let pause_class = "fas fa-pause";
+
+                //retrieving the current icon class
+                let current_class = $(this).attr('class');
+
+                //assigning the correct class based on the icon clicked
+                let new_class = (current_class === play_class) ? pause_class : play_class;
+
+                //setting the new class
+                $(this).attr('class', new_class);
+
+                //handling the slider
+                let slider = document.getElementById("myRange");
+                let output = document.getElementById("demo");
+
+                //when the button is playing
+                if (current_class === play_class) {
+                    timeVar = setInterval(() => {
+                        let value = slider.value;
+                        let new_slider_value = Number(value) + 1;
+                        slider.value = new_slider_value;
+                        output.innerHTML = new_slider_value.toString();
+
+
+                        let selectedImage = '#image_' + Number(value);
+
+                        //displaying the relevant image
+                        $('#image_0').html($(selectedImage).html());
+
+                    }, 10);
+                }
+                //when the button is paused
+                else if (current_class === pause_class) {
+                    clearInterval(timeVar);
+                }
+
+
+            });
+
+
+            //handling the slider
+            let slider = document.getElementById("myRange");
+            let output = document.getElementById("demo");
+            output.innerHTML = slider.value;
+
+            slider.oninput = function () {
+                output.innerHTML = this.value;
+                let selectedImage = '#image_' + Number(this.value);
+
+                //hide
+                {#$('#image_0').attr('hidden', true);#}
+                $('#image_0').html($(selectedImage).html());
+
+                //setting the selected image
+                {#$(selectedImage).attr('hidden', false);#}
+
+
+            }
+        });
+
+    </script>
+
+
+{% endblock %}
+
+<div id="wrapper">
+    <!-- Sidebar -->
+
+    <!-- Content Wrapper -->
+    <div id="content-wrapper" class="d-flex flex-column">
+
+        <!-- Main Content -->
+        <div id="content">
+
+            <!-- Begin Page Content -->
+            {% block 'container-fluid' %}
+                <div class="container-fluid">
+                    {% load static %}
+
+                    <!-- Page Heading -->
+                    <div class="d-sm-flex align-items-center justify-content-between mb-4">
+                        <h1 class="h3 mb-0 text-gray-800">Video Results</h1>
+                    </div>
+
+                    <!--first row -->
+                    <div class="row p-2">
+
+                        <!--first column -->
+                        <div class="col-lg-6">
+                            <div class="card shadow mb-4">
+                                <!--card header -->
+                                <div class="card-header py-3">
+                                    <h5 class="m-0 font-weight-bold text-primary">Lecturer Subjects</h5>
+                                </div>
+
+                                <!--card body -->
+                                <div class="card-body">
+                                    {% if lecturer_subjects.count == 0 %}
+                                        <div class="text-center">
+                                            <span class="font-italic">No subjects</span>
+                                        </div>
+                                    {% else %}
+                                        <div class="table-responsive">
+                                            <table class="table table-bordered" id="datatable">
+                                                <thead>
+                                                    <tr>
+                                                        <th></th>
+                                                        <th>Subject Name</th>
+                                                        <th>Year</th>
+                                                    </tr>
+                                                </thead>
+                                                <tbody>
+                                                    {% for subject in subjects %}
+                                                        <tr class="subjects not_clicked" id="{{ subject.0.subject_code }}">
+                                                            <td>
+                                                                <div class="radio">
+                                                                    <label><input type="radio" id="{{ subject.0.subject_code }}" name="subject_radio" data-name="{{ subject.0.name }}"></label>
+                                                                </div>
+                                                            </td>
+                                                            <td>{{ subject.0.name}}</td>
+                                                            <td>{{ subject.0.year }}</td>
+                                                        </tr>
+                                                    {% endfor %}
+                                                </tbody>
+                                            </table>
+                                        </div>
+
+                                    {% endif %}
+                                </div>
+                            </div>
+                        </div>
+                        <!--end of first column -->
+
+
+                        <!--second column (timetable column) -->
+                        <div class="col-lg-6">
+                            <div class="card shadow mb-4">
+                                <!--card header -->
+                                <div class="card-header py-3">
+                                    <h5 class="m-0 font-weight-bold text-primary">View timetable</h5>
+                                </div>
+
+                                <!--card body -->
+                                <div class="card-body">
+                                    <!--no lecture selected message -->
+                                    <div class="text-center" id="no_subject_selected">
+                                        <span class="font-italic">No lecture is selected</span>
+                                    </div>
+
+                                    <!--displaying the timetable -->
+                                    <table class="table table-striped" id="timetable" hidden>
+                                    <caption id="timetable_caption"></caption>
+                                        <thead>
+                                            <tr>
+                                                <th>Date</th>
+                                                <th>Hall No.</th>
+                                                <th>Time</th>
+                                            </tr>
+                                        </thead>
+                                    </table>
+
+
+                                </div>
+                            </div>
+                        </div>
+                        <!--end of first column -->
+
+                    </div>
+
+                    <div class="row p-2">
+
+                        <!--first column-->
+                        <div class="col-lg-6">
+
+                            <!-- card content -->
+                            <div class="card shadow mb-4">
+                                <div class="card-header py-3">
+                                    <h5 class="m-0 font-weight-bold text-primary">List of Lecture Videos</h5>
+                                </div>
+                                <div class="card-body">
+                                    <table class="table table-bordered">
+                                        <thead>
+                                        <tr>
+                                            <th>Video Name</th>
+                                            <th>Length</th>
+                                            <th></th>
+                                            <th></th>
+                                        </tr>
+                                        </thead>
+                                        <tbody>
+                                        {% for video in Videos %}
+                                            <tr class="video_row" id="{{ video.name }}" data-duration="{{ video.duration }}">
+                                                <td>
+                                                    {{ video.name }}
+                                                </td>
+                                                <td>{{ video.duration }}</td>
+                                                <td>
+                                                    <button class="btn btn-link modal-expand" id="{{ video.name }}">View</button>
+                                                </td>
+                                                <td>
+                                                    <button class="btn btn-info retrieve" data-id="{{ video.name }}">Retrieve</button>
+                                                </td>
+                                                <!--<td>
+                                                    <select name="category" id="select_{{ video.name }}" class="form-control select_cat">
+                                                        <option value="">-------</option>
+                                                        <option value="Emotion">Emotion</option>
+                                                        <option value="Gaze">Gaze</option>
+                                                        <option value="Activity">Activity</option>
+                                                    </select>
+                                                </td>-->
+                                                <!-- to store the video details -->
+                                                <td hidden>
+                                                    <input type="hidden" id="{{ video.name }}" data-duration="{{ video.duration }}">
+                                                </td>
+                                            </tr>
+                                        {% endfor %}
+                                        </tbody>
+                                    </table>
+
+                                </div>
+                            </div>
+
+                        </div>
+
+
+                    <!--second column-->
+                        <div class="col-lg-6">
+
+                            <!-- card content -->
+                            <div class="card shadow mb-4">
+                                <div class="card-header py-3">
+                                    <h5 class="m-0 font-weight-bold text-primary">Emotion Detection</h5>
+                                </div>
+                                <div class="card-body">
+                                    <!-- no video selected messge -->
+                                    <div class="text-center" id="no_content_message">
+                                        <p>No content to be displayed</p>
+                                    </div>
+
+                                    <!-- error messge -->
+                                    <div class="text-center text-danger" id="error_message" hidden>
+                                        <p class="font-italic">No frames were found for this video</p>
+                                    </div>
+
+                                    <!-- loader -->
+                                    <div class="text-center" id="loader" hidden>
+                                        <img src="{% static 'FirstApp/images/ajax-loader.gif' %}" alt="Loading image">
+                                    </div>
+
+
+                                    <!--nav tabs-->
+                                    <ul class="nav nav-tabs nav-fill" id="nav_bar" role="tablist" hidden>
+                                        <li class="nav-item">
+                                            <a class="nav-link active" id="frame-tab" data-toggle="tab" href="#frame" role="tab" aria-controls="frame" aria-selected="true">Frame</a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a class="nav-link" id="graph-tab" data-toggle="tab" href="#graph" role="tab" aria-controls="graph" aria-selected="false">Graphs</a>
+                                        </li>
+                                    </ul>
+
+                                    <!--tab content -->
+                                    <div class="tab-content" id="tabContentDetails" hidden>
+                                        <div class="tab-pane fade show active" id="frame" role="tabpanel" aria-labelledby="home-tab">
+                                            <div class="text-center p-4" id="emotion_frames">
+                                                <!-- slide container -->
+                                                <div class="slidecontainer">
+                                                    <div class="row">
+                                                        <div class="col-1">0</div>
+                                                        <div class="col-9"></div>
+                                                        <div class="col-2">100</div>
+                                                    </div>
+                                                    <!-- play/pause icon -->
+                                                    <div class="row">
+                                                        <span><i class="fas fa-play" id="play_pause_icon"></i></span>
+                                                    </div>
+                                                    <input type="range" min="1" max="100" value="0" class="slider" id="myRange">
+                                                    <p>No of frames: <span id="demo"></span></p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <!-- graph content -->
+                                        <div class="tab-pane fade" id="graph" role="tabpanel" aria-labelledby="profile-tab">
+                                            <!--card content -->
+                                            <div class="card shadow mb-4 p-3">
+                                                <!-- Card Header - Dropdown -->
+                                                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
+                                                    <h6 class="m-0 font-weight-bold text-primary">Revenue Sources</h6>
+                                                    <div class="dropdown no-arrow">
+                                                        <a class="dropdown-toggle" href="#" role="button"
+                                                           id="dropdownMenuLink" data-toggle="dropdown"
+                                                           aria-haspopup="true" aria-expanded="false">
+                                                            <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
+                                                        </a>
+                                                        <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in"
+                                                             aria-labelledby="dropdownMenuLink">
+                                                            <div class="dropdown-header">Dropdown Header:</div>
+                                                            <a class="dropdown-item" href="#">Action</a>
+                                                            <a class="dropdown-item" href="#">Another action</a>
+                                                            <div class="dropdown-divider"></div>
+                                                            <a class="dropdown-item" href="#">Something else here</a>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <!-- Card Body -->
+                                                <div class="card-body">
+                                                    <div class="chart-pie pt-4 pb-2">
+                                                        <canvas id="myPieChart"></canvas>
+                                                    </div>
+                                                    <div class="mt-4 text-center small">
+                    <span class="mr-2">
+                      <i class="fas fa-circle text-primary"></i> Direct
+                    </span>
+                                                        <span class="mr-2">
+                      <i class="fas fa-circle text-success"></i> Social
+                    </span>
+                                                        <span class="mr-2">
+                      <i class="fas fa-circle text-info"></i> Referral
+                    </span>
+                                                    </div>
+                                                </div>
+                                            </div>
+
+                                        </div>
+                                    </div>
+
+                                </div>
+                            </div>
+
+                        </div>
+
+
+                    </div>
+                    <!-- end of 2nd row -->
+
+                    <!--3rd row -->
+                    <div class="row p-2">
+
+                        <!--1st column -->
+                        <!--second column-->
+                        <div class="col-lg-6">
+
+                            <!-- card content -->
+                            <div class="card shadow mb-4">
+                                <div class="card-header py-3">
+                                    <h5 class="m-0 font-weight-bold text-primary">Gaze Estimation</h5>
+                                </div>
+                                <div class="card-body">
+                                    <!-- no video selected messge -->
+                                    <div class="text-center" id="no_content_message_gaze">
+                                        <p>No Gaze estimation content to be displayed</p>
+                                    </div>
+
+                                    <!-- error message -->
+                                    <div class="text-center text-danger" id="error_message_gaze" hidden>
+                                        <p class="font-italic">No frames were found for this video</p>
+                                    </div>
+
+                                    <!-- loader -->
+                                    <div class="text-center" id="loader_gaze" hidden>
+                                        <img src="{% static 'FirstApp/images/ajax-loader.gif' %}" alt="Loading image">
+                                    </div>
+
+
+                                    <!--nav tabs-->
+                                    <ul class="nav nav-tabs nav-fill" id="nav_bar_gaze" role="tablist" hidden>
+                                        <li class="nav-item">
+                                            <a class="nav-link active" id="frame-tab_gaze" data-toggle="tab" href="#frame_gaze"
+                                               role="tab" aria-controls="frame_gaze" aria-selected="true">Frame</a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a class="nav-link" id="graph-tab_gaze" data-toggle="tab" href="#graph_gaze"
+                                               role="tab" aria-controls="graph_gaze" aria-selected="false">Graphs</a>
+                                        </li>
+                                    </ul>
+
+                                    <!--tab content -->
+                                    <div class="tab-content" id="tabContentDetails_gaze" hidden>
+                                        <div class="tab-pane fade show active" id="frame_gaze" role="tabpanel"
+                                             aria-labelledby="frame-tab_gaze">
+                                            <div class="text-center p-4" id="gaze_frames">
+                                                <!-- slide container -->
+                                                <div class="slidecontainer_gaze">
+                                                    <div class="row">
+                                                        <div class="col-1">0</div>
+                                                        <div class="col-9"></div>
+                                                        <div class="col-2">100</div>
+                                                    </div>
+                                                    <!-- play/pause icon -->
+                                                    <div class="row">
+                                                        <span><i class="fas fa-play" id="play_pause_icon_gaze"></i></span>
+                                                    </div>
+                                                    <input type="range" min="1" max="100" value="0" class="slider"
+                                                           id="myRange_gaze">
+                                                    <p>No of frames: <span id="demo_gaze"></span></p>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <!-- graph content -->
+                                        <div class="tab-pane fade" id="graph_gaze" role="tabpanel"
+                                             aria-labelledby="graph-tab_gaze">
+                                            <!--card content -->
+                                            <div class="card shadow mb-4 p-3">
+                                                <!-- Card Header - Dropdown -->
+                                                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
+                                                    <h6 class="m-0 font-weight-bold text-primary">Gaze distribution</h6>
+                                                    <div class="dropdown no-arrow">
+                                                        <a class="dropdown-toggle" href="#" role="button"
+                                                           id="dropdownMenuLink" data-toggle="dropdown"
+                                                           aria-haspopup="true" aria-expanded="false">
+                                                            <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
+                                                        </a>
+                                                        <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in"
+                                                             aria-labelledby="dropdownMenuLink">
+                                                            <div class="dropdown-header">Graph options:</div>
+                                                            <a class="dropdown-item" href="#">Pie</a>
+                                                            <a class="dropdown-item" href="#">Bar</a>
+                                                            <div class="dropdown-divider">Column</div>
+                                                            <a class="dropdown-item" href="#">Line</a>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <!-- Card Body -->
+                                                <div class="card-body">
+                                                    <div class="chart-pie pt-4 pb-2">
+                                                        <canvas id="myPieChart_gaze"></canvas>
+                                                    </div>
+                                                    <div class="mt-4 text-center small">
+                    <span class="mr-2">
+                      <i class="fas fa-circle text-primary"></i> Direct
+                    </span>
+                                                        <span class="mr-2">
+                      <i class="fas fa-circle text-success"></i> Social
+                    </span>
+                                                        <span class="mr-2">
+                      <i class="fas fa-circle text-info"></i> Referral
+                    </span>
+                                                    </div>
+                                                </div>
+                                            </div>
+
+                                        </div>
+                                    </div>
+
+                                </div>
+                            </div>
+
+                        </div>
+                        <!-- end of gaze column -->
+
+
+                        <!-- student activity column -->
+                        <div class="col-lg-6">
+
+                            <!-- card content -->
+                            <div class="card shadow mb-4">
+                                <div class="card-header py-3">
+                                    <h5 class="m-0 font-weight-bold text-primary">Student Activity Recognition</h5>
+                                </div>
+                                <div class="card-body">
+                                    <!-- no video selected messge -->
+                                    <div class="text-center" id="no_content_message_activity">
+                                        <p>No Activity Recognition content to be displayed</p>
+                                    </div>
+
+                                    <!-- error messge -->
+                                    <div class="text-center text-danger" id="error_message_activity" hidden>
+                                        <p class="font-italic">No frames were found for this video</p>
+                                    </div>
+
+                                    <!-- loader -->
+                                    <div class="text-center" id="loader_activity" hidden>
+                                        <img src="{% static 'FirstApp/images/ajax-loader.gif' %}" alt="Loading image">
+                                    </div>
+
+
+                                    <!--nav tabs-->
+                                    <ul class="nav nav-tabs nav-fill" id="nav_bar_activity" role="tablist" hidden>
+                                        <li class="nav-item">
+                                            <a class="nav-link active" id="frame-tab_activity" data-toggle="tab" href="#frame_activity" role="tab" aria-controls="frame_activity" aria-selected="true">Frame</a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a class="nav-link" id="graph-tab_activity" data-toggle="tab" href="#graph_activity" role="tab" aria-controls="graph_activity" aria-selected="false">Graphs</a>
+                                        </li>
+                                    </ul>
+
+                                    <!--tab content -->
+                                    <div class="tab-content" id="tabContentDetails_activity" hidden>
+                                        <div class="tab-pane fade show active" id="frame_activity" role="tabpanel" aria-labelledby="frame-tab_activity">
+                                            <div class="text-center p-4" id="activity_frames">
+                                                <!-- slide container -->
+                                                <div class="slidecontainer_activity">
+                                                    <div class="row">
+                                                        <div class="col-1">0</div>
+                                                        <div class="col-9"></div>
+                                                        <div class="col-2">100</div>
+                                                    </div>
+                                                    <!-- play/pause icon -->
+                                                    <div class="row">
+                                                        <span><i class="fas fa-play" id="play_pause_icon_activity"></i></span>
+                                                    </div>
+                                                    <input type="range" min="1" max="100" value="0" class="slider" id="myRange_activity">
+                                                    <p>No of frames: <span id="demo_activity"></span></p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <!-- graph content -->
+                                        <div class="tab-pane fade" id="graph_activity" role="tabpanel" aria-labelledby="graph-tab_gaze">
+                                            <!--card content -->
+                                            <div class="card shadow mb-4 p-3">
+                                                <!-- Card Header - Dropdown -->
+                                                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
+                                                    <h6 class="m-0 font-weight-bold text-primary">Activity Distribution</h6>
+                                                    <div class="dropdown no-arrow">
+                                                        <a class="dropdown-toggle" href="#" role="button"
+                                                           id="dropdownMenuLink" data-toggle="dropdown"
+                                                           aria-haspopup="true" aria-expanded="false">
+                                                            <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
+                                                        </a>
+                                                        <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in"
+                                                             aria-labelledby="dropdownMenuLink">
+                                                            <div class="dropdown-header">Graph options:</div>
+                                                            <a class="dropdown-item" href="#">Pie</a>
+                                                            <a class="dropdown-item" href="#">Bar</a>
+                                                            <div class="dropdown-divider">Column</div>
+                                                            <a class="dropdown-item" href="#">Line</a>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <!-- Card Body -->
+                                                <div class="card-body">
+                                                    <div class="chart-pie pt-4 pb-2">
+                                                        <canvas id="myPieChart"></canvas>
+                                                    </div>
+                                                    <div class="mt-4 text-center small">
+                    <span class="mr-2">
+                      <i class="fas fa-circle text-primary"></i> Direct
+                    </span>
+                                                        <span class="mr-2">
+                      <i class="fas fa-circle text-success"></i> Social
+                    </span>
+                                                        <span class="mr-2">
+                      <i class="fas fa-circle text-info"></i> Referral
+                    </span>
+                                                    </div>
+                                                </div>
+                                            </div>
+
+                                        </div>
+                                    </div>
+
+                                </div>
+                            </div>
+
+                        </div>
+                        <!--end of student activity column -->
+
+                    </div>
+                    <!--end of 3rd row -->
+
+
+
+
+
+                </div>
+            {% endblock %}
+            <!-- End of container-fluid -->
+
+        </div>
+        <!-- End of Main Content -->
+
+    </div>
+    <!-- End of Content Wrapper -->
+
+</div>
+
+{% block 'modal' %}
+    <div class="modal fade" id="video_modal" role="dialog" aria-labelledby="gif-body">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h2 class="modal-title">Video details</h2>
+                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">×</span>
+                    </button>
+                </div>
+
+                <div class="modal-body">
+                    <table class="table table-borderless">
+                        <tr>
+                            <td class="font-weight-bold">Video Name</td>
+                            <td id="video_name"></td>
+                        </tr>
+                        <tr>
+                            <td class="font-weight-bold">Duration</td>
+                            <td id="video_duration"></td>
+                        </tr>
+                        <tr>
+                            <td class="font-weight-bold">Date of Creation</td>
+                            <td id="video_date"></td>
+                        </tr>
+                    </table>
+                </div>
+
+                <!-- modal footer -->
+                <div class="modal-footer">
+                    <button type="button" data-dismiss="modal" class="btn btn-danger text-white">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <!-- Logout Modal-->
+        <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
+             aria-hidden="true">
+            <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
+                        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+                            <span aria-hidden="true">×</span>
+                        </button>
+                    </div>
+                    <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
+                    <div class="modal-footer">
+                        <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
+                        <a class="btn btn-primary" href="/logout">Logout</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+{% endblock %}
+
+</body>
+</html>
\ No newline at end of file

FirstApp/tests.py

+from django.test import TestCase
+
+# Create your tests here.

FirstApp/urls.py

+from django.urls import path, re_path, include
+from django.conf.urls import url
+from rest_framework import routers
+from . import views
+from . import api
+
+router = routers.DefaultRouter()
+router.register(r'^register', views.RegisterViewSet)
+# router.register(r'^createImage', views.ImageViewSet)
+
+urlpatterns = [
+    path('', views.hello),
+    path('login', views.loginForm),
+    path('logout', views.logoutView),
+    path('register-user', views.register),
+    path('404', views.view404),
+    path('500', views.view500),
+    path('blank', views.blank),
+    path('gaze', views.gaze),
+    path('gaze-process', views.processGaze),
+    path('pose', views.pose),
+    path('charts', views.charts),
+    path('forgot-password', views.forget_password),
+    path('webcam', views.webcam),
+    path('template', views.template),
+    path('base', views.base),
+    path('child', views.child),
+    # extractor path
+    path('extract', views.extractor),
+    # emotion path
+    path('emotion', views.emotion_view),
+    # video results
+    path('video_result', views.video_result),
+
+    # this is used for login
+    path('process-login', views.loggedInView),
+
+    # this is used for login
+    path('activity', views.activity),
+
+    # tables view
+    path('tables', views.tables),
+
+    url(r'^register', views.RegisterViewSet),
+    # re_path('video/?video_name<str:video_name>', views.video),
+    url(r'^teachers/', views.teachersList.as_view()),
+    url(r'^video/', views.video, name='video'),
+
+    url(r'^createImage', api.ImageViewSet.as_view()),
+    # for gaze estimation
+    url(r'^estimateGaze', api.GazeEstimationViewSet.as_view()),
+    # for video extraction (POST)
+    url(r'^videoExtract', api.VideoExtractionViewSet.as_view()),
+    # for video extraction (GET)
+    url(r'^videoExtract/(?P<folder_name>\D+)', api.VideoExtractionViewSet.as_view()),
+
+    # testing the lecture emotions in the API
+    url(r'^lecture_emotions', api.LectureEmotionViewSet.as_view()),
+
+    # testing the lecture in the API
+    url(r'^lectures', api.LectureViewSet.as_view()),
+
+    # faculty API
+    url(r'^faculties', api.FacultyViewSet.as_view()),
+
+    # subjects API
+    url(r'^subjects', api.SubjectViewSet.as_view()),
+
+    # lecturer API
+    url(r'^lecturers', api.LecturerViewSet.as_view()),
+
+    # lecturer-subjects API
+    url(r'^lecturer-subjects', api.LecturerSubjectViewSet.as_view()),
+
+    # timetable API
+    url(r'^timetable', api.FacultyTimetableViewSet.as_view()),
+
+
+    ##### VIDEO Section #####
+
+    # lecture video API
+    url(r'^lecture-video', api.LectureVideoViewSet.as_view()),
+
+    # lecture video API (to retrieve a lecture)
+    url(r'^get-lecture-video/$', api.GetLectureVideoViewSet.as_view()),
+
+
+    ##### ACTIVITIES API #####
+
+    # lecture activity API (to retrieve lecture activities)
+    url(r'^lecture-activities/', api.LectureActivityViewSet.as_view()),
+
+    # lecture activity API (to retrieve a lecture activity)
+    url(r'^get-lecture-activity/$', api.GetLectureActivityViewSet.as_view()),
+
+    # lecture activity API (to retrieve a lecture activity)
+    url(r'^process-lecture-activity/$', api.LectureActivityProcess.as_view()),
+
+    # lecture activity detection API (to retrieve detections for a given lecture activity frame)
+    url(r'^get-lecture-activity-frame-detection/$', api.GetLectureActivityDetections.as_view()),
+
+    # lecture activity detection for label API (to retrieve detections for a certain label)
+    url(r'^get-lecture-activity-detection-for-label/$', api.GetLectureActvityDetectionsForLabel.as_view()),
+
+    # lecture activity detection for label API (to retrieve detections for a certain label)
+    url(r'^get-lecture-activity-student-evaluation/$', api.GetLectureActivityStudentEvaluation.as_view()),
+
+    # lecture activity detection for frames API (to retrieve detections for each frame in lecture video)
+    url(r'^get-lecture-activity-for-frame/$', api.GetLectureActivityRecognitionsForFrames.as_view()),
+
+    # lecture activity evaluation for individual students
+    url(r'^get-lecture-activity-individual-student-evaluation/$',
+        api.GetLectureActivityIndividualStudentEvaluation.as_view()),
+
+
+    ###### EMOTION Section #####
+    # getting lecture emotion record availability
+    url(r'^get-lecture-emotion-availability/$', api.GetLectureEmotionAvailability.as_view()),
+
+    # getting lecture emotion record
+    url(r'^get-lecture-emotion/$', api.GetLectureEmotionReportViewSet.as_view()),
+
+    # process a lecture emotion record
+    url(r'^process-lecture-emotion/$', api.LectureEmotionProcess.as_view()),
+
+    # lecture emotion evaluation for students
+    url(r'^get-lecture-emotion-student-evaluation/$', api.GetLectureEmotionStudentEvaluations.as_view()),
+
+    # lecture emotion evaluation for students
+    url(r'^get-lecture-emotion-individual-student-evaluation/$',
+        api.GetLectureEmotionIndividualStudentEvaluation.as_view()),
+
+    # lecture emotion detection for frames API (to retrieve detections for each frame in lecture video)
+    url(r'^get-lecture-emotion-for-frame/$', api.GetLectureEmotionRecognitionsForFrames.as_view()),
+
+
+    ###### POSE Section #####
+    # lecture video API (for Pose estimation)
+    url(r'^get-lecture-video-for-pose/$', api.GetLectureVideoForPose.as_view()),
+
+    # lecture video extracted frames API (for Pose estimation)
+    url(r'^get-lecture-video-extracted-frames/$', api.GetLectureVideoExtractedFrames.as_view()),
+
+    # lecture video individual student extracted frames API (for Pose estimation)
+    url(r'^get-lecture-video-individual-student-frames/$', api.GetLectureVideoIndividualStudentFrames.as_view()),
+
+    # lecture video individual student process pose estimation API (for Pose estimation)
+    url(r'^process-lecture-video-individual-pose-estimation', api.ProcessIndividualStudentPoseEstimation.as_view()),
+
+    # routers
+    # path('', include(router.urls)),
+    path('api-auth/', include('rest_framework.urls', namespace='rest_framework'))
+]
+from rest_framework.urlpatterns import format_suffix_patterns

FirstApp/views.py

+from django.shortcuts import render, redirect
+from django.contrib.auth import (
+    authenticate,
+    login,
+    logout,
+)
+from django.contrib.auth.decorators import login_required
+from django.http import HttpResponse
+from django.shortcuts import get_object_or_404
+from rest_framework.views import APIView
+from rest_framework.response import Response
+from rest_framework import viewsets
+from . models import Teachers, Video, VideoMeta, RegisterUser
+from . MongoModels import *
+from . serializers import *
+from . emotion_detector import detect_emotion
+from . ImageOperations import saveImage
+from . logic import head_pose_estimation
+from . logic import video_extraction
+from . forms import *
+import cv2
+import os
+import datetime
+
+
+# hashing
+from django.contrib.auth.hashers import make_password
+
+# Create your views here.
+
+BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+
+class teachersList(APIView):
+
+    def get(self, request):
+        teachers = Teachers.objects.all()
+        serializer = TeachersSerializer(teachers, many=True)
+        return Response(serializer.data)
+
+    def post(self):
+        pass
+
+class RegisterViewSet(viewsets.ModelViewSet):
+
+    queryset = RegisterUser.objects.all().order_by('firstName')
+    serializer_class = RegisterUserSerializer
+
+
+# to create images
+class ImageViewSet(APIView):
+
+    def post(self, request):
+        saveImage(request.data)
+        return Response({"response": "successful"})
+
+
+# to perform pose estimation on images
+class GazeEstimationViewSet(APIView):
+
+    def post(self, request):
+        response = head_pose_estimation.estimatePose(request.data)
+        return Response({"response": response})
+
+
+# to perform video extraction
+class VideoExtractionViewSet(APIView):
+
+    def get(self, request):
+        response = video_extraction.getExtractedFrames(request.query_params)
+        return Response({"response": response})
+
+    def post(self, request):
+        response = video_extraction.VideoExtractor(request.data)
+        return Response({"response": response})
+
+# lecture emotions view set
+class LectureEmotionViewSet(APIView):
+
+    def get(self, request):
+        emotions = LectureEmotionReport.objects.all().order_by('lecture_id')
+        serializer = LectureEmotionSerializer(emotions, many=True)
+        return Response({"response": serializer.data})
+
+    def post(self, request):
+        LectureEmotionReport(
+            lecture_id=request.data["lecture_id"],
+            happy_perct=request.data["happy_perct"],
+            sad_perct=request.data["sad_perct"],
+            angry_perct=request.data["angry_perct"],
+            surprise_perct=request.data["surprise_perct"],
+            disgust_perct=request.data["disgust_perct"],
+            neutral_perct=request.data["neutral_perct"]
+        ).save()
+        return Response({"response": request.data})
+
+
+class LectureViewSet(APIView):
+
+    def get(self, request):
+        lectures = Lecture.objects.all().order_by('date')
+        serializer = LectureSerializer(lectures, many=True)
+        return Response(serializer.data)
+
+    def post(self, request):
+        Lecture(
+            lecture_id=request.data['lecture_id']
+        ).save()
+        return Response({"response": request})
+
+
+####### VIEWS ######
+@login_required(login_url='/login')
+def hello(request):
+
+    username = request.user.username
+    obj = {'Message': 'Student and Lecturer Performance Enhancement System', 'username': username}
+    folder = os.path.join(BASE_DIR, os.path.join('static\\FirstApp\\videos'))
+    videoPaths = [os.path.join(folder, file) for file in os.listdir(folder)]
+    videos = []
+    durations = []
+
+    for videoPath in videoPaths:
+        video = Video()
+        cap = cv2.VideoCapture(videoPath)
+        fps = cap.get(cv2.CAP_PROP_FPS)  # OpenCV2 version 2 used "CV_CAP_PROP_FPS"
+        frame_count = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
+        duration = int(frame_count / fps)
+        durations.append(duration)
+        videoName = os.path.basename(videoPath)
+        # videoName = videos.append(os.path.basename(videoPath))
+        durationObj = datetime.timedelta(seconds=duration)
+        video.path = videoPath
+        video.name = videoName
+        video.duration = str(durationObj)
+        videos.append(video)
+    context = {'object': obj, 'Videos': videos, 'durations': durations, 'template_name': 'FirstApp/template.html'}
+    return render(request, 'FirstApp/Home.html', context)
+
+def view404(request):
+    return render(request, 'FirstApp/404.html')
+
+# querying the database
+def blank(request):
+    emotions = LectureEmotionReport.objects.all().order_by('lecture_id')
+    return render(request, 'FirstApp/blank.html', {'details': emotions})
+
+@login_required(login_url='/login')
+def gaze(request):
+    try:
+
+        # retrieving data from the db
+        lecturer = request.session['lecturer']
+        lecturer_subjects = LecturerSubject.objects.filter(lecturer_id_id=lecturer)
+        lec_sub_serilizer = LecturerSubjectSerializer(lecturer_subjects, many=True)
+        subject_list = []
+
+        subjects = lec_sub_serilizer.data[0]['subjects']
+
+        for sub in subjects:
+            subject = Subject.objects.filter(id=sub)
+            subject_serialized = SubjectSerializer(subject, many=True)
+
+            subject_list.append(subject_serialized.data)
+
+
+    except Exception as exc:
+        return redirect('/500')
+
+    return render(request, "FirstApp/gaze.html",
+                  {"lecturer_subjects": lecturer_subjects, "subjects": subject_list, "lecturer": lecturer})
+
+
+# to redirect to the gaze interface
+def processGaze(request):
+    print('My name is Ishan')
+    images = request.session.get('images', default='')
+    imageList = images.split(',')
+
+    for i in imageList:
+        print(i)
+    return redirect('/')
+
+
+# the corresponding view for pose estimation
+@login_required(login_url='/login')
+def pose(request):
+    try:
+
+        # retrieving data from the db
+        lecturer = request.session['lecturer']
+        lecturer_subjects = LecturerSubject.objects.filter(lecturer_id_id=lecturer)
+        lec_sub_serilizer = LecturerSubjectSerializer(lecturer_subjects, many=True)
+        subject_list = []
+
+        subjects = lec_sub_serilizer.data[0]['subjects']
+
+        for sub in subjects:
+            subject = Subject.objects.filter(id=sub)
+            subject_serialized = SubjectSerializer(subject, many=True)
+
+            subject_list.append(subject_serialized.data)
+
+
+    except Exception as exc:
+        return redirect('/500')
+
+    return render(request, "FirstApp/pose.html",
+                  {"lecturer_subjects": lecturer_subjects, "subjects": subject_list, "lecturer": lecturer})
+
+def charts(request):
+    return render(request, 'FirstApp/charts.html')
+
+def forget_password(request):
+    return render(request, 'FirstApp/forgot-password.html')
+
+def loginForm(request):
+    return render(request, 'FirstApp/login.html')
+
+def register(request):
+    return render(request, 'FirstApp/register.html')
+
+def webcam(request):
+    video = cv2.VideoCapture(os.path.join(BASE_DIR, 'static//FirstApp//videos//Classroom_video.mp4'))
+
+    while (True):
+        cap, frame = video.read()
+
+        cv2.imshow("Frame", frame)
+
+        if (cv2.waitKey(1) & 0XFF == ord('q')):
+            break
+
+    video.release()
+    cv2.destroyAllWindows()
+    # video = cv2.imread('D://SLIIT/Year 4//Sample Projects//django_project//DemoProject//static//FirstApp/videos/Classroom_video.mp4')
+
+    return redirect('/')
+
+# to process video for emotion detection
+@login_required(login_url='/login')
+def video(request):
+    title = 'Student and Lecturer Performance Enhancement System'
+    video_name = request.GET.get('video_name')
+    video_url = os.path.join(BASE_DIR, os.path.join('static\\FirstApp\\videos\\{0}'.format(video_name)))
+    meta_data = detect_emotion(video_url)
+    # meta_data = VideoMeta()
+    # calculating the respective percentages
+    meta_data.calcPercentages()
+    context = {'title': title, 'video_name': video_name, 'url': video_url, 'meta': meta_data}
+
+    return render(request, 'FirstApp/video.html', context)
+
+
+# extractor view
+@login_required(login_url='/login')
+def extractor(request):
+    folder = os.path.join(BASE_DIR, os.path.join('static\\FirstApp\\videos'))
+    videoPaths = [os.path.join(folder, file) for file in os.listdir(folder)]
+    videos = []
+    durations = []
+
+    # setting up the first video details
+    first_video_path = videoPaths[0]
+    first_video = Video()
+    cap = cv2.VideoCapture(first_video_path)
+    fps = cap.get(cv2.CAP_PROP_FPS)  # OpenCV2 version 2 used "CV_CAP_PROP_FPS"
+    frame_count = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
+    duration = int(frame_count / fps)
+    videoName = os.path.basename(first_video_path)
+    durationObj = datetime.timedelta(seconds=duration)
+    first_video.path = first_video_path
+    first_video.name = videoName
+    first_video.duration = str(durationObj)
+
+
+    for videoPath in videoPaths:
+        video = Video()
+        cap = cv2.VideoCapture(videoPath)
+        fps = cap.get(cv2.CAP_PROP_FPS)  # OpenCV2 version 2 used "CV_CAP_PROP_FPS"
+        frame_count = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
+        duration = int(frame_count / fps)
+        durations.append(duration)
+        videoName = os.path.basename(videoPath)
+        durationObj = datetime.timedelta(seconds=duration)
+        video.path = videoPath
+        video.name = videoName
+        video.duration = str(durationObj)
+        videos.append(video)
+    context = {'Videos': videos, 'firstVideo': first_video, 'durations': durations, 'template_name': 'FirstApp/template.html'}
+    return render(request, 'FirstApp/extractor.html', context)
+
+def template(request):
+    obj = {'Message': 'Student and Lecturer Performance Enhancement System'}
+    return render(request, 'FirstApp/template.html', {'template_name': 'FirstApp/template.html', 'object': obj})
+
+def base(request):
+    return render(request, 'FirstApp/base.html')
+
+def child(request):
+    return render(request, 'FirstApp/child.html', {'template_name': 'FirstApp/base.html'})
+
+# displaying video results
+@login_required(login_url='/login')
+def video_result(request):
+
+    try:
+        # retrieving data from the db
+        lecturer = request.session['lecturer']
+
+        lecturer_subjects = LecturerSubject.objects.filter(lecturer_id_id=lecturer)
+        lec_sub_serilizer = LecturerSubjectSerializer(lecturer_subjects, many=True)
+        subject_list = []
+
+        subjects = lec_sub_serilizer.data[0]['subjects']
+
+        for sub in subjects:
+            subject = Subject.objects.filter(id=sub)
+            subject_serialized = SubjectSerializer(subject, many=True)
+
+            subject_list.append(subject_serialized.data)
+
+
+
+
+        folder = os.path.join(BASE_DIR, os.path.join('static\\FirstApp\\videos'))
+        videoPaths = [os.path.join(folder, file) for file in os.listdir(folder)]
+        videos = []
+        durations = []
+
+        # setting up the first video details
+        first_video_path = videoPaths[0]
+        first_video = Video()
+        cap = cv2.VideoCapture(first_video_path)
+        fps = cap.get(cv2.CAP_PROP_FPS)  # OpenCV2 version 2 used "CV_CAP_PROP_FPS"
+        frame_count = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
+        duration = int(frame_count / fps)
+        videoName = os.path.basename(first_video_path)
+        durationObj = datetime.timedelta(seconds=duration)
+        first_video.path = first_video_path
+        first_video.name = videoName
+        first_video.duration = str(durationObj)
+
+        for videoPath in videoPaths:
+            video = Video()
+            cap = cv2.VideoCapture(videoPath)
+            fps = cap.get(cv2.CAP_PROP_FPS)  # OpenCV2 version 2 used "CV_CAP_PROP_FPS"
+            frame_count = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
+            duration = int(frame_count / fps)
+            durations.append(duration)
+            videoName = os.path.basename(videoPath)
+            durationObj = datetime.timedelta(seconds=duration)
+            video.path = videoPath
+            video.name = videoName
+            video.duration = str(durationObj)
+            videos.append(video)
+        context = {'Videos': videos, 'firstVideo': first_video, 'durations': durations, 'lecturer_subjects': lecturer_subjects, 'subjects': subject_list,
+                   'template_name': 'FirstApp/template.html'}
+
+    except Exception as ex:
+        return redirect('/500')
+
+    return render(request, 'FirstApp/video_results.html', context)
+
+
+# view for emotion page
+@login_required(login_url='/login')
+def emotion_view(request):
+    try:
+
+        # retrieving data from the db
+        lecturer = request.session['lecturer']
+        lecturer_subjects = LecturerSubject.objects.filter(lecturer_id_id=lecturer)
+        lec_sub_serilizer = LecturerSubjectSerializer(lecturer_subjects, many=True)
+        subject_list = []
+
+        subjects = lec_sub_serilizer.data[0]['subjects']
+
+        for sub in subjects:
+            subject = Subject.objects.filter(id=sub)
+            subject_serialized = SubjectSerializer(subject, many=True)
+
+            subject_list.append(subject_serialized.data)
+
+
+    except Exception as exc:
+        return redirect('/500')
+
+    return render(request, "FirstApp/emotion.html",
+                  {"lecturer_subjects": lecturer_subjects, "subjects": subject_list, "lecturer": lecturer})
+
+
+# signing In the user
+def loggedInView(request):
+    username = "not logged in"
+    message = "Invalid Username or Password"
+    MyLoginForm = LoginForm(request.POST)
+
+    print('message: ', message)
+
+    try:
+        # if the details are valid, let the user log in
+        if MyLoginForm.is_valid():
+            email = MyLoginForm.cleaned_data.get('email')
+            password = MyLoginForm.cleaned_data.get('password')
+
+            user = User.objects.get(email=email)
+            lecturer = Lecturer.objects.get(email=email)
+
+            login(request, user)
+            # setting up the session
+            request.session['lecturer'] = lecturer.id
+
+            return redirect('/')
+
+        else:
+            message = "Please provide correct credntials"
+    except Exception as exc:
+        print('exception: ', exc)
+
+    return render(request, 'FirstApp/login.html', {'message': message})
+
+
+# signing out the user
+def logoutView(request):
+
+    logout(request)
+
+    return redirect('/login')
+
+
+# 500 error page
+def view500(request):
+    return render(request, "FirstApp/500.html")
+
+
+# tables page
+def tables(request):
+    return render(request, "FirstApp/tables.html")
+
+@login_required(login_url='/login')
+def activity(request):
+    try:
+
+        # retrieving data from the db
+        lecturer = request.session['lecturer']
+        lecturer_subjects = LecturerSubject.objects.filter(lecturer_id_id=lecturer)
+        lec_sub_serilizer = LecturerSubjectSerializer(lecturer_subjects, many=True)
+        subject_list = []
+
+        subjects = lec_sub_serilizer.data[0]['subjects']
+
+        for sub in subjects:
+            subject = Subject.objects.filter(id=sub)
+            subject_serialized = SubjectSerializer(subject, many=True)
+
+            subject_list.append(subject_serialized.data)
+
+
+    except Exception as exc:
+        return redirect('/500')
+
+    return render(request, "FirstApp/activity.html", {"lecturer_subjects": lecturer_subjects, "subjects": subject_list, "lecturer": lecturer})
\ No newline at end of file

LectureSummarizingApp/admin.py

+from django.contrib import admin
+
+# Register your models here.

LectureSummarizingApp/apps.py

+from django.apps import AppConfig
+
+
+class LecturesummarizingappConfig(AppConfig):
+    name = 'LectureSummarizingApp'

LectureSummarizingApp/models.py

+from django.db import models
+
+# Create your models here.

LectureSummarizingApp/tests.py

+from django.test import TestCase
+
+# Create your tests here.

LectureSummarizingApp/views.py

+from django.shortcuts import render
+
+# Create your views here.

MonitorLecturerApp/admin.py

+from django.contrib import admin
+from . models import RegisterTeacher
+
+# Register your models here.
+
+admin.site.register(RegisterTeacher)
\ No newline at end of file

MonitorLecturerApp/api.py

+from rest_framework.views import APIView
+from rest_framework.response import Response
+from . logic import classroom_activity, text_analysis as ta
+
+
+class ActivityRecognitionAPI(APIView):
+
+    def get(self, request):
+        video_name = request.query_params.get('video_name')
+        percentages = classroom_activity.activity_recognition(video_name)
+        return Response({"response": percentages})
+
+    def post(self, request):
+        pass
+
+
+# this class will be used to retrieve audio analysis for a lecture
+class GetLectureAudioAnalysis(APIView):
+
+    def get(self, request):
+        analysis = ta.run()
+
+        return Response({
+            "response":analysis
+        })
\ No newline at end of file

MonitorLecturerApp/apps.py

+from django.apps import AppConfig
+
+
+class MonitorlecturerappConfig(AppConfig):
+    name = 'MonitorLecturerApp'

MonitorLecturerApp/lecture_Notes/sample_text2.txt

+Good morning everyone, I hope you went through the previous lecture slides, which is an overview on the OOP module.
+
+Today our lecture is based an introduction to Object Oriented Programming Concepts.
+OBJECT ORIENTED PROGRAMMING is a programming concept that works on the principles.
+The main principles are abstraction, encapsulation, inheritance, and polymorphism.
+OOP allows users to create the objects that they want and then, create methods to handle those objects.
+The basic concept of OOPs is to create objects, re-use them throughout the program, and manipulate these objects to get results.
+Object Oriented Programming popularly known as OOP, is used in a modern programming language like Java.
+
+er Now Let’s what are Core OOPS concepts.
+First one is class.
+The class is a group of similar entities.
+It is only an logical component which means it is not a physical entity.
+hmm Now let’s go for example, if you had a class called “Expensive Cars” the object could be like Mercedes, BMW, Toyota, etc.
+and the properties an be price or speed of these cars.
+While the methods may be performed with these cars are driving, reverse, braking.
+Next core concept is object.
+An object can be defined as an instance of a class, and there can be multiple instances of a class in a program.
+An Object contains both the data and the function, which operates on the data. uh For example - chair, bike, marker, pen, table.
+Next, we have Inheritance. What is inheritance.
+Inheritance is an OOPS concept in which one object acquires the properties and behaviours of the parent object.
+It’s creating a parent-child relationship between two classes.
+It offers robust and natural mechanism for organizing and structure of any software.
+
+An abstraction is an act of representing essential features without including background details.
+It is a technique of creating a new data type that is suited for a specific application.
+Now let’s see an example er, while driving a car, you do not have to be concerned with its internal working.
+Here you just need to concern about parts like steering wheel, Gears, accelerator.
+Ok so do you know what is Encapsulation? It is an OOP method wrapping the data and code.
+In this OOPS idea, the factors of a class are constantly hidden different classes.
+It must be gotten to utilizing the techniques for their present class.
+For instance - in school, an understudy can't exist without a class.
+Rest of the oop core concepts will be discussed in our next lecture.
+Hmm Before we end the lecture I will tell you some advantages of oop.
+OOP offers easy to understand and a clear modular structure for programs.
+Objects created for Object-Oriented Programs can be reused in other programs.
+Thus it saves significant development cost.
+Large programs are difficult to write, but if the development and designing team follow OOPS concept then they can better design with minimum flaws.
+It also enhances program modularity because every object exists independently.
+
+So, that is it for today's lecture on this module.
+I hope you'll get a brief idea on the OOP basic concept's,  which we discussed on the lecture.
+If you have any questions regarding this lesson, please ask.
+Here is my contact information.
+See you guys on next week.

MonitorLecturerApp/logic/classroom_activity.py

+import tensorflow as tf
+import tensorflow.keras
+from PIL import Image, ImageOps
+import numpy as np
+import cv2
+import os
+
+def activity_recognition(video_name):
+    BASE_DIR = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+    CLASSIFIER_DIR = os.path.join(BASE_DIR, "MonitorLecturerApp\\models")
+    VIDEO_PATH = os.path.join(BASE_DIR, "assets\\FirstApp\\lecturer_videos\\{}".format(video_name))
+
+    print('video name: ', video_name)
+
+    detector_path = os.path.join(CLASSIFIER_DIR, "keras_model.h5")
+
+    # Disable scientific notation for clarity
+    np.set_printoptions(suppress=True)
+
+    class_labels = ['Seated Teaching', 'Teaching by Standing', 'Teaching by Walking']
+
+
+    # img = cv2.imread('test2.jpg')
+
+    # Load the model
+    model = tensorflow.keras.models.load_model(detector_path)
+    model.compile(optimizer='adam',
+                  loss=tf.keras.losses.SparseCategoricalCrossentropy(from_logits=True),
+                  metrics=['accuracy'])
+
+
+
+
+
+
+    # Create the array of the right shape to feed into the keras model
+    # The 'length' or number of images you can put into the array is
+    # determined by the first position in the shape tuple, in this case 1.
+    data = np.ndarray(shape=(1, 224, 224, 3), dtype=np.float32)
+    size = (224, 224)
+    # "C://Users//DELL//Downloads//Classroom_Video.mp4"
+    video1 = 'E:\\Studies\\SLIIT\\4th Year\\Python Projects\\classroom activity models\\videos\\{}'.format(video_name)
+
+    video = cv2.VideoCapture(VIDEO_PATH)
+
+    # additional
+    # getting the frames per second (fps)
+    # fps = video.get(cv2.CAP_PROP_FPS)
+
+    # getting the number of frames using CAP_PROP_FRAME_COUNT method
+    no_of_frames = video.get(cv2.CAP_PROP_FRAME_COUNT)
+    frame_count = 0
+    seated_count = 0
+    standing_count = 0
+    walking_count = 0
+
+    # while loop is conditioned like this to avoid the termination of the loop with an exception
+    while (frame_count < no_of_frames):
+
+        cap, frame = video.read()
+        # gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
+        img = cv2.resize(frame, size)
+        # image_array = np.asarray(img)
+        normalized_image_array = (img.astype(np.float32) / 127.0) - 1
+
+        # Load the image into the array
+        data[0] = normalized_image_array
+
+        # run the inference
+        prediction = model.predict(data)
+        label = class_labels[prediction.argmax()]
+
+        if (label == class_labels[0]):
+            seated_count += 1
+        elif (label == class_labels[1]):
+            standing_count += 1
+        elif (label == class_labels[2]):
+            walking_count += 1
+        # text = label + format(prediction[prediction.argmax()])
+
+        # if label:
+        cv2.putText(frame, label, (20, 60), cv2.FONT_HERSHEY_SIMPLEX, 1, (0, 255, 0), 3)
+        # else:
+        #     cv2.putText(frame, 'Unknown', (20, 60), cv2.FONT_HERSHEY_SIMPLEX, 2, (0, 255, 0), 3)
+
+        frame_count += 1
+        # cv2.imshow('Activity Recognition', frame)
+        # if cv2.waitKey(1) & 0xFF == ord('q'):
+        #     break
+
+
+
+    cv2.destroyAllWindows()
+    print("No of frames: ", frame_count)
+
+    # calculating the percentages
+    sit_perct = (seated_count / no_of_frames) * 100
+    stand_perct = (standing_count / no_of_frames) * 100
+
+    walk_perct = (walking_count / no_of_frames) * 100
+
+    return {
+        "sitting_perct": sit_perct,
+        "standing_perct": stand_perct,
+        "walking_perct": walk_perct
+    }
+
+
+

MonitorLecturerApp/logic/text_analysis.py

+import scripts
+import re
+import os
+
+def run():
+
+    # this dictionary will be returned
+    analysis = {}
+
+    # define the BASE path
+    BASE_PATH = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+    FILE_PATH = os.path.join(BASE_PATH, "MonitorLecturerApp\\lecture_Notes\\sample_text2.txt")
+
+    # regex = re.compile('[@!#$%^&*()<>?{}.,:;~_-]')
+    #
+    # if(regex.search(string) == None):
+    #      print("String is accepted")
+    # else:
+    #      print("\nString is not accepted.\n")
+
+
+
+
+
+    text = open(FILE_PATH, "r", encoding="utf8")
+
+    d = dict()
+    number_of_words = 0
+    lexical_count = 0
+    non_lexical_count = 0
+
+    for line in text:
+        line = line.strip()
+        line = line.lower()
+
+        line_text = line.split(" ")
+
+        # incrementing the no. of words
+        number_of_words += len(line_text)
+
+        words = line.split(" ")
+
+        for word in words:
+            if word in d:
+                d[word] = d[word] + 1
+            else:
+                d[word] = 1
+
+    # the key words are "extraneous filler words(ok, well, like, Actually, Basically, that, jest, only, really, very, now, simply, maybe, perhaps, somehow, almost, slightly, seemed ....)"
+
+    for key in list(d.keys()):
+        if (key == "like"):
+            lexical_count += d[key]
+            # print('\n number of occurrences: (like)', d[key])
+
+        elif (key == "ok"):
+            lexical_count += d[key]
+            # print('\n number of occurrences (ok)', d[key])
+
+        elif(key == "now"):
+            lexical_count += d[key]
+            # print('\n number of occurrences (now)', d[key])
+
+        elif (key == "simply"):
+            lexical_count += d[key]
+            # print('\n number of occurrences (simply)', d[key])
+
+        elif (key == "well"):
+            lexical_count += d[key]
+            # print('\n number of occurrences (well)', d[key])
+
+        elif (key == "actually"):
+            lexical_count += d[key]
+            # print('\n number of occurrences (actually)', d[key])
+
+        elif (key == "basically"):
+            lexical_count += d[key]
+            # print('\n number of occurrences (basically)', d[key])
+
+        elif (key == "that"):
+            lexical_count += d[key]
+            # print('\n number of occurrences (that)', d[key])
+
+        # "jest" newei bn "just"
+        elif (key == "just"):
+            lexical_count += d[key]
+            # print('\n number of occurrences (just)', d[key])
+
+        elif (key == "only"):
+            lexical_count += d[key]
+            # print('\n number of occurrences (only)', d[key])
+
+        elif (key == "really"):
+            lexical_count += d[key]
+            # print('\n number of occurrences (really)', d[key])
+
+        elif (key == "very"):
+            lexical_count += d[key]
+            # print('\n number of occurrences (very)', d[key])
+
+        elif (key == "maybe"):
+            lexical_count += d[key]
+            # print('\n number of occurrences (maybe)', d[key])
+
+        elif (key == "perhaps"):
+            lexical_count += d[key]
+            # print('\n number of occurrences (perhaps)', d[key])
+
+        elif (key == "somehow"):
+            lexical_count += d[key]
+            # print('\n number of occurrences (somehow)', d[key])
+
+        elif (key == "almost"):
+            lexical_count += d[key]
+            # print('\n number of occurrences (almost)', d[key])
+
+        elif (key == "slightly"):
+            lexical_count += d[key]
+            # print('\n number of occurrences (slightly)', d[key])
+
+        elif (key == "seemed"):
+            lexical_count += d[key]
+            # print('\n number of occurrences (seemed)', d[key])
+
+
+    # "non-lexical filled pauses(um, uh, erm, hmm, uuh, er,  ....)"
+
+
+        elif(key == "hmm"):
+           non_lexical_count += d[key]
+           # print('\n number of occurrences (hmm)', d[key])
+
+        elif (key == "um"):
+            non_lexical_count += d[key]
+            # print('\n number of occurrences (um)', d[key])
+
+        elif (key == "uh"):
+            non_lexical_count += d[key]
+            # print('\n number of occurrences (uh)', d[key])
+
+        elif (key == "erm"):
+            non_lexical_count += d[key]
+            # print('\n number of occurrences (erm)', d[key])
+
+        elif (key == "er"):
+            non_lexical_count += d[key]
+            # print('\n number of occurrences (er)', d[key])
+
+        elif (key == "uuh"):
+            non_lexical_count += d[key]
+            # print('\n number of occurrences (uuh)', d[key])
+
+
+
+    data = text.read()
+    num_words = data.split("\n")
+
+    # print("\nThe number of words in the document : ", number_of_words)
+    #
+    #
+    # print("\nNumber of extraneous filler words spoken : ", lexical_count)
+    #
+    #
+    # print("\nNumber of non-lexical filled pauses spoken : ", non_lexical_count )
+
+
+    # returning the values
+    analysis['num_of_words'] = number_of_words
+    analysis['lexical_count'] = lexical_count
+    analysis['non_lexical_count'] = non_lexical_count
+
+    return analysis

MonitorLecturerApp/migrations/0001_initial.py

+# Generated by Django 3.0.4 on 2020-04-01 15:45
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='RegisterTeacher',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('fName', models.CharField(max_length=15)),
+                ('lName', models.CharField(max_length=15)),
+                ('subject', models.CharField(max_length=50)),
+                ('email', models.CharField(max_length=50)),
+                ('password', models.CharField(max_length=50)),
+            ],
+        ),
+        migrations.CreateModel(
+            name='tVideo',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=100)),
+                ('path', models.CharField(max_length=100)),
+                ('duration', models.CharField(max_length=100)),
+                ('hours', models.IntegerField()),
+                ('minutes', models.IntegerField()),
+                ('seconds', models.IntegerField()),
+            ],
+        ),
+        migrations.CreateModel(
+            name='tVideoMetaData',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('fps', models.IntegerField()),
+                ('frame_count', models.IntegerField()),
+                ('seated_count', models.IntegerField()),
+                ('standing_count', models.IntegerField()),
+                ('walking_count', models.IntegerField()),
+            ],
+        ),
+    ]

MonitorLecturerApp/models.py

+from django.db import models
+from djongo import models
+
+# Create your models here.
+
+class RegisterTeacher(models.Model):
+    fName = models.CharField(max_length = 15)
+    lName = models.CharField(max_length = 15)
+    subject = models.CharField(max_length = 50)
+    email = models.CharField(max_length = 50)
+    password = models.CharField(max_length = 50)
+
+    def _str_(self):
+        return self.fName
+
+
+class tVideo(models.Model):
+    name = models.CharField(max_length=100)
+    path = models.CharField(max_length=100)
+    duration = models.CharField(max_length=100)
+    hours = models.IntegerField()
+    minutes = models.IntegerField()
+    seconds = models.IntegerField()
+
+    def __str__(self):
+        return self.name
+
+
+class tVideoMetaData(models.Model):
+    fps = models.IntegerField()
+    frame_count = models.IntegerField()
+    seated_count = models.IntegerField()
+    standing_count = models.IntegerField()
+    walking_count = models.IntegerField()
+
+    def __int__(self):
+        return self.frame_count
+
+    def calSeatedPercent(self):
+        self.seated_percent = int((self.seated_count / self.frame_count) * 100)
+
+    def calStandPercent(self):
+        self.stand_percent = int((self.standing_count / self.frame_count) * 100)
+
+    def calWalkPercent(self):
+        self.walk_percent = int((self.walking_count / self.frame_count) * 100)
+
+    def calPercentage(self):
+        self.calSeatedPercent()
+        self.calStandPercent()
+        self.calWalkPercent()
+
+
+class lectureAudio (models.Model):
+    lecture_audio_id = models.CharField(max_length=10)
+    lecturer_date = models.DateField()
+    lecture_audio_name = models.CharField(max_length=50)
+    lecture_audio_length = models.DurationField()
+    # lecturer = models.ForeignKey(Lecturer, on_delete=models.CASCADE, default=0)
+    # subject = models.ForeignKey(Subject, on_delete=models.CASCADE, default=0)
+
+class lectureRecordedVideo (models.Model):
+    lecture_video_id = models.CharField(max_length=10)
+    lecturer_date = models.DateField()
+    lecture_video_name = models.CharField(max_length=50)
+    lecture_video_length = models.DurationField()
+    # lecturer = models.ForeignKey(Lecturer, on_delete=models.CASCADE, default=0)
+    # subject = models.ForeignKey(Subject, on_delete=models.CASCADE, default=0)
\ No newline at end of file

MonitorLecturerApp/serializers.py

+from rest_framework import serializers
+from .models import RegisterTeacher, tVideoMetaData
+
+class RegisterTeacherSerializer(serializers.ModelSerializer):
+
+    class Meta:
+        model = RegisterTeacher
+        fields = {'fName', 'lName', 'subject', 'email', 'password'}
+
+

MonitorLecturerApp/templates/MonitorLecturerApp/404.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="">
+  <meta name="author" content="">
+
+  <title>SB Admin 2 - 404</title>
+
+  <!-- Custom fonts for this template-->
+  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
+  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
+
+  <!-- Custom styles for this template-->
+  <link href="css/sb-admin-2.min.css" rel="stylesheet">
+
+</head>
+
+<body id="page-top">
+
+  <!-- Page Wrapper -->
+  <div id="wrapper">
+
+    <!-- Sidebar -->
+    <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
+
+      <!-- Sidebar - Brand -->
+      <a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
+        <div class="sidebar-brand-icon rotate-n-15">
+          <i class="fas fa-laugh-wink"></i>
+        </div>
+        <div class="sidebar-brand-text mx-3">SB Admin <sup>2</sup></div>
+      </a>
+
+      <!-- Divider -->
+      <hr class="sidebar-divider my-0">
+
+      <!-- Nav Item - Dashboard -->
+      <li class="nav-item">
+        <a class="nav-link" href="index.html">
+          <i class="fas fa-fw fa-tachometer-alt"></i>
+          <span>Dashboard</span></a>
+      </li>
+
+      <!-- Divider -->
+      <hr class="sidebar-divider">
+
+      <!-- Heading -->
+      <div class="sidebar-heading">
+        Interface
+      </div>
+
+      <!-- Nav Item - Pages Collapse Menu -->
+      <li class="nav-item">
+        <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
+          <i class="fas fa-fw fa-cog"></i>
+          <span>Components</span>
+        </a>
+        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
+          <div class="bg-white py-2 collapse-inner rounded">
+            <h6 class="collapse-header">Custom Components:</h6>
+            <a class="collapse-item" href="buttons.html">Buttons</a>
+            <a class="collapse-item" href="cards.html">Cards</a>
+          </div>
+        </div>
+      </li>
+
+      <!-- Nav Item - Utilities Collapse Menu -->
+      <li class="nav-item">
+        <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities" aria-expanded="true" aria-controls="collapseUtilities">
+          <i class="fas fa-fw fa-wrench"></i>
+          <span>Utilities</span>
+        </a>
+        <div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities" data-parent="#accordionSidebar">
+          <div class="bg-white py-2 collapse-inner rounded">
+            <h6 class="collapse-header">Custom Utilities:</h6>
+            <a class="collapse-item" href="utilities-color.html">Colors</a>
+            <a class="collapse-item" href="utilities-border.html">Borders</a>
+            <a class="collapse-item" href="utilities-animation.html">Animations</a>
+            <a class="collapse-item" href="utilities-other.html">Other</a>
+          </div>
+        </div>
+      </li>
+
+      <!-- Divider -->
+      <hr class="sidebar-divider">
+
+      <!-- Heading -->
+      <div class="sidebar-heading">
+        Addons
+      </div>
+
+      <!-- Nav Item - Pages Collapse Menu -->
+      <li class="nav-item active">
+        <a class="nav-link" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages">
+          <i class="fas fa-fw fa-folder"></i>
+          <span>Pages</span>
+        </a>
+        <div id="collapsePages" class="collapse show" aria-labelledby="headingPages" data-parent="#accordionSidebar">
+          <div class="bg-white py-2 collapse-inner rounded">
+            <h6 class="collapse-header">Login Screens:</h6>
+            <a class="collapse-item" href="login.html">Login</a>
+            <a class="collapse-item" href="register.html">Register</a>
+            <a class="collapse-item" href="forgot-password.html">Forgot Password</a>
+            <div class="collapse-divider"></div>
+            <h6 class="collapse-header">Other Pages:</h6>
+            <a class="collapse-item active" href="404.html">404 Page</a>
+            <a class="collapse-item" href="blank.html">Blank Page</a>
+          </div>
+        </div>
+      </li>
+
+      <!-- Nav Item - Charts -->
+      <li class="nav-item">
+        <a class="nav-link" href="charts.html">
+          <i class="fas fa-fw fa-chart-area"></i>
+          <span>Charts</span></a>
+      </li>
+
+      <!-- Nav Item - Tables -->
+      <li class="nav-item">
+        <a class="nav-link" href="tables.html">
+          <i class="fas fa-fw fa-table"></i>
+          <span>Tables</span></a>
+      </li>
+
+      <!-- Divider -->
+      <hr class="sidebar-divider d-none d-md-block">
+
+      <!-- Sidebar Toggler (Sidebar) -->
+      <div class="text-center d-none d-md-inline">
+        <button class="rounded-circle border-0" id="sidebarToggle"></button>
+      </div>
+
+    </ul>
+    <!-- End of Sidebar -->
+
+    <!-- Content Wrapper -->
+    <div id="content-wrapper" class="d-flex flex-column">
+
+      <!-- Main Content -->
+      <div id="content">
+
+        <!-- Topbar -->
+        <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
+
+          <!-- Sidebar Toggle (Topbar) -->
+          <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
+            <i class="fa fa-bars"></i>
+          </button>
+
+          <!-- Topbar Search -->
+          <form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
+            <div class="input-group">
+              <input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
+              <div class="input-group-append">
+                <button class="btn btn-primary" type="button">
+                  <i class="fas fa-search fa-sm"></i>
+                </button>
+              </div>
+            </div>
+          </form>
+
+          <!-- Topbar Navbar -->
+          <ul class="navbar-nav ml-auto">
+
+            <!-- Nav Item - Search Dropdown (Visible Only XS) -->
+            <li class="nav-item dropdown no-arrow d-sm-none">
+              <a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="fas fa-search fa-fw"></i>
+              </a>
+              <!-- Dropdown - Messages -->
+              <div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in" aria-labelledby="searchDropdown">
+                <form class="form-inline mr-auto w-100 navbar-search">
+                  <div class="input-group">
+                    <input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
+                    <div class="input-group-append">
+                      <button class="btn btn-primary" type="button">
+                        <i class="fas fa-search fa-sm"></i>
+                      </button>
+                    </div>
+                  </div>
+                </form>
+              </div>
+            </li>
+
+            <!-- Nav Item - Alerts -->
+            <li class="nav-item dropdown no-arrow mx-1">
+              <a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="fas fa-bell fa-fw"></i>
+                <!-- Counter - Alerts -->
+                <span class="badge badge-danger badge-counter">3+</span>
+              </a>
+              <!-- Dropdown - Alerts -->
+              <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="alertsDropdown">
+                <h6 class="dropdown-header">
+                  Alerts Center
+                </h6>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="mr-3">
+                    <div class="icon-circle bg-primary">
+                      <i class="fas fa-file-alt text-white"></i>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="small text-gray-500">December 12, 2019</div>
+                    <span class="font-weight-bold">A new monthly report is ready to download!</span>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="mr-3">
+                    <div class="icon-circle bg-success">
+                      <i class="fas fa-donate text-white"></i>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="small text-gray-500">December 7, 2019</div>
+                    $290.29 has been deposited into your account!
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="mr-3">
+                    <div class="icon-circle bg-warning">
+                      <i class="fas fa-exclamation-triangle text-white"></i>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="small text-gray-500">December 2, 2019</div>
+                    Spending Alert: We've noticed unusually high spending for your account.
+                  </div>
+                </a>
+                <a class="dropdown-item text-center small text-gray-500" href="#">Show All Alerts</a>
+              </div>
+            </li>
+
+            <!-- Nav Item - Messages -->
+            <li class="nav-item dropdown no-arrow mx-1">
+              <a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="fas fa-envelope fa-fw"></i>
+                <!-- Counter - Messages -->
+                <span class="badge badge-danger badge-counter">7</span>
+              </a>
+              <!-- Dropdown - Messages -->
+              <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="messagesDropdown">
+                <h6 class="dropdown-header">
+                  Message Center
+                </h6>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/fn_BT9fwg_E/60x60" alt="">
+                    <div class="status-indicator bg-success"></div>
+                  </div>
+                  <div class="font-weight-bold">
+                    <div class="text-truncate">Hi there! I am wondering if you can help me with a problem I've been having.</div>
+                    <div class="small text-gray-500">Emily Fowler · 58m</div>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/AU4VPcFN4LE/60x60" alt="">
+                    <div class="status-indicator"></div>
+                  </div>
+                  <div>
+                    <div class="text-truncate">I have the photos that you ordered last month, how would you like them sent to you?</div>
+                    <div class="small text-gray-500">Jae Chun · 1d</div>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/CS2uCrpNzJY/60x60" alt="">
+                    <div class="status-indicator bg-warning"></div>
+                  </div>
+                  <div>
+                    <div class="text-truncate">Last month's report looks great, I am very happy with the progress so far, keep up the good work!</div>
+                    <div class="small text-gray-500">Morgan Alvarez · 2d</div>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/Mv9hjnEUHR4/60x60" alt="">
+                    <div class="status-indicator bg-success"></div>
+                  </div>
+                  <div>
+                    <div class="text-truncate">Am I a good boy? The reason I ask is because someone told me that people say this to all dogs, even if they aren't good...</div>
+                    <div class="small text-gray-500">Chicken the Dog · 2w</div>
+                  </div>
+                </a>
+                <a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>
+              </div>
+            </li>
+
+            <div class="topbar-divider d-none d-sm-block"></div>
+
+            <!-- Nav Item - User Information -->
+            <li class="nav-item dropdown no-arrow">
+              <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <span class="mr-2 d-none d-lg-inline text-gray-600 small">Valerie Luna</span>
+                <img class="img-profile rounded-circle" src="https://source.unsplash.com/QAB-WJcbgJk/60x60">
+              </a>
+              <!-- Dropdown - User Information -->
+              <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
+                <a class="dropdown-item" href="#">
+                  <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Profile
+                </a>
+                <a class="dropdown-item" href="#">
+                  <i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Settings
+                </a>
+                <a class="dropdown-item" href="#">
+                  <i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Activity Log
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
+                  <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Logout
+                </a>
+              </div>
+            </li>
+
+          </ul>
+
+        </nav>
+        <!-- End of Topbar -->
+
+        <!-- Begin Page Content -->
+        <div class="container-fluid">
+
+          <!-- 404 Error Text -->
+          <div class="text-center">
+            <div class="error mx-auto" data-text="404">404</div>
+            <p class="lead text-gray-800 mb-5">Page Not Found</p>
+            <p class="text-gray-500 mb-0">It looks like you found a glitch in the matrix...</p>
+            <a href="index.html">&larr; Back to Dashboard</a>
+          </div>
+
+        </div>
+        <!-- /.container-fluid -->
+
+      </div>
+      <!-- End of Main Content -->
+
+      <!-- Footer -->
+      <footer class="sticky-footer bg-white">
+        <div class="container my-auto">
+          <div class="copyright text-center my-auto">
+            <span>Copyright &copy; Your Website 2019</span>
+          </div>
+        </div>
+      </footer>
+      <!-- End of Footer -->
+
+    </div>
+    <!-- End of Content Wrapper -->
+
+  </div>
+  <!-- End of Page Wrapper -->
+
+  <!-- Scroll to Top Button-->
+  <a class="scroll-to-top rounded" href="#page-top">
+    <i class="fas fa-angle-up"></i>
+  </a>
+
+  <!-- Logout Modal-->
+  <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
+          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">×</span>
+          </button>
+        </div>
+        <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
+          <a class="btn btn-primary" href="login.html">Logout</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Bootstrap core JavaScript-->
+  <script src="vendor/jquery/jquery.min.js"></script>
+  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+
+  <!-- Core plugin JavaScript-->
+  <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
+
+  <!-- Custom scripts for all pages-->
+  <script src="js/sb-admin-2.min.js"></script>
+
+</body>
+
+</html>

MonitorLecturerApp/templates/MonitorLecturerApp/Home.html

+{% extends 'FirstApp/template.html' %}
+<!DOCTYPE html>
+<html lang="en">
+<!--{% block 'head' %}-->
+<!--{% endblock %}-->
+<body id="page-top">
+    <!-- Page Wrapper -->
+  <div id="wrapper">
+
+    <!-- Content Wrapper -->
+    <div id="content-wrapper" class="d-flex flex-column">
+
+      <!-- Main Content -->
+      <div id="content">
+
+        <!-- Begin Page Content -->
+        {% block 'container-fluid' %}
+        <div class="container-fluid">
+
+          <!-- Page Heading -->
+          <div class="d-sm-flex align-items-center justify-content-between mb-4">
+            <h1 class="h3 mb-0 text-gray-800">{{object.Message}}</h1>
+            <a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="fas fa-download fa-sm text-white-50"></i> Generate Report</a>
+          </div>
+
+          <!-- Content Row -->
+          <div class="row">
+
+            <!-- Earnings (Monthly) Card Example -->
+            <div class="col-xl-3 col-md-6 mb-4">
+              <div class="card border-left-primary shadow h-100 py-2">
+                <div class="card-body">
+                  <div class="row no-gutters align-items-center">
+                    <div class="col mr-2">
+                      <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Earnings (Monthly)</div>
+                      <div class="h5 mb-0 font-weight-bold text-gray-800">$40,000</div>
+                    </div>
+                    <div class="col-auto">
+                      <i class="fas fa-calendar fa-2x text-gray-300"></i>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Earnings (Monthly) Card Example -->
+            <div class="col-xl-3 col-md-6 mb-4">
+              <div class="card border-left-success shadow h-100 py-2">
+                <div class="card-body">
+                  <div class="row no-gutters align-items-center">
+                    <div class="col mr-2">
+                      <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Earnings (Annual)</div>
+                      <div class="h5 mb-0 font-weight-bold text-gray-800">$215,000</div>
+                    </div>
+                    <div class="col-auto">
+                      <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Earnings (Monthly) Card Example -->
+            <div class="col-xl-3 col-md-6 mb-4">
+              <div class="card border-left-info shadow h-100 py-2">
+                <div class="card-body">
+                  <div class="row no-gutters align-items-center">
+                    <div class="col mr-2">
+                      <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Tasks</div>
+                      <div class="row no-gutters align-items-center">
+                        <div class="col-auto">
+                          <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">50%</div>
+                        </div>
+                        <div class="col">
+                          <div class="progress progress-sm mr-2">
+                            <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="col-auto">
+                      <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Pending Requests Card Example -->
+            <div class="col-xl-3 col-md-6 mb-4">
+              <div class="card border-left-warning shadow h-100 py-2">
+                <div class="card-body">
+                  <div class="row no-gutters align-items-center">
+                    <div class="col mr-2">
+                      <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Pending Requests</div>
+                      <div class="h5 mb-0 font-weight-bold text-gray-800">18</div>
+                    </div>
+                    <div class="col-auto">
+                      <i class="fas fa-comments fa-2x text-gray-300"></i>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+          </div>
+
+          <!-- Content Row -->
+
+          <div class="row">
+
+            <!-- Area Chart -->
+            <div class="col-xl-8 col-lg-7">
+              <div class="card shadow mb-4">
+                <!-- Card Header - Dropdown -->
+                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
+                  <h6 class="m-0 font-weight-bold text-primary">Attendance Overview</h6>
+                  <div class="dropdown no-arrow">
+                    <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                      <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
+                    </a>
+                    <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
+                      <div class="dropdown-header">Dropdown Header:</div>
+                      <a class="dropdown-item" href="#">Action</a>
+                      <a class="dropdown-item" href="#">Another action</a>
+                      <div class="dropdown-divider"></div>
+                      <a class="dropdown-item" href="#">Something else here</a>
+                    </div>
+                  </div>
+                </div>
+                <!-- Card Body -->
+                <div class="card-body">
+                  <div class="chart-area">
+                    <canvas id="myAreaChart"></canvas>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Pie Chart -->
+            <div class="col-xl-4 col-lg-5">
+              <div class="card shadow mb-4">
+                <!-- Card Header - Dropdown -->
+                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
+                  <h6 class="m-0 font-weight-bold text-primary">Revenue Sources</h6>
+                  <div class="dropdown no-arrow">
+                    <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                      <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
+                    </a>
+                    <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
+                      <div class="dropdown-header">Dropdown Header:</div>
+                      <a class="dropdown-item" href="#">Action</a>
+                      <a class="dropdown-item" href="#">Another action</a>
+                      <div class="dropdown-divider"></div>
+                      <a class="dropdown-item" href="#">Something else here</a>
+                    </div>
+                  </div>
+                </div>
+                <!-- Card Body -->
+                <div class="card-body">
+                  <div class="chart-pie pt-4 pb-2">
+                    <canvas id="myPieChart"></canvas>
+                  </div>
+                  <div class="mt-4 text-center small">
+                    <span class="mr-2">
+                      <i class="fas fa-circle text-primary"></i> Direct
+                    </span>
+                    <span class="mr-2">
+                      <i class="fas fa-circle text-success"></i> Social
+                    </span>
+                    <span class="mr-2">
+                      <i class="fas fa-circle text-info"></i> Referral
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Content Row -->
+          <div class="row">
+
+            <!-- Content Column -->
+            <div class="col-lg-6 mb-4">
+
+              <!-- Project Card Example -->
+              <div class="card shadow mb-4">
+                <div class="card-header py-3">
+                  <h6 class="m-0 font-weight-bold text-primary">Student Behavior</h6>
+                </div>
+                <div class="card-body">
+                  {% load static %}
+                  <video width="500" height="300" controls>
+                      <source src="{% static 'FirstApp/videos/Classroom_Video.mp4' %}" type="video/mp4">
+                      Your browser does not support the video tag.
+                  </video>
+
+                  <a href="/webcam" class="btn btn-outline-primary" id="processBtn">Process</a>
+                </div>
+              </div>
+
+              <!-- Color System -->
+              <div class="row">
+                <div class="col-lg-6 mb-4">
+                  <div class="card bg-primary text-white shadow">
+                    <div class="card-body">
+                      Primary
+                      <div class="text-white-50 small">#4e73df</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-lg-6 mb-4">
+                  <div class="card bg-success text-white shadow">
+                    <div class="card-body">
+                      Success
+                      <div class="text-white-50 small">#1cc88a</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-lg-6 mb-4">
+                  <div class="card bg-info text-white shadow">
+                    <div class="card-body">
+                      Info
+                      <div class="text-white-50 small">#36b9cc</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-lg-6 mb-4">
+                  <div class="card bg-warning text-white shadow">
+                    <div class="card-body">
+                      Warning
+                      <div class="text-white-50 small">#f6c23e</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-lg-6 mb-4">
+                  <div class="card bg-danger text-white shadow">
+                    <div class="card-body">
+                      Danger
+                      <div class="text-white-50 small">#e74a3b</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-lg-6 mb-4">
+                  <div class="card bg-secondary text-white shadow">
+                    <div class="card-body">
+                      Secondary
+                      <div class="text-white-50 small">#858796</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+            </div>
+
+            <div class="col-lg-6 mb-4">
+
+              <!-- Illustrations -->
+              <div class="card shadow mb-4">
+                <div class="card-header py-3">
+                  <h6 class="m-0 font-weight-bold text-primary">Lecture Recordings</h6>
+                </div>
+                <div class="card-body">
+                  <table class="table table-bordered">
+                    <thead>
+                      <tr>
+                        <th>Video Name</th>
+                        <th>Length</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {% for video in Videos %}
+                      <tr>
+                        <td>
+                          <a href="{% url 'video' %}?video_name={{video.name}}" class="btn btn-link">{{video.name}}</a>
+                        </td>
+                        <td>{{video.duration}}</td>
+                        <td>
+                          <a href="{% url 'video' %}?video_name={{video.name}}" class="btn btn-outline-info">Process</a>
+                        </td>
+                      </tr>
+                      {% endfor %}
+                    </tbody>
+                  </table>
+<!--                  <div class="text-center">-->
+<!--                    <img class="img-fluid px-3 px-sm-4 mt-3 mb-4" style="width: 25rem;" src="img/undraw_posting_photo.svg" alt="">-->
+<!--                  </div>-->
+<!--                  <p>Add some quality, svg illustrations to your project courtesy of <a target="_blank" rel="nofollow" href="https://undraw.co/">unDraw</a>, a constantly updated collection of beautiful svg images that you can use completely free and without attribution!</p>-->
+<!--                  <a target="_blank" rel="nofollow" href="https://undraw.co/">Browse Illustrations on unDraw &rarr;</a>-->
+                </div>
+              </div>
+
+              <!-- Approach -->
+              <div class="card shadow mb-4">
+                <div class="card-header py-3">
+                  <h6 class="m-0 font-weight-bold text-primary">Development Approach</h6>
+                </div>
+                <div class="card-body">
+                  <p>SB Admin 2 makes extensive use of Bootstrap 4 utility classes in order to reduce CSS bloat and poor page performance. Custom CSS classes are used to create custom components and custom utility classes.</p>
+                  <p class="mb-0">Before working with this theme, you should become familiar with the Bootstrap framework, especially the utility classes.</p>
+                </div>
+              </div>
+
+            </div>
+          </div>
+
+        </div>
+        <!-- /.container-fluid -->
+        {% endblock %}
+
+      </div>
+      <!-- End of Main Content -->
+
+    </div>
+    <!-- End of Content Wrapper -->
+
+  </div>
+  <!-- End of Page Wrapper -->
+
+  <!--    scroll to top button-->
+  {% block 'modal' %}
+  <a class="scroll-to-top rounded" href="#page-top">
+    <i class="fas fa-angle-up"></i>
+  </a>
+
+  <!-- Logout Modal-->
+  <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
+          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">×</span>
+          </button>
+        </div>
+        <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
+          <a class="btn btn-primary" href="/login">Logout</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  {% endblock %}
+<!--scripts-->
+    {% block 'scripts' %}
+    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
+
+    <script src="{% static 'FirstApp/vendor/jquery/jquery.min.js' %}"></script>
+    <script src="{% static 'FirstApp/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
+
+    <!-- Core plugin JavaScript-->
+    <script src="{% static 'FirstApp/vendor/jquery-easing/jquery.easing.min.js' %}"></script>
+
+    <!-- Custom scripts for all pages-->
+    <script src="{% static 'FirstApp/js/sb-admin-2.min.js' %}"></script>
+
+    <!-- Page level plugins -->
+    <script src="{% static 'FirstApp/vendor/chart.js/Chart.min.js' %}"></script>
+
+    <!-- Page level custom scripts -->
+    <script src="{% static 'FirstApp/js/demo/chart-area-demo.js' %}"></script>
+    <script src="{% static 'FirstApp/js/demo/chart-pie-demo.js' %}"></script>
+
+    {% endblock %}
+</body>
+</html>
\ No newline at end of file

MonitorLecturerApp/templates/MonitorLecturerApp/base.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link rel="stylesheet" href="style.css">
+    <title>{% block title %}My amazing site{% endblock %}</title>
+</head>
+
+<body>
+    <div id="sidebar">
+        {% block sidebar %}
+        <ul>
+            <li><a href="/">Home</a></li>
+            <li><a href="/blog/">Blog</a></li>
+        </ul>
+        {% endblock %}
+    </div>
+
+    <div id="content">
+        {% block content %}{% endblock %}
+    </div>
+</body>
+</html>
\ No newline at end of file

MonitorLecturerApp/templates/MonitorLecturerApp/beginer.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>First Timer</title>
+
+    <style>
+        table th,td {border: 1px solid blue;}
+    </style>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+
+</head>
+<body>
+
+    <h1><b>This is the home page </b></h1>
+    <h6>Or at least it should be!!!!!!</h6>
+
+    <table style="width: 30%">
+        <tr>
+            <th>Food</th>
+            <th>Ingredients</th>
+        </tr>
+        <tr>
+            <td>Buger</td>
+            <td>Chicken</td>
+        </tr>
+
+
+    </table>
+
+</body>
+</html>
\ No newline at end of file

MonitorLecturerApp/templates/MonitorLecturerApp/blank.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="">
+  <meta name="author" content="">
+
+  <title>SB Admin 2 - Blank</title>
+
+  <!-- Custom fonts for this template-->
+  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
+  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
+
+  <!-- Custom styles for this template-->
+  <link href="css/sb-admin-2.min.css" rel="stylesheet">
+
+</head>
+
+<body id="page-top">
+
+  <!-- Page Wrapper -->
+  <div id="wrapper">
+
+    <!-- Sidebar -->
+    <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
+
+      <!-- Sidebar - Brand -->
+      <a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
+        <div class="sidebar-brand-icon rotate-n-15">
+          <i class="fas fa-laugh-wink"></i>
+        </div>
+        <div class="sidebar-brand-text mx-3">SB Admin <sup>2</sup></div>
+      </a>
+
+      <!-- Divider -->
+      <hr class="sidebar-divider my-0">
+
+      <!-- Nav Item - Dashboard -->
+      <li class="nav-item">
+        <a class="nav-link" href="index.html">
+          <i class="fas fa-fw fa-tachometer-alt"></i>
+          <span>Dashboard</span></a>
+      </li>
+
+      <!-- Divider -->
+      <hr class="sidebar-divider">
+
+      <!-- Heading -->
+      <div class="sidebar-heading">
+        Interface
+      </div>
+
+      <!-- Nav Item - Pages Collapse Menu -->
+      <li class="nav-item">
+        <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
+          <i class="fas fa-fw fa-cog"></i>
+          <span>Components</span>
+        </a>
+        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
+          <div class="bg-white py-2 collapse-inner rounded">
+            <h6 class="collapse-header">Custom Components:</h6>
+            <a class="collapse-item" href="buttons.html">Buttons</a>
+            <a class="collapse-item" href="cards.html">Cards</a>
+          </div>
+        </div>
+      </li>
+
+      <!-- Nav Item - Utilities Collapse Menu -->
+      <li class="nav-item">
+        <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities" aria-expanded="true" aria-controls="collapseUtilities">
+          <i class="fas fa-fw fa-wrench"></i>
+          <span>Utilities</span>
+        </a>
+        <div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities" data-parent="#accordionSidebar">
+          <div class="bg-white py-2 collapse-inner rounded">
+            <h6 class="collapse-header">Custom Utilities:</h6>
+            <a class="collapse-item" href="utilities-color.html">Colors</a>
+            <a class="collapse-item" href="utilities-border.html">Borders</a>
+            <a class="collapse-item" href="utilities-animation.html">Animations</a>
+            <a class="collapse-item" href="utilities-other.html">Other</a>
+          </div>
+        </div>
+      </li>
+
+      <!-- Divider -->
+      <hr class="sidebar-divider">
+
+      <!-- Heading -->
+      <div class="sidebar-heading">
+        Addons
+      </div>
+
+      <!-- Nav Item - Pages Collapse Menu -->
+      <li class="nav-item active">
+        <a class="nav-link" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages">
+          <i class="fas fa-fw fa-folder"></i>
+          <span>Pages</span>
+        </a>
+        <div id="collapsePages" class="collapse show" aria-labelledby="headingPages" data-parent="#accordionSidebar">
+          <div class="bg-white py-2 collapse-inner rounded">
+            <h6 class="collapse-header">Login Screens:</h6>
+            <a class="collapse-item" href="login.html">Login</a>
+            <a class="collapse-item" href="register.html">Register</a>
+            <a class="collapse-item" href="forgot-password.html">Forgot Password</a>
+            <div class="collapse-divider"></div>
+            <h6 class="collapse-header">Other Pages:</h6>
+            <a class="collapse-item" href="404.html">404 Page</a>
+            <a class="collapse-item active" href="blank.html">Blank Page</a>
+          </div>
+        </div>
+      </li>
+
+      <!-- Nav Item - Charts -->
+      <li class="nav-item">
+        <a class="nav-link" href="charts.html">
+          <i class="fas fa-fw fa-chart-area"></i>
+          <span>Charts</span></a>
+      </li>
+
+      <!-- Nav Item - Tables -->
+      <li class="nav-item">
+        <a class="nav-link" href="tables.html">
+          <i class="fas fa-fw fa-table"></i>
+          <span>Tables</span></a>
+      </li>
+
+      <!-- Divider -->
+      <hr class="sidebar-divider d-none d-md-block">
+
+      <!-- Sidebar Toggler (Sidebar) -->
+      <div class="text-center d-none d-md-inline">
+        <button class="rounded-circle border-0" id="sidebarToggle"></button>
+      </div>
+
+    </ul>
+    <!-- End of Sidebar -->
+
+    <!-- Content Wrapper -->
+    <div id="content-wrapper" class="d-flex flex-column">
+
+      <!-- Main Content -->
+      <div id="content">
+
+        <!-- Topbar -->
+        <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
+
+          <!-- Sidebar Toggle (Topbar) -->
+          <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
+            <i class="fa fa-bars"></i>
+          </button>
+
+          <!-- Topbar Search -->
+          <form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
+            <div class="input-group">
+              <input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
+              <div class="input-group-append">
+                <button class="btn btn-primary" type="button">
+                  <i class="fas fa-search fa-sm"></i>
+                </button>
+              </div>
+            </div>
+          </form>
+
+          <!-- Topbar Navbar -->
+          <ul class="navbar-nav ml-auto">
+
+            <!-- Nav Item - Search Dropdown (Visible Only XS) -->
+            <li class="nav-item dropdown no-arrow d-sm-none">
+              <a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="fas fa-search fa-fw"></i>
+              </a>
+              <!-- Dropdown - Messages -->
+              <div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in" aria-labelledby="searchDropdown">
+                <form class="form-inline mr-auto w-100 navbar-search">
+                  <div class="input-group">
+                    <input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
+                    <div class="input-group-append">
+                      <button class="btn btn-primary" type="button">
+                        <i class="fas fa-search fa-sm"></i>
+                      </button>
+                    </div>
+                  </div>
+                </form>
+              </div>
+            </li>
+
+            <!-- Nav Item - Alerts -->
+            <li class="nav-item dropdown no-arrow mx-1">
+              <a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="fas fa-bell fa-fw"></i>
+                <!-- Counter - Alerts -->
+                <span class="badge badge-danger badge-counter">3+</span>
+              </a>
+              <!-- Dropdown - Alerts -->
+              <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="alertsDropdown">
+                <h6 class="dropdown-header">
+                  Alerts Center
+                </h6>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="mr-3">
+                    <div class="icon-circle bg-primary">
+                      <i class="fas fa-file-alt text-white"></i>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="small text-gray-500">December 12, 2019</div>
+                    <span class="font-weight-bold">A new monthly report is ready to download!</span>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="mr-3">
+                    <div class="icon-circle bg-success">
+                      <i class="fas fa-donate text-white"></i>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="small text-gray-500">December 7, 2019</div>
+                    $290.29 has been deposited into your account!
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="mr-3">
+                    <div class="icon-circle bg-warning">
+                      <i class="fas fa-exclamation-triangle text-white"></i>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="small text-gray-500">December 2, 2019</div>
+                    Spending Alert: We've noticed unusually high spending for your account.
+                  </div>
+                </a>
+                <a class="dropdown-item text-center small text-gray-500" href="#">Show All Alerts</a>
+              </div>
+            </li>
+
+            <!-- Nav Item - Messages -->
+            <li class="nav-item dropdown no-arrow mx-1">
+              <a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="fas fa-envelope fa-fw"></i>
+                <!-- Counter - Messages -->
+                <span class="badge badge-danger badge-counter">7</span>
+              </a>
+              <!-- Dropdown - Messages -->
+              <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="messagesDropdown">
+                <h6 class="dropdown-header">
+                  Message Center
+                </h6>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/fn_BT9fwg_E/60x60" alt="">
+                    <div class="status-indicator bg-success"></div>
+                  </div>
+                  <div class="font-weight-bold">
+                    <div class="text-truncate">Hi there! I am wondering if you can help me with a problem I've been having.</div>
+                    <div class="small text-gray-500">Emily Fowler · 58m</div>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/AU4VPcFN4LE/60x60" alt="">
+                    <div class="status-indicator"></div>
+                  </div>
+                  <div>
+                    <div class="text-truncate">I have the photos that you ordered last month, how would you like them sent to you?</div>
+                    <div class="small text-gray-500">Jae Chun · 1d</div>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/CS2uCrpNzJY/60x60" alt="">
+                    <div class="status-indicator bg-warning"></div>
+                  </div>
+                  <div>
+                    <div class="text-truncate">Last month's report looks great, I am very happy with the progress so far, keep up the good work!</div>
+                    <div class="small text-gray-500">Morgan Alvarez · 2d</div>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/Mv9hjnEUHR4/60x60" alt="">
+                    <div class="status-indicator bg-success"></div>
+                  </div>
+                  <div>
+                    <div class="text-truncate">Am I a good boy? The reason I ask is because someone told me that people say this to all dogs, even if they aren't good...</div>
+                    <div class="small text-gray-500">Chicken the Dog · 2w</div>
+                  </div>
+                </a>
+                <a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>
+              </div>
+            </li>
+
+            <div class="topbar-divider d-none d-sm-block"></div>
+
+            <!-- Nav Item - User Information -->
+            <li class="nav-item dropdown no-arrow">
+              <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <span class="mr-2 d-none d-lg-inline text-gray-600 small">Valerie Luna</span>
+                <img class="img-profile rounded-circle" src="https://source.unsplash.com/QAB-WJcbgJk/60x60">
+              </a>
+              <!-- Dropdown - User Information -->
+              <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
+                <a class="dropdown-item" href="#">
+                  <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Profile
+                </a>
+                <a class="dropdown-item" href="#">
+                  <i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Settings
+                </a>
+                <a class="dropdown-item" href="#">
+                  <i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Activity Log
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
+                  <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Logout
+                </a>
+              </div>
+            </li>
+
+          </ul>
+
+        </nav>
+        <!-- End of Topbar -->
+
+        <!-- Begin Page Content -->
+        <div class="container-fluid">
+
+          <!-- Page Heading -->
+          <h1 class="h3 mb-4 text-gray-800">Blank Page</h1>
+
+        </div>
+        <!-- /.container-fluid -->
+
+      </div>
+      <!-- End of Main Content -->
+
+      <!-- Footer -->
+      <footer class="sticky-footer bg-white">
+        <div class="container my-auto">
+          <div class="copyright text-center my-auto">
+            <span>Copyright &copy; Your Website 2019</span>
+          </div>
+        </div>
+      </footer>
+      <!-- End of Footer -->
+
+    </div>
+    <!-- End of Content Wrapper -->
+
+  </div>
+  <!-- End of Page Wrapper -->
+
+  <!-- Scroll to Top Button-->
+  <a class="scroll-to-top rounded" href="#page-top">
+    <i class="fas fa-angle-up"></i>
+  </a>
+
+  <!-- Logout Modal-->
+  <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
+          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">×</span>
+          </button>
+        </div>
+        <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
+          <a class="btn btn-primary" href="login.html">Logout</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Bootstrap core JavaScript-->
+  <script src="vendor/jquery/jquery.min.js"></script>
+  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+
+  <!-- Core plugin JavaScript-->
+  <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
+
+  <!-- Custom scripts for all pages-->
+  <script src="js/sb-admin-2.min.js"></script>
+
+</body>
+
+</html>

MonitorLecturerApp/templates/MonitorLecturerApp/buttons.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="">
+  <meta name="author" content="">
+
+  <title>SB Admin 2 - Buttons</title>
+
+  <!-- Custom fonts for this template-->
+  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
+  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
+
+  <!-- Custom styles for this template-->
+  <link href="css/sb-admin-2.min.css" rel="stylesheet">
+
+</head>
+
+<body id="page-top">
+
+  <!-- Page Wrapper -->
+  <div id="wrapper">
+
+    <!-- Sidebar -->
+    <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
+
+      <!-- Sidebar - Brand -->
+      <a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
+        <div class="sidebar-brand-icon rotate-n-15">
+          <i class="fas fa-laugh-wink"></i>
+        </div>
+        <div class="sidebar-brand-text mx-3">SB Admin <sup>2</sup></div>
+      </a>
+
+      <!-- Divider -->
+      <hr class="sidebar-divider my-0">
+
+      <!-- Nav Item - Dashboard -->
+      <li class="nav-item">
+        <a class="nav-link" href="index.html">
+          <i class="fas fa-fw fa-tachometer-alt"></i>
+          <span>Dashboard</span></a>
+      </li>
+
+      <!-- Divider -->
+      <hr class="sidebar-divider">
+
+      <!-- Heading -->
+      <div class="sidebar-heading">
+        Interface
+      </div>
+
+      <!-- Nav Item - Pages Collapse Menu -->
+      <li class="nav-item active">
+        <a class="nav-link" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
+          <i class="fas fa-fw fa-cog"></i>
+          <span>Components</span>
+        </a>
+        <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
+          <div class="bg-white py-2 collapse-inner rounded">
+            <h6 class="collapse-header">Custom Components:</h6>
+            <a class="collapse-item active" href="buttons.html">Buttons</a>
+            <a class="collapse-item" href="cards.html">Cards</a>
+          </div>
+        </div>
+      </li>
+
+      <!-- Nav Item - Utilities Collapse Menu -->
+      <li class="nav-item">
+        <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities" aria-expanded="true" aria-controls="collapseUtilities">
+          <i class="fas fa-fw fa-wrench"></i>
+          <span>Utilities</span>
+        </a>
+        <div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities" data-parent="#accordionSidebar">
+          <div class="bg-white py-2 collapse-inner rounded">
+            <h6 class="collapse-header">Custom Utilities:</h6>
+            <a class="collapse-item" href="utilities-color.html">Colors</a>
+            <a class="collapse-item" href="utilities-border.html">Borders</a>
+            <a class="collapse-item" href="utilities-animation.html">Animations</a>
+            <a class="collapse-item" href="utilities-other.html">Other</a>
+          </div>
+        </div>
+      </li>
+
+      <!-- Divider -->
+      <hr class="sidebar-divider">
+
+      <!-- Heading -->
+      <div class="sidebar-heading">
+        Addons
+      </div>
+
+      <!-- Nav Item - Pages Collapse Menu -->
+      <li class="nav-item">
+        <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages">
+          <i class="fas fa-fw fa-folder"></i>
+          <span>Pages</span>
+        </a>
+        <div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
+          <div class="bg-white py-2 collapse-inner rounded">
+            <h6 class="collapse-header">Login Screens:</h6>
+            <a class="collapse-item" href="login.html">Login</a>
+            <a class="collapse-item" href="register.html">Register</a>
+            <a class="collapse-item" href="forgot-password.html">Forgot Password</a>
+            <div class="collapse-divider"></div>
+            <h6 class="collapse-header">Other Pages:</h6>
+            <a class="collapse-item" href="404.html">404 Page</a>
+            <a class="collapse-item" href="blank.html">Blank Page</a>
+          </div>
+        </div>
+      </li>
+
+      <!-- Nav Item - Charts -->
+      <li class="nav-item">
+        <a class="nav-link" href="charts.html">
+          <i class="fas fa-fw fa-chart-area"></i>
+          <span>Charts</span></a>
+      </li>
+
+      <!-- Nav Item - Tables -->
+      <li class="nav-item">
+        <a class="nav-link" href="tables.html">
+          <i class="fas fa-fw fa-table"></i>
+          <span>Tables</span></a>
+      </li>
+
+      <!-- Divider -->
+      <hr class="sidebar-divider d-none d-md-block">
+
+      <!-- Sidebar Toggler (Sidebar) -->
+      <div class="text-center d-none d-md-inline">
+        <button class="rounded-circle border-0" id="sidebarToggle"></button>
+      </div>
+
+    </ul>
+    <!-- End of Sidebar -->
+
+    <!-- Content Wrapper -->
+    <div id="content-wrapper" class="d-flex flex-column">
+
+      <!-- Main Content -->
+      <div id="content">
+
+        <!-- Topbar -->
+        <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
+
+          <!-- Sidebar Toggle (Topbar) -->
+          <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
+            <i class="fa fa-bars"></i>
+          </button>
+
+          <!-- Topbar Search -->
+          <form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
+            <div class="input-group">
+              <input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
+              <div class="input-group-append">
+                <button class="btn btn-primary" type="button">
+                  <i class="fas fa-search fa-sm"></i>
+                </button>
+              </div>
+            </div>
+          </form>
+
+          <!-- Topbar Navbar -->
+          <ul class="navbar-nav ml-auto">
+
+            <!-- Nav Item - Search Dropdown (Visible Only XS) -->
+            <li class="nav-item dropdown no-arrow d-sm-none">
+              <a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="fas fa-search fa-fw"></i>
+              </a>
+              <!-- Dropdown - Messages -->
+              <div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in" aria-labelledby="searchDropdown">
+                <form class="form-inline mr-auto w-100 navbar-search">
+                  <div class="input-group">
+                    <input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
+                    <div class="input-group-append">
+                      <button class="btn btn-primary" type="button">
+                        <i class="fas fa-search fa-sm"></i>
+                      </button>
+                    </div>
+                  </div>
+                </form>
+              </div>
+            </li>
+
+            <!-- Nav Item - Alerts -->
+            <li class="nav-item dropdown no-arrow mx-1">
+              <a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="fas fa-bell fa-fw"></i>
+                <!-- Counter - Alerts -->
+                <span class="badge badge-danger badge-counter">3+</span>
+              </a>
+              <!-- Dropdown - Alerts -->
+              <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="alertsDropdown">
+                <h6 class="dropdown-header">
+                  Alerts Center
+                </h6>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="mr-3">
+                    <div class="icon-circle bg-primary">
+                      <i class="fas fa-file-alt text-white"></i>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="small text-gray-500">December 12, 2019</div>
+                    <span class="font-weight-bold">A new monthly report is ready to download!</span>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="mr-3">
+                    <div class="icon-circle bg-success">
+                      <i class="fas fa-donate text-white"></i>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="small text-gray-500">December 7, 2019</div>
+                    $290.29 has been deposited into your account!
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="mr-3">
+                    <div class="icon-circle bg-warning">
+                      <i class="fas fa-exclamation-triangle text-white"></i>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="small text-gray-500">December 2, 2019</div>
+                    Spending Alert: We've noticed unusually high spending for your account.
+                  </div>
+                </a>
+                <a class="dropdown-item text-center small text-gray-500" href="#">Show All Alerts</a>
+              </div>
+            </li>
+
+            <!-- Nav Item - Messages -->
+            <li class="nav-item dropdown no-arrow mx-1">
+              <a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="fas fa-envelope fa-fw"></i>
+                <!-- Counter - Messages -->
+                <span class="badge badge-danger badge-counter">7</span>
+              </a>
+              <!-- Dropdown - Messages -->
+              <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="messagesDropdown">
+                <h6 class="dropdown-header">
+                  Message Center
+                </h6>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/fn_BT9fwg_E/60x60" alt="">
+                    <div class="status-indicator bg-success"></div>
+                  </div>
+                  <div class="font-weight-bold">
+                    <div class="text-truncate">Hi there! I am wondering if you can help me with a problem I've been having.</div>
+                    <div class="small text-gray-500">Emily Fowler · 58m</div>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/AU4VPcFN4LE/60x60" alt="">
+                    <div class="status-indicator"></div>
+                  </div>
+                  <div>
+                    <div class="text-truncate">I have the photos that you ordered last month, how would you like them sent to you?</div>
+                    <div class="small text-gray-500">Jae Chun · 1d</div>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/CS2uCrpNzJY/60x60" alt="">
+                    <div class="status-indicator bg-warning"></div>
+                  </div>
+                  <div>
+                    <div class="text-truncate">Last month's report looks great, I am very happy with the progress so far, keep up the good work!</div>
+                    <div class="small text-gray-500">Morgan Alvarez · 2d</div>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/Mv9hjnEUHR4/60x60" alt="">
+                    <div class="status-indicator bg-success"></div>
+                  </div>
+                  <div>
+                    <div class="text-truncate">Am I a good boy? The reason I ask is because someone told me that people say this to all dogs, even if they aren't good...</div>
+                    <div class="small text-gray-500">Chicken the Dog · 2w</div>
+                  </div>
+                </a>
+                <a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>
+              </div>
+            </li>
+
+            <div class="topbar-divider d-none d-sm-block"></div>
+
+            <!-- Nav Item - User Information -->
+            <li class="nav-item dropdown no-arrow">
+              <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <span class="mr-2 d-none d-lg-inline text-gray-600 small">Valerie Luna</span>
+                <img class="img-profile rounded-circle" src="https://source.unsplash.com/QAB-WJcbgJk/60x60">
+              </a>
+              <!-- Dropdown - User Information -->
+              <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
+                <a class="dropdown-item" href="#">
+                  <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Profile
+                </a>
+                <a class="dropdown-item" href="#">
+                  <i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Settings
+                </a>
+                <a class="dropdown-item" href="#">
+                  <i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Activity Log
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
+                  <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Logout
+                </a>
+              </div>
+            </li>
+
+          </ul>
+
+        </nav>
+        <!-- End of Topbar -->
+
+        <!-- Begin Page Content -->
+        <div class="container-fluid">
+
+          <!-- Page Heading -->
+          <h1 class="h3 mb-4 text-gray-800">Buttons</h1>
+
+          <div class="row">
+
+            <div class="col-lg-6">
+
+              <!-- Circle Buttons -->
+              <div class="card shadow mb-4">
+                <div class="card-header py-3">
+                  <h6 class="m-0 font-weight-bold text-primary">Circle Buttons</h6>
+                </div>
+                <div class="card-body">
+                  <p>Use Font Awesome Icons (included with this theme package) along with the circle buttons as shown in the examples below!</p>
+                  <!-- Circle Buttons (Default) -->
+                  <div class="mb-2">
+                    <code>.btn-circle</code>
+                  </div>
+                  <a href="#" class="btn btn-primary btn-circle">
+                    <i class="fab fa-facebook-f"></i>
+                  </a>
+                  <a href="#" class="btn btn-success btn-circle">
+                    <i class="fas fa-check"></i>
+                  </a>
+                  <a href="#" class="btn btn-info btn-circle">
+                    <i class="fas fa-info-circle"></i>
+                  </a>
+                  <a href="#" class="btn btn-warning btn-circle">
+                    <i class="fas fa-exclamation-triangle"></i>
+                  </a>
+                  <a href="#" class="btn btn-danger btn-circle">
+                    <i class="fas fa-trash"></i>
+                  </a>
+                  <!-- Circle Buttons (Small) -->
+                  <div class="mt-4 mb-2">
+                    <code>.btn-circle .btn-sm</code>
+                  </div>
+                  <a href="#" class="btn btn-primary btn-circle btn-sm">
+                    <i class="fab fa-facebook-f"></i>
+                  </a>
+                  <a href="#" class="btn btn-success btn-circle btn-sm">
+                    <i class="fas fa-check"></i>
+                  </a>
+                  <a href="#" class="btn btn-info btn-circle btn-sm">
+                    <i class="fas fa-info-circle"></i>
+                  </a>
+                  <a href="#" class="btn btn-warning btn-circle btn-sm">
+                    <i class="fas fa-exclamation-triangle"></i>
+                  </a>
+                  <a href="#" class="btn btn-danger btn-circle btn-sm">
+                    <i class="fas fa-trash"></i>
+                  </a>
+                  <!-- Circle Buttons (Large) -->
+                  <div class="mt-4 mb-2">
+                    <code>.btn-circle .btn-lg</code>
+                  </div>
+                  <a href="#" class="btn btn-primary btn-circle btn-lg">
+                    <i class="fab fa-facebook-f"></i>
+                  </a>
+                  <a href="#" class="btn btn-success btn-circle btn-lg">
+                    <i class="fas fa-check"></i>
+                  </a>
+                  <a href="#" class="btn btn-info btn-circle btn-lg">
+                    <i class="fas fa-info-circle"></i>
+                  </a>
+                  <a href="#" class="btn btn-warning btn-circle btn-lg">
+                    <i class="fas fa-exclamation-triangle"></i>
+                  </a>
+                  <a href="#" class="btn btn-danger btn-circle btn-lg">
+                    <i class="fas fa-trash"></i>
+                  </a>
+                </div>
+              </div>
+
+              <!-- Brand Buttons -->
+              <div class="card shadow mb-4">
+                <div class="card-header py-3">
+                  <h6 class="m-0 font-weight-bold text-primary">Brand Buttons</h6>
+                </div>
+                <div class="card-body">
+                  <p>Google and Facebook buttons are available featuring each company's respective brand color. They are used on the user login and registration pages.</p>
+                  <p>You can create more custom buttons by adding a new color variable in the <code>_variables.scss</code> file and then using the Bootstrap button variant mixin to create a new style, as demonstrated in the <code>_buttons.scss</code> file.</p>
+                  <a href="#" class="btn btn-google btn-block"><i class="fab fa-google fa-fw"></i> .btn-google</a>
+                  <a href="#" class="btn btn-facebook btn-block"><i class="fab fa-facebook-f fa-fw"></i> .btn-facebook</a>
+
+                </div>
+              </div>
+
+            </div>
+
+            <div class="col-lg-6">
+
+              <div class="card shadow mb-4">
+                <div class="card-header py-3">
+                  <h6 class="m-0 font-weight-bold text-primary">Split Buttons with Icon</h6>
+                </div>
+                <div class="card-body">
+                  <p>Works with any button colors, just use the <code>.btn-icon-split</code> class and the markup in the examples below. The examples below also use the <code>.text-white-50</code> helper class on the icons for additional styling, but it is not required.</p>
+                  <a href="#" class="btn btn-primary btn-icon-split">
+                    <span class="icon text-white-50">
+                      <i class="fas fa-flag"></i>
+                    </span>
+                    <span class="text">Split Button Primary</span>
+                  </a>
+                  <div class="my-2"></div>
+                  <a href="#" class="btn btn-success btn-icon-split">
+                    <span class="icon text-white-50">
+                      <i class="fas fa-check"></i>
+                    </span>
+                    <span class="text">Split Button Success</span>
+                  </a>
+                  <div class="my-2"></div>
+                  <a href="#" class="btn btn-info btn-icon-split">
+                    <span class="icon text-white-50">
+                      <i class="fas fa-info-circle"></i>
+                    </span>
+                    <span class="text">Split Button Info</span>
+                  </a>
+                  <div class="my-2"></div>
+                  <a href="#" class="btn btn-warning btn-icon-split">
+                    <span class="icon text-white-50">
+                      <i class="fas fa-exclamation-triangle"></i>
+                    </span>
+                    <span class="text">Split Button Warning</span>
+                  </a>
+                  <div class="my-2"></div>
+                  <a href="#" class="btn btn-danger btn-icon-split">
+                    <span class="icon text-white-50">
+                      <i class="fas fa-trash"></i>
+                    </span>
+                    <span class="text">Split Button Danger</span>
+                  </a>
+                  <div class="my-2"></div>
+                  <a href="#" class="btn btn-secondary btn-icon-split">
+                    <span class="icon text-white-50">
+                      <i class="fas fa-arrow-right"></i>
+                    </span>
+                    <span class="text">Split Button Secondary</span>
+                  </a>
+                  <div class="my-2"></div>
+                  <a href="#" class="btn btn-light btn-icon-split">
+                    <span class="icon text-gray-600">
+                      <i class="fas fa-arrow-right"></i>
+                    </span>
+                    <span class="text">Split Button Primary</span>
+                  </a>
+                  <div class="mb-4"></div>
+                  <p>Also works with small and large button classes!</p>
+                  <a href="#" class="btn btn-primary btn-icon-split btn-sm">
+                    <span class="icon text-white-50">
+                      <i class="fas fa-flag"></i>
+                    </span>
+                    <span class="text">Split Button Small</span>
+                  </a>
+                  <div class="my-2"></div>
+                  <a href="#" class="btn btn-primary btn-icon-split btn-lg">
+                    <span class="icon text-white-50">
+                      <i class="fas fa-flag"></i>
+                    </span>
+                    <span class="text">Split Button Large</span>
+                  </a>
+                </div>
+              </div>
+
+            </div>
+
+          </div>
+
+        </div>
+        <!-- /.container-fluid -->
+
+      </div>
+      <!-- End of Main Content -->
+
+      <!-- Footer -->
+      <footer class="sticky-footer bg-white">
+        <div class="container my-auto">
+          <div class="copyright text-center my-auto">
+            <span>Copyright &copy; Your Website 2019</span>
+          </div>
+        </div>
+      </footer>
+      <!-- End of Footer -->
+
+    </div>
+    <!-- End of Content Wrapper -->
+
+  </div>
+  <!-- End of Page Wrapper -->
+
+  <!-- Scroll to Top Button-->
+  <a class="scroll-to-top rounded" href="#page-top">
+    <i class="fas fa-angle-up"></i>
+  </a>
+
+  <!-- Logout Modal-->
+  <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
+          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">×</span>
+          </button>
+        </div>
+        <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
+          <a class="btn btn-primary" href="login.html">Logout</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Bootstrap core JavaScript-->
+  <script src="vendor/jquery/jquery.min.js"></script>
+  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+
+  <!-- Core plugin JavaScript-->
+  <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
+
+  <!-- Custom scripts for all pages-->
+  <script src="js/sb-admin-2.min.js"></script>
+
+</body>
+
+</html>

MonitorLecturerApp/templates/MonitorLecturerApp/cards.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="">
+  <meta name="author" content="">
+
+  <title>SB Admin 2 - Cards</title>
+
+  <!-- Custom fonts for this template-->
+  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
+  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
+
+  <!-- Custom styles for this template-->
+  <link href="css/sb-admin-2.min.css" rel="stylesheet">
+
+</head>
+
+<body id="page-top">
+
+  <!-- Page Wrapper -->
+  <div id="wrapper">
+
+    <!-- Sidebar -->
+    <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
+
+      <!-- Sidebar - Brand -->
+      <a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
+        <div class="sidebar-brand-icon rotate-n-15">
+          <i class="fas fa-laugh-wink"></i>
+        </div>
+        <div class="sidebar-brand-text mx-3">SB Admin <sup>2</sup></div>
+      </a>
+
+      <!-- Divider -->
+      <hr class="sidebar-divider my-0">
+
+      <!-- Nav Item - Dashboard -->
+      <li class="nav-item">
+        <a class="nav-link" href="index.html">
+          <i class="fas fa-fw fa-tachometer-alt"></i>
+          <span>Dashboard</span></a>
+      </li>
+
+      <!-- Divider -->
+      <hr class="sidebar-divider">
+
+      <!-- Heading -->
+      <div class="sidebar-heading">
+        Interface
+      </div>
+
+      <!-- Nav Item - Pages Collapse Menu -->
+      <li class="nav-item active">
+        <a class="nav-link" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
+          <i class="fas fa-fw fa-cog"></i>
+          <span>Components</span>
+        </a>
+        <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
+          <div class="bg-white py-2 collapse-inner rounded">
+            <h6 class="collapse-header">Custom Components:</h6>
+            <a class="collapse-item" href="buttons.html">Buttons</a>
+            <a class="collapse-item active" href="cards.html">Cards</a>
+          </div>
+        </div>
+      </li>
+
+      <!-- Nav Item - Utilities Collapse Menu -->
+      <li class="nav-item">
+        <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities" aria-expanded="true" aria-controls="collapseUtilities">
+          <i class="fas fa-fw fa-wrench"></i>
+          <span>Utilities</span>
+        </a>
+        <div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities" data-parent="#accordionSidebar">
+          <div class="bg-white py-2 collapse-inner rounded">
+            <h6 class="collapse-header">Custom Utilities:</h6>
+            <a class="collapse-item" href="utilities-color.html">Colors</a>
+            <a class="collapse-item" href="utilities-border.html">Borders</a>
+            <a class="collapse-item" href="utilities-animation.html">Animations</a>
+            <a class="collapse-item" href="utilities-other.html">Other</a>
+          </div>
+        </div>
+      </li>
+
+      <!-- Divider -->
+      <hr class="sidebar-divider">
+
+      <!-- Heading -->
+      <div class="sidebar-heading">
+        Addons
+      </div>
+
+      <!-- Nav Item - Pages Collapse Menu -->
+      <li class="nav-item">
+        <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages">
+          <i class="fas fa-fw fa-folder"></i>
+          <span>Pages</span>
+        </a>
+        <div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
+          <div class="bg-white py-2 collapse-inner rounded">
+            <h6 class="collapse-header">Login Screens:</h6>
+            <a class="collapse-item" href="login.html">Login</a>
+            <a class="collapse-item" href="register.html">Register</a>
+            <a class="collapse-item" href="forgot-password.html">Forgot Password</a>
+            <div class="collapse-divider"></div>
+            <h6 class="collapse-header">Other Pages:</h6>
+            <a class="collapse-item" href="404.html">404 Page</a>
+            <a class="collapse-item" href="blank.html">Blank Page</a>
+          </div>
+        </div>
+      </li>
+
+      <!-- Nav Item - Charts -->
+      <li class="nav-item">
+        <a class="nav-link" href="charts.html">
+          <i class="fas fa-fw fa-chart-area"></i>
+          <span>Charts</span></a>
+      </li>
+
+      <!-- Nav Item - Tables -->
+      <li class="nav-item">
+        <a class="nav-link" href="tables.html">
+          <i class="fas fa-fw fa-table"></i>
+          <span>Tables</span></a>
+      </li>
+
+      <!-- Divider -->
+      <hr class="sidebar-divider d-none d-md-block">
+
+      <!-- Sidebar Toggler (Sidebar) -->
+      <div class="text-center d-none d-md-inline">
+        <button class="rounded-circle border-0" id="sidebarToggle"></button>
+      </div>
+
+    </ul>
+    <!-- End of Sidebar -->
+
+    <!-- Content Wrapper -->
+    <div id="content-wrapper" class="d-flex flex-column">
+
+      <!-- Main Content -->
+      <div id="content">
+
+        <!-- Topbar -->
+        <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
+
+          <!-- Sidebar Toggle (Topbar) -->
+          <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
+            <i class="fa fa-bars"></i>
+          </button>
+
+          <!-- Topbar Search -->
+          <form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
+            <div class="input-group">
+              <input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
+              <div class="input-group-append">
+                <button class="btn btn-primary" type="button">
+                  <i class="fas fa-search fa-sm"></i>
+                </button>
+              </div>
+            </div>
+          </form>
+
+          <!-- Topbar Navbar -->
+          <ul class="navbar-nav ml-auto">
+
+            <!-- Nav Item - Search Dropdown (Visible Only XS) -->
+            <li class="nav-item dropdown no-arrow d-sm-none">
+              <a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="fas fa-search fa-fw"></i>
+              </a>
+              <!-- Dropdown - Messages -->
+              <div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in" aria-labelledby="searchDropdown">
+                <form class="form-inline mr-auto w-100 navbar-search">
+                  <div class="input-group">
+                    <input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
+                    <div class="input-group-append">
+                      <button class="btn btn-primary" type="button">
+                        <i class="fas fa-search fa-sm"></i>
+                      </button>
+                    </div>
+                  </div>
+                </form>
+              </div>
+            </li>
+
+            <!-- Nav Item - Alerts -->
+            <li class="nav-item dropdown no-arrow mx-1">
+              <a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="fas fa-bell fa-fw"></i>
+                <!-- Counter - Alerts -->
+                <span class="badge badge-danger badge-counter">3+</span>
+              </a>
+              <!-- Dropdown - Alerts -->
+              <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="alertsDropdown">
+                <h6 class="dropdown-header">
+                  Alerts Center
+                </h6>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="mr-3">
+                    <div class="icon-circle bg-primary">
+                      <i class="fas fa-file-alt text-white"></i>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="small text-gray-500">December 12, 2019</div>
+                    <span class="font-weight-bold">A new monthly report is ready to download!</span>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="mr-3">
+                    <div class="icon-circle bg-success">
+                      <i class="fas fa-donate text-white"></i>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="small text-gray-500">December 7, 2019</div>
+                    $290.29 has been deposited into your account!
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="mr-3">
+                    <div class="icon-circle bg-warning">
+                      <i class="fas fa-exclamation-triangle text-white"></i>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="small text-gray-500">December 2, 2019</div>
+                    Spending Alert: We've noticed unusually high spending for your account.
+                  </div>
+                </a>
+                <a class="dropdown-item text-center small text-gray-500" href="#">Show All Alerts</a>
+              </div>
+            </li>
+
+            <!-- Nav Item - Messages -->
+            <li class="nav-item dropdown no-arrow mx-1">
+              <a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="fas fa-envelope fa-fw"></i>
+                <!-- Counter - Messages -->
+                <span class="badge badge-danger badge-counter">7</span>
+              </a>
+              <!-- Dropdown - Messages -->
+              <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="messagesDropdown">
+                <h6 class="dropdown-header">
+                  Message Center
+                </h6>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/fn_BT9fwg_E/60x60" alt="">
+                    <div class="status-indicator bg-success"></div>
+                  </div>
+                  <div class="font-weight-bold">
+                    <div class="text-truncate">Hi there! I am wondering if you can help me with a problem I've been having.</div>
+                    <div class="small text-gray-500">Emily Fowler · 58m</div>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/AU4VPcFN4LE/60x60" alt="">
+                    <div class="status-indicator"></div>
+                  </div>
+                  <div>
+                    <div class="text-truncate">I have the photos that you ordered last month, how would you like them sent to you?</div>
+                    <div class="small text-gray-500">Jae Chun · 1d</div>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/CS2uCrpNzJY/60x60" alt="">
+                    <div class="status-indicator bg-warning"></div>
+                  </div>
+                  <div>
+                    <div class="text-truncate">Last month's report looks great, I am very happy with the progress so far, keep up the good work!</div>
+                    <div class="small text-gray-500">Morgan Alvarez · 2d</div>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/Mv9hjnEUHR4/60x60" alt="">
+                    <div class="status-indicator bg-success"></div>
+                  </div>
+                  <div>
+                    <div class="text-truncate">Am I a good boy? The reason I ask is because someone told me that people say this to all dogs, even if they aren't good...</div>
+                    <div class="small text-gray-500">Chicken the Dog · 2w</div>
+                  </div>
+                </a>
+                <a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>
+              </div>
+            </li>
+
+            <div class="topbar-divider d-none d-sm-block"></div>
+
+            <!-- Nav Item - User Information -->
+            <li class="nav-item dropdown no-arrow">
+              <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <span class="mr-2 d-none d-lg-inline text-gray-600 small">Valerie Luna</span>
+                <img class="img-profile rounded-circle" src="https://source.unsplash.com/QAB-WJcbgJk/60x60">
+              </a>
+              <!-- Dropdown - User Information -->
+              <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
+                <a class="dropdown-item" href="#">
+                  <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Profile
+                </a>
+                <a class="dropdown-item" href="#">
+                  <i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Settings
+                </a>
+                <a class="dropdown-item" href="#">
+                  <i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Activity Log
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
+                  <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Logout
+                </a>
+              </div>
+            </li>
+
+          </ul>
+
+        </nav>
+        <!-- End of Topbar -->
+
+        <!-- Begin Page Content -->
+        <div class="container-fluid">
+
+          <!-- Page Heading -->
+          <div class="d-sm-flex align-items-center justify-content-between mb-4">
+            <h1 class="h3 mb-0 text-gray-800">Cards</h1>
+          </div>
+
+          <div class="row">
+
+            <!-- Earnings (Monthly) Card Example -->
+            <div class="col-xl-3 col-md-6 mb-4">
+              <div class="card border-left-primary shadow h-100 py-2">
+                <div class="card-body">
+                  <div class="row no-gutters align-items-center">
+                    <div class="col mr-2">
+                      <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Earnings (Monthly)</div>
+                      <div class="h5 mb-0 font-weight-bold text-gray-800">$40,000</div>
+                    </div>
+                    <div class="col-auto">
+                      <i class="fas fa-calendar fa-2x text-gray-300"></i>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Earnings (Monthly) Card Example -->
+            <div class="col-xl-3 col-md-6 mb-4">
+              <div class="card border-left-success shadow h-100 py-2">
+                <div class="card-body">
+                  <div class="row no-gutters align-items-center">
+                    <div class="col mr-2">
+                      <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Earnings (Annual)</div>
+                      <div class="h5 mb-0 font-weight-bold text-gray-800">$215,000</div>
+                    </div>
+                    <div class="col-auto">
+                      <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Earnings (Monthly) Card Example -->
+            <div class="col-xl-3 col-md-6 mb-4">
+              <div class="card border-left-info shadow h-100 py-2">
+                <div class="card-body">
+                  <div class="row no-gutters align-items-center">
+                    <div class="col mr-2">
+                      <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Tasks</div>
+                      <div class="row no-gutters align-items-center">
+                        <div class="col-auto">
+                          <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">50%</div>
+                        </div>
+                        <div class="col">
+                          <div class="progress progress-sm mr-2">
+                            <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="col-auto">
+                      <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Pending Requests Card Example -->
+            <div class="col-xl-3 col-md-6 mb-4">
+              <div class="card border-left-warning shadow h-100 py-2">
+                <div class="card-body">
+                  <div class="row no-gutters align-items-center">
+                    <div class="col mr-2">
+                      <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Pending Requests</div>
+                      <div class="h5 mb-0 font-weight-bold text-gray-800">18</div>
+                    </div>
+                    <div class="col-auto">
+                      <i class="fas fa-comments fa-2x text-gray-300"></i>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="row">
+
+            <div class="col-lg-6">
+
+              <!-- Default Card Example -->
+              <div class="card mb-4">
+                <div class="card-header">
+                  Default Card Example
+                </div>
+                <div class="card-body">
+                  This card uses Bootstrap's default styling with no utility classes added. Global styles are the only things modifying the look and feel of this default card example.
+                </div>
+              </div>
+
+              <!-- Basic Card Example -->
+              <div class="card shadow mb-4">
+                <div class="card-header py-3">
+                  <h6 class="m-0 font-weight-bold text-primary">Basic Card Example</h6>
+                </div>
+                <div class="card-body">
+                  The styling for this basic card example is created by using default Bootstrap utility classes. By using utility classes, the style of the card component can be easily modified with no need for any custom CSS!
+                </div>
+              </div>
+
+            </div>
+
+            <div class="col-lg-6">
+
+              <!-- Dropdown Card Example -->
+              <div class="card shadow mb-4">
+                <!-- Card Header - Dropdown -->
+                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
+                  <h6 class="m-0 font-weight-bold text-primary">Dropdown Card Example</h6>
+                  <div class="dropdown no-arrow">
+                    <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                      <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
+                    </a>
+                    <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
+                      <div class="dropdown-header">Dropdown Header:</div>
+                      <a class="dropdown-item" href="#">Action</a>
+                      <a class="dropdown-item" href="#">Another action</a>
+                      <div class="dropdown-divider"></div>
+                      <a class="dropdown-item" href="#">Something else here</a>
+                    </div>
+                  </div>
+                </div>
+                <!-- Card Body -->
+                <div class="card-body">
+                  Dropdown menus can be placed in the card header in order to extend the functionality of a basic card. In this dropdown card example, the Font Awesome vertical ellipsis icon in the card header can be clicked on in order to toggle a dropdown menu.
+                </div>
+              </div>
+
+              <!-- Collapsable Card Example -->
+              <div class="card shadow mb-4">
+                <!-- Card Header - Accordion -->
+                <a href="#collapseCardExample" class="d-block card-header py-3" data-toggle="collapse" role="button" aria-expanded="true" aria-controls="collapseCardExample">
+                  <h6 class="m-0 font-weight-bold text-primary">Collapsable Card Example</h6>
+                </a>
+                <!-- Card Content - Collapse -->
+                <div class="collapse show" id="collapseCardExample">
+                  <div class="card-body">
+                    This is a collapsable card example using Bootstrap's built in collapse functionality. <strong>Click on the card header</strong> to see the card body collapse and expand!
+                  </div>
+                </div>
+              </div>
+
+            </div>
+
+          </div>
+
+        </div>
+        <!-- /.container-fluid -->
+
+      </div>
+      <!-- End of Main Content -->
+
+      <!-- Footer -->
+      <footer class="sticky-footer bg-white">
+        <div class="container my-auto">
+          <div class="copyright text-center my-auto">
+            <span>Copyright &copy; Your Website 2019</span>
+          </div>
+        </div>
+      </footer>
+      <!-- End of Footer -->
+
+    </div>
+    <!-- End of Content Wrapper -->
+
+  </div>
+  <!-- End of Page Wrapper -->
+
+  <!-- Scroll to Top Button-->
+  <a class="scroll-to-top rounded" href="#page-top">
+    <i class="fas fa-angle-up"></i>
+  </a>
+
+  <!-- Logout Modal-->
+  <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
+          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">×</span>
+          </button>
+        </div>
+        <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
+          <a class="btn btn-primary" href="login.html">Logout</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Bootstrap core JavaScript-->
+  <script src="vendor/jquery/jquery.min.js"></script>
+  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+
+  <!-- Core plugin JavaScript-->
+  <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
+
+  <!-- Custom scripts for all pages-->
+  <script src="js/sb-admin-2.min.js"></script>
+
+</body>
+
+</html>

MonitorLecturerApp/templates/MonitorLecturerApp/charts.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="">
+  <meta name="author" content="">
+
+  <title>SB Admin 2 - Charts</title>
+
+  <!-- Custom fonts for this template-->
+  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
+  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
+
+  <!-- Custom styles for this template-->
+  <link href="css/sb-admin-2.min.css" rel="stylesheet">
+
+</head>
+
+<body id="page-top">
+
+  <!-- Page Wrapper -->
+  <div id="wrapper">
+
+    <!-- Sidebar -->
+    <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
+
+      <!-- Sidebar - Brand -->
+      <a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
+        <div class="sidebar-brand-icon rotate-n-15">
+          <i class="fas fa-laugh-wink"></i>
+        </div>
+        <div class="sidebar-brand-text mx-3">SB Admin <sup>2</sup></div>
+      </a>
+
+      <!-- Divider -->
+      <hr class="sidebar-divider my-0">
+
+      <!-- Nav Item - Dashboard -->
+      <li class="nav-item">
+        <a class="nav-link" href="index.html">
+          <i class="fas fa-fw fa-tachometer-alt"></i>
+          <span>Dashboard</span></a>
+      </li>
+
+      <!-- Divider -->
+      <hr class="sidebar-divider">
+
+      <!-- Heading -->
+      <div class="sidebar-heading">
+        Interface
+      </div>
+
+      <!-- Nav Item - Pages Collapse Menu -->
+      <li class="nav-item">
+        <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
+          <i class="fas fa-fw fa-cog"></i>
+          <span>Components</span>
+        </a>
+        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
+          <div class="bg-white py-2 collapse-inner rounded">
+            <h6 class="collapse-header">Custom Components:</h6>
+            <a class="collapse-item" href="buttons.html">Buttons</a>
+            <a class="collapse-item" href="cards.html">Cards</a>
+          </div>
+        </div>
+      </li>
+
+      <!-- Nav Item - Utilities Collapse Menu -->
+      <li class="nav-item">
+        <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities" aria-expanded="true" aria-controls="collapseUtilities">
+          <i class="fas fa-fw fa-wrench"></i>
+          <span>Utilities</span>
+        </a>
+        <div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities" data-parent="#accordionSidebar">
+          <div class="bg-white py-2 collapse-inner rounded">
+            <h6 class="collapse-header">Custom Utilities:</h6>
+            <a class="collapse-item" href="utilities-color.html">Colors</a>
+            <a class="collapse-item" href="utilities-border.html">Borders</a>
+            <a class="collapse-item" href="utilities-animation.html">Animations</a>
+            <a class="collapse-item" href="utilities-other.html">Other</a>
+          </div>
+        </div>
+      </li>
+
+      <!-- Divider -->
+      <hr class="sidebar-divider">
+
+      <!-- Heading -->
+      <div class="sidebar-heading">
+        Addons
+      </div>
+
+      <!-- Nav Item - Pages Collapse Menu -->
+      <li class="nav-item">
+        <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages">
+          <i class="fas fa-fw fa-folder"></i>
+          <span>Pages</span>
+        </a>
+        <div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
+          <div class="bg-white py-2 collapse-inner rounded">
+            <h6 class="collapse-header">Login Screens:</h6>
+            <a class="collapse-item" href="login.html">Login</a>
+            <a class="collapse-item" href="register.html">Register</a>
+            <a class="collapse-item" href="forgot-password.html">Forgot Password</a>
+            <div class="collapse-divider"></div>
+            <h6 class="collapse-header">Other Pages:</h6>
+            <a class="collapse-item" href="404.html">404 Page</a>
+            <a class="collapse-item" href="blank.html">Blank Page</a>
+          </div>
+        </div>
+      </li>
+
+      <!-- Nav Item - Charts -->
+      <li class="nav-item active">
+        <a class="nav-link" href="charts.html">
+          <i class="fas fa-fw fa-chart-area"></i>
+          <span>Charts</span></a>
+      </li>
+
+      <!-- Nav Item - Tables -->
+      <li class="nav-item">
+        <a class="nav-link" href="tables.html">
+          <i class="fas fa-fw fa-table"></i>
+          <span>Tables</span></a>
+      </li>
+
+      <!-- Divider -->
+      <hr class="sidebar-divider d-none d-md-block">
+
+      <!-- Sidebar Toggler (Sidebar) -->
+      <div class="text-center d-none d-md-inline">
+        <button class="rounded-circle border-0" id="sidebarToggle"></button>
+      </div>
+
+    </ul>
+    <!-- End of Sidebar -->
+
+    <!-- Content Wrapper -->
+    <div id="content-wrapper" class="d-flex flex-column">
+
+      <!-- Main Content -->
+      <div id="content">
+
+        <!-- Topbar -->
+        <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
+
+          <!-- Sidebar Toggle (Topbar) -->
+          <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
+            <i class="fa fa-bars"></i>
+          </button>
+
+          <!-- Topbar Search -->
+          <form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
+            <div class="input-group">
+              <input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
+              <div class="input-group-append">
+                <button class="btn btn-primary" type="button">
+                  <i class="fas fa-search fa-sm"></i>
+                </button>
+              </div>
+            </div>
+          </form>
+
+          <!-- Topbar Navbar -->
+          <ul class="navbar-nav ml-auto">
+
+            <!-- Nav Item - Search Dropdown (Visible Only XS) -->
+            <li class="nav-item dropdown no-arrow d-sm-none">
+              <a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="fas fa-search fa-fw"></i>
+              </a>
+              <!-- Dropdown - Messages -->
+              <div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in" aria-labelledby="searchDropdown">
+                <form class="form-inline mr-auto w-100 navbar-search">
+                  <div class="input-group">
+                    <input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
+                    <div class="input-group-append">
+                      <button class="btn btn-primary" type="button">
+                        <i class="fas fa-search fa-sm"></i>
+                      </button>
+                    </div>
+                  </div>
+                </form>
+              </div>
+            </li>
+
+            <!-- Nav Item - Alerts -->
+            <li class="nav-item dropdown no-arrow mx-1">
+              <a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="fas fa-bell fa-fw"></i>
+                <!-- Counter - Alerts -->
+                <span class="badge badge-danger badge-counter">3+</span>
+              </a>
+              <!-- Dropdown - Alerts -->
+              <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="alertsDropdown">
+                <h6 class="dropdown-header">
+                  Alerts Center
+                </h6>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="mr-3">
+                    <div class="icon-circle bg-primary">
+                      <i class="fas fa-file-alt text-white"></i>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="small text-gray-500">December 12, 2019</div>
+                    <span class="font-weight-bold">A new monthly report is ready to download!</span>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="mr-3">
+                    <div class="icon-circle bg-success">
+                      <i class="fas fa-donate text-white"></i>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="small text-gray-500">December 7, 2019</div>
+                    $290.29 has been deposited into your account!
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="mr-3">
+                    <div class="icon-circle bg-warning">
+                      <i class="fas fa-exclamation-triangle text-white"></i>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="small text-gray-500">December 2, 2019</div>
+                    Spending Alert: We've noticed unusually high spending for your account.
+                  </div>
+                </a>
+                <a class="dropdown-item text-center small text-gray-500" href="#">Show All Alerts</a>
+              </div>
+            </li>
+
+            <!-- Nav Item - Messages -->
+            <li class="nav-item dropdown no-arrow mx-1">
+              <a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="fas fa-envelope fa-fw"></i>
+                <!-- Counter - Messages -->
+                <span class="badge badge-danger badge-counter">7</span>
+              </a>
+              <!-- Dropdown - Messages -->
+              <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="messagesDropdown">
+                <h6 class="dropdown-header">
+                  Message Center
+                </h6>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/fn_BT9fwg_E/60x60" alt="">
+                    <div class="status-indicator bg-success"></div>
+                  </div>
+                  <div class="font-weight-bold">
+                    <div class="text-truncate">Hi there! I am wondering if you can help me with a problem I've been having.</div>
+                    <div class="small text-gray-500">Emily Fowler · 58m</div>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/AU4VPcFN4LE/60x60" alt="">
+                    <div class="status-indicator"></div>
+                  </div>
+                  <div>
+                    <div class="text-truncate">I have the photos that you ordered last month, how would you like them sent to you?</div>
+                    <div class="small text-gray-500">Jae Chun · 1d</div>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/CS2uCrpNzJY/60x60" alt="">
+                    <div class="status-indicator bg-warning"></div>
+                  </div>
+                  <div>
+                    <div class="text-truncate">Last month's report looks great, I am very happy with the progress so far, keep up the good work!</div>
+                    <div class="small text-gray-500">Morgan Alvarez · 2d</div>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/Mv9hjnEUHR4/60x60" alt="">
+                    <div class="status-indicator bg-success"></div>
+                  </div>
+                  <div>
+                    <div class="text-truncate">Am I a good boy? The reason I ask is because someone told me that people say this to all dogs, even if they aren't good...</div>
+                    <div class="small text-gray-500">Chicken the Dog · 2w</div>
+                  </div>
+                </a>
+                <a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>
+              </div>
+            </li>
+
+            <div class="topbar-divider d-none d-sm-block"></div>
+
+            <!-- Nav Item - User Information -->
+            <li class="nav-item dropdown no-arrow">
+              <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <span class="mr-2 d-none d-lg-inline text-gray-600 small">Valerie Luna</span>
+                <img class="img-profile rounded-circle" src="https://source.unsplash.com/QAB-WJcbgJk/60x60">
+              </a>
+              <!-- Dropdown - User Information -->
+              <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
+                <a class="dropdown-item" href="#">
+                  <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Profile
+                </a>
+                <a class="dropdown-item" href="#">
+                  <i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Settings
+                </a>
+                <a class="dropdown-item" href="#">
+                  <i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Activity Log
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
+                  <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Logout
+                </a>
+              </div>
+            </li>
+
+          </ul>
+
+        </nav>
+        <!-- End of Topbar -->
+
+        <!-- Begin Page Content -->
+        <div class="container-fluid">
+
+          <!-- Page Heading -->
+          <h1 class="h3 mb-2 text-gray-800">Charts</h1>
+          <p class="mb-4">Chart.js is a third party plugin that is used to generate the charts in this theme. The charts below have been customized - for further customization options, please visit the <a target="_blank" href="https://www.chartjs.org/docs/latest/">official Chart.js documentation</a>.</p>
+
+          <!-- Content Row -->
+          <div class="row">
+
+            <div class="col-xl-8 col-lg-7">
+
+              <!-- Area Chart -->
+              <div class="card shadow mb-4">
+                <div class="card-header py-3">
+                  <h6 class="m-0 font-weight-bold text-primary">Area Chart</h6>
+                </div>
+                <div class="card-body">
+                  <div class="chart-area">
+                    <canvas id="myAreaChart"></canvas>
+                  </div>
+                  <hr>
+                  Styling for the area chart can be found in the <code>/js/demo/chart-area-demo.js</code> file.
+                </div>
+              </div>
+
+              <!-- Bar Chart -->
+              <div class="card shadow mb-4">
+                <div class="card-header py-3">
+                  <h6 class="m-0 font-weight-bold text-primary">Bar Chart</h6>
+                </div>
+                <div class="card-body">
+                  <div class="chart-bar">
+                    <canvas id="myBarChart"></canvas>
+                  </div>
+                  <hr>
+                  Styling for the bar chart can be found in the <code>/js/demo/chart-bar-demo.js</code> file.
+                </div>
+              </div>
+
+            </div>
+
+            <!-- Donut Chart -->
+            <div class="col-xl-4 col-lg-5">
+              <div class="card shadow mb-4">
+                <!-- Card Header - Dropdown -->
+                <div class="card-header py-3">
+                  <h6 class="m-0 font-weight-bold text-primary">Donut Chart</h6>
+                </div>
+                <!-- Card Body -->
+                <div class="card-body">
+                  <div class="chart-pie pt-4">
+                    <canvas id="myPieChart"></canvas>
+                  </div>
+                  <hr>
+                  Styling for the donut chart can be found in the <code>/js/demo/chart-pie-demo.js</code> file.
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+        <!-- /.container-fluid -->
+
+      </div>
+      <!-- End of Main Content -->
+
+      <!-- Footer -->
+      <footer class="sticky-footer bg-white">
+        <div class="container my-auto">
+          <div class="copyright text-center my-auto">
+            <span>Copyright &copy; Your Website 2019</span>
+          </div>
+        </div>
+      </footer>
+      <!-- End of Footer -->
+
+    </div>
+    <!-- End of Content Wrapper -->
+
+  </div>
+  <!-- End of Page Wrapper -->
+
+  <!-- Scroll to Top Button-->
+  <a class="scroll-to-top rounded" href="#page-top">
+    <i class="fas fa-angle-up"></i>
+  </a>
+
+  <!-- Logout Modal-->
+  <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
+          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">×</span>
+          </button>
+        </div>
+        <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
+          <a class="btn btn-primary" href="login.html">Logout</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Bootstrap core JavaScript-->
+  <script src="vendor/jquery/jquery.min.js"></script>
+  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+
+  <!-- Core plugin JavaScript-->
+  <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
+
+  <!-- Custom scripts for all pages-->
+  <script src="js/sb-admin-2.min.js"></script>
+
+  <!-- Page level plugins -->
+  <script src="vendor/chart.js/Chart.min.js"></script>
+
+  <!-- Page level custom scripts -->
+  <script src="js/demo/chart-area-demo.js"></script>
+  <script src="js/demo/chart-pie-demo.js"></script>
+  <script src="js/demo/chart-bar-demo.js"></script>
+
+</body>
+
+</html>

MonitorLecturerApp/templates/MonitorLecturerApp/child.html

+{% extends "MonitorLecturerApp/base.html" %}
+
+{% block title %}My amazing blog{% endblock %}
+
+{% block content %}
+{% for entry in blog_entries %}
+    <h2>{{ entry.title }}</h2>
+    <p>{{ entry.body }}</p>
+{% endfor %}
+{% endblock %}
\ No newline at end of file

MonitorLecturerApp/templates/MonitorLecturerApp/forgot-password.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="">
+  <meta name="author" content="">
+
+  <title>SB Admin 2 - Forgot Password</title>
+
+  <!-- Custom fonts for this template-->
+  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
+  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
+
+  <!-- Custom styles for this template-->
+  <link href="css/sb-admin-2.min.css" rel="stylesheet">
+
+</head>
+
+<body class="bg-gradient-primary">
+
+  <div class="container">
+
+    <!-- Outer Row -->
+    <div class="row justify-content-center">
+
+      <div class="col-xl-10 col-lg-12 col-md-9">
+
+        <div class="card o-hidden border-0 shadow-lg my-5">
+          <div class="card-body p-0">
+            <!-- Nested Row within Card Body -->
+            <div class="row">
+              <div class="col-lg-6 d-none d-lg-block bg-password-image"></div>
+              <div class="col-lg-6">
+                <div class="p-5">
+                  <div class="text-center">
+                    <h1 class="h4 text-gray-900 mb-2">Forgot Your Password?</h1>
+                    <p class="mb-4">We get it, stuff happens. Just enter your email address below and we'll send you a link to reset your password!</p>
+                  </div>
+                  <form class="user">
+                    <div class="form-group">
+                      <input type="email" class="form-control form-control-user" id="exampleInputEmail" aria-describedby="emailHelp" placeholder="Enter Email Address...">
+                    </div>
+                    <a href="login.html" class="btn btn-primary btn-user btn-block">
+                      Reset Password
+                    </a>
+                  </form>
+                  <hr>
+                  <div class="text-center">
+                    <a class="small" href="register.html">Create an Account!</a>
+                  </div>
+                  <div class="text-center">
+                    <a class="small" href="login.html">Already have an account? Login!</a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+
+  </div>
+
+  <!-- Bootstrap core JavaScript-->
+  <script src="vendor/jquery/jquery.min.js"></script>
+  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+
+  <!-- Core plugin JavaScript-->
+  <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
+
+  <!-- Custom scripts for all pages-->
+  <script src="js/sb-admin-2.min.js"></script>
+
+</body>
+
+</html>

MonitorLecturerApp/templates/MonitorLecturerApp/index.html

+
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <title>SLPES</title>
+
+    {% load static %}
+    <!-- Custom fonts for this template-->
+    <link rel="shortcut icon" href="{% static 'FirstApp/images/favicon.ico' %}" type="image/x-icon" />
+    <link href="{% static 'FirstApp/css/all.min.css' %}" rel="stylesheet" type="text/css">
+    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
+
+    <!-- Custom styles for this template-->
+    <link href="{% static 'FirstApp/css/sb-admin-2.min.css' %}" rel="stylesheet">
+
+
+
+</head>
+
+<body id="page-top">
+
+    <!-- Bootstrap core JavaScript-->
+<script src="{% static 'FirstApp/vendor/jquery/jquery.min.js'  %}"></script>
+<script src="{% static 'FirstApp/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
+
+     <script type="text/javascript">
+        $(document).ready(function () {
+            $('.calc').click(function () {
+                let video_name = $(this).attr('id');
+
+                $('#loader').attr('hidden', false);
+
+                // alert('hello');
+
+                $('#no_content_message').attr('hidden', true);
+
+                //fetching data from the API
+                fetch('http://127.0.0.1:8000/lecturer/activities/?video_name=' + video_name)
+                .then((res) => res.json())
+                .then((out) => assignPerct(out.response))
+                .catch((error) => alert('error ' + error))
+            });
+
+
+            //to assign percentage values
+            function assignPerct(percentages) {
+                $('#no_content_message').attr('hidden', true);
+                $('#progress_bars').attr('hidden', false);
+                $('#loader').attr('hidden', true);
+
+                let sitting = Math.round(percentages.sitting_perct);
+                let standing = Math.round(percentages.standing_perct);
+                let walking = Math.round(percentages.walking_perct);
+
+                $('#sitting_val').width(sitting+'%');
+                $('#standing_val').width(standing+'%');
+                $('#walking_val').width(walking+'%');
+
+                $('#sitting_span').text(sitting + '%');
+                $('#standing_span').text(standing + '%');
+                $('#walking_span').text(walking + '%');
+
+
+            }
+
+
+            //this is for the temporay button (delete later)
+            $('#temp_btn').click(function () {
+                //using the fecth API
+
+                //hide the message
+                $('#no_content_audio_message').attr('hidden', true);
+
+                //show the loader
+                $('#audio_loader').attr('hidden', false);
+
+                fetch('http://127.0.0.1:8000/lecturer/get-audio-analysis')
+                .then((res) => res.json())
+                .then((out) => displayAudioAnalysis(out.response))
+                .catch((err) => alert('this is a error: ' + err))
+            });
+
+
+            //this function will display the retrieved audio analysis values
+            function displayAudioAnalysis(response) {
+
+                $('#num_of_words').text(response.num_of_words);
+                $('#lexical_count').text(response.lexical_count);
+                $('#non_lexical_count').text(response.non_lexical_count);
+
+                //hide the loader
+                $('#audio_loader').attr('hidden', true);
+
+                //show the content
+                $('#audio_summary_details').attr('hidden', false);
+            }
+
+        });
+    </script>
+
+<!-- Page Wrapper -->
+<div id="wrapper">
+
+    <!-- Sidebar -->
+    <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
+
+        <!-- Sidebar - Brand -->
+        <a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
+            <div class="sidebar-brand-icon rotate-n-15">
+                <i class="fas fa-laugh-wink"></i>
+            </div>
+            <div class="sidebar-brand-text mx-3">SB Admin <sup>2</sup></div>
+        </a>
+
+        <!-- Divider -->
+        <hr class="sidebar-divider my-0">
+
+        <!-- Nav Item - Dashboard -->
+        <li class="nav-item active">
+            <a class="nav-link" href="/lecturer">
+                <i class="fas fa-fw fa-tachometer-alt"></i>
+                <span>Dashboard</span></a>
+        </li>
+
+
+        <!-- Divider -->
+        <hr class="sidebar-divider">
+
+        <!-- Heading -->
+        <div class="sidebar-heading">
+
+        </div>
+
+        <!-- Nav Item - Pages Collapse Menu -->
+        <li class="nav-item">
+            <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages">
+                <i class="fas fa-fw fa-folder"></i>
+                <span>Pages</span>
+            </a>
+            <div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
+                <div class="bg-white py-2 collapse-inner rounded">
+<!--                    <h6 class="collapse-header">Login Screens:</h6>-->
+                    <a class="collapse-item" href="index.html">Dashboard</a>
+                    <a class="collapse-item" href="/lecturer/lecture-video">Video Page</a>
+
+                </div>
+            </div>
+        </li>
+
+        <!-- Divider -->
+        <hr class="sidebar-divider d-none d-md-block">
+
+        <!-- Sidebar Toggler (Sidebar) -->
+        <div class="text-center d-none d-md-inline">
+            <button class="rounded-circle border-0" id="sidebarToggle"></button>
+        </div>
+
+    </ul>
+    <!-- End of Sidebar -->
+
+    <!-- Content Wrapper -->
+    <div id="content-wrapper" class="d-flex flex-column">
+
+        <!-- Main Content -->
+        <div id="content">
+
+            <!-- Topbar -->
+
+
+            <!-- End of Topbar -->
+
+            <!-- Begin Page Content -->
+            <div class="container-fluid">
+
+                <!-- Page Heading -->
+                <div class="d-sm-flex align-items-center justify-content-between mb-4">
+                    <h1 class="h3 mb-0 text-gray-800">Dashboard</h1>
+                    <a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="fas fa-download fa-sm text-white-50"></i> Generate Report</a>
+                </div>
+
+
+                <!-- Content Row -->
+
+                <div class="row">
+
+                    <!-- Area Chart -->
+                    <div class="col-xl-5 col-lg-7">
+                        <div class="card shadow mb-4">
+                            <!-- Card Header - Dropdown -->
+                            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
+                                <h6 class="m-0 font-weight-bold text-primary">Audio List</h6>
+
+                            </div>
+                            <!-- Card Body -->
+                            <div class="card-body">
+                                <div class="card-body">
+                                    <!--                  <div class="chart-pie pt-4 pb-2">-->
+                                    <table class="table table-striped">
+                                        <thead>
+                                        <tr>
+                                            <th>Audio Name</th>
+                                            <th>Duration</th>
+                                        </tr>
+                                        </thead>
+
+                                        <tbody>
+<!--                                        {% for video in Videos %}-->
+                                        <tr>
+<!--                                            <td>{{video.name}}</td>-->
+<!--                                            <td>{{video.duration}}</td>-->
+                                        </tr>
+<!--                                        {% endfor %}-->
+                                        </tbody>
+                                    </table>
+                                    <!--                  </div>-->
+                                    <!--this is a temporary button -->
+                                    <div class="float-right m-3">
+                                        <button type="button" class="btn btn-danger" id="temp_btn">Temp</button>
+                                    </div>
+                                </div>
+
+
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Video List -->
+                    <div class="col-xl-6 col-lg-5">
+                        <div class="card shadow mb-4">
+                            <!-- Card Header - Dropdown -->
+                            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
+                                <h6 class="m-0 font-weight-bold text-primary">Video List</h6>
+
+                            </div>
+                            <!-- Card Body -->
+                            <div class="card-body">
+                                <div class="chart-pie pt-4 pb-2">
+                                    <table class="table table-striped">
+                                        <thead>
+                                        <tr>
+                                            <th>Video Name</th>
+                                            <th>Duration</th>
+                                        </tr>
+                                        </thead>
+
+                                        <tbody>
+                                        {% for video in Videos %}
+                                        <tr>
+                                            <td>{{video.name}}</td>
+                                            <td>{{video.duration}}</td>
+                                            <td class="btn_class">
+                                                <button type="button" class="btn btn-success calc" id='{{video.name}}'>Calculate</button>
+                                            </td>
+                                        </tr>
+                                        {% endfor %}
+                                        </tbody>
+                                    </table>
+                                </div>
+
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Content Row -->
+                <div class="row">
+
+                    <!-- Content Column -->
+                    <div class="col-lg-6 mb-4">
+
+                        <!-- Project Card Example -->
+                        <div class="card shadow mb-4">
+                            <div class="card-header py-3">
+                                <h6 class="m-0 font-weight-bold text-primary">Audio Summary</h6>
+                            </div>
+                            <div class="card-body">
+                               <div class="text-center" id="no_content_audio_message">
+                                    <span class="font-italic">No audio content to be displayed</span>
+                                </div>
+                            </div>
+
+                            <!--loader -->
+                            <div class="text-center" id="audio_loader" hidden>
+                                <img src="{% static 'FirstApp/images/ajax-loader.gif' %}" alt="">
+
+                            </div>
+
+                            <div class="text-center" id="audio_summary_details" hidden>
+                                <table class="table table-borderless">
+                                    <thead>
+                                        <tr>
+                                            <th>Criteria</th>
+                                            <th>Value</th>
+                                        </tr>
+                                    </thead>
+                                    <!-- table body-->
+                                    <tbody>
+                                        <tr>
+                                            <td>No of Total words</td>
+                                            <td id="num_of_words"></td>
+                                        </tr>
+                                        <tr>
+                                            <td>No of extraneous words</td>
+                                            <td id="lexical_count"></td>
+                                        </tr>
+                                        <tr>
+                                            <td>No of Non-lexical words</td>
+                                            <td id="non_lexical_count"></td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                                <!--button -->
+                                <div class="float-right">
+                                    <button type="button" class="btn btn-outline-primary m-3" id="summary_btn">View More</button>
+                                </div>
+                            </div>
+
+                        </div>
+
+                    </div>
+
+                    <div class="col-lg-6 mb-4">
+                        {% load static %}
+
+                        <!-- Illustrations -->
+                        <div class="card shadow mb-4">
+                            <div class="card-header py-3">
+                                <h6 class="m-0 font-weight-bold text-primary">Video Summary</h6>
+                            </div>
+                            <div class="card-body">
+                                <div class="text-center" id="no_content_message">
+                                    <span class="font-italic">No content to be displayed</span>
+                                </div>
+                                
+                                <!--loader -->
+                                <div class="text-center" id="loader" hidden>
+<!--                                    <img src="{% static 'FirstApp/images/ajax-loader.gif' %}" alt="">-->
+                                    <img src="{% static 'FirstApp/images/ajax-loader.gif' %}" alt="">
+
+                                </div>
+
+
+                                <!--progress -->
+                                <div id="progress_bars" hidden>
+
+                                    <h4 class="small font-weight-bold">Sitting <span class="float-right"
+                                                                                     id="sitting_span">20%</span></h4>
+                                    <div class="progress mb-4">
+                                        <div class="progress-bar bg-danger" id="sitting_val" role="progressbar"
+                                             style="width: 20%" aria-valuenow="20" aria-valuemin="0"
+                                             aria-valuemax="100"></div>
+                                    </div>
+                                    <h4 class="small font-weight-bold">Standing <span class="float-right"
+                                                                                      id="standing_span">40%</span></h4>
+                                    <div class="progress mb-4">
+                                        <div class="progress-bar bg-warning" id="standing_val" role="progressbar"
+                                             style="width: 40%" aria-valuenow="40" aria-valuemin="0"
+                                             aria-valuemax="100"></div>
+                                    </div>
+                                    <h4 class="small font-weight-bold">Walking<span class="float-right"
+                                                                                    id="walking_span">60%</span></h4>
+                                    <div class="progress mb-4">
+                                        <div class="progress-bar" id="walking_val" role="progressbar" style="width: 60%"
+                                             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+
+                                </div>
+                                
+                            </div>
+                        </div>
+
+                        <!-- Approach -->
+<!--                        <div class="card shadow mb-4">-->
+<!--                            <div class="card-header py-3">-->
+<!--                                <h6 class="m-0 font-weight-bold text-primary">Development Approach</h6>-->
+<!--                            </div>-->
+<!--                            <div class="card-body">-->
+<!--&lt;!&ndash;                                <p>SB Admin 2 makes extensive use of Bootstrap 4 utility classes in order to reduce CSS bloat and poor page performance. Custom CSS classes are used to create custom components and custom utility classes.</p>&ndash;&gt;-->
+<!--&lt;!&ndash;                                <p class="mb-0">Before working with this theme, you should become familiar with the Bootstrap framework, especially the utility classes.</p>&ndash;&gt;-->
+<!--                            </div>-->
+<!--                        </div>-->
+
+                    </div>
+                </div>
+
+            </div>
+            <!-- /.container-fluid -->
+
+        </div>
+        <!-- End of Main Content -->
+
+        <!-- Footer -->
+        <footer class="sticky-footer bg-white">
+            <div class="container my-auto">
+                <div class="copyright text-center my-auto">
+                    <span>Copyright &copy; Your Website 2019</span>
+                </div>
+            </div>
+        </footer>
+        <!-- End of Footer -->
+
+    </div>
+    <!-- End of Content Wrapper -->
+
+</div>
+<!-- End of Page Wrapper -->
+
+<!-- Scroll to Top Button-->
+<a class="scroll-to-top rounded" href="#page-top">
+    <i class="fas fa-angle-up"></i>
+</a>
+
+<!-- Logout Modal-->
+<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
+                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">×</span>
+                </button>
+            </div>
+            <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
+            <div class="modal-footer">
+                <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
+                <a class="btn btn-primary" href="login.html">Logout</a>
+            </div>
+        </div>
+    </div>
+</div>
+
+{% load static  %}
+
+
+<!-- Core plugin JavaScript-->
+<script src="{% static 'FirstApp/vendor/jquery-easing/jquery.easing.min.js' %}"></script>
+
+<!-- Custom scripts for all pages-->
+<script src="{% static 'FirstApp/js/sb-admin-2.min.js' %}"></script>
+
+<!-- Page level plugins -->
+<script src="{% static 'FirstApp/vendor/chart.js/Chart.min.js' %}"></script>
+
+<!-- Page level custom scripts -->
+<script src="{% static 'FirstApp/js/demo/chart-area-demo.js' %}"></script>
+<script src="{% static 'FirstApp/js/demo/chart-pie-demo.js' %}"></script>
+
+</body>
+
+</html>

MonitorLecturerApp/templates/MonitorLecturerApp/lecVideo.html

+{% extends 'MonitorLecturerApp/template.html' %}
+<!DOCTYPE html>
+<html lang="en">
+<body id="page-top">
+
+{% block 'javascript' %}
+{% load static %}
+<!-- Bootstrap core JavaScript-->
+<script src="{% static 'FirstApp/vendor/jquery/jquery.min.js'  %}"></script>
+<script src="{% static 'FirstApp/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
+
+     <script type="text/javascript">
+        $(document).ready(function () {
+            $('.calc').click(function () {
+                let video_name = $(this).attr('id');
+
+                $('#loader').attr('hidden', false);
+
+                //hide the previous progress bars
+                $('#progress_bars').attr('hidden', true);
+
+                // alert('hello');
+
+                $('#no_content_message').attr('hidden', true);
+
+                //fetching data from the API
+                fetch('http://127.0.0.1:8000/lecturer/activities/?video_name=' + video_name)
+                .then((res) => res.json())
+                .then((out) => assignPerct(out.response))
+                .catch((error) => alert('error ' + error))
+            });
+
+
+            //to assign percentage values
+            function assignPerct(percentages) {
+                $('#no_content_message').attr('hidden', true);
+                $('#progress_bars').attr('hidden', false);
+                $('#loader').attr('hidden', true);
+
+                let sitting = Math.round(percentages.sitting_perct);
+                let standing = Math.round(percentages.standing_perct);
+                let walking = Math.round(percentages.walking_perct);
+
+                $('#sitting_val').width(sitting+'%');
+                $('#standing_val').width(standing+'%');
+                $('#walking_val').width(walking+'%');
+
+                $('#sitting_span').text(sitting + '%');
+                $('#standing_span').text(standing + '%');
+                $('#walking_span').text(walking + '%');
+
+
+            }
+
+        });
+    </script>
+{% endblock %}
+
+<!-- Page Wrapper -->
+  <div id="wrapper">
+    <!-- Sidebar -->
+
+    <!-- Content Wrapper -->
+    <div id="content-wrapper" class="d-flex flex-column">
+
+      <!-- Main Content -->
+      <div id="content">
+
+        <!-- Begin Page Content -->
+        {% block 'container-fluid' %}
+        <div class="container-fluid">
+          {% load static %}
+          <!-- Page Heading -->
+
+          <div class="d-sm-flex align-items-center justify-content-between mb-4">
+            <h1 class="h3 mb-0 text-gray-800">{{video_name}}</h1>
+            <a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="fas fa-download fa-sm text-white-50"></i> Generate Report</a>
+          </div>
+
+<!--          &lt;!&ndash; Content Row &ndash;&gt;-->
+          <div class="row">
+
+            <!-- Earnings (Monthly) Card Example -->
+            <div class="col-xl-12 col-md-6 mb-4">
+              <div class="card border-left-primary shadow h-100 py-2">
+                <div class="card-body">
+                  <div class="row">
+                    <div class="col-3">
+                      <video width="500" height="300" controls>
+                        <source src="{% static '' %}FirstApp/lecturer_videos/{{video_name}}" type="video/mp4">
+                        Your browser does not support the video tag.
+                      </video>
+                    </div>
+
+                    <div class="col-3"></div>
+                    <!--progress bars-->
+<!--                    <div class="col-6">-->
+<!--                      <h4 class="small font-weight-bold">Anger-->
+<!--                        <span class="float-right">{{meta.angry_perct}}%</span></h4>-->
+<!--                      <div class="progress mb-4">-->
+<!--                        <div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>-->
+<!--                      </div>-->
+<!--                      <h4 class="small font-weight-bold">Happy-->
+<!--                        <span class="float-right">{{meta.happy_perct}}%</span></h4>-->
+<!--                      <div class="progress mb-4">-->
+<!--                        <div class="progress-bar bg-warning" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>-->
+<!--                      </div>-->
+<!--                      <h4 class="small font-weight-bold">Sadness-->
+<!--                        <span class="float-right">{{meta.sad_perct}}%</span></h4>-->
+<!--                      <div class="progress mb-4">-->
+<!--                        <div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>-->
+<!--                      </div>-->
+<!--                      <h4 class="small font-weight-bold">Surprise-->
+<!--                        <span class="float-right">{{meta.surprise_perct}}%</span></h4>-->
+<!--                      <div class="progress mb-4">-->
+<!--                        <div class="progress-bar bg-info" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>-->
+<!--                      </div>-->
+<!--                      <h4 class="small font-weight-bold">Neutral-->
+<!--                        <span class="float-right">{{meta.neutral_perct}}%</span></h4>-->
+<!--                      <div class="progress">-->
+<!--                        <div class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>-->
+<!--                      </div>-->
+
+<!--                      <div class="form-control">-->
+<!--                        <button type="button" id="test" data-target="#gif-body" data-toggle="modal">Test</button>-->
+<!--                      </div>-->
+
+<!--                    </div>-->
+
+                  </div>
+
+                </div>
+              </div>
+            </div>
+
+            <!-- Video List -->
+              <div class="col-xl-6 col-lg-5">
+                  <div class="card shadow mb-4">
+                      <!-- Card Header - Dropdown -->
+                      <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
+                          <h6 class="m-0 font-weight-bold text-primary">Video List</h6>
+
+                      </div>
+                      <!-- Card Body -->
+                      <div class="card-body">
+                          <div class="chart-pie pt-4 pb-2">
+                              <table class="table table-striped">
+                                  <thead>
+                                  <tr>
+                                      <th>Video Name</th>
+                                      <th>Duration</th>
+                                  </tr>
+                                  </thead>
+
+                                  <tbody>
+                                  {% for video in Videos %}
+                                  <tr>
+                                      <td>{{video.name}}</td>
+                                      <td>{{video.duration}}</td>
+                                      <td class="btn_class">
+                                          <button type="button" class="btn btn-success calc" id='{{video.name}}'>Calculate</button>
+                                      </td>
+                                  </tr>
+                                  {% endfor %}
+                                  </tbody>
+                              </table>
+                          </div>
+
+                      </div>
+                  </div>
+              </div>
+              <!--end of video list column -->
+
+              <!--video summary -->
+            <div class="col-lg-6">
+      <!-- Illustrations -->
+                <div class="card shadow mb-4">
+                    <div class="card-header py-3">
+                        <h6 class="m-0 font-weight-bold text-primary">Video Summary</h6>
+                    </div>
+                    <div class="card-body">
+                        <div class="text-center" id="no_content_message">
+                            <span class="font-italic">No content to be displayed</span>
+                        </div>
+
+                        <!--loader -->
+                        <div class="text-center" id="loader" hidden>
+<!--                                    <img src="{% static 'FirstApp/images/ajax-loader.gif' %}" alt="">-->
+                            <img src="{% static 'FirstApp/images/ajax-loader.gif' %}" alt="">
+
+                        </div>
+
+                        <!--progress -->
+                        <div id="progress_bars" hidden>
+
+                            <h4 class="small font-weight-bold">Sitting <span class="float-right" id="sitting_span">20%</span></h4>
+                            <div class="progress mb-4">
+                                <div class="progress-bar bg-danger" id="sitting_val" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
+                            </div>
+                            <h4 class="small font-weight-bold">Standing <span class="float-right" id="standing_span">40%</span></h4>
+                            <div class="progress mb-4">
+                                <div class="progress-bar bg-warning" id="standing_val" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
+                            </div>
+                            <h4 class="small font-weight-bold">Walking<span class="float-right" id="walking_span">60%</span></h4>
+                            <div class="progress mb-4">
+                                <div class="progress-bar" id="walking_val" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
+                            </div>
+
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+
+            <!--end of video summary column -->
+
+          </div>
+
+        </div>
+        {% endblock %}
+        <!-- End of container-fluid -->
+
+      </div>
+      <!-- End of Main Content -->
+
+    </div>
+    <!-- End of Content Wrapper -->
+
+  </div>
+
+  {% block 'modal' %}
+    <div class="modal fade" id="gif-body" role="dialog" aria-labelledby="gif-body">
+      <div class="modal-dialog modal-lg" style="max-width: 1600px; max-height: 800px">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h2 class="modal-title">Processing....</h2>
+            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">×</span>
+            </button>
+          </div>
+
+          <div class="modal-body text-center">
+            <img src="{% static 'FirstApp/images/ajax-loader.gif' %}" width="200" height="500" alt="This is a GIF">
+            <h5>This might take few seconds...</h5>
+          </div>
+        </div>
+      </div>
+   </div>
+  {% endblock %}
+
+</body>
+</html>
\ No newline at end of file

MonitorLecturerApp/templates/MonitorLecturerApp/login.html

+
+{% load static %}
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="">
+  <meta name="author" content="">
+
+  <title>SB Admin 2 - Login</title>
+
+  <!-- Custom fonts for this template-->
+  <link href="{% static 'startbootstrap-sb-admin-2-gh-pages/vendor/fontawesome-free/css/all.min.css' %}" rel="stylesheet" type="text/css">
+  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
+
+  <!-- Custom styles for this template-->
+  <link href="{% static 'startbootstrap-sb-admin-2-gh-pages/css/sb-admin-2.min.css' %}" rel="stylesheet">
+
+</head>
+
+<body class="bg-gradient-primary">
+
+  <div class="container">
+
+    <!-- Outer Row -->
+    <div class="row justify-content-center">
+
+      <div class="col-xl-10 col-lg-12 col-md-9">
+
+        <div class="card o-hidden border-0 shadow-lg my-5">
+          <div class="card-body p-0">
+            <!-- Nested Row within Card Body -->
+            <div class="row">
+              <div class="col-lg-6 d-none d-lg-block bg-login-image"></div>
+              <div class="col-lg-6">
+                <div class="p-5">
+                  <div class="text-center">
+                    <h1 class="h4 text-gray-900 mb-4">Welcome Back!</h1>
+                  </div>
+                  <form class="user">
+                    <div class="form-group">
+                      <input type="email" class="form-control form-control-user" id="exampleInputEmail" aria-describedby="emailHelp" placeholder="Enter Email Address...">
+                    </div>
+                    <div class="form-group">
+                      <input type="password" class="form-control form-control-user" id="exampleInputPassword" placeholder="Password">
+                    </div>
+                    <div class="form-group">
+                      <div class="custom-control custom-checkbox small">
+                        <input type="checkbox" class="custom-control-input" id="customCheck">
+                        <label class="custom-control-label" for="customCheck">Remember Me</label>
+                      </div>
+                    </div>
+                    <a href="index.html" class="btn btn-primary btn-user btn-block">
+                      Login
+                    </a>
+                    <hr>
+                    <a href="index.html" class="btn btn-google btn-user btn-block">
+                      <i class="fab fa-google fa-fw"></i> Login with Google
+                    </a>
+                    <a href="index.html" class="btn btn-facebook btn-user btn-block">
+                      <i class="fab fa-facebook-f fa-fw"></i> Login with Facebook
+                    </a>
+                  </form>
+                  <hr>
+                  <div class="text-center">
+                    <a class="small" href="forgot-password.html">Forgot Password?</a>
+                  </div>
+                  <div class="text-center">
+                    <a class="small" href="register.html">Create an Account!</a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+
+  </div>
+
+  <!-- Bootstrap core JavaScript-->
+  <script src="{% static 'startbootstrap-sb-admin-2-gh-pages/vendor/jquery/jquery.js' %}"></script>
+  <script src="{% static 'startbootstrap-sb-admin-2-gh-pages/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
+
+  <!-- Core plugin JavaScript-->
+  <script src="{% static 'startbootstrap-sb-admin-2-gh-pages/vendor/jquery-easing/jquery.easing.min.js' %}"></script>
+
+  <!-- Custom scripts for all pages-->
+  <script src="{% static 'startbootstrap-sb-admin-2-gh-pages/js/sb-admin-2.min.js' %}"></script>
+
+</body>
+
+</html>

MonitorLecturerApp/templates/MonitorLecturerApp/register.html

+
+{% load static %}
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="">
+  <meta name="author" content="">
+
+  <title>SB Admin 2 - Register</title>
+  {% load static %}
+  <link href="{% static 'startbootstrap-sb-admin-2-gh-pages/vendor/fontawesome-free/css/all.min.css' %}" rel="stylesheet" type="text/css">
+  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
+  <link href="{% static 'startbootstrap-sb-admin-2-gh-pages/css/sb-admin-2.min.css' %}" rel="stylesheet">
+
+</head>
+
+<body class="bg-gradient-primary">
+
+  <div class="container">
+
+    <div class="card o-hidden border-0 shadow-lg my-5">
+      <div class="card-body p-0">
+        <!-- Nested Row within Card Body -->
+        <div class="row">
+          <div class="col-lg-5 d-none d-lg-block bg-register-image"></div>
+          <div class="col-lg-7">
+            <div class="p-5">
+              <div class="text-center">
+                <h1 class="h4 text-gray-900 mb-4">Create an Account!</h1>
+              </div>
+              <form class="user">
+                <div class="form-group row">
+                  <div class="col-sm-6 mb-3 mb-sm-0">
+                    <input type="text" class="form-control form-control-user" id="exampleFirstName" placeholder="First Name">
+                  </div>
+                  <div class="col-sm-6">
+                    <input type="text" class="form-control form-control-user" id="exampleLastName" placeholder="Last Name">
+                  </div>
+                </div>
+                <div class="form-group">
+                  <input type="email" class="form-control form-control-user" id="exampleInputEmail" placeholder="Email Address">
+                </div>
+                <div class="form-group row">
+                  <div class="col-sm-6 mb-3 mb-sm-0">
+                    <input type="password" class="form-control form-control-user" id="exampleInputPassword" placeholder="Password">
+                  </div>
+                  <div class="col-sm-6">
+                    <input type="password" class="form-control form-control-user" id="exampleRepeatPassword" placeholder="Repeat Password">
+                  </div>
+                </div>
+                <a href="login.html" class="btn btn-primary btn-user btn-block">
+                  Register Account
+                </a>
+                <hr>
+                <a href="index.html" class="btn btn-google btn-user btn-block">
+                  <i class="fab fa-google fa-fw"></i> Register with Google
+                </a>
+                <a href="index.html" class="btn btn-facebook btn-user btn-block">
+                  <i class="fab fa-facebook-f fa-fw"></i> Register with Facebook
+                </a>
+              </form>
+              <hr>
+              <div class="text-center">
+                <a class="small" href="forgot-password.html">Forgot Password?</a>
+              </div>
+              <div class="text-center">
+                <a class="small" href="login.html">Already have an account? Login!</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+  <!-- Bootstrap core JavaScript-->
+  <script src="{% static 'startbootstrap-sb-admin-2-gh-pages/vendor/jquery/jquery.js' %}"></script>
+  <script src="{% static 'startbootstrap-sb-admin-2-gh-pages/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
+
+  <!-- Core plugin JavaScript-->
+  <script src="{% static 'startbootstrap-sb-admin-2-gh-pages/vendor/jquery-easing/jquery.easing.min.js' %}"></script>
+
+  <!-- Custom scripts for all pages-->
+  <script src="{% static 'startbootstrap-sb-admin-2-gh-pages/js/sb-admin-2.min.js' %}"></script>
+
+</body>
+
+</html>

MonitorLecturerApp/templates/MonitorLecturerApp/template.html

+<!DOCTYPE html>
+<html lang="en">
+{% block head %}
+<head>
+    <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="">
+  <meta name="author" content="">
+  <title>SLPES</title>
+  {% load static %}
+    <link rel="shortcut icon" href="{% static 'FirstApp/images/favicon.ico' %}" type="image/x-icon" />
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+    <link rel="stylesheet" href="{% static 'FirstApp/css/sb-admin-2.min.css' %}">
+
+    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
+    <link rel="stylesheet" href="{% static 'FirstApp/css/all.min.css' %}">
+
+</head>
+{% endblock %}
+
+<body id="page-top">
+    <!-- Page Wrapper -->
+
+    {% block 'javascript' %}
+    {% load static %}
+    <script type="text/javascript" src="{% static 'MonitorLecturerApp/vendor/jquery/jquery.js' %}"></script>
+    <script type="text/javascript">
+      $(document).ready(function () {
+        // $('#test').click(function () {
+        //   alert('Ishan');
+        //
+        // });
+    });
+
+    </script>
+    {% endblock %}
+  <div id="wrapper">
+    <!-- Sidebar -->
+    <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
+
+        <!-- Sidebar - Brand -->
+        <a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
+            <div class="sidebar-brand-icon rotate-n-15">
+                <i class="fas fa-laugh-wink"></i>
+            </div>
+            <div class="sidebar-brand-text mx-3">SB Admin <sup>2</sup></div>
+        </a>
+
+        <!-- Divider -->
+        <hr class="sidebar-divider my-0">
+
+        <!-- Nav Item - Dashboard -->
+        <li class="nav-item active">
+            <a class="nav-link" href="/lecturer">
+                <i class="fas fa-fw fa-tachometer-alt"></i>
+                <span>Dashboard</span></a>
+        </li>
+
+
+
+        <!-- Divider -->
+        <hr class="sidebar-divider">
+
+        <!-- Heading -->
+        <div class="sidebar-heading">
+
+        </div>
+
+        <!-- Nav Item - Pages Collapse Menu -->
+        <li class="nav-item">
+            <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages">
+                <i class="fas fa-fw fa-folder"></i>
+                <span>Pages</span>
+            </a>
+            <div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
+                <div class="bg-white py-2 collapse-inner rounded">
+                    <a class="collapse-item" href="/lecturer">Dashboard</a>
+                    <a class="collapse-item" href="/lecturer/lecture-video">Video Page</a>
+
+                </div>
+            </div>
+        </li>
+
+
+        <!-- Divider -->
+        <hr class="sidebar-divider d-none d-md-block">
+
+        <!-- Sidebar Toggler (Sidebar) -->
+        <div class="text-center d-none d-md-inline">
+            <button class="rounded-circle border-0" id="sidebarToggle"></button>
+        </div>
+
+    </ul>
+    <!-- End of Sidebar -->
+
+    <div id="content-wrapper" class="d-flex flex-column">
+
+      <!-- Main Content -->
+      <div id="content">
+
+        <!-- Topbar -->
+        <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
+
+          <!-- Sidebar Toggle (Topbar) -->
+          <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
+            <i class="fa fa-bars"></i>
+          </button>
+
+          <!-- Topbar Search -->
+          <form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
+            <div class="input-group">
+              <input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
+              <div class="input-group-append">
+                <button class="btn btn-primary" type="button">
+                  <i class="fas fa-search fa-sm"></i>
+                </button>
+              </div>
+            </div>
+          </form>
+
+          <!-- Topbar Navbar -->
+          <ul class="navbar-nav ml-auto">
+
+            <!-- Nav Item - Search Dropdown (Visible Only XS) -->
+            <li class="nav-item dropdown no-arrow d-sm-none">
+              <a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="fas fa-search fa-fw"></i>
+              </a>
+              <!-- Dropdown - Messages -->
+              <div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in" aria-labelledby="searchDropdown">
+                <form class="form-inline mr-auto w-100 navbar-search">
+                  <div class="input-group">
+                    <input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
+                    <div class="input-group-append">
+                      <button class="btn btn-primary" type="button">
+                        <i class="fas fa-search fa-sm"></i>
+                      </button>
+                    </div>
+                  </div>
+                </form>
+              </div>
+            </li>
+
+            <!-- Nav Item - Alerts -->
+            <li class="nav-item dropdown no-arrow mx-1">
+              <a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="fas fa-bell fa-fw"></i>
+                <!-- Counter - Alerts -->
+                <span class="badge badge-danger badge-counter">3+</span>
+              </a>
+              <!-- Dropdown - Alerts -->
+              <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="alertsDropdown">
+                <h6 class="dropdown-header">
+                  Alerts Center
+                </h6>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="mr-3">
+                    <div class="icon-circle bg-primary">
+                      <i class="fas fa-file-alt text-white"></i>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="small text-gray-500">December 12, 2019</div>
+                    <span class="font-weight-bold">A new monthly report is ready to download!</span>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="mr-3">
+                    <div class="icon-circle bg-success">
+                      <i class="fas fa-donate text-white"></i>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="small text-gray-500">December 7, 2019</div>
+                    $290.29 has been deposited into your account!
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="mr-3">
+                    <div class="icon-circle bg-warning">
+                      <i class="fas fa-exclamation-triangle text-white"></i>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="small text-gray-500">December 2, 2019</div>
+                    Spending Alert: We've noticed unusually high spending for your account.
+                  </div>
+                </a>
+                <a class="dropdown-item text-center small text-gray-500" href="#">Show All Alerts</a>
+              </div>
+            </li>
+
+            <!-- Nav Item - Messages -->
+            <li class="nav-item dropdown no-arrow mx-1">
+              <a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="fas fa-envelope fa-fw"></i>
+                <!-- Counter - Messages -->
+                <span class="badge badge-danger badge-counter">7</span>
+              </a>
+              <!-- Dropdown - Messages -->
+              <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="messagesDropdown">
+                <h6 class="dropdown-header">
+                  Message Center
+                </h6>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/fn_BT9fwg_E/60x60" alt="">
+                    <div class="status-indicator bg-success"></div>
+                  </div>
+                  <div class="font-weight-bold">
+                    <div class="text-truncate">Hi there! I am wondering if you can help me with a problem I've been having.</div>
+                    <div class="small text-gray-500">Emily Fowler · 58m</div>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/AU4VPcFN4LE/60x60" alt="">
+                    <div class="status-indicator"></div>
+                  </div>
+                  <div>
+                    <div class="text-truncate">I have the photos that you ordered last month, how would you like them sent to you?</div>
+                    <div class="small text-gray-500">Jae Chun · 1d</div>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/CS2uCrpNzJY/60x60" alt="">
+                    <div class="status-indicator bg-warning"></div>
+                  </div>
+                  <div>
+                    <div class="text-truncate">Last month's report looks great, I am very happy with the progress so far, keep up the good work!</div>
+                    <div class="small text-gray-500">Morgan Alvarez · 2d</div>
+                  </div>
+                </a>
+                <a class="dropdown-item d-flex align-items-center" href="#">
+                  <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" src="https://source.unsplash.com/Mv9hjnEUHR4/60x60" alt="">
+                    <div class="status-indicator bg-success"></div>
+                  </div>
+                  <div>
+                    <div class="text-truncate">Am I a good boy? The reason I ask is because someone told me that people say this to all dogs, even if they aren't good...</div>
+                    <div class="small text-gray-500">Chicken the Dog · 2w</div>
+                  </div>
+                </a>
+                <a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>
+              </div>
+            </li>
+
+            <div class="topbar-divider d-none d-sm-block"></div>
+
+            <!-- Nav Item - User Information -->
+            <li class="nav-item dropdown no-arrow">
+              <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <span class="mr-2 d-none d-lg-inline text-gray-600 small">Valerie Luna</span>
+                <img class="img-profile rounded-circle" src="https://source.unsplash.com/QAB-WJcbgJk/60x60">
+              </a>
+              <!-- Dropdown - User Information -->
+              <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
+                <a class="dropdown-item" href="#">
+                  <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Profile
+                </a>
+                <a class="dropdown-item" href="#">
+                  <i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Settings
+                </a>
+                <a class="dropdown-item" href="#">
+                  <i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Activity Log
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
+                  <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
+                  Logout
+                </a>
+              </div>
+            </li>
+
+          </ul>
+
+        </nav>
+        <!-- End of Topbar -->
+
+        {% block 'container-fluid' %}
+          {% load static %}
+        {% endblock %}
+      </div>
+
+      {% block 'footer' %}
+      <footer class="sticky-footer bg-white">
+        <div class="container my-auto">
+          <div class="copyright text-center my-auto">
+            <span>Copyright &copy; Student and Lecturer Performance Enhancement System 2019</span>
+          </div>
+        </div>
+      </footer>
+      {% endblock %}
+    </div>
+  </div>
+
+  {% block 'modal' %}
+    {% load static %}
+<!--    <a class="scroll-to-top rounded" href="#page-top">-->
+<!--      <i class="fas fa-angle-up"></i>-->
+<!--    </a>-->
+
+<!--  &lt;!&ndash; Logout Modal&ndash;&gt;-->
+<!--  <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">-->
+<!--    <div class="modal-dialog" role="document">-->
+<!--      <div class="modal-content">-->
+<!--        <div class="modal-header">-->
+<!--          <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>-->
+<!--          <button class="close" type="button" data-dismiss="modal" aria-label="Close">-->
+<!--            <span aria-hidden="true">×</span>-->
+<!--          </button>-->
+<!--        </div>-->
+<!--        <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>-->
+<!--        <div class="modal-footer">-->
+<!--          <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>-->
+<!--          <a class="btn btn-primary" href="/login">Logout</a>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--    </div>-->
+<!--  </div>-->
+
+  {% endblock %}
+
+  {% block 'scripts' %}
+    {% load static %}
+    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
+
+    <script src="{% static 'FirstApp/vendor/jquery/jquery.js' %}"></script>
+    <script src="{% static 'FirstApp/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
+
+    <!-- Core plugin JavaScript-->
+    <script src="{% static 'FirstApp/vendor/jquery-easing/jquery.easing.min.js' %}"></script>
+
+    <!-- Custom scripts for all pages-->
+    <script src="{% static 'FirstApp/js/sb-admin-2.min.js' %}"></script>
+
+    <!-- Page level plugins -->
+    <script src="{% static 'FirstApp/vendor/chart.js/Chart.min.js' %}"></script>
+
+    <!-- Page level custom scripts -->
+    <script src="{% static 'FirstApp/js/demo/chart-area-demo.js' %}"></script>
+    <script src="{% static 'FirstApp/js/demo/chart-pie-demo.js' %}"></script>
+  {% endblock %}
+
+  </body>
+</html>
\ No newline at end of file

MonitorLecturerApp/templates/MonitorLecturerApp/video01.html

+{% extends 'MonitorLecturerApp/template.html' %}
+<!DOCTYPE html>
+<html lang="en">
+<body id="page-top">
+    <!-- Page Wrapper -->
+
+  <div id="wrapper">
+    <!-- Sidebar -->
+
+    <!-- Content Wrapper -->
+    <div id="content-wrapper" class="d-flex flex-column">
+
+      <!-- Main Content -->
+      <div id="content">
+
+        <!-- Begin Page Content -->
+        {% block 'container-fluid' %}
+        <div class="container-fluid">
+          {% load static %}
+          <!-- Page Heading -->
+
+          <div class="d-sm-flex align-items-center justify-content-between mb-4">
+            <h1 class="h3 mb-0 text-gray-800">{{video_name}}</h1>
+            <a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="fas fa-download fa-sm text-white-50"></i> Generate Report</a>
+          </div>
+
+<!--          &lt;!&ndash; Content Row &ndash;&gt;-->
+          <div class="row">
+
+            <!-- Earnings (Monthly) Card Example -->
+            <div class="col-xl-12 col-md-6 mb-4">
+              <div class="card border-left-primary shadow h-100 py-2">
+                <div class="card-body">
+                  <div class="row">
+                    <div class="col-3">
+                      <video width="500" height="300" controls>
+                        <source src="{% static '' %}FirstApp/videos/{{video_name}}" type="video/mp4">
+                        Your browser does not support the video tag.
+                      </video>
+                    </div>
+
+                    <div class="col-3"></div>
+                    <!--progress bars-->
+                    <div class="col-6">
+                      <h2 class="big font-weight-bold">Emotion Detection</h2>
+                      <h4 class="small font-weight-bold">Anger
+                        <span class="float-right">{{meta.angry_perct}}%</span></h4>
+                      <div class="progress mb-4">
+                        <div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
+                      </div>
+                      <h4 class="small font-weight-bold">Happy
+                        <span class="float-right">{{meta.happy_perct}}%</span></h4>
+                      <div class="progress mb-4">
+                        <div class="progress-bar bg-warning" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
+                      </div>
+                      <h4 class="small font-weight-bold">Sadness
+                        <span class="float-right">{{meta.sad_perct}}%</span></h4>
+                      <div class="progress mb-4">
+                        <div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
+                      </div>
+                      <h4 class="small font-weight-bold">Surprise
+                        <span class="float-right">{{meta.surprise_perct}}%</span></h4>
+                      <div class="progress mb-4">
+                        <div class="progress-bar bg-info" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
+                      </div>
+                      <h4 class="small font-weight-bold">Neutral
+                        <span class="float-right">{{meta.neutral_perct}}%</span></h4>
+                      <div class="progress">
+                        <div class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+                      </div>
+
+                      <div class="form-control">
+                        <button type="button" id="test" data-target="#gif-body" data-toggle="modal">Test</button>
+                      </div>
+
+                    </div>
+
+                  </div>
+
+                  <div class="row">
+                    <h2 class="big font-weight-bold">Eye Gaze Estimation</h2>
+                  </div>
+
+                  <div class="row">
+                    <div class="col-6">
+                      <div class="progress">
+                        <div class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+                      </div>
+                    </div>
+                  </div>
+
+                </div>
+              </div>
+            </div>
+
+          </div>
+
+        </div>
+        {% endblock %}
+        <!-- End of container-fluid -->
+
+      </div>
+      <!-- End of Main Content -->
+
+    </div>
+    <!-- End of Content Wrapper -->
+
+  </div>
+
+  {% block 'modal' %}
+    <div class="modal fade" id="gif-body" role="dialog" aria-labelledby="gif-body">
+      <div class="modal-dialog modal-lg" style="max-width: 1600px; max-height: 800px">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h2 class="modal-title">Processing....</h2>
+            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">×</span>
+            </button>
+          </div>
+
+          <div class="modal-body text-center">
+            <img src="{% static 'FirstApp/images/ajax-loader.gif' %}" width="200" height="500" alt="This is a GIF">
+            <h5>This might take few seconds...</h5>
+          </div>
+        </div>
+      </div>
+   </div>
+  {% endblock %}
+
+</body>
+</html>
\ No newline at end of file

MonitorLecturerApp/tests.py

+from django.test import TestCase
+
+# Create your tests here.

MonitorLecturerApp/urls.py

+from django.urls import path, re_path, include
+from . import views
+from rest_framework import routers
+from django.conf.urls import url
+from . import api
+
+router = routers.DefaultRouter()
+# router.register(r'^register', views.register)
+
+urlpatterns = [
+    path('', views.hello),
+    path('login', views.login),
+    path('register', views.register),
+    path('404', views.view404),
+    path('blank', views.blank),
+    path('buttons', views.buttons),
+    path('cards', views.cards),
+    path('charts', views.charts),
+    path('forgot-password', views.forget_password),
+    # path('webcam', views.webcam),
+    path('template', views.template),
+    path('base', views.base),
+    path('child', views.child),
+    path('lecture-video', views.lecVideo),
+    # path('Video', views.hello)
+
+    # API to retrieve activity recognition
+    url(r'^activities/$', api.ActivityRecognitionAPI.as_view()),
+
+    # API to retrieve audio analysis
+    url(r'^get-audio-analysis', api.GetLectureAudioAnalysis.as_view()),
+
+    path('api-auth/', include('rest_framework.urls', namespace='rest_framework'))
+
+]
\ No newline at end of file

MonitorLecturerApp/views.py

+from django.shortcuts import render
+from  django.http import HttpResponse
+from django.conf.urls import url
+from rest_framework import routers
+from rest_framework.views import APIView
+from rest_framework.response import Response
+from . import views
+from . models import RegisterTeacher, tVideo
+from . serializers import RegisterTeacherSerializer
+
+import cv2
+import os
+import datetime
+
+
+
+# Create your views here.
+
+BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+
+class TeachersList(APIView):
+
+    def get(self, request):
+        teachers = RegisterTeacher.objects.all()
+        serializer = RegisterTeacherSerializer(teachers, many=True)
+        return Response(serializer.data)
+
+    def post(self):
+        pass
+
+def index (request):
+    return render(request, 'MonitorLecturerApp/index.html')
+
+# def hello (request):
+#     return render(request, 'MonitorLecturerApp/beginer.html')
+
+def startup (request) :
+    return render(request, '')
+
+def hello(request):
+    # page = '<h1>THIS IS MY HOME</h1>' + '<h2> Hello Ishan</h2>' + '<button>Click Me</button>'
+    obj = {'Message': 'Student and Lecturer Performance Enhancement System'}
+    folder = os.path.join(BASE_DIR, os.path.join('static\\FirstApp\\lecturer_videos'))
+    videoPaths = [os.path.join(folder, file) for file in os.listdir(folder)]
+    videos = []
+    durations = []
+
+    for videoPath in videoPaths:
+        video = tVideo()
+        cap = cv2.VideoCapture(videoPath)
+        fps = cap.get(cv2.CAP_PROP_FPS)  # OpenCV2 version 2 used "CV_CAP_PROP_FPS"
+        frame_count = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
+        duration = int(frame_count / fps)
+        durations.append(duration)
+        videoName = os.path.basename(videoPath)
+        # videoName = videos.append(os.path.basename(videoPath))
+        durationObj = datetime.timedelta(seconds=duration)
+        video.path = videoPath
+        video.name = videoName
+        video.duration = str(durationObj)
+        videos.append(video)
+        print('Video Name: ', video.name)
+    context = {'object': obj, 'Videos': videos, 'durations': durations, 'template_name': 'MonitorLecturerApp/template.html'}
+    return render(request, 'MonitorLecturerApp/index.html', context)
+
+
+def view404(request):
+    return render(request, 'MonitorLecturerApp/404.html')
+
+def blank(request):
+    return render(request, 'MonitorLecturerApp/blank.html')
+
+def buttons(request):
+    return render(request, 'MonitorLecturerApp/buttons.html')
+
+def cards(request):
+    return render(request, 'MonitorLecturerApp/cards.html')
+
+def charts(request):
+    return render(request, 'MonitorLecturerApp/charts.html')
+
+def forget_password(request):
+    return render(request, 'MonitorLecturerApp/forgot-password.html')
+
+def login(request):
+    return render(request, 'MonitorLecturerApp/login.html')
+
+def register(request):
+    return render(request, 'MonitorLecturerApp/register.html')
+
+
+def template(request):
+    obj = {'Message': 'Student and Lecturer Performance Enhancement System'}
+    return render(request, 'MonitorLecturerApp/template.html', {'template_name': 'MonitorLecturerApp/template.html', 'object': obj})
+
+def base(request):
+    return render(request, 'MonitorLecturerApp/base.html')
+
+def child(request):
+    return render(request, 'MonitorLecturerApp/child.html', {'template_name': 'MonitorLecturerApp/base.html'})
+
+def lecVideo(request):
+    video = "poses.mp4"
+    obj = {'Message': 'Student and Lecturer Performance Enhancement System'}
+    folder = os.path.join(BASE_DIR, os.path.join('static\\FirstApp\\lecturer_videos'))
+    videoPaths = [os.path.join(folder, file) for file in os.listdir(folder)]
+    videos = []
+    durations = []
+
+    for videoPath in videoPaths:
+        video = tVideo()
+        cap = cv2.VideoCapture(videoPath)
+        fps = cap.get(cv2.CAP_PROP_FPS)  # OpenCV2 version 2 used "CV_CAP_PROP_FPS"
+        frame_count = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
+        duration = int(frame_count / fps)
+        durations.append(duration)
+        videoName = os.path.basename(videoPath)
+        # videoName = videos.append(os.path.basename(videoPath))
+        durationObj = datetime.timedelta(seconds=duration)
+        video.path = videoPath
+        video.name = videoName
+        video.duration = str(durationObj)
+        videos.append(video)
+        print('Video Name: ', video.name)
+
+        # audio =
+    context = {'object': obj, 'Videos': videos, 'durations': durations, 'template_name': 'MonitorLecturerApp/template.html', 'video_name': video}
+    return render(request, 'MonitorLecturerApp/lecVideo.html', context)
+
+    # for  audioPath in audiopaths:
+    #     audio = tAudio()
+

integrated_slpes/settings.py

+"""
+Django settings for integrated_slpes project.
+
+Generated by 'django-admin startproject' using Django 2.2.11.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/2.2/topics/settings/
+
+For the full list of settings and their values, see
+https://docs.djangoproject.com/en/2.2/ref/settings/
+"""
+
+import os
+
+# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
+BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+
+
+# Quick-start development settings - unsuitable for production
+# See https://docs.djangoproject.com/en/2.2/howto/deployment/checklist/
+
+# SECURITY WARNING: keep the secret key used in production secret!
+# SECRET_KEY = 'typgn#m(t#byxnp#ut@^gfqyh*1doa28gkqu(ap*k4s5!q&oyo'  #original one
+SECRET_KEY = '!3-gwi-1#5-4**85xb#z(t-8#ayc#*gguw4v4+fkax4037sp=)' # exported one
+
+# SECURITY WARNING: don't run with debug turned on in production!
+DEBUG = True
+
+ALLOWED_HOSTS = []
+
+
+# Application definition
+
+INSTALLED_APPS = [
+    'FirstApp.apps.FirstappConfig',
+    'AttendanceApp.apps.AttendanceappConfig',
+    'MonitorLecturerApp.apps.MonitorlecturerappConfig',
+    'django.contrib.admin',
+    'django.contrib.auth',
+    'django.contrib.contenttypes',
+    'django.contrib.sessions',
+    'django.contrib.messages',
+    'django.contrib.staticfiles',
+    'bootstrap4',
+    'rest_framework',
+    'os'
+]
+
+MIDDLEWARE = [
+    'django.middleware.security.SecurityMiddleware',
+    'django.contrib.sessions.middleware.SessionMiddleware',
+    'django.middleware.common.CommonMiddleware',
+    'django.middleware.csrf.CsrfViewMiddleware',
+    'django.contrib.auth.middleware.AuthenticationMiddleware',
+    'django.contrib.messages.middleware.MessageMiddleware',
+    'django.middleware.clickjacking.XFrameOptionsMiddleware',
+]
+
+ROOT_URLCONF = 'integrated_slpes.urls'
+
+TEMPLATES = [
+    {
+        'BACKEND': 'django.template.backends.django.DjangoTemplates',
+        'DIRS': [os.path.join(BASE_DIR, 'templates')]
+        ,
+        'APP_DIRS': True,
+        'OPTIONS': {
+            'context_processors': [
+                'django.template.context_processors.debug',
+                'django.template.context_processors.request',
+                'django.contrib.auth.context_processors.auth',
+                'django.contrib.messages.context_processors.messages',
+            ],
+        },
+    },
+]
+
+WSGI_APPLICATION = 'integrated_slpes.wsgi.application'
+
+
+# Database
+# https://docs.djangoproject.com/en/2.2/ref/settings/#databases
+
+DATABASES = {
+    'default': {
+        'ENGINE': 'djongo',
+        'NAME': 'SLPES',
+        'HOST': 'mongodb+srv://Ishan:Ishan123@afcluster-ev5ge.mongodb.net/SLPES?retryWrites=true&w=majority',
+        'USER': 'Ishan',
+        'PASSWORD': 'Ishan123'
+
+    }
+}
+
+
+# Password validation
+# https://docs.djangoproject.com/en/2.2/ref/settings/#auth-password-validators
+
+AUTH_PASSWORD_VALIDATORS = [
+    {
+        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
+    },
+]
+
+
+# Internationalization
+# https://docs.djangoproject.com/en/2.2/topics/i18n/
+
+LANGUAGE_CODE = 'en-us'
+
+TIME_ZONE = 'UTC'
+
+USE_I18N = True
+
+USE_L10N = True
+
+USE_TZ = True
+
+
+# Static files (CSS, JavaScript, Images)
+# https://docs.djangoproject.com/en/2.2/howto/static-files/
+
+STATIC_URL = '/static/'
+
+STATICFILES_DIRS = [
+    os.path.join(BASE_DIR, 'static'),
+]
+STATIC_ROOT = os.path.join(BASE_DIR, 'assets')
+
+
+# media files
+
+MEDIA_URL = '/media/'
+MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
+
+# REST FRAMEWORK
+REST_FRAMEWORK = {
+    'DEFAULT_PERMISSION_CLASSES': [
+        'rest_framework.permissions.IsAuthenticated',
+    ]
+}
\ No newline at end of file

integrated_slpes/urls.py

+"""integrated_slpes URL Configuration
+
+The `urlpatterns` list routes URLs to views. For more information please see:
+    https://docs.djangoproject.com/en/2.2/topics/http/urls/
+Examples:
+Function views
+    1. Add an import:  from my_app import views
+    2. Add a URL to urlpatterns:  path('', views.home, name='home')
+Class-based views
+    1. Add an import:  from other_app.views import Home
+    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
+Including another URLconf
+    1. Import the include() function: from django.urls import include, path
+    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
+"""
+from django.contrib import admin
+from django.urls import path, include
+from django.conf import settings
+from django.conf.urls.static import static
+
+urlpatterns = [
+    path('admin/', admin.site.urls),
+    path('', include('FirstApp.urls')),
+    path('attendance/', include('AttendanceApp.urls')),
+    path('lecturer/', include('MonitorLecturerApp.urls'))
+]

integrated_slpes/wsgi.py

+"""
+WSGI config for integrated_slpes project.
+
+It exposes the WSGI callable as a module-level variable named ``application``.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/2.2/howto/deployment/wsgi/
+"""
+
+import os
+
+from django.core.wsgi import get_wsgi_application
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'integrated_slpes.settings')
+
+application = get_wsgi_application()

manage.py

+#!/usr/bin/env python
+"""Django's command-line utility for administrative tasks."""
+import os
+import sys
+
+
+def main():
+    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'integrated_slpes.settings')
+    try:
+        from django.core.management import execute_from_command_line
+    except ImportError as exc:
+        raise ImportError(
+            "Couldn't import Django. Are you sure it's installed and "
+            "available on your PYTHONPATH environment variable? Did you "
+            "forget to activate a virtual environment?"
+        ) from exc
+    execute_from_command_line(sys.argv)
+
+
+if __name__ == '__main__':
+    main()

requirements.txt

+absl-py==0.9.0
+alabaster==0.7.12
+anaconda-client==1.7.2
+anaconda-navigator==1.9.7
+anaconda-project==0.8.3
+appdirs==1.4.4
+asgiref==3.2.3
+asn1crypto==1.0.1
+astor==0.8.1
+astroid==2.3.1
+astropy==3.2.1
+atomicwrites==1.3.0
+attrs==19.2.0
+Babel==2.7.0
+backcall==0.1.0
+backports.functools-lru-cache==1.5
+backports.os==0.1.1
+backports.shutil-get-terminal-size==1.0.0
+backports.tempfile==1.0
+backports.weakref==1.0.post1
+beautifulsoup4==4.8.0
+bitarray==1.0.1
+bkcharts==0.2
+bleach==3.1.0
+blurhash==1.1.4
+bokeh==1.3.4
+boost==0.1
+boto==2.49.0
+Bottleneck==1.2.1
+bson==0.5.8
+cachetools==4.0.0
+certifi==2019.9.11
+cffi==1.12.3
+chardet==3.0.4
+Click==7.0
+cloudpickle==1.2.2
+clyent==1.2.2
+cmake==3.16.3
+cmaker==0.0.6
+colorama==0.4.1
+colorthief==0.2.1
+comtypes==1.1.7
+conda==4.7.12
+conda-build==3.18.9
+conda-package-handling==1.6.0
+conda-verify==3.4.2
+contextlib2==0.6.0
+cryptography==2.7
+cycler==0.10.0
+Cython==0.29.13
+cytoolz==0.10.0
+dask==2.5.2
+dataclasses==0.6
+decorator==4.4.0
+defusedxml==0.6.0
+distlib==0.3.1
+distributed==2.5.2
+Django==2.2.11
+django-bootstrap4==1.1.1
+djangorestframework==3.11.0
+djongo==1.3.1
+dlib==19.19.0
+dnspython==1.16.0
+docutils==0.15.2
+entrypoints==0.3
+et-xmlfile==1.0.1
+face-recognition==1.2.3
+face-recognition-models==0.3.0
+fastcache==1.1.0
+filelock==3.0.12
+Flask==1.1.1
+fsspec==0.5.2
+future==0.17.1
+gast==0.2.2
+gevent==1.4.0
+glob2==0.7
+google-auth==1.11.2
+google-auth-oauthlib==0.4.1
+google-pasta==0.1.8
+graphviz==0.13.2
+greenlet==0.4.15
+grpcio==1.27.2
+h5py==2.9.0
+HeapDict==1.0.1
+html5lib==1.0.1
+idna==2.8
+imageio==2.6.0
+imagesize==1.1.0
+importlib-metadata==0.23
+imutils==0.5.3
+ipykernel==5.1.2
+ipython==7.8.0
+ipython-genutils==0.2.0
+ipywidgets==7.5.1
+isort==4.3.21
+itsdangerous==1.1.0
+jdcal==1.4.1
+jedi==0.15.1
+Jinja2==2.10.3
+joblib==0.13.2
+json5==0.8.5
+jsonschema==3.0.2
+jupyter==1.0.0
+jupyter-client==5.3.3
+jupyter-console==6.0.0
+jupyter-core==4.5.0
+jupyterlab==1.1.4
+jupyterlab-server==1.0.6
+Keras==2.3.1
+Keras-Applications==1.0.8
+Keras-Preprocessing==1.1.0
+keyring==18.0.0
+kiwisolver==1.1.0
+lazy-object-proxy==1.4.2
+libarchive-c==2.8
+llvmlite==0.29.0
+locket==0.2.0
+lxml==4.4.1
+Markdown==3.2.1
+MarkupSafe==1.1.1
+Mastodon.py==1.5.0
+matplotlib==3.1.1
+mccabe==0.6.1
+menuinst==1.4.16
+mistune==0.8.4
+mkl-fft==1.0.14
+mkl-random==1.1.0
+mkl-service==2.3.0
+mock==3.0.5
+more-itertools==7.2.0
+mpmath==1.1.0
+msgpack==0.6.1
+multipledispatch==0.6.0
+navigator-updater==0.2.1
+nbconvert==5.6.0
+nbformat==4.4.0
+networkx==2.3
+nltk==3.4.5
+nose==1.3.7
+notebook==6.0.1
+numba==0.45.1
+numexpr==2.7.0
+numpy==1.16.5
+numpydoc==0.9.1
+oauthlib==3.1.0
+olefile==0.46
+opencv-contrib-python==4.2.0.34
+opencv-python==4.1.2+contrib
+openpyxl==3.0.0
+opt-einsum==3.1.0
+packaging==19.2
+pandas==0.25.1
+pandocfilters==1.4.2
+parso==0.5.1
+partd==1.0.0
+path.py==12.0.1
+pathlib2==2.3.5
+patsy==0.5.1
+pep8==1.7.1
+pickleshare==0.7.5
+Pillow==6.2.0
+pkginfo==1.5.0.1
+pluggy==0.13.0
+ply==3.11
+posenet==0.0.3
+prometheus-client==0.7.1
+prompt-toolkit==2.0.10
+protobuf==3.11.3
+psutil==5.6.3
+PuLP==2.0
+py==1.8.0
+pyasn1==0.4.8
+pyasn1-modules==0.2.8
+pycodestyle==2.5.0
+pycosat==0.6.3
+pycparser==2.19
+pycrypto==2.6.1
+pycurl==7.43.0.3
+pydotplus==2.0.2
+pyflakes==2.1.1
+Pygments==2.4.2
+pylint==2.4.2
+pylops==1.9.0
+pymongo==3.10.1
+pyodbc==4.0.27
+pyOpenSSL==19.0.0
+pyparsing==2.4.2
+pyreadline==2.1
+pyrsistent==0.15.4
+PySocks==1.7.1
+pytest==5.2.1
+pytest-arraydiff==0.3
+pytest-astropy==0.5.0
+pytest-doctestplus==0.4.0
+pytest-openfiles==0.4.0
+pytest-remotedata==0.3.2
+python-dateutil==2.8.0
+python-magic==0.4.15
+pytz==2019.3
+PyWavelets==1.0.3
+pywin32==223
+pywinpty==0.5.5
+PyYAML==5.1.2
+pyzmq==18.1.0
+QtAwesome==0.6.0
+qtconsole==4.5.5
+QtPy==1.9.0
+requests==2.22.0
+requests-oauthlib==1.3.0
+rope==0.14.0
+rsa==4.0
+ruamel-yaml==0.15.46
+scikit-image==0.15.0
+scikit-learn==0.21.3
+scipy==1.4.1
+seaborn==0.9.0
+Send2Trash==1.5.0
+simplegeneric==0.8.1
+singledispatch==3.4.0.3
+six==1.14.0
+snowballstemmer==2.0.0
+sortedcollections==1.1.2
+sortedcontainers==2.1.0
+soupsieve==1.9.3
+Sphinx==2.2.0
+sphinxcontrib-applehelp==1.0.1
+sphinxcontrib-devhelp==1.0.1
+sphinxcontrib-htmlhelp==1.0.2
+sphinxcontrib-jsmath==1.0.1
+sphinxcontrib-qthelp==1.0.2
+sphinxcontrib-serializinghtml==1.1.3
+sphinxcontrib-websupport==1.1.2
+spyder==3.3.6
+spyder-kernels==0.5.2
+SQLAlchemy==1.3.9
+sqlparse==0.2.4
+statsmodels==0.10.1
+sympy==1.4
+tables==3.5.2
+tblib==1.4.0
+tensorboard==2.1.0
+tensorflow==2.1.0
+tensorflow-estimator==2.1.0
+termcolor==1.1.0
+terminado==0.8.2
+testpath==0.4.2
+tflearn==0.3.2
+toolz==0.10.0
+tornado==6.0.3
+tqdm==4.36.1
+traitlets==4.3.3
+unicodecsv==0.14.1
+urllib3==1.24.2
+virtualenv==20.0.25
+wcwidth==0.1.7
+webencodings==0.5.1
+Werkzeug==0.16.0
+widgetsnbextension==3.5.1
+win-inet-pton==1.1.0
+win-unicode-console==0.5
+wincertstore==0.2
+wrapt==1.11.2
+xlrd==1.2.0
+XlsxWriter==1.2.1
+xlwings==0.15.10
+xlwt==1.3.0
+zict==1.0.0
+zipp==0.6.0