Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PESO Registry Portal</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> | |
| <script src="https://unpkg.com/feather-icons"></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); | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background: linear-gradient(135deg, #E0F7FA 0%, #B2EBF2 25%, #80DEEA 50%, #4DD0E1 75%, #26C6DA 100%); | |
| min-height: 100vh; | |
| color: #263238; | |
| } | |
| .auth-card { | |
| background: rgba(255,255,255,0.9) ; | |
| } | |
| .text-muted { | |
| color: #546E7A ; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .auth-card { | |
| border-radius: 20px; | |
| box-shadow: 0 15px 35px rgba(0,0,0,0.1); | |
| transition: var(--mint-transition); | |
| background: rgba(255,255,255,0.95); | |
| backdrop-filter: blur(5px); | |
| border: 1px solid rgba(255,255,255,0.2); | |
| } | |
| .auth-card:hover { | |
| transform: translateY(-8px) scale(1.01); | |
| box-shadow: 0 20px 40px rgba(0,0,0,0.15); | |
| } | |
| .btn-mint { | |
| background: linear-gradient(135deg, #80DEEA 0%, #4DB6AC 100%); | |
| border: none; | |
| color: white; | |
| font-weight: 600; | |
| letter-spacing: 0.5px; | |
| border-radius: 50px; | |
| padding: 12px 28px; | |
| box-shadow: 0 4px 15px rgba(77, 182, 172, 0.3); | |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| position: relative; | |
| overflow: hidden; | |
| text-shadow: 0 1px 1px rgba(0,0,0,0.1); | |
| } | |
| .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%); | |
| } | |
| .nav-pills .nav-link { | |
| transition: all 0.3s ease; | |
| border-radius: 50px; | |
| margin: 0 5px; | |
| padding: 10px 20px; | |
| color: #6c757d; | |
| } | |
| .nav-pills .nav-link.active { | |
| background: linear-gradient(135deg, #4DB6AC 0%, #00897B 100%); | |
| color: white; | |
| box-shadow: 0 4px 15px rgba(0, 137, 123, 0.3); | |
| transform: translateY(-2px); | |
| } | |
| .nav-pills .nav-link:not(.active):hover { | |
| background: rgba(77, 182, 172, 0.1); | |
| color: #00897B; | |
| } | |
| .bg-mint { | |
| background: linear-gradient(135deg, #4DB6AC 0%, #00897B 100%); | |
| } | |
| .text-mint { | |
| color: #00897B; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container-fluid vh-100 d-flex align-items-center"> | |
| <div class="container"> | |
| <div class="row justify-content-center"> | |
| <div class="col-md-8 col-lg-6"> | |
| <div class="auth-card bg-white p-5"> | |
| <div class="text-center mb-4"> | |
| <img src="http://static.photos/nature/200x200/42" alt="Logo" class="rounded-circle mb-3" width="100" style="animation: float 3s ease-in-out infinite; box-shadow: 0 5px 15px rgba(0,0,0,0.1);"> | |
| <h2 class="fw-bold" style="background: linear-gradient(45deg, #4DB6AC, #00897B, #00695C); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block;">PESO Registry Portal</h2> | |
| <p class="text-muted mt-2">Public Employment Service Office</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> | |
| <ul class="nav nav-pills nav-fill mb-4" id="myTab" role="tablist"> | |
| <li class="nav-item" role="presentation"> | |
| <button class="nav-link active" id="client-tab" data-bs-toggle="tab" data-bs-target="#client" type="button" role="tab">Client Login</button> | |
| </li> | |
| <li class="nav-item" role="presentation"> | |
| <button class="nav-link" id="admin-tab" data-bs-toggle="tab" data-bs-target="#admin" type="button" role="tab">Admin Login</button> | |
| </li> | |
| </ul> | |
| <div class="tab-content" id="myTabContent"> | |
| <div class="tab-pane fade show active" id="client" role="tabpanel" aria-labelledby="client-tab"> | |
| <form id="clientLoginForm"> | |
| <div class="mb-3"> | |
| <label for="clientUsername" class="form-label">Username</label> | |
| <input type="text" class="form-control" id="clientUsername" required> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="clientPassword" class="form-label">Password</label> | |
| <input type="password" class="form-control" id="clientPassword" required> | |
| </div> | |
| <div class="d-grid gap-2"> | |
| <button type="submit" class="btn btn-mint"> | |
| <i data-feather="log-in" class="me-2"></i> Login as Client | |
| </button> | |
| </div> | |
| <div class="text-center mt-3"> | |
| <a href="client-register.html" class="text-mint text-decoration-none">Register as Client</a> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="tab-pane fade" id="admin" role="tabpanel" aria-labelledby="admin-tab"> | |
| <form id="adminLoginForm"> | |
| <div class="mb-3"> | |
| <label for="adminUsername" class="form-label">Username</label> | |
| <input type="text" class="form-control" id="adminUsername" required> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="adminPassword" class="form-label">Password</label> | |
| <input type="password" class="form-control" id="adminPassword" required> | |
| </div> | |
| <div class="d-grid gap-2"> | |
| <button type="submit" class="btn btn-mint"> | |
| <i data-feather="lock" class="me-2"></i> Login as Admin | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </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(); | |
| // Enhanced form animations with anime.js | |
| document.querySelectorAll('.form-control').forEach(input => { | |
| input.addEventListener('focus', function() { | |
| anime({ | |
| targets: this.parentElement, | |
| scale: 1.02, | |
| translateY: -3, | |
| duration: 300, | |
| easing: 'easeOutQuad' | |
| }); | |
| anime({ | |
| targets: this.parentElement.querySelector('label'), | |
| color: 'var(--mint-dark)', | |
| duration: 300 | |
| }); | |
| }); | |
| input.addEventListener('blur', function() { | |
| anime({ | |
| targets: this.parentElement, | |
| scale: 1, | |
| translateY: 0, | |
| duration: 300, | |
| easing: 'easeOutQuad' | |
| }); | |
| anime({ | |
| targets: this.parentElement.querySelector('label'), | |
| color: '#6c757d', | |
| duration: 300 | |
| }); | |
| }); | |
| }); | |
| // Enhanced floating label effect with icons | |
| document.querySelectorAll('.form-label').forEach(label => { | |
| label.style.position = 'relative'; | |
| label.style.paddingLeft = '25px'; | |
| label.style.transition = 'all 0.3s ease'; | |
| const icon = document.createElement('span'); | |
| icon.innerHTML = feather.icons['user'].toSvg({ | |
| width: 16, | |
| height: 16, | |
| color: '#6c757d', | |
| 'stroke-width': 1.5 | |
| }); | |
| icon.style.position = 'absolute'; | |
| icon.style.left = '0'; | |
| icon.style.top = '3px'; | |
| icon.style.transition = 'all 0.3s ease'; | |
| label.prepend(icon); | |
| label.addEventListener('click', function() { | |
| anime({ | |
| targets: this, | |
| translateY: -5, | |
| color: 'var(--mint-dark)', | |
| duration: 300 | |
| }); | |
| anime({ | |
| targets: icon, | |
| color: 'var(--mint-dark)', | |
| duration: 300 | |
| }); | |
| setTimeout(() => { | |
| anime({ | |
| targets: this, | |
| translateY: 0, | |
| color: '#6c757d', | |
| duration: 300 | |
| }); | |
| anime({ | |
| targets: icon, | |
| color: '#6c757d', | |
| duration: 300 | |
| }); | |
| }, 300); | |
| }); | |
| }); | |
| // Enhanced form submission with anime.js | |
| document.getElementById('clientLoginForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| anime({ | |
| targets: this, | |
| scale: 0.95, | |
| opacity: 0.8, | |
| easing: 'easeInOutQuad', | |
| duration: 300 | |
| }); | |
| // Show loading animation | |
| const submitBtn = this.querySelector('button[type="submit"]'); | |
| submitBtn.innerHTML = '<i data-feather="loader" class="animate-spin me-2"></i> Authenticating...'; | |
| feather.replace(); | |
| setTimeout(() => { | |
| anime({ | |
| targets: '.auth-card', | |
| translateY: -20, | |
| opacity: 0, | |
| duration: 500, | |
| complete: function() { | |
| window.location.href = 'client-dashboard.html'; | |
| } | |
| }); | |
| }, 1500); | |
| }); | |
| document.getElementById('adminLoginForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| anime({ | |
| targets: this, | |
| scale: 0.95, | |
| opacity: 0.8, | |
| easing: 'easeInOutQuad', | |
| duration: 300 | |
| }); | |
| // Show loading animation | |
| const submitBtn = this.querySelector('button[type="submit"]'); | |
| submitBtn.innerHTML = '<i data-feather="loader" class="animate-spin me-2"></i> Authenticating...'; | |
| feather.replace(); | |
| setTimeout(() => { | |
| anime({ | |
| targets: '.auth-card', | |
| translateY: -20, | |
| opacity: 0, | |
| duration: 500, | |
| complete: function() { | |
| window.location.href = 'admin-dashboard.html'; | |
| } | |
| }); | |
| }, 1500); | |
| }); | |
| // Enhanced tab switching animation | |
| document.querySelectorAll('.nav-link').forEach(link => { | |
| link.addEventListener('click', function() { | |
| anime({ | |
| targets: '.auth-card', | |
| translateY: [0, -10, 0], | |
| opacity: [1, 0.8, 1], | |
| duration: 600, | |
| easing: 'easeInOutQuad' | |
| }); | |
| // Add icon animation | |
| if (this.id === 'client-tab') { | |
| anime({ | |
| targets: '.auth-card img', | |
| rotate: '1turn', | |
| duration: 800, | |
| easing: 'easeInOutQuad' | |
| }); | |
| } else { | |
| anime({ | |
| targets: '.auth-card img', | |
| scale: [1, 1.1, 1], | |
| duration: 600, | |
| easing: 'easeInOutQuad' | |
| }); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |