abdullahawan1/dictionary-attack-detector
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 - CyberShield</title>7 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">8 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">9 <style>10 body {11 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);12 height: 100vh;13 display: flex;14 align-items: center;15 justify-content: center;16 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;17 margin: 0;18 }19 .login-card {20 background: rgba(255, 255, 255, 0.95);21 border-radius: 15px;22 box-shadow: 0 15px 35px rgba(0,0,0,0.2);23 padding: 40px;24 width: 100%;25 max-width: 450px;26 backdrop-filter: blur(10px);27 }28 .security-badge {29 background: rgba(40, 167, 69, 0.1);30 color: #28a745;31 padding: 8px 15px;32 border-radius: 20px;33 font-size: 0.85rem;34 display: inline-flex;35 align-items: center;36 gap: 8px;37 margin-bottom: 20px;38 border: 1px solid rgba(40, 167, 69, 0.2);39 }40 .security-badge i { animation: pulse 2s infinite; }41 @keyframes pulse {42 0% { transform: scale(1); }43 50% { transform: scale(1.1); }44 100% { transform: scale(1); }45 }46 .form-control {47 border-radius: 8px;48 padding: 12px;49 border: 1px solid #e0e0e0;50 }51 .form-control:focus {52 box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.25);53 border-color: #667eea;54 }55 .btn-primary {56 background: linear-gradient(to right, #667eea, #764ba2);57 border: none;58 padding: 12px;59 border-radius: 8px;60 font-weight: 600;61 width: 100%;62 transition: transform 0.2s;63 }64 .btn-primary:hover {65 transform: translateY(-2px);66 box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);67 }68 .alert { display: none; border-radius: 8px; font-size: 0.9rem; }69 .demo-creds {70 background: #f8f9fa;71 border-left: 4px solid #667eea;72 padding: 10px 15px;73 margin-top: 20px;74 font-size: 0.85rem;75 border-radius: 4px;76 }77 .back-link {78 color: rgba(255,255,255,0.8);79 position: fixed;80 top: 20px;81 left: 20px;82 text-decoration: none;83 font-size: 0.9rem;84 }85 .back-link:hover { color: white; }86 </style>87</head>88<body>89 <a href="/" class="back-link"><i class="fas fa-arrow-left me-2"></i>Back to Home</a>90 91 <div class="login-card">92 <div class="text-center">93 <div class="security-badge">94 <i class="fas fa-shield-alt"></i> Protected by CyberShield95 </div>96 <h2 class="mb-4">System Access</h2>97 </div>98 99 <div id="alertBox" class="alert alert-danger" role="alert">100 <i class="fas fa-exclamation-circle me-2"></i>101 <span id="alertMessage"></span>102 <div id="countdown" class="mt-2 text-center fw-bold" style="display:none;">103 Timeout: <span id="timeRemaining"></span>s104 </div>105 </div>106 107 <form id="loginForm">108 <div class="mb-3">109 <label class="form-label text-muted small fw-bold">USERNAME</label>110 <div class="input-group">111 <span class="input-group-text bg-white border-end-0"><i class="fas fa-user text-muted"></i></span>112 <input type="text" class="form-control border-start-0" id="username" required>113 </div>114 </div>115 <div class="mb-4">116 <label class="form-label text-muted small fw-bold">PASSWORD</label>117 <div class="input-group">118 <span class="input-group-text bg-white border-end-0"><i class="fas fa-lock text-muted"></i></span>119 <input type="password" class="form-control border-start-0" id="password" required>120 </div>121 </div>122 <button type="submit" class="btn btn-primary" id="loginBtn">123 <span class="spinner-border spinner-border-sm d-none" id="loginSpinner"></span>124 Secure Login <i class="fas fa-arrow-right ms-2"></i>125 </button>126 </form>127 128 <div class="text-center mt-3">129 <a href="/register" class="text-decoration-none text-muted small">Create an account</a>130 </div>131 132 <div class="demo-creds">133 <strong>Demo Credentials:</strong><br>134 Username: <code>demo_user</code><br>135 Password: <code>SecurePass123!</code>136 </div>137 </div>138 139 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>140 <script>141 $(document).ready(function() {142 let timeoutInterval;143 144 $('#loginForm').submit(function(e) {145 e.preventDefault();146 147 const btn = $('#loginBtn');148 const spinner = $('#loginSpinner');149 const alertBox = $('#alertBox');150 const countdown = $('#countdown');151 152 btn.prop('disabled', true);153 spinner.removeClass('d-none');154 alertBox.hide();155 clearInterval(timeoutInterval);156 157 $.ajax({158 url: '/api/login',159 type: 'POST',160 contentType: 'application/json',161 data: JSON.stringify({162 username: $('#username').val(),163 password: $('#password').val()164 }),165 success: function(response) {166 if (response.success) {167 window.location.href = response.redirect;168 }169 },170 error: function(xhr) {171 btn.prop('disabled', false);172 spinner.addClass('d-none');173 174 let msg = 'Authentication failed';175 let timeout = 0;176 177 if (xhr.responseJSON) {178 msg = xhr.responseJSON.message || msg;179 timeout = xhr.responseJSON.timeout || 0;180 }181 182 $('#alertMessage').text(msg);183 alertBox.removeClass('alert-success alert-warning')184 .addClass('alert-danger').fadeIn();185 186 if (timeout > 0) {187 btn.prop('disabled', true);188 countdown.show();189 let timeRemaining = timeout;190 191 function updateTimer() {192 $('#timeRemaining').text(timeRemaining);193 if (timeRemaining <= 0) {194 clearInterval(timeoutInterval);195 btn.prop('disabled', false);196 countdown.hide();197 alertBox.fadeOut();198 }199 timeRemaining--;200 }201 202 updateTimer();203 timeoutInterval = setInterval(updateTimer, 1000);204 } else if (timeout === -1) {205 // IP is blacklisted206 btn.prop('disabled', true);207 countdown.hide();208 $('#alertMessage').html(209 '<strong>CRITICAL SECURITY ALERT</strong><br>' +210 'Your IP has been blacklisted for 15 minutes.'211 );212 } else {213 countdown.hide();214 }215 }216 });217 });218 });219 </script>220</body>221</html>222