Order page

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

README.md

@@ -26,7 +26,7 @@ yarn dev
 B2: Chạy database hoặc làm tiếp theo hướng dẫn của file README.md nhớ mở docker desktop
 ```
 cd database/mysql
-docker compose up -d 
+yar
 ```
 
 B3: Chạy backend

database/mysql/README.md

@@ -9,7 +9,7 @@ docker compose up -d
 Connect with mysql workbench
 ```
 MYSQL_ROOT_PASSWORD: Admin@123
-MYSQL_DATABASE: coolmatedb
+MYSQL_DATABASE0: coolmatedb
 MYSQL_USER: user
 MYSQL_PASSWORD: password
 ```

frontend/src/App.jsx

@@ -2,6 +2,7 @@ import { Route, Routes } from 'react-router-dom';
 import Home from './pages/Home/Home';
 import Login from './pages/Auth/Login';
 import SignUp from './pages/Auth/Signup';
+import Order from './pages/Order/Order'
 import RootLayout from './pages/RootLayout';
 import DetailProduct from './pages/DetailProduct/DetailProduct';
 
@@ -13,6 +14,7 @@ function App() {
         <Route path="/product/:slug" element={<DetailProduct />}></Route>
         <Route path="/login" element={<Login />} />
         <Route path="/signup" element={<SignUp />} />
+        <Route path="/Order" element={<Order/>} />
         {/* <Route path="/explore/:category" element={<ExploreProduct />}></Route>
       <Route path="/checkout" element={<Checkout />}></Route> */}
       </Route>

frontend/src/pages/Order/Order.css

@@ -0,0 +1,190 @@
+/* CSS for checkout page */
+.checkout-page {
+  display: flex;
+  justify-content: space-between;
+  padding: 20px;
+  background-color: #f5f5f5; /* Add a light background color */
+}
+
+.personal-info, .cart-summary {
+  box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Add a subtle shadow for depth */
+  border-radius: 8px; /* Round the corners */
+  background-color: #fff; /* Add a white background color */
+  padding: 20px; /* Add some padding */
+}
+
+.personal-info {
+  width: 45%;
+}
+
+.cart-summary {
+  width: 50%;
+}
+
+.checkout-form {
+  background-color: #f9f9f9;
+  padding: 20px;
+  border-radius: 8px;
+}
+
+.checkout-form h2 {
+  font-size: 24px;
+  color: #333; /* Darker color for better readability */
+  margin-bottom: 20px;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-group label,
+.form-group select {
+  display: inline-block;
+  margin-bottom: 10px;
+  width: calc(33.33% - 10px);
+  vertical-align: top;
+}
+
+.checkout-form .form-group label {
+  font-weight: normal;
+}
+
+.input-field,
+.select-field,
+.textarea-field {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ddd; /* Lighter border color */
+  border-radius: 4px;
+  font-size: 16px;
+  transition: border-color 0.3s ease; /* Transition for smooth effect */
+}
+
+.payment-options {
+  margin-top: 10px;
+}
+
+.payment-options label {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  cursor: pointer;
+}
+
+.payment-options input[type="radio"] {
+  display: none;
+}
+
+.payment-options label::before {
+  content: '';
+  display: inline-block;
+  width: 0.8rem;
+  height: 0.8rem;
+  margin-right: 10px;
+  border: 2px solid #007bff;
+  border-radius: 50%;
+  background-color: #fff;
+}
+
+.payment-options input[type="radio"]:checked + label::before {
+  background-color: #007bff;
+}
+
+.voucher-form {
+  display: flex;
+  align-items: center;
+}
+
+.voucher-form input[type="text"] {
+  flex: 1;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 16px;
+}
+
+.voucher-form button {
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  padding: 15px 30px; /* Increased padding for better click area */
+  border-radius: 4px;
+  font-size: 18px;
+  cursor: pointer;
+  transition: background-color 0.3s ease; /* Transition for smooth effect */
+}
+
+.voucher-form button:hover {
+  background-color: #0056b3; /* Use a darker blue on hover */
+}
+
+.cart-summary h2 {
+  font-size: 24px;
+  margin-bottom: 20px;
+}
+
+.cart-summary ul {
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+}
+
+.cart-summary li {
+  margin-bottom: 15px;
+}
+
+.cart-summary .label {
+  font-weight: bold;
+  margin-right: 10px;
+}
+
+.cart-summary .value {
+  color: #007bff;
+}
+
+.order-summary {
+  background-color: #f9f9f9;
+  padding: 20px;
+  border-radius: 8px;
+}
+
+.order-summary h2 {
+  font-size: 24px;
+  margin-bottom: 20px;
+}
+
+.order-summary ul {
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+}
+
+.order-summary .total {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.order-summary .label {
+  font-weight: bold;
+  margin-right: 10px;
+}
+
+.order-summary .value {
+  color: #007bff;
+}
+
+.checkout-form button[type="submit"] {
+  background-color: #007bff; /* Màu nền mặc định */
+  color: #fff; /* Màu chữ mặc định */
+  padding: 15px 30px; /* Kích thước nút */
+  font-size: 18px; /* Cỡ chữ */
+  border: none; /* Loại bỏ viền */
+  border-radius: 4px; /* Bo góc */
+  cursor: pointer;
+  transition: background-color 0.3s, color 0.3s; /* Hiệu ứng hover */
+}
+
+.checkout-form button[type="submit"]:hover {
+  background-color: #333; /* Màu nền khi di chuột vào */
+  color: #fff; /* Màu chữ khi di chuột vào */
+}