File size: 6,576 Bytes
af4847e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - TransferFlow Pro</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<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>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3B82F6',
secondary: '#10B981',
accent: '#8B5CF6',
dark: '#1F2937',
light: '#F9FAFB'
}
}
}
}
</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-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.login-card {
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.1);
}
</style>
</head>
<body class="gradient-bg min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-md w-full space-y-8">
<div>
<div class="mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-white">
<i data-feather="send" class="text-primary h-8 w-8"></i>
</div>
<h2 class="mt-6 text-center text-3xl font-extrabold text-white">
Sign in to your account
</h2>
<p class="mt-2 text-center text-sm text-gray-200">
Or
<a href="#" class="font-medium text-accent hover:text-purple-300">
start your 14-day free trial
</a>
</p>
</div>
<form class="mt-8 space-y-6 login-card p-8 rounded-2xl shadow-2xl" action="#" method="POST">
<input type="hidden" name="remember" value="true">
<div class="rounded-md shadow-sm -space-y-px">
<div>
<label for="email-address" class="sr-only">Email address</label>
<input id="email-address" name="email" type="email" autocomplete="email" required class="relative block w-full px-3 py-3 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-primary focus:border-primary focus:z-10 sm:text-sm" placeholder="Email address" value="stidjani@proconsulting-info.com">
</div>
<div>
<label for="password" class="sr-only">Password</label>
<input id="password" name="password" type="password" autocomplete="current-password" required class="relative block w-full px-3 py-3 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-primary focus:border-primary focus:z-10 sm:text-sm" placeholder="Password" value="Pr@Const2007">
</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-primary focus:ring-primary border-gray-300 rounded">
<label for="remember-me" class="ml-2 block text-sm text-white">
Remember me
</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-accent hover:text-purple-300">
Forgot your password?
</a>
</div>
</div>
<div>
<button type="submit" class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all duration-300">
<span class="absolute left-0 inset-y-0 flex items-center pl-3">
<i data-feather="lock" class="h-5 w-5 text-blue-300 group-hover:text-blue-200"></i>
</span>
Sign in
</button>
</div>
<div class="mt-6">
<div class="relative">
<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-transparent text-white">Or continue with</span>
</div>
</div>
<div class="mt-6 grid grid-cols-3 gap-3">
<div>
<a href="#" 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-500 hover:bg-gray-50">
<span class="sr-only">Sign in with Facebook</span>
<i data-feather="facebook" class="h-5 w-5 text-blue-600"></i>
</a>
</div>
<div>
<a href="#" 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-500 hover:bg-gray-50">
<span class="sr-only">Sign in with Twitter</span>
<i data-feather="twitter" class="h-5 w-5 text-blue-400"></i>
</a>
</div>
<div>
<a href="#" 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-500 hover:bg-gray-50">
<span class="sr-only">Sign in with GitHub</span>
<i data-feather="github" class="h-5 w-5 text-gray-800"></i>
</a>
</div>
</div>
</div>
</form>
</div>
<script>
feather.replace();
</script>
</body>
</html>
|