2132 lines
123 KiB
XML
2132 lines
123 KiB
XML
<?xml version="1.0" encoding="utf-8"?>
|
||
<odoo>
|
||
<template id="registration_page_template" name="Student Registration Page">
|
||
<t t-call="website.layout">
|
||
<div id="wrap" class="registration-page-wrapper">
|
||
<style>
|
||
/* Hide header and footer for registration page */
|
||
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Playfair+Display:ital,wght@1,700;1,800&display=swap');
|
||
|
||
#wrapwrap > header,
|
||
#wrapwrap > footer,
|
||
.o_footer,
|
||
.o_footer_copyright {
|
||
display: none !important;
|
||
}
|
||
|
||
#wrapwrap {
|
||
background-color: #f8f9fa;
|
||
}
|
||
|
||
.registration-page-wrapper {
|
||
height: 100vh;
|
||
width: 100vw;
|
||
background-image: url('/dance_new_theme/static/src/img/register_bg.png');
|
||
background-size: 100% 100%;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
position: relative;
|
||
display: flex;
|
||
overflow: hidden;
|
||
font-family: 'DM Sans', sans-serif;
|
||
}
|
||
|
||
/* Scrollable Layer for Content */
|
||
.registration-content-scroll {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 2;
|
||
}
|
||
|
||
.hero-section {
|
||
width: 30%;
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 2% 2% 2% 3%;
|
||
color: #2D1B5E;
|
||
text-align: center;
|
||
}
|
||
|
||
.hero-title {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 5px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.hero-title .title-top {
|
||
font-family: 'Playfair Display', serif;
|
||
font-weight: 800;
|
||
font-size: 2.6rem;
|
||
line-height: 1.1;
|
||
color: #171238;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.hero-title .title-bottom {
|
||
font-family: 'Playfair Display', serif;
|
||
font-style: italic;
|
||
font-weight: 700;
|
||
font-size: 3.1rem;
|
||
line-height: 1.1;
|
||
color: #872bd5;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.title-flourish {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 15px;
|
||
width: 100%;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.title-flourish .flourish-line {
|
||
flex: 1;
|
||
max-width: 80px;
|
||
height: 2px;
|
||
background: linear-gradient(90deg, transparent, rgba(135, 43, 213, 0.4), transparent);
|
||
position: relative;
|
||
}
|
||
|
||
.title-flourish .flourish-line::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: -2px;
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background: #872bd5;
|
||
}
|
||
|
||
.title-flourish .flourish-line.left::after { right: 0; }
|
||
.title-flourish .flourish-line.right::after { left: 0; }
|
||
|
||
.title-flourish .flourish-icon {
|
||
color: #872bd5;
|
||
font-size: 1.2rem;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.hero-description {
|
||
font-family: 'DM Sans', sans-serif;
|
||
font-size: 0.95rem;
|
||
line-height: 1.5;
|
||
color: #4A3B75;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
/* Stats Grid at the bottom of hero - Single Card Layout */
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
grid-template-rows: 1fr 1fr;
|
||
background: rgba(255, 255, 255, 0.7);
|
||
backdrop-filter: blur(12px);
|
||
border-radius: 24px;
|
||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||
box-shadow: 0 15px 35px rgba(112, 34, 186, 0.08);
|
||
padding: 15px 10px;
|
||
gap: 0;
|
||
width: 85%;
|
||
margin: auto auto 0 auto;
|
||
position: relative;
|
||
z-index: 5;
|
||
}
|
||
|
||
.stat-box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 15px 10px;
|
||
background: transparent;
|
||
border: none;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.stat-box:nth-child(1) {
|
||
border-right: 1.5px solid rgba(135, 43, 213, 0.1);
|
||
border-bottom: 1.5px solid rgba(135, 43, 213, 0.1);
|
||
}
|
||
.stat-box:nth-child(2) {
|
||
border-bottom: 1.5px solid rgba(135, 43, 213, 0.1);
|
||
}
|
||
.stat-box:nth-child(3) {
|
||
border-right: 1.5px solid rgba(135, 43, 213, 0.1);
|
||
}
|
||
|
||
.stat-box:hover {
|
||
transform: scale(1.03);
|
||
}
|
||
|
||
.stat-icon {
|
||
font-size: 1.2rem;
|
||
color: #872bd5;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.stat-number {
|
||
font-size: 1.25rem;
|
||
font-weight: 800;
|
||
color: #171238;
|
||
display: block;
|
||
}
|
||
|
||
.stat-text {
|
||
font-size: 0.7rem;
|
||
color: rgba(23, 18, 56, 0.6);
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.dancer-girl-img {
|
||
position: absolute;
|
||
bottom: -30px;
|
||
left: -10%;
|
||
height: 85vh;
|
||
width: auto;
|
||
z-index: 1;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.form-section {
|
||
height: 100vh;
|
||
overflow-y: auto;
|
||
padding: 3% 3% 3% 1%;
|
||
scrollbar-width: none;
|
||
flex-grow: 1;
|
||
width: 70%;
|
||
}
|
||
|
||
.form-section::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.right-panel-wrapper {
|
||
background: rgb(248, 235, 249);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: 25px;
|
||
padding: 25px 35px;
|
||
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
min-height: 100%;
|
||
max-width: 1250px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.right-header {
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
min-height: 80px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.title-header {
|
||
text-align: center;
|
||
}
|
||
|
||
.title-header h2 {
|
||
font-family: 'Playfair Display', serif;
|
||
font-weight: 800;
|
||
color: #1a1a2e;
|
||
font-size: 2.2rem;
|
||
margin-bottom: 5px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 15px;
|
||
}
|
||
|
||
.title-header h2 .sparkle {
|
||
color: #872bd5;
|
||
font-size: 1.6rem;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.title-header p {
|
||
color: #6c757d;
|
||
font-size: 0.95rem;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.trust-badges {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
display: flex;
|
||
gap: 15px;
|
||
}
|
||
.trust-badge {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
background: #fff;
|
||
padding: 8px 15px;
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 15px rgba(0,0,0,0.03);
|
||
border: 1px solid #f0f0f0;
|
||
}
|
||
.trust-badge i {
|
||
color: #9d50bb;
|
||
font-size: 1.2rem;
|
||
}
|
||
.trust-badge-text {
|
||
font-size: 0.75rem;
|
||
color: #495057;
|
||
line-height: 1.2;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.progress-card {
|
||
background: #fff;
|
||
border-radius: 40px;
|
||
padding: 10px 25px;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.03);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border: 1px solid #f0f0f0;
|
||
}
|
||
.step-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
color: #adb5bd;
|
||
flex: 1;
|
||
}
|
||
.step-item.active {
|
||
color: #872bd5;
|
||
}
|
||
.step-circle {
|
||
width: 38px;
|
||
height: 38px;
|
||
border-radius: 50%;
|
||
background: #ffffff;
|
||
border: 1.5px solid rgba(135, 43, 213, 0.2);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 700;
|
||
font-size: 0.95rem;
|
||
color: rgba(23, 18, 56, 0.5);
|
||
flex-shrink: 0;
|
||
}
|
||
.step-item.active .step-circle {
|
||
background: linear-gradient(135deg, #a346f2 0%, #7022ba 100%);
|
||
color: #fff;
|
||
border: none;
|
||
box-shadow: 0 8px 16px rgba(112, 34, 186, 0.25);
|
||
}
|
||
.step-text {
|
||
font-size: 0.85rem;
|
||
font-weight: 700;
|
||
line-height: 1.2;
|
||
white-space: nowrap;
|
||
color: rgba(23, 18, 56, 0.5);
|
||
}
|
||
.step-item.active .step-text {
|
||
color: #872bd5;
|
||
}
|
||
.step-item.completed {
|
||
color: #872bd5;
|
||
}
|
||
.step-item.completed .step-circle {
|
||
background: #872bd5;
|
||
color: #fff;
|
||
border: none;
|
||
}
|
||
.step-item.completed .step-text {
|
||
color: #872bd5;
|
||
}
|
||
.step-divider {
|
||
flex-grow: 1;
|
||
border-bottom: 2px dotted rgba(135, 43, 213, 0.3);
|
||
margin: 0 15px;
|
||
min-width: 20px;
|
||
}
|
||
.step-item:last-child {
|
||
flex: 0;
|
||
}
|
||
|
||
.form-main-card {
|
||
background: #fff;
|
||
border-radius: 20px;
|
||
padding: 25px;
|
||
box-shadow: 0 4px 25px rgba(0,0,0,0.04);
|
||
border: 1px solid #f0f0f0;
|
||
flex-grow: 1;
|
||
}
|
||
|
||
.form-header-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 25px;
|
||
}
|
||
.form-header-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
}
|
||
.form-header-title .icon-box {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
background: #fdf5ff;
|
||
color: #6a1b9a;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.2rem;
|
||
}
|
||
.form-header-title-text h3 {
|
||
font-size: 1.2rem;
|
||
color: #1a1a2e;
|
||
font-weight: 700;
|
||
margin-bottom: 0;
|
||
}
|
||
.form-header-title-text p {
|
||
color: #6c757d;
|
||
font-size: 0.85rem;
|
||
margin-bottom: 0;
|
||
}
|
||
.step-indicator {
|
||
background: #fdf5ff;
|
||
color: #6a1b9a;
|
||
padding: 5px 15px;
|
||
border-radius: 20px;
|
||
font-size: 0.8rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.custom-form-group label {
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 8px;
|
||
font-size: 0.85rem;
|
||
}
|
||
.custom-form-group label .req {
|
||
color: #e53935;
|
||
}
|
||
.input-with-icon {
|
||
position: relative;
|
||
}
|
||
.input-with-icon i.left-icon {
|
||
position: absolute;
|
||
left: 15px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: #9c27b0;
|
||
font-size: 0.9rem;
|
||
}
|
||
.input-with-icon .form-control,
|
||
.input-with-icon .form-select {
|
||
padding-left: 40px;
|
||
height: 45px;
|
||
border-radius: 12px;
|
||
border: 1.5px solid rgba(135, 43, 213, 0.25);
|
||
background: #ffffff;
|
||
color: #171238;
|
||
font-size: 0.9rem;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.input-with-icon .form-control:focus,
|
||
.input-with-icon .form-select:focus {
|
||
border-color: #872bd5;
|
||
box-shadow: 0 0 0 4px rgba(135, 43, 213, 0.12);
|
||
background: #ffffff;
|
||
outline: none;
|
||
}
|
||
.input-with-icon .form-select {
|
||
background-position: right 15px center;
|
||
}
|
||
.input-with-icon i.right-icon {
|
||
position: absolute;
|
||
right: 15px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: #872bd5;
|
||
font-size: 0.9rem;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* Date picker transparency overlays */
|
||
.input-with-icon input[type="date"] {
|
||
position: relative;
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
}
|
||
.input-with-icon input[type="date"]::-webkit-calendar-picker-indicator {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: auto;
|
||
height: auto;
|
||
color: transparent;
|
||
background: transparent;
|
||
opacity: 0;
|
||
cursor: pointer;
|
||
z-index: 10;
|
||
}
|
||
|
||
.upload-box {
|
||
border: 1.5px dashed rgba(135, 43, 213, 0.4);
|
||
background: #fdfbff;
|
||
border-radius: 14px;
|
||
text-align: center;
|
||
padding: 15px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 100px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.upload-box:hover {
|
||
border-color: #872bd5;
|
||
background: #f8f1ff;
|
||
transform: translateY(-2px);
|
||
}
|
||
.upload-box i {
|
||
font-size: 1.5rem;
|
||
color: #872bd5;
|
||
margin-bottom: 5px;
|
||
}
|
||
.upload-box p {
|
||
color: rgba(23, 18, 56, 0.6);
|
||
font-size: 0.75rem;
|
||
margin-bottom: 0;
|
||
}
|
||
.upload-box p.up-title {
|
||
color: #872bd5;
|
||
font-weight: 700;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
textarea.form-control {
|
||
border-radius: 12px;
|
||
border: 1.5px solid rgba(135, 43, 213, 0.25);
|
||
background: #ffffff;
|
||
padding: 15px 15px 15px 40px;
|
||
min-height: 90px;
|
||
font-size: 0.9rem;
|
||
transition: all 0.3s ease;
|
||
}
|
||
textarea.form-control:focus {
|
||
border-color: #872bd5;
|
||
box-shadow: 0 0 0 4px rgba(135, 43, 213, 0.12);
|
||
background: #ffffff;
|
||
outline: none;
|
||
}
|
||
.textarea-icon {
|
||
position: absolute;
|
||
left: 15px;
|
||
top: 15px;
|
||
color: #872bd5;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.form-actions {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 20px;
|
||
border-top: 1px solid rgba(135, 43, 213, 0.1);
|
||
padding-top: 20px;
|
||
}
|
||
.btn-back {
|
||
background: #ffffff;
|
||
border: 1.5px solid rgba(135, 43, 213, 0.25);
|
||
color: #171238;
|
||
padding: 12px 28px;
|
||
border-radius: 12px;
|
||
font-weight: 700;
|
||
font-size: 0.9rem;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.btn-back:hover {
|
||
border-color: #872bd5;
|
||
color: #872bd5;
|
||
background: #fdf5ff;
|
||
}
|
||
.btn-next {
|
||
background: linear-gradient(135deg, #a346f2 0%, #7022ba 100%);
|
||
border: none;
|
||
color: #ffffff;
|
||
padding: 12px 32px;
|
||
border-radius: 12px;
|
||
font-weight: 700;
|
||
font-size: 0.9rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
box-shadow: 0 8px 16px rgba(112, 34, 186, 0.2);
|
||
transition: all 0.3s ease;
|
||
}
|
||
.btn-next:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 12px 24px rgba(112, 34, 186, 0.3);
|
||
color: #ffffff;
|
||
}
|
||
|
||
.program-card {
|
||
position: relative;
|
||
display: block;
|
||
cursor: pointer;
|
||
margin: 0;
|
||
}
|
||
.program-card-inner {
|
||
width: 150px;
|
||
background: #fff;
|
||
border: 1.5px solid rgba(135, 43, 213, 0.15);
|
||
border-radius: 12px;
|
||
padding: 20px 10px;
|
||
text-align: center;
|
||
transition: all 0.3s ease;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.program-card input:checked + .program-card-inner {
|
||
border-color: #872bd5;
|
||
background: #fdfbff;
|
||
box-shadow: 0 4px 15px rgba(135, 43, 213, 0.1);
|
||
}
|
||
.program-card input:checked + .program-card-inner .circle-radio {
|
||
background: #872bd5;
|
||
border-color: #872bd5;
|
||
}
|
||
.program-card input:checked + .program-card-inner .circle-radio::after {
|
||
content: '\f00c';
|
||
font-family: 'FontAwesome';
|
||
color: white;
|
||
font-size: 10px;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
.circle-radio {
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 10px;
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 50%;
|
||
border: 1.5px solid #dcdcdc;
|
||
background: #fff;
|
||
}
|
||
.program-card-inner .circle-icon {
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 50%;
|
||
background: #f3e8fa;
|
||
color: #872bd5;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.8rem;
|
||
margin-bottom: 12px;
|
||
}
|
||
.program-card-inner h5 {
|
||
font-size: 0.95rem;
|
||
font-weight: 700;
|
||
color: #171238;
|
||
margin-bottom: 3px;
|
||
}
|
||
.program-card-inner p {
|
||
font-size: 0.75rem;
|
||
color: #6c757d;
|
||
margin-bottom: 15px;
|
||
}
|
||
.status-active {
|
||
font-size: 0.7rem;
|
||
color: #171238;
|
||
font-weight: 600;
|
||
margin-bottom: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
}
|
||
.status-active i {
|
||
color: #4CAF50;
|
||
font-size: 0.55rem;
|
||
}
|
||
.seats-badge {
|
||
background: #e8f5e9;
|
||
color: #4CAF50;
|
||
font-size: 0.7rem;
|
||
font-weight: 600;
|
||
padding: 5px 10px;
|
||
border-radius: 20px;
|
||
width: 100%;
|
||
}
|
||
|
||
.review-card {
|
||
background: #fff;
|
||
border: 1px solid rgba(135, 43, 213, 0.1);
|
||
border-radius: 16px;
|
||
padding: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.review-card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 20px;
|
||
}
|
||
.review-card-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
font-size: 1rem;
|
||
font-weight: 700;
|
||
color: #1a1a2e;
|
||
}
|
||
.review-card-icon {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
background: #872bd5;
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.9rem;
|
||
}
|
||
.btn-edit {
|
||
background: #fff;
|
||
border: 1px solid rgba(135, 43, 213, 0.3);
|
||
color: #872bd5;
|
||
border-radius: 8px;
|
||
padding: 6px 15px;
|
||
font-size: 0.8rem;
|
||
font-weight: 600;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.btn-edit:hover {
|
||
background: #fdf5ff;
|
||
border-color: #872bd5;
|
||
}
|
||
.review-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
.review-item {
|
||
flex: 1;
|
||
min-width: 120px;
|
||
border-right: 1px solid rgba(135, 43, 213, 0.1);
|
||
padding: 0 15px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.review-item:first-child {
|
||
padding-left: 0;
|
||
}
|
||
.review-item:last-child {
|
||
border-right: none;
|
||
}
|
||
.review-label {
|
||
font-size: 0.75rem;
|
||
color: #6c757d;
|
||
margin-bottom: 5px;
|
||
font-weight: 500;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
}
|
||
.review-value {
|
||
font-size: 0.9rem;
|
||
color: #171238;
|
||
font-weight: 600;
|
||
}
|
||
.review-address {
|
||
padding-top: 15px;
|
||
}
|
||
.review-card.highlight {
|
||
background: #fcfaff;
|
||
border: 1px solid rgba(135, 43, 213, 0.15);
|
||
}
|
||
.program-selected-box {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20px;
|
||
}
|
||
.program-icon-lg {
|
||
width: 70px;
|
||
height: 70px;
|
||
border-radius: 50%;
|
||
background: #fff;
|
||
border: 1px solid rgba(135, 43, 213, 0.2);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 2.2rem;
|
||
color: #872bd5;
|
||
box-shadow: 0 4px 10px rgba(135, 43, 213, 0.05);
|
||
flex-shrink: 0;
|
||
}
|
||
.program-details-left h4 {
|
||
font-size: 1.1rem;
|
||
font-weight: 700;
|
||
color: #872bd5;
|
||
margin-bottom: 5px;
|
||
}
|
||
.level-badge {
|
||
display: inline-block;
|
||
background: #e8f5e9;
|
||
color: #4CAF50;
|
||
font-size: 0.65rem;
|
||
font-weight: 600;
|
||
padding: 3px 10px;
|
||
border-radius: 12px;
|
||
margin-bottom: 5px;
|
||
}
|
||
.custom-checkbox {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
margin-bottom: 15px;
|
||
}
|
||
.custom-checkbox input[type="checkbox"] {
|
||
width: 18px;
|
||
height: 18px;
|
||
accent-color: #872bd5;
|
||
margin-top: 2px;
|
||
cursor: pointer;
|
||
}
|
||
.custom-checkbox label {
|
||
font-size: 0.85rem;
|
||
color: #4A3B75;
|
||
margin: 0;
|
||
cursor: pointer;
|
||
}
|
||
.custom-checkbox label a {
|
||
color: #872bd5;
|
||
text-decoration: none;
|
||
font-weight: 600;
|
||
}
|
||
.text-purple {
|
||
color: #872bd5;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.program-selected-box {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
.program-details-left {
|
||
border-right: none !important;
|
||
border-bottom: 1px solid rgba(135, 43, 213, 0.1);
|
||
padding-bottom: 15px;
|
||
margin-bottom: 15px;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.features-banner {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
background: #fff;
|
||
border-radius: 15px;
|
||
padding: 15px 20px;
|
||
box-shadow: 0 4px 15px rgba(0,0,0,0.03);
|
||
border: 1px solid #f0f0f0;
|
||
}
|
||
.feature-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.feature-icon-wrapper {
|
||
width: 35px;
|
||
height: 35px;
|
||
border-radius: 50%;
|
||
background: #fdf5ff;
|
||
color: #9c27b0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1rem;
|
||
}
|
||
.feature-item-text {
|
||
line-height: 1.2;
|
||
}
|
||
.feature-title {
|
||
font-size: 0.8rem;
|
||
font-weight: 700;
|
||
color: #1a1a2e;
|
||
}
|
||
.feature-desc {
|
||
font-size: 0.7rem;
|
||
color: #6c757d;
|
||
}
|
||
|
||
/* Ensure background fits nicely on laptop screens */
|
||
@media (min-width: 1024px) {
|
||
.registration-page-wrapper {
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.right-header {
|
||
flex-direction: column;
|
||
min-height: auto;
|
||
gap: 15px;
|
||
text-align: center;
|
||
}
|
||
.trust-badges {
|
||
position: static;
|
||
transform: none;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
.field-error {
|
||
border-color: #e53935 !important;
|
||
box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.25) !important;
|
||
}
|
||
.error-text {
|
||
color: #e53935;
|
||
font-size: 0.75rem;
|
||
margin-top: 4px;
|
||
display: block;
|
||
font-weight: 500;
|
||
}
|
||
</style>
|
||
|
||
<div class="container-fluid h-100 p-0">
|
||
<img src="/dance_new_theme/static/src/img/girl_img.png" class="dancer-girl-img" alt="Dancer"/>
|
||
|
||
<!-- Scrollable Area -->
|
||
<div class="registration-content-scroll">
|
||
<div class="d-flex h-100">
|
||
<!-- Left Hero Section -->
|
||
<div class="hero-section">
|
||
<h1 class="hero-title">
|
||
<span class="title-top">Begin Your</span>
|
||
<span class="title-bottom">Dance Journey</span>
|
||
</h1>
|
||
<div class="title-flourish">
|
||
<span class="flourish-line left"></span>
|
||
<span class="flourish-icon"><i class="fa fa-child"></i></span>
|
||
<span class="flourish-line right"></span>
|
||
</div>
|
||
<p class="hero-description">
|
||
Join our academy and take the<br/>
|
||
first step toward confidence,<br/>
|
||
creativity and excellence.
|
||
</p>
|
||
|
||
<!-- Stats Grid -->
|
||
<div class="stats-grid">
|
||
<div class="stat-box">
|
||
<i class="fa fa-users stat-icon"></i>
|
||
<span class="stat-number">2,500+</span>
|
||
<span class="stat-text">Students</span>
|
||
</div>
|
||
<div class="stat-box">
|
||
<i class="fa fa-graduation-cap stat-icon"></i>
|
||
<span class="stat-number">20+</span>
|
||
<span class="stat-text">Programs</span>
|
||
</div>
|
||
<div class="stat-box">
|
||
<i class="fa fa-trophy stat-icon"></i>
|
||
<span class="stat-number">150+</span>
|
||
<span class="stat-text">Events</span>
|
||
</div>
|
||
<div class="stat-box">
|
||
<i class="fa fa-users stat-icon"></i>
|
||
<span class="stat-number">15+</span>
|
||
<span class="stat-text">Instructors</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right Form Section -->
|
||
<div class="form-section flex-grow-1">
|
||
<div class="right-panel-wrapper">
|
||
<!-- Header -->
|
||
<div class="right-header">
|
||
<div class="title-header">
|
||
<h2><span class="sparkle">✦</span> Register a Student <span class="sparkle">✦</span></h2>
|
||
<p>Fill in the details to enroll your child with us.</p>
|
||
</div>
|
||
<div class="trust-badges">
|
||
<div class="trust-badge">
|
||
<i class="fa fa-shield"></i>
|
||
<div class="trust-badge-text">Secure<br/>Registration</div>
|
||
</div>
|
||
<div class="trust-badge">
|
||
<i class="fa fa-lock"></i>
|
||
<div class="trust-badge-text">Your data is<br/>100% safe</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Progress Bar -->
|
||
<div class="progress-card">
|
||
<div class="step-item active" id="progress-step-1">
|
||
<div class="step-circle" id="circle-step-1"><i class="fa fa-graduation-cap"></i></div>
|
||
<div class="step-text">Student<br/>Details</div>
|
||
<div class="step-divider"></div>
|
||
</div>
|
||
<div class="step-item" id="progress-step-2">
|
||
<div class="step-circle" id="circle-step-2">2</div>
|
||
<div class="step-text">Parent /<br/>Guardian</div>
|
||
<div class="step-divider"></div>
|
||
</div>
|
||
<div class="step-item" id="progress-step-3">
|
||
<div class="step-circle" id="circle-step-3">3</div>
|
||
<div class="step-text">Program<br/>Selection</div>
|
||
<div class="step-divider"></div>
|
||
</div>
|
||
<div class="step-item" id="progress-step-4">
|
||
<div class="step-circle" id="circle-step-4">4</div>
|
||
<div class="step-text">Review &<br/>Submit</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Main Form Card -->
|
||
<div class="form-main-card">
|
||
<!-- Step 1: Student Details -->
|
||
<div id="step1_form">
|
||
<div class="form-header-row">
|
||
<div class="form-header-title">
|
||
<div class="icon-box"><i class="fa fa-user-o"></i></div>
|
||
<div class="form-header-title-text">
|
||
<h3>Student Details</h3>
|
||
<p>Tell us about the student</p>
|
||
</div>
|
||
</div>
|
||
<div class="step-indicator">
|
||
Step 1 of 4
|
||
</div>
|
||
</div>
|
||
|
||
<form>
|
||
<div class="row custom-form-group mb-3">
|
||
<div class="col-md-4">
|
||
<label>Student Full Name <span class="req">*</span></label>
|
||
<div class="input-with-icon">
|
||
<i class="fa fa-user-o left-icon"></i>
|
||
<input type="text" id="student_name" class="form-control" placeholder="Enter student full name"/>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<label>Date of Birth <span class="req">*</span></label>
|
||
<div class="input-with-icon">
|
||
<i class="fa fa-calendar-o left-icon"></i>
|
||
<input type="date" id="student_dob" class="form-control" placeholder="DD / MM / YYYY" onclick="this.showPicker()"/>
|
||
<i class="fa fa-calendar right-icon"></i>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<label>Gender <span class="req">*</span></label>
|
||
<div class="input-with-icon">
|
||
<i class="fa fa-users left-icon"></i>
|
||
<select id="student_gender" class="form-select">
|
||
<option selected="1" value="">Select gender</option>
|
||
<option value="male">Male</option>
|
||
<option value="female">Female</option>
|
||
<option value="other">Other</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row custom-form-group mb-3">
|
||
<div class="col-md-4">
|
||
<label>Profile Photo (Optional)</label>
|
||
<div class="upload-box" id="upload_box_container" onclick="document.getElementById('profile_photo_input').click()">
|
||
<input type="file" id="profile_photo_input" accept="image/*" class="d-none" onchange="previewImage(event)"/>
|
||
<div id="upload_box_placeholder" style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
|
||
<i class="fa fa-cloud-upload"></i>
|
||
<p class="up-title">Upload Photo</p>
|
||
<p>PNG, JPG (Max. 5MB)</p>
|
||
</div>
|
||
<div id="upload_box_preview" class="d-none" style="position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
|
||
<img id="photo_preview_img" src="" style="max-height: 80px; max-width: 100%; border-radius: 8px; object-fit: cover;"/>
|
||
<span style="position: absolute; bottom: 0; background: rgba(0,0,0,0.6); color: #fff; width: 100%; font-size: 0.65rem; padding: 2px 0; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; text-align: center;">Click to change</span>
|
||
<button type="button" class="btn-close" style="position: absolute; top: -5px; right: -5px; background: #fff; border: 1px solid #ccc; border-radius: 50%; width: 18px; height: 18px; font-size: 8px; display: flex; align-items: center; justify-content: center; padding: 0; color: red; line-height: 1;" onclick="removeImage(event)">×</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<label>Dance Style <span class="req">*</span></label>
|
||
<div class="input-with-icon">
|
||
<i class="fa fa-male left-icon"></i>
|
||
<select id="student_dance_style" class="form-select">
|
||
<option selected="1" value="">Select dance style</option>
|
||
<option value="bharatanatyam">Bharatanatyam</option>
|
||
<option value="kathak">Kathak</option>
|
||
<option value="hiphop">Hip-Hop</option>
|
||
<option value="contemporary">Contemporary</option>
|
||
<option value="zumba">Zumba</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<label>Current Skill Level <span class="req">*</span></label>
|
||
<div class="input-with-icon">
|
||
<i class="fa fa-bar-chart left-icon"></i>
|
||
<select id="student_skill_level" class="form-select">
|
||
<option selected="1" value="">Select level</option>
|
||
<option value="beginner">Beginner</option>
|
||
<option value="intermediate">Intermediate</option>
|
||
<option value="advanced">Advanced</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row custom-form-group mb-3">
|
||
<div class="col-12">
|
||
<label>Medical Notes (Optional)</label>
|
||
<div class="position-relative">
|
||
<i class="fa fa-clipboard textarea-icon"></i>
|
||
<textarea id="student_medical_notes" class="form-control" placeholder="Any allergies, injuries or special care we should know about?"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-back"><i class="fa fa-arrow-left"></i> Back</button>
|
||
<button type="button" class="btn btn-next" onclick="goToStep(2)">Next: Parent / Guardian <i class="fa fa-arrow-right"></i></button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- Step 2: Parent / Guardian Details -->
|
||
<div id="step2_form" class="d-none">
|
||
<div class="form-header-row">
|
||
<div class="form-header-title">
|
||
<div class="icon-box"><i class="fa fa-users"></i></div>
|
||
<div class="form-header-title-text">
|
||
<h3>Parent / Guardian Details</h3>
|
||
<p>Tell us about the primary guardian responsible for the student</p>
|
||
</div>
|
||
</div>
|
||
<div class="step-indicator">
|
||
Step 2 of 4
|
||
</div>
|
||
</div>
|
||
<form>
|
||
<div class="row custom-form-group mb-3">
|
||
<div class="col-md-6">
|
||
<label>Parent / Guardian Name <span class="req">*</span></label>
|
||
<div class="input-with-icon">
|
||
<i class="fa fa-user-o left-icon"></i>
|
||
<input type="text" id="parent_name" class="form-control" placeholder="Enter parent or guardian full name"/>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label>Relationship <span class="req">*</span></label>
|
||
<div class="input-with-icon">
|
||
<i class="fa fa-user-o left-icon"></i>
|
||
<select id="parent_relationship" class="form-select">
|
||
<option selected="1">Select relationship</option>
|
||
<option>Mother</option>
|
||
<option>Father</option>
|
||
<option>Guardian</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row custom-form-group mb-3">
|
||
<div class="col-md-6">
|
||
<label>Phone Number <span class="req">*</span></label>
|
||
<div class="input-with-icon">
|
||
<i class="fa fa-phone left-icon"></i>
|
||
<input type="tel" id="parent_phone" class="form-control" placeholder="Enter phone number"/>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label>Email Address <span class="req">*</span></label>
|
||
<div class="input-with-icon">
|
||
<i class="fa fa-envelope-o left-icon"></i>
|
||
<input type="email" id="parent_email" class="form-control" placeholder="Enter email address"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row custom-form-group mb-3">
|
||
<div class="col-md-6">
|
||
<label>WhatsApp Number</label>
|
||
<div class="input-with-icon">
|
||
<i class="fa fa-whatsapp left-icon"></i>
|
||
<input type="tel" id="parent_whatsapp" class="form-control" placeholder="Enter WhatsApp number"/>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label>Alternative Phone Number</label>
|
||
<div class="input-with-icon">
|
||
<i class="fa fa-phone left-icon"></i>
|
||
<input type="tel" id="parent_alt_phone" class="form-control" placeholder="Enter alternative phone number"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row custom-form-group mb-3">
|
||
<div class="col-md-4">
|
||
<label>Occupation</label>
|
||
<div class="input-with-icon">
|
||
<i class="fa fa-briefcase left-icon"></i>
|
||
<input type="text" id="parent_occupation" class="form-control" placeholder="Enter occupation"/>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<label>City <span class="req">*</span></label>
|
||
<div class="input-with-icon">
|
||
<i class="fa fa-building-o left-icon"></i>
|
||
<input type="text" id="parent_city" class="form-control" placeholder="Enter city"/>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<label>Postal Code <span class="req">*</span></label>
|
||
<div class="input-with-icon">
|
||
<i class="fa fa-map-marker left-icon"></i>
|
||
<input type="text" id="parent_postal_code" class="form-control" placeholder="Enter postal code"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row custom-form-group mb-3">
|
||
<div class="col-12">
|
||
<label>Address Line <span class="req">*</span></label>
|
||
<div class="input-with-icon">
|
||
<i class="fa fa-home left-icon"></i>
|
||
<input type="text" id="parent_address" class="form-control" placeholder="Enter full address"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row custom-form-group mb-3">
|
||
<div class="col-md-6">
|
||
<label>Emergency Contact Name <span class="req">*</span></label>
|
||
<div class="input-with-icon">
|
||
<i class="fa fa-user-o left-icon"></i>
|
||
<input type="text" id="emergency_name" class="form-control" placeholder="Enter emergency contact name"/>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label>Emergency Contact Number <span class="req">*</span></label>
|
||
<div class="input-with-icon">
|
||
<i class="fa fa-phone left-icon"></i>
|
||
<input type="tel" id="emergency_phone" class="form-control" placeholder="Enter emergency contact number"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-end mb-3">
|
||
<span class="req" style="color: #e53935; font-size: 0.8rem; font-weight: 600;">* Required Fields</span>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-back" onclick="showStep(1)"><i class="fa fa-arrow-left"></i> Back: Student Details</button>
|
||
<button type="button" class="btn btn-next" onclick="goToStep(3)">Next: Program Selection <i class="fa fa-arrow-right"></i></button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- Step 3: Program Selection -->
|
||
<div id="step3_form" class="d-none">
|
||
<div class="form-header-row">
|
||
<div class="form-header-title">
|
||
<div class="icon-box"><i class="fa fa-clipboard"></i></div>
|
||
<div class="form-header-title-text">
|
||
<h3>Program Selection</h3>
|
||
<p>Choose the dance program and preferred batch for enrollment.</p>
|
||
</div>
|
||
</div>
|
||
<div class="step-indicator">
|
||
Step 3 of 4
|
||
</div>
|
||
</div>
|
||
|
||
<form>
|
||
<div class="row custom-form-group mb-3">
|
||
<div class="col-md-4">
|
||
<label>Dance Style <span class="req">*</span></label>
|
||
<div class="input-with-icon">
|
||
<i class="fa fa-male left-icon"></i>
|
||
<select id="program_dance_style" class="form-select">
|
||
<option selected="1">Select dance style</option>
|
||
<option>Classical</option>
|
||
<option>Street</option>
|
||
<option>Modern</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<label>Current Skill Level <span class="req">*</span></label>
|
||
<div class="input-with-icon">
|
||
<i class="fa fa-bar-chart left-icon"></i>
|
||
<select id="program_skill_level" class="form-select">
|
||
<option selected="1">Select skill level</option>
|
||
<option>Beginner</option>
|
||
<option>Intermediate</option>
|
||
<option>Advanced</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<label>Preferred Instructor (Optional)</label>
|
||
<div class="input-with-icon">
|
||
<i class="fa fa-user-o left-icon"></i>
|
||
<select id="program_instructor" class="form-select">
|
||
<option selected="1">Select instructor</option>
|
||
<option>Sarah Jane</option>
|
||
<option>Mike Ross</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row custom-form-group mb-4">
|
||
<div class="col-12">
|
||
<label class="mb-1">Available Programs</label>
|
||
<p class="text-muted" style="font-size: 0.85rem; margin-bottom: 15px;">Select a dance style to see available batches.</p>
|
||
|
||
<div class="d-flex gap-3 overflow-auto pb-2" style="scrollbar-width: thin;">
|
||
<!-- Card 1 -->
|
||
<label class="program-card">
|
||
<input type="radio" name="program_selection" value="bharatanatyam" class="d-none" checked="1"/>
|
||
<div class="program-card-inner">
|
||
<div class="circle-radio"></div>
|
||
<div class="circle-icon"><i class="fa fa-bank"></i></div>
|
||
<h5>Bharatanatyam</h5>
|
||
<p>Classical Dance</p>
|
||
<span class="status-active"><i class="fa fa-circle"></i> Active</span>
|
||
<div class="seats-badge">5 Seats Available</div>
|
||
</div>
|
||
</label>
|
||
<!-- Card 2 -->
|
||
<label class="program-card">
|
||
<input type="radio" name="program_selection" value="kathak" class="d-none"/>
|
||
<div class="program-card-inner">
|
||
<div class="circle-radio"></div>
|
||
<div class="circle-icon"><i class="fa fa-female"></i></div>
|
||
<h5>Kathak</h5>
|
||
<p>Classical Dance</p>
|
||
<span class="status-active"><i class="fa fa-circle" style="color:#FFA500"></i> Active</span>
|
||
<div class="seats-badge" style="color:#FFA500; background:#fff3e0;">3 Seats Available</div>
|
||
</div>
|
||
</label>
|
||
<!-- Card 3 -->
|
||
<label class="program-card">
|
||
<input type="radio" name="program_selection" value="hiphop" class="d-none"/>
|
||
<div class="program-card-inner">
|
||
<div class="circle-radio"></div>
|
||
<div class="circle-icon"><i class="fa fa-futbol-o"></i></div>
|
||
<h5>Hip-Hop</h5>
|
||
<p>Street Dance</p>
|
||
<span class="status-active"><i class="fa fa-circle"></i> Active</span>
|
||
<div class="seats-badge">8 Seats Available</div>
|
||
</div>
|
||
</label>
|
||
<!-- Card 4 -->
|
||
<label class="program-card">
|
||
<input type="radio" name="program_selection" value="contemporary" class="d-none"/>
|
||
<div class="program-card-inner">
|
||
<div class="circle-radio"></div>
|
||
<div class="circle-icon"><i class="fa fa-child"></i></div>
|
||
<h5>Contemporary</h5>
|
||
<p>Modern Dance</p>
|
||
<span class="status-active"><i class="fa fa-circle"></i> Active</span>
|
||
<div class="seats-badge">6 Seats Available</div>
|
||
</div>
|
||
</label>
|
||
<!-- Card 5 -->
|
||
<label class="program-card">
|
||
<input type="radio" name="program_selection" value="zumba" class="d-none"/>
|
||
<div class="program-card-inner">
|
||
<div class="circle-radio"></div>
|
||
<div class="circle-icon"><i class="fa fa-heartbeat"></i></div>
|
||
<h5>Zumba</h5>
|
||
<p>Fitness Dance</p>
|
||
<span class="status-active"><i class="fa fa-circle"></i> Active</span>
|
||
<div class="seats-badge">10 Seats Available</div>
|
||
</div>
|
||
</label>
|
||
<!-- Card 6 -->
|
||
<label class="program-card">
|
||
<input type="radio" name="program_selection" value="folk" class="d-none"/>
|
||
<div class="program-card-inner">
|
||
<div class="circle-radio"></div>
|
||
<div class="circle-icon"><i class="fa fa-music"></i></div>
|
||
<h5>Folk Dance</h5>
|
||
<p>Cultural Dance</p>
|
||
<span class="status-active"><i class="fa fa-circle"></i> Active</span>
|
||
<div class="seats-badge">7 Seats Available</div>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row custom-form-group mb-3">
|
||
<div class="col-md-4">
|
||
<label>Preferred Batch <span class="req">*</span></label>
|
||
<div class="input-with-icon">
|
||
<i class="fa fa-calendar left-icon"></i>
|
||
<select id="program_batch" class="form-select">
|
||
<option selected="1">Select preferred batch</option>
|
||
<option>Morning (8 AM - 10 AM)</option>
|
||
<option>Evening (5 PM - 7 PM)</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<label>Preferred Start Date <span class="req">*</span></label>
|
||
<div class="input-with-icon">
|
||
<i class="fa fa-calendar-o left-icon"></i>
|
||
<input type="date" id="program_start_date" class="form-control" placeholder="DD / MM / YYYY" onclick="this.showPicker()"/>
|
||
<i class="fa fa-calendar right-icon"></i>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<label>Learning Goal (Optional)</label>
|
||
<div class="input-with-icon">
|
||
<i class="fa fa-bullseye left-icon"></i>
|
||
<select id="program_learning_goal" class="form-select">
|
||
<option selected="1">Select learning goal</option>
|
||
<option>Hobby</option>
|
||
<option>Professional</option>
|
||
<option>Fitness</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row custom-form-group mb-3">
|
||
<div class="col-12">
|
||
<label>Additional Notes (Optional)</label>
|
||
<div class="position-relative">
|
||
<i class="fa fa-pencil-square-o textarea-icon"></i>
|
||
<textarea id="program_notes" class="form-control" placeholder="Any specific requirements or notes for our team?"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-back" onclick="showStep(2)"><i class="fa fa-arrow-left"></i> Back: Parent / Guardian</button>
|
||
<button type="button" class="btn btn-next" onclick="goToStep(4)">Next: Review & Submit <i class="fa fa-arrow-right"></i></button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- Step 4: Review & Submit -->
|
||
<div id="step4_form" class="d-none">
|
||
<!-- Student Information -->
|
||
<div class="review-card">
|
||
<div class="review-card-header">
|
||
<div class="review-card-title">
|
||
<div class="review-card-icon" id="summary_student_photo_icon"><i class="fa fa-user"></i></div>
|
||
Student Information
|
||
</div>
|
||
<button type="button" class="btn-edit" onclick="showStep(1)"><i class="fa fa-pencil"></i> Edit</button>
|
||
</div>
|
||
<div class="review-grid">
|
||
<div class="review-item">
|
||
<div class="review-label">Student Name</div>
|
||
<div class="review-value" id="summary_student_name">Ananya Sharma</div>
|
||
</div>
|
||
<div class="review-item">
|
||
<div class="review-label">Date of Birth</div>
|
||
<div class="review-value" id="summary_student_dob">15 May 2016</div>
|
||
</div>
|
||
<div class="review-item">
|
||
<div class="review-label">Gender</div>
|
||
<div class="review-value" id="summary_student_gender">Female</div>
|
||
</div>
|
||
<div class="review-item">
|
||
<div class="review-label">Dance Style</div>
|
||
<div class="review-value" id="summary_student_dance_style">Bharatanatyam</div>
|
||
</div>
|
||
<div class="review-item">
|
||
<div class="review-label">Skill Level</div>
|
||
<div class="review-value" id="summary_student_skill_level">Beginner</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Parent / Guardian Information -->
|
||
<div class="review-card">
|
||
<div class="review-card-header">
|
||
<div class="review-card-title">
|
||
<div class="review-card-icon"><i class="fa fa-users"></i></div>
|
||
Parent / Guardian Information
|
||
</div>
|
||
<button type="button" class="btn-edit" onclick="showStep(2)"><i class="fa fa-pencil"></i> Edit</button>
|
||
</div>
|
||
<div class="review-grid">
|
||
<div class="review-item">
|
||
<div class="review-label">Parent / Guardian Name</div>
|
||
<div class="review-value" id="summary_parent_name">Priya Sharma</div>
|
||
</div>
|
||
<div class="review-item">
|
||
<div class="review-label">Relationship</div>
|
||
<div class="review-value" id="summary_parent_relationship">Mother</div>
|
||
</div>
|
||
<div class="review-item">
|
||
<div class="review-label">Phone Number</div>
|
||
<div class="review-value" id="summary_parent_phone">+91 98765 43210</div>
|
||
</div>
|
||
<div class="review-item">
|
||
<div class="review-label">Email Address</div>
|
||
<div class="review-value" id="summary_parent_email">priya.s@gmail.com</div>
|
||
</div>
|
||
</div>
|
||
<div class="review-address">
|
||
<div class="review-label">Address</div>
|
||
<div class="review-value" id="summary_parent_address">123, Lotus Avenue, Koramangala, Bengaluru, Karnataka - 560034</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Program Selected -->
|
||
<div class="review-card highlight">
|
||
<div class="review-card-header mb-3">
|
||
<div class="review-card-title">
|
||
<div class="review-card-icon"><i class="fa fa-calendar-check-o"></i></div>
|
||
Program Selected
|
||
</div>
|
||
</div>
|
||
<div class="program-selected-box">
|
||
<div class="program-icon-lg" id="summary_program_icon"><i class="fa fa-bank"></i></div>
|
||
<div class="program-details-left mr-4 pr-4" style="border-right: 1px solid rgba(135, 43, 213, 0.1);">
|
||
<h4 id="summary_program_name">Bharatanatyam</h4>
|
||
<div class="level-badge" id="summary_program_level">Beginner Level</div>
|
||
<div class="status-active"><i class="fa fa-circle"></i> Active</div>
|
||
</div>
|
||
<div class="review-grid flex-grow-1" style="align-items: center;">
|
||
<div class="review-item">
|
||
<div class="review-label"><i class="fa fa-calendar-o text-purple"></i> Batch</div>
|
||
<div class="review-value" id="summary_program_batch">Mon / Wed</div>
|
||
</div>
|
||
<div class="review-item">
|
||
<div class="review-label"><i class="fa fa-clock-o text-purple"></i> Timing</div>
|
||
<div class="review-value" id="summary_program_timing">5:00 PM - 6:00 PM</div>
|
||
</div>
|
||
<div class="review-item">
|
||
<div class="review-label"><i class="fa fa-user-o text-purple"></i> Instructor</div>
|
||
<div class="review-value" id="summary_program_instructor">Meera Krishnan</div>
|
||
</div>
|
||
<div class="review-item border-right-0">
|
||
<div class="review-label"><i class="fa fa-ticket text-purple"></i> Available Seats</div>
|
||
<div class="review-value" id="summary_program_seats">5 Seats</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Enrollment Summary -->
|
||
<div class="review-card">
|
||
<div class="review-card-header mb-3">
|
||
<div class="review-card-title">
|
||
<div class="review-card-icon">4</div>
|
||
Enrollment Summary
|
||
</div>
|
||
</div>
|
||
<div class="review-grid">
|
||
<div class="review-item">
|
||
<div class="review-label"><i class="fa fa-address-card-o text-purple"></i> Registration Type</div>
|
||
<div class="review-value" id="summary_registration_type" style="color: #872bd5;">Trial Student</div>
|
||
</div>
|
||
<div class="review-item">
|
||
<div class="review-label"><i class="fa fa-exclamation-triangle text-purple"></i> Program</div>
|
||
<div class="review-value" id="summary_enrollment_program">Bharatanatyam</div>
|
||
</div>
|
||
<div class="review-item">
|
||
<div class="review-label"><i class="fa fa-calendar text-purple"></i> Start Date</div>
|
||
<div class="review-value" id="summary_start_date">01 July 2026</div>
|
||
</div>
|
||
<div class="review-item border-right-0">
|
||
<div class="review-label"><i class="fa fa-money text-purple"></i> Fees Type</div>
|
||
<div class="review-value">Monthly</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="review-card highlight" style="background: #fcfcff;">
|
||
<div class="custom-checkbox">
|
||
<input type="checkbox" id="confirm_info" checked="1"/>
|
||
<label for="confirm_info">I confirm that all information provided is accurate.</label>
|
||
</div>
|
||
<div class="custom-checkbox mb-0">
|
||
<input type="checkbox" id="terms_agree" checked="1"/>
|
||
<label for="terms_agree">I agree to the academy <a href="#">terms, conditions</a> and <a href="#">privacy policy</a>.</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-actions mt-4 pt-3 border-top">
|
||
<button type="button" class="btn btn-back" onclick="showStep(3)"><i class="fa fa-arrow-left"></i> Back: Program Selection</button>
|
||
<button type="button" class="btn btn-next" onclick="submitRegistration()">Submit Registration <i class="fa fa-arrow-right"></i></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Features Banner -->
|
||
<div class="features-banner">
|
||
<div class="feature-item">
|
||
<div class="feature-icon-wrapper"><i class="fa fa-bolt"></i></div>
|
||
<div class="feature-item-text">
|
||
<span class="feature-title">Quick & Easy</span>
|
||
<span class="feature-desc">4-step registration</span>
|
||
</div>
|
||
</div>
|
||
<div class="feature-item">
|
||
<div class="feature-icon-wrapper"><i class="fa fa-heart"></i></div>
|
||
<div class="feature-item-text">
|
||
<span class="feature-title">Personalized</span>
|
||
<span class="feature-desc">Learning Experience</span>
|
||
</div>
|
||
</div>
|
||
<div class="feature-item">
|
||
<div class="feature-icon-wrapper"><i class="fa fa-shield"></i></div>
|
||
<div class="feature-item-text">
|
||
<span class="feature-title">Safe & Secure</span>
|
||
<span class="feature-desc">Your data is protected</span>
|
||
</div>
|
||
</div>
|
||
<div class="feature-item">
|
||
<div class="feature-icon-wrapper"><i class="fa fa-users"></i></div>
|
||
<div class="feature-item-text">
|
||
<span class="feature-title">Join a Passionate</span>
|
||
<span class="feature-desc">Dance Community</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- This is where the layers will be added later -->
|
||
<div class="row no-gutters h-100 invisible">
|
||
<!-- Space for the content layers mentioned in the design -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script type="text/javascript">
|
||
<![CDATA[
|
||
function showStep(step) {
|
||
var step1Form = document.getElementById('step1_form');
|
||
var step2Form = document.getElementById('step2_form');
|
||
var step3Form = document.getElementById('step3_form');
|
||
var step4Form = document.getElementById('step4_form');
|
||
|
||
if(step1Form) step1Form.classList.add('d-none');
|
||
if(step2Form) step2Form.classList.add('d-none');
|
||
if(step3Form) step3Form.classList.add('d-none');
|
||
if(step4Form) step4Form.classList.add('d-none');
|
||
|
||
var targetForm = document.getElementById('step' + step + '_form');
|
||
if(targetForm) {
|
||
targetForm.classList.remove('d-none');
|
||
}
|
||
|
||
if(step === 1) {
|
||
document.getElementById('progress-step-1').className = 'step-item active';
|
||
document.getElementById('circle-step-1').innerHTML = '<i class="fa fa-graduation-cap"></i>';
|
||
|
||
document.getElementById('progress-step-2').className = 'step-item';
|
||
document.getElementById('circle-step-2').innerHTML = '2';
|
||
|
||
document.getElementById('progress-step-3').className = 'step-item';
|
||
document.getElementById('circle-step-3').innerHTML = '3';
|
||
} else if(step === 2) {
|
||
document.getElementById('progress-step-1').className = 'step-item completed';
|
||
document.getElementById('circle-step-1').innerHTML = '<i class="fa fa-check"></i>';
|
||
|
||
document.getElementById('progress-step-2').className = 'step-item active';
|
||
document.getElementById('circle-step-2').innerHTML = '<i class="fa fa-users"></i>';
|
||
|
||
document.getElementById('progress-step-3').className = 'step-item';
|
||
document.getElementById('circle-step-3').innerHTML = '3';
|
||
} else if(step === 3) {
|
||
document.getElementById('progress-step-1').className = 'step-item completed';
|
||
document.getElementById('circle-step-1').innerHTML = '<i class="fa fa-check"></i>';
|
||
|
||
document.getElementById('progress-step-2').className = 'step-item completed';
|
||
document.getElementById('circle-step-2').innerHTML = '<i class="fa fa-check"></i>';
|
||
|
||
document.getElementById('progress-step-3').className = 'step-item active';
|
||
document.getElementById('circle-step-3').innerHTML = '3';
|
||
|
||
document.getElementById('progress-step-4').className = 'step-item';
|
||
document.getElementById('circle-step-4').innerHTML = '4';
|
||
} else if(step === 4) {
|
||
document.getElementById('progress-step-1').className = 'step-item completed';
|
||
document.getElementById('circle-step-1').innerHTML = '<i class="fa fa-check"></i>';
|
||
|
||
document.getElementById('progress-step-2').className = 'step-item completed';
|
||
document.getElementById('circle-step-2').innerHTML = '<i class="fa fa-check"></i>';
|
||
|
||
document.getElementById('progress-step-3').className = 'step-item completed';
|
||
document.getElementById('circle-step-3').innerHTML = '<i class="fa fa-check"></i>';
|
||
|
||
document.getElementById('progress-step-4').className = 'step-item active';
|
||
document.getElementById('circle-step-4').innerHTML = '4';
|
||
}
|
||
}
|
||
|
||
function previewImage(event) {
|
||
var fileInput = event.target;
|
||
var file = fileInput.files[0];
|
||
if (file) {
|
||
if (file.size > 5 * 1024 * 1024) {
|
||
alert("Profile photo must be less than 5MB.");
|
||
fileInput.value = "";
|
||
return;
|
||
}
|
||
|
||
var reader = new FileReader();
|
||
reader.onload = function(e) {
|
||
var placeholder = document.getElementById('upload_box_placeholder');
|
||
var preview = document.getElementById('upload_box_preview');
|
||
var img = document.getElementById('photo_preview_img');
|
||
|
||
if (placeholder && preview && img) {
|
||
img.src = e.target.result;
|
||
placeholder.classList.add('d-none');
|
||
preview.classList.remove('d-none');
|
||
}
|
||
};
|
||
reader.readAsDataURL(file);
|
||
}
|
||
}
|
||
|
||
function removeImage(event) {
|
||
if (event) {
|
||
event.stopPropagation();
|
||
}
|
||
var fileInput = document.getElementById('profile_photo_input');
|
||
if (fileInput) {
|
||
fileInput.value = "";
|
||
}
|
||
|
||
var placeholder = document.getElementById('upload_box_placeholder');
|
||
var preview = document.getElementById('upload_box_preview');
|
||
var img = document.getElementById('photo_preview_img');
|
||
|
||
if (placeholder && preview && img) {
|
||
img.src = "";
|
||
preview.classList.add('d-none');
|
||
placeholder.classList.remove('d-none');
|
||
}
|
||
}
|
||
|
||
function getCurrentStep() {
|
||
var step1Form = document.getElementById('step1_form');
|
||
var step2Form = document.getElementById('step2_form');
|
||
var step3Form = document.getElementById('step3_form');
|
||
var step4Form = document.getElementById('step4_form');
|
||
|
||
if (step1Form && !step1Form.classList.contains('d-none')) return 1;
|
||
if (step2Form && !step2Form.classList.contains('d-none')) return 2;
|
||
if (step3Form && !step3Form.classList.contains('d-none')) return 3;
|
||
if (step4Form && !step4Form.classList.contains('d-none')) return 4;
|
||
return 1;
|
||
}
|
||
|
||
function validateEmail(email) {
|
||
var re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||
return re.test(email);
|
||
}
|
||
|
||
function validatePhone(phone) {
|
||
var re = /^\+?[0-9\s\-()]{7,15}$/;
|
||
return re.test(phone);
|
||
}
|
||
|
||
function markInvalid(inputEl, message, firstInvalidCollector) {
|
||
inputEl.classList.add('field-error');
|
||
|
||
var eventType = (inputEl.tagName === 'SELECT' || inputEl.type === 'date') ? 'change' : 'input';
|
||
var clearError = function() {
|
||
inputEl.classList.remove('field-error');
|
||
var nextSib = inputEl.parentNode.nextSibling;
|
||
if (nextSib && nextSib.classList && nextSib.classList.contains('error-text')) {
|
||
nextSib.remove();
|
||
} else {
|
||
var pNode = inputEl.closest('.custom-form-group') || inputEl.parentNode;
|
||
var err = pNode.querySelector('.error-text');
|
||
if (err) err.remove();
|
||
}
|
||
inputEl.removeEventListener(eventType, clearError);
|
||
};
|
||
inputEl.addEventListener(eventType, clearError);
|
||
|
||
var errDiv = document.createElement('div');
|
||
errDiv.className = 'error-text';
|
||
errDiv.innerText = message;
|
||
|
||
var parent = inputEl.parentNode;
|
||
if (parent.classList.contains('input-with-icon') || parent.classList.contains('position-relative')) {
|
||
parent.parentNode.appendChild(errDiv);
|
||
} else {
|
||
parent.appendChild(errDiv);
|
||
}
|
||
|
||
if (!firstInvalidCollector.el) {
|
||
firstInvalidCollector.el = inputEl;
|
||
}
|
||
}
|
||
|
||
function validateStep(step) {
|
||
var stepForm = document.getElementById('step' + step + '_form');
|
||
if (!stepForm) return true;
|
||
|
||
var errorElements = stepForm.querySelectorAll('.field-error');
|
||
errorElements.forEach(function(el) {
|
||
el.classList.remove('field-error');
|
||
});
|
||
var textErrors = stepForm.querySelectorAll('.error-text');
|
||
textErrors.forEach(function(el) {
|
||
el.remove();
|
||
});
|
||
|
||
var isValid = true;
|
||
var collector = { el: null };
|
||
|
||
if (step === 1) {
|
||
var nameInput = document.getElementById('student_name');
|
||
var dobInput = document.getElementById('student_dob');
|
||
var genderSelect = document.getElementById('student_gender');
|
||
var danceStyleSelect = document.getElementById('student_dance_style');
|
||
var skillLevelSelect = document.getElementById('student_skill_level');
|
||
|
||
if (!nameInput.value.trim()) {
|
||
markInvalid(nameInput, 'Please enter the student\'s full name', collector);
|
||
isValid = false;
|
||
}
|
||
if (!dobInput.value) {
|
||
markInvalid(dobInput, 'Please select the date of birth', collector);
|
||
isValid = false;
|
||
}
|
||
if (genderSelect.selectedIndex <= 0 || genderSelect.value.indexOf('Select') === 0) {
|
||
markInvalid(genderSelect, 'Please select a gender', collector);
|
||
isValid = false;
|
||
}
|
||
if (danceStyleSelect.selectedIndex <= 0 || danceStyleSelect.value.indexOf('Select') === 0) {
|
||
markInvalid(danceStyleSelect, 'Please select a dance style', collector);
|
||
isValid = false;
|
||
}
|
||
if (skillLevelSelect.selectedIndex <= 0 || skillLevelSelect.value.indexOf('Select') === 0) {
|
||
markInvalid(skillLevelSelect, 'Please select a skill level', collector);
|
||
isValid = false;
|
||
}
|
||
} else if (step === 2) {
|
||
var parentName = document.getElementById('parent_name');
|
||
var relationship = document.getElementById('parent_relationship');
|
||
var phone = document.getElementById('parent_phone');
|
||
var email = document.getElementById('parent_email');
|
||
var city = document.getElementById('parent_city');
|
||
var postalCode = document.getElementById('parent_postal_code');
|
||
var address = document.getElementById('parent_address');
|
||
var emergencyName = document.getElementById('emergency_name');
|
||
var emergencyPhone = document.getElementById('emergency_phone');
|
||
|
||
if (!parentName.value.trim()) {
|
||
markInvalid(parentName, 'Please enter the parent/guardian name', collector);
|
||
isValid = false;
|
||
}
|
||
if (relationship.selectedIndex <= 0 || relationship.value.indexOf('Select') === 0) {
|
||
markInvalid(relationship, 'Please select a relationship', collector);
|
||
isValid = false;
|
||
}
|
||
if (!phone.value.trim()) {
|
||
markInvalid(phone, 'Please enter a phone number', collector);
|
||
isValid = false;
|
||
} else if (!validatePhone(phone.value)) {
|
||
markInvalid(phone, 'Please enter a valid phone number', collector);
|
||
isValid = false;
|
||
}
|
||
if (!email.value.trim()) {
|
||
markInvalid(email, 'Please enter an email address', collector);
|
||
isValid = false;
|
||
} else if (!validateEmail(email.value)) {
|
||
markInvalid(email, 'Please enter a valid email address', collector);
|
||
isValid = false;
|
||
}
|
||
if (!city.value.trim()) {
|
||
markInvalid(city, 'Please enter the city', collector);
|
||
isValid = false;
|
||
}
|
||
if (!postalCode.value.trim()) {
|
||
markInvalid(postalCode, 'Please enter the postal code', collector);
|
||
isValid = false;
|
||
}
|
||
if (!address.value.trim()) {
|
||
markInvalid(address, 'Please enter the address', collector);
|
||
isValid = false;
|
||
}
|
||
if (!emergencyName.value.trim()) {
|
||
markInvalid(emergencyName, 'Please enter the emergency contact name', collector);
|
||
isValid = false;
|
||
}
|
||
if (!emergencyPhone.value.trim()) {
|
||
markInvalid(emergencyPhone, 'Please enter the emergency contact number', collector);
|
||
isValid = false;
|
||
} else if (!validatePhone(emergencyPhone.value)) {
|
||
markInvalid(emergencyPhone, 'Please enter a valid phone number', collector);
|
||
isValid = false;
|
||
}
|
||
} else if (step === 3) {
|
||
var danceStyle = document.getElementById('program_dance_style');
|
||
var skillLevel = document.getElementById('program_skill_level');
|
||
var batch = document.getElementById('program_batch');
|
||
var startDate = document.getElementById('program_start_date');
|
||
|
||
if (danceStyle.selectedIndex <= 0 || danceStyle.value.indexOf('Select') === 0) {
|
||
markInvalid(danceStyle, 'Please select a dance style', collector);
|
||
isValid = false;
|
||
}
|
||
if (skillLevel.selectedIndex <= 0 || skillLevel.value.indexOf('Select') === 0) {
|
||
markInvalid(skillLevel, 'Please select a skill level', collector);
|
||
isValid = false;
|
||
}
|
||
if (batch.selectedIndex <= 0 || batch.value.indexOf('Select') === 0) {
|
||
markInvalid(batch, 'Please select a preferred batch', collector);
|
||
isValid = false;
|
||
}
|
||
if (!startDate.value) {
|
||
markInvalid(startDate, 'Please select a preferred start date', collector);
|
||
isValid = false;
|
||
}
|
||
}
|
||
|
||
if (!isValid && collector.el) {
|
||
collector.el.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||
collector.el.focus();
|
||
}
|
||
|
||
return isValid;
|
||
}
|
||
|
||
function updateReviewPage() {
|
||
var studentName = document.getElementById('student_name').value;
|
||
var studentDob = document.getElementById('student_dob').value;
|
||
var studentGender = document.getElementById('student_gender').value;
|
||
var studentDanceStyle = document.getElementById('student_dance_style').value;
|
||
var studentSkillLevel = document.getElementById('student_skill_level').value;
|
||
|
||
var formattedDob = studentDob;
|
||
if (studentDob) {
|
||
var d = new Date(studentDob);
|
||
if (!isNaN(d.getTime())) {
|
||
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
||
formattedDob = d.getDate() + " " + months[d.getMonth()] + " " + d.getFullYear();
|
||
}
|
||
}
|
||
|
||
document.getElementById('summary_student_name').textContent = studentName || '-';
|
||
document.getElementById('summary_student_dob').textContent = formattedDob || '-';
|
||
document.getElementById('summary_student_gender').textContent = studentGender || '-';
|
||
document.getElementById('summary_student_dance_style').textContent = studentDanceStyle || '-';
|
||
document.getElementById('summary_student_skill_level').textContent = studentSkillLevel || '-';
|
||
|
||
var photoInput = document.getElementById('profile_photo_input');
|
||
var reviewIcon = document.getElementById('summary_student_photo_icon');
|
||
if (photoInput && photoInput.files && photoInput.files[0] && reviewIcon) {
|
||
var reader = new FileReader();
|
||
reader.onload = function(e) {
|
||
reviewIcon.innerHTML = '<img src="' + e.target.result + '" style="width: 100%; height: 100%; border-radius: 50%; object-fit: cover;"/>';
|
||
};
|
||
reader.readAsDataURL(photoInput.files[0]);
|
||
} else if (reviewIcon) {
|
||
reviewIcon.innerHTML = '<i class="fa fa-user"></i>';
|
||
}
|
||
|
||
var parentName = document.getElementById('parent_name').value;
|
||
var parentRelationship = document.getElementById('parent_relationship').value;
|
||
var parentPhone = document.getElementById('parent_phone').value;
|
||
var parentEmail = document.getElementById('parent_email').value;
|
||
|
||
var parentAddress = document.getElementById('parent_address').value;
|
||
var parentCity = document.getElementById('parent_city').value;
|
||
var parentPostalCode = document.getElementById('parent_postal_code').value;
|
||
|
||
var fullAddress = parentAddress || '';
|
||
if (parentCity) {
|
||
fullAddress += (fullAddress ? ", " : "") + parentCity;
|
||
}
|
||
if (parentPostalCode) {
|
||
fullAddress += (parentCity ? " - " : (fullAddress ? ", " : "")) + parentPostalCode;
|
||
}
|
||
|
||
document.getElementById('summary_parent_name').textContent = parentName || '-';
|
||
document.getElementById('summary_parent_relationship').textContent = parentRelationship || '-';
|
||
document.getElementById('summary_parent_phone').textContent = parentPhone || '-';
|
||
document.getElementById('summary_parent_email').textContent = parentEmail || '-';
|
||
document.getElementById('summary_parent_address').textContent = fullAddress || '-';
|
||
|
||
var programRadios = document.getElementsByName('program_selection');
|
||
var selectedProgram = 'bharatanatyam';
|
||
for (var i = 0; i < programRadios.length; i++) {
|
||
if (programRadios[i].checked) {
|
||
selectedProgram = programRadios[i].value;
|
||
break;
|
||
}
|
||
}
|
||
|
||
var programMeta = {
|
||
'bharatanatyam': { name: 'Bharatanatyam', cat: 'Classical Dance', icon: 'fa-bank', seats: '5 Seats Available' },
|
||
'kathak': { name: 'Kathak', cat: 'Classical Dance', icon: 'fa-female', seats: '3 Seats Available' },
|
||
'hiphop': { name: 'Hip-Hop', cat: 'Street Dance', icon: 'fa-futbol-o', seats: '8 Seats Available' },
|
||
'contemporary': { name: 'Contemporary', cat: 'Modern Dance', icon: 'fa-child', seats: '6 Seats Available' },
|
||
'zumba': { name: 'Zumba', cat: 'Fitness Dance', icon: 'fa-heartbeat', seats: '10 Seats Available' },
|
||
'folk': { name: 'Folk Dance', cat: 'Cultural Dance', icon: 'fa-music', seats: '7 Seats Available' }
|
||
};
|
||
|
||
var prog = programMeta[selectedProgram] || programMeta['bharatanatyam'];
|
||
|
||
document.getElementById('summary_program_name').textContent = prog.name;
|
||
document.getElementById('summary_program_level').textContent = (document.getElementById('program_skill_level').value || 'Beginner') + ' Level';
|
||
|
||
var iconContainer = document.getElementById('summary_program_icon');
|
||
if (iconContainer) {
|
||
iconContainer.innerHTML = '<i class="fa ' + prog.icon + '"></i>';
|
||
}
|
||
|
||
document.getElementById('summary_program_seats').textContent = prog.seats;
|
||
|
||
var selectedBatch = document.getElementById('program_batch').value;
|
||
var batchText = 'Morning';
|
||
var timingText = '8:00 AM - 10:00 AM';
|
||
if (selectedBatch && selectedBatch.indexOf('Evening') >= 0) {
|
||
batchText = 'Evening';
|
||
timingText = '5:00 PM - 7:00 PM';
|
||
} else if (selectedBatch && selectedBatch.indexOf('Morning') >= 0) {
|
||
batchText = 'Morning';
|
||
timingText = '8:00 AM - 10:00 AM';
|
||
} else {
|
||
batchText = selectedBatch || '-';
|
||
timingText = '-';
|
||
}
|
||
document.getElementById('summary_program_batch').textContent = batchText;
|
||
document.getElementById('summary_program_timing').textContent = timingText;
|
||
|
||
var selectedInstructor = document.getElementById('program_instructor').value;
|
||
var instructorText = selectedInstructor;
|
||
if (selectedInstructor && selectedInstructor.indexOf('Select') === 0) {
|
||
instructorText = 'Any Instructor';
|
||
}
|
||
document.getElementById('summary_program_instructor').textContent = instructorText || 'Any Instructor';
|
||
|
||
var startD = document.getElementById('program_start_date').value;
|
||
var formattedStartD = startD;
|
||
if (startD) {
|
||
var dStart = new Date(startD);
|
||
if (!isNaN(dStart.getTime())) {
|
||
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
||
formattedStartD = dStart.getDate() + " " + months[dStart.getMonth()] + " " + dStart.getFullYear();
|
||
}
|
||
}
|
||
document.getElementById('summary_enrollment_program').textContent = prog.name;
|
||
document.getElementById('summary_start_date').textContent = formattedStartD || '-';
|
||
|
||
var goalVal = document.getElementById('program_learning_goal').value;
|
||
var regType = 'Trial Student';
|
||
if (goalVal && goalVal.indexOf('Select') < 0) {
|
||
if (goalVal === 'Professional') {
|
||
regType = 'Professional Student';
|
||
} else if (goalVal === 'Hobby') {
|
||
regType = 'Regular Student';
|
||
} else if (goalVal === 'Fitness') {
|
||
regType = 'Fitness Student';
|
||
}
|
||
}
|
||
document.getElementById('summary_registration_type').textContent = regType;
|
||
}
|
||
|
||
function goToStep(nextStep) {
|
||
var currentStep = getCurrentStep();
|
||
|
||
if (nextStep > currentStep) {
|
||
for (var step = currentStep; step < nextStep; step++) {
|
||
if (!validateStep(step)) {
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
|
||
if (nextStep === 4) {
|
||
updateReviewPage();
|
||
}
|
||
|
||
showStep(nextStep);
|
||
}
|
||
function submitRegistration() {
|
||
var btn = document.querySelector('.btn-next[onclick="submitRegistration()"]');
|
||
btn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Submitting...';
|
||
btn.disabled = true;
|
||
|
||
var data = new FormData();
|
||
data.append('student_name', document.getElementById('student_name').value);
|
||
data.append('student_dob', document.getElementById('student_dob').value);
|
||
data.append('student_gender', document.getElementById('student_gender').value);
|
||
data.append('student_dance_style', document.getElementById('student_dance_style').value);
|
||
data.append('student_skill_level', document.getElementById('student_skill_level').value);
|
||
data.append('student_medical_notes', document.getElementById('student_medical_notes').value);
|
||
data.append('parent_name', document.getElementById('parent_name').value);
|
||
data.append('parent_relationship', document.getElementById('parent_relationship').value);
|
||
data.append('parent_phone', document.getElementById('parent_phone').value);
|
||
data.append('parent_email', document.getElementById('parent_email').value);
|
||
data.append('parent_whatsapp', document.getElementById('parent_whatsapp').value);
|
||
data.append('parent_address', document.getElementById('parent_address').value);
|
||
data.append('parent_city', document.getElementById('parent_city').value);
|
||
data.append('parent_postal_code', document.getElementById('parent_postal_code').value);
|
||
|
||
fetch('/registration/submit', {
|
||
method: 'POST',
|
||
body: data
|
||
})
|
||
.then(response => {
|
||
if (response.ok) {
|
||
window.location.href = '/';
|
||
} else {
|
||
response.text().then(text => {
|
||
alert('Registration failed: ' + text);
|
||
btn.innerHTML = 'Submit Registration <i class="fa fa-arrow-right"></i>';
|
||
btn.disabled = false;
|
||
});
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('Error:', error);
|
||
alert('Registration failed. Please try again.');
|
||
btn.innerHTML = 'Submit Registration <i class="fa fa-arrow-right"></i>';
|
||
btn.disabled = false;
|
||
});
|
||
}
|
||
]]>
|
||
</script>
|
||
</t>
|
||
</template>
|
||
</odoo>
|