Change in moderator dashboard templates

- Add paginator template for pagination
- Change moderator dashboard, edit profile and complete template

7 files changed, 323 insertions, 298 deletions

diff --git a/yaksh/templates/yaksh/complete.html b/yaksh/templates/yaksh/complete.html
index a3324a6..03dc4c1 100644
--- a/yaksh/templates/yaksh/complete.html
+++ b/yaksh/templates/yaksh/complete.html
@@ -1,19 +1,15 @@
 {% extends "base.html" %}
 
 {% block nav %}
-<div class="container-fluid yakshnav">
-  <nav class="navbar fixed-top navbar-expand-lg yakshheading yakshnav">
-    <div class="container">
-      <a class="navbar-brand">
-          <img src="{{ URL_ROOT }}/static/yaksh/images/yaksh_banner.png" alt="YAKSH">
-          </img>
-       </a>
-    </div><!-- /.container -->
-  </nav><!-- /.navbar -->
-</div>
+<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
+  <a class="navbar-brand" href="{{ URL_ROOT }}/exam/">
+    <img src="{{ URL_ROOT }}/static/yaksh/images/yaksh_banner.png" alt="YAKSH">
+  </a>
+</nav>
 {% endblock %}
 
 {% block content %}
+<br>
 {% if module_id and not paper.question_paper.quiz.is_trial %}
 <center>
     <div class="alert alert-info col-md-8 animated flash">
@@ -52,7 +48,12 @@
         </div>
         </center>
     {% endif %}
-	<center class="yakshwell container-fluid"><h5 class="yakshwell"><span class="alert alert-success animated flash">{{message}}</span></h5></center>
+    <br><br>
+	<center class="container-fluid">
+        <h5>
+            <span class="alert alert-success">{{message}}</span>
+        </h5>
+    </center>
     <center>
     <br>
     {% if module_id and not paper.question_paper.quiz.is_trial %}
@@ -68,7 +69,7 @@
             </a>
         {% endif %}
     {% else %}
-        <a href="{{URL_ROOT}}/exam/" id="home" class="btn btn-success"> Home </a>
+        <a href="{{URL_ROOT}}/exam/" id="home" class="btn btn-primary btn-lg"> Home </a>
     {% endif %}
     </center>
 {% endblock content %}
diff --git a/yaksh/templates/yaksh/editprofile.html b/yaksh/templates/yaksh/editprofile.html
index d654359..df6d328 100644
--- a/yaksh/templates/yaksh/editprofile.html
+++ b/yaksh/templates/yaksh/editprofile.html
@@ -1,13 +1,49 @@
 {% extends template  %}
-{% block pagetitle %} Please fill in the following details {% endblock %}
+{% block title %} Edit Profile {% endblock %}
 {% block main %}
-<form action="{{URL_ROOT}}/exam/editprofile/" method="post" >
-  {% csrf_token %}
-  <center>
-  <table class="table table-bordered table-responsive-sm">
-  {{ form.as_table }}
-  </table>
-  </center>
-  <button class="btn btn-primary pull-right" type="submit">Save Profile</button>
-</form>
+<br><br><br>
+<div class="container">
+    <center><h2> My Profile </h2></center>
+    <br>
+    <form action="{{URL_ROOT}}/exam/editprofile/" method="post" >
+      {% csrf_token %}
+      <center>
+        <div class="row justify-content-center form-group">
+        <div class="col-md-4 col-md-offset-4">
+            <form action="" method="post">
+                <fieldset>
+                    {% csrf_token %}
+                    <center>
+                        {% if form.errors %}
+                            {% for field in form %}
+                                {% for error in field.errors %}
+                                    <div class="alert alert-dismissible alert-danger">
+                                        <button type="button" class="close" data-dismiss="alert">&times;</button>
+                                        <strong>{{ error|escape }}</strong>
+                                    </div>
+                                {% endfor %}
+                            {% endfor %}
+                            {% for error in form.non_field_errors %}
+                                <div class="alert alert-dismissible alert-danger">
+                                    <button type="button" class="close" data-dismiss="alert">&times;</button>
+                                    <strong>{{ error|escape }}</strong>
+                                </div>
+                            {% endfor %}
+                        {% endif %}
+                        {% for field in form %}
+                            <td>{{ field }} <small>{{ field.help_text }}</small></td>
+                            <br>
+                        {% endfor %}
+                        <br>
+                        <br>
+                    </center>
+                    <button class="btn btn-success btn-lg" type="submit">Update</button>&nbsp;&nbsp;
+                    <a href="{{URL_ROOT}}/exam" class="btn btn-primary btn-lg">Cancel</a></center>
+                </fieldset>
+            </form>
+        </div>
+    </div>
+    </center>
+    </form>
+</div>
 {% endblock main %}
diff --git a/yaksh/templates/yaksh/login.html b/yaksh/templates/yaksh/login.html
index 4b3b222..c1477c7 100644
--- a/yaksh/templates/yaksh/login.html
+++ b/yaksh/templates/yaksh/login.html
@@ -1,124 +1,82 @@
 {% extends "base.html" %}
 
-
+{% block title %} Login {% endblock %}
 
 {% block nav %}
-<div class="container-fluid yakshnav">
-<nav class="navbar fixed-top navbar-expand-lg yakshheading yakshnav">
-  <div class="container">
-    <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#myNavbar" aria-controls="myNavbar" aria-expanded="false" aria-label="Toggle navigation">
-    <span class="navbar-toggler-icon" style="color: white"></span>
-    </button>
-    <a class="navbar-brand" href="{{ URL_ROOT }}/exam/">
-    <img src="{{ URL_ROOT }}/static/yaksh/images/yaksh_banner.png" alt="YAKSH" style="margin-top: -3px; margin-left:-15px">
-    </img>
-    </a>    
-    <div class="collapse navbar-collapse" id="myNavbar">
-        <ul class="nav nav-pills ml-auto">
-            <li><a href="#aboutus" class="nav-link">ABOUT US</a></li>
-            <li><a href="#contact" class="nav-link">CONTACT</a></li>
-        </ul>
-    </div>
-  </div>
+<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+  <a class="navbar-brand" href="{{ URL_ROOT }}/exam/">
+    <img src="{{ URL_ROOT }}/static/yaksh/images/yaksh_banner.png" alt="YAKSH">
+  </a>
 </nav>
-</div>
 {% endblock %}
 
 {% block content %}
-
-<div class="container yakshheading yakshwell text-center wow animated fadeIn">
- 
-    <span class="yakshred h3">2500+</span> Students in <span class="yakshred h3">350+</span> Institutions across <span class="yakshred h3">16+</span> states in India are using YAKSH
-    </br>
-</div>
+<center></center>
 <div class="container">
-    <div class="row yakshlabel text-center">
-        <p class="yakshred h4">Online Test Interface for conducting online programming quiz.</p>
-        <div class="col-md-7 text-left">            
-            <ul class="h5">
-                </br>
-                <li class="wow animated fadeInRight">Define fairly complicated programming problems and have users
-                solve the problem. </li>
-                </br>
-                <li class="wow animated fadeInRight" data-wow-delay="0.5s">Immediate verification of code solution. </li>
-                </br>
-                <li class="wow animated fadeInRight" data-wow-delay="1s">Supports pretty much arbitrary programming questions in Python, C, C++ and
-                simple Bash and uses "test cases" to test the implementations of the students.</li>
-                </br>
-                <li class="wow animated fadeInRight" data-wow-delay="1.5s">Supports simple multiple choice questions and File uploads.</li>
-                </br>
-                <li class="wow animated fadeInRight" data-wow-delay="2s">Since it runs on your Python, you could technically test any Python based library.</li>
-                </br>
-                <li class="wow animated fadeInRight" data-wow-delay="2.5s">Scales to over 500+ simultaneous users.</li>
-                </br>
-            </ul>           
-            
-        </div>
+    <div class="row justify-content-center">
+        <div class="col-md-6 col-md-offset-6">
+            <div class="card border-primary">
+                <div class="card-header">
+                    <h3>Log in to Your Account</h3>
+                </div>
+                <div class="card-body">
+                    <div class="form-group">
+                        <form action="" method="post">
+                        {% csrf_token %}
 
-        <div class="col-md-5">
-            <div class="yakshwell">
-                <div class="yakshwell">
-                    <a href="{{URL_ROOT}}/exam/register/" class="btn btn-outline-primary col-md-11 " >New User? SIGN UP</a>
+                        <center>
+                            <table class="table table-borderless">
+                            {% if form.errors %}
+                                {% for field in form %}
+                                    {% for error in field.errors %}
+                                        <div class="alert alert-dismissible alert-danger">
+                                            <button type="button" class="close" data-dismiss="alert">&times;</button>
+                                            <strong>{{ error|escape }}</strong>
+                                        </div>
+                                    {% endfor %}
+                                {% endfor %}
+                                {% for error in form.non_field_errors %}
+                                    <div class="alert alert-dismissible alert-danger">
+                                        <button type="button" class="close" data-dismiss="alert">&times;</button>
+                                        <strong>{{ error|escape }}</strong>
+                                    </div>
+                                {% endfor %}
+                            {% endif %}
+                            {{form.username}}
+                            <br>
+                            {{form.password}}
+                            </table>
+                        </center>
+                        <div class="row justify-content-center">
+                            <button class="btn btn-lg btn-success btn-block" type="submit" id="login-btn">Login</button>
+                            <a href="{{URL_ROOT}}/exam/register/" class="btn btn-lg btn-primary btn-block" id="signup-btn">
+                                NEW USER? SIGN UP
+                            </a>
+                            <a class="btn btn-lg btn-primary btn-block" href="{{URL_ROOT}}/exam/reset/forgotpassword/" id="forgot-btn">Forgot Password?</a>
+                        </div>
+                        <hr>
+                        <center><h1> OR </h1></center>
+                        Login with
+                        <a class="btn btn-social-icon btn-google" href="{% url 'social:begin' 'google-oauth2' %}">
+                            <span class="fa fa-google" style="font-size:32px;color:red" ></span>
+                        </a>
+                        <a class="btn btn-social-icon btn-facebook"  href="{% url 'social:begin' 'facebook' %}">
+                            <span class="fa fa-facebook-square" style="font-size:32px"></span>
+                        </a>
+                        </form>
+                        </br>
+                    </div>
                 </div>
-                <hr>
-        <form action="" method="post">
-        {% csrf_token %}
-          
-        <center><table class="table table-borderless yakshheading yakshgreen table-responsive-sm">
-        {{ form.as_table }}
-        </table></center>
-        <div class="row justify-content-center">
-        <button class="col-4 btn btn-success" type="submit">Login</button><span class="col-1"></span>
-        <a class="btn btn-primary col-4" href="{{URL_ROOT}}/exam/reset/forgotpassword/">Forgot Password?</a>
-        </div>
-        <hr>
-         Login with 
-        <a class="btn btn-social-icon btn-google" href="{% url 'social:begin' 'google-oauth2' %}">
-            <span class="fa fa-google" style="font-size:32px;color:red" ></span>
-        </a>
-        <a class="btn btn-social-icon btn-facebook"  href="{% url 'social:begin' 'facebook' %}">
-            <span class="fa fa-facebook-square" style="font-size:32px"></span>
-        </a>
-        </form>
-        </div>
-        </br>
-        <div class="yakshred h4">
-            Best platform you can find to learn</br> and to test your skills
-        </div>
+            </div>
         </div>
-        
     </div>
-
-    <div>
-        </br></br>
-        <h2 class="h4 yakshred" id="aboutus">About Us</h2>
-        <div class="yakshwell">
-        <h5><b>History</b></h5>
-
-        <p>At FOSSEE, Nishanth had implemented a nice django based app to test for multiple-choice questions. Prabhu Ramachandran was inspired by a programming contest that he saw at PyCon APAC 2011. Chris Boesch, who administered the contest, used a nice web application Singpath that he had built on top of GAE that basically checked your Python code, live. This made it fun and interesting.</p>
-        <p>Prabhu wanted an implementation that was not tied to GAE and hence wrote the initial cut of what is now 'Yaksh'. The idea being that anyone can use this to test students programming skills and not have to worry about grading their answers manually and instead do so on their machines.</p>
-        <p>The application has since been refactored and maintained by FOSSEE Developers.</p>
-
-        <h5><b>Contact</b></h5>
-        <p>For further information and support you can contact 
-        Python Team at FOSSEE: pythonsupport@fossee.in</p>
-
-        <h5><b>License</b></h5>
-        <p>This is distributed under the terms of the BSD license. Copyright information is at the bottom of this file.</p>
-
-        <h5><b>Authors</b></h5>
-        <p><a href="https://github.com/FOSSEE/online_test/graphs/contributors">FOSSEE Developers</a><br>
-        Copyright (c) 2011-{% now "Y" %} FOSSEE</p>
-         </div>
-    </div>
-
 </div>     
 {% endblock content %}
 
 
 {% block footer %}
   <!--footer-->   
-  <footer class="container-fluid yakshfooter text-center" id="contact">
+  <!-- <footer class="container-fluid yakshfooter text-center" id="contact">
        {% block info %}
        {% endblock %}
        Developed by FOSSEE team, IIT Bombay
@@ -126,13 +84,13 @@
        <nav class="nav nav-pills nav-fill col-lg-12"> 
 
             <li class="nav-item">
-                <a class = "btn btn-social-icon btn-github nav-link" href ="https://github.com/fossee/online_test"">Fork us at:
-                <span class="fa fa-github" style="font-size:20px;"></span>
+                <a class = "btn btn-social-icon btn-github nav-link" href ="https://github.com/fossee/online_test">
+                Fork us at: <span class="fa fa-github" style="font-size:20px;"></span>
                 </a>
             </li>
                 <li class="nav-item"><span class="nav-link"> Email : info@fossee.in</span></li>
-                <li class="nav-item"><a href="#" class="nav-link">FOSSEE website</a></li>
+                <li class="nav-item"><a href="https://fossee.in" class="nav-link">FOSSEE website</a></li>
             </nav>
-  </footer>
+  </footer> -->
   <!--footer end-->
 {% endblock %}
\ No newline at end of file
diff --git a/yaksh/templates/yaksh/moderator_dashboard.html b/yaksh/templates/yaksh/moderator_dashboard.html
index 503cc72..f6fd4de 100644
--- a/yaksh/templates/yaksh/moderator_dashboard.html
+++ b/yaksh/templates/yaksh/moderator_dashboard.html
@@ -1,112 +1,117 @@
 {% extends "manage.html" %}
 {% load custom_filters %}
-{% block pagetitle %} Moderator's Dashboard {% endblock pagetitle %}
+
+{% block title %} Moderartor Dashboard {% endblock %}
 
 {% block script %}
 <script language="JavaScript" type="text/javascript" src="{{ URL_ROOT }}/static/yaksh/js/moderator_dashboard.js"></script>
 {% endblock %}
 
 {% block content %}
-
-<center><h4 class="yakshgreen">List of quizzes! Click on the given links to have a look at answer papers for a quiz.</h4></center>
-<div class="row justify-content-center">
-<div class="col-md-10 ">
-  <div class="table-wrapper-2">
-<table class="table table-bordered table-responsive-sm">
-  <tr class="yakshlabel">
-    <th class="yakshred text-center"><i class="fa fa-book"></i> Courses</th>
-    <th class="yakshred text-center"><i class="fa fa-puzzle-piece"></i> Quizzes</th>
-  </tr>
-    {% for course in courses %}
-        <tr>
-            <td>
-                <a href="{{URL_ROOT}}/exam/manage/course_detail/{{course.id}}" class="btn btn-outline-success">
-                <i class="fa fa-caret-right"></i> {{ course }}
-                </a>
-            </td>
-            <td>
-                {% get_course_details course as course_details %}
-                {% if course_details %}
-                <table class="table table-bordered table-responsive-sm">
-                <tr class="yakshlight">
-                  <th>Quiz</th>
-                  <th>Taken By</th>
-                  <th>No. of users Passed</th>
-                  <th>No. of users Failed</th>
-                </tr>
-                  {% for quiz, users_no, passed, failed in course_details %}
-                  <tr>
-                    <td>
-                    <a href="{{URL_ROOT}}/exam/manage/monitor/{{ quiz.id }}/{{course.id}}" >{{ quiz.description }}</a>
-                    </td>
-                    <td>
-                      {{users_no}} user(s)
-                    </td>
-                    <td>
-                      {{passed}}
-                    </td>
-                    <td>
-                      {{failed}}
-                    </td>
-                  </tr>
-                  {% endfor %}
-                </table>
-                {% else %}
-                  No Quizzes
-                {% endif %}
-            </td>
-        </tr>
-    {% endfor %}
-</table>
-</div>
-
-<hr>
-<center>
-    <a href="{{URL_ROOT}}/exam/manage/add_course" class="btn btn-primary">
-      Add New Course
-    </a>
-    <a href="{{URL_ROOT}}/exam/manage/create_demo_course" class="btn btn-primary">
-      Create Demo Course
-    </a>
-    <a data-toggle="collapse" data-target="#help" class="btn">
-      <span class="fa fa-question-circle yakshred"></span> What's This
-    </a>
-    <div id="help" class="collapse">
-      <ul class="list">
-        <li>A Demo Course and Demo Quiz will be created (Click Courses link on nav bar to view courses).</li>
-        <li>Some Demo Questions are also created for you (Click Questions link on nav bar to view questions).</li>
-        <li>In Courses you can view Demo Quiz.</li>
-        <li>Click on the Demo Quiz and Click on User Mode or God Mode to take the quiz.</li>
-        <li>You can also edit the Demo quiz.</li>
-      </ul>
-    </div>
+<br><br>
+<div class="container">
     <center>
-    {% if msg %}
-      <h4 class="alert alert-info col-md-10 animated flash">{{ msg }}</h4>
-    {% endif %}
+        {% block pagetitle %} <h2>My Dashboard</h2> {% endblock %}
+        <h4>List of quizzes! Click on the given links to have a look at answer papers for a quiz.</h4>
     </center>
-</center>
-{% if trial_paper %}
-  <br/>
-  <p><center><strong> You have trial papers </strong><br/></center></p>
-  &nbsp;&nbsp;<input type="checkbox" class="selectall"/>&nbsp;&nbsp;Select all
-  <br/>
-  <div id="trial">
-  <table class="table table-bordered table-responsive-sm">
-  <form action="" method="post">
-  {% csrf_token %}
-   {% for paper in trial_paper %}
-  <tr>
-  <td> <input type = "checkbox" name="delete_paper" class="check" value = {{paper.id}}></input></td>
-  <td> <a href="{{URL_ROOT}}/exam/manage/gradeuser/{{paper.question_paper.quiz.id}}/{{paper.course.id}}/">{{paper.question_paper.quiz.description}}</a></td>
-  </tr>
-  {% endfor %}
-  </table>
-  <center><button class="btn btn-danger" type="submit">Delete Selected</button></center>
-  </form>
-  </div>
-  {% endif %}
-</div>
+    <hr>
+    <center>
+        <a href="{{URL_ROOT}}/exam/manage/add_course" class="btn btn-success btn-lg">
+          <span class=" fa fa-plus-circle"></span>&nbsp;Add Course
+        </a>
+        <a href="{{URL_ROOT}}/exam/manage/create_demo_course" class="btn btn-primary btn-lg">
+          Create Demo Course
+        </a>
+        <center>
+            <br>
+            {% if msg %}
+            <div class="container">
+                <div class="alert alert-dismissible alert-info">
+                    <button type="button" class="close" data-dismiss="alert">&times;</button>
+                    <strong>{{ msg }}</strong>
+                </div>
+            </div>
+            {% endif %}
+        </center>
+    </center>
+    {% with objects as courses %}
+    {% if not courses %}
+        <div class="alert alert-secondary">
+          No Courses found. Add a new course or Create demo course
+        </div>
+    {% else %}
+        {% include "yaksh/paginator.html" %}
+        <br>
+        <div id="accordion">
+            {% for course in courses %}
+                <div class="card">
+                    <div class="card-header">
+                        <div class="row">
+                            <div class="col-md-4">
+                                <h4>{{ course.name | truncatechars:40 }}</h4>
+                            </div>
+                            <div class="col-md-2">
+                                {% if course.active %}
+                                    <span class="badge badge-pill badge-success">
+                                        Active
+                                    </span>
+                                {% else %}
+                                    <span class="badge badge-pill badge-danger">
+                                        Inactive
+                                    </span>
+                                {% endif %}
+                            </div>
+                            <div class="col-md-3">
+                                <a href="{{URL_ROOT}}/exam/manage/course_detail/{{course.id}}" class="btn btn-primary btn-lg">
+                                    Manage Course
+                                </a>
+                            </div>
+                            <div class="col-md">
+                                <a class="card-link btn btn-info btn-lg" data-toggle="collapse" href="#collapse{{course.id}}">
+                                    Details
+                                    <i class="fa fa-toggle-down" id="toggle_course_{{course.id}}"></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="collapse{{course.id}}" class="collapse hide" data-parent="#accordion">
+                        <div class="card-body">
+                            <strong>{{ course.name }}</strong>
+                            <table class="table table-bordered table-responsive-sm">
+                                <tr>
+                                    <th>Quiz</th>
+                                    <th>Taken By</th>
+                                    <th>No. of users Passed</th>
+                                    <th>No. of users Failed</th>
+                                </tr>
+                                {% get_course_details course as course_details %}
+                                {% if course_details %}
+                                    {% for quiz, users_no, passed, failed in course_details %}
+                                    <tr>
+                                        <td>
+                                            <a href="{{URL_ROOT}}/exam/manage/monitor/{{ quiz.id }}/{{course.id}}" >
+                                                {{ quiz.description }}
+                                            </a>
+                                        </td>
+                                        <td>{{users_no}} user(s)</td>
+                                        <td>{{passed}}</td>
+                                        <td>{{failed}}</td>
+                                      </tr>
+                                      {% endfor %}
+                                {% else %}
+                                    No Quizzes
+                                {% endif %}
+                            </table>
+                        </div>
+                    </div>
+                </div>
+                <br>
+            {% endfor %}
+        </div>
+        {% include "yaksh/paginator.html" %}
+        <br>
+    {% endif %}
+    {% endwith %}
 </div>
 {% endblock %}
 
diff --git a/yaksh/templates/yaksh/paginator.html b/yaksh/templates/yaksh/paginator.html
new file mode 100644
index 0000000..3170081
--- /dev/null
+++ b/yaksh/templates/yaksh/paginator.html
@@ -0,0 +1,33 @@
+<ul class="pagination pagination-lg">
+    {% if objects.has_previous %}
+    <li class="page-item">
+        <a class="page-link" href="?page=1" aria-label="Previous">
+            <span aria-hidden="true">
+                <i class="fa fa-angle-double-left"></i>
+            </span>
+            <span class="sr-only">begin</span>
+        </a>
+    </li>
+    {% endif %}
+
+    {% for n in objects.paginator.page_range %}
+        {% if objects.number == n %}
+            <li class="page-item active">
+                <span class="page-link">{{ n }}<span class="sr-only">(current)</span></span>
+            </li>
+        {% elif n > objects.number|add:'-3' and n < objects.number|add:'3' %}
+            <li class="page-item"><a class="page-link" href="?page={{ n }}">{{ n }}</a></li>
+        {% endif %}
+    {% endfor %}
+
+    {% if objects.has_next %}
+        <li class="page-item">
+            <a class="page-link" href="?page={{ objects.paginator.num_pages }}" aria-label="Next">
+                <span aria-hidden="true">
+                    <i class="fa fa-angle-double-right"></i>
+                </span>
+                <span class="sr-only">end</span>
+            </a>
+        </li>
+    {% endif %}
+</ul>
\ No newline at end of file
diff --git a/yaksh/templates/yaksh/profile_updated.html b/yaksh/templates/yaksh/profile_updated.html
index 2247004..b038b5e 100644
--- a/yaksh/templates/yaksh/profile_updated.html
+++ b/yaksh/templates/yaksh/profile_updated.html
@@ -1,14 +1,14 @@
 {% extends "base.html" %}
-{% block pagetitle %}
-<div class="yakshnav fixed-top" style=" padding-top: 0.5%;padding-bottom: 0.5%;">
-    <a class="navbar-brand" href="{{ URL_ROOT }}/exam/"  >
+{% block title %} Profile {% endblock %}
+
+{% block nav %}
+<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+  <a class="navbar-brand" href="{{ URL_ROOT }}/exam/">
     <img src="{{ URL_ROOT }}/static/yaksh/images/yaksh_banner.png" alt="YAKSH">
-    </img>
-    </a> 
-</div>
+  </a>
+</nav>
 {% endblock %}
 <!DOCTYPE html>
-{% block title %} Profile {% endblock %}
 
 {% block script %}
 <script>
@@ -16,14 +16,15 @@
 </script>
 {% endblock script %}
 {% block content %}
-<div class="yakshwell container">
-	<div class="row align-items-center">
-		<div class="col">
-			<h3>Your Profile is changed {{ user.first_name }}</h3>
-			<h3>Redirecting...</h3>
-		</div>
-	
-	<div class="col"><img src="{{ URL_ROOT }}/static/yaksh/images/profile_change.gif/"></div>
-	</div>
-</div>
+<center>
+    <div class="container">
+        <div class="row align-items-center">
+            <div class="col">
+                <h3>Your Profile is changed</h3>
+                <h3>Redirecting...</h3>
+            </div>
+        </div>
+        <div class="col"><img src="{{ URL_ROOT }}/static/yaksh/images/profile_change.gif/"></div>
+    </div>
+</center>
 {% endblock content %}
diff --git a/yaksh/templates/yaksh/register.html b/yaksh/templates/yaksh/register.html
index 71fe1de..060e961 100644
--- a/yaksh/templates/yaksh/register.html
+++ b/yaksh/templates/yaksh/register.html
@@ -1,63 +1,54 @@
 {% extends "base.html" %}
 
+{% block title %} Register {% endblock %}
+
 {% block nav %}
-<div class="container-fluid yakshnav">
-<nav class="navbar fixed-top navbar-expand-lg yakshheading yakshnav">
-  <div class="container">
-    <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#myNavbar" aria-controls="myNavbar" aria-expanded="false" aria-label="Toggle navigation">
-    <span class="navbar-toggler-icon" style="color: white"></span>
-    </button>
-    <a class="navbar-brand" href="{{ URL_ROOT }}/exam/">
-    <img src="{{ URL_ROOT }}/static/yaksh/images/yaksh_banner.png" alt="YAKSH" style="margin-top: -3px; margin-left:-15px">
-    </img>
-    </a>    
-    <div class="collapse navbar-collapse" id="myNavbar">
-        <ul class="nav nav-pills ml-auto">
-            <li class="nav-item"><a class="nav-link" href="{{ URL_ROOT }}/exam/">LOGIN INSTEAD?</a></li>
-        </ul>
-    </div>
-  </div>
+<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
+  <a class="navbar-brand" href="{{ URL_ROOT }}/exam/">
+    <img src="{{ URL_ROOT }}/static/yaksh/images/yaksh_banner.png" alt="YAKSH">
+  </a>
 </nav>
-</div>
 {% endblock %}
 
-{% block pagetitle %}<p class="yakshred"> Online Test Registration </p>{% endblock %}
-
 {% block content %}
-<div class="container-fluid row justify-content-center">
-<div class="col-md-10">
-<form action="" method="post">
-    {% csrf_token %}
-    <h5> Please fill in the following details:</h5>
-    <center>
-        <table class="table table-responsive-sm">
-    {{ form.as_table }}
-    </table></center>
-    <center class="yakshwell"><button class="btn btn-success" type="submit">Register</button>&nbsp;&nbsp;
-    <a href="{{URL_ROOT}}/exam" class="btn btn-danger">Cancel</a></center>
-</form>
-</div>
+<div class="container-fluid">
+    <br>
+    {% block pagetitle %}<center><h1> Registration </h1></center>{% endblock %}
+    <div class="row justify-content-center form-group">
+        <div class="col-md-4 col-md-offset-4">
+            <form action="" method="post">
+                <fieldset>
+                    {% csrf_token %}
+                    <h4> Please fill in the following details:</h4>
+                    <center>
+                        {% if form.errors %}
+                            {% for field in form %}
+                                {% for error in field.errors %}
+                                    <div class="alert alert-dismissible alert-danger">
+                                        <button type="button" class="close" data-dismiss="alert">&times;</button>
+                                        <strong>{{ error|escape }}</strong>
+                                    </div>
+                                {% endfor %}
+                            {% endfor %}
+                            {% for error in form.non_field_errors %}
+                                <div class="alert alert-dismissible alert-danger">
+                                    <button type="button" class="close" data-dismiss="alert">&times;</button>
+                                    <strong>{{ error|escape }}</strong>
+                                </div>
+                            {% endfor %}
+                        {% endif %}
+                        {% for field in form %}
+                            <td>{{ field }} <small>{{ field.help_text }}</small></td>
+                            <br>
+                        {% endfor %}
+                        <br>
+                        <br>
+                    </center>
+                    <center class="yakshwell"><button class="btn btn-success btn-lg" type="submit">Register</button>&nbsp;&nbsp;
+                    <a href="{{URL_ROOT}}/exam" class="btn btn-primary btn-lg">Cancel</a></center>
+                </fieldset>
+            </form>
+        </div>
+    </div>
 </div>
-<br><br><br>
 {% endblock content %}
-
-{% block footer %}
-  <!--footer-->   
-  <footer class="container-fluid yakshfooter text-center" id="contact">
-       {% block info %}
-       {% endblock %}
-       Developed by FOSSEE team, IIT Bombay
-       <hr style="background-color: white"> 
-       <nav class="nav nav-pills nav-fill col-lg-12"> 
-
-            <li class="nav-item">
-                <a class = "btn btn-social-icon btn-github nav-link" href ="https://github.com/fossee/online_test"">Fork us at:
-                <span class="fa fa-github" style="font-size:20px;"></span>
-                </a>
-            </li>
-                <li class="nav-item"><span class="nav-link"> Email : info@fossee.in</span></li>
-                <li class="nav-item"><a href="#" class="nav-link">FOSSEE website</a></li>
-            </nav>
-  </footer>
-  <!--footer end-->
-{% endblock %}