528 lines
6.8 KiB
PHP
528 lines
6.8 KiB
PHP
@extends('layouts.studentportalnav')
|
|
|
|
@section('title','Results')
|
|
|
|
@section('content')
|
|
|
|
<style>
|
|
|
|
body{
|
|
background:#f6f7fb;
|
|
}
|
|
|
|
/* =======================
|
|
Hero
|
|
======================= */
|
|
|
|
.result-hero{
|
|
|
|
background:linear-gradient(135deg,#5E244E,#4a1c3e);
|
|
color:#fff;
|
|
border-radius:20px;
|
|
padding:40px;
|
|
margin-bottom:30px;
|
|
box-shadow:0 15px 35px rgba(0,0,0,.15);
|
|
|
|
}
|
|
|
|
.result-hero h2{
|
|
|
|
font-weight:700;
|
|
|
|
}
|
|
|
|
.result-hero p{
|
|
|
|
color:#ddd;
|
|
margin-bottom:0;
|
|
|
|
}
|
|
|
|
/* =======================
|
|
Summary Cards
|
|
======================= */
|
|
|
|
.summary-card{
|
|
|
|
background:#fff;
|
|
border:none;
|
|
border-radius:20px;
|
|
padding:25px;
|
|
text-align:center;
|
|
box-shadow:0 10px 25px rgba(0,0,0,.08);
|
|
transition:.3s;
|
|
|
|
}
|
|
|
|
.summary-card:hover{
|
|
|
|
transform:translateY(-5px);
|
|
|
|
}
|
|
|
|
.summary-card i{
|
|
|
|
font-size:40px;
|
|
color:#5E244E;
|
|
margin-bottom:15px;
|
|
|
|
}
|
|
|
|
.summary-card h3{
|
|
|
|
color:#5E244E;
|
|
font-weight:700;
|
|
|
|
}
|
|
|
|
.summary-card small{
|
|
|
|
color:#777;
|
|
|
|
}
|
|
|
|
/* =======================
|
|
Result Table
|
|
======================= */
|
|
|
|
.result-card{
|
|
|
|
margin-top:35px;
|
|
background:#fff;
|
|
border-radius:20px;
|
|
overflow:hidden;
|
|
box-shadow:0 10px 30px rgba(0,0,0,.08);
|
|
|
|
}
|
|
|
|
.table-head{
|
|
|
|
background:#5E244E;
|
|
color:#fff;
|
|
padding:18px 25px;
|
|
|
|
}
|
|
|
|
.table{
|
|
|
|
margin-bottom:0;
|
|
|
|
}
|
|
|
|
.table th{
|
|
|
|
background:#744a68;
|
|
color:#fff;
|
|
border:none;
|
|
|
|
}
|
|
|
|
.table td{
|
|
|
|
vertical-align:middle;
|
|
|
|
}
|
|
|
|
.grade{
|
|
|
|
padding:7px 15px;
|
|
border-radius:30px;
|
|
font-weight:600;
|
|
color:#fff;
|
|
display:inline-block;
|
|
|
|
}
|
|
|
|
.a{
|
|
|
|
background:#28a745;
|
|
|
|
}
|
|
|
|
.b{
|
|
|
|
background:#17a2b8;
|
|
|
|
}
|
|
|
|
.c{
|
|
|
|
background:#ffc107;
|
|
color:#222;
|
|
|
|
}
|
|
|
|
.fail{
|
|
|
|
background:#dc3545;
|
|
|
|
}
|
|
|
|
/* =======================
|
|
Progress
|
|
======================= */
|
|
|
|
.progress{
|
|
|
|
height:10px;
|
|
border-radius:20px;
|
|
|
|
}
|
|
|
|
/* =======================
|
|
Download
|
|
======================= */
|
|
|
|
.download-card{
|
|
|
|
margin-top:30px;
|
|
background:#4a1c3e;
|
|
color:#fff;
|
|
border-radius:20px;
|
|
padding:30px;
|
|
display:flex;
|
|
justify-content:space-between;
|
|
align-items:center;
|
|
flex-wrap:wrap;
|
|
|
|
}
|
|
|
|
.download-card h4{
|
|
|
|
color:#d4af37;
|
|
font-weight:700;
|
|
|
|
}
|
|
|
|
.btn-result{
|
|
|
|
background:#d4af37;
|
|
color:#fff;
|
|
border:none;
|
|
border-radius:50px;
|
|
padding:12px 30px;
|
|
font-weight:600;
|
|
|
|
}
|
|
|
|
.btn-result:hover{
|
|
|
|
background:#c49d20;
|
|
color:#fff;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
<div class="container py-4">
|
|
|
|
<!-- Hero -->
|
|
|
|
<div class="result-hero">
|
|
|
|
<h2>
|
|
|
|
<i class="fas fa-award"></i>
|
|
|
|
Academic Results
|
|
|
|
</h2>
|
|
|
|
<p>
|
|
|
|
View your examination results and academic performance.
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<!-- Summary -->
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-md-4 mb-4">
|
|
|
|
<div class="summary-card">
|
|
|
|
<i class="fas fa-chart-line"></i>
|
|
|
|
<h3>82%</h3>
|
|
|
|
<small>Overall Average</small>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-4 mb-4">
|
|
|
|
<div class="summary-card">
|
|
|
|
<i class="fas fa-medal"></i>
|
|
|
|
<h3>3.65</h3>
|
|
|
|
<small>Current GPA</small>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-4 mb-4">
|
|
|
|
<div class="summary-card">
|
|
|
|
<i class="fas fa-book"></i>
|
|
|
|
<h3>6 / 6</h3>
|
|
|
|
<small>Modules Passed</small>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Result Table -->
|
|
|
|
<div class="result-card">
|
|
|
|
<div class="table-head">
|
|
|
|
<h4 class="mb-0">
|
|
|
|
Semester Results
|
|
|
|
</h4>
|
|
|
|
</div>
|
|
|
|
<table class="table table-hover">
|
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<th>Module</th>
|
|
<th>Marks</th>
|
|
<th>Grade</th>
|
|
<th>Status</th>
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
<tr>
|
|
|
|
<td>Engine Technology</td>
|
|
|
|
<td>91</td>
|
|
|
|
<td>
|
|
|
|
<span class="grade a">
|
|
|
|
A+
|
|
|
|
</span>
|
|
|
|
</td>
|
|
|
|
<td>Pass</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Brake Systems</td>
|
|
|
|
<td>84</td>
|
|
|
|
<td>
|
|
|
|
<span class="grade a">
|
|
|
|
A
|
|
|
|
</span>
|
|
|
|
</td>
|
|
|
|
<td>Pass</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Electrical Systems</td>
|
|
|
|
<td>79</td>
|
|
|
|
<td>
|
|
|
|
<span class="grade b">
|
|
|
|
B+
|
|
|
|
</span>
|
|
|
|
</td>
|
|
|
|
<td>Pass</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Transmission Systems</td>
|
|
|
|
<td>74</td>
|
|
|
|
<td>
|
|
|
|
<span class="grade b">
|
|
|
|
B
|
|
|
|
</span>
|
|
|
|
</td>
|
|
|
|
<td>Pass</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Workshop Practice</td>
|
|
|
|
<td>88</td>
|
|
|
|
<td>
|
|
|
|
<span class="grade a">
|
|
|
|
A
|
|
|
|
</span>
|
|
|
|
</td>
|
|
|
|
<td>Pass</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Industrial Safety</td>
|
|
|
|
<td>81</td>
|
|
|
|
<td>
|
|
|
|
<span class="grade a">
|
|
|
|
A-
|
|
|
|
</span>
|
|
|
|
</td>
|
|
|
|
<td>Pass</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
<!-- Performance -->
|
|
|
|
<div class="result-card mt-4">
|
|
|
|
<div class="table-head">
|
|
|
|
<h4 class="mb-0">
|
|
|
|
Overall Performance
|
|
|
|
</h4>
|
|
|
|
</div>
|
|
|
|
<div class="p-4">
|
|
|
|
<p class="mb-2">
|
|
|
|
Course Completion
|
|
|
|
</p>
|
|
|
|
<div class="progress mb-4">
|
|
|
|
<div class="progress-bar bg-success"
|
|
|
|
style="width:82%">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<p class="mb-2">
|
|
|
|
Attendance Score
|
|
|
|
</p>
|
|
|
|
<div class="progress">
|
|
|
|
<div class="progress-bar bg-warning"
|
|
|
|
style="width:90%">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Download -->
|
|
|
|
<div class="download-card">
|
|
|
|
<div>
|
|
|
|
<h4>
|
|
|
|
Download Official Result Sheet
|
|
|
|
</h4>
|
|
|
|
<p class="mb-0">
|
|
|
|
Download your latest semester examination results in PDF format.
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<button class="btn btn-result">
|
|
|
|
<i class="fas fa-download"></i>
|
|
|
|
Download PDF
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@endsection |