292 lines
7.9 KiB
PHP
292 lines
7.9 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"></i> Student Profile </h2>
|
|
<p>Manage your personal information and academic details.</p>
|
|
</div>
|
|
|
|
<!-- Main Profile Row -->
|
|
<div class="row g-4">
|
|
<!-- Profile Card -->
|
|
<div class="col-lg-4">
|
|
<div class="profile-card text-center">
|
|
<img src="{{ !empty($student->image) ? asset($student->image) : 'https://i.pravatar.cc/300' }}"
|
|
class="profile-image" alt="Profile Image">
|
|
|
|
<h3 class="student-name">{{ $student->full_name }}</h3>
|
|
|
|
<span class="student-id">
|
|
Student ID : {{ $student->student_id }}
|
|
</span>
|
|
<hr>
|
|
|
|
<button class="edit-btn mt-3">
|
|
<i class="fas fa-edit"></i> Edit Profile
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Personal 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">{{ $student->full_name }}</span>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<span class="label">NIC / Passport</span>
|
|
<span class="value">{{ $student->nic_passport }}</span>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<span class="label">Date of Birth</span>
|
|
<span class="value">
|
|
{{ !empty($student->date_of_birth) ? date('d F Y', strtotime($student->date_of_birth)) : 'N/A' }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<span class="label">Gender</span>
|
|
<span class="value">{{ $student->gender }}</span>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<span class="label">Email</span>
|
|
<span class="value">{{ $student->email }}</span>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<span class="label">Phone</span>
|
|
<span class="value">{{ $student->phone }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Education & Course Details Row -->
|
|
<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">{{ $student->qualification }}</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="label">Institute</span>
|
|
<span class="value">{{ $student->institute }}</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="label">Year Completed</span>
|
|
<span class="value">{{ $student->year_completed }}</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> {{ $student->course_name }}
|
|
</div>
|
|
<div class="course-item">
|
|
<i class="fas fa-calendar"></i> Duration : {{ $student->duration }}
|
|
</div>
|
|
<div class="course-item">
|
|
<i class="fas fa-layer-group"></i> Current Semester : {{ $student->current_semester }}
|
|
</div>
|
|
<div class="course-item">
|
|
<i class="fas fa-user-tie"></i> Trainer : {{ $student->trainer_name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
@endsection |