Skip to content

Commit

Permalink
final UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@thanhduy1706
thanhduy1706 committed Dec 19, 2023
1 parent fc991af commit 71d751d
Show file tree
Hide file tree
Showing 8 changed files with 337 additions and 33 deletions.
149 changes: 149 additions & 0 deletions server/public/css/dashboard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
15 changes: 8 additions & 7 deletions server/public/css/doctor_login.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
position: relative;
}

.form-box {
.doctor-form-box {
width: 90%;
max-width: 450px;
position: absolute;
Expand All @@ -30,7 +30,7 @@
border-radius: 8px;
}

.form-box h1 {
.doctor-form-box h1 {
color: #e6f0ff;
font-size: 30px;
font-weight: 700;
Expand All @@ -40,7 +40,7 @@
position: relative;
}

.form-box h1::after {
.doctor-form-box h1::after {
content: "";
width: 130px;
height: 4px;
Expand All @@ -52,7 +52,7 @@
transform: translateX(-50%);
}

.input-field {
.doctor-input-field {
background: #eaeaea;
margin: 15px 0;
border-radius: 8px;
Expand All @@ -71,7 +71,7 @@ input {
padding: 18px 15px;
}

.input-field i {
.doctor-input-field i {
margin-left: 15px;
color: #999;
background: transparent;
Expand All @@ -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;
}

Expand All @@ -104,6 +104,7 @@ form p {
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 90px;
width: 50%;
height: 20%;
background: transparent;
Expand Down
4 changes: 2 additions & 2 deletions server/public/css/register.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ form p {
height: 280px;
}

.registerBtn {
.doctor-registerBtn {
display: block;
position: relative;
margin-left: auto;
Expand All @@ -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);
Expand Down
153 changes: 153 additions & 0 deletions server/resource/scss/dashboard.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Loading

0 comments on commit 71d751d

Please sign in to comment.