Spaces:

secutorpro
/

comsync-pro-team-connect-hub

Running

App Files Files Community

comsync-pro-team-connect-hub / login.html

secutorpro

corrige retour de la pge en arriere

8c9360a verified 6 months ago

raw

history blame contribute delete

8.37 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Login - ComSync Pro</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://unpkg.com/feather-icons"></script>
	<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
	body {
	font-family: 'Inter', sans-serif;
	}
	.gradient-border {
	background: linear-gradient(135deg, #667eea, #764ba2);
	padding: 2px;
	border-radius: 12px;
	}
	</style>
	</head>
	<body class="bg-gray-900 text-gray-100">
	<div id="vanta-bg" class="fixed inset-0 z-0"></div>
	<div class="relative z-10 min-h-screen flex items-center justify-center p-4">
	<div class="gradient-border w-full max-w-md">
	<div class="bg-gray-800 rounded-xl p-8 border border-gray-700/50 shadow-2xl">
	<div class="text-center mb-8">
	<div class="flex items-center justify-center space-x-3 mb-4">
	<i data-feather="radio" class="w-10 h-10 text-blue-400"></i>
	<h1 class="text-3xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">ComSync Pro</h1>
	</div>
	<p class="text-gray-400">Sign in to access your dashboard</p>
	</div>

	<form id="login-form" class="space-y-6">
	<div>
	<label class="block text-sm font-medium mb-2">Email</label>
	<input
	type="email"
	id="email"
	class="w-full bg-gray-700/50 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500"
	placeholder="your.email@example.com"
	required
	>
	</div>

	<div>
	<div class="flex justify-between items-center mb-2">
	<label class="block text-sm font-medium">Password</label>
	<a href="#" class="text-sm text-blue-400 hover:text-blue-300">Forgot password?</a>
	</div>
	<input
	type="password"
	id="password"
	class="w-full bg-gray-700/50 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500"
	placeholder="••••••••"
	required
	>
	</div>

	<div class="flex items-center">
	<input
	type="checkbox"
	id="remember"
	class="rounded bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500"
	>
	<label for="remember" class="ml-2 text-sm">Remember me</label>
	</div>

	<button
	type="submit"
	class="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 py-3 rounded-lg font-medium transition-all"
	>
	Sign In
	</button>
	</form>

	<div class="my-6 flex items-center">
	<div class="flex-grow border-t border-gray-700"></div>
	<span class="mx-4 text-gray-500 text-sm">OR</span>
	<div class="flex-grow border-t border-gray-700"></div>
	</div>

	<div class="space-y-4">
	<button
	id="github-login"
	class="w-full flex items-center justify-center space-x-2 bg-gray-700 hover:bg-gray-600 py-3 rounded-lg transition-colors"
	>
	<i data-feather="github" class="w-5 h-5"></i>
	<span>Continue with GitHub</span>
	</button>

	<button
	id="google-login"
	class="w-full flex items-center justify-center space-x-2 bg-gray-700 hover:bg-gray-600 py-3 rounded-lg transition-colors"
	>
	<i data-feather="smartphone" class="w-5 h-5"></i>
	<span>Continue with Google</span>
	</button>
	</div>

	<p class="text-center text-gray-400 text-sm mt-8">
	Don't have an account?
	<a href="#" class="text-blue-400 hover:text-blue-300">Sign up</a>
	</p>
	</div>
	</div>
	</div>

	<script>
	// Initialize Vanta.js background
	VANTA.NET({
	el: "#vanta-bg",
	mouseControls: true,
	touchControls: true,
	gyroControls: false,
	minHeight: 200.00,
	minWidth: 200.00,
	scale: 1.00,
	scaleMobile: 1.00,
	color: 0x3a82ff,
	backgroundColor: 0x111827,
	points: 10.00,
	maxDistance: 22.00,
	spacing: 18.00
	});

	// Initialize Feather Icons
	feather.replace();

	// Form submission
	document.getElementById('login-form').addEventListener('submit', function(e) {
	e.preventDefault();
	const email = document.getElementById('email').value;
	const password = document.getElementById('password').value;

	// Simulate login process
	console.log('Logging in with:', email, password);

	// Show loading state
	const submitBtn = this.querySelector('button[type="submit"]');
	const originalText = submitBtn.textContent;
	submitBtn.innerHTML = '<i data-feather="loader" class="w-5 h-5 animate-spin"></i>';
	feather.replace();

	// Simulate API call
	setTimeout(() => {
	submitBtn.textContent = originalText;
	feather.replace();

	// Redirect to dashboard on success
	window.location.href = '/';
	}, 1500);
	});

	// GitHub login
	document.getElementById('github-login').addEventListener('click', function() {
	const btn = this;
	const originalContent = btn.innerHTML;
	btn.innerHTML = '<i data-feather="loader" class="w-5 h-5 animate-spin"></i>';
	feather.replace();

	// Simulate OAuth flow
	setTimeout(() => {
	btn.innerHTML = originalContent;
	feather.replace();
	window.location.href = '/';
	}, 1500);
	});

	// Google login
	document.getElementById('google-login').addEventListener('click', function() {
	const btn = this;
	const originalContent = btn.innerHTML;
	btn.innerHTML = '<i data-feather="loader" class="w-5 h-5 animate-spin"></i>';
	feather.replace();

	// Simulate OAuth flow
	setTimeout(() => {
	btn.innerHTML = originalContent;
	feather.replace();
	window.location.href = '/';
	}, 1500);
	});

	// Handle browser back/forward buttons
	window.addEventListener('popstate', function(event) {
	// Reload the page to ensure proper state restoration
	location.reload();
	});

	// Add history entry for proper back navigation
	history.pushState(null, null, location.href);
	</script>
	</body>
	</html>