From 94cb6fadf43eae5c34e5b7d7c457451a3a6cd0ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CVeLiTi=E2=80=9D?= <“info@veliti.nl”> Date: Thu, 27 Mar 2025 14:48:07 +0100 Subject: [PATCH] CMXX - Update soveliti login/reset --- login.php | 2 +- reset.php | 2 +- style/admin_login.css | 5 + style/admin_reset.css | 5 + style/soveliti/soveliti_login.css | 344 ++++++++++++++++++------------ style/soveliti/soveliti_reset.css | 342 +++++++++++++++++------------ 6 files changed, 415 insertions(+), 285 deletions(-) diff --git a/login.php b/login.php index 8e88650..58ba849 100644 --- a/login.php +++ b/login.php @@ -206,7 +206,7 @@ echo'
- Login Visual +
diff --git a/reset.php b/reset.php index b778b92..954290a 100644 --- a/reset.php +++ b/reset.php @@ -260,7 +260,7 @@ echo'
- Login Visual +
diff --git a/style/admin_login.css b/style/admin_login.css index 2b3739f..2b0e576 100644 --- a/style/admin_login.css +++ b/style/admin_login.css @@ -63,6 +63,11 @@ body { width: 55%; position: relative; overflow: hidden; + background-image: url(/assets/images/emergencyplug-auto-in-licht.jpg); + background-position: center center; + background-size: 100% 100%; + min-height: 100vh; + background-repeat: no-repeat; } .login-visual img { diff --git a/style/admin_reset.css b/style/admin_reset.css index 2b3739f..2b0e576 100644 --- a/style/admin_reset.css +++ b/style/admin_reset.css @@ -63,6 +63,11 @@ body { width: 55%; position: relative; overflow: hidden; + background-image: url(/assets/images/emergencyplug-auto-in-licht.jpg); + background-position: center center; + background-size: 100% 100%; + min-height: 100vh; + background-repeat: no-repeat; } .login-visual img { diff --git a/style/soveliti/soveliti_login.css b/style/soveliti/soveliti_login.css index b4c7993..f367737 100644 --- a/style/soveliti/soveliti_login.css +++ b/style/soveliti/soveliti_login.css @@ -1,172 +1,232 @@ +:root { + --color-white: #FFFFFF; + --color-light-blue: #344fd5c2; + --color-blue: #0b1054; + --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-blue); } body { - background-color: #fff; - font-family: sans-serif; - background-color:#0b1054; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background-color: var(--color-white); + padding: 20px; +} + +.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: 20px; + left: 20px; + background-image: url(VeLiTi-Logo2.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); +} + +.login-visual { + width: 55%; + position: relative; + overflow: hidden; background-image: url(veliti_intro.png); background-position: center center; - background-size: 100% 100%; + background-size: 100% 100%; + background-color: var(--color-light-blue); min-height: 100vh; background-repeat: no-repeat; } -.logon { - margin: 0; +.login-visual img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.register-link { position: absolute; - top: 40%; - left: 50%; - transform: translate(-50%, -50%); + top: 20px; + right: 20px; + text-decoration: none; + color: var(--text-color); } -#imagelogon { -background-image: url(VeLiTi-Logo2.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); +.header { + margin-bottom: 30px; } -.login-box{ - width: 350px; - height: 330px; - background-color:#344fd5c2; - 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 #0b1054; - 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:#ececec; - } - - .login-box input[type="submit"]{ - width: 60%; - border: none; - outline: none; - background: #0b1054; - 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:#ececec; - 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: #ececec; - } - - #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; +.header h1 { + font-size: 24px; + margin-bottom: 10px; } -.slider-checkbox * { - transition: 250ms; - box-sizing: border-box; +.header p { + color: #666; } -.slider-checkbox input[type="checkbox"] { - display: none; +.input-group { + margin-bottom: 15px; + position: relative; } -.slider-checkbox label { - display: inline-block; - width: 100%; - height: 95%; - background: #005655c2; - border-radius: 0.7em; - padding-top: 0.2em; - padding-left: 0.2em; +.input-group input { + width: 100%; + padding: 10px; + border: 1px solid #ddd; + border-radius: 4px; } -.slider-checkbox span { - display: inline-block; - width: 1em; - height: 1em; - background: #FFF; - border: none; - border-radius: 2em; +.input-group input[type="email"] { + padding-left: 40px; + background: url('data:image/svg+xml;utf8,') no-repeat left 10px center; } -.slider-checkbox input[type="checkbox"]:checked ~ label { - background: #93ed49; - padding-left: 1.7em; +.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-blue); + color: var(--color-white); + border: none; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.login-btn:hover { + background-color: var(--color-blue); +} + +.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/soveliti/soveliti_reset.css b/style/soveliti/soveliti_reset.css index b4c7993..46c0609 100644 --- a/style/soveliti/soveliti_reset.css +++ b/style/soveliti/soveliti_reset.css @@ -1,172 +1,232 @@ +:root { + --color-white: #FFFFFF; + --color-light-blue: #344fd5c2; + --color-blue: #0b1054; + --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-blue); } body { - background-color: #fff; - font-family: sans-serif; - background-color:#0b1054; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background-color: var(--color-white); + padding: 20px; +} + +.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: 20px; + left: 20px; + background-image: url(VeLiTi-Logo2.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); +} + +.login-visual { + width: 55%; + position: relative; + overflow: hidden; background-image: url(veliti_intro.png); background-position: center center; background-size: 100% 100%; + background-color: var(--color-light-blue); min-height: 100vh; background-repeat: no-repeat; } -.logon { - margin: 0; +.login-visual img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.register-link { position: absolute; - top: 40%; - left: 50%; - transform: translate(-50%, -50%); + top: 20px; + right: 20px; + text-decoration: none; + color: var(--text-color); } -#imagelogon { -background-image: url(VeLiTi-Logo2.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); +.header { + margin-bottom: 30px; } -.login-box{ - width: 350px; - height: 330px; - background-color:#344fd5c2; - 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 #0b1054; - 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:#ececec; - } - - .login-box input[type="submit"]{ - width: 60%; - border: none; - outline: none; - background: #0b1054; - 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:#ececec; - 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: #ececec; - } - - #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; +.header h1 { + font-size: 24px; + margin-bottom: 10px; } -.slider-checkbox * { - transition: 250ms; - box-sizing: border-box; +.header p { + color: #666; } -.slider-checkbox input[type="checkbox"] { - display: none; +.input-group { + margin-bottom: 15px; + position: relative; } -.slider-checkbox label { - display: inline-block; - width: 100%; - height: 95%; - background: #005655c2; - border-radius: 0.7em; - padding-top: 0.2em; - padding-left: 0.2em; +.input-group input { + width: 100%; + padding: 10px; + border: 1px solid #ddd; + border-radius: 4px; } -.slider-checkbox span { - display: inline-block; - width: 1em; - height: 1em; - background: #FFF; - border: none; - border-radius: 2em; +.input-group input[type="email"] { + padding-left: 40px; + background: url('data:image/svg+xml;utf8,') no-repeat left 10px center; } -.slider-checkbox input[type="checkbox"]:checked ~ label { - background: #93ed49; - padding-left: 1.7em; +.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-blue); + color: var(--color-white); + border: none; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.login-btn:hover { + background-color: var(--color-blue); +} + +.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