my updates
This commit is contained in:
Utkarsh Khedkar
257
resources/views/admin/profile.blade.php
Normal file
257
resources/views/admin/profile.blade.php
Normal file
@@ -0,0 +1,257 @@
|
||||
@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
|
||||
Reference in New Issue
Block a user