258 lines
7.2 KiB
PHP
258 lines
7.2 KiB
PHP
@extends('admin.layouts.app')
|
||
|
||
@section('page-title', 'Profile')
|
||
|
||
@section('content')
|
||
<div class="container-fluid px-0 bg-transparent">
|
||
<style>
|
||
body {
|
||
background: linear-gradient(135deg, #f2f6ff, #fefefe);
|
||
font-family: "Poppins", sans-serif;
|
||
}
|
||
|
||
/* PROFILE HEADER */
|
||
.profile-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
flex-wrap: wrap;
|
||
gap: 1rem;
|
||
padding: 36px 32px;
|
||
background: linear-gradient(120deg, #4e73df 68%, #1cc88a 100%);
|
||
border-radius: 20px;
|
||
color: white;
|
||
box-shadow: 0 8px 28px rgba(24,40,90,0.09);
|
||
margin-bottom: 34px;
|
||
position: relative;
|
||
min-height: 140px;
|
||
}
|
||
.profile-header::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: -58px;
|
||
right: -85px;
|
||
width: 210px;
|
||
height: 210px;
|
||
background: rgba(255,255,255,0.14);
|
||
border-radius: 50%;
|
||
}
|
||
.avatar {
|
||
width: 98px;
|
||
height: 98px;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
border: 4px solid rgba(255,255,255,0.7);
|
||
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
|
||
background: #fff;
|
||
z-index: 1;
|
||
}
|
||
.main-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
z-index: 1;
|
||
flex: 1;
|
||
}
|
||
.main-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 25px;
|
||
}
|
||
.field-group {
|
||
min-width: 210px;
|
||
}
|
||
.label {
|
||
font-size: 0.9rem;
|
||
color: #dbe7f4;
|
||
font-weight: 500;
|
||
}
|
||
.value {
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
background: rgba(255,255,255,0.13);
|
||
border-radius: 8px;
|
||
padding: 6px 12px;
|
||
border: 1.5px solid rgba(255,255,255,0.18);
|
||
transition: background 0.13s;
|
||
}
|
||
.value:hover { background: rgba(255,255,255,0.22); }
|
||
|
||
/* STATS + CARDS COMMON */
|
||
.profile-stats-row, .profile-grid-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 18px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.stat-card, .profile-card {
|
||
background: #fff;
|
||
border-radius: 14px;
|
||
box-shadow: 0 3px 18px rgba(60,80,120,0.08);
|
||
padding: 20px;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
flex: 1 1 200px;
|
||
}
|
||
.stat-card:hover, .profile-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 6px 25px rgba(50,70,120,0.18);
|
||
}
|
||
|
||
/* STATS */
|
||
.stat-card::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: -20px;
|
||
right: -20px;
|
||
width: 90px;
|
||
height: 90px;
|
||
background: linear-gradient(135deg, #c4d7ff, #e9f0ff);
|
||
border-radius: 50%;
|
||
opacity: 0.25;
|
||
}
|
||
.stat-label {
|
||
font-size: 0.9rem;
|
||
color: #8b96ad;
|
||
font-weight: 500;
|
||
}
|
||
.stat-value {
|
||
font-size: 1.6rem;
|
||
font-weight: 700;
|
||
display: flex;
|
||
align-items: center;
|
||
color: #1b2330;
|
||
}
|
||
.stat-footer { font-size: 0.9rem; }
|
||
.positive { color: #23a25d; }
|
||
.negative { color: #e54141; }
|
||
.neutral { color: #9a9ea8; }
|
||
|
||
/* PROFILE CARDS */
|
||
.profile-card h6 {
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
margin-bottom: 12px;
|
||
color: #1b2330;
|
||
border-left: 4px solid #3767f4;
|
||
padding-left: 8px;
|
||
}
|
||
.activity-list, .quick-action-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
.activity-list li, .quick-action-list li {
|
||
padding: 9px 2px;
|
||
font-size: 1rem;
|
||
border-bottom: 1px solid #f2f4f8;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
transition: 0.2s ease;
|
||
}
|
||
.activity-list li:hover { background: #f7faff; border-radius: 6px; }
|
||
.quick-action-list li a {
|
||
text-decoration: none;
|
||
color: #2563eb;
|
||
font-weight: 600;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
transition: 0.2s ease;
|
||
}
|
||
.quick-action-list li a:hover { color: #1e40af; transform: translateX(4px); }
|
||
|
||
@media (max-width: 1000px) {
|
||
.profile-header, .profile-stats-row, .profile-grid-row {
|
||
flex-direction: column;
|
||
text-align: center;
|
||
}
|
||
.avatar { margin: 0 auto 15px; }
|
||
.main-row { justify-content: center; }
|
||
}
|
||
</style>
|
||
|
||
<!-- PROFILE HEADER -->
|
||
<div class="profile-header">
|
||
<img src="https://i.pravatar.cc/100" class="avatar" alt="Avatar" />
|
||
<div class="main-info">
|
||
<div class="main-row">
|
||
<div class="field-group">
|
||
<div class="label">Name</div>
|
||
<div class="value">John Doe</div>
|
||
</div>
|
||
<div class="field-group">
|
||
<div class="label">Email</div>
|
||
<div class="value">john@example.com</div>
|
||
</div>
|
||
<div class="field-group">
|
||
<div class="label">Mobile No</div>
|
||
<div class="value">+91 12345 54321</div>
|
||
</div>
|
||
</div>
|
||
<div class="main-row">
|
||
<div class="field-group">
|
||
<div class="label">Company Name</div>
|
||
<div class="value">XYZ Infotech</div>
|
||
</div>
|
||
<div class="field-group" style="min-width:260px;">
|
||
<div class="label">Company Address</div>
|
||
<div class="value">XYZ Infotech, East Andheri, Mumbai 400 001</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- STATS ROW -->
|
||
<div class="profile-stats-row">
|
||
<div class="stat-card">
|
||
<span class="stat-label">Total Shipment</span>
|
||
<span class="stat-value">📦 1,250</span>
|
||
<div class="stat-footer positive">+12% vs last month</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<span class="stat-label">In Transit</span>
|
||
<span class="stat-value" style="color:#2563eb;">🚚 320</span>
|
||
<div class="stat-footer neutral">65% of capacity</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<span class="stat-label">At Customs</span>
|
||
<span class="stat-value" style="color:#f59e0b;">🛄 85</span>
|
||
<div class="stat-footer neutral">Avg 2.3 days processing</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<span class="stat-label">Delayed</span>
|
||
<span class="stat-value" style="color:#e11d48;">⏰ 55</span>
|
||
<div class="stat-footer negative">-8% vs last month</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<span class="stat-label">Delivered</span>
|
||
<span class="stat-value" style="color:#22c55e;">✅ 780</span>
|
||
<div class="stat-footer positive">98.2% success rate</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- BOTTOM CARDS -->
|
||
<div class="profile-grid-row">
|
||
<div class="profile-card">
|
||
<h6>Recent Activity</h6>
|
||
<ul class="activity-list">
|
||
<li>📦 Shipment #SH-2024-001 delivered <span style="color:#a1a5ad;font-size:0.9em;margin-left:8px;">5 min ago</span></li>
|
||
<li>📝 New shipment #SH-2024-002 <span style="color:#a1a5ad;font-size:0.9em;margin-left:8px;">13 min ago</span></li>
|
||
<li>⏰ Delay for #SH-2024-003 <span style="color:#a1a5ad;font-size:0.9em;margin-left:8px;">1 hr ago</span></li>
|
||
</ul>
|
||
</div>
|
||
<div class="profile-card">
|
||
<h6>Quick Actions</h6>
|
||
<ul class="quick-action-list">
|
||
<li><a href="#">➕ Create Shipment</a></li>
|
||
<li><a href="#">🔍 Track Package</a></li>
|
||
<li><a href="#">👥 Add Customer</a></li>
|
||
<li><a href="#">📊 View Reports</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endsection
|