Skip to content

Commit a54a0db

Browse files
kasunmendis7kasunmendis7
committedNov 28, 2024
Merge branch 'develop' of https://github.com/kasunmendis7/fixme-technologies into develop
added new stylings
2 parents 22b0eaa + 012019b commit a54a0db

14 files changed

+1076
-38
lines changed
 

‎controllers/ServiceCentreController.php

+12
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,18 @@ public function marketPlaceHome()
9292
return $this->render('service-centre/market-place-home');
9393
}
9494

95+
public function checkOutPage()
96+
{
97+
$this->setLayout('auth');
98+
return $this->render('service-centre/check-out-page');
99+
}
100+
101+
public function cardDetails()
102+
{
103+
$this->setLayout('auth');
104+
return $this->render('service-centre/card-details');
105+
}
106+
95107
public function serviceCenterCreateProduct()
96108
{
97109
$this->setLayout('auth');

‎public/assets/logo/FIXME (1).mp4

491 KB
Binary file not shown.

‎public/assets/logo/fixme-logo.png

28.9 KB
Loading

‎public/css/home/home.css

+13-7
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,8 @@
140140

141141
.section-2 {
142142
/*background-image: url('/assets/homepage3.webp');*/
143-
background-color: #010336;
143+
/*background-color: #010336;*/
144+
background-color: white;
144145
margin-top: 50px;
145146
background-size: cover;
146147
background-position: center;
@@ -150,7 +151,7 @@
150151
color: black;
151152
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
152153
display: grid;
153-
grid-template-columns: 1fr 1fr;
154+
grid-template-columns: 1fr 1fr ;
154155
}
155156

156157
.box-2 {
@@ -174,6 +175,10 @@
174175
margin-top: 70px;
175176
}
176177

178+
.box-2-video{
179+
margin-left: 500px;
180+
}
181+
177182
.box-2-title {
178183
font-size: 2rem;
179184
font-weight: 500;
@@ -271,7 +276,8 @@ body {
271276
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
272277
border-radius: 5px;
273278
overflow: hidden;
274-
width: 100%;
279+
justify-content: flex-start;
280+
width: 50%;
275281
}
276282

277283
.section-3 .box-3 .img-box-3 {
@@ -312,14 +318,14 @@ body {
312318
}
313319

314320
.box-3-container {
315-
flex: 1 1 100%;
316-
max-width: 100%;
321+
/*flex: 1 1 ;*/
322+
/*!*max-width: 100%;*!*/
317323
}
318324

319325
@media (min-width: 768px) {
320326
.box-3-container {
321-
flex: 0 0 48%;
322-
max-width: 48%;
327+
flex: 1 1;
328+
max-width: 50%;
323329
}
324330
}
325331

‎public/index.php

+2
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,8 @@
8585
$app->router->get('/service-center-help', [ServiceCentreController::class, 'serviceCenterHelp']);
8686
$app->router->get('/service-center-community', [ServiceCentreController::class, 'serviceCenterCommunity']);
8787
$app->router->get('/service-center-messages', [ServiceCentreController::class, 'serviceCenterMessages']);
88+
$app->router->get('/check-out-page', [ServiceCentreController::class, 'checkOutPage']);
89+
$app->router->get('/card-details', [ServiceCentreController::class, 'cardDetails']);
8890

8991
/* Routes related to the product (service center) */
9092
$app->router->get('/service-center-create-product', [ServiceCentreController::class, 'serviceCenterCreateProduct']);

‎public/js/service-center/card-details.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
var slideIndex = 1;
2+
showSlides(slideIndex);
3+
// Next/previous controls
4+
function plusSlides(n) {
5+
showSlides(slideIndex += n);
6+
}
7+
// Thumbnail image controls
8+
function currentSlide(n) {
9+
showSlides(slideIndex = n);
10+
}
11+
function showSlides(n) {
12+
var i;
13+
var slides = document.getElementsByClassName("productSlides");
14+
var dots = document.getElementsByClassName("dot");
15+
if (n > slides.length) {
16+
slideIndex = 1
17+
}
18+
if (n < 1) {
19+
slideIndex = slides.length
20+
}
21+
for (i = 0; i < slides.length; i++) {
22+
slides[i].style.display = "none";
23+
}
24+
for (i = 0; i < dots.length; i++) {
25+
dots[i].className = dots[i].className.replace(" active", "");
26+
}
27+
slides[slideIndex - 1].style.display = "block";
28+
dots[slideIndex - 1].className += " active";
29+
}

‎views/home.php

+8
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,16 @@
5454
</p>
5555
<button class="box-2-btn" type="button" onclick="redirectServiceCentreLanding()">See More...</button>
5656
</div>
57+
<div class="box-2-video">
58+
<video autoplay muted loop id="background-video">
59+
<source src="/assets/logo/FIXME (1).mp4" type="video/mp4">
60+
Your browser does not support the video tag.
61+
</video>
62+
</div>
5763
</div>
64+
5865
</div>
66+
5967
</section>
6068
<section class="section-3">
6169
<div class="heading-container">

‎views/logo-slider.php

+44-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
/*display: flex;*/
2121
/*height: 100vh;*/
2222
margin: 0;
23-
background-color: #f4f4f4;
23+
background-color: white;
2424
align-items: center;
2525
justify-content: center;
2626
}
@@ -151,5 +151,48 @@
151151
<div class="slide">
152152
<img src="/assets/slider/toyota.svg" height="100" width="250" alt="image-14" />
153153
</div>
154+
155+
<div class="slide">
156+
<img src="/assets/slider/jaguar.svg" height="100" width="250" alt="image-1" />
157+
</div>
158+
<div class="slide">
159+
<img src="/assets/slider/bmw.svg" height="100" width="250" alt="image-2" />
160+
</div>
161+
<div class="slide">
162+
<img src="/assets/slider/chevrolet.svg" height="100" width="250" alt="image-3" />
163+
</div>
164+
<div class="slide">
165+
<img src="/assets/slider/ferrari.svg" height="100" width="250" alt="image-4" />
166+
</div>
167+
<div class="slide">
168+
<img src="/assets/slider/honda.svg" height="100" width="250" alt="image-5" />
169+
</div>
170+
<div class="slide">
171+
<img src="/assets/slider/hyundai.svg" height="100" width="250" alt="image-6" />
172+
</div>
173+
<div class="slide">
174+
<img src="/assets/slider/jeep.svg" height="100" width="250" alt="image-7" />
175+
</div>
176+
<div class="slide">
177+
<img src="/assets/slider/kia.svg" height="100" width="250" alt="image-8" />
178+
</div>
179+
<div class="slide">
180+
<img src="/assets/slider/land.svg" height="100" width="250" alt="image-9" />
181+
</div>
182+
<div class="slide">
183+
<img src="/assets/slider/mercedes.svg" height="100" width="250" alt="image-10" />
184+
</div>
185+
<div class="slide">
186+
<img src="/assets/slider/volkswagen.svg" height="100" width="250" alt="image-11" />
187+
</div>
188+
<div class="slide">
189+
<img src="/assets/slider/nissan.svg" height="100" width="250" alt="image-12" />
190+
</div>
191+
<div class="slide">
192+
<img src="/assets/slider/volvo.svg" height="100" width="250" alt="image-13" />
193+
</div>
194+
<div class="slide">
195+
<img src="/assets/slider/toyota.svg" height="100" width="250" alt="image-14" />
196+
</div>
154197
</div>
155198
</div>

‎views/select-user-login.php

+4-10
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,10 @@
1111
<section>
1212
<!-- Left Column -->
1313
<div class="container-left">
14-
15-
<div class="col-left-container">
16-
<div class="branding-container">
17-
<div>
18-
<a href="/" class="brand-name">
19-
<span class="brand-button">FixMe</span>
20-
</a>
21-
</div>
22-
<p class="tagline">Expert Car Care, Anytime, Anywhere.</p>
23-
</div>
14+
<div class="logo-container">
15+
<a href="/">
16+
<img style="width: 600px;" src="/assets/logo/fixme-logo.png">
17+
</a>
2418
</div>
2519
</div>
2620

‎views/select-user-sign-up.php

+15-19
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,14 @@
88
</head>
99
<body>
1010
<section>
11-
<!-- Left Column -->
1211
<div class="container-left">
13-
<div class="col-left-container">
14-
<div class="branding-container">
15-
<div>
16-
<a href="/" class="brand-name">
17-
<span class="brand-button">FixMe</span>
18-
</a>
19-
</div>
20-
<p class="tagline">Expert Car Care, Anytime, Anywhere.</p>
21-
</div>
12+
13+
<div class="logo-container">
14+
<a href="/">
15+
<img style="width: 600px;" src="/assets/logo/fixme-logo.png">
16+
</a>
2217
</div>
2318
</div>
24-
2519
<!-- Right Column -->
2620
<div class="container-right">
2721
<div class="container">
@@ -31,30 +25,32 @@
3125
</div>
3226
<h3 class="heading">Customer</h3>
3327
<p class="paragraph">
34-
Sign Up as a customer to find the best technicians in the nearby area.
28+
Sign up as a customer to find the best technicians in the nearby area.
3529
</p>
36-
<a href="/customer-sign-up" class="button">Sign Up</a>
30+
<a href="/customer-sign-up" class="button">Sign up</a>
3731
</div>
3832
3933
<div class="card" onmouseover="hoverEffect(this)" onmouseout="removeHoverEffect(this)">
4034
<div class="icon">
41-
<img src="assets/select-user-technician.png" alt="guider icon">
35+
<img src="assets/select-user-technician.png" alt="Technician icon">
4236
</div>
4337
<h3 class="heading">Technician</h3>
4438
<p class="paragraph">
45-
Sign Up as a Technician and find customers.
39+
Sign up as a Technician and find customers.
4640
</p>
47-
<a href="/technician-sign-up" class="button">Sign Up</a>
41+
<a href="/technician-sign-up" class="button">Sign up</a>
4842
</div>
43+
4944
<div class="card" onmouseover="hoverEffect(this)" onmouseout="removeHoverEffect(this)">
5045
<div class="icon">
51-
<img src="assets/select-user-service-centre.png" alt="guider icon">
46+
<img src="assets/select-user-service-centre.png" alt="Service Center icon">
5247
</div>
5348
<h3 class="heading">Service Center</h3>
5449
<p class="paragraph">
55-
Sign Up as a Service Center and find customers.
50+
Sign up as a Service Center and find customers.
5651
</p>
57-
<a href="/service-centre-sign-up" class="button">Sign Up</a>
52+
<a href="/service-centre-sign-up" class="button">Sign up</a>
53+
5854
</div>
5955
</div>
6056
</div>

‎views/service-centre/card-details.php

+403
Large diffs are not rendered by default.

‎views/service-centre/check-out-page.php

+155
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
<?php
2+
?>
3+
4+
5+
<?php
6+
7+
use app\core\Application;
8+
9+
?>
10+
<!DOCTYPE html>
11+
<html lang="en">
12+
13+
14+
15+
<head>
16+
<meta charset="UTF-8">
17+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
18+
<link rel="stylesheet" href="/css/base/_reset.css">
19+
<link rel="stylesheet" href="/css/base/_global.css">
20+
<link rel="stylesheet" href="/css/service-center/market-place-navbar.css">
21+
<link rel="stylesheet" href="/css/home/footer.css">
22+
<link rel="stylesheet" href="/css/home/home.css">
23+
<link rel="stylesheet" href="/css/service-center/marketplace.css">
24+
<link rel="stylesheet" href="/css/service-center/market-place-product-view.css">
25+
<script src="/js/home/main.js"></script>
26+
<script src="/js/technician/main.js"></script>
27+
<script src="/js/service-center/marketplace-home.js"></script>
28+
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
29+
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
30+
<title>Market Place</title>
31+
</head>
32+
33+
<body>
34+
<nav class="container">
35+
36+
<header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3">
37+
<div class="col-md-3 mb-2 mb-md-0">
38+
<a href="/" class="d-inline-flex link-body-emphasis text-decoration-none">
39+
<img class="logo-img" src="/assets/shopping-cart_market-place.png">
40+
</a>
41+
</div>
42+
43+
44+
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
45+
<li><a href="/" class="nav-link px-2 link-secondary">Home</a></li>
46+
<li><a href="/service-centre-landing" class="nav-link px-2">Service Centre</a></li>
47+
<li><a href="#" class="nav-link px-2">FAQs</a></li>
48+
<li><a href="#" class="nav-link px-2">About</a></li>
49+
<li><a href="#" class="nav-link px-2">
50+
<ion-icon name="cart-outline"></ion-icon>
51+
</a></li>
52+
</ul>
53+
54+
<!-- --><?php //if (Application::isGuestTechnician()): ?>
55+
<!-- <div class="col-md-3 text-center">-->
56+
<!-- <button type="button" class="btn btn-outline-primary me-2"><a class="text-decoration-none"-->
57+
<!-- href="/select-user-login">Login</a>-->
58+
<!-- </button>-->
59+
<!-- <button type="button" class="btn btn-primary"><a class="text-decoration-none"-->
60+
<!-- href="/select-user-sign-up">Sign Up</a></button>-->
61+
<!-- </div>-->
62+
<!-- --><?php //else: ?>
63+
<!-- <div class="col-md-3 text-center">-->
64+
<!---->
65+
<!-- </div>-->
66+
<!-- --><?php //endif; ?>
67+
<form class="search-bar">
68+
<input class="search-bar-enter" type="search" placeholder="Search" aria-label="Search">
69+
<button class="btn" type="submit">Search</button>
70+
</form>
71+
</header>
72+
</nav>
73+
74+
<section>
75+
<div class="flash-message">
76+
<?php if (Application::$app->session->getFlash('success')): ?>
77+
<div class="alert alert-success">
78+
<?php echo Application::$app->session->getFlash('success') ?>
79+
</div>
80+
<?php endif; ?>
81+
</div>
82+
</section>
83+
84+
<?php
85+
86+
include_once 'check-out.php';
87+
88+
?>
89+
90+
91+
92+
<div class="container-f">
93+
<footer class="py-5">
94+
<div class="row">
95+
<div class="col-6 col-md-2 mb-3">
96+
<h3 class="ml-3">FIXME</h3>
97+
</div>
98+
<div class="col-6 col-md-2 mb-3">
99+
<h5>Company</h5>
100+
<ul class="nav-f flex-column">
101+
<li class="nav-item-f mb-2"><a href="#" class="nav-link-f p-0 text-body-secondary">About Us</a></li>
102+
<li class="nav-item-f mb-2"><a href="#" class="nav-link-f p-0 text-body-secondary">Our Offerings</a>
103+
</li>
104+
</ul>
105+
</div>
106+
107+
<div class="col-6 col-md-2 mb-3">
108+
<h5>Products</h5>
109+
<ul class="nav flex-column">
110+
<li class="nav-item-f mb-2"><a href="#" class="nav-link-f p-0 text-body-secondary">Nearby
111+
Technicians</a></li>
112+
<li class="nav-item-f mb-2"><a href="#" class="nav-link-f p-0 text-body-secondary">Service
113+
Centers</a></li>
114+
<li class="nav-item-f mb-2"><a href="#" class="nav-link-f p-0 text-body-secondary">Service Center
115+
Marketplace</a></li>
116+
</ul>
117+
</div>
118+
119+
<div class="col-6 col-md-2 mb-3">
120+
<h5>Safety Measures</h5>
121+
<ul class="nav flex-column">
122+
<li class="nav-item-f mb-2"><a href="#" class="nav-link-f p-0 text-body-secondary">Safety</a></li>
123+
<li class="nav-item-f mb-2"><a href="#" class="nav-link-f p-0 text-body-secondary">Diversity and
124+
Inclusion</a></li>
125+
</ul>
126+
</div>
127+
128+
</div>
129+
130+
<div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 mx-4 border-top">
131+
<p>© 2024 Fixme Technologies Inc.</p>
132+
<ul class="list-unstyled d-flex">
133+
<li class="ms-3"><a class="link-body-emphasis" href="#">
134+
<svg class="bi" width="24" height="24">
135+
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.284-.009-.425A6.683 6.683 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518A3.301 3.301 0 0 0 15.555 2a6.533 6.533 0 0 1-2.084.797 3.301 3.301 0 0 0-5.617 3.005A9.355 9.355 0 0 1 1.114 2.1a3.3 3.3 0 0 0 1.019 4.396A3.267 3.267 0 0 1 .64 6.575v.034a3.301 3.301 0 0 0 2.644 3.234 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.621-.059 3.305 3.305 0 0 0 3.067 2.281A6.588 6.588 0 0 1 0 13.027 9.286 9.286 0 0 0 5.031 15z"/>
136+
<use xlink:href="#twitter"></use>
137+
</svg>
138+
</a></li>
139+
<li class="ms-3"><a class="link-body-emphasis" href="#">
140+
<svg class="bi" width="24" height="24">
141+
<path d="M8 0C5.79 0 5.555.01 4.69.047a6.153 6.153 0 0 0-2.292.431 4.383 4.383 0 0 0-1.633 1.064A4.394 4.394 0 0 0 .048 4.69 6.154 6.154 0 0 0 0 6.977C0 7.445.002 7.805.005 8.128L.02 9.81v1.154c.003.352.006.729.006 1.104 0 .375-.003.752-.006 1.104v1.154c-.003.326-.005.687-.005 1.155 0 .642.027 1.192.125 1.684.099.492.264.939.518 1.33.22.333.514.616.87.857.33.226.706.41 1.12.556.466.166 1.065.239 1.747.263C5.805 16 6.287 16 8 16c1.713 0 2.195-.002 2.74-.014.682-.024 1.28-.097 1.746-.263a4.432 4.432 0 0 0 1.12-.556c.357-.241.65-.524.87-.857.253-.391.419-.838.518-1.33.098-.492.125-1.042.125-1.684 0-.469-.002-.83-.005-1.155v-1.154c-.003-.352-.006-.729-.006-1.104 0-.375.003-.752.006-1.104V9.81l.015-1.683c.003-.326.005-.687.005-1.155 0-.642-.027-1.192-.125-1.684a4.406 4.406 0 0 0-.518-1.33c-.22-.333-.514-.616-.87-.857a4.438 4.438 0 0 0-1.12-.556 6.163 6.163 0 0 0-1.746-.263C10.195.003 9.713.001 8 .001zm0 1.557c1.65 0 1.914.007 2.586.036.589.026 1.021.102 1.344.231.408.17.706.375.956.624.249.249.453.548.624.956.129.323.205.755.231 1.344.03.672.037.936.037 2.586 0 1.65-.007 1.914-.036 2.586-.026.589-.102 1.021-.231 1.344a2.764 2.764 0 0 1-.624.956 2.784 2.784 0 0 1-.956.624c-.323.129-.755.205-1.344.231-.672.03-.936.037-2.586.037-1.65 0-1.914-.007-2.586-.036-.589-.026-1.021-.102-1.344-.231a2.77 2.77 0 0 1-.956-.624 2.786 2.786 0 0 1-.624-.956c-.129-.323-.205-.755-.231-1.344-.03-.672-.037-.936-.037-2.586 0-1.65.007-1.914.036-2.586.026-.589.102-1.021.231-1.344.17-.408.375-.706.624-.956.249-.249.548-.453.956-.624.323-.129.755-.205 1.344-.231.672-.03.936-.037 2.586-.037zM8 3.292a4.706 4.706 0 1 0 0 9.411 4.706 4.706 0 0 0 0-9.411zm0 1.55a3.156 3.156 0 1 1 0 6.311 3.156 3.156 0 0 1 0-6.311zm4.566-.855a1.088 1.088 0 1 0 0 2.176 1.088 1.088 0 0 0 0-2.176z"/>
142+
<use xlink:href="#instagram"></use>
143+
</svg>
144+
</a></li>
145+
<li class="ms-3"><a class="link-body-emphasis" href="#">
146+
<svg class="bi" width="24" height="24">
147+
<path d="M8 0C3.582 0 0 3.582 0 8c0 4.07 3.065 7.428 7.032 7.931V10.14H5.037V8h1.995V6.392c0-1.973 1.21-3.05 2.963-3.05.84 0 1.562.063 1.77.09v2.053h-1.215c-.952 0-1.137.451-1.137 1.113V8h2.273l-.296 2.14H9.413v5.79C13.35 15.428 16 12.07 16 8c0-4.418-3.582-8-8-8z"/>
148+
<use xlink:href="#facebook"></use>
149+
</svg>
150+
</a></li>
151+
</ul>
152+
</div>
153+
</footer>
154+
</div>
155+
</body>

‎views/service-centre/check-out.php

+390
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,390 @@
1+
2+
<style>
3+
4+
/** {*/
5+
/* box-sizing: border-box;*/
6+
/* margin: 0;*/
7+
/* padding: 0;*/
8+
/*}*/
9+
body {
10+
/*font-family: "Poppins", sans-serif;*/
11+
/*height: 100vh;*/
12+
/*width: 100%;*/
13+
/*margin: 0px auto;*/
14+
/*padding: 50px 0px 0px;*/
15+
/*color: #4E5150;*/
16+
17+
18+
header {
19+
20+
height: 5%;
21+
margin-bottom: 30px;
22+
23+
> h3 {
24+
font-size: 60px;
25+
color: black;
26+
text-transform: uppercase;
27+
font-weight: 500;
28+
}
29+
30+
}
31+
32+
main {
33+
height: 100%;
34+
display: flex;
35+
column-gap: 100px;
36+
margin: 50px;
37+
38+
.checkout-form {
39+
width: 50%;
40+
41+
form {
42+
43+
h6 {
44+
font-size: 12px;
45+
font-weight: 500;
46+
}
47+
48+
.form-control {
49+
margin: 10px 0px;
50+
position: relative;
51+
52+
label:not([for="checkout-checkbox"]) {
53+
display: block;
54+
font-size: 15px;
55+
font-weight: 500;
56+
margin-bottom: 2px;
57+
}
58+
59+
input:not([type="checkbox"]) {
60+
width: 100%;
61+
padding: 10px 10px 10px 40px;
62+
border-radius: 10px;
63+
outline: none;
64+
border: .2px solid #4e515085;
65+
font-size: 12px;
66+
font-weight: 700;
67+
68+
&::placeholder {
69+
font-size: 15px;
70+
font-weight: 500;
71+
}
72+
}
73+
74+
label[for="checkout-checkbox"] {
75+
font-size: 9px;
76+
font-weight: 500;
77+
line-height: 10px;
78+
}
79+
80+
> div {
81+
position: relative;
82+
83+
span.fa {
84+
position: absolute;
85+
top: 50%;
86+
left: 0%;
87+
transform: translate(15px, -50%);
88+
}
89+
}
90+
}
91+
92+
.form-group {
93+
display: flex;
94+
column-gap: 25px;
95+
}
96+
97+
.checkbox-control {
98+
display: flex;
99+
align-items: center;
100+
column-gap: 10px;
101+
}
102+
103+
.form-control-btn {
104+
display: flex;
105+
align-items: center;
106+
justify-content: flex-end;
107+
108+
button {
109+
padding: 10px 25px;
110+
font-size: 10px;
111+
color: #fff;
112+
background: #010336;
113+
border: 0;
114+
border-radius: 7px;
115+
letter-spacing: .5px;
116+
font-weight: 200;
117+
cursor: pointer;
118+
}
119+
}
120+
}
121+
}
122+
123+
.checkout-details {
124+
width: 40%;
125+
126+
.checkout-details-inner {
127+
background: #F2F2F2;
128+
border-radius: 10px;
129+
padding: 20px;
130+
131+
132+
.checkout-lists {
133+
display: flex;
134+
flex-direction: column;
135+
row-gap: 15px;
136+
margin-bottom: 40px;
137+
138+
.card {
139+
width: 100%;
140+
display: flex;
141+
column-gap: 15px;
142+
143+
.card-image {
144+
width: 35%;
145+
146+
img {
147+
width: 100%;
148+
object-fit: fill;
149+
border-radius: 10px;
150+
}
151+
}
152+
153+
.card-details {
154+
display: flex;
155+
flex-direction: column;
156+
157+
.card-name {
158+
font-size: 12px;
159+
font-weight: 500;
160+
}
161+
.card-price {
162+
font-size: 10px;
163+
font-weight: 500;
164+
color: #F2994A;
165+
margin-top: 5px;
166+
167+
span {
168+
color: #4E5150;
169+
text-decoration: line-through;
170+
margin-left: 10px;
171+
}
172+
}
173+
.card-wheel {
174+
margin-top: 17px;
175+
border: .2px solid #4e515085;
176+
width: 90px;
177+
padding: 8px 8px;
178+
border-radius: 10px;
179+
font-size: 12px;
180+
display: flex;
181+
justify-content: space-between;
182+
183+
button {
184+
background: #E0E0E0;
185+
color: #828282;
186+
width: 15px;
187+
height: 15px;
188+
display: flex;
189+
justify-content: center;
190+
align-items: center;
191+
border: 0;
192+
cursor: pointer;
193+
border-radius: 3px;
194+
font-weight: 500;
195+
}
196+
}
197+
}
198+
}
199+
}
200+
201+
.checkout-shipping, .checkout-total {
202+
display: flex;
203+
font-size: 16px;
204+
padding: 5px 0px;
205+
border-top: 1px solid #BDBDBD;
206+
justify-content: space-between;
207+
208+
p {
209+
font-size: 10px;
210+
font-weight: 500;
211+
}
212+
}
213+
}
214+
}
215+
}
216+
217+
footer {
218+
219+
height: 5%;
220+
color: #BDBDBD;
221+
display: -ms-grid;
222+
display: grid;
223+
place-items: center;
224+
font-size: 12px;
225+
226+
a {
227+
text-decoration: none;
228+
color: inherit;
229+
}
230+
231+
}
232+
233+
}
234+
235+
@media screen and (max-width: 1024px) {
236+
body {
237+
width: 80%;
238+
239+
main {
240+
column-gap: 70px;
241+
}
242+
}
243+
}
244+
245+
@media screen and (max-width: 768px) {
246+
body {
247+
width: 92%;
248+
249+
main {
250+
flex-direction: column-reverse;
251+
height: auto;
252+
margin-bottom: 50px;
253+
254+
.checkout-form {
255+
width: 100%;
256+
margin-top: 35px;
257+
}
258+
259+
.checkout-details {
260+
width: 100%;
261+
}
262+
}
263+
264+
footer {
265+
height: 10%;
266+
}
267+
}
268+
}
269+
270+
</style>
271+
272+
<header>
273+
<h3><center>Checkout</center></h3>
274+
</header>
275+
276+
<main>
277+
278+
<section class="checkout-form">
279+
<form action="#!" method="get">
280+
<h6>Contact information</h6>
281+
<div class="form-control">
282+
<label for="checkout-email">E-mail</label>
283+
<div>
284+
<span class="fa fa-envelope"></span>
285+
<input type="email" id="checkout-email" name="checkout-email" placeholder="Enter your email...">
286+
</div>
287+
</div>
288+
<div class="form-control">
289+
<label for="checkout-phone">Phone</label>
290+
<div>
291+
<span class="fa fa-phone"></span>
292+
<input type="tel" name="checkout-phone" id="checkout-phone" placeholder="Enter you phone...">
293+
</div>
294+
</div>
295+
<br>
296+
<h6>Shipping address</h6>
297+
<div class="form-control">
298+
<label for="checkout-name">Full name</label>
299+
<div>
300+
<span class="fa fa-user-circle"></span>
301+
<input type="text" id="checkout-name" name="checkout-name" placeholder="Enter you name...">
302+
</div>
303+
</div>
304+
<div class="form-control">
305+
<label for="checkout-address">Address</label>
306+
<div>
307+
<span class="fa fa-home"></span>
308+
<input type="text" name="checkout-address" id="checkout-address" placeholder="Your address...">
309+
</div>
310+
</div>
311+
<div class="form-control">
312+
<label for="checkout-city">City</label>
313+
<div>
314+
<span class="fa fa-building"></span>
315+
<input type="text" name="checkout-city" id="checkout-city" placeholder="Your city...">
316+
</div>
317+
</div>
318+
<div class="form-group">
319+
<div class="form-control">
320+
<label for="checkout-country">Country</label>
321+
<div>
322+
<span class="fa fa-globe"></span>
323+
<input type="text" name="checkout-country" id="checkout-country" placeholder="Your country..." list="country-list">
324+
<datalist id="country-list">
325+
<option value="India"></option>
326+
<option value="USA"></option>
327+
<option value="Russia"></option>
328+
<option value="Japan"></option>
329+
<option value="Egypt"></option>
330+
</datalist>
331+
</div>
332+
</div>
333+
<div class="form-control">
334+
<label for="checkout-postal">Postal code</label>
335+
<div>
336+
<span class="fa fa-archive"></span>
337+
<input type="numeric" name="checkout-postal" id="checkout-postal" placeholder="Your postal code...">
338+
</div>
339+
</div>
340+
</div>
341+
<div class="form-control checkbox-control">
342+
<input type="checkbox" name="checkout-checkbox" id="checkout-checkbox">
343+
<label for="checkout-checkbox">Save this information for next time</label>
344+
</div>
345+
<div class="form-control-btn">
346+
<a href="/card-details"><button>Continue</button></a>
347+
</div>
348+
</form>
349+
</section>
350+
351+
<section class="checkout-details">
352+
<div class="checkout-details-inner">
353+
<div class="checkout-lists">
354+
<div class="card">
355+
<div class="card-image"><img src="https://rvs-checkout-page.onrender.com/photo1.png" alt=""></div>
356+
<div class="card-details">
357+
<div class="card-name">Vintage Backbag</div>
358+
<div class="card-price">$54.99 <span>$94.99</span></div>
359+
<div class="card-wheel">
360+
<button>-</button>
361+
<span>1</span>
362+
<button>+</button>
363+
</div>
364+
</div>
365+
</div>
366+
<div class="card">
367+
<div class="card-image"><img src="https://rvs-checkout-page.onrender.com/photo2.png" alt=""></div>
368+
<div class="card-details">
369+
<div class="card-name">Levi Shoes</div>
370+
<div class="card-price">$74.99 <span>$124.99</span></div>
371+
<div class="card-wheel">
372+
<button>-</button>
373+
<span>1</span>
374+
<button>+</button>
375+
</div>
376+
</div>
377+
</div>
378+
</div>
379+
<div class="checkout-shipping">
380+
<h6>Shipping</h6>
381+
<p>$19</p>
382+
</div>
383+
<div class="checkout-total">
384+
<h6>Total</h6>
385+
<p>$148.98</p>
386+
</div>
387+
</div>
388+
</section>
389+
390+
</main>

‎views/service-centre/market-place-home.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@
9090
<p class="product-price">Rs. <?php echo htmlspecialchars($product['price']); ?></p>
9191
<p class="product-seller">Sold by: <?php echo htmlspecialchars($product['seller_name']); ?></p>
9292
</div>
93-
<a href="#" class="product-btn">View Details</a>
93+
<a href="/check-out-page" class="product-btn">View Details</a>
9494
</div>
9595
<?php endforeach; ?>
9696
<?php else: ?>

0 commit comments

Comments
 (0)
Please sign in to comment.