From 71d751de0b51f7e423b3d279d8c7e0e45e31c45d Mon Sep 17 00:00:00 2001 From: Nguyen Duy Date: Tue, 19 Dec 2023 21:43:17 +0700 Subject: [PATCH] final UI --- server/public/css/dashboard.css | 149 +++++++++++++++++ server/public/css/doctor_login.css | 15 +- server/public/css/register.css | 4 +- server/resource/scss/dashboard.scss | 153 ++++++++++++++++++ server/resource/scss/doctor_login.scss | 15 +- server/resource/scss/register.scss | 4 +- .../authentication/loginDoctor.handlebars | 4 +- .../authentication/registerDoctor.handlebars | 26 +-- 8 files changed, 337 insertions(+), 33 deletions(-) diff --git a/server/public/css/dashboard.css b/server/public/css/dashboard.css index aca7f12..8bf740a 100644 --- a/server/public/css/dashboard.css +++ b/server/public/css/dashboard.css @@ -850,3 +850,152 @@ fieldset i { .patient_information_forPatient .col:nth-child(4) { border-top: 4px solid #ebbd41; } + +.doctor-form-box { + width: 90%; + max-width: 450px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: transparent; + backdrop-filter: blur(9px); + color: rgba(0, 0, 0, 0.2588235294); + padding: 50px 60px 70px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); + text-align: center; + border: 2px solid rgba(255, 255, 255, 0.2); + border-radius: 8px; +} + +.doctor-form-box h1 { + color: #e6f0ff; + font-size: 30px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 4px; + margin-bottom: 60px; + position: relative; +} + +.doctor-form-box h1::after { + content: ""; + width: 130px; + height: 4px; + border-radius: 3px; + background: #ffffff; + position: absolute; + bottom: -12px; + left: 50%; + transform: translateX(-50%); +} + +.doctor-input-field { + background: #eaeaea; + margin: 15px 0; + border-radius: 8px; + display: flex; + align-items: center; + max-height: 60px; + transition: max-height 0.3s ease 0.3s; + overflow: hidden; +} + +input { + width: 100%; + background: transparent; + border: 0; + outline: 0; + padding: 18px 15px; +} + +.doctor-input-field i { + margin-left: 15px; + color: #999; + background: transparent; + border: none; + outline: none; + border: 2px solid rgba(255, 255, 255, 0.2); + border-radius: 40px; + padding: 20px 45px 20px 20px; +} + +form p { + text-align: center; + font-size: 17px; + color: #ffffff; + margin-top: 15px; +} + +.doctor-btn-field { + width: 100%; + justify-items: center; +} + +.doctor-input-group { + height: 280px; +} + +.loginBtn { + display: block; + position: relative; + margin-left: auto; + margin-right: auto; + margin-top: 20px; + margin-bottom: 50px; + width: 50%; + height: 20%; + background: transparent; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); + border: 0; + outline: 0; + padding: 30px 30px; + border-radius: 8px; + color: #ffffff; + border: 2px solid rgba(255, 255, 255, 0.2); + font-size: 18px; + font-weight: 700; + letter-spacing: 2px; + cursor: pointer; + border-radius: 40px; + transition: background 0.1s ease 0.1s; +} + +.loginBtn:hover { + background: linear-gradient(90deg, rgb(202, 65, 184) 0%, rgb(96, 32, 221) 100%); + color: #fff; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); + transition: background 0.1s ease 0.1s; +} + +.doctor-registerBtn { + display: flex; + position: fixed; + top: 110px; + align-items: center; + margin-left: auto; + margin-right: auto; + margin-top: auto; + margin-bottom: 100px; + width: 50%; + height: 20%; + background: transparent; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); + outline: 0; + padding: 130px 30px; + border-radius: 40px; + color: #ffffff; + border: 2px solid rgba(255, 255, 255, 0.2); + font-size: 18px; + font-weight: 700; + letter-spacing: 2px; + cursor: pointer; + transition: background 0.1s ease 0.1s; +} + +.doctor-registerBtn:hover { + background: linear-gradient(90deg, rgb(202, 65, 184) 0%, rgb(96, 32, 221) 100%); + color: #fff; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); + transition: background 0.1s ease 0.1s; +} diff --git a/server/public/css/doctor_login.css b/server/public/css/doctor_login.css index 3e08c2e..6c15d2f 100644 --- a/server/public/css/doctor_login.css +++ b/server/public/css/doctor_login.css @@ -13,7 +13,7 @@ position: relative; } -.form-box { +.doctor-form-box { width: 90%; max-width: 450px; position: absolute; @@ -30,7 +30,7 @@ border-radius: 8px; } -.form-box h1 { +.doctor-form-box h1 { color: #e6f0ff; font-size: 30px; font-weight: 700; @@ -40,7 +40,7 @@ position: relative; } -.form-box h1::after { +.doctor-form-box h1::after { content: ""; width: 130px; height: 4px; @@ -52,7 +52,7 @@ transform: translateX(-50%); } -.input-field { +.doctor-input-field { background: #eaeaea; margin: 15px 0; border-radius: 8px; @@ -71,7 +71,7 @@ input { padding: 18px 15px; } -.input-field i { +.doctor-input-field i { margin-left: 15px; color: #999; background: transparent; @@ -89,12 +89,12 @@ form p { margin-top: 15px; } -.btn-field { +.doctor-btn-field { width: 100%; justify-items: center; } -.input-group { +.doctor-input-group { height: 280px; } @@ -104,6 +104,7 @@ form p { margin-left: auto; margin-right: auto; margin-top: 20px; + margin-bottom: 90px; width: 50%; height: 20%; background: transparent; diff --git a/server/public/css/register.css b/server/public/css/register.css index c85d23a..d74f65b 100644 --- a/server/public/css/register.css +++ b/server/public/css/register.css @@ -93,7 +93,7 @@ form p { height: 280px; } -.registerBtn { +.doctor-registerBtn { display: block; position: relative; margin-left: auto; @@ -117,7 +117,7 @@ form p { transition: background 0.1s ease 0.1s; } -.registerBtn:hover { +.doctor-registerBtn:hover { background: linear-gradient(90deg, rgb(202, 65, 184) 0%, rgb(96, 32, 221) 100%); color: #fff; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); diff --git a/server/resource/scss/dashboard.scss b/server/resource/scss/dashboard.scss index ba947bd..b646087 100644 --- a/server/resource/scss/dashboard.scss +++ b/server/resource/scss/dashboard.scss @@ -986,3 +986,156 @@ i{ } } } + + + +//Doctor +.doctor-form-box{ + width: 90%; + max-width: 450px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + background: transparent; + backdrop-filter: blur(9px); + color: #00000042; + padding: 50px 60px 70px; + box-shadow: 0 5px 10px rgba(0,0,0,0.3); + text-align: center; + border: 2px solid rgba(255, 255, 255, .2); + border-radius: 8px; + +} + +.doctor-form-box h1{ + color:#e6f0ff; + font-size: 30px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 4px; + margin-bottom: 60px; + position: relative; + +} + +.doctor-form-box h1::after{ + content: ''; + width: 130px; + height: 4px; + border-radius: 3px; + background: #ffffff; + position: absolute; + bottom: -12px; + left: 50%; + transform: translateX(-50%); +} + + +.doctor-input-field{ + background: #eaeaea; + margin: 15px 0; + border-radius: 8px; + display: flex; + align-items: center; + max-height: 60px; + transition: max-height 0.3s ease 0.3s; + overflow: hidden; +} + +input{ + width: 100%; + background: transparent; + border: 0; + outline: 0; + padding: 18px 15px; +} + +.doctor-input-field i{ + margin-left: 15px; + color: #999; + background: transparent; + border: none; + outline: none; + border: 2px solid rgba(255, 255, 255, .2); + border-radius: 40px; + padding: 20px 45px 20px 20px; +} +form p{ + text-align: center; + font-size: 17px; + color: #ffffff; + margin-top: 15px; +} + + +.doctor-btn-field{ + width: 100%; + justify-items: center; +} + +.doctor-input-group{ + height: 280px; +} + +.loginBtn{ + display: block; + position: relative; + margin-left: auto; + margin-right: auto; + margin-top: 20px; + margin-bottom: 50px; + width: 50%; + height: 20%; + background: transparent; + box-shadow: 0 5px 10px rgba(0,0,0,0.3); + border: 0; + outline: 0; + padding: 30px 30px; + border-radius: 8px; + color: #ffffff; + border: 2px solid rgba(255, 255, 255, .2); + font-size: 18px; + font-weight: 700; + letter-spacing: 2px; + cursor: pointer; + border-radius: 40px; + transition: background 0.1s ease 0.1s; +} +.loginBtn:hover { + background: linear-gradient(90deg, rgba(202,65,184,1) 0%, rgba(96,32,221,1) 100%); + color: #fff; + box-shadow: 0 5px 10px rgba(0,0,0,0.3); + transition: background 0.1s ease 0.1s; +} + +.doctor-registerBtn{ + display: flex; + position: fixed; + top: 110px; + align-items: center; + margin-left: auto; + margin-right: auto; + margin-top: auto; + margin-bottom: 100px; + width: 50%; + height: 20%; + background: transparent; + box-shadow: 0 5px 10px rgba(0,0,0,0.3); + outline: 0; + padding: 130px 30px; + border-radius: 40px; + color: #ffffff; + border: 2px solid rgba(255, 255, 255, .2); + font-size: 18px; + font-weight: 700; + letter-spacing: 2px; + cursor: pointer; + transition: background 0.1s ease 0.1s; +} +.doctor-registerBtn:hover { + background: linear-gradient(90deg, rgba(202,65,184,1) 0%, rgba(96,32,221,1) 100%); + color: #fff; + box-shadow: 0 5px 10px rgba(0,0,0,0.3); + transition: background 0.1s ease 0.1s; +} diff --git a/server/resource/scss/doctor_login.scss b/server/resource/scss/doctor_login.scss index a78985c..8c9f0e6 100644 --- a/server/resource/scss/doctor_login.scss +++ b/server/resource/scss/doctor_login.scss @@ -13,7 +13,7 @@ position: relative; } -.form-box{ +.doctor-form-box{ width: 90%; max-width: 450px; position: absolute; @@ -31,7 +31,7 @@ } -.form-box h1{ +.doctor-form-box h1{ color:#e6f0ff; font-size: 30px; font-weight: 700; @@ -42,7 +42,7 @@ } -.form-box h1::after{ +.doctor-form-box h1::after{ content: ''; width: 130px; height: 4px; @@ -55,7 +55,7 @@ } -.input-field{ +.doctor-input-field{ background: #eaeaea; margin: 15px 0; border-radius: 8px; @@ -74,7 +74,7 @@ input{ padding: 18px 15px; } -.input-field i{ +.doctor-input-field i{ margin-left: 15px; color: #999; background: transparent; @@ -92,12 +92,12 @@ form p{ } -.btn-field{ +.doctor-btn-field{ width: 100%; justify-items: center; } -.input-group{ +.doctor-input-group{ height: 280px; } @@ -107,6 +107,7 @@ form p{ margin-left: auto; margin-right: auto; margin-top: 20px; + margin-bottom: 90px; width: 50%; height: 20%; background: transparent; diff --git a/server/resource/scss/register.scss b/server/resource/scss/register.scss index 25f6ad6..f87b83c 100644 --- a/server/resource/scss/register.scss +++ b/server/resource/scss/register.scss @@ -96,7 +96,7 @@ form p{ height: 280px; } -.registerBtn{ +.doctor-registerBtn{ display: block; position: relative; margin-left: auto; @@ -119,7 +119,7 @@ form p{ font-size: 18px; transition: background 0.1s ease 0.1s; } -.registerBtn:hover { +.doctor-registerBtn:hover { background: linear-gradient(90deg, rgba(202,65,184,1) 0%, rgba(96,32,221,1) 100%); color: #fff; box-shadow: 0 5px 10px rgba(0,0,0,0.3); diff --git a/server/resource/views/authentication/loginDoctor.handlebars b/server/resource/views/authentication/loginDoctor.handlebars index 3c0c798..8247e6e 100644 --- a/server/resource/views/authentication/loginDoctor.handlebars +++ b/server/resource/views/authentication/loginDoctor.handlebars @@ -13,8 +13,8 @@ - Forgotten password? - Register? + Forgotten password? + Register?
diff --git a/server/resource/views/authentication/registerDoctor.handlebars b/server/resource/views/authentication/registerDoctor.handlebars index 7e6b9f4..7bd8497 100644 --- a/server/resource/views/authentication/registerDoctor.handlebars +++ b/server/resource/views/authentication/registerDoctor.handlebars @@ -1,43 +1,43 @@
-
+

REGISTER FOR DOCTOR

-
-
+
+
-
+
-
- +
+
-
- +
+
-
+
-
+
- Login? + Login?
-
- +
+