From 892504126d9eebfa609c7a7d482424df40cebbc2 Mon Sep 17 00:00:00 2001 From: Abdullah-Noor557 Date: Thu, 25 Dec 2025 15:47:33 +0500 Subject: [PATCH] updated frontend --- carts.js | 18 +++++ package.json | 3 +- src/App.css | 174 ++++++++++++++++++++++++++++++++++++----- src/App.js | 35 ++++++--- src/cartItem.js | 25 ++++-- src/cartview.js | 42 +++++++--- src/msgYNModal.js | 29 +++++-- src/shippingOptions.js | 24 +++++- 8 files changed, 292 insertions(+), 58 deletions(-) diff --git a/carts.js b/carts.js index 8b80bd21..1f5a4048 100644 --- a/carts.js +++ b/carts.js @@ -16,6 +16,24 @@ let activeCarts = [ description: "Assorted sizes, 2 cartons", cost: 295, imageUrl: "blackberries.jpg" + }, + { + title: "Delicious Cookies", + description: "Homemade chocolate chip cookies, 1 dozen", + cost: 450, + imageUrl: "cookies.jpg" + }, + { + title: "Organic Blueberries", + description: "Fresh picked, 3 cartons", + cost: 350, + imageUrl: "blackberries.jpg" + }, + { + title: "Gourmet Cookie Box", + description: "Assorted flavors, premium selection", + cost: 599, + imageUrl: "cookies.jpg" } ] }, diff --git a/package.json b/package.json index 958fdf97..7da51be7 100644 --- a/package.json +++ b/package.json @@ -45,5 +45,6 @@ }, "devDependencies": { "supertest": "^6.2.2" - } + }, + "proxy": "http://localhost:3001" } diff --git a/src/App.css b/src/App.css index 350c4001..c223b111 100644 --- a/src/App.css +++ b/src/App.css @@ -1,41 +1,173 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + min-height: 100vh; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + .App { display: flex; flex-direction: column; align-items: center; justify-content: center; + min-height: 100vh; + padding: 40px 20px; } -.App-logo { - height: 40vmin; - pointer-events: none; +.app-container { + background: white; + border-radius: 24px; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); + padding: 40px; + max-width: 900px; + width: 100%; + animation: slideIn 0.5s ease-out; } -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; +@keyframes slideIn { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); } } -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); +.app-header { + text-align: center; + margin-bottom: 30px; +} + +.app-header h1 { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + font-size: 2.5rem; + font-weight: 800; + margin-bottom: 10px; + letter-spacing: -1px; +} + +.app-header p { + color: #666; + font-size: 1.1rem; + font-weight: 500; +} + +.cart-section { + margin-bottom: 30px; +} + +.shipping-section { + background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf3 100%); + border-radius: 16px; + padding: 25px; + margin: 30px 0; + border: 2px solid #e0e6ed; +} + +.shipping-section h4 { + color: #333; + font-size: 1.2rem; + margin-bottom: 15px; + font-weight: 600; +} + +.purchase-button { + width: 100%; + padding: 18px; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; + border: none; + border-radius: 12px; + font-size: 1.2rem; + font-weight: 700; + cursor: pointer; + transition: all 0.3s ease; + box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); + text-transform: uppercase; + letter-spacing: 1px; } -.App-link { - color: #61dafb; +.purchase-button:hover { + transform: translateY(-2px); + box-shadow: 0 6px 25px rgba(102, 126, 234, 0.6); } -@keyframes App-logo-spin { - from { - transform: rotate(0deg); +.purchase-button:active { + transform: translateY(0); +} + +.cart-summary { + background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%); + border-radius: 16px; + padding: 25px; + margin-top: 20px; + border: 2px solid #e0e4ff; +} + +.cart-summary p { + display: flex; + justify-content: space-between; + padding: 10px 0; + color: #444; + font-size: 1.05rem; +} + +.cart-summary hr { + border: none; + border-top: 2px solid #d0d5ff; + margin: 15px 0; +} + +.cart-summary p:last-child { + font-size: 1.4rem; + font-weight: 700; + color: #667eea; + margin-top: 10px; +} + +.cart-items-list { + list-style-type: none; + padding: 0; + margin: 0; +} + +.cart-items-list li { + margin-bottom: 15px; +} + +.loading-message, .error-message { + text-align: center; + padding: 40px; + font-size: 1.2rem; + color: #666; +} + +.error-message { + color: #e74c3c; + font-weight: 600; +} + +@media (max-width: 768px) { + .app-container { + padding: 25px; } - to { - transform: rotate(360deg); + + .app-header h1 { + font-size: 2rem; + } + + .purchase-button { + padding: 15px; + font-size: 1rem; } } diff --git a/src/App.js b/src/App.js index c4b1370b..29c8ec18 100644 --- a/src/App.js +++ b/src/App.js @@ -15,16 +15,33 @@ function App(props) { return ( <>
-

Thank you for shopping with us!

- - - +
({ root: { display: 'flex', + borderRadius: '12px', + overflow: 'hidden', + transition: 'all 0.3s ease', + border: '1px solid #e0e6ed', + '&:hover': { + transform: 'translateY(-4px)', + boxShadow: '0 8px 20px rgba(0, 0, 0, 0.15)', + } }, details: { display: 'flex', flexDirection: 'column', + flex: 1, }, content: { flex: '1 0 auto', + padding: '20px', }, cover: { - height: 100, - width: '10%', + width: 150, + minHeight: 150, + objectFit: 'cover', } })); @@ -26,17 +37,17 @@ export default function CartItem(props) { const classes = useStyles(); return ( - +
- + {props.item.title} - + {props.item.description} - - {(props.item.cost/100).toFixed(2)} + + ${(props.item.cost/100).toFixed(2)}
diff --git a/src/cartview.js b/src/cartview.js index 8d0322ec..9f456311 100644 --- a/src/cartview.js +++ b/src/cartview.js @@ -32,9 +32,17 @@ function CartView(props) { }, [props.cartId]); if (error) { - return (

Failed to retrieve cart ({error.message})

); + return ( +
+

❌ Failed to retrieve cart ({error.message})

+
+ ); } else if (!cart) { - return (

Loading shopping cart...

); + return ( +
+

⏳ Loading shopping cart...

+
+ ); } else { const costs = cart.cartItems.map(a => a.cost); const itemTotal = sum(...costs); @@ -43,8 +51,10 @@ function CartView(props) { return ( <>
-

Shopping Cart

-
    +

    + 🛍️ Your Items +

    +
      {cart.cartItems.map((cartItemData, idx) =>
    • @@ -52,12 +62,24 @@ function CartView(props) { )}
-
-

Items: ${(itemTotal/100).toFixed(2)}

-

Shipping: ${(props.shippingCost/100).toFixed(2)}

-

Tax: ${(tax/100).toFixed(2)}

-
-

Order Total: ${(total/100).toFixed(2)}

+
+

+ Items: + ${(itemTotal/100).toFixed(2)} +

+

+ Shipping: + ${(props.shippingCost/100).toFixed(2)} +

+

+ Tax (10%): + ${(tax/100).toFixed(2)} +

+
+

+ Order Total: + ${(total/100).toFixed(2)} +

); diff --git a/src/msgYNModal.js b/src/msgYNModal.js index e2363baa..3aa559e5 100644 --- a/src/msgYNModal.js +++ b/src/msgYNModal.js @@ -29,18 +29,35 @@ function MsgYNModal(props) { }} {...other} > - Confirmation Of Order + + ✅ Confirmation Of Order + - + {message} - - - diff --git a/src/shippingOptions.js b/src/shippingOptions.js index ae0be2bf..824a19ec 100644 --- a/src/shippingOptions.js +++ b/src/shippingOptions.js @@ -15,7 +15,7 @@ function ShippingOptions(props) { return (
-

Choose your delivery option:

+

🚚 Choose your delivery option:

handleChange(event, value)} + style={{ gap: '10px', flexWrap: 'wrap' }} > - } label="Free 10 day shipping" /> - } label="$5.00 2-day shipping" /> - } label="$20.00 overnight shipping" /> + } + label="🆓 Free 10 day shipping" + style={{ margin: '5px 0' }} + /> + } + label="⚡ $5.00 2-day shipping" + style={{ margin: '5px 0' }} + /> + } + label="🚀 $20.00 overnight shipping" + style={{ margin: '5px 0' }} + />
);