Spaces:
Running
Running
add animations, gradient colors, icons and a lot more eye comfortness, creativity in all buttons and navigation bars
457c2ea verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Client Registration | PESO Registry</title> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| :root { | |
| --mint-green: #98FF98; | |
| --mint-dark: #79C779; | |
| --mint-light: #D1FFD1; | |
| --mint-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| } | |
| .registration-card { | |
| border-radius: 20px; | |
| box-shadow: 0 15px 35px rgba(0,0,0,0.1); | |
| background: rgba(255,255,255,0.95); | |
| backdrop-filter: blur(5px); | |
| border: 1px solid rgba(255,255,255,0.2); | |
| transition: var(--mint-transition); | |
| } | |
| .registration-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 40px rgba(0,0,0,0.15); | |
| } | |
| .form-section { | |
| display: none; | |
| opacity: 0; | |
| transform: translateX(-20px); | |
| transition: all 0.6s ease; | |
| } | |
| .form-section.active { | |
| display: block; | |
| opacity: 1; | |
| transform: translateX(0); | |
| animation: fadeIn 0.6s ease forwards; | |
| } | |
| @keyframes fadeIn { | |
| 0% { opacity: 0; transform: translateX(-30px); } | |
| 100% { opacity: 1; transform: translateX(0); } | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-8px); } | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .btn-mint { | |
| background: linear-gradient(135deg, var(--mint-green) 0%, var(--mint-dark) 100%); | |
| border: none; | |
| color: #333; | |
| font-weight: 600; | |
| letter-spacing: 0.5px; | |
| border-radius: 50px; | |
| padding: 12px 28px; | |
| box-shadow: 0 4px 15px rgba(121, 199, 121, 0.3); | |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn-mint:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 8px 20px rgba(121, 199, 121, 0.4); | |
| color: #fff; | |
| } | |
| .btn-mint:active { | |
| transform: translateY(1px); | |
| } | |
| .btn-mint::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); | |
| transform: translateX(-100%); | |
| transition: 0.6s; | |
| } | |
| .btn-mint:hover::after { | |
| transform: translateX(100%); | |
| } | |
| .progress-bar { | |
| background: linear-gradient(90deg, var(--mint-light) 0%, var(--mint-green) 50%, var(--mint-dark) 100%); | |
| background-size: 200% 100%; | |
| animation: gradient 2s ease infinite; | |
| } | |
| @keyframes gradient { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-light"> | |
| <div class="container py-5"> | |
| <div class="row justify-content-center"> | |
| <div class="col-lg-8"> | |
| <div class="registration-card p-4 p-md-5 mb-4"> | |
| <div class="text-center mb-4 position-relative"> | |
| <h2 class="fw-bold" style="background: linear-gradient(45deg, var(--mint-green), var(--mint-dark)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block;">Client Registration</h2> | |
| <p class="text-muted">Complete the form to register as a PESO client</p> | |
| <div class="position-absolute top-0 end-0 m-3"> | |
| <span class="badge bg-mint text-dark rounded-pill px-3 py-2 shadow-sm pulse-animation">NEW</span> | |
| </div> | |
| </div> | |
| <div class="progress mb-4" style="height: 12px; border-radius: 10px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);"> | |
| <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 25%; border-radius: 10px;" id="progressBar"></div> | |
| </div> | |
| <form id="registrationForm"> | |
| <!-- Personal Information --> | |
| <div class="form-section active" id="section1"> | |
| <h5 class="mb-4">Personal Information</h5> | |
| <div class="row g-3"> | |
| <div class="col-md-4"> | |
| <label for="lastName" class="form-label">Last Name</label> | |
| <input type="text" class="form-control" id="lastName" required> | |
| </div> | |
| <div class="col-md-4"> | |
| <label for="firstName" class="form-label">First Name</label> | |
| <input type="text" class="form-control" id="firstName" required> | |
| </div> | |
| <div class="col-md-4"> | |
| <label for="middleName" class="form-label">Middle Name</label> | |
| <input type="text" class="form-control" id="middleName"> | |
| </div> | |
| <div class="col-md-3"> | |
| <label for="age" class="form-label">Age</label> | |
| <input type="number" class="form-control" id="age" required> | |
| </div> | |
| <div class="col-md-5"> | |
| <label for="birthdate" class="form-label">Birthdate</label> | |
| <input type="date" class="form-control" id="birthdate" required> | |
| </div> | |
| <div class="col-md-4"> | |
| <label for="sex" class="form-label">Sex</label> | |
| <select class="form-select" id="sex" required> | |
| <option value="" selected disabled>Select...</option> | |
| <option value="Male">Male</option> | |
| <option value="Female">Female</option> | |
| </select> | |
| </div> | |
| <div class="col-md-4"> | |
| <label for="maritalStatus" class="form-label">Marital Status</label> | |
| <select class="form-select" id="maritalStatus" required> | |
| <option value="" selected disabled>Select...</option> | |
| <option value="Single">Single</option> | |
| <option value="Married">Married</option> | |
| <option value="Separated">Separated</option> | |
| <option value="Widowed">Widowed</option> | |
| </select> | |
| </div> | |
| <div class="col-md-8"> | |
| <label for="educationalBg" class="form-label">Educational Background</label> | |
| <select class="form-select" id="educationalBg" required> | |
| <option value="" selected disabled>Select...</option> | |
| <option value="Elementary">Elementary</option> | |
| <option value="High School">High School</option> | |
| <option value="Vocational">Vocational</option> | |
| <option value="College">College</option> | |
| <option value="Post Graduate">Post Graduate</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="d-flex justify-content-between mt-4"> | |
| <button type="button" class="btn btn-outline-secondary disabled"> | |
| <i data-feather="chevron-left" class="me-1"></i> Previous | |
| </button> | |
| <button type="button" class="btn btn-mint next-section"> | |
| Next <i data-feather="chevron-right" class="ms-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Contact Information --> | |
| <div class="form-section" id="section2"> | |
| <h5 class="mb-4">Contact Information</h5> | |
| <div class="row g-3"> | |
| <div class="col-md-6"> | |
| <label for="email" class="form-label">Email</label> | |
| <input type="email" class="form-control" id="email" required> | |
| </div> | |
| <div class="col-md-6"> | |
| <label for="phone" class="form-label">Phone Number</label> | |
| <input type="tel" class="form-control" id="phone" required> | |
| </div> | |
| <div class="col-md-6"> | |
| <label for="barangay" class="form-label">Barangay</label> | |
| <select class="form-select" id="barangay" required> | |
| <option value="" selected disabled>Select Barangay</option> | |
| <option value="Alapang">Alapang</option> | |
| <option value="Alno">Alno</option> | |
| <option value="Ambiong">Ambiong</option> | |
| <option value="Bahong">Bahong</option> | |
| <option value="Balili">Balili</option> | |
| <option value="Beckel">Beckel</option> | |
| <option value="Betag">Betag</option> | |
| <option value="Bineng">Bineng</option> | |
| <option value="Cruz">Cruz</option> | |
| <option value="Lubas">Lubas</option> | |
| <option value="Pico">Pico</option> | |
| <option value="Poblacion">Poblacion</option> | |
| <option value="Puguis">Puguis</option> | |
| <option value="Shilan">Shilan</option> | |
| <option value="Tawang">Tawang</option> | |
| <option value="Wangal">Wangal</option> | |
| </select> | |
| </div> | |
| <div class="col-md-6"> | |
| <label for="address" class="form-label">Complete Address</label> | |
| <input type="text" class="form-control" id="address" required> | |
| </div> | |
| </div> | |
| <div class="d-flex justify-content-between mt-4"> | |
| <button type="button" class="btn btn-outline-secondary prev-section">Previous</button> | |
| <button type="button" class="btn btn-mint next-section">Next</button> | |
| </div> | |
| </div> | |
| <!-- Beneficiary Category --> | |
| <div class="form-section" id="section3"> | |
| <h5 class="mb-4">Beneficiary Category</h5> | |
| <div class="mb-3"> | |
| <label class="form-label">Please select your status (check all that apply):</label> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="checkbox" id="employed" name="beneficiaryCategory"> | |
| <label class="form-check-label" for="employed">Employed</label> | |
| </div> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="checkbox" id="selfEmployed" name="beneficiaryCategory"> | |
| <label class="form-check-label" for="selfEmployed">Self-Employed</label> | |
| </div> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="checkbox" id="unemployed" name="beneficiaryCategory"> | |
| <label class="form-check-label" for="unemployed">Unemployed</label> | |
| </div> | |
| </div> | |
| <div class="d-flex justify-content-between mt-4"> | |
| <button type="button" class="btn btn-outline-secondary prev-section">Previous</button> | |
| <button type="button" class="btn btn-mint next-section">Next</button> | |
| </div> | |
| </div> | |
| <!-- Services --> | |
| <div class="form-section" id="section4"> | |
| <h5 class="mb-4">Services</h5> | |
| <div class="mb-3"> | |
| <label class="form-label">Please select services you're interested in:</label> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="checkbox" id="spes" name="services"> | |
| <label class="form-check-label" for="spes">SPES (Special Program of Employment for Students)</label> | |
| </div> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="checkbox" id="tupad" name="services"> | |
| <label class="form-check-label" for="tupad">TUPAD (Tulong Para Sa Disadvantaged Workers)</label> | |
| </div> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="checkbox" id="leep" name="services"> | |
| <label class="form-check-label" for="leep">LEEP (Local Emergency Employment Program)</label> | |
| </div> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="checkbox" id="jobStart" name="services"> | |
| <label class="form-check-label" for="jobStart">Job Start</label> | |
| </div> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="checkbox" id="gip" name="services"> | |
| <label class="form-check-label" for="gip">GIP</label> | |
| </div> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="checkbox" id="livelihood" name="services"> | |
| <label class="form-check-label" for="livelihood">Livelihood</label> | |
| <div class="mt-2 ms-4" id="livelihoodOptions" style="display: none;"> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="radio" name="livelihoodType" id="individual" value="individual"> | |
| <label class="form-check-label" for="individual">Individual</label> | |
| </div> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="radio" name="livelihoodType" id="association" value="association"> | |
| <label class="form-check-label" for="association">Association</label> | |
| <input type="text" class="form-control mt-2" id="associationAddress" placeholder="Association Address" style="display: none;"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="checkbox" id="jobSeeker" name="services"> | |
| <label class="form-check-label" for="jobSeeker">Job Seeker</label> | |
| <div class="mt-2 ms-4" id="jobSeekerOptions" style="display: none;"> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="radio" name="jobReferral" id="local" value="local"> | |
| <label class="form-check-label" for="local">Local</label> | |
| </div> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="radio" name="jobReferral" id="overseas" value="overseas"> | |
| <label class="form-check-label" for="overseas">Overseas</label> | |
| </div> | |
| <div class="mt-2"> | |
| <label for="jobLookingFor" class="form-label">What job are you looking for?</label> | |
| <input type="text" class="form-control" id="jobLookingFor"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="d-flex justify-content-between mt-4"> | |
| <button type="button" class="btn btn-outline-secondary prev-section">Previous</button> | |
| <button type="button" class="btn btn-mint next-section">Next</button> | |
| </div> | |
| </div> | |
| <!-- Documents Upload --> | |
| <div class="form-section" id="section5"> | |
| <h5 class="mb-4">Documents Upload</h5> | |
| <div class="mb-3"> | |
| <label for="cvUpload" class="form-label">Upload CV/Resume/Biodata</label> | |
| <input class="form-control" type="file" id="cvUpload" accept=".pdf,.doc,.docx"> | |
| <div class="form-text">File types: .pdf, .doc, .docx (Max 5MB)</div> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="otherDocs" class="form-label">Other Supporting Documents (Optional)</label> | |
| <input class="form-control" type="file" id="otherDocs" multiple> | |
| <div class="form-text">You can upload multiple files</div> | |
| </div> | |
| <div class="d-flex justify-content-between mt-4"> | |
| <button type="button" class="btn btn-outline-secondary prev-section">Previous</button> | |
| <button type="submit" class="btn btn-mint">Submit Registration</button> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script> | |
| <script> | |
| feather.replace(); | |
| // Form navigation | |
| const sections = document.querySelectorAll('.form-section'); | |
| const nextButtons = document.querySelectorAll('.next-section'); | |
| const prevButtons = document.querySelectorAll('.prev-section'); | |
| const progressBar = document.getElementById('progressBar'); | |
| let currentSection = 0; | |
| // Show first section by default | |
| sections[0].classList.add('active'); | |
| nextButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| if (validateSection(currentSection)) { | |
| sections[currentSection].classList.remove('active'); | |
| currentSection++; | |
| sections[currentSection].classList.add('active'); | |
| updateProgressBar(); | |
| } | |
| }); | |
| }); | |
| prevButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| sections[currentSection].classList.remove('active'); | |
| currentSection--; | |
| sections[currentSection].classList.add('active'); | |
| updateProgressBar(); | |
| }); | |
| }); | |
| function updateProgressBar() { | |
| const progress = ((currentSection + 1) / sections.length) * 100; | |
| progressBar.style.width = `${progress}%`; | |
| // Add pulse animation on progress update | |
| progressBar.classList.add('pulse-animation'); | |
| setTimeout(() => { | |
| progressBar.classList.remove('pulse-animation'); | |
| }, 300); | |
| // Smooth width transition | |
| progressBar.style.transition = 'width 0.6s cubic-bezier(0.65, 0.05, 0.36, 1)'; | |
| } | |
| function validateSection(sectionIndex) { | |
| // Basic validation example - implement proper validation for each section | |
| if (sectionIndex === 0) { | |
| // Validate personal info | |
| const requiredFields = ['lastName', 'firstName', 'age', 'birthdate', 'sex', 'maritalStatus', 'educationalBg']; | |
| for (const field of requiredFields) { | |
| if (!document.getElementById(field).value) { | |
| alert(`Please fill in ${field.replace(/([A-Z])/g, ' $1').toLowerCase()}`); | |
| return false; | |
| } | |
| } | |
| } | |
| return true; | |
| } | |
| // Toggle livelihood options | |
| document.getElementById('livelihood').addEventListener('change', function() { | |
| const optionsDiv = document.getElementById('livelihoodOptions'); | |
| optionsDiv.style.display = this.checked ? 'block' : 'none'; | |
| }); | |
| // Toggle association address field | |
| document.getElementById('association').addEventListener('change', function() { | |
| document.getElementById('associationAddress').style.display = this.checked ? 'block' : 'none'; | |
| }); | |
| // Toggle job seeker options | |
| document.getElementById('jobSeeker').addEventListener('change', function() { | |
| document.getElementById('jobSeekerOptions').style.display = this.checked ? 'block' : 'none'; | |
| }); | |
| // Form submission | |
| document.getElementById('registrationForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Add submission animation | |
| anime({ | |
| targets: this, | |
| scale: 0.95, | |
| opacity: 0.8, | |
| easing: 'easeInOutQuad', | |
| duration: 300 | |
| }); | |
| // Show success animation | |
| const successIcon = document.createElement('div'); | |
| successIcon.innerHTML = feather.icons['check-circle'].toSvg({ | |
| width: 64, | |
| height: 64, | |
| color: 'var(--mint-green)', | |
| 'stroke-width': 1.5 | |
| }); | |
| successIcon.style.position = 'absolute'; | |
| successIcon.style.top = '50%'; | |
| successIcon.style.left = '50%'; | |
| successIcon.style.transform = 'translate(-50%, -50%)'; | |
| successIcon.style.opacity = '0'; | |
| successIcon.style.zIndex = '1000'; | |
| document.querySelector('.registration-card').appendChild(successIcon); | |
| anime({ | |
| targets: successIcon, | |
| opacity: [0, 1], | |
| scale: [0.5, 1.2, 1], | |
| duration: 800, | |
| easing: 'easeOutElastic(1, .8)' | |
| }); | |
| // Simulate processing | |
| setTimeout(() => { | |
| anime({ | |
| targets: '.registration-card', | |
| scale: 0.9, | |
| opacity: 0, | |
| duration: 500, | |
| complete: function() { | |
| window.location.href = 'create-password.html'; | |
| } | |
| }); | |
| }, 1500); | |
| }); | |
| // Enhanced input focus effects | |
| document.querySelectorAll('input, select').forEach(input => { | |
| input.style.transition = 'all 0.3s ease'; | |
| input.style.borderRadius = '8px'; | |
| input.style.border = '1px solid #dee2e6'; | |
| input.addEventListener('focus', function() { | |
| this.style.borderColor = 'var(--mint-green)'; | |
| this.style.boxShadow = '0 0 0 0.25rem rgba(152, 255, 152, 0.25)'; | |
| this.style.transform = 'translateY(-2px)'; | |
| anime({ | |
| targets: this.parentElement.querySelector('label'), | |
| color: ['#6c757d', 'var(--mint-dark)'], | |
| translateY: -5, | |
| duration: 300 | |
| }); | |
| }); | |
| input.addEventListener('blur', function() { | |
| this.style.borderColor = '#dee2e6'; | |
| this.style.boxShadow = 'none'; | |
| this.style.transform = 'translateY(0)'; | |
| anime({ | |
| targets: this.parentElement.querySelector('label'), | |
| color: ['var(--mint-dark)', '#6c757d'], | |
| translateY: 0, | |
| duration: 300 | |
| }); | |
| }); | |
| }); | |
| // Enhanced floating effect with gradients and icons | |
| document.querySelectorAll('.form-check-label').forEach(el => { | |
| el.style.position = 'relative'; | |
| el.style.paddingLeft = '30px'; | |
| el.style.cursor = 'pointer'; | |
| el.style.transition = 'all 0.3s ease'; | |
| const icon = document.createElement('span'); | |
| icon.innerHTML = feather.icons['check-square'].toSvg({ | |
| width: 18, | |
| height: 18, | |
| color: '#dee2e6', | |
| 'stroke-width': 1.5 | |
| }); | |
| icon.style.position = 'absolute'; | |
| icon.style.left = '0'; | |
| icon.style.top = '2px'; | |
| icon.style.transition = 'all 0.3s ease'; | |
| el.prepend(icon); | |
| el.addEventListener('mouseenter', () => { | |
| anime({ | |
| targets: el, | |
| translateY: -3, | |
| color: 'var(--mint-dark)', | |
| duration: 300 | |
| }); | |
| anime({ | |
| targets: icon, | |
| color: 'var(--mint-green)', | |
| duration: 300 | |
| }); | |
| }); | |
| el.addEventListener('mouseleave', () => { | |
| anime({ | |
| targets: el, | |
| translateY: 0, | |
| color: '#212529', | |
| duration: 300 | |
| }); | |
| anime({ | |
| targets: icon, | |
| color: '#dee2e6', | |
| duration: 300 | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |