|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Login - ARGO Data Explorer</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
|
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
|
|
|
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script> |
|
|
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script> |
|
|
<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: #f8fafc; |
|
|
} |
|
|
.govt-header { |
|
|
background: linear-gradient(135deg, #0f4c81 0%, #1a5f8b 100%); |
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.login-container { |
|
|
background: white; |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
|
|
border-radius: 12px; |
|
|
overflow: hidden; |
|
|
} |
|
|
.input-field { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.input-field:focus { |
|
|
border-color: #3b82f6; |
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); |
|
|
} |
|
|
.btn-primary { |
|
|
background: linear-gradient(135deg, #0f4c81 0%, #1a5f8b 100%); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.btn-primary:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 5px 15px rgba(15, 76, 129, 0.3); |
|
|
} |
|
|
.divider { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
text-align: center; |
|
|
} |
|
|
.divider::before, .divider::after { |
|
|
content: ""; |
|
|
flex: 1; |
|
|
border-bottom: 1px solid #e2e8f0; |
|
|
} |
|
|
.divider:not(:empty)::before { |
|
|
margin-right: 1em; |
|
|
} |
|
|
.divider:not(:empty)::after { |
|
|
margin-left: 1em; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen flex flex-col"> |
|
|
|
|
|
<div class="govt-header text-white py-2 px-4"> |
|
|
<div class="container mx-auto flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/4/41/Flag_of_India.svg/1200px-Flag_of_India.svg.png" alt="Indian Flag" class="h-8"> |
|
|
<img src="https://www.moes.gov.in/sites/default/files/moes-logo_1.png" alt="MoES Logo" class="h-10"> |
|
|
<span class="font-bold">भारत सरकार | Government of India</span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<span class="text-sm">A-14, 15 & 19, Sector-1, Noida, UP-201301</span> |
|
|
<span class="text-sm">Email: support@moes.gov.in</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<main class="flex-1 flex items-center justify-center py-12 px-4"> |
|
|
<div class="login-container w-full max-w-md" data-aos="fade-up"> |
|
|
<div class="bg-blue-700 text-white p-6 text-center"> |
|
|
<h1 class="text-2xl font-bold">FloatChat Login</h1> |
|
|
<p class="text-blue-100">Access ARGO Data Explorer with your credentials</p> |
|
|
</div> |
|
|
|
|
|
<div class="p-8"> |
|
|
<form id="loginForm" class="space-y-6"> |
|
|
<div> |
|
|
<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 pl-3 flex items-center pointer-events-none"> |
|
|
<i data-feather="mail" class="h-5 w-5 text-gray-400"></i> |
|
|
</div> |
|
|
<input id="email" name="email" type="email" autocomplete="email" required |
|
|
class="input-field pl-10 block w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<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 pl-3 flex items-center pointer-events-none"> |
|
|
<i data-feather="lock" class="h-5 w-5 text-gray-400"></i> |
|
|
</div> |
|
|
<input id="password" name="password" type="password" autocomplete="current-password" required |
|
|
class="input-field pl-10 block w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<input id="remember-me" name="remember-me" type="checkbox" |
|
|
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> |
|
|
<label for="remember-me" class="ml-2 block text-sm text-gray-700">Remember me</label> |
|
|
</div> |
|
|
|
|
|
<div class="text-sm"> |
|
|
<a href="#" class="font-medium text-blue-600 hover:text-blue-500">Forgot password?</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<button type="submit" class="btn-primary w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-white font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
|
|
Sign in |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<div class="divider text-sm text-gray-500">Or continue with</div> |
|
|
|
|
|
<div class="mt-6 grid grid-cols-2 gap-3"> |
|
|
<button id="googleSignIn" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
|
|
<i data-feather="mail" class="h-5 w-5 text-red-500"></i> |
|
|
<span class="ml-2">Google</span> |
|
|
</button> |
|
|
|
|
|
<button class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
|
|
<i data-feather="github" class="h-5 w-5 text-gray-800"></i> |
|
|
<span class="ml-2">GitHub</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 text-center text-sm text-gray-600"> |
|
|
Don't have an account? <a href="#" class="font-medium text-blue-600 hover:text-blue-500">Request access</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 text-white py-6 mt-auto"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-4 md:mb-0"> |
|
|
<p class="text-sm">© 2023 Ministry of Earth Sciences, Government of India. All Rights Reserved.</p> |
|
|
</div> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-sm hover:underline">Privacy Policy</a> |
|
|
<a href="#" class="text-sm hover:underline">Terms of Service</a> |
|
|
<a href="#" class="text-sm hover:underline">Contact Us</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
AOS.init(); |
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
const firebaseConfig = { |
|
|
apiKey: "AIzaSyDEXAMPLEEXAMPLEEXAMPLEEXAMPLE", |
|
|
authDomain: "argo-data-explorer.firebaseapp.com", |
|
|
projectId: "argo-data-explorer", |
|
|
storageBucket: "argo-data-explorer.appspot.com", |
|
|
messagingSenderId: "123456789012", |
|
|
appId: "1:123456789012:web:abcdef1234567890abcdef" |
|
|
}; |
|
|
|
|
|
|
|
|
firebase.initializeApp(firebaseConfig); |
|
|
const auth = firebase.auth(); |
|
|
|
|
|
|
|
|
const googleProvider = new firebase.auth.GoogleAuthProvider(); |
|
|
|
|
|
|
|
|
document.getElementById('loginForm').addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
const email = document.getElementById('email').value; |
|
|
const password = document.getElementById('password').value; |
|
|
|
|
|
|
|
|
const submitBtn = e.target.querySelector('button[type="submit"]'); |
|
|
submitBtn.disabled = true; |
|
|
submitBtn.innerHTML = '<i data-feather="loader" class="animate-spin w-4 h-4 mr-2"></i> Signing in...'; |
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
auth.signInWithEmailAndPassword(email, password) |
|
|
.then((userCredential) => { |
|
|
|
|
|
window.location.href = 'chatbot.html'; |
|
|
}) |
|
|
.catch((error) => { |
|
|
const errorCode = error.code; |
|
|
const errorMessage = error.message; |
|
|
alert(errorMessage); |
|
|
|
|
|
|
|
|
submitBtn.disabled = false; |
|
|
submitBtn.textContent = 'Sign in'; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('googleSignIn').addEventListener('click', () => { |
|
|
auth.signInWithPopup(googleProvider) |
|
|
.then((result) => { |
|
|
|
|
|
window.location.href = 'chatbot.html'; |
|
|
}).catch((error) => { |
|
|
const errorMessage = error.message; |
|
|
alert(errorMessage); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
auth.onAuthStateChanged((user) => { |
|
|
if (user) { |
|
|
|
|
|
window.location.href = 'chatbot.html'; |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
