1<!DOCTYPE html> 2<html lang="bn"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Login - Bengal Xpress</title> 7 <link rel="stylesheet" href="https://bengalxpress.in/assets/css/bootstrap.min.css"> 8 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> 9 <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+Bengali:wght@700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> 10 <style> 11 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 } 12 html, body { height: 100% } 13 body { 14 font-family: 'Inter', -apple-system, sans-serif; 15 min-height: 100vh; 16 display: flex; 17 align-items: center; 18 justify-content: center; 19 background: #e9ecef; 20 padding: 24px; 21 } 22 .auth-wrapper { 23 width: 100%; 24 max-width: 400px; 25 max-height: calc(100vh - 48px); 26 } 27 .auth-card { 28 background: #fff; 29 border-radius: 14px; 30 padding: 36px 32px 28px; 31 box-shadow: 0 1px 4px rgba(0,0,0,.06); 32 max-height: calc(100vh - 48px); 33 overflow-y: auto; 34 } 35 .auth-card::-webkit-scrollbar { width: 5px } 36 .auth-card::-webkit-scrollbar-track { background: transparent } 37 .auth-card::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 6px } 38 .back-home { 39 text-align: center; 40 margin-bottom: 16px; 41 } 42 .back-home a { 43 display: inline-flex; 44 align-items: center; 45 gap: 6px; 46 font-size: 13px; 47 color: #9ca3af; 48 text-decoration: none; 49 font-weight: 500; 50 transition: color .2s; 51 } 52 .back-home a:hover { color: #6b7280 } 53 .auth-brand { text-align: center; margin-bottom: 24px } 54 .auth-brand .site-title { 55 font-family: 'Noto Serif Bengali', serif; 56 font-size: 26px; 57 font-weight: 700; 58 color: #dc3545; 59 text-decoration: none; 60 display: block; 61 line-height: 1.3; 62 } 63 .auth-brand .page-title { 64 font-size: 20px; 65 font-weight: 700; 66 color: #111827; 67 margin-top: 12px; 68 margin-bottom: 4px; 69 } 70 .auth-brand .page-subtitle { font-size: 14px; color: #6b7280 } 71 .alert-box { 72 display: flex; 73 align-items: center; 74 gap: 8px; 75 padding: 10px 14px; 76 border-radius: 8px; 77 font-size: 13px; 78 font-weight: 500; 79 margin-bottom: 18px; 80 } 81 .alert-box.danger { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626 } 82 .alert-box i { font-size: 15px; flex-shrink: 0 } 83 .form-group { margin-bottom: 18px } 84 .form-group label { 85 display: block; 86 font-size: 13px; 87 font-weight: 600; 88 color: #374151; 89 margin-bottom: 5px; 90 } 91 .input-wrap { 92 display: flex; 93 align-items: center; 94 background: #fff; 95 border: 1.5px solid #d1d5db; 96 border-radius: 9px; 97 transition: border-color .2s, box-shadow .2s; 98 } 99 .input-wrap:focus-within { 100 border-color: #6b7280; 101 box-shadow: 0 0 0 3px rgba(107,114,128,.12); 102 } 103 .input-wrap .input-icon { 104 flex-shrink: 0; 105 width: 44px; 106 display: flex; 107 align-items: center; 108 justify-content: center; 109 color: #9ca3af; 110 font-size: 15px; 111 transition: color .2s; 112 } 113 .input-wrap:focus-within .input-icon { color: #6b7280 } 114 .input-wrap input { 115 flex: 1; 116 background: none; 117 border: none; 118 outline: none; 119 padding: 12px 14px 12px 0; 120 font-family: 'Inter', sans-serif; 121 font-size: 14px; 122 color: #111827; 123 } 124 .input-wrap input::placeholder { color: #9ca3af } 125 .input-wrap .toggle-pw { 126 flex-shrink: 0; 127 width: 44px; 128 display: flex; 129 align-items: center; 130 justify-content: center; 131 background: none; 132 border: none; 133 color: #9ca3af; 134 cursor: pointer; 135 font-size: 15px; 136 padding: 0; 137 transition: color .2s; 138 } 139 .input-wrap .toggle-pw:hover { color: #6b7280 } 140 .form-options { 141 display: flex; 142 align-items: center; 143 justify-content: space-between; 144 margin: 4px 0 20px; 145 } 146 .checkbox-wrap { 147 display: flex; 148 align-items: center; 149 gap: 7px; 150 cursor: pointer; 151 font-size: 13px; 152 color: #6b7280; 153 user-select: none; 154 } 155 .checkbox-wrap input[type="checkbox"] { display: none } 156 .checkbox-wrap .check-box { 157 width: 18px; height: 18px; 158 border-radius: 5px; 159 border: 2px solid #d1d5db; 160 display: flex; 161 align-items: center; 162 justify-content: center; 163 flex-shrink: 0; 164 transition: all .2s; 165 background: #fff; 166 } 167 .checkbox-wrap .check-box i { 168 font-size: 9px; 169 color: #fff; 170 opacity: 0; 171 transform: scale(0); 172 transition: all .2s; 173 } 174 .checkbox-wrap input:checked + .check-box { background: #6b7280; border-color: #6b7280 } 175 .checkbox-wrap input:checked + .check-box i { opacity: 1; transform: scale(1) } 176 .forgot-link { 177 font-size: 13px; 178 color: #6b7280; 179 text-decoration: none; 180 font-weight: 500; 181 } 182 .forgot-link:hover { color: #374151 } 183 .btn-submit { 184 width: 100%; 185 padding: 13px; 186 border: none; 187 border-radius: 9px; 188 font-family: 'Inter', sans-serif; 189 font-size: 15px; 190 font-weight: 600; 191 cursor: pointer; 192 background: #6b7280; 193 color: #fff; 194 position: relative; 195 transition: background .2s; 196 } 197 .btn-submit:hover { background: #4b5563 } 198 .btn-submit:active { transform: scale(.97) } 199 .btn-submit .btn-spinner { display: none } 200 .btn-submit.loading .btn-text { visibility: hidden } 201 .btn-submit.loading .btn-spinner { 202 display: flex; 203 align-items: center; 204 justify-content: center; 205 position: absolute; 206 inset: 0; 207 } 208 .spinner { 209 width: 18px; height: 18px; 210 border: 2.5px solid rgba(255,255,255,.3); 211 border-top-color: #fff; 212 border-radius: 50%; 213 animation: spin .6s linear infinite; 214 } 215 @keyframes spin { to { transform: rotate(360deg) } } 216 .social-divider { 217 display: flex; align-items: center; gap: 12px; 218 margin: 20px 0 16px; 219 } 220 .social-divider::before, .social-divider::after { 221 content: ''; flex: 1; height: 1px; background: #e5e7eb; 222 } 223 .social-divider span { 224 font-size: 12px; color: #9ca3af; font-weight: 500; 225 white-space: nowrap; text-transform: uppercase; letter-spacing: 0.3px; 226 } 227 .btn-google { 228 width: 100%; display: flex; align-items: center; justify-content: center; 229 gap: 10px; padding: 12px; border-radius: 9px; 230 border: 1.5px solid #d1d5db; background: #fff; 231 font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; 232 color: #374151; text-decoration: none; cursor: pointer; 233 transition: background .2s, border-color .2s; 234 } 235 .btn-google:hover { background: #f9fafb; border-color: #9ca3af } 236 .btn-google i { font-size: 18px; color: #4285f4 } 237 .auth-footer { 238 text-align: center; 239 margin-top: 18px; 240 padding-top: 16px; 241 border-top: 1px solid #e5e7eb; 242 } 243 .auth-footer p { font-size: 13px; color: #6b7280 } 244 .auth-footer a { color: #6b7280; text-decoration: none; font-weight: 600 } 245 .auth-footer a:hover { color: #374151 } 246 @media (max-width: 460px) { 247 body { padding: 16px; align-items: flex-start; padding-top: 24px } 248 .auth-wrapper { max-height: none } 249 .auth-card { padding: 24px 20px 20px; max-height: none; border-radius: 12px } 250 .auth-brand .site-title { font-size: 22px } 251 .auth-brand .page-title { font-size: 18px } 252 .form-group { margin-bottom: 14px } 253 .input-wrap input { font-size: 14px; padding: 11px 12px 11px 0 } 254 .input-wrap .input-icon { width: 40px } 255 .input-wrap .toggle-pw { width: 40px } 256 .btn-submit { padding: 12px; font-size: 14px } 257 } 258 </style> 259</head> 260<body> 261 <div class="auth-wrapper"> 262 <div class="auth-card"> 263 <div class="back-home"> 264 <a href="/"><i class="fas fa-arrow-left"></i> Go back home</a> 265 </div> 266 <div class="auth-brand"> 267 <a href="/" class="site-title">
267বà§à¦à§à¦à¦² à¦à¦à§à¦¸à¦ªà§à¦°à§à¦¸</a> 268 <h1 class="page-title">Sign In</h1> 269 <p class="page-subtitle">Welcome back! Please enter your credentials.</p> 270 </div> 271 272 273 <form method="POST" action="" id="loginForm"> 274 <div class="form-group"> 275 <label>Email Address</label> 276 <div class="input-wrap"> 277 <span class="input-icon"><i class="fas fa-envelope"></i></span> 278 <input type="email" name="email" required placeholder="[email protected]" value=""> 279 </div> 280 </div> 281 <div class="form-group"> 282 <label>Password</label> 283 <div class="input-wrap"> 284 <span class="input-icon"><i class="fas fa-lock"></i></span> 285 <input type="password" name="password" id="loginPassword" required placeholder="Enter your password"> 286 <button type="button" class="toggle-pw" onclick="togglePassword('loginPassword', this)" tabindex="-1"><i class="fas fa-eye"></i></button> 287 </div> 288 </div> 289 <div class="form-options"> 290 <label class="checkbox-wrap"> 291 <input type="checkbox" name="remember"> 292 <span class="check-box"><i class="fas fa-check"></i></span> 293 Remember me 294 </label> 295 <a href="/forgot-password.php" class="forgot-link">Forgot password?</a> 296 </div> 297 <button type="submit" class="btn-submit" id="loginBtn"> 298 <span class="btn-text">Sign In</span> 299 <span class="btn-spinner"><span class="spinner"></span></span> 300 </button> 301 </form> 302 303 <div class="social-divider"><span>or continue with</span></div> 304 <a href="/google-auth.php" class="btn-google"><i class="fab fa-google"></i> Sign in with Google</a> 305 306 <div class="auth-footer"> 307 <p>Don't have an account? <a href="/register.php">Create one</a></p> 308 </div> 309 </div> 310 </div> 311 312
312<script> 313 function togglePassword(id, btn) { 314 const inp = document.getElementById(id); 315 const icon = btn.querySelector('i'); 316 if (inp.type === 'password') { inp.type = 'text'; icon.className = 'fas fa-eye-slash' } 317 else { inp.type = 'password'; icon.className = 'fas fa-eye' } 318 } 319 document.getElementById('loginForm').addEventListener('submit', function() { 320 document.getElementById('loginBtn').classList.add('loading'); 321 }); 322 </script>
322 323</body> 324</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.