Odoo_Dance_SCL/parent_portal_design.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> &nbsp; +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>