549 lines
6.9 KiB
PHP
549 lines
6.9 KiB
PHP
@extends('layouts.studentportalnav')
|
|
|
|
@section('title', 'Student Profile')
|
|
|
|
@section('content')
|
|
|
|
<style>
|
|
|
|
body{
|
|
background:#f6f7fb;
|
|
}
|
|
|
|
|
|
/* Header */
|
|
|
|
.profile-header{
|
|
|
|
background:linear-gradient(135deg,#5E244E,#4a1c3e);
|
|
color:#fff;
|
|
border-radius:20px;
|
|
padding:40px;
|
|
margin-bottom:35px;
|
|
box-shadow:0 15px 35px rgba(0,0,0,.15);
|
|
|
|
}
|
|
|
|
|
|
.profile-header h2{
|
|
|
|
font-weight:700;
|
|
|
|
}
|
|
|
|
|
|
.profile-header p{
|
|
|
|
color:#ddd;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Profile Card */
|
|
|
|
.profile-card{
|
|
|
|
background:#fff;
|
|
border-radius:20px;
|
|
padding:30px;
|
|
box-shadow:0 10px 30px rgba(0,0,0,.08);
|
|
height:100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Student Image */
|
|
|
|
.profile-image{
|
|
|
|
width:150px;
|
|
height:150px;
|
|
border-radius:50%;
|
|
object-fit:cover;
|
|
border:6px solid #d4af37;
|
|
|
|
}
|
|
|
|
|
|
.student-name{
|
|
|
|
color:#5E244E;
|
|
font-weight:700;
|
|
margin-top:15px;
|
|
|
|
}
|
|
|
|
|
|
.student-id{
|
|
|
|
background:#5E244E;
|
|
color:#fff;
|
|
padding:8px 20px;
|
|
border-radius:50px;
|
|
display:inline-block;
|
|
font-size:14px;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Information */
|
|
|
|
.info-title{
|
|
|
|
color:#5E244E;
|
|
font-weight:700;
|
|
border-bottom:2px solid #d4af37;
|
|
padding-bottom:10px;
|
|
margin-bottom:20px;
|
|
|
|
}
|
|
|
|
|
|
.info-row{
|
|
|
|
display:flex;
|
|
justify-content:space-between;
|
|
padding:12px 0;
|
|
border-bottom:1px solid #eee;
|
|
|
|
}
|
|
|
|
|
|
.label{
|
|
|
|
color:#777;
|
|
|
|
}
|
|
|
|
|
|
.value{
|
|
|
|
font-weight:600;
|
|
color:#333;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Course */
|
|
|
|
.course-box{
|
|
|
|
background:#5E244E;
|
|
color:#fff;
|
|
padding:25px;
|
|
border-radius:20px;
|
|
|
|
}
|
|
|
|
|
|
.course-box h4{
|
|
|
|
color:#d4af37;
|
|
font-weight:700;
|
|
|
|
}
|
|
|
|
|
|
.course-item{
|
|
|
|
margin-top:12px;
|
|
|
|
}
|
|
|
|
|
|
.course-item i{
|
|
|
|
color:#d4af37;
|
|
width:25px;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Button */
|
|
|
|
.edit-btn{
|
|
|
|
background:#d4af37;
|
|
color:white;
|
|
border:none;
|
|
border-radius:50px;
|
|
padding:12px 30px;
|
|
font-weight:600;
|
|
|
|
}
|
|
|
|
|
|
.edit-btn:hover{
|
|
|
|
background:#c49d20;
|
|
color:#fff;
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
<div class="container py-4">
|
|
|
|
|
|
<!-- Header -->
|
|
|
|
<div class="profile-header">
|
|
|
|
|
|
<h2>
|
|
|
|
<i class="fas fa-user-graduate"></i>
|
|
|
|
Student Profile
|
|
|
|
</h2>
|
|
|
|
|
|
<p>
|
|
|
|
Manage your personal information and academic details.
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="row g-4">
|
|
|
|
|
|
<!-- Profile Left -->
|
|
|
|
|
|
<div class="col-lg-4">
|
|
|
|
|
|
<div class="profile-card text-center">
|
|
|
|
|
|
<img src="https://i.pravatar.cc/300"
|
|
class="profile-image">
|
|
|
|
|
|
|
|
<h3 class="student-name">
|
|
|
|
Kasun Perera
|
|
|
|
</h3>
|
|
|
|
|
|
|
|
<span class="student-id">
|
|
|
|
Student ID : AEA20260045
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<hr>
|
|
|
|
|
|
|
|
<button class="edit-btn mt-3">
|
|
|
|
<i class="fas fa-edit"></i>
|
|
|
|
Edit Profile
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Details -->
|
|
|
|
|
|
<div class="col-lg-8">
|
|
|
|
|
|
<div class="profile-card">
|
|
|
|
|
|
<h4 class="info-title">
|
|
|
|
<i class="fas fa-user"></i>
|
|
|
|
Personal Information
|
|
|
|
</h4>
|
|
|
|
|
|
|
|
<div class="info-row">
|
|
|
|
<span class="label">
|
|
Full Name
|
|
</span>
|
|
|
|
<span class="value">
|
|
Kasun Perera
|
|
</span>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="info-row">
|
|
|
|
<span class="label">
|
|
NIC / Passport
|
|
</span>
|
|
|
|
<span class="value">
|
|
200012345678
|
|
</span>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="info-row">
|
|
|
|
<span class="label">
|
|
Date of Birth
|
|
</span>
|
|
|
|
<span class="value">
|
|
15 March 2000
|
|
</span>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="info-row">
|
|
|
|
<span class="label">
|
|
Gender
|
|
</span>
|
|
|
|
<span class="value">
|
|
Male
|
|
</span>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="info-row">
|
|
|
|
<span class="label">
|
|
Email
|
|
</span>
|
|
|
|
<span class="value">
|
|
student@email.com
|
|
</span>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="info-row">
|
|
|
|
<span class="label">
|
|
Phone
|
|
</span>
|
|
|
|
<span class="value">
|
|
+94 77 1234567
|
|
</span>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="row g-4 mt-1">
|
|
|
|
|
|
<!-- Education -->
|
|
|
|
|
|
<div class="col-lg-6">
|
|
|
|
|
|
<div class="profile-card">
|
|
|
|
|
|
<h4 class="info-title">
|
|
|
|
<i class="fas fa-graduation-cap"></i>
|
|
|
|
Educational Background
|
|
|
|
</h4>
|
|
|
|
|
|
|
|
|
|
<div class="info-row">
|
|
|
|
<span class="label">
|
|
Qualification
|
|
</span>
|
|
|
|
<span class="value">
|
|
NVQ Level 4
|
|
</span>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="info-row">
|
|
|
|
<span class="label">
|
|
Institute
|
|
</span>
|
|
|
|
<span class="value">
|
|
ABC Technical College
|
|
</span>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="info-row">
|
|
|
|
<span class="label">
|
|
Year Completed
|
|
</span>
|
|
|
|
<span class="value">
|
|
2025
|
|
</span>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Course Details -->
|
|
|
|
|
|
<div class="col-lg-6">
|
|
|
|
|
|
<div class="course-box">
|
|
|
|
|
|
<h4>
|
|
|
|
<i class="fas fa-car"></i>
|
|
|
|
Course Details
|
|
|
|
</h4>
|
|
|
|
|
|
|
|
<div class="course-item">
|
|
|
|
<i class="fas fa-book"></i>
|
|
|
|
Diploma in Automobile Engineering
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="course-item">
|
|
|
|
<i class="fas fa-calendar"></i>
|
|
|
|
Duration : 2 Years
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="course-item">
|
|
|
|
<i class="fas fa-layer-group"></i>
|
|
|
|
Current Semester : Semester 2
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="course-item">
|
|
|
|
<i class="fas fa-user-tie"></i>
|
|
|
|
Trainer : Mr. Nimal Silva
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
@endsection |