Skip to content

Commit 3d12eba

Browse files
Sheane-marioSheane-mario
authored
Merge pull request #49 from Abhishke391/feature/service-centre
Feature/service centre
2 parents 73c076e + de1916d commit 3d12eba

10 files changed

+523
-100
lines changed

‎controllers/CustomerController.php

+12
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,18 @@ public function customerTechnicians()
4646
return $this->render('/customer/customer-technicians');
4747
}
4848

49+
public function customerServiceCenter()
50+
{
51+
$this->setLayout('auth');
52+
return $this->render('/customer/customer-serviceCenter');
53+
}
54+
55+
public function serviceCenterProfile()
56+
{
57+
$this->setLayout('auth');
58+
return $this->render('/customer/service-center-profile');
59+
}
60+
4961
public function customerMap()
5062
{
5163
$this->setLayout('auth');

‎public/css/customer/service-center-profile.css

+111
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
/* Profile Cards */
2+
.cards {
3+
display: flex;
4+
flex-wrap: wrap;
5+
gap: 20px;
6+
justify-content: center;
7+
margin: 20px 0;
8+
}
9+
10+
.card {
11+
background: #ffffff;
12+
border: 1px solid #e0e0e0;
13+
border-radius: 10px;
14+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
15+
width: 300px;
16+
overflow: hidden;
17+
transition: transform 0.3s ease, box-shadow 0.3s ease;
18+
}
19+
20+
.card:hover {
21+
transform: translateY(-5px);
22+
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
23+
}
24+
25+
.card-image img {
26+
width: 100%;
27+
height: 200px;
28+
object-fit: cover;
29+
}
30+
31+
.card-content {
32+
padding: 15px;
33+
text-align: center;
34+
}
35+
36+
.card-content h3 {
37+
margin: 10px 0;
38+
font-size: 1.5rem;
39+
color: #333333;
40+
}
41+
42+
.card-content p {
43+
font-size: 1rem;
44+
color: #666666;
45+
margin: 5px 0;
46+
}
47+
48+
.card-content small {
49+
display: block;
50+
margin-top: 10px;
51+
color: #888888;
52+
}
53+
54+
.message-btn {
55+
background: #4CAF50;
56+
color: #ffffff;
57+
padding: 10px 15px;
58+
border: none;
59+
border-radius: 5px;
60+
font-size: 1rem;
61+
cursor: pointer;
62+
margin: 10px 0;
63+
transition: background-color 0.3s ease;
64+
}
65+
66+
.message-btn:hover {
67+
background: #45a049;
68+
}
69+
70+
/* Feedback Section */
71+
.feedback-section {
72+
margin: 30px 0;
73+
padding: 20px;
74+
background: #f9f9f9;
75+
border-radius: 10px;
76+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
77+
}
78+
79+
.feedback-section h2 {
80+
text-align: center;
81+
font-size: 2rem;
82+
margin-bottom: 20px;
83+
color: #333333;
84+
}
85+
86+
.feedback-card {
87+
background: #ffffff;
88+
border: 1px solid #e0e0e0;
89+
border-radius: 10px;
90+
padding: 15px;
91+
margin-bottom: 15px;
92+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
93+
}
94+
95+
.feedback-card h4 {
96+
margin-bottom: 10px;
97+
font-size: 1.25rem;
98+
color: #333333;
99+
}
100+
101+
.feedback-card p {
102+
font-size: 1rem;
103+
color: #666666;
104+
margin: 5px 0;
105+
}
106+
107+
.feedback-card small {
108+
display: block;
109+
margin-top: 10px;
110+
color: #888888;
111+
}

‎public/css/home/home.css

+87-73
Original file line numberDiff line numberDiff line change
@@ -138,106 +138,101 @@
138138
border-color: #c3e6cb;
139139
}
140140

141+
/* Section 3 Styles */
141142
.section-2 {
142-
/*background-image: url('/assets/homepage3.webp');*/
143-
/*background-color: #010336;*/
144-
background-color: white;
143+
background-color: #03042C;
145144
margin-top: 50px;
146145
background-size: cover;
147146
background-position: center;
148147
background-repeat: no-repeat;
149-
height: 100vh;
150-
max-height: 800px;
151-
color: black;
152-
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
153-
display: grid;
154-
grid-template-columns: 1fr 1fr ;
148+
height: 50vh;
149+
display: flex;
150+
/*place-items: center;*/
155151
}
156152

157153
.box-2 {
158154
display: flex;
155+
/*grid-template-columns: 1fr 1fr; !* Two equal columns *!*/
159156
flex-direction: column;
160-
justify-content: center;
161-
align-items: center;
162-
padding: 0 2rem;
157+
height: 100%;
158+
align-items: center; /* Vertically center content */
159+
width: 100%; /* Constrain overall width */
160+
/*max-width: 1200px; !* Prevent the layout from being too wide *!*/
161+
/*gap: 10rem; !* Add spacing between columns *!*/
163162
}
164163

165-
.box-2-container {
166-
border-radius: 0.5rem;
167-
background-color: rgba(255, 255, 255, 0.192);
168-
backdrop-filter: blur(8px);
169-
170-
}
171-
172-
173164
.box-2-content {
165+
direction: inherit;
174166
color: white;
175-
margin-top: 70px;
176-
}
177-
178-
.box-2-video{
179-
margin-left: 500px;
167+
text-align: left;
168+
align-items: flex-start;
169+
margin: 85px;
170+
/*padding-left: 80px;*/
171+
/*margin-left: 90%;*/
172+
/*padding: 1rem; !* Add padding for spacing *!*/
180173
}
181174

182175
.box-2-title {
183-
font-size: 2rem;
176+
font-size: 3.5rem;
184177
font-weight: 500;
185-
margin: 1rem auto 0.5rem;
186-
padding: 0 2rem;
178+
margin-bottom: 1rem;
187179
}
188180

189181
.box-2-desc {
190-
font-size: 0.8rem;
182+
font-size: 0.9rem;
191183
font-weight: 300;
192-
margin: 1rem auto 0.5rem;
193-
padding: 0 2rem;
184+
margin-bottom: 1.5rem;
194185
}
195186

196187
.box-2-btn {
197-
display: flex;
198-
justify-content: center;
199-
align-items: center;
200188
padding: 1rem 2rem;
201-
margin: 2rem 0 6rem 2rem;
202189
color: white;
203190
background-color: #010336;
204191
border-radius: 2.4rem;
205192
border: none;
206-
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
193+
transition: background-color 0.3s ease-in-out;
207194
}
208195

209196
.box-2-btn:hover {
210197
background-color: #0d6efd;
211198
cursor: pointer;
212199
}
213200

214-
/* For larger screens, increase height and maintain 1fr 1fr layout */
215-
@media (min-width: 1024px) {
216-
.section-2 {
217-
height: 100vh;
218-
max-height: 500px;
219-
}
220-
}
201+
.box-2-video {
202+
display: flex;
203+
/*justify-content: center;*/
204+
height: 100%;
221205

222-
/* For tablet screens, reduce height slightly and adjust padding */
223-
@media (max-width: 1023px) and (min-width: 768px) {
224-
.section-2 {
225-
height: 45vh;
226-
max-height: 450px;
227-
padding: 15px;
228-
}
229206
}
230207

231-
/* For mobile screens, make it a single column and reduce height */
232-
@media (max-width: 767px) {
233-
.section-2 {
234-
height: 35vh; /* Reduced height for smaller screens */
235-
max-height: 300px;
236-
grid-template-columns: 1fr; /* Single column layout */
237-
padding: 10px;
208+
.box-2-video video {
209+
width: 100%;
210+
max-width: 500px; /* Constrain the video size */
211+
height: 100%;
212+
margin: 50px;
213+
/*border-radius: 10px;*/
214+
/* Optional: Add rounded corners */
215+
}
216+
217+
/* Responsive Design */
218+
@media (max-width: 1024px) {
219+
.box-2 {
220+
grid-template-columns: 1fr; /* Stack columns for smaller screens */
221+
gap: 1rem;
222+
}
223+
.box-2-video {
224+
margin-top: 1rem;
225+
}
226+
.box-2-content {
227+
text-align: center; /* Center text for small screens */
228+
}
229+
.box-2-btn {
230+
margin: 0 auto; /* Center the button */
238231
}
239232
}
240233

234+
235+
241236
/* Section 3 Styling */
242237

243238
body {
@@ -254,20 +249,31 @@ body {
254249
.section-3 {
255250
background-color: rgba(255, 255, 255, 0.61);
256251
padding: 6rem;
252+
display: flex; /* Ensure the section centers the row */
253+
justify-content: center;
254+
align-items: center;
257255
}
258256

259-
.section-3 .heading-container {
260-
display: flex;
257+
.heading-container {
258+
261259
justify-content: center;
262-
align-items: center;
260+
/*align-items: flex-start;*/
263261
text-align: center;
264262
margin-bottom: 40px;
265263
}
266264

267265
.section-3 .heading-container h2 {
268-
font-size: 1.5rem;
266+
font-size: 3rem;
269267
font-weight: bold;
270268
position: relative;
269+
margin-right: 15%;
270+
}
271+
272+
.row {
273+
display: flex;
274+
flex-wrap: wrap; /* Allow wrapping for responsive design */
275+
justify-content: center; /* Center the containers horizontally */
276+
gap: 5px; /* Add a 5px gap between containers */
271277
}
272278

273279
.section-3 .box-3 {
@@ -277,7 +283,14 @@ body {
277283
border-radius: 5px;
278284
overflow: hidden;
279285
justify-content: flex-start;
280-
width: 50%;
286+
width: 100%;
287+
transition: transform 0.3s ease, box-shadow 0.3s ease;
288+
289+
}
290+
291+
.box-3:hover {
292+
transform: translateY(-5px);
293+
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
281294
}
282295

283296
.section-3 .box-3 .img-box-3 {
@@ -310,22 +323,23 @@ body {
310323
margin-bottom: 20px;
311324
}
312325

313-
.row {
314-
display: flex;
315-
flex-wrap: wrap;
316-
justify-content: center;
317-
gap: 30px;
318-
}
319326

320-
.box-3-container {
321-
/*flex: 1 1 ;*/
322-
/*!*max-width: 100%;*!*/
323-
}
327+
328+
/*.box-3-container {*/
329+
/* align-items: flex-start;*/
330+
/*}*/
324331

325332
@media (min-width: 768px) {
326333
.box-3-container {
327334
flex: 1 1;
328-
max-width: 50%;
335+
max-width: 100%;
336+
}
337+
}
338+
339+
@media (max-width: 767px) {
340+
.box-3-container {
341+
width: 100%; /* Full width for small screens */
342+
max-width: 100%; /* Ensure proper scaling */
329343
}
330344
}
331345

‎public/index.php

+3
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,9 @@
112112
$app->router->get('/technician-profile/{id}', [TechnicianController::class, 'viewTechnicianProfile']);
113113
$app->router->post('/cus-tech-req', [CustomerController::class, 'cusTechReq']);
114114
$app->router->post('/delete-cus-tech-req', [CustomerController::class, 'deleteCusTechReq']);
115+
$app->router->get('/customer-serviceCenter', [CustomerController::class, 'customerServiceCenter']);
116+
$app->router->get('/service-center-profile', [CustomerController::class, 'serviceCenterProfile']);
117+
115118

116119
/* Admin Routes */
117120
$app->router->get('/admin-dashboard', [AdminController::class, 'adminDashboard']);

‎views/customer/components/sidebar.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
</a>
2929
</li>
3030
<li>
31-
<a href="#">
31+
<a href="/customer-serviceCenter">
3232
<span class="icon">
3333
<ion-icon name="car-outline"></ion-icon>
3434
</span>

0 commit comments

Comments
 (0)