diff --git a/login.php b/login.php index 8664f7c..8e88650 100644 --- a/login.php +++ b/login.php @@ -1,14 +1,48 @@ - '; -//Maintenance mode notification message -if (maintenance_mode_communication){ -echo' -

- '.maintenance_mode_notification.' -

'; -} - //Logon view echo' -
-
-
- -
- -'; -?> + +'; + +?> \ No newline at end of file diff --git a/logout.php b/logout.php index 183925d..0b6d097 100644 --- a/logout.php +++ b/logout.php @@ -10,6 +10,6 @@ session_destroy(); // Redirect to login page - header('location: index.php'); + header('location: login.php'); exit; ?> \ No newline at end of file diff --git a/reset.php b/reset.php index c1a91c2..b778b92 100644 --- a/reset.php +++ b/reset.php @@ -3,7 +3,6 @@ include './assets/functions.php'; include './settings/settings_redirector.php'; include './settings/config_redirector.php'; -include_once './settings/translations/translations_US.php'; // Check if the user is already logged in, if yes then redirect him to welcome page if(isset($_SESSION["loggedin"]) && $_SESSION["loggedin"] === true){ @@ -11,6 +10,38 @@ if(isset($_SESSION["loggedin"]) && $_SESSION["loggedin"] === true){ exit(); } +if (session_status() == PHP_SESSION_NONE) { + session_start(); +} + +//========================================= +//GET Language +//========================================= +if (isset($_GET['language']) && $_GET['language'] !=''){ + //INCLUDE LANGUAGE FILE + $api_file_language = './settings/translations/translations_'.strtoupper($_GET['language']).'.php'; + if (file_exists($api_file_language)){ + include $api_file_language; //Include the code + //DEFINE LANGUAGE + $_SESSION['country_code'] = trim($_GET['language']); + } + else { + include './settings/translations/translations_US.php'; + //DEFINE LANGUAGE + $_SESSION['country_code'] = 'US'; + } +} + +if(isset($_SESSION['country_code'])){ + $api_file_language = './settings/translations/translations_'.strtoupper($_SESSION['country_code']).'.php'; + if (file_exists($api_file_language)){ + include $api_file_language; //Include the code + } + else { + include './settings/translations/translations_US.php'; + } +} + //========================================= //GET DOMAIN FOR CORRECT STYLING AND SETTINGS $domain = getDomainName($_SERVER['SERVER_NAME']); @@ -24,7 +55,7 @@ $username_err = $password_err = ''; if ($_POST['submit'] === 'Reset' && $_POST['username'] !='EMP-updater') { // Check if username is empty if(empty(trim($_POST['username']))){ - $username_err = 'Please enter username.'; + $username_err = $username_enter ?? 'Please enter username'; } else{ $username = trim($_POST['username']); } @@ -39,7 +70,7 @@ if ($_POST['submit'] === 'Reset' && $_POST['username'] !='EMP-updater') { if (!empty($responses)){$responses = decode_payload($responses);}else{$responses = '400';} if ($responses === 'NOK'){ - $usernameerr = 'Not authorized, please retry'; + $username_err = $password_err_1 ?? 'Not authorized, please retry'; } else { $username_err = $reset_message; @@ -83,10 +114,10 @@ if (isset($_POST['resetkey']) && $_POST['resetkey'] !='' && $_POST['password_upd if (!empty($responses)){$responses = decode_payload($responses);}else{$responses = '400';} if ($responses === 'NOK'){ - $usernameerr = 'Not authorized, please retry'; + $username_err = $password_err_1 ?? 'Not authorized, please retry'; } else { // success - $username_err = 'You will be redirected'; + $username_err = $redirect_succes ?? 'You will be redirected'; //redirect to login page header("Refresh:2; url=index.php"); } @@ -94,7 +125,7 @@ if (isset($_POST['resetkey']) && $_POST['resetkey'] !='' && $_POST['password_upd //$username_err = 'You will be redirected'; } else { - $username_err = 'Passwords do not match'; + $username_err = $password_err_3 ?? 'Passwords do not match'; $reset_id_valid = 1; } } @@ -117,7 +148,7 @@ if (isset($_GET['resetkey']) && $_GET['resetkey'] !=''){ $username_err = $reset_message2 ; //redirect to login page - header("Refresh:5; url=index.php"); + header("Refresh:3; url=index.php"); } } @@ -125,69 +156,125 @@ echo' - -'.site_title.' - - + + '.site_title.' + + '; -//Maintenance mode notification message -if (maintenance_mode_communication){ + //Logon view echo' -

- '.maintenance_mode_notification.' -

'; -} +
+ - -'; + +'; + ?> diff --git a/settings/translations/translations_DE.php b/settings/translations/translations_DE.php index eabe720..c266421 100644 --- a/settings/translations/translations_DE.php +++ b/settings/translations/translations_DE.php @@ -751,4 +751,19 @@ $menu_shipping = 'Versand'; $menu_uploader = 'Upload-Tool'; $contract_billing4 = ' Einmalig im Voraus'; $message_build = ' Bitte melden Sie sich erneut an'; +$username_enter = 'Geben Sie bitte den Benutzernamen ein'; +$password_enter = 'Geben Sie bitte Ihr Passwort ein'; +$password_err_1 = 'Nicht autorisiert, bitte versuchen Sie es erneut'; +$password_err_2 = 'Zu viele Anmeldeversuche. Benutzer blockiert, bitte wenden Sie sich an Ihren Administrator'; +$password_err_3 = 'Die Passwörter stimmen nicht überein'; +$login_h1 = 'Melden Sie sich bei Ihrem Konto an'; +$login_p = 'Geben Sie Ihre Anmeldedaten ein, um sich anzumelden'; +$redirect_succes = 'Sie werden weitergeleitet'; +$login_reset_h1 = 'Haben Sie Ihr Passwort vergessen?'; +$login_reset_p = 'Geben Sie Ihren Benutzernamen ein, um das Passwort zurückzusetzen'; +$button_back_to_login = 'Zurück zum Login'; +$button_reset = 'Zurücksetzen anfordern'; +$password_new = 'Neues Passwort'; +$password_check = 'Wiederhole das Passwort'; +$button_password_update = 'Passwort aktualisieren'; ?> \ No newline at end of file diff --git a/settings/translations/translations_ES.php b/settings/translations/translations_ES.php index 74e265d..04c90c2 100644 --- a/settings/translations/translations_ES.php +++ b/settings/translations/translations_ES.php @@ -757,4 +757,19 @@ $menu_shipping = 'Envío'; $menu_uploader = 'Herramienta de carga'; $contract_billing4 = ' Único pago por adelantado'; $message_build = ' Por favor, faça login novamente'; +$username_enter = 'Por favor, ingresa tu nombre de usuario'; +$password_enter = 'Por favor, ingresa tu contraseña'; +$password_err_1 = 'No autorizado, por favor reinténtalo'; +$password_err_2 = 'Ha demasiados intentos de inicio de sesión. Usuario bloqueado, por favor contacte con su administrador'; +$password_err_3 = 'Las contraseñas no coinciden'; +$login_h1 = 'Inicia sesión en tu cuenta'; +$login_p = 'Ingresa tus detalles para iniciar sesión'; +$redirect_succes = 'Sera redirigido'; +$login_reset_h1 = '¿Olvidaste tu contraseña?'; +$login_reset_p = 'Introduce tu nombre de usuario para restablecer la contraseña'; +$button_back_to_login = 'Volver a iniciar sesión'; +$button_reset = 'Solicitar restablecimiento'; +$password_new = 'Nueva contraseña'; +$password_check = 'Repite la contraseña'; +$button_password_update = 'Actualizar contraseña'; ?> \ No newline at end of file diff --git a/settings/translations/translations_NL.php b/settings/translations/translations_NL.php index f85bdc8..686a767 100644 --- a/settings/translations/translations_NL.php +++ b/settings/translations/translations_NL.php @@ -123,7 +123,7 @@ $data_software_text = 'Activa upgrade gewenst'; $data_service_text_forecast = 'Activa waarbij service gewenst per kwartaal'; $data_warranty_text_forecast = 'Activa onder garantie tot kwartaal'; $button1 = 'Login'; -$button2 = 'Request reset'; +$button2 = 'Wachtwoord vergeten?'; $equipment_label1 = 'Indicatie'; $equipment_label2 = 'Serienummer'; $equipment_label3 = 'Status'; @@ -963,4 +963,19 @@ $payment_status_999 = 'Geannuleerd'; $payment_method_3 = ' Debit/Credit'; $contract_billing4 = ' Eenmalig vooraf'; $message_build = ' Gelieve opnieuw in te loggen'; +$username_enter = 'Vul je gebruikersnaam in'; +$password_enter = 'Vul je wachtwoord in'; +$password_err_1 = 'Niet geautoriseerd, probeer het opnieuw'; +$password_err_2 = 'Te veel inlogpogingen. Gebruiker geblokkeerd, neem contact op met je beheerder'; +$password_err_3 = 'Wachtwoorden komen niet overeen'; +$login_h1 = 'Inloggen op je account'; +$login_p = 'Vul je gegevens in om in te loggen'; +$redirect_succes = 'U wordt doorgestuurd'; +$login_reset_h1 = 'Wachtwoord vergeten'; +$login_reset_p = 'Vul je gebruikersnaam in om je wachtwoord te resetten'; +$button_back_to_login = 'Terug naar inloggen'; +$button_reset = 'Aanvraag reset'; +$password_new = 'Nieuw wachtwoord'; +$password_check = 'Herhaal wachtwoord'; +$button_password_update = 'Wachtwoord bijwerken'; ?> \ No newline at end of file diff --git a/settings/translations/translations_PT.php b/settings/translations/translations_PT.php index 5f945a7..a126d38 100644 --- a/settings/translations/translations_PT.php +++ b/settings/translations/translations_PT.php @@ -757,4 +757,19 @@ $menu_shipping = 'Envio'; $menu_uploader = 'Ferramenta de upload'; $contract_billing4 = ' Único pagamento antecipado'; $message_build = ' Por favor, inicie sesión nuevamente'; +$username_enter = 'Por favor, insira o nome de usuário'; +$password_enter = 'Por favor, insira sua senha'; +$password_err_1 = 'Não autorizado, tente novamente'; +$password_err_2 = 'Excesso de tentativas de login. Usuário bloqueado, por favor, entre em contato com o seu administrador'; +$password_err_3 = 'As senhas não coincidem'; +$login_h1 = 'Entrar na sua conta'; +$login_p = 'Insira seus dados para fazer login'; +$redirect_succes = 'Você será redirecionado'; +$login_reset_h1 = 'Esqueceu sua senha?'; +$login_reset_p = 'Insira seu nome de usuário para redefinir a senha'; +$button_back_to_login = 'Voltar para o login'; +$button_reset = 'Solicitar redefiniçao'; +$password_new = 'Nova senha'; +$password_check = 'Repita a senha'; +$button_password_update = 'Atualizar senha'; ?> \ No newline at end of file diff --git a/settings/translations/translations_US.php b/settings/translations/translations_US.php index 42c34cb..2c7e9d9 100644 --- a/settings/translations/translations_US.php +++ b/settings/translations/translations_US.php @@ -123,7 +123,7 @@ $data_software_text = 'Assets requiring firmware upgrade'; $data_service_text_forecast = 'Assets with service due within given period'; $data_warranty_text_forecast = 'Assets with warranty coverage untill given period'; $button1 = 'Login'; -$button2 = 'Request reset'; +$button2 = 'Forgot password?'; $equipment_label1 = 'Indicators'; $equipment_label2 = 'Serialnumber'; $equipment_label3 = 'Status'; @@ -968,4 +968,19 @@ $payment_status_999 = 'Cancelled'; $payment_method_3 = 'Debit/Credit'; $contract_billing4 = ' Onetime upfront'; $message_build = ' Please login again'; +$username_enter = 'Please enter username'; +$password_enter = 'Please enter your password'; +$password_err_1 = 'Not authorized, please retry'; +$password_err_2 = 'Too many login attempts. User blocked, please contact your administrator'; +$password_err_3 = 'Passwords do not match'; +$login_h1 = 'Login to your account'; +$login_p = 'Enter your details to login'; +$redirect_succes = 'You will be redirected'; +$login_reset_h1 = 'Forgot your password'; +$login_reset_p = 'Enter your username to reset password'; +$button_back_to_login = 'Back to login'; +$button_reset = 'Request reset'; +$password_new = 'New Password'; +$password_check = 'Repeat password'; +$button_password_update = 'Update password'; ?> \ No newline at end of file diff --git a/style/admin_login.css b/style/admin_login.css index 2a1d29a..2b3739f 100644 --- a/style/admin_login.css +++ b/style/admin_login.css @@ -1,172 +1,226 @@ +:root { + --color-white: #FFFFFF; + --color-light-green: #2FAC66; + --color-green: #005655c2; + --color-red: #a75151; + --text-color: #333333; + --error-background: #f3c3c3; +} + + * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Open Sans", Helvetica, sans-serif; - accent-color: #005655c2; + accent-color: var(--color-green); } body { - background-color: #fff; - font-family: sans-serif; - background-color:#2FAC66; - background-image: url(/assets/images/emergencyplug-auto-in-licht.jpg); - background-position: center center; - background-size: 100% 100%; + display: flex; + justify-content: center; + align-items: center; min-height: 100vh; - background-repeat: no-repeat; + background-color: var(--color-white); + padding: 20px; } -.logon { - margin: 0; +.login-container { + display: flex; + width: 100%; + max-width: 1200px; + height: calc(100vh - 40px); + background-color: var(--color-white); + border-radius: 16px; + box-shadow: 0 10px 25px rgba(0,0,0,0.1); + overflow: hidden; +} + +.login-form { + width: 45%; + padding: 40px; + display: flex; + flex-direction: column; + justify-content: center; + position: relative; +} + +.logo { position: absolute; - top: 40%; - left: 50%; - transform: translate(-50%, -50%); + top: 20px; + left: 20px; + background-image: url(/assets/images/TSS-logo3.png); + background-repeat: no-repeat; + opacity: inherit; + width: 85px; + height: 120px; + margin: 0 auto; + -webkit-filter: drop-shadow(5px 5px 5px #222); + filter: drop-shadow(5px 5px 5px #222); } -#imagelogon { -background-image: url(/assets/images/TSS-logo3.png); -background-repeat: no-repeat; -opacity: inherit; -width: 85px; -height: 150px; -margin: 0 auto; -position: relative; -top: 87px; --webkit-filter: drop-shadow(5px 5px 5px #222); -filter: drop-shadow(5px 5px 5px #222); +.login-visual { + width: 55%; + position: relative; + overflow: hidden; } -.login-box{ - width: 350px; - height: 330px; - background-color:#005655c2; - padding: 55px 30px; - border-radius: 10px; - text-align: center; - -webkit-box-shadow: 10px 10px 5px -4px rgba(0,0,0,0.75); - -moz-box-shadow: 10px 10px 5px -4px rgba(0,0,0,0.75); - box-shadow: 10px 10px 5px -4px rgba(0,0,0,0.75); - - } - - .login-box h1{ - font-weight: 500; - color: #fff; - } - - .login-box input[type="text"], - .login-box input[type="password"]{ - width: 75%; - margin-bottom: 10px; - } - - .login-box input[type="text"], - .login-box input[type="password"]{ - border-radius: 10px; - //background: transparent; - border: none; - outline: none; - border: 2px solid #2FAC66; - font-size: 13px; - height: 40px; - text-align: center; - transition: 0.27s; - } - .login-box input[type="text"]:focus, - .login-box input[type="password"]:focus{ - width: 80%; - border-color:#6fd653; - } - - .login-box input[type="submit"]{ - width: 60%; - border: none; - outline: none; - background: #2FAC66; - padding: 10px 0; - border-radius: 10px; - color: #ffffff; - font-weight: 500; - text-transform: uppercase; - cursor: pointer; - margin-bottom: 20px; - position: relative; - bottom: -12px; - font-style: italic; - } - - .login-box input[type="submit"]:hover{ - background:#6FD653; - transition: .2s; - } - - .login-box input[type="submit"]:focus{ - transform: scaleX(1.1); - } - - .login-box a { - text-decoration: none; - font-size: 12px; - color: #00bcd4; - } - - .login-box a:hover{ - color: #6FD653; - } - - #reset a { - text-decoration: none; - font-size: 10px; - color: #00bcd4; - } - - #reset { - margin-top: -10px; - } - - #message p { - font-size: 15px; - color: #ffffff;; - } - - /* Slide 5 */ -.slider-checkbox { - width: 3em; - height: 1.5em; - margin: 20px auto; +.login-visual img { + width: 100%; + height: 100%; + object-fit: cover; } -.slider-checkbox * { - transition: 250ms; - box-sizing: border-box; +.register-link { + position: absolute; + top: 20px; + right: 20px; + text-decoration: none; + color: var(--text-color); } -.slider-checkbox input[type="checkbox"] { - display: none; +.header { + margin-bottom: 30px; } -.slider-checkbox label { - display: inline-block; - width: 100%; - height: 95%; - background: #005655c2; - border-radius: 0.7em; - padding-top: 0.2em; - padding-left: 0.2em; +.header h1 { + font-size: 24px; + margin-bottom: 10px; } -.slider-checkbox span { - display: inline-block; - width: 1em; - height: 1em; - background: #FFF; - border: none; - border-radius: 2em; +.header p { + color: #666; } -.slider-checkbox input[type="checkbox"]:checked ~ label { - background: #93ed49; - padding-left: 1.7em; +.input-group { + margin-bottom: 15px; + position: relative; +} + +.input-group input { + width: 100%; + padding: 10px; + border: 1px solid #ddd; + border-radius: 4px; +} + +.input-group input[type="email"] { + padding-left: 40px; + background: url('data:image/svg+xml;utf8,') no-repeat left 10px center; +} + +.input-group input[type="password"] { + padding-left: 40px; + background: url('data:image/svg+xml;utf8,') no-repeat left 10px center; +} + +.forgot-password { + color: var(--text-color); + text-decoration: none; + text-align: right; + margin-top: 5px; + float: right; + font-size: 12px; +} + +.remember-me { + display: flex; + align-items: center; + margin-bottom: 20px; +} + +.remember-me input { + margin-right: 10px; +} + +.maintenance { + padding: 5px; +} + +.message p { + margin-top: 5px; + background-color: var(--error-background); + border-left: 4px solid var(--color-red); + color: var(--color-red); + padding: 5px; + border-radius: 4px; + text-align: center; +} + +.login-btn { + width: 100%; + padding: 12px; + background-color: var(--color-light-green); + color: var(--color-white); + border: none; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.login-btn:hover { + background-color: var(--color-green); +} + +.trademark { + position: absolute; + bottom: 20px; + left: 20px; + color: var(--text-color); + font-size: 12px; +} + +.language-selector { + position: absolute; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + color: var(--text-color); +} + +.language-selector select { + margin-left: 10px; + border: none; + background: transparent; +} + +/* Responsive Design */ +@media screen and (max-width: 1024px) { + .login-container { + flex-direction: column; + height: auto; + max-width: 500px; + } + + .login-form, .login-visual { + width: 100%; + height: auto; + } + + .login-visual { + height: 300px; + } + + .logo { + position: static; + margin: 20px auto; + margin-bottom: 0; + } + + .trademark, .language-selector { + position: static; + text-align: center; + margin: 20px 0; + } +} + +@media screen and (max-width: 480px) { + .login-form { + padding: 20px; + } + + .header h1 { + font-size: 20px; + } } \ No newline at end of file diff --git a/style/admin_reset.css b/style/admin_reset.css index 8d181b3..2b3739f 100644 --- a/style/admin_reset.css +++ b/style/admin_reset.css @@ -1,132 +1,226 @@ +:root { + --color-white: #FFFFFF; + --color-light-green: #2FAC66; + --color-green: #005655c2; + --color-red: #a75151; + --text-color: #333333; + --error-background: #f3c3c3; +} + + * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Open Sans", Helvetica, sans-serif; - accent-color: '.color.'; + accent-color: var(--color-green); } body { - background-color: #fff; - font-family: sans-serif; - background-color:#2FAC66; - background-image: url(/assets/images/emergencyplug-auto-in-licht.jpg); - background-position: center center; - background-size: 100% 100%; + display: flex; + justify-content: center; + align-items: center; min-height: 100vh; - background-repeat: no-repeat; + background-color: var(--color-white); + padding: 20px; } -.logon { - margin: 0; +.login-container { + display: flex; + width: 100%; + max-width: 1200px; + height: calc(100vh - 40px); + background-color: var(--color-white); + border-radius: 16px; + box-shadow: 0 10px 25px rgba(0,0,0,0.1); + overflow: hidden; +} + +.login-form { + width: 45%; + padding: 40px; + display: flex; + flex-direction: column; + justify-content: center; + position: relative; +} + +.logo { position: absolute; - top: 40%; - left: 50%; - transform: translate(-50%, -50%) + top: 20px; + left: 20px; + background-image: url(/assets/images/TSS-logo3.png); + background-repeat: no-repeat; + opacity: inherit; + width: 85px; + height: 120px; + margin: 0 auto; + -webkit-filter: drop-shadow(5px 5px 5px #222); + filter: drop-shadow(5px 5px 5px #222); } -#imagelogon { -background-image: url(/assets/images/TSS-logo3.png); -background-repeat: no-repeat; -opacity: inherit; -width: 85px; -height: 150px; -margin: 0 auto; -position: relative; -top: 87px; --webkit-filter: drop-shadow(5px 5px 5px #222); -filter: drop-shadow(5px 5px 5px #222); +.login-visual { + width: 55%; + position: relative; + overflow: hidden; } -.login-box{ - width: 350px; - height: 330px; - background-color:#005655; - padding: 55px 30px; - border-radius: 10px; - text-align: center; - -webkit-box-shadow: 10px 10px 5px -4px rgba(0,0,0,0.75); - -moz-box-shadow: 10px 10px 5px -4px rgba(0,0,0,0.75); - box-shadow: 10px 10px 5px -4px rgba(0,0,0,0.75); - - } - - .login-box h1{ - font-weight: 500; - color: #fff; - } - - .login-box input[type="text"], - .login-box input[type="password"]{ - width: 75%; - margin-bottom: 10px; - } - - .login-box input[type="text"], - .login-box input[type="password"]{ - border-radius: 10px; - //background: transparent; - border: none; - outline: none; - border: 2px solid #2FAC66; - font-size: 13px; - height: 40px; - text-align: center; - transition: 0.27s; - } - .login-box input[type="text"]:focus, - .login-box input[type="password"]:focus{ - width: 80%; - border-color:#6fd653; - } - - .login-box input[type="submit"]{ - width: 60%; - border: none; - outline: none; - background: #2FAC66; - padding: 10px 0; - border-radius: 10px; - color: #ffffff; - font-weight: 500; - text-transform: uppercase; - cursor: pointer; - margin-bottom: 20px; - position: relative; - bottom: -12px; - font-style: italic; - } - - .login-box input[type="submit"]:hover{ - background:#6FD653; - transition: .2s; - } - - .login-box input[type="submit"]:focus{ - transform: scaleX(1.1); - } - - .login-box a { - text-decoration: none; - font-size: 12px; - color: #00bcd4; - } - - .login-box a:hover{ - color: #6FD653; +.login-visual img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.register-link { + position: absolute; + top: 20px; + right: 20px; + text-decoration: none; + color: var(--text-color); +} + +.header { + margin-bottom: 30px; +} + +.header h1 { + font-size: 24px; + margin-bottom: 10px; +} + +.header p { + color: #666; +} + +.input-group { + margin-bottom: 15px; + position: relative; +} + +.input-group input { + width: 100%; + padding: 10px; + border: 1px solid #ddd; + border-radius: 4px; +} + +.input-group input[type="email"] { + padding-left: 40px; + background: url('data:image/svg+xml;utf8,') no-repeat left 10px center; +} + +.input-group input[type="password"] { + padding-left: 40px; + background: url('data:image/svg+xml;utf8,') no-repeat left 10px center; +} + +.forgot-password { + color: var(--text-color); + text-decoration: none; + text-align: right; + margin-top: 5px; + float: right; + font-size: 12px; +} + +.remember-me { + display: flex; + align-items: center; + margin-bottom: 20px; +} + +.remember-me input { + margin-right: 10px; +} + +.maintenance { + padding: 5px; +} + +.message p { + margin-top: 5px; + background-color: var(--error-background); + border-left: 4px solid var(--color-red); + color: var(--color-red); + padding: 5px; + border-radius: 4px; + text-align: center; +} + +.login-btn { + width: 100%; + padding: 12px; + background-color: var(--color-light-green); + color: var(--color-white); + border: none; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.login-btn:hover { + background-color: var(--color-green); +} + +.trademark { + position: absolute; + bottom: 20px; + left: 20px; + color: var(--text-color); + font-size: 12px; +} + +.language-selector { + position: absolute; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + color: var(--text-color); +} + +.language-selector select { + margin-left: 10px; + border: none; + background: transparent; +} + +/* Responsive Design */ +@media screen and (max-width: 1024px) { + .login-container { + flex-direction: column; + height: auto; + max-width: 500px; } - #reset a { - text-decoration: none; - font-size: 10px; - color: #00bcd4; + .login-form, .login-visual { + width: 100%; + height: auto; } - #reset { - margin-top: -10px; + .login-visual { + height: 300px; } - #message p { - font-size: 15px; - color: #ffffff;; - } \ No newline at end of file + .logo { + position: static; + margin: 20px auto; + margin-bottom: 0; + } + + .trademark, .language-selector { + position: static; + text-align: center; + margin: 20px 0; + } +} + +@media screen and (max-width: 480px) { + .login-form { + padding: 20px; + } + + .header h1 { + font-size: 20px; + } +} \ No newline at end of file