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>Register - 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="login.html" class="text-primary-600 hover:text-primary-800 font-medium">Sign in</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="user-plus" class="h-8 w-8 text-primary-600"></i>74 </div>75 <h1 class="text-2xl font-bold text-gray-900">Create Account</h1>76 <p class="mt-2 text-gray-600">Get started with Middleware Bridge Pro</p>77 </div>78 79 <form id="registerForm">80 <div class="space-y-4">81 <div>82 <label class="block text-sm font-medium text-gray-700">Full Name</label>83 <input type="text" id="name" 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">Email Address</label>87 <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>88 </div>89 <div>90 <label class="block text-sm font-medium text-gray-700">Password</label>91 <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>92 </div>93 <div>94 <label class="block text-sm font-medium text-gray-700">Confirm Password</label>95 <input type="password" id="confirmPassword" 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>96 </div>97 </div>98 99 <div class="mt-6 flex items-center">100 <input id="terms" name="terms" type="checkbox" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded" required>101 <label for="terms" class="ml-2 block text-sm text-gray-900">102 I agree to the <a href="#" class="text-primary-600 hover:text-primary-500">Terms of Service</a> and <a href="#" class="text-primary-600 hover:text-primary-500">Privacy Policy</a>103 </label>104 </div>105 106 <div class="mt-6">107 <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">108 Create Account109 </button>110 </div>111 </form>112 113 <div class="mt-6">114 <div class="relative">115 <div class="absolute inset-0 flex items-center">116 <div class="w-full border-t border-gray-300"></div>117 </div>118 <div class="relative flex justify-center text-sm">119 <span class="px-2 bg-white text-gray-500">Or continue with</span>120 </div>121 </div>122 123 <div class="mt-6 grid grid-cols-2 gap-3">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="github" class="h-5 w-5"></i>127 </a>128 </div>129 <div>130 <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">131 <i data-feather="google" class="h-5 w-5"></i>132 </a>133 </div>134 </div>135 </div>136 </div>137 </div>138 </main>139 140 <footer class="bg-white mt-12">141 <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">142 <div class="md:flex md:items-center md:justify-between">143 <div class="flex justify-center md:justify-start">144 <p class="text-center text-sm text-gray-500">145 © 2023 Middleware Bridge Pro. All rights reserved.146 </p>147 </div>148 <div class="mt-4 flex justify-center md:mt-0">149 <div class="flex space-x-6">150 <a href="#" class="text-gray-400 hover:text-gray-500">151 <i data-feather="help-circle" class="h-5 w-5"></i>152 </a>153 <a href="#" class="text-gray-400 hover:text-gray-500">154 <i data-feather="book" class="h-5 w-5"></i>155 </a>156 </div>157 </div>158 </div>159 </div>160 </footer>161 162 <script>163 feather.replace();164 165 document.getElementById('registerForm').addEventListener('submit', function(e) {166 e.preventDefault();167 const name = document.getElementById('name').value;168 const email = document.getElementById('email').value;169 const password = document.getElementById('password').value;170 const confirmPassword = document.getElementById('confirmPassword').value;171 172 if(password !== confirmPassword) {173 alert('Passwords do not match');174 return;175 }176 177 // Simple validation178 if(name && email && password) {179 // In a real app, you would send this to your server180 localStorage.setItem('isLoggedIn', 'true');181 window.location.href = 'index.html';182 }183 });184 </script>185</body>186</html>