developer2guy/middleware-bridge-pro
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Login - Middleware Bridge Pro</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">11 <script>12 tailwind.config = {13 theme: {14 extend: {15 colors: {16 primary: {17 50: '#f0f9ff',18 100: '#e0f2fe',19 200: '#bae6fd',20 300: '#7dd3fc',21 400: '#38bdf8',22 500: '#0ea5e9',23 600: '#0284c7',24 700: '#0369a1',25 800: '#075985',26 900: '#0c4a6e',27 }28 }29 }30 }31 }32 </script>33 <style>34 body {35 font-family: 'Inter', sans-serif;36 background-color: #f8fafc;37 }38 .card-hover {39 transition: all 0.3s ease;40 }41 .card-hover:hover {42 transform: translateY(-5px);43 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);44 }45 </style>46</head>47<body class="bg-gray-50">48 <!-- Navigation -->49 <nav class="bg-white shadow-sm">50 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">51 <div class="flex justify-between h-16">52 <div class="flex items-center">53 <div class="flex-shrink-0 flex items-center">54 <div class="bg-primary-600 w-8 h-8 rounded-lg flex items-center justify-center">55 <i data-feather="layers" class="text-white"></i>56 </div>57 <span class="ml-2 text-xl font-bold text-gray-900">Middleware Bridge Pro</span>58 </div>59 </div>60 <div class="flex items-center">61 <a href="register.html" class="text-primary-600 hover:text-primary-800 font-medium">Register</a>62 </div>63 </div>64 </div>65 </nav>66 67 <!-- Main Content -->68 <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">69 <div class="flex justify-center">70 <div class="bg-white rounded-xl shadow-sm p-8 w-full max-w-md card-hover">71 <div class="text-center mb-8">72 <div class="mx-auto bg-primary-100 w-16 h-16 rounded-full flex items-center justify-center mb-4">73 <i data-feather="lock" class="h-8 w-8 text-primary-600"></i>74 </div>75 <h1 class="text-2xl font-bold text-gray-900">Welcome Back</h1>76 <p class="mt-2 text-gray-600">Sign in to your account</p>77 </div>78 79 <form id="loginForm">80 <div class="space-y-4">81 <div>82 <label class="block text-sm font-medium text-gray-700">Email Address</label>83 <input type="email" id="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm" required>84 </div>85 <div>86 <label class="block text-sm font-medium text-gray-700">Password</label>87 <input type="password" id="password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm" required>88 </div>89 </div>90 91 <div class="mt-6 flex items-center justify-between">92 <div class="flex items-center">93 <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded">94 <label for="remember-me" class="ml-2 block text-sm text-gray-900">Remember me</label>95 </div>96 <div class="text-sm">97 <a href="#" class="font-medium text-primary-600 hover:text-primary-500">Forgot your password?</a>98 </div>99 </div>100 101 <div class="mt-6">102 <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">103 Sign in104 </button>105 </div>106 </form>107 108 <div class="mt-6">109 <div class="relative">110 <div class="absolute inset-0 flex items-center">111 <div class="w-full border-t border-gray-300"></div>112 </div>113 <div class="relative flex justify-center text-sm">114 <span class="px-2 bg-white text-gray-500">Or continue with</span>115 </div>116 </div>117 118 <div class="mt-6 grid grid-cols-2 gap-3">119 <div>120 <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">121 <i data-feather="github" class="h-5 w-5"></i>122 </a>123 </div>124 <div>125 <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">126 <i data-feather="google" class="h-5 w-5"></i>127 </a>128 </div>129 </div>130 </div>131 </div>132 </div>133 </main>134 135 <footer class="bg-white mt-12">136 <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">137 <div class="md:flex md:items-center md:justify-between">138 <div class="flex justify-center md:justify-start">139 <p class="text-center text-sm text-gray-500">140 © 2023 Middleware Bridge Pro. All rights reserved.141 </p>142 </div>143 <div class="mt-4 flex justify-center md:mt-0">144 <div class="flex space-x-6">145 <a href="#" class="text-gray-400 hover:text-gray-500">146 <i data-feather="help-circle" class="h-5 w-5"></i>147 </a>148 <a href="#" class="text-gray-400 hover:text-gray-500">149 <i data-feather="book" class="h-5 w-5"></i>150 </a>151 </div>152 </div>153 </div>154 </div>155 </footer>156 <script>157 feather.replace();158 159 // Mock credentials160 const mockCredentials = {161 email: 'admin@middlewarepro.com',162 password: 'SecurePass123!'163 };164 165 // Generate random token166 function generateToken() {167 const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';168 let token = '';169 for (let i = 0; i < 32; i++) {170 token += chars.charAt(Math.floor(Math.random() * chars.length));171 }172 return token;173 }174 175 // Generate secret key176 function generateSecretKey() {177 const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()';178 let key = '';179 for (let i = 0; i < 50; i++) {180 key += chars.charAt(Math.floor(Math.random() * chars.length));181 }182 return key;183 }184 185 document.getElementById('loginForm').addEventListener('submit', function(e) {186 e.preventDefault();187 const email = document.getElementById('email').value;188 const password = document.getElementById('password').value;189 190 // Validate credentials191 if(email === mockCredentials.email && password === mockCredentials.password) {192 // Generate auth token and secret key193 const authToken = generateToken();194 const secretKey = generateSecretKey();195 196 // Store in localStorage197 localStorage.setItem('authToken', authToken);198 localStorage.setItem('secretKey', secretKey);199 localStorage.setItem('userEmail', email);200 201 // Redirect to dashboard202 window.location.href = 'dashboard.html';203 } else {204 alert('Invalid credentials. Use admin@middlewarepro.com / SecurePass123!');205 }206 });207 </script>208</body>209</html>