Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MediTrack | Doctor Login</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f0f7ff; | |
| } | |
| .login-card { | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); | |
| transition: all 0.3s ease; | |
| } | |
| .login-card:hover { | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12); | |
| } | |
| .input-group { | |
| transition: all 0.3s ease; | |
| } | |
| .input-group:focus-within { | |
| transform: translateY(-2px); | |
| } | |
| .wave-shape { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| overflow: hidden; | |
| line-height: 0; | |
| } | |
| .wave-shape svg { | |
| position: relative; | |
| display: block; | |
| width: calc(100% + 1.3px); | |
| height: 100px; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="min-h-screen flex flex-col md:flex-row"> | |
| <!-- Left Side - Branding/Illustration --> | |
| <div class="w-full md:w-1/2 bg-gradient-to-br from-blue-600 to-blue-400 flex flex-col items-center justify-center p-10 text-white relative overflow-hidden"> | |
| <div class="wave-shape"> | |
| <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"> | |
| <path d="M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z" fill="#ffffff"></path> | |
| </svg> | |
| </div> | |
| <div class="text-center relative z-10 max-w-md"> | |
| <div class="floating mx-auto mb-8"> | |
| <i class="fas fa-heartbeat text-6xl text-white pulse"></i> | |
| </div> | |
| <h1 class="text-4xl font-bold mb-4">MediTrack</h1> | |
| <p class="text-xl mb-6">Doctor Follow-Up Management System</p> | |
| <p class="text-blue-100">Securely access patient records, schedule follow-ups, and manage treatments from anywhere.</p> | |
| </div> | |
| <!-- Medical themed decorative elements --> | |
| <div class="absolute top-20 left-10 opacity-20 text-6xl"> | |
| <i class="fas fa-heartbeat"></i> | |
| </div> | |
| <div class="absolute bottom-20 right-10 opacity-20 text-6xl"> | |
| <i class="fas fa-stethoscope"></i> | |
| </div> | |
| <div class="absolute top-1/3 right-20 opacity-20 text-4xl"> | |
| <i class="fas fa-hospital"></i> | |
| </div> | |
| </div> | |
| <!-- Right Side - Login Form --> | |
| <div class="w-full md:w-1/2 flex items-center justify-center p-8 bg-white"> | |
| <div class="login-card bg-white rounded-xl p-8 w-full max-w-md"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-2">Welcome Back</h2> | |
| <p class="text-gray-600 mb-8">Please login to access your account</p> | |
| <form> | |
| <div class="mb-6"> | |
| <div class="input-group mb-4"> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"> | |
| <i class="fas fa-envelope text-gray-400"></i> | |
| </div> | |
| <input type="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5" placeholder="doctor@example.com" required> | |
| </div> | |
| </div> | |
| <div class="input-group mb-4"> | |
| <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"> | |
| <i class="fas fa-lock text-gray-400"></i> | |
| </div> | |
| <input type="password" id="password" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5" placeholder="••••••••" required> | |
| <button type="button" class="absolute inset-y-0 right-0 flex items-center pr-3" id="togglePassword"> | |
| <i class="fas fa-eye text-gray-400 hover:text-gray-600 cursor-pointer"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center"> | |
| <input id="remember" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"> | |
| <label for="remember" class="ml-2 text-sm text-gray-600">Remember me</label> | |
| </div> | |
| <a href="#" class="text-sm text-blue-600 hover:underline">Forgot password?</a> | |
| </div> | |
| </div> | |
| <button type="submit" class="w-full text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center transition-all duration-300 transform hover:scale-[1.02]"> | |
| Sign In | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| <div class="relative my-6"> | |
| <div class="absolute inset-0 flex items-center"> | |
| <div class="w-full border-t border-gray-300"></div> | |
| </div> | |
| <div class="relative flex justify-center text-sm"> | |
| <span class="px-2 bg-white text-gray-500">Or continue with</span> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <a href="#" class="text-gray-700 bg-white hover:bg-gray-50 focus:ring-2 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center justify-center border border-gray-300"> | |
| <i class="fab fa-google text-red-500 mr-2"></i> | |
| </a> | |
| <a href="#" class="text-gray-700 bg-white hover:bg-gray-50 focus:ring-2 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center justify-center border border-gray-300"> | |
| <i class="fab fa-microsoft text-blue-500 mr-2"></i> | |
| Microsoft | |
| </a> | |
| </div> | |
| </form> | |
| <p class="mt-8 text-center text-sm text-gray-500"> | |
| Don't have an account? <a href="#" class="text-blue-600 hover:underline">Request access</a> | |
| </p> | |
| <div class="mt-8 text-center text-xs text-gray-400"> | |
| <p>By continuing, you agree to our <a href="#" class="text-blue-500 hover:underline">Terms of Service</a> and <a href="#" class="text-blue-500 hover:underline">Privacy Policy</a>.</p> | |
| <p class="mt-1">© 2023 MediTrack. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Toggle password visibility | |
| const togglePassword = document.querySelector('#togglePassword'); | |
| const password = document.querySelector('#password'); | |
| togglePassword.addEventListener('click', function() { | |
| const icon = this.querySelector('i'); | |
| const type = password.getAttribute('type') === 'password' ? 'text' : 'password'; | |
| password.setAttribute('type', type); | |
| icon.classList.toggle('fa-eye'); | |
| icon.classList.toggle('fa-eye-slash'); | |
| }); | |
| // Simple form validation example | |
| const form = document.querySelector('form'); | |
| form.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const email = document.getElementById('email').value; | |
| const password = document.getElementById('password').value; | |
| if (!email || !password) { | |
| alert('Please fill in all fields'); | |
| return; | |
| } | |
| // In a real app, you would submit the form to your backend | |
| console.log('Login attempted with:', email, password); | |
| // Simulate login (remove in production) | |
| alert('Login successful! Redirecting...'); | |
| // window.location.href = 'dashboard.html'; | |
| }); | |
| // Animation for buttons on hover | |
| const buttons = document.querySelectorAll('button, a[href="#"]'); | |
| buttons.forEach(button => { | |
| button.addEventListener('mouseenter', function() { | |
| this.style.transform = 'translateY(-1px)'; | |
| }); | |
| button.addEventListener('mouseleave', function() { | |
| this.style.transform = 'translateY(0)'; | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=KuangQuanS/superniu" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |