629 lines
28 KiB
HTML
629 lines
28 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Parent Portal - Dance Vibe</title>
|
|
<!-- Google Fonts for Elegant Dance Vibe -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet">
|
|
<!-- Bootstrap 5 for Layout -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<!-- FontAwesome for Icons -->
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
|
|
<style>
|
|
:root {
|
|
--primary: #8c52ff;
|
|
--primary-light: #ebd4fb;
|
|
--primary-dark: #6b21a8;
|
|
--dark-bg: #111625;
|
|
--text-main: #2d3748;
|
|
--text-muted: #4a5568;
|
|
--glass-bg: rgba(255, 255, 255, 0.85);
|
|
--glass-border: rgba(255, 255, 255, 0.6);
|
|
--shadow-soft: 0 10px 40px -10px rgba(0,0,0,0.15);
|
|
--shadow-hover: 0 15px 50px -10px rgba(140, 82, 255, 0.4);
|
|
}
|
|
|
|
/* ----- ANIMATED DANCE BACKGROUND ----- */
|
|
body {
|
|
font-family: 'Outfit', sans-serif; /* Modern clean body */
|
|
color: var(--text-main);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 0;
|
|
background: linear-gradient(120deg, var(--primary-light), var(--primary), #d4a5ff);
|
|
background-size: 200% 200%;
|
|
animation: gradientMove 12s ease infinite;
|
|
position: relative;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
@keyframes gradientMove {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
|
|
/* Abstract Dancing Ribbons / Fluid Shapes in background */
|
|
.dance-shape-1, .dance-shape-2 {
|
|
position: absolute;
|
|
filter: blur(60px);
|
|
z-index: -1;
|
|
opacity: 0.6;
|
|
animation: danceFloat 20s infinite alternate ease-in-out;
|
|
}
|
|
.dance-shape-1 {
|
|
width: 400px;
|
|
height: 400px;
|
|
background: rgba(255, 255, 255, 0.4);
|
|
top: -100px;
|
|
left: -100px;
|
|
border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; /* Organic fluid shape */
|
|
animation-duration: 25s;
|
|
}
|
|
.dance-shape-2 {
|
|
width: 500px;
|
|
height: 500px;
|
|
background: var(--primary-light);
|
|
bottom: -150px;
|
|
right: -100px;
|
|
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
|
|
animation-duration: 18s;
|
|
animation-direction: alternate-reverse;
|
|
}
|
|
|
|
@keyframes danceFloat {
|
|
0% { transform: translate(0, 0) rotate(0deg) scale(1); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
|
|
50% { transform: translate(50px, 100px) rotate(180deg) scale(1.1); border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
|
|
100% { transform: translate(-50px, 50px) rotate(360deg) scale(0.9); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
|
|
}
|
|
|
|
/* ----- TYPOGRAPHY (ELEGANT/CLASSIC) ----- */
|
|
h1, h2, h3, h4, h5, h6, .brand-logo, .page-title, .section-title {
|
|
/* Cormorant Garamond gives a very elegant, theatrical, graceful feel */
|
|
font-family: 'Cormorant Garamond', serif;
|
|
}
|
|
|
|
/* ----- NAVBAR ----- */
|
|
.modern-navbar {
|
|
background: rgba(255, 255, 255, 0.85);
|
|
backdrop-filter: blur(15px);
|
|
border-bottom: 1px solid rgba(255,255,255,0.3);
|
|
padding: 15px 0;
|
|
box-shadow: 0 4px 30px rgba(0,0,0,0.05);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1000;
|
|
}
|
|
.brand-logo {
|
|
font-weight: 700;
|
|
font-size: 2rem;
|
|
color: var(--primary-dark);
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
font-style: italic; /* Adds movement to the logo */
|
|
}
|
|
.brand-icon {
|
|
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
|
|
color: white;
|
|
width: 46px;
|
|
height: 46px;
|
|
border-radius: 50% 50% 50% 10%; /* Subtle dancer shoe/pointe shape */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.4rem;
|
|
box-shadow: 0 4px 15px rgba(140, 82, 255, 0.3);
|
|
transform: rotate(-15deg); /* Slight tilt for dynamic feel */
|
|
}
|
|
.nav-link-custom {
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
transition: color 0.3s;
|
|
margin-right: 20px;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
font-size: 0.85rem;
|
|
}
|
|
.nav-link-custom:hover {
|
|
color: var(--primary);
|
|
}
|
|
|
|
/* ----- BUTTONS ----- */
|
|
.btn-gradient {
|
|
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
|
|
color: white;
|
|
border: none;
|
|
border-radius: 50px;
|
|
padding: 10px 28px;
|
|
font-family: 'Outfit', sans-serif;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
font-size: 0.85rem;
|
|
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy rhythmic hover */
|
|
box-shadow: 0 4px 15px rgba(140, 82, 255, 0.3);
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.btn-gradient:hover {
|
|
transform: translateY(-4px) scale(1.05); /* Dance-like bounce */
|
|
box-shadow: 0 10px 25px rgba(140, 82, 255, 0.5);
|
|
color: white;
|
|
}
|
|
|
|
/* ----- GLASS CARDS ----- */
|
|
.glass-card {
|
|
background: var(--glass-bg);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: 20px 4px 20px 4px; /* Rhythmic asymmetrical corners */
|
|
padding: 24px;
|
|
box-shadow: var(--shadow-soft);
|
|
transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.glass-card:hover {
|
|
transform: translateY(-8px);
|
|
border-radius: 4px 20px 4px 20px; /* Shift corners on hover for a dancing effect */
|
|
box-shadow: var(--shadow-hover);
|
|
}
|
|
|
|
/* Card decorative blob */
|
|
.glass-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -30px;
|
|
right: -30px;
|
|
width: 120px;
|
|
height: 120px;
|
|
background: linear-gradient(135deg, transparent, var(--primary-light));
|
|
opacity: 0.5;
|
|
border-radius: 50%;
|
|
transition: transform 0.8s ease;
|
|
}
|
|
.glass-card:hover::before {
|
|
transform: scale(1.8) rotate(45deg);
|
|
}
|
|
|
|
/* ----- TYPOGRAPHY & ELEMENTS ----- */
|
|
.page-title {
|
|
font-weight: 700;
|
|
font-size: 3.2rem;
|
|
color: var(--dark-bg);
|
|
margin-bottom: 0;
|
|
font-style: italic;
|
|
text-shadow: 2px 2px 4px rgba(255,255,255,0.6);
|
|
}
|
|
.section-title {
|
|
font-weight: 700;
|
|
font-size: 1.8rem;
|
|
margin-bottom: 20px;
|
|
color: var(--dark-bg);
|
|
border-left: 4px solid var(--primary);
|
|
padding-left: 12px;
|
|
}
|
|
.breadcrumb-custom {
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
color: rgba(0,0,0,0.6);
|
|
margin-bottom: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
.breadcrumb-custom a {
|
|
color: rgba(0,0,0,0.6);
|
|
text-decoration: none;
|
|
transition: color 0.2s;
|
|
}
|
|
.breadcrumb-custom a:hover {
|
|
color: var(--primary-dark);
|
|
}
|
|
.breadcrumb-custom i {
|
|
font-size: 0.7rem;
|
|
margin: 0 8px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* ----- STATUS BADGES ----- */
|
|
.status-badge {
|
|
padding: 6px 14px;
|
|
border-radius: 50px;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.status-active {
|
|
background-color: rgba(34, 197, 94, 0.1);
|
|
color: #16a34a;
|
|
border: 1px solid rgba(34, 197, 94, 0.2);
|
|
}
|
|
.status-pulse {
|
|
width: 8px;
|
|
height: 8px;
|
|
background-color: #22c55e;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
|
|
animation: pulse 2s infinite;
|
|
}
|
|
@keyframes pulse {
|
|
0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
|
|
70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
|
|
100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
|
|
}
|
|
|
|
/* ----- TABLES ----- */
|
|
.modern-table-container {
|
|
background: var(--glass-bg);
|
|
border-radius: 15px;
|
|
border: 1px solid var(--glass-border);
|
|
box-shadow: var(--shadow-soft);
|
|
overflow: hidden;
|
|
}
|
|
.modern-table {
|
|
margin-bottom: 0;
|
|
width: 100%;
|
|
}
|
|
.modern-table thead {
|
|
background: rgba(0,0,0,0.02);
|
|
border-bottom: 2px solid var(--primary-light);
|
|
}
|
|
.modern-table th {
|
|
font-family: 'Outfit', sans-serif;
|
|
font-size: 0.8rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1.5px;
|
|
color: var(--text-muted);
|
|
font-weight: 600;
|
|
padding: 16px 24px;
|
|
}
|
|
.modern-table td {
|
|
padding: 16px 24px;
|
|
vertical-align: middle;
|
|
font-weight: 500;
|
|
color: var(--text-main);
|
|
border-bottom: 1px solid rgba(0,0,0,0.03);
|
|
font-size: 0.95rem;
|
|
}
|
|
.modern-table tbody tr {
|
|
transition: all 0.3s;
|
|
}
|
|
.modern-table tbody tr:hover {
|
|
background: rgba(140, 82, 255, 0.04);
|
|
transform: scale(1.01); /* Rhythmic table row scale on hover */
|
|
}
|
|
.modern-table tbody tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* ----- FOOTER ----- */
|
|
.modern-footer {
|
|
background-color: var(--dark-bg);
|
|
color: white;
|
|
margin-top: auto;
|
|
padding: 60px 0 30px;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
.footer-heading {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-weight: 700;
|
|
font-size: 1.4rem;
|
|
margin-bottom: 20px;
|
|
color: white;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Stats Styling */
|
|
.stat-value {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: 3.5rem;
|
|
font-weight: 700;
|
|
color: var(--primary-dark);
|
|
line-height: 1;
|
|
margin: 10px 0;
|
|
font-style: italic;
|
|
}
|
|
.stat-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.3rem;
|
|
border: 1px solid rgba(0,0,0,0.05);
|
|
}
|
|
.icon-orange { background: rgba(249, 115, 22, 0.1); color: #f97316; }
|
|
.icon-blue { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
|
|
.icon-purple { background: rgba(140, 82, 255, 0.1); color: var(--primary); }
|
|
|
|
.progress-custom {
|
|
height: 6px;
|
|
border-radius: 10px;
|
|
background-color: rgba(0,0,0,0.05);
|
|
margin: 15px 0;
|
|
overflow: hidden;
|
|
}
|
|
.progress-bar-custom {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #f97316, #fb923c);
|
|
border-radius: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Fluid animated shapes for dance vibe -->
|
|
<div class="dance-shape-1"></div>
|
|
<div class="dance-shape-2"></div>
|
|
|
|
<!-- NAVBAR -->
|
|
<nav class="modern-navbar">
|
|
<div class="container-xl d-flex justify-content-between align-items-center">
|
|
<div class="d-flex align-items-center">
|
|
<a href="#" class="brand-logo me-5">
|
|
<div class="brand-icon">
|
|
<i class="fa-solid fa-music text-white" style="font-size: 1rem;"></i>
|
|
</div>
|
|
YourLogo
|
|
</a>
|
|
<div class="d-none d-md-flex">
|
|
<a href="#" class="nav-link-custom">Home</a>
|
|
<a href="#" class="nav-link-custom">Contact us</a>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-4">
|
|
<div class="d-none d-sm-flex align-items-center text-muted" style="font-size: 0.9rem; font-weight: 500;">
|
|
<i class="fa-solid fa-phone" style="color: var(--primary);"></i> +1 555-555-5556
|
|
</div>
|
|
<div class="d-flex align-items-center border-start ps-4" style="cursor: pointer;">
|
|
<img src="https://ui-avatars.com/api/?name=Test+Parent&background=ebd4fb&color=8c52ff" alt="User" class="rounded-circle me-2" width="36" height="36">
|
|
<span class="fw-bold text-dark me-2" style="font-size: 0.95rem;">test parent</span>
|
|
<i class="fa-solid fa-chevron-down text-muted" style="font-size: 0.75rem;"></i>
|
|
</div>
|
|
<a href="#" class="btn-gradient d-none d-lg-flex">Contact Us</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- MAIN DASHBOARD CONTENT -->
|
|
<main class="flex-grow-1 py-5">
|
|
<div class="container-xl">
|
|
|
|
<!-- Header Section -->
|
|
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-end mb-5">
|
|
<div>
|
|
<div class="breadcrumb-custom">
|
|
<a href="#"><i class="fa-solid fa-house"></i> Home</a>
|
|
<i class="fa-solid fa-chevron-right"></i>
|
|
<a href="#">My Students</a>
|
|
<i class="fa-solid fa-chevron-right"></i>
|
|
<span style="color: var(--primary-dark); font-weight: 700;">test student</span>
|
|
</div>
|
|
<h1 class="page-title">Student Dashboard</h1>
|
|
</div>
|
|
<div class="mt-4 mt-md-0">
|
|
<a href="#" class="btn-gradient">
|
|
<i class="fa-regular fa-paper-plane"></i> Request Leave
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- KPI Cards Row -->
|
|
<div class="row g-4 mb-5">
|
|
|
|
<!-- Profile Card -->
|
|
<div class="col-12 col-lg-4">
|
|
<div class="glass-card">
|
|
<div class="d-flex justify-content-between align-items-start mb-4">
|
|
<div class="d-flex align-items-center gap-3">
|
|
<div class="stat-icon icon-purple">
|
|
<i class="fa-solid fa-user-graduate"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="fw-bold mb-0" style="color: var(--dark-bg); font-size: 1.3rem; font-family: 'Outfit', sans-serif;">test student</h4>
|
|
<span class="text-muted" style="font-family: monospace; font-size: 0.9rem;">STU005</span>
|
|
</div>
|
|
</div>
|
|
<div class="status-badge status-active">
|
|
<span class="status-pulse"></span> Active
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-3 mt-2">
|
|
<div class="col-6">
|
|
<div style="background: rgba(255,255,255,0.4); padding: 12px; border-radius: 12px;">
|
|
<div style="font-size: 0.7rem; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin-bottom: 4px; letter-spacing: 1px;">Dance Style</div>
|
|
<div class="fw-bold text-dark" style="font-size: 0.95rem; font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-style: italic;">Bharatanatyam</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div style="background: rgba(255,255,255,0.4); padding: 12px; border-radius: 12px;">
|
|
<div style="font-size: 0.7rem; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin-bottom: 4px; letter-spacing: 1px;">Level</div>
|
|
<div class="fw-bold text-dark" style="font-size: 0.95rem; font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-style: italic;">Beginner</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Attendance Card -->
|
|
<div class="col-12 col-md-6 col-lg-4">
|
|
<div class="glass-card">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<h5 class="fw-bold" style="color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; font-family: 'Outfit', sans-serif;">Attendance</h5>
|
|
<div class="stat-icon icon-orange" style="width: 36px; height: 36px; font-size: 1rem;">
|
|
<i class="fa-solid fa-calendar-check"></i>
|
|
</div>
|
|
</div>
|
|
<div class="stat-value">0.0%</div>
|
|
|
|
<div class="progress-custom">
|
|
<div class="progress-bar-custom" style="width: 5%;"></div>
|
|
</div>
|
|
|
|
<div class="d-flex gap-3 text-muted" style="font-size: 0.85rem; font-weight: 500;">
|
|
<span><i class="fa-solid fa-circle-check" style="color: #22c55e;"></i> 1 Session</span>
|
|
<span><i class="fa-solid fa-circle-xmark" style="color: #ef4444;"></i> 1 Absence</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Fees Card -->
|
|
<div class="col-12 col-md-6 col-lg-4">
|
|
<div class="glass-card d-flex flex-column">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<h5 class="fw-bold" style="color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; font-family: 'Outfit', sans-serif;">Fees Overview</h5>
|
|
<div class="stat-icon icon-blue" style="width: 36px; height: 36px; font-size: 1rem;">
|
|
<i class="fa-solid fa-file-invoice-dollar"></i>
|
|
</div>
|
|
</div>
|
|
<div class="stat-value">1</div>
|
|
<p class="text-muted mt-2 mb-4" style="font-size: 0.9rem;">
|
|
Student invoice pending or generated.
|
|
</p>
|
|
<div class="mt-auto">
|
|
<a href="#" style="color: var(--primary-dark); font-weight: 700; text-decoration: none; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 1px;">
|
|
View all invoices <i class="fa-solid fa-arrow-right ms-1" style="font-size: 0.8rem;"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div> <!-- End KPI Cards -->
|
|
|
|
<!-- Tables Section -->
|
|
<div class="row g-5">
|
|
|
|
<!-- Batches Table -->
|
|
<div class="col-12 col-xl-6">
|
|
<div class="d-flex justify-content-between align-items-center mb-3 px-1">
|
|
<h3 class="section-title mb-0">Enrolled Batches</h3>
|
|
<span class="badge" style="background: rgba(140, 82, 255, 0.15); color: var(--primary-dark); font-size: 0.8rem; padding: 6px 12px; border-radius: 50px;">1 Batch</span>
|
|
</div>
|
|
<div class="modern-table-container">
|
|
<div class="table-responsive">
|
|
<table class="table modern-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Batch Name</th>
|
|
<th>Status</th>
|
|
<th>Enrollment Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<div class="d-flex align-items-center gap-3">
|
|
<div style="width: 36px; height: 36px; border-radius: 50%; background: rgba(140, 82, 255, 0.15); color: var(--primary-dark); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.8rem; font-family: 'Cormorant Garamond', serif; font-style: italic;">
|
|
TB
|
|
</div>
|
|
<span class="fw-bold text-dark">test batch</span>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span style="background: rgba(34, 197, 94, 0.1); color: #16a34a; padding: 5px 12px; border-radius: 50px; font-size: 0.75rem; font-weight: 700;">Active</span>
|
|
</td>
|
|
<td class="text-muted">
|
|
<i class="fa-regular fa-calendar me-2"></i>2026-09-28
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Leave Requests Table -->
|
|
<div class="col-12 col-xl-6">
|
|
<div class="d-flex justify-content-between align-items-center mb-3 px-1">
|
|
<h3 class="section-title mb-0">Leave Requests</h3>
|
|
</div>
|
|
<div class="modern-table-container">
|
|
<div class="table-responsive">
|
|
<table class="table modern-table">
|
|
<thead>
|
|
<tr>
|
|
<th>From</th>
|
|
<th>To</th>
|
|
<th>Reason</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="text-dark fw-bold">2026-09-29</td>
|
|
<td class="text-dark fw-bold">2026-09-29</td>
|
|
<td class="text-muted">nnn</td>
|
|
<td>
|
|
<span style="background: rgba(59, 130, 246, 0.1); color: #2563eb; padding: 5px 12px; border-radius: 50px; font-size: 0.75rem; font-weight: 700;">Approved</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div> <!-- End Tables Row -->
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<!-- FOOTER -->
|
|
<footer class="modern-footer">
|
|
<div class="container-xl">
|
|
<div class="row g-5 border-bottom border-secondary pb-5 mb-4">
|
|
<div class="col-12 col-md-3">
|
|
<h4 class="footer-heading">Useful Links</h4>
|
|
<ul class="list-unstyled" style="font-size: 0.9rem; color: #a0aec0; line-height: 1.8;">
|
|
<li><a href="#" style="color: #a0aec0; text-decoration: none;">Home</a></li>
|
|
<li><a href="#" style="color: #a0aec0; text-decoration: none;">About us</a></li>
|
|
<li><a href="#" style="color: #a0aec0; text-decoration: none;">Products</a></li>
|
|
<li><a href="#" style="color: #a0aec0; text-decoration: none;">Services</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-12 col-md-5">
|
|
<h4 class="footer-heading">About us</h4>
|
|
<p style="color: #a0aec0; font-size: 0.9rem; line-height: 1.6;">
|
|
We are a team of passionate people whose goal is to improve everyone's life through disruptive products. We build great products to solve your business problems.
|
|
</p>
|
|
</div>
|
|
<div class="col-12 col-md-4">
|
|
<h4 class="footer-heading">Connect with us</h4>
|
|
<ul class="list-unstyled mb-4" style="font-size: 0.9rem; color: #a0aec0; line-height: 1.8;">
|
|
<li class="d-flex align-items-center gap-2"><i class="fa-solid fa-envelope" style="color: var(--primary-light);"></i> Contact us</li>
|
|
<li class="d-flex align-items-center gap-2"><i class="fa-solid fa-envelope" style="color: var(--primary-light);"></i> info@yourcompany.example.com</li>
|
|
<li class="d-flex align-items-center gap-2"><i class="fa-solid fa-phone" style="color: var(--primary-light);"></i> +1 555-555-5556</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex flex-column flex-md-row justify-content-between align-items-center" style="font-size: 0.85rem; color: #718096;">
|
|
<p class="mb-2 mb-md-0">Copyright © Company name</p>
|
|
<p class="mb-0">Powered by <span class="text-white fw-bold">odoo</span> - Create a <a href="#" style="color: var(--primary-light); text-decoration: none;">free website</a></p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.css"></script>
|
|
</body>
|
|
</html>
|