From 3eea34d6af42160d31e464795b13b314760b6c1a Mon Sep 17 00:00:00 2001
From: rinu-sl <rinusylas@gmail.com>
Date: Mon, 15 Sep 2025 21:56:37 +0530
Subject: [PATCH] ui

---
 requirements.txt                              |  19 +-
 .../templates/statistics_app/paginator.html   |  13 +-
 .../statistics_app/profile_stats.html         | 170 +++++++++++-------
 .../templates/statistics_app/team_stats.html  |  65 ++++---
 .../statistics_app/workshop_public_stats.html | 153 ++++++++--------
 .../workshop_app/css/advanced-login.css       |  99 ++++++++++
 .../workshop_app/css/advanced-stats.css       | 106 +++++++++++
 workshop_app/static/workshop_app/css/base.css | 132 +++++++++++++-
 .../static/workshop_app/css/jquery-ui.css     |  52 ++++++
 workshop_app/templates/workshop_app/base.html | 132 +++++++-------
 .../templates/workshop_app/login.html         |   3 +-
 11 files changed, 699 insertions(+), 245 deletions(-)
 create mode 100644 workshop_app/static/workshop_app/css/advanced-login.css
 create mode 100644 workshop_app/static/workshop_app/css/advanced-stats.css

diff --git a/requirements.txt b/requirements.txt
index cc9dfd7..2dce5f0 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,6 +1,15 @@
-Django==3.0.7
-coverage
-pyaml
-django-recurrence
+asgiref==3.9.1
+coverage==7.10.6
+Django==4.2.24
+django-recurrence==1.11.1
+numpy==2.0.2
+pandas==2.3.2
+pyaml==25.7.0
+python-dateutil==2.9.0.post0
 python-decouple==3.3
-pandas
+pytz==2025.2
+PyYAML==6.0.2
+six==1.17.0
+sqlparse==0.5.3
+typing_extensions==4.15.0
+tzdata==2025.2
diff --git a/statistics_app/templates/statistics_app/paginator.html b/statistics_app/templates/statistics_app/paginator.html
index 9f0840a..1a9f7c1 100644
--- a/statistics_app/templates/statistics_app/paginator.html
+++ b/statistics_app/templates/statistics_app/paginator.html
@@ -1,8 +1,7 @@
-<ul class="pagination pagination">
+<ul class="pagination justify-content-center" style="margin:1em 0;">
     {% if objects.has_previous %}
     <li class="page-item">
-        <a class="page-link" href="?page=1{% if request.GET.from_date %}&from_date={{ request.GET.from_date }}{% endif %}{% if request.GET.to_date %}&to_date={{ request.GET.to_date }}{% endif %}{% if request.GET.state %}&state={{ request.GET.state }}{% endif %}{% if request.GET.workshop_type %}&workshop_type={{ request.GET.workshop_type }}{% endif %}{% if request.GET.show_workshops %}&show_workshops={{ request.GET.show_workshops }}{% endif %}{% if request.GET.sort %}&sort={{ request.GET.sort }}{% endif %}
-        " aria-label="Previous">
+        <a class="page-link rounded-pill bg-gradient-info text-white mx-1" style="box-shadow:0 2px 8px rgba(37,117,252,0.10);" href="?page=1{% if request.GET.from_date %}&from_date={{ request.GET.from_date }}{% endif %}{% if request.GET.to_date %}&to_date={{ request.GET.to_date }}{% endif %}{% if request.GET.state %}&state={{ request.GET.state }}{% endif %}{% if request.GET.workshop_type %}&workshop_type={{ request.GET.workshop_type }}{% endif %}{% if request.GET.show_workshops %}&show_workshops={{ request.GET.show_workshops }}{% endif %}{% if request.GET.sort %}&sort={{ request.GET.sort }}{% endif %}" aria-label="Previous">
             <span aria-hidden="true">
                 <i class="fa fa-angle-double-left"></i>
             </span>
@@ -14,16 +13,18 @@
     {% 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>
+                <span class="page-link rounded-pill bg-gradient-info text-white mx-1" style="font-weight:700; box-shadow:0 2px 8px rgba(37,117,252,0.18);">{{ n }}<span class="sr-only">(current)</span></span>
             </li>
         {% elif n > objects.number|add:'-5' and n < objects.number|add:'5' %}
-            <li class="page-item"><a class="page-link" href="?page={{ n }}{% if request.GET.from_date %}&from_date={{ request.GET.from_date }}{% endif %}{% if request.GET.to_date %}&to_date={{ request.GET.to_date }}{% endif %}{% if request.GET.state %}&state={{ request.GET.state }}{% endif %}{% if request.GET.workshop_type %}&workshop_type={{ request.GET.workshop_type }}{% endif %}{% if request.GET.show_workshops %}&show_workshops={{ request.GET.show_workshops }}{% endif %}{% if request.GET.sort %}&sort={{ request.GET.sort }}{% endif %}">{{ n }}</a></li>
+            <li class="page-item">
+                <a class="page-link rounded-pill mx-1" style="transition:background 0.2s;" href="?page={{ n }}{% if request.GET.from_date %}&from_date={{ request.GET.from_date }}{% endif %}{% if request.GET.to_date %}&to_date={{ request.GET.to_date }}{% endif %}{% if request.GET.state %}&state={{ request.GET.state }}{% endif %}{% if request.GET.workshop_type %}&workshop_type={{ request.GET.workshop_type }}{% endif %}{% if request.GET.show_workshops %}&show_workshops={{ request.GET.show_workshops }}{% endif %}{% if request.GET.sort %}&sort={{ request.GET.sort }}{% endif %}">{{ n }}</a>
+            </li>
         {% endif %}
     {% endfor %}
 
     {% if objects.has_next %}
         <li class="page-item">
-            <a class="page-link" href="?page={{ objects.paginator.num_pages }}{% if request.GET.from_date %}&from_date={{ request.GET.from_date }}{% endif %}{% if request.GET.to_date %}&to_date={{ request.GET.to_date }}{% endif %}{% if request.GET.state %}&state={{ request.GET.state }}{% endif %}{% if request.GET.workshop_type %}&workshop_type={{ request.GET.workshop_type }}{% endif %}{% if request.GET.show_workshops %}&show_workshops={{ request.GET.show_workshops }}{% endif %}{% if request.GET.sort %}&sort={{ request.GET.sort }}{% endif %}" aria-label="Next">
+            <a class="page-link rounded-pill bg-gradient-info text-white mx-1" style="box-shadow:0 2px 8px rgba(37,117,252,0.10);" href="?page={{ objects.paginator.num_pages }}{% if request.GET.from_date %}&from_date={{ request.GET.from_date }}{% endif %}{% if request.GET.to_date %}&to_date={{ request.GET.to_date }}{% endif %}{% if request.GET.state %}&state={{ request.GET.state }}{% endif %}{% if request.GET.workshop_type %}&workshop_type={{ request.GET.workshop_type }}{% endif %}{% if request.GET.show_workshops %}&show_workshops={{ request.GET.show_workshops }}{% endif %}{% if request.GET.sort %}&sort={{ request.GET.sort }}{% endif %}" aria-label="Next">
                 <span aria-hidden="true">
                     <i class="fa fa-angle-double-right"></i>
                 </span>
diff --git a/statistics_app/templates/statistics_app/profile_stats.html b/statistics_app/templates/statistics_app/profile_stats.html
index 2a01476..856003d 100644
--- a/statistics_app/templates/statistics_app/profile_stats.html
+++ b/statistics_app/templates/statistics_app/profile_stats.html
@@ -37,75 +37,109 @@
 
 
 {% block content %}
-	<div class="container">
-	 	<div class="row">
-			<div class="col-md-6" align="left" >
-				  <fieldset data-mini="true">
-				    <label for="radio-1">Instructor Statistics </label>
-				    <input type="radio" name="radio-1" id="radio-1" value="IP">
-				    <label for="radio-2">Coordinator Statistics</label>
-				    <input type="radio" name="radio-1" id="radio-2" value="CP">
-				  </fieldset>
+<div class="container py-4">
+	<div class="row justify-content-center">
+		<div class="col-lg-8">
+			<div class="card shadow-lg mb-4">
+				<div class="card-header bg-gradient-info text-white d-flex align-items-center" style="border-radius:1em 1em 0 0;">
+					<span class="material-icons mr-2">bar_chart</span>
+					<h4 class="mb-0">Profile Statistics</h4>
+				</div>
+				<div class="card-body">
+					<div class="d-flex justify-content-center mb-4">
+						<div class="btn-group btn-group-toggle" data-toggle="buttons">
+							<label class="btn btn-outline-info active" id="label-instructor">
+								<input type="radio" name="radio-1" id="radio-1" value="IP" autocomplete="off"> Instructor Statistics
+							</label>
+							<label class="btn btn-outline-info ml-2" id="label-coordinator">
+								<input type="radio" name="radio-1" id="radio-2" value="CP" autocomplete="off"> Coordinator Statistics
+							</label>
+						</div>
+					</div>
+					<!-- Instructor Data Table -->
+					<div id="instructor_data" style="display: none;">
+						<table class="table table-hover table-responsive-sm mb-0">
+							<thead class="bg-gradient-info text-white">
+								<tr>
+									<th>#</th>
+									<th>Username</th>
+									<th>Full Name</th>
+									<th>Institute Name</th>
+									<th>Phone Number</th>
+									<th>Workshop Count</th>
+								</tr>
+							</thead>
+							{% csrf_token %}
+							{% for profile_data in instructor_data %}
+							<tbody>
+								<tr>
+									<td>{{ forloop.counter}}</td>
+									<td>{{ profile_data.profile.user}}</td>
+									<td>{{ profile_data.profile.user.first_name}} {{ profile_data.profile.user.last_name}}</td>
+									<td>{{ profile_data.profile.institute}}</td>
+									<td>{{ profile_data.profile.phone_number}}</td>
+									<td>{{ profile_data.count}}</td>
+								</tr>
+							</tbody>
+							{% endfor %}
+						</table>
+					</div>
+					<!-- Coordinator Data Table -->
+					<div id="coordinator_data" style="display: none;">
+						<table class="table table-hover table-responsive-sm mb-0">
+							<thead class="bg-gradient-info text-white">
+								<tr>
+									<th>#</th>
+									<th>Name</th>
+									<th>Institute Name</th>
+									<th>Phone Number</th>
+									<th>Registration Date</th>
+									<th>Workshop Count</th>
+								</tr>
+							</thead>
+							{% csrf_token %}
+							{% for profile_data in coordinator_data %}
+							<tbody>
+								{% if profile_data.count > 0 %}
+								<tr>
+									<td>{{ forloop.counter }}</td>
+									<td><a href="{{ URL_ROOT }}/view_comment_profile/{{ profile_data.profile.user.id }}" class="text-info font-weight-bold">
+										{{ profile_data.profile.user.get_full_name }}</a></td>
+									<td>{{ profile_data.profile.institute}}</td>
+									<td>{{ profile_data.profile.phone_number}}</td>
+									<td>{{ profile_data.profile.user.date_joined | date}}</td>
+									<td>{{ profile_data.count}}</td>
+								</tr>
+								{% endif %}
+							</tbody>
+							{% endfor %}
+						</table>
+					</div>
+				</div>
 			</div>
-			<br>
-			<br>
-			<!-- Instructor Data Table -->
-				<table class="table" id="instructor_data" style="display: none">
-					<thead>
-						<tr>
-							<th></th>
-							<th>username</th>
-							<th>Full Name</th>
-							<th>Institute Name</th>
-							<th>Phone Number</th>
-							<th>Workshop Count</th>
-						</tr>
-					</thead>
-					{% csrf_token %}
-					{% for profile_data in instructor_data %}
-						<tbody>
-							<tr>
-								<td>{{ forloop.counter}}</td>
-								<td>{{ profile_data.profile.user}}</td>
-								<td>{{ profile_data.profile.user.first_name}} {{ profile_data.profile.user.last_name}}</td>
-								<td>{{ profile_data.profile.institute}}</td>
-								<td>{{ profile_data.profile.phone_number}}</td>
-								<td>{{ profile_data.count}}</td>
-							</tr>
-						</tbody>
-					{% endfor %}
-				</table>
-
-			<!-- Coordinator Data Table -->
-				<table class="table" id="coordinator_data" style="display: none">
-					<thead>
-						<tr>
-							<th></th>
-							<th>Name</th>
-							<th>Institute Name</th>
-							<th>Phone Number</th>
-							<th>Registration Date</th>
-							<th>Workshop Count</th>
-						</tr>
-					</thead>
-					{% csrf_token %}
-					{% for profile_data in coordinator_data %}
-						<tbody>
-					{% if profile_data.count > 0 %}
-							<tr>
-								<td>{{ forloop.counter }}</td>
-								<td><a href="{{ URL_ROOT }}/view_comment_profile/{{ profile_data.profile.user.id }}">
-								{{ profile_data.profile.user.get_full_name }}</a></td>
-								<td>{{ profile_data.profile.institute}}</td>
-								<td>{{ profile_data.profile.phone_number}}</td>
-								<td>{{ profile_data.profile.user.date_joined | date}}</td>
-								<td>{{ profile_data.count}}</td>
-							</tr>
-					{% endif %}
-						</tbody>
-					{% endfor %}
-				</table>
 		</div>
 	</div>
-
+</div>
+<script>
+	$(document).ready(function() {
+		// Default: show instructor table
+		$('#instructor_data').show();
+		$('#radio-1').prop('checked', true);
+		$('#label-instructor').addClass('active');
+		$('#label-coordinator').removeClass('active');
+		$('input[type=radio][name=radio-1]').change(function() {
+			if (this.value == "CP") {
+				$('#instructor_data').hide();
+				$('#coordinator_data').show();
+				$('#label-instructor').removeClass('active');
+				$('#label-coordinator').addClass('active');
+			} else {
+				$('#instructor_data').show();
+				$('#coordinator_data').hide();
+				$('#label-instructor').addClass('active');
+				$('#label-coordinator').removeClass('active');
+			}
+		});
+	});
+</script>
 {% endblock %}
diff --git a/statistics_app/templates/statistics_app/team_stats.html b/statistics_app/templates/statistics_app/team_stats.html
index 0342f61..3f10fe6 100644
--- a/statistics_app/templates/statistics_app/team_stats.html
+++ b/statistics_app/templates/statistics_app/team_stats.html
@@ -5,44 +5,65 @@
 {% endblock %}
 
 {% block content %}
-
-<div class="container-fluid">
+<div class="container-fluid py-4" style="background: linear-gradient(120deg, #f6d365 0%, #fda085 100%); min-height: 80vh;">
     <div class="row">
-        <div class="col-md-2">
-            <ul class="nav nav-pills list-group">
-                {% for team in all_teams %}
-                    <li class="nav-item">
-                        <a href="{% url 'statistics_app:team' team.id %}" class="nav-link list-group-item">
-                            Team {{forloop.counter}}
-                        </a>
-                    </li>
-                {% endfor %}
-            </ul>
+        <div class="col-md-3 mb-4">
+            <div class="card shadow-lg">
+                <div class="card-header bg-gradient-info text-white" style="border-radius:1em 1em 0 0;">
+                    <span class="material-icons mr-2">groups</span>
+                    <h5 class="mb-0 d-inline">Teams</h5>
+                </div>
+                <ul class="nav nav-pills flex-column p-3">
+                    {% for team in all_teams %}
+                        <li class="nav-item mb-2">
+                            <a href="{% url 'statistics_app:team' team.id %}" class="nav-link btn btn-outline-info w-100 text-left" style="border-radius:0.7em; font-weight:600;">
+                                <span class="material-icons" style="vertical-align:middle;">group</span> Team {{forloop.counter}}
+                            </a>
+                        </li>
+                    {% endfor %}
+                </ul>
+            </div>
         </div>
-        <div class="col-md-8">
-            <br>
-            <canvas id="myChart"></canvas>
+        <div class="col-md-9">
+            <div class="card shadow-lg">
+                <div class="card-header bg-gradient-info text-white" style="border-radius:1em 1em 0 0;">
+                    <span class="material-icons mr-2">bar_chart</span>
+                    <h5 class="mb-0 d-inline">Team Members Workshops</h5>
+                </div>
+                <div class="card-body">
+                    <canvas id="myChart"></canvas>
+                </div>
+            </div>
         </div>
     </div>
 </div>
 <script>
     var ctx = document.getElementById('myChart').getContext('2d');
     var chart = new Chart(ctx, {
-        // The type of chart we want to create
         type: 'bar',
-
-        // The data for our dataset
         data: {
             labels: {{team_labels|safe}},
             datasets: [{
                 data: {{ws_count|safe}},
                 label: "Team Members Workshops",
-                backgroundColor: 'rgb(255, 99, 132)',
-                borderColor: 'rgb(255, 99, 132)',
+                backgroundColor: 'rgba(37,117,252,0.7)',
+                borderColor: 'rgba(37,117,252,1)',
             }]
         },
-        // Configuration options go here
-        options: {}
+        options: {
+            responsive: true,
+            legend: { display: false },
+            scales: {
+                xAxes: [{
+                    gridLines: { display: false },
+                    ticks: { fontColor: '#2575fc' }
+                }],
+                yAxes: [{
+                    gridLines: { color: '#eee' },
+                    ticks: { fontColor: '#2575fc', beginAtZero: true }
+                }]
+            }
+        }
     });
 </script>
 {% endblock %}
diff --git a/statistics_app/templates/statistics_app/workshop_public_stats.html b/statistics_app/templates/statistics_app/workshop_public_stats.html
index ad55858..f49d94c 100644
--- a/statistics_app/templates/statistics_app/workshop_public_stats.html
+++ b/statistics_app/templates/statistics_app/workshop_public_stats.html
@@ -3,42 +3,35 @@
 {% block title %} Statistics {% endblock %}
 
 {% block content %}
-<div class="container-fluid">
+<div class="container-fluid py-4" style="background: linear-gradient(120deg, #f6d365 0%, #fda085 100%); min-height: 90vh;">
     <div class="row">
-        <div class="col-md-3">
+        <div class="col-md-4 col-lg-3 mb-4">
             <form method="GET">
-                <div class="card">
-                    <div class="card-header">
-                        <div class="row">
-                            <div class="col-md-8">
-                                <h3><u>Filters</u></h3>
-                            </div>
-                            <div class="col-md-4">
-                                <a href="{% url 'statistics_app:public' %}" class="btn btn-outline-info">
-                                    <i class="fa fa-times"></i>&nbsp;Clear
-                                </a>
-                            </div>
-                        </div>
+                <div class="card shadow-lg">
+                    <div class="card-header d-flex justify-content-between align-items-center">
+                        <h3 class="mb-0"><span class="material-icons" style="vertical-align: middle;">filter_alt</span> Filters</h3>
+                        <a href="{% url 'statistics_app:public' %}" class="btn btn-outline-info btn-sm">
+                            <i class="fa fa-times"></i> Clear
+                        </a>
                     </div>
                     <div class="card-body">
-                        <div>From date: {{form.from_date}}</div>
-                        <div>To date: {{form.to_date}}</div>
-                        <div>Workshop: {{form.workshop_type}}</div>
-                        <div>State: {{form.state}}</div>
-                        <div>{{form.sort.help_text}}: {{form.sort}}</div>
+                        <div class="form-group mb-3">From date: {{form.from_date}}</div>
+                        <div class="form-group mb-3">To date: {{form.to_date}}</div>
+                        <div class="form-group mb-3">Workshop: {{form.workshop_type}}</div>
+                        <div class="form-group mb-3">State: {{form.state}}</div>
+                        <div class="form-group mb-3">{{form.sort.help_text}}: {{form.sort}}</div>
                         {% if request.user.is_authenticated %}
-                        <div>{{form.show_workshops.help_text}}: {{form.show_workshops}}</div>
+                        <div class="form-group mb-3">{{form.show_workshops.help_text}}: {{form.show_workshops}}</div>
                         {% endif %}
-                        <br>
-                        <div class="row justify-content-center">
-                            <div class="col-md-4">
-                                <button type="submit" class="btn btn-success">
-                                    <i class="fa fa-eye"></i>&nbsp;View
+                        <div class="row mt-4">
+                            <div class="col-6">
+                                <button type="submit" class="btn btn-success w-100">
+                                    <i class="fa fa-eye"></i> View
                                 </button>
                             </div>
-                            <div class="col-md-6">
-                                <button type="submit" class="btn btn-info" name="download" value="download">
-                                    <i class="fa fa-download"></i>&nbsp;Download
+                            <div class="col-6">
+                                <button type="submit" class="btn btn-info w-100" name="download" value="download">
+                                    <i class="fa fa-download"></i> Download
                                 </button>
                             </div>
                         </div>
@@ -46,55 +39,58 @@ <h3><u>Filters</u></h3>
                 </div>
             </form>
         </div>
-        <div class="col">
-            <div class="row">
+        <div class="col-md-8 col-lg-9">
+            <div class="row mb-3">
                 <div class="col-md-6">
                     {% include "statistics_app/paginator.html" %}
                 </div>
                 <div class="col-md-3">
-                    <button class="btn btn-info" id="state_graph">
-                        <i class="fa fa-bar-chart"></i>&nbsp;State chart
+                    <button class="btn btn-info w-100" id="state_graph">
+                        <i class="fa fa-bar-chart"></i> State chart
                     </button>
                 </div>
                 <div class="col-md-3">
-                    <button class="btn btn-info" id="type_graph">
-                        <i class="fa fa-bar-chart"></i>&nbsp;Workshops chart
+                    <button class="btn btn-info w-100" id="type_graph">
+                        <i class="fa fa-bar-chart"></i> Workshops chart
                     </button>
                 </div>
             </div>
-            <table class="table table-responsive-sm">
-                <thead>
-                    <tr>
-                        <th>Sr No.</th>
-                        <th>Coordinator Name</th>
-                        <th>Institute Name</th>
-                        <th>Instructor Name</th>
-                        <th>Workshop Name</th>
-                        <th>Workshop Date</th>
-                    </tr>
-                </thead>
-                {% csrf_token %}
-                {% for workshop in objects %}
-                    <tbody>
-                        <tr>
-                            <td>{{ forloop.counter0|add:objects.start_index}}</td>
-                            <td>{{ workshop.coordinator.get_full_name | capfirst }}</td>
-                            <td>{{ workshop.coordinator.profile.institute | capfirst }}</td>
-                            <td>{{ workshop.instructor.get_full_name | capfirst }}</td>
-                            <td>{{ workshop.workshop_type.name }}</td>
-                            <td>{{ workshop.date | date}}</td>
-                        </tr>
-                    </tbody>
-                {% endfor %}
-            </table>
+            <div class="card shadow-lg mb-4">
+                <div class="card-body p-0">
+                    <table class="table table-responsive-sm mb-0">
+                        <thead>
+                            <tr>
+                                <th>Sr No.</th>
+                                <th>Coordinator Name</th>
+                                <th>Institute Name</th>
+                                <th>Instructor Name</th>
+                                <th>Workshop Name</th>
+                                <th>Workshop Date</th>
+                            </tr>
+                        </thead>
+                        {% csrf_token %}
+                        {% for workshop in objects %}
+                            <tbody>
+                                <tr>
+                                    <td>{{ forloop.counter0|add:objects.start_index}}</td>
+                                    <td>{{ workshop.coordinator.get_full_name | capfirst }}</td>
+                                    <td>{{ workshop.coordinator.profile.institute | capfirst }}</td>
+                                    <td>{{ workshop.instructor.get_full_name | capfirst }}</td>
+                                    <td>{{ workshop.workshop_type.name }}</td>
+                                    <td>{{ workshop.date | date}}</td>
+                                </tr>
+                            </tbody>
+                        {% endfor %}
+                    </table>
+                </div>
+            </div>
             {% include "statistics_app/paginator.html" %}
         </div>
     </div>
-</div>
-
-<!-- The Modal -->
-<div id="dialog" title="Workshops Statistics">
-    <canvas id="myChart"></canvas>
+    <!-- The Modal -->
+    <div id="dialog" title="Workshops Statistics" style="display:none;">
+        <canvas id="myChart"></canvas>
+    </div>
 </div>
 
 <script type="text/javascript">
@@ -114,26 +110,39 @@ <h3><u>Filters</u></h3>
         var ctx = document.getElementById('myChart').getContext('2d');
         if(chart) chart.destroy();
         chart = new Chart(ctx, {
-            // The type of chart we want to create
             type: 'bar',
-
-            // The data for our dataset
             data: {
                 labels: labels,
                 datasets: [{
                     data: data,
                     label: graph_name,
-                    backgroundColor: 'rgb(255, 99, 132)',
-                    borderColor: 'rgb(255, 99, 132)',
+                    backgroundColor: 'rgba(37,117,252,0.7)',
+                    borderColor: 'rgba(37,117,252,1)',
                 }]
             },
-            // Configuration options go here
-            options: {}
+            options: {
+                responsive: true,
+                legend: { display: false },
+                scales: {
+                    xAxes: [{
+                        gridLines: { display: false },
+                        ticks: { fontColor: '#2575fc' }
+                    }],
+                    yAxes: [{
+                        gridLines: { color: '#eee' },
+                        ticks: { fontColor: '#2575fc', beginAtZero: true }
+                    }]
+                }
+            }
         });
         $("#dialog").dialog({
             width: 900,
-            height: 500
+            height: 500,
+            modal: true,
+            show: { effect: "fade", duration: 400 },
+            hide: { effect: "fade", duration: 400 }
         });
+        $("#dialog").show();
     }
 </script>
 
diff --git a/workshop_app/static/workshop_app/css/advanced-login.css b/workshop_app/static/workshop_app/css/advanced-login.css
new file mode 100644
index 0000000..0076a32
--- /dev/null
+++ b/workshop_app/static/workshop_app/css/advanced-login.css
@@ -0,0 +1,99 @@
+/* Advanced Login UI Styles */
+body {
+    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
+    min-height: 100vh;
+    font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
+}
+
+.login-card {
+    background: #fff;
+    border-radius: 1.2em;
+    box-shadow: 0 8px 32px rgba(44, 62, 80, 0.15);
+    padding: 2.5em 2em;
+    margin-top: 5em;
+    transition: box-shadow 0.3s;
+}
+
+.login-card:hover {
+    box-shadow: 0 12px 40px rgba(44, 62, 80, 0.25);
+}
+
+.login-card .card-body {
+    padding: 0;
+}
+
+.login-card label {
+    font-weight: 600;
+    color: #2575fc;
+    margin-bottom: 0.5em;
+}
+
+.login-card .form-group {
+    margin-bottom: 1.5em;
+}
+
+.login-card input[type="text"],
+.login-card input[type="password"] {
+    border-radius: 0.7em;
+    border: 1px solid #e0e0e0;
+    padding: 0.8em 1em;
+    font-size: 1.1em;
+    transition: border-color 0.2s;
+}
+
+.login-card input:focus {
+    border-color: #2575fc;
+    outline: none;
+}
+
+.login-card .btn-primary {
+    background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
+    border: none;
+    border-radius: 0.7em;
+    padding: 0.7em 2em;
+    font-size: 1.1em;
+    font-weight: 600;
+    color: #fff;
+    box-shadow: 0 2px 8px rgba(44, 62, 80, 0.10);
+    /* transition: background 0.2s, box-shadow 0.2s; */
+}
+
+.login-card .btn-primary:hover {
+    background: linear-gradient(90deg, #2575fc 0%, #6a11cb 100%);
+    box-shadow: 0 4px 16px rgba(44, 62, 80, 0.18);
+}
+
+.login-card .dropdown-divider {
+    margin: 2em 0 1em 0;
+    border-top: 1px solid #e0e0e0;
+}
+
+.login-card .dropdown-item {
+    display: block;
+    color: #2575fc;
+    text-align: center;
+    margin-bottom: 0.5em;
+    font-size: 1em;
+    text-decoration: none;
+    transition: color 0.2s;
+}
+
+.login-card .dropdown-item:hover {
+    color: #6a11cb;
+    text-decoration: underline;
+}
+
+.alert-danger {
+    border-radius: 0.7em;
+    box-shadow: 0 2px 8px rgba(189, 54, 47, 0.10);
+    font-size: 1em;
+    margin-bottom: 1em;
+}
+
+@media (max-width: 600px) {
+    .login-card {
+        padding: 1.5em 0.5em;
+        margin-top: 2em;
+    }
+}
+
diff --git a/workshop_app/static/workshop_app/css/advanced-stats.css b/workshop_app/static/workshop_app/css/advanced-stats.css
new file mode 100644
index 0000000..a524ebd
--- /dev/null
+++ b/workshop_app/static/workshop_app/css/advanced-stats.css
@@ -0,0 +1,106 @@
+/* Advanced Statistics Page Styles */
+body {
+    background: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
+    font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
+}
+
+.card {
+    border-radius: 1em;
+    box-shadow: 0 8px 32px rgba(44, 62, 80, 0.12);
+    border: none;
+    transition: box-shadow 0.3s;
+}
+
+.card:hover {
+    box-shadow: 0 12px 40px rgba(44, 62, 80, 0.18);
+}
+
+.card-header {
+    background: linear-gradient(90deg, #2575fc 0%, #6a11cb 100%);
+    color: #fff;
+    border-radius: 1em 1em 0 0;
+    padding: 1em 1.5em;
+}
+
+.card-header h3 {
+    font-weight: 700;
+    letter-spacing: 1px;
+}
+
+.card-body {
+    background: #fff;
+    border-radius: 0 0 1em 1em;
+    padding: 1.5em;
+}
+
+.btn {
+    border-radius: 0.7em;
+    font-weight: 600;
+    transition: background 0.2s, box-shadow 0.2s;
+    box-shadow: 0 2px 8px rgba(44, 62, 80, 0.10);
+}
+
+.btn-success {
+    background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%);
+    border: none;
+    color: #fff;
+}
+
+.btn-success:hover {
+    background: linear-gradient(90deg, #38f9d7 0%, #43e97b 100%);
+    box-shadow: 0 4px 16px rgba(67, 233, 123, 0.18);
+}
+
+.btn-info {
+    background: linear-gradient(90deg, #2575fc 0%, #6a11cb 100%);
+    border: none;
+    color: #fff;
+}
+
+.btn-info:hover {
+    background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
+    box-shadow: 0 4px 16px rgba(37, 117, 252, 0.18);
+}
+
+.table {
+    background: #fff;
+    border-radius: 1em;
+    box-shadow: 0 4px 16px rgba(44, 62, 80, 0.08);
+    overflow: hidden;
+}
+
+.table thead th {
+    background: linear-gradient(90deg, #2575fc 0%, #6a11cb 100%);
+    color: #fff;
+    font-weight: 600;
+    border: none;
+    padding: 1em;
+}
+
+.table tbody td {
+    padding: 0.9em;
+    border-top: 1px solid #f0f0f0;
+    font-size: 1em;
+}
+
+.table-responsive-sm {
+    border-radius: 1em;
+    overflow: hidden;
+}
+
+#dialog {
+    background: #fff;
+    border-radius: 1em;
+    box-shadow: 0 8px 32px rgba(44, 62, 80, 0.18);
+    padding: 2em;
+}
+
+@media (max-width: 900px) {
+    .card, .table, #dialog {
+        border-radius: 0.5em;
+        padding: 1em;
+    }
+    .card-header, .card-body {
+        padding: 1em;
+    }
+}
\ No newline at end of file
diff --git a/workshop_app/static/workshop_app/css/base.css b/workshop_app/static/workshop_app/css/base.css
index e8dd4ed..ff1c3e5 100644
--- a/workshop_app/static/workshop_app/css/base.css
+++ b/workshop_app/static/workshop_app/css/base.css
@@ -1,19 +1,135 @@
-/**
- * Footer Styles
- */
+/* Advanced Base UI Styles */
+body {
+    background: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
+    font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
+    min-height: 100vh;
+}
+
 .navbar {
     z-index: 1000;
+    border-radius: 0 0 1em 1em;
+    box-shadow: 0 4px 16px rgba(44, 62, 80, 0.10);
+}
+
+.navbar-brand {
+    font-weight: 700;
+    font-size: 1.5em;
+    letter-spacing: 1px;
+}
+
+.nav-link {
+    font-weight: 600;
+    font-size: 1.1em;
+    border-radius: 0.7em;
+    transition: background 0.2s, color 0.2s;
+}
+.nav-link:hover, .nav-link.active {
+    background: linear-gradient(90deg, #2575fc 0%, #6a11cb 100%);
+    color: #fff !important;
+}
+
+.dropdown-menu {
+    border-radius: 1em;
+    box-shadow: 0 4px 16px rgba(44, 62, 80, 0.10);
+}
+
+.btn {
+    border-radius: 0.7em;
+    font-weight: 600;
+    box-shadow: 0 2px 8px rgba(44, 62, 80, 0.10);
+    transition: background 0.2s, box-shadow 0.2s;
+}
+.btn-info {
+    background: linear-gradient(90deg, #2575fc 0%, #6a11cb 100%);
+    border: none;
+    color: #fff;
+}
+.btn-info:hover {
+    background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
+    box-shadow: 0 4px 16px rgba(37, 117, 252, 0.18);
+}
+.btn-success {
+    background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%);
+    border: none;
+    color: #fff;
+}
+.btn-success:hover {
+    background: linear-gradient(90deg, #38f9d7 0%, #43e97b 100%);
+    box-shadow: 0 4px 16px rgba(67, 233, 123, 0.18);
+}
+
+.card {
+    border-radius: 1em;
+    box-shadow: 0 8px 32px rgba(44, 62, 80, 0.12);
+    border: none;
+    transition: box-shadow 0.3s;
 }
+.card:hover {
+    box-shadow: 0 12px 40px rgba(44, 62, 80, 0.18);
+}
+.card-header {
+    background: linear-gradient(90deg, #2575fc 0%, #6a11cb 100%);
+    color: #fff;
+    border-radius: 1em 1em 0 0;
+    padding: 1em 1.5em;
+}
+.card-body {
+    background: #fff;
+    border-radius: 0 0 1em 1em;
+    padding: 1.5em;
+}
+
+.table {
+    background: #fff;
+    border-radius: 1em;
+    box-shadow: 0 4px 16px rgba(44, 62, 80, 0.08);
+    overflow: hidden;
+}
+.table thead th {
+    background: linear-gradient(90deg, #2575fc 0%, #6a11cb 100%);
+    color: #fff;
+    font-weight: 600;
+    border: none;
+    padding: 1em;
+}
+.table tbody td {
+    padding: 0.9em;
+    border-top: 1px solid #f0f0f0;
+    font-size: 1em;
+}
+.table-responsive-sm {
+    border-radius: 1em;
+    overflow: hidden;
+}
+
+.base-content {
+    padding-top: 7em;
+    padding-bottom: 3em;
+    min-height: 80vh;
+}
+
 .footer {
     position: fixed;
     bottom: 0;
     width: 100%;
-    background-color: #61615F;
-    color: white;
+    background: linear-gradient(90deg, #2575fc 0%, #6a11cb 100%);
+    color: #fff;
     text-align: center;
     z-index: 100;
+    font-size: 1.1em;
+    padding: 1.5em 0;
 }
-.base-content {
-    padding-top: 5em;
-    padding-bottom: 5em;
+
+@media (max-width: 900px) {
+    .card, .table, .table-responsive-sm {
+        border-radius: 0.5em;
+        padding: 1em;
+    }
+    .card-header, .card-body {
+        padding: 1em;
+    }
+    .base-content {
+        padding-top: 4em;
+        padding-bottom: 2em;
+    }
 }
diff --git a/workshop_app/static/workshop_app/css/jquery-ui.css b/workshop_app/static/workshop_app/css/jquery-ui.css
index a22ecb0..a39747c 100644
--- a/workshop_app/static/workshop_app/css/jquery-ui.css
+++ b/workshop_app/static/workshop_app/css/jquery-ui.css
@@ -1,3 +1,55 @@
+/* Advanced UI overrides for jQuery UI components */
+.ui-widget-content, .ui-dialog, .ui-datepicker, .ui-menu, .ui-tabs-panel {
+	border-radius: 1em !important;
+	box-shadow: 0 8px 32px rgba(44, 62, 80, 0.12) !important;
+	background: #fff !important;
+}
+.ui-dialog-titlebar, .ui-datepicker-header, .ui-tabs-nav li.ui-tabs-active {
+	background: linear-gradient(90deg, #2575fc 0%, #6a11cb 100%) !important;
+	color: #fff !important;
+	border-radius: 1em 1em 0 0 !important;
+}
+.ui-button, .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
+	background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%) !important;
+	color: #fff !important;
+	border-radius: 0.7em !important;
+	font-weight: 600 !important;
+	box-shadow: 0 2px 8px rgba(44, 62, 80, 0.10) !important;
+	border: none !important;
+	/* transition: background 0.2s, box-shadow 0.2s; */
+}
+.ui-button:hover, .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover {
+	background: linear-gradient(90deg, #2575fc 0%, #6a11cb 100%) !important;
+	color: #fff !important;
+	box-shadow: 0 4px 16px rgba(37, 117, 252, 0.18) !important;
+}
+.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
+	background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%) !important;
+	color: #fff !important;
+}
+.ui-tabs .ui-tabs-nav li {
+	border-radius: 0.7em 0.7em 0 0 !important;
+	margin-right: 0.5em !important;
+}
+.ui-tabs .ui-tabs-panel {
+	border-radius: 0 0 1em 1em !important;
+}
+.ui-datepicker .ui-datepicker-calendar td a, .ui-datepicker .ui-datepicker-calendar td span {
+	border-radius: 0.5em !important;
+	transition: background 0.2s;
+}
+.ui-datepicker .ui-datepicker-calendar td a:hover {
+	background: linear-gradient(90deg, #2575fc 0%, #6a11cb 100%) !important;
+	color: #fff !important;
+}
+.ui-dialog .ui-dialog-buttonpane button {
+	border-radius: 0.7em !important;
+	background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%) !important;
+	color: #fff !important;
+	font-weight: 600 !important;
+	box-shadow: 0 2px 8px rgba(44, 62, 80, 0.10) !important;
+	border: none !important;
+}
 /*! jQuery UI - v1.12.1 - 2016-09-14
 * http://jqueryui.com
 * Includes: core.css, accordion.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, draggable.css, resizable.css, progressbar.css, selectable.css, selectmenu.css, slider.css, sortable.css, spinner.css, tabs.css, tooltip.css, theme.css
diff --git a/workshop_app/templates/workshop_app/base.html b/workshop_app/templates/workshop_app/base.html
index 95f5fa0..7e304bd 100644
--- a/workshop_app/templates/workshop_app/base.html
+++ b/workshop_app/templates/workshop_app/base.html
@@ -27,6 +27,8 @@
     <link rel="stylesheet" href="{% static 'workshop_app/css/base.css' %}" type="text/css"/>
     <link rel="stylesheet" href="{% static 'workshop_app/css/font-awesome.css' %}" type="text/css"/>
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
+    <link rel="stylesheet" href="{% static 'workshop_app/css/advanced-stats.css' %}">
+    <link rel="stylesheet" href="{% static 'workshop_app/css/advanced-login.css' %}">
 
     {% block extra-custom-scripts %}
     {% endblock %}
@@ -35,84 +37,87 @@
 
 <body>
 {% block header %}
-    <nav class="navbar navbar-dark navbar-expand-lg bg-dark fixed-top">
-        {% if user.is_authenticated %}
-        <a class="navbar-brand text-white" href="{% url 'workshop_app:index' %}">FOSSEE Workshops</a>
-        {% else %}
-        <a class="navbar-brand text-white" href="{{request.scheme}}://{{request.get_host}}">FOSSEE Workshops</a>
-        {% endif %}
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
-                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
-            <ul class="navbar-nav">
-                <li class="nav-item">
-                    <a class="nav-link text-white" href="/">
-                        Home
-                    </a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link text-white" href="{% url 'statistics_app:public' %}">
-                        Workshop Statistics
-                    </a>
-                </li>
-            </ul>
+    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm fixed-top" style="border-radius: 0 0 1em 1em;">
+        <div class="container-fluid">
             {% if user.is_authenticated %}
-            <ul class="navbar-nav mr-auto">
-                {% if request.user|has_group:"instructor" %}
-                <li class="nav-item">
-                    <a class="nav-link text-white" href="{% url 'statistics_app:team' %}">
-                        Team Statistics
-                    </a>
-                </li>
-                {% endif %}
-                <li class="nav-item">
-                    <a class="nav-link text-white" href="{% url 'workshop_app:workshop_status_instructor' %}">
-                        Workshop Status
-                    </a>
-                </li>
-                {% if not request.user|has_group:"instructor" %}
+            <a class="navbar-brand font-weight-bold text-primary" href="{% url 'workshop_app:index' %}">
+                <span class="material-icons" style="vertical-align: middle; font-size: 2em;">school</span>
+                FOSSEE Workshops
+            </a>
+            {% else %}
+            <a class="navbar-brand font-weight-bold text-primary" href="{{request.scheme}}://{{request.get_host}}">
+                <span class="material-icons" style="vertical-align: middle; font-size: 2em;">school</span>
+                FOSSEE Workshops
+            </a>
+            {% endif %}
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
+                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                <ul class="navbar-nav mr-auto">
                     <li class="nav-item">
-                        <a class="nav-link text-white" href="{% url 'workshop_app:propose_workshop' %}">
-                            Propose Workshop
+                        <a class="nav-link text-primary font-weight-bold" href="/">
+                            <span class="material-icons" style="vertical-align: middle">home</span> Home
                         </a>
                     </li>
-                {% endif %}
-                <li class="nav-item">
-                    <a class="nav-link text-white" href="{% url 'workshop_app:workshop_type_list' %}">
-                        Workshop Types
-                    </a>
-                </li>
-            </ul>
-            <div class="my-2 my-lg-0">
-                <ul class="navbar-nav mr-auto">
+                    <li class="nav-item">
+                        <a class="nav-link text-primary font-weight-bold" href="{% url 'statistics_app:public' %}">
+                            <span class="material-icons" style="vertical-align: middle">bar_chart</span> Workshop Statistics
+                        </a>
+                    </li>
+                    {% if user.is_authenticated %}
+                        {% if request.user|has_group:"instructor" %}
+                        <li class="nav-item">
+                            <a class="nav-link text-primary font-weight-bold" href="{% url 'statistics_app:team' %}">
+                                <span class="material-icons" style="vertical-align: middle">group</span> Team Statistics
+                            </a>
+                        </li>
+                        {% endif %}
+                        <li class="nav-item">
+                            <a class="nav-link text-primary font-weight-bold" href="{% url 'workshop_app:workshop_status_instructor' %}">
+                                <span class="material-icons" style="vertical-align: middle">assignment</span> Workshop Status
+                            </a>
+                        </li>
+                        {% if not request.user|has_group:"instructor" %}
+                        <li class="nav-item">
+                            <a class="nav-link text-primary font-weight-bold" href="{% url 'workshop_app:propose_workshop' %}">
+                                <span class="material-icons" style="vertical-align: middle">lightbulb</span> Propose Workshop
+                            </a>
+                        </li>
+                        {% endif %}
+                        <li class="nav-item">
+                            <a class="nav-link text-primary font-weight-bold" href="{% url 'workshop_app:workshop_type_list' %}">
+                                <span class="material-icons" style="vertical-align: middle">category</span> Workshop Types
+                            </a>
+                        </li>
+                    {% endif %}
+                </ul>
+                {% if user.is_authenticated %}
+                <ul class="navbar-nav ml-auto">
                     <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button"
+                        <a class="nav-link dropdown-toggle text-primary font-weight-bold" href="#" id="navbarDropdown" role="button"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="material-icons" style="vertical-align: middle">account_circle</span>
-                            <p style="display: inline; vertical-align: middle">
-                                {{user.get_full_name|title}}
-                            </p>
+                            <span style="display: inline; vertical-align: middle">{{user.get_full_name|title}}</span>
                         </a>
-                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-                            <a class="dropdown-item" href="{% url 'workshop_app:view_own_profile' %}">Profile</a>
-                            <a class="dropdown-item" href="{% url 'password_change' %}">
-                                 Change Password
-                            </a>
-                            <a class="dropdown-item" href="{% url 'workshop_app:logout' %}">Logout</a>
+                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
+                            <a class="dropdown-item" href="{% url 'workshop_app:view_own_profile' %}"><span class="material-icons" style="vertical-align: middle">person</span> Profile</a>
+                            <a class="dropdown-item" href="{% url 'password_change' %}"><span class="material-icons" style="vertical-align: middle">lock</span> Change Password</a>
+                            <a class="dropdown-item" href="{% url 'workshop_app:logout' %}"><span class="material-icons" style="vertical-align: middle">logout</span> Logout</a>
                         </div>
                     </li>
                 </ul>
+                {% endif %}
             </div>
-            {% endif %}
         </div>
     </nav>
 {% endblock %}
 
-<div class="base-content">
+<div class="base-content" style="padding-top: 7em; padding-bottom: 3em; min-height: 80vh;">
     {% block content %}
-        <h1>Base Template Content. Please override me</h1>
+        <h1 class="text-center text-primary" style="font-weight:700;">Welcome to FOSSEE Workshop Portal</h1>
+        <p class="text-center" style="font-size:1.2em;">Please use the navigation bar above to access features.</p>
     {% endblock %}
 </div>
 
@@ -125,9 +130,10 @@ <h1>Base Template Content. Please override me</h1>
 </script>
 
 </body>
-<footer class="footer">
+<footer class="footer" style="background: linear-gradient(90deg, #2575fc 0%, #6a11cb 100%); color: #fff; padding: 1.5em 0; font-size: 1.1em;">
     {% block footer %}
-       <div class="container">
+       <div class="container text-center">
+           <span class="material-icons" style="vertical-align: middle;">code</span>
            Developed by FOSSEE group, IIT Bombay
        </div> 
     {% endblock %}
diff --git a/workshop_app/templates/workshop_app/login.html b/workshop_app/templates/workshop_app/login.html
index 38a1c17..2d22581 100644
--- a/workshop_app/templates/workshop_app/login.html
+++ b/workshop_app/templates/workshop_app/login.html
@@ -5,10 +5,11 @@
 {% endblock %}
 
 {% block content %}
+    <link rel="stylesheet" href="{% static 'workshop_app/css/advanced-login.css' %}">
     <div class="container">
         <div class="row justify-content-center">
             <div class="col-md-6 col-md-offset-6">
-                <div class="card">
+                <div class="card login-card">
                     <div class="card-body">
                         <form class="px-3 py-3" method="post">
                         {% csrf_token %}