Profshab/salesforce-sync-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>SalesForce Sync Pro | Login</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <style>12 .fade-slider {13 position: relative;14 height: 100%;15 width: 100%;16 }17 .slide {18 position: absolute;19 top: 0;20 left: 0;21 opacity: 0;22 transition: opacity 1.5s ease-in-out;23 width: 100%;24 height: 100%;25 object-fit: cover;26 }27 .slide.active {28 opacity: 1;29 }30 .password-toggle {31 position: absolute;32 right: 10px;33 top: 50%;34 transform: translateY(-50%);35 cursor: pointer;36 }37 </style>38 <script>39 tailwind.config = {40 theme: {41 extend: {42 colors: {43 primary: {44 500: '#1e40af',45 600: '#1e3a8a'46 },47 secondary: {48 500: '#10b981',49 600: '#059669'50 }51 }52 }53 }54 }55 </script>56</head>57<body class="bg-gray-100 min-h-screen flex items-center justify-center">58 <div class="container mx-auto px-4">59 <div class="flex flex-col md:flex-row rounded-xl shadow-xl overflow-hidden max-w-4xl">60 <!-- Left Side - Form -->61 <div class="w-full md:w-1/2 bg-white p-8 md:p-10">62 <div class="text-center mb-8">63 <h1 class="text-3xl font-bold text-primary-600 mb-2">SalesForce Sync Pro</h1>64 <p class="text-gray-600">Manage your sales team efficiently</p>65 </div>66 67 <form id="loginForm" class="space-y-6">68 <div>69 <label for="username" class="block text-sm font-medium text-gray-700 mb-1">Username</label>70 <div class="relative">71 <input type="text" id="username" name="username" 72 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500" 73 placeholder="e.g. SP-01" required>74 <i data-feather="user" class="absolute right-3 top-3 text-gray-400"></i>75 </div>76 </div>77 78 <div>79 <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>80 <div class="relative">81 <input type="password" id="password" name="password" 82 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 pr-10" 83 placeholder="Default: 123" required>84 <i data-feather="eye" class="password-toggle text-gray-400" onclick="togglePassword()"></i>85 </div>86 </div>87 88 <div class="flex items-center justify-between">89 <div class="flex items-center">90 <input id="remember-me" name="remember-me" type="checkbox" 91 class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded">92 <label for="remember-me" class="ml-2 block text-sm text-gray-700">Remember me</label>93 </div>94 <div class="text-sm">95 <a href="#" class="font-medium text-primary-600 hover:text-primary-500" id="forgotPassword">Forgot password?</a>96 </div>97 </div>98 99 <div>100 <button type="submit" 101 class="w-full flex justify-center py-2 px-4 border border-transparent rounded-lg 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 transition-all duration-300"102 onclick="window.location.href='follow_up.html'">103Sign in104 <i data-feather="log-in" class="ml-2"></i>105 </button>106 </div>107 </form>108 109 <div class="mt-6 text-center text-sm" id="firstTimeUser">110 <p class="text-gray-600">First time logging in? <a href="#" class="font-medium text-primary-600 hover:text-primary-500" id="setupAccount">Set up your account</a></p>111 </div>112 </div>113 114 <!-- Right Side - Image Slider -->115 <div class="w-full md:w-1/2 bg-gradient-to-br from-primary-500 to-primary-600 relative hidden md:block">116 <div class="fade-slider h-full">117 <img src="http://static.photos/technology/1200x630/1" class="slide active" alt="Sales Team">118 <img src="http://static.photos/office/1200x630/2" class="slide" alt="Office Meeting">119 <img src="http://static.photos/business/1200x630/3" class="slide" alt="Business Growth">120 </div>121 <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/50 to-transparent p-6">122 <h3 class="text-white text-xl font-semibold">Streamline Your Sales Process</h3>123 <p class="text-white/80 mt-1">Track, manage and optimize your sales team performance</p>124 </div>125 </div>126 </div>127 </div>128 129 <!-- First Time User Modal -->130 <div id="setupModal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center p-4">131 <div class="bg-white rounded-xl max-w-md w-full p-6 animate-fade-in">132 <div class="flex justify-between items-center mb-4">133 <h3 class="text-lg font-bold text-gray-900">Complete Your Profile</h3>134 <button onclick="closeModal('setupModal')" class="text-gray-400 hover:text-gray-600">135 <i data-feather="x"></i>136 </button>137 </div>138 139 <form id="setupForm" class="space-y-4">140 <div class="flex flex-col items-center">141 <div class="relative mb-4">142 <img id="profilePreview" src="http://static.photos/people/200x200/1" class="w-24 h-24 rounded-full object-cover border-4 border-primary-100">143 <label for="profilePic" class="absolute bottom-0 right-0 bg-white rounded-full p-1 shadow-md cursor-pointer">144 <i data-feather="camera" class="text-primary-600 w-5 h-5"></i>145 <input type="file" id="profilePic" name="profilePic" accept="image/*" class="hidden">146 </label>147 </div>148 <span class="text-xs text-gray-500">Click to upload profile picture (max 1MB)</span>149 </div>150 151 <div class="grid grid-cols-2 gap-4">152 <div>153 <label for="firstName" class="block text-sm font-medium text-gray-700 mb-1">First Name</label>154 <input type="text" id="firstName" name="firstName" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500" required>155 </div>156 <div>157 <label for="lastName" class="block text-sm font-medium text-gray-700 mb-1">Last Name</label>158 <input type="text" id="lastName" name="lastName" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500" required>159 </div>160 </div>161 162 <div>163 <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>164 <input type="email" id="email" name="email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500" required>165 </div>166 167 <div>168 <label for="whatsapp" class="block text-sm font-medium text-gray-700 mb-1">WhatsApp Number</label>169 <input type="tel" id="whatsapp" name="whatsapp" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500" required>170 </div>171 172 <div>173 <label for="newPassword" class="block text-sm font-medium text-gray-700 mb-1">New Password</label>174 <input type="password" id="newPassword" name="newPassword" minlength="5" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500" required>175 </div>176 177 <div>178 <label for="confirmPassword" class="block text-sm font-medium text-gray-700 mb-1">Confirm Password</label>179 <input type="password" id="confirmPassword" name="confirmPassword" minlength="5" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500" required>180 </div>181 182 <div class="pt-2">183 <button type="submit" class="w-full 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">184 Create Account185 </button>186 </div>187 </form>188 </div>189 </div>190 191 <!-- Forgot Password Modal -->192 <div id="forgotModal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center p-4">193 <div class="bg-white rounded-xl max-w-md w-full p-6 animate-fade-in">194 <div class="flex justify-between items-center mb-4">195 <h3 class="text-lg font-bold text-gray-900">Reset Password</h3>196 <button onclick="closeModal('forgotModal')" class="text-gray-400 hover:text-gray-600">197 <i data-feather="x"></i>198 </button>199 </div>200 201 <form id="forgotForm" class="space-y-4">202 <div>203 <label for="resetEmail" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>204 <input type="email" id="resetEmail" name="resetEmail" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500" required>205 </div>206 207 <div class="pt-2">208 <button type="submit" class="w-full 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">209 Send Reset Link210 </button>211 </div>212 </form>213 </div>214 </div>215 216 <script>217 // Initialize feather icons218 feather.replace();219 220 // Image slider functionality221 let currentSlide = 0;222 const slides = document.querySelectorAll('.slide');223 224 function showSlide(index) {225 slides.forEach(slide => slide.classList.remove('active'));226 slides[index].classList.add('active');227 }228 229 function nextSlide() {230 currentSlide = (currentSlide + 1) % slides.length;231 showSlide(currentSlide);232 }233 234 // Change slide every 5 seconds235 setInterval(nextSlide, 5000);236 237 // Toggle password visibility238 function togglePassword() {239 const passwordInput = document.getElementById('password');240 const eyeIcon = document.querySelector('.password-toggle');241 242 if (passwordInput.type === 'password') {243 passwordInput.type = 'text';244 eyeIcon.setAttribute('data-feather', 'eye-off');245 } else {246 passwordInput.type = 'password';247 eyeIcon.setAttribute('data-feather', 'eye');248 }249 feather.replace();250 }251 252 // Modal functions253 function openModal(modalId) {254 document.getElementById(modalId).classList.remove('hidden');255 document.getElementById(modalId).classList.add('flex');256 }257 258 function closeModal(modalId) {259 document.getElementById(modalId).classList.add('hidden');260 document.getElementById(modalId).classList.remove('flex');261 }262 263 // Event listeners264 document.getElementById('setupAccount').addEventListener('click', function(e) {265 e.preventDefault();266 openModal('setupModal');267 });268 269 document.getElementById('forgotPassword').addEventListener('click', function(e) {270 e.preventDefault();271 openModal('forgotModal');272 });273 274 // Preview profile picture275 document.getElementById('profilePic').addEventListener('change', function(e) {276 const file = e.target.files[0];277 if (file) {278 if (file.size > 1024 * 1024) { // 1MB limit279 alert('File size exceeds 1MB limit');280 return;281 }282 283 const reader = new FileReader();284 reader.onload = function(event) {285 document.getElementById('profilePreview').src = event.target.result;286 };287 reader.readAsDataURL(file);288 }289 });290 291 // Form submissions292 document.getElementById('loginForm').addEventListener('submit', function(e) {293 e.preventDefault();294 // Here you would typically make an AJAX call to your PHP backend295 const username = document.getElementById('username').value;296 const password = document.getElementById('password').value;297 298 // Simulate successful login for demo299 if (username === 'Admin' && password === 'Admin@2025') {300 window.location.href = 'Admin/Dashboard.php';301 } else if (username.match(/^SP-\d{2}$/) && password === '123') {302 window.location.href = 'follow_up.html';303} else {304 alert('Invalid username or password');305 }306 });307 308 document.getElementById('setupForm').addEventListener('submit', function(e) {309 e.preventDefault();310 // Validate password match311 const newPassword = document.getElementById('newPassword').value;312 const confirmPassword = document.getElementById('confirmPassword').value;313 314 if (newPassword !== confirmPassword) {315 alert('Passwords do not match');316 return;317 }318 319 // Here you would typically make an AJAX call to update the user's profile320 alert('Account setup successful! Please login with your new credentials.');321 closeModal('setupModal');322 });323 324 document.getElementById('forgotForm').addEventListener('submit', function(e) {325 e.preventDefault();326 // Here you would typically make an AJAX call to send a reset link327 alert('Password reset link has been sent to your email');328 closeModal('forgotModal');329 });330 </script>331</body>332</html>333