Added specific class view

site/frontend/urls.py

@@ -35,4 +35,5 @@ urlpatterns = [
     path("create_user/", register_view, name="create_user"),
     path("", home_view, name="home"),
     path("classes", class_form_view, name="classroom_form"),
+    path("classes/<int:id>", classroom_view, name="class")
 ]

site/frontend/views.py

@@ -1,7 +1,7 @@
 from django.contrib import messages
 from django.contrib.auth.decorators import login_required
 from django.shortcuts import redirect, render
-
+from django.http import HttpResponseForbidden
 from api.models import *
 
 from .forms import *
@@ -58,3 +58,10 @@ def class_form_view(request):
         form = ClassroomForm
 
     return render(request, "frontend/classroomForm.html", {"form": form})
+
+
+def classroom_view(request, id):
+    classroom = Classroom.objects.get(id=id)
+    if classroom.student.user.pk != request.user.pk:
+        return HttpResponseForbidden('You do not have access to this class')
+    return render(request, "frontend/class.html", {'class': classroom})

site/templates/frontend/class.html

@@ -0,0 +1,32 @@
+{% extends 'frontend/index.html' %}
+{% load static %}
+
+{% block content %}
+<section class="mbr-section content4 cid-qxVpIJ8WtD" id="content4-na" data-rv-view="8245" style="min-height: 100vh;">
+
+
+    <div class="container">
+        <div class="media-container-row">
+            <div class="title col-12 col-md-8">
+                <h2 class="align-center pb-3 mbr-fonts-style display-2">
+                    Your Class: {{ class.name }}</h2>
+            </div>
+        </div>
+        <hr style="border-color: white;">
+        <br><br>
+        <div class="class_cont container class center centered m-10">
+            <h3>Teacher: {{ class.teacher }}</h3>
+        </div>
+    </div>
+</section>
+{% endblock content %}
+{% block head %}
+    <style>
+    .class{
+        color: white;
+    }
+    .class_cont {
+        text-align: center;
+    }
+    </style>
+{% endblock %}

site/templates/frontend/temp.html

@@ -21,10 +21,11 @@
                 <a class="btn btn-md btn-white-outline display-4"
                                  href="#">LEARN MORE</a>
             </div>
+            <br>
         </div>
+        <div class="media-container-column mbr-white col-md-12 m-t-10 p-t-10"><div class='icon-scroll'><div/></div>
     </div>
 
-
 </section>
 
 
@@ -36,19 +37,83 @@
             <div class="title col-12 col-md-8">
                 <h2 class="align-center pb-3 mbr-fonts-style display-2">
                     CLASSES</h2>
-
-
             </div>
         </div>
     </div>
-
+    <div class="container classes center centered m-10">
-    <div class="container">
+<hr>
+    <div class="m-b-10"></div>
         {% for user_class in classes %}
-            {{ user_class }}
+            <br>
+            <br>
+            <div class="class_cont">
+                <a href="/out/classes/{{ user_class.id }}"><h1>{{ user_class.name }}</h1></a>
+                <h3>{{ user_class.teacher }}; &emsp; Period: {{ user_class.period }}</h3>
+            </div>
         {% endfor %}
     </div>
+
+            <br>
+            <br>
+            <br>
 </section>
 {% endblock content %}
 
+{% block head %}
+    <style>
+    .classes{
+        color: white;
+    }
+    .class_cont {
+        text-align: center;
+    }
+    hr {
+        border-color: white;
+    }
+
+    .icon-scroll,
+    .icon-scroll:before {
+        position: absolute;
+        left: 50%;
+        top: 90%;
+    }
+
+    .icon-scroll {
+      width: 40px;
+      height: 70px;
+      margin-left: -20px;
+      top: 50%;
+      margin-top: -35px;
+      box-shadow: inset 0 0 0 1px #fff;
+      border-radius: 25px;
+    }
+
+    .icon-scroll:before {
+      content: '';
+      width: 8px;
+      height: 8px;
+      background: #fff;
+      margin-left: -4px;
+      top: 8px;
+      border-radius: 4px;
+      animation-duration: 1.5s;
+      animation-iteration-count: infinite;
+      animation-name: scroll;
+    }
+
+    @keyframes scroll {
+        0% {
+            opacity: 1;
+        }
+        100% {
+            opacity: 0;
+            transform: translateY(46px);
+        }
+    }
+
+
+    </style>
+{% endblock %}
+
 {% block js %}
 {% endblock js %}