Skip to content

Commit b39214c

Browse files
hammadhttpshammadhttps
committed
fixed the doc UI
1 parent 6fc9bfd commit b39214c

File tree

2 files changed

+189
-297
lines changed

2 files changed

+189
-297
lines changed

‎front_end/src/doc.css‎

Lines changed: 130 additions & 230 deletions
Original file line numberDiff line numberDiff line change
@@ -1,233 +1,133 @@
1-
/* Neumorphic Styles for Doctor Appointment System */
2-
1+
/* Enhanced Neumorphic Styles */
32
:root {
4-
--primary-bg: #e6eef9;
5-
--primary-text: #2d3748;
6-
--primary-blue: #3182ce;
7-
--primary-light-blue: #ebf8ff;
8-
--primary-dark-blue: #2c5282;
9-
--shadow-light: #ffffff;
10-
--shadow-dark: #c4d3e4;
11-
--card-bg: #f7fafc;
12-
--border-radius: 12px;
13-
}
14-
15-
body {
16-
background-color: var(--primary-bg);
17-
color: var(--primary-text);
18-
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
19-
}
20-
21-
/* Neumorphic Card */
22-
.neumorphic-card {
23-
background: var(--card-bg);
24-
border-radius: var(--border-radius);
25-
box-shadow:
26-
8px 8px 16px var(--shadow-dark),
27-
-8px -8px 16px var(--shadow-light);
28-
transition: all 0.3s ease;
29-
}
30-
31-
.neumorphic-card:hover {
32-
box-shadow:
33-
10px 10px 20px var(--shadow-dark),
34-
-10px -10px 20px var(--shadow-light);
35-
transform: translateY(-5px);
36-
}
37-
38-
/* Neumorphic Inset (for inputs) */
39-
.neumorphic-inset {
40-
background: var(--primary-bg);
41-
border-radius: var(--border-radius);
42-
box-shadow:
43-
inset 3px 3px 7px var(--shadow-dark),
44-
inset -3px -3px 7px var(--shadow-light);
45-
border: none;
46-
padding: 12px;
47-
transition: all 0.2s ease;
48-
}
49-
50-
.neumorphic-inset:focus {
51-
box-shadow:
52-
inset 4px 4px 8px var(--shadow-dark),
53-
inset -4px -4px 8px var(--shadow-light);
54-
outline: none;
55-
}
56-
57-
/* Neumorphic Button */
58-
.neumorphic-button {
59-
border: none;
60-
border-radius: var(--border-radius);
61-
background: linear-gradient(145deg, #f0f8ff, #d9e6f2);
62-
box-shadow:
63-
5px 5px 10px var(--shadow-dark),
64-
-5px -5px 10px var(--shadow-light);
65-
transition: all 0.2s ease;
66-
font-weight: 600;
67-
padding: 10px 20px;
68-
cursor: pointer;
69-
}
70-
71-
.neumorphic-button:hover {
72-
box-shadow:
73-
7px 7px 14px var(--shadow-dark),
74-
-7px -7px 14px var(--shadow-light);
75-
}
76-
77-
.neumorphic-button:active {
78-
background: linear-gradient(145deg, #d9e6f2, #e6f0fa);
79-
box-shadow:
80-
inset 3px 3px 7px var(--shadow-dark),
81-
inset -3px -3px 7px var(--shadow-light);
82-
}
83-
84-
/* Primary Button */
85-
.neumorphic-button-primary {
86-
background: linear-gradient(145deg, #3b8dde, #2d78c4);
87-
color: white;
88-
box-shadow:
89-
5px 5px 10px rgba(45, 120, 196, 0.3),
90-
-5px -5px 10px rgba(59, 141, 222, 0.1);
91-
}
92-
93-
.neumorphic-button-primary:hover {
94-
background: linear-gradient(145deg, #429af0, #3182ce);
95-
}
96-
97-
.neumorphic-button-primary:active {
98-
background: linear-gradient(145deg, #2d78c4, #3b8dde);
99-
box-shadow:
100-
inset 3px 3px 7px rgba(45, 93, 153, 0.5),
101-
inset -3px -3px 7px rgba(59, 141, 222, 0.3);
102-
}
103-
104-
/* Modal */
105-
.modal-backdrop {
106-
background-color: rgba(0, 0, 0, 0.6);
107-
backdrop-filter: blur(3px);
108-
}
109-
110-
.modal-container {
111-
background: var(--card-bg);
112-
border-radius: var(--border-radius);
113-
box-shadow:
114-
10px 10px 30px var(--shadow-dark),
115-
-10px -10px 30px var(--shadow-light);
116-
}
117-
118-
/* Circular image for doctors */
119-
.doctor-avatar {
120-
width: 120px;
121-
height: 120px;
122-
border-radius: 50%;
123-
overflow: hidden;
124-
box-shadow:
125-
5px 5px 10px var(--shadow-dark),
126-
-5px -5px 10px var(--shadow-light);
127-
background: var(--card-bg);
128-
padding: 3px;
129-
}
130-
131-
/* Review cards */
132-
.review-card {
133-
background: var(--primary-light-blue);
134-
border-radius: 10px;
135-
padding: 12px;
136-
margin-bottom: 12px;
137-
box-shadow:
138-
3px 3px 6px var(--shadow-dark),
139-
-3px -3px 6px var(--shadow-light);
140-
}
141-
142-
/* Availability chips */
143-
.availability-chip {
144-
display: inline-block;
145-
background: var(--primary-light-blue);
146-
color: var(--primary-dark-blue);
147-
padding: 5px 10px;
148-
border-radius: 20px;
149-
font-size: 0.875rem;
150-
margin-right: 5px;
151-
margin-bottom: 5px;
152-
box-shadow:
153-
2px 2px 4px var(--shadow-dark),
154-
-2px -2px 4px var(--shadow-light);
155-
}
156-
157-
/* Rating stars */
158-
.star-active {
159-
color: #f6ad55;
160-
fill: #f6ad55;
161-
}
162-
163-
.star-inactive {
164-
color: #e2e8f0;
165-
}
166-
167-
/* Responsive utilities */
168-
@media (max-width: 768px) {
169-
.doctor-avatar {
170-
width: 100px;
171-
height: 100px;
172-
}
173-
174-
.modal-container {
175-
width: 95%;
176-
max-width: 95%;
177-
margin: 0 auto;
178-
padding: 15px;
179-
}
180-
}
181-
182-
/* Animations */
183-
.fade-in {
184-
animation: fadeIn 0.3s ease-in;
185-
}
186-
187-
@keyframes fadeIn {
188-
from {
189-
opacity: 0;
190-
transform: translateY(-10px);
191-
}
192-
to {
193-
opacity: 1;
194-
transform: translateY(0);
195-
}
196-
}
197-
198-
/* Scrollbar styling */
199-
::-webkit-scrollbar {
200-
width: 8px;
201-
}
202-
203-
::-webkit-scrollbar-track {
204-
background: var(--primary-bg);
205-
}
206-
207-
::-webkit-scrollbar-thumb {
208-
background: var(--primary-blue);
209-
border-radius: 10px;
210-
}
211-
212-
::-webkit-scrollbar-thumb:hover {
213-
background: var(--primary-dark-blue);
214-
}
215-
216-
/* Make buttons look consistent across browsers */
217-
button {
218-
-webkit-appearance: none;
219-
-moz-appearance: none;
220-
appearance: none;
3+
--primary-bg: #edf2f9;
4+
--primary-text: #1a365d;
5+
--primary-blue: #3182ce;
6+
--primary-light-blue: #ebf8ff;
7+
--primary-dark-blue: #2c5282;
8+
--shadow-light: #ffffff;
9+
--shadow-dark: #c4d3e4;
10+
--card-bg: #f8fafc;
11+
--border-radius: 16px;
12+
--transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
13+
}
14+
15+
body {
16+
background-color: var(--primary-bg);
17+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
18+
color: var(--primary-text);
19+
margin: 0;
20+
padding: 0;
21+
}
22+
23+
/* Doctor Card Styles */
24+
.doctor-card {
25+
background: var(--card-bg);
26+
border-radius: var(--border-radius);
27+
box-shadow:
28+
8px 8px 16px var(--shadow-dark),
29+
-8px -8px 16px var(--shadow-light);
30+
transition: var(--transition);
31+
overflow: hidden;
32+
padding: 16px;
33+
cursor: pointer;
34+
}
35+
36+
.doctor-card:hover {
37+
transform: translateY(-5px);
38+
box-shadow:
39+
12px 12px 24px var(--shadow-dark),
40+
-12px -12px 24px var(--shadow-light);
41+
}
42+
43+
/* Modal Styles */
44+
.modal-backdrop {
45+
position: fixed;
46+
top: 0;
47+
left: 0;
48+
width: 100%;
49+
height: 100%;
50+
background-color: rgba(0, 0, 0, 0.6);
51+
backdrop-filter: blur(5px);
52+
z-index: 999;
53+
display: flex;
54+
align-items: center;
55+
justify-content: center;
56+
animation: fadeIn 0.3s ease;
57+
}
58+
59+
.modal-content {
60+
background: var(--card-bg);
61+
border-radius: var(--border-radius);
62+
box-shadow:
63+
10px 10px 20px var(--shadow-dark),
64+
-10px -10px 20px var(--shadow-light);
65+
padding: 32px;
66+
margin: 20px;
67+
width: 90%;
68+
max-width: 800px;
69+
max-height: 90vh;
70+
overflow-y: auto;
71+
position: relative;
72+
animation: slideUp 0.3s ease;
73+
}
74+
75+
/* Input Styles */
76+
.neumorphic-input {
77+
background: var(--primary-light-blue);
78+
border: none;
79+
border-radius: 12px;
80+
box-shadow:
81+
inset 3px 3px 6px var(--shadow-dark),
82+
inset -3px -3px 6px var(--shadow-light);
83+
transition: var(--transition);
84+
padding: 12px 16px;
85+
width: 100%;
86+
font-size: 1rem;
87+
}
88+
89+
.neumorphic-input:focus {
90+
box-shadow:
91+
inset 4px 4px 8px var(--shadow-dark),
92+
inset -4px -4px 8px var(--shadow-light);
93+
outline: none;
94+
}
95+
96+
/* Button Styles */
97+
.primary-button {
98+
background: linear-gradient(145deg, var(--primary-blue), #2b6cb0);
99+
color: white;
100+
border: none;
101+
border-radius: 12px;
102+
padding: 12px 24px;
103+
font-weight: 600;
104+
box-shadow:
105+
4px 4px 8px var(--shadow-dark),
106+
-4px -4px 8px var(--shadow-light);
107+
transition: var(--transition);
108+
cursor: pointer;
109+
}
110+
111+
.primary-button:hover {
112+
transform: translateY(-2px);
113+
box-shadow:
114+
6px 6px 10px var(--shadow-dark),
115+
-6px -6px 10px var(--shadow-light);
116+
}
117+
118+
/* Animations */
119+
@keyframes fadeIn {
120+
from { opacity: 0; }
121+
to { opacity: 1; }
122+
}
123+
124+
@keyframes slideUp {
125+
from {
126+
transform: translateY(20px);
127+
opacity: 0;
221128
}
222-
223-
/* Focus accessibility */
224-
:focus {
225-
outline: 2px solid var(--primary-blue);
226-
outline-offset: 2px;
129+
to {
130+
transform: translateY(0);
131+
opacity: 1;
227132
}
228-
229-
/* Custom selection color */
230-
::selection {
231-
background: var(--primary-blue);
232-
color: white;
233-
}
133+
}

0 commit comments

Comments
 (0)