297 lines
7.6 KiB
PHP
297 lines
7.6 KiB
PHP
@extends('layouts.studentportalnav')
|
|
|
|
@section('title', 'Student Profile')
|
|
|
|
@section('content')
|
|
|
|
<!-- Bootstrap 5 -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
<!-- Google Font -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
:root {
|
|
--theme-navy: #2D355B; /* Primary Navy */
|
|
--theme-navy-dark: #1F2541; /* Dark Navy */
|
|
--theme-red: #822424; /* Primary Accent Red */
|
|
--theme-red-hover: #df2c3e; /* Red Hover */
|
|
--theme-yellow: #FFEA85; /* Accent Yellow/Gold */
|
|
--bg-light: #F6F6F6; /* Page Background */
|
|
--white: #ffffff;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Poppins', sans-serif;
|
|
background: var(--bg-light);
|
|
}
|
|
|
|
/* Header */
|
|
.profile-header {
|
|
background: linear-gradient(135deg, var(--theme-navy) 0%, var(--theme-navy-dark) 100%) !important;
|
|
color: var(--white);
|
|
border-radius: 16px;
|
|
padding: 35px 30px;
|
|
margin-bottom: 30px;
|
|
box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
|
|
border-left: 5px solid var(--theme-red);
|
|
}
|
|
|
|
.profile-header h2 {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.profile-header p {
|
|
color: rgba(255, 255, 255, 0.85);
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Profile Card */
|
|
.profile-card {
|
|
background: var(--white);
|
|
border-radius: 16px;
|
|
padding: 30px;
|
|
border: 1px solid #e2e8f0;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
|
|
height: 100%;
|
|
}
|
|
|
|
/* Student Image */
|
|
.profile-image {
|
|
width: 140px;
|
|
height: 140px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
border: 4px solid var(--theme-navy);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.student-name {
|
|
color: var(--theme-navy);
|
|
font-weight: 700;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.student-id {
|
|
background: var(--theme-navy);
|
|
color: var(--white);
|
|
padding: 8px 20px;
|
|
border-radius: 50px;
|
|
display: inline-block;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
/* Information */
|
|
.info-title {
|
|
color: var(--theme-navy);
|
|
font-weight: 700;
|
|
border-bottom: 2px solid var(--theme-yellow);
|
|
padding-bottom: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.info-title i {
|
|
color: var(--theme-red);
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid #f1f5f9;
|
|
}
|
|
|
|
.info-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.label {
|
|
color: #64748b;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.value {
|
|
font-weight: 600;
|
|
color: #1e293b;
|
|
}
|
|
|
|
/* Course Box */
|
|
.course-box {
|
|
background: linear-gradient(135deg, var(--theme-navy) 0%, var(--theme-navy-dark) 100%);
|
|
color: var(--white);
|
|
padding: 30px;
|
|
border-radius: 16px;
|
|
box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
|
|
height: 100%;
|
|
}
|
|
|
|
.course-box h4 {
|
|
color: var(--theme-yellow);
|
|
font-weight: 700;
|
|
margin-bottom: 20px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.course-item {
|
|
margin-top: 14px;
|
|
font-size: 15px;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
.course-item i {
|
|
color: var(--theme-yellow);
|
|
width: 28px;
|
|
}
|
|
|
|
/* Buttons */
|
|
.edit-btn {
|
|
background: var(--theme-red) !important;
|
|
color: var(--white) !important;
|
|
border: none;
|
|
border-radius: 8px;
|
|
padding: 10px 25px;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.edit-btn:hover {
|
|
background: var(--theme-red-hover) !important;
|
|
color: var(--white) !important;
|
|
}
|
|
|
|
@media(max-width:768px) {
|
|
.profile-header, .profile-card, .course-box {
|
|
padding: 25px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="container py-4">
|
|
|
|
<!-- Header -->
|
|
<div class="profile-header">
|
|
<h2>
|
|
<i class="fas fa-user-graduate me-2" style="color: var(--theme-yellow);"></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 mb-2">
|
|
<h3 class="student-name">Kasun Perera</h3>
|
|
|
|
<span class="student-id my-2">
|
|
Student ID : AEA20260045
|
|
</span>
|
|
<hr class="my-3" style="color: #cbd5e1;">
|
|
|
|
<button class="edit-btn shadow-sm">
|
|
<i class="fas fa-edit me-1"></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">Kasuni 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 me-2"></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 |