rstmcanada/undefined
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>Sign In - SignaSphere AI</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script>10 tailwind.config = {11 theme: {12 extend: {13 colors: {14 primary: {15 50: '#eff6ff',16 100: '#dbeafe',17 200: '#bfdbfe',18 300: '#93c5fd',19 400: '#60a5fa',20 500: '#3b82f6',21 600: '#2563eb',22 700: '#1d4ed8',23 800: '#1e40af',24 900: '#1e3a8a'25 },26 secondary: {27 50: '#f0f9ff',28 100: '#e0f2fe',29 200: '#bae6fd',30 300: '#7dd3fc',31 400: '#38bdf8',32 500: '#0ea5e9',33 600: '#0284c7',34 700: '#0369a1',35 800: '#075985',36 900: '#0c4a6e'37 }38 }39 }40 }41 }42 </script>43 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>44 <script src="https://unpkg.com/feather-icons"></script>45 <style>46 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');47 48 * {49 font-family: 'Inter', sans-serif;50 }51 52 .auth-bg {53 background: linear-gradient(135deg, #3b82f6 0%, #0ea5e9 100%);54 }55 56 .auth-card {57 box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);58 }59 </style>60</head>61<body class="bg-gray-50 min-h-screen flex items-center justify-center">62 <div class="absolute inset-0 auth-bg z-0"></div>63 64 <div class="relative z-10 w-full max-w-md mx-4">65 <div class="auth-card bg-white rounded-xl p-8">66 <div class="text-center mb-8">67 <div class="flex items-center justify-center mb-4">68 <i data-feather="edit-3" class="h-8 w-8 text-primary-600"></i>69 <span class="ml-2 text-2xl font-bold text-gray-900">SignaSphere AI</span>70 </div>71 <h1 class="text-2xl font-bold text-gray-900">Sign In to Your Account</h1>72 <p class="text-gray-600 mt-2">Welcome back! Please sign in to continue</p>73 </div>74 75 <form class="space-y-6">76 <div>77 <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email Address</label>78 <input type="email" id="email" name="email" required 79 class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition duration-200"80 placeholder="Enter your email">81 </div>82 83 <div>84 <label for="password" class="block text-sm font-medium text-gray-700 mb-2">Password</label>85 <input type="password" id="password" name="password" required 86 class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition duration-200"87 placeholder="Enter your password">88 </div>89 90 <div class="flex items-center justify-between">91 <div class="flex items-center">92 <input type="checkbox" id="remember" name="remember" 93 class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded">94 <label for="remember" class="ml-2 block text-sm text-gray-700">Remember me</label>95 </div>96 <a href="/forgot-password.html" class="text-sm text-primary-600 hover:text-primary-500">Forgot password?</a>97 </div>98 99 <button type="submit" 100 class="w-full bg-primary-600 text-white py-3 px-4 rounded-lg hover:bg-primary-700 focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition duration-200 font-semibold">101 Sign In102 </button>103 </form>104 105 <div class="mt-6">106 <div class="relative">107 <div class="absolute inset-0 flex items-center">108 <div class="w-full border-t border-gray-300"></div>109 </div>110 <div class="relative flex justify-center text-sm">111 <span class="px-2 bg-white text-gray-500">Or continue with</span>112 </div>113 </div>114 115 <div class="mt-6 grid grid-cols-2 gap-3">116 <button type="button" 117 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 transition duration-200">118 <i data-feather="github" class="h-5 w-5"></i>119 <span class="ml-2">GitHub</span>120 </button>121 <button type="button" 122 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 transition duration-200">123 <i data-feather="google" class="h-5 w-5"></i>124 <span class="ml-2">Google</span>125 </button>126 </div>127 </div>128 129 <div class="mt-6 text-center">130 <p class="text-sm text-gray-600">131 Don't have an account?132 <a href="/register.html" class="font-medium text-primary-600 hover:text-primary-500">Sign up for free</a>133</p>134 </div>135 </div>136 137 <div class="mt-8 text-center">138 <p class="text-sm text-white">139 © 2024 SignaSphere AI. All rights reserved.140 <a href="#" class="text-white hover:text-gray-200 underline">Privacy Policy</a> • 141 <a href="#" class="text-white hover:text-gray-200 underline">Terms of Service</a>142 </p>143 </div>144 </div>145 146 <script>147 feather.replace();148 149 // Simple form validation150 document.querySelector('form').addEventListener('submit', function(e) {151 e.preventDefault();152 const email = document.getElementById('email').value;153 const password = document.getElementById('password').value;154 155 if (email && password) {156 // Simulate login process157 window.location.href = '/dashboard.html';158 }159 });160 </script>161</body>162</html>163