From d78159ac53441acdc2e31f4c5c184208235fa292 Mon Sep 17 00:00:00 2001 From: Karkam Prashanth <116152817+prashanthcool000@users.noreply.github.com> Date: Wed, 2 Sep 2026 12:43:59 +0530 Subject: [PATCH 01/24] Update index.jsp --- src/main/webapp/index.jsp | 3836 +++++++++++++++++++++++++++++-------- 1 file changed, 2996 insertions(+), 840 deletions(-) diff --git a/src/main/webapp/index.jsp b/src/main/webapp/index.jsp index 2018d63482..7b9587b129 100644 --- a/src/main/webapp/index.jsp +++ b/src/main/webapp/index.jsp @@ -1,1032 +1,3188 @@ - - +```jsp +<%@ page language="java" contentType="text/html; charset=UTF-8" + pageEncoding="UTF-8"%> + + + + - - - MyShop — Modern E‑Commerce - - - + + + + + LUXE — Fashion Store + + + + + + + + + + - - - -
- + display: flex; - - -
- -
- - + justify-content: space-between; - -
-
-

Shop by Category

-

Browse through our wide range of products across curated categories.

-
+ align-items: center; -
-
+ margin-bottom: 25px; - -
-
-

Trending Products

-

Popular picks based on recent activity.

-
+ gap: 20px; + } -
-
+ .filter-buttons { - -
-
-

Flash Sale

-

Limited-time offers — don't miss out!

-
+ display: flex; -
- -
-

MacBook Air M2

-

Thin, light and powerful — now with M2 performance.

- -
-
-
0
-
Days
-
-
-
00
-
Hours
-
-
-
00
-
Minutes
-
-
-
00
-
Seconds
-
-
- -
-
$999 $1,199
-
-17%
-
- -

Only 12 items left at this price!

-
- -
-
-
-
+ gap: 8px; - -
-
-

What our customers say

-

Real reviews from verified buyers.

-
+ flex-wrap: wrap; + } -
-
-
★★★★★
-

"Fast shipping and excellent customer support. The product exceeded my expectations!"

-
- -
-
Ava Martin
-
Verified buyer
-
-
-
+ .filter-btn { -
-
★★★★☆
-

"Great selection and the checkout was smooth. Will shop again."

-
- -
-
Michael Lee
-
Frequent buyer
-
-
-
-
-
- - -
- -
-
- - - - - // --- Initialization --- - (function init() { - renderCategories(); - renderProducts(PRODUCTS); - updateCartCount(); - document.getElementById('year').textContent = new Date().getFullYear(); - })(); - - + +``` From fb7fa62b9586130f240a94e87e6f689302800496 Mon Sep 17 00:00:00 2001 From: Karkam Prashanth <116152817+prashanthcool000@users.noreply.github.com> Date: Wed, 2 Sep 2026 12:57:04 +0530 Subject: [PATCH 02/24] Update index.jsp to movie tickets booking --- src/main/webapp/index.jsp | 4512 ++++++++++++++++++++++--------------- 1 file changed, 2706 insertions(+), 1806 deletions(-) diff --git a/src/main/webapp/index.jsp b/src/main/webapp/index.jsp index 7b9587b129..31f6ac3915 100644 --- a/src/main/webapp/index.jsp +++ b/src/main/webapp/index.jsp @@ -1,5 +1,6 @@ ```jsp -<%@ page language="java" contentType="text/html; charset=UTF-8" +<%@ page language="java" + contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> @@ -12,7 +13,7 @@ - LUXE — Fashion Store + CineBook — Movie Ticket Booking - - +.modal.show { + display: flex; +} - +.booking-modal { - + width: 100%; -
+ max-width: 900px; - ✦ FREE SHIPPING ON ORDERS OVER ₹1,999 -   |   - GET 20% OFF YOUR FIRST ORDER + max-height: 90vh; -
+ overflow-y: auto; + background: white; - + border-radius: 14px; -
+ padding: 30px; -
+ position: relative; +} - + position: absolute; + top: 18px; - + height: 35px; + border: 0; - +.booking-header h2 { + font-family: "Playfair Display", serif; -
+ font-size: 34px; +} - + color: var(--gray); + font-size: 13px; +} - - +/* SEAT SCREEN */ - +.screen { + margin: 10px auto 30px; - + max-width: 500px; - + text-align: center; +} - +.screen-line { - + height: 8px; - + background: #ddd; - + border-radius: 50%; - 0 + box-shadow: 0 5px 15px rgba(0,0,0,.15); - + margin-bottom: 8px; +} - -
+.screen span { -
+ color: #999; + font-size: 10px; - + letter-spacing: 2px; +} -
- Home +.seat-layout { - Collections + max-width: 520px; - Shop + margin: auto; +} - New Arrivals - Sale +.seat-row { -
+ display: flex; -
+ justify-content: center; + gap: 7px; + margin-bottom: 8px; +} - -
+.seat { -
+ width: 32px; -
+ height: 28px; -
+ border: 0; - New Season · 2026 Collection + border-radius: 6px 6px 3px 3px; -
+ background: #ddd; -

+ font-size: 9px; - Dress like - you mean it. + cursor: pointer; +} -

-

+.seat:hover { - Discover timeless silhouettes, modern essentials - and statement pieces designed to make every - moment unforgettable. + background: #bbb; +} -

+.seat.selected { -
+ background: var(--red); - + color: white; +} - Shop Collection - +.seat.booked { - + background: #333; + color: white; - + cursor: not-allowed; +} - Explore Styles - +.seat-space { -
+ width: 18px; +} -
-
+/* BOOKING SUMMARY */ -
+.booking-summary { + margin-top: 30px; + border-top: 1px solid var(--border); - + padding-top: 25px; -
+ display: grid; -
+ grid-template-columns: 1fr auto; -
+ gap: 20px; - + align-items: end; +} -
-

Free Shipping

+.summary-details h3 { -

On orders above ₹1,999

+ margin-bottom: 8px; +} -
-
+.summary-details p { + color: var(--gray); -
+ font-size: 13px; - + margin-bottom: 5px; +} -
-

Easy Returns

+.total { -

7 day return policy

+ font-size: 25px; -
+ font-weight: 700; -
+ margin-bottom: 12px; +} -
+.confirm-btn { - + background: var(--red); -
+ color: white; -

Secure Payment

+ border: 0; -

100% secure checkout

+ padding: 13px 25px; -
+ cursor: pointer; -
+ font-weight: 700; +} -
+/* ========================================================= + SUCCESS MESSAGE +========================================================= */ - +.success-message { -
+ text-align: center; -

24/7 Support

+ padding: 50px 20px; -

We're here to help

+ display: none; +} -
-
+.success-message i { -
+ font-size: 55px; -
+ color: #28a745; + margin-bottom: 18px; +} - +.success-message h2 { -
+ font-family: "Playfair Display", serif; -
+ margin-bottom: 8px; +} -
-
- Discover -
+.success-message p { -

- Shop by Style -

+ color: var(--gray); -

- Find something beautiful for every occasion. -

+ font-size: 14px; +} -
+/* ========================================================= + RESPONSIVE +========================================================= */ -
+@media(max-width:1050px) { + .nav { -
+ display: none; + } - Dresses + .mobile-menu { -
+ display: block; + } -

Dresses

+ .movie-grid { - + grid-template-columns: repeat(3,1fr); + } - Shop Now + .search-box { - + grid-template-columns: 1fr 1fr; -
+ } -
+ .search-submit { + padding: 13px; + } -
+ .showtime-layout { - Tops + grid-template-columns: 1fr 1fr; + } -
+ .features { -

Tops

+ grid-template-columns: repeat(2,1fr); + } - + .feature:nth-child(2) { - Shop Now + border-right: 0; + } - + .footer-grid { -
+ grid-template-columns: 1fr 1fr; + } -
+} -
+@media(max-width:700px) { - Party Wear + .header { -
+ height: 65px; + } -

Party Wear

+ .logo { - + font-size: 25px; + } - Shop Now + .location { - + display: none; + } -
+ .hero { -
+ min-height: 580px; + } + .hero h1 { -
+ font-size: 49px; + } - New Arrivals + .booking-search { -
+ margin-top: -25px; + } -

New Arrivals

+ .search-box { - + grid-template-columns: 1fr; - Explore + padding: 15px; + } - + .section { -
+ padding: 60px 0; + } -
+ .section-header { -
+ align-items: flex-start; -
+ flex-direction: column; + } -
+ .section-title { + font-size: 34px; + } + .movie-grid { - + grid-template-columns: repeat(2,1fr); -
+ gap: 14px; + } -
+ .movie-info { -
+ padding: 12px; + } -
- Best Sellers -
+ .movie-name { -

- Trending Now -

+ font-size: 14px; + } -

- The pieces everyone is talking about. -

+ .showtime-layout { -
+ grid-template-columns: 1fr; + } + .showtime-poster { -
+ height: 400px; + } -
+ .showtime-content h2 { - + grid-template-columns: 1fr; + } - + gap: 8px; + } - + .newsletter-form button { - - + padding: 0 15px; + } -
+ .header-actions { -
+ gap: 11px; + } + .header-actions .desktop-only { -
+ display: none; + } -
+ .hero { -
+ background-position: 62% center; + } -
+ .hero h1 { + font-size: 42px; + } + .movie-grid { - + grid-template-columns: 1fr 1fr; + } -
+ .movie-poster { -
+ aspect-ratio: 2 / 2.8; + } -
+ .features { -
+ grid-template-columns: 1fr; + } + .feature { -
+ border-right: 0; -
- Limited Time -
+ border-bottom: 1px solid var(--border); + } -

- The perfect - evening dress. -

+ .footer-grid { -

+ grid-template-columns: 1fr; + } - Elegant lines, premium fabric and - effortless sophistication. Make your - next evening unforgettable. + .booking-modal { -

+ padding: 20px 15px; + } -
+ .seat { - ₹1,999 + width: 27px; - ₹3,499 + height: 25px; -
+ font-size: 8px; + } -
+ .seat-row { - +} -
+ -
+ -
-
+ -
+ +
- + -
+ Book your favorite movies instantly — + Fast, Easy & Secure -
+
-
-
- Just Dropped -
-

- New Collection -

+ -

- Fresh silhouettes for your wardrobe. -

+
-
+
-
+ - Fashion Collection -
+ -
-
+
+ + + +
+ + +
+ + + + Hyderabad
-
+ -

Outerwear

-

Layer up in style

+ -
+ -
+ + + + + + +
- + - + -
+
-
+
+ +
+ + Your Cinema Experience -
- Reviews
-

- Loved by You -

-
+

+ Lights. + Camera. + Action. -
+

-
+

-

- ★★★★★ -
+ Discover the latest blockbusters, choose your + favorite seats and book movie tickets in seconds. -

+

- "The quality is absolutely beautiful. - My dress looked even better in person." -

+
-
- Priya S. -
+ + + Browse Movies + + + + + + + + + Today's Shows + +
+
-
+
-
- ★★★★★ -
+
-

- "Fast delivery, perfect fit and - gorgeous packaging. I'm obsessed!" -

+ -
- Ananya R. -
+
+ +
+ +
+ + +
+ + + +
-
+
-
- ★★★★★ -
+ -

+ + +

+ + +
+ + + +
+ +
@@ -2309,45 +2158,101 @@ - + -
+
- From f73e1d0ce4c420c1f7e4b60b25fdaf583b38e052 Mon Sep 17 00:00:00 2001 From: Karkam Prashanth <116152817+prashanthcool000@users.noreply.github.com> Date: Wed, 2 Sep 2026 13:00:45 +0530 Subject: [PATCH 03/24] Update index.jsp to mobile booking --- src/main/webapp/index.jsp | 4733 ++++++++----------------------------- 1 file changed, 1047 insertions(+), 3686 deletions(-) diff --git a/src/main/webapp/index.jsp b/src/main/webapp/index.jsp index 31f6ac3915..4712281857 100644 --- a/src/main/webapp/index.jsp +++ b/src/main/webapp/index.jsp @@ -1,4088 +1,1449 @@ -```jsp -<%@ page language="java" - contentType="text/html; charset=UTF-8" - pageEncoding="UTF-8"%> - +<%@ page contentType="text/html;charset=UTF-8" language="java" %> - - + - - - CineBook — Movie Ticket Booking + MobileHub - Buy Smartphones - - + + + - - - - - - - - + + -.hero h1 { + - font-family: "Playfair Display", serif; +
- font-size: clamp(48px, 7vw, 80px); + - line-height: 1.05; + - margin-bottom: 20px; -} +
+ -.hero h1 span { +
+ + 0 +
- color: #ff3942; -} +
+
-.hero p { - color: #ddd; + - max-width: 560px; +
- font-size: 16px; +
- margin-bottom: 30px; -} +

+ Find Your
+ Perfect Smartphone +

+

+ Discover the latest smartphones from top brands + with amazing prices and fast delivery. +

-.hero-buttons { +
- display: flex; + - gap: 12px; + - flex-wrap: wrap; -} + +
-.btn { +
- border: 0; +
+ +
- padding: 14px 24px; +
- cursor: pointer; - font-weight: 700; + - display: inline-flex; +
- align-items: center; +
- justify-content: center; +
+

Shop by Brand

+
- gap: 9px; +
- transition: .25s; -} +
+ All +
+
+ Apple +
-.btn-red { +
+ Samsung +
- background: var(--red); +
+ OnePlus +
- color: white; -} +
+ Google +
+
+ Xiaomi +
-.btn-red:hover { +
+ Vivo +
- background: var(--red-dark); +
- transform: translateY(-2px); -} +
+
-.btn-outline { - background: transparent; + - color: white; +
- border: 1px solid #777; -} +
+
-.btn-outline:hover { +

Latest Mobiles

- background: white; + - color: black; -} +
+
-/* ========================================================= - BOOKING SEARCH -========================================================= */ +
-.booking-search { +
- margin-top: -45px; - position: relative; + - z-index: 10; -} +
+
-.search-box { +
- background: white; +
+ +

Fast Delivery

+

Get your smartphone delivered quickly.

+
- padding: 22px; +
+ +

Secure Payment

+

100% secure and protected transactions.

+
- box-shadow: 0 15px 50px rgba(0,0,0,.15); +
+ +

Easy Returns

+

Simple and hassle-free return policy.

+
- display: grid; +
+ +

24/7 Support

+

Our support team is always available.

+
- grid-template-columns: 1.5fr 1fr 1fr auto; +
- gap: 12px; +
- border-radius: 12px; -} +
-.search-field { + - border: 1px solid var(--border); + - border: 1px solid var(--border); - background: white; + - padding: 9px 18px; + - position: relative; -} + + - -``` From 5c811cb20cdd7936105b3b0a1b369ec1d180ec4e Mon Sep 17 00:00:00 2001 From: Karkam Prashanth <116152817+prashanthcool000@users.noreply.github.com> Date: Wed, 2 Sep 2026 13:09:58 +0530 Subject: [PATCH 04/24] Update index.jsp to food --- src/main/webapp/index.jsp | 1506 +++++++++++++++++++++++-------------- 1 file changed, 924 insertions(+), 582 deletions(-) diff --git a/src/main/webapp/index.jsp b/src/main/webapp/index.jsp index 4712281857..7636798521 100644 --- a/src/main/webapp/index.jsp +++ b/src/main/webapp/index.jsp @@ -1,14 +1,18 @@ <%@ page contentType="text/html;charset=UTF-8" language="java" %> + + + - MobileHub - Buy Smartphones + Foodie - Online Food Ordering + @@ -25,74 +29,83 @@ body { font-family: 'Inter', sans-serif; - background: #f5f7fb; - color: #171717; + background: #f8f8f8; + color: #222; } /* ================= HEADER ================= */ header { - background: #111827; - color: white; - padding: 18px 7%; + background: white; + height: 75px; + padding: 0 7%; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1000; + box-shadow: 0 2px 15px rgba(0,0,0,.06); } .logo { - font-size: 25px; + font-size: 27px; font-weight: 800; - color: #fff; + color: #ef4444; } .logo span { - color: #6366f1; + color: #222; } nav { display: flex; - gap: 28px; + gap: 30px; } nav a { - color: #d1d5db; text-decoration: none; + color: #444; font-size: 14px; - font-weight: 500; + font-weight: 600; } nav a:hover { - color: white; + color: #ef4444; } - .header-actions { + .header-right { display: flex; - gap: 15px; align-items: center; + gap: 20px; } - .header-actions i { - cursor: pointer; - font-size: 18px; + .location { + display: flex; + align-items: center; + gap: 7px; + font-size: 13px; + } + + .location i { + color: #ef4444; } - .cart-icon { + .cart { position: relative; + cursor: pointer; + font-size: 20px; } .cart-count { position: absolute; top: -10px; right: -10px; + width: 19px; + height: 19px; + border-radius: 50%; background: #ef4444; color: white; - width: 18px; - height: 18px; - border-radius: 50%; font-size: 10px; display: flex; align-items: center; @@ -102,70 +115,76 @@ /* ================= HERO ================= */ .hero { - background: linear-gradient(120deg, #312e81, #4f46e5, #7c3aed); - color: white; - padding: 70px 7%; + min-height: 470px; + background: + linear-gradient( + rgba(0,0,0,.55), + rgba(0,0,0,.55) + ), + url("https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=1600&q=80"); + + background-size: cover; + background-position: center; + display: flex; - justify-content: space-between; align-items: center; - gap: 40px; + justify-content: center; + + text-align: center; + color: white; + padding: 50px 20px; } .hero-content { - max-width: 600px; + max-width: 750px; } .hero h1 { - font-size: 48px; + font-size: 54px; line-height: 1.1; - margin-bottom: 20px; + margin-bottom: 18px; } .hero p { - color: #e0e7ff; - font-size: 17px; + font-size: 18px; + color: #eee; margin-bottom: 30px; - line-height: 1.7; } .search-box { background: white; - border-radius: 12px; + max-width: 650px; + margin: auto; display: flex; align-items: center; + border-radius: 12px; padding: 6px; - max-width: 600px; } .search-box i { - color: #6b7280; + color: #777; margin-left: 15px; } .search-box input { + flex: 1; border: none; outline: none; - flex: 1; padding: 15px; - font-size: 15px; + font-size: 14px; } .search-box button { - background: #111827; + background: #ef4444; color: white; border: none; - padding: 14px 22px; border-radius: 9px; + padding: 14px 24px; cursor: pointer; - font-weight: 600; - } - - .hero-phone { - font-size: 180px; - opacity: 0.2; + font-weight: 700; } - /* ================= CATEGORY ================= */ + /* ================= CONTAINER ================= */ .container { width: 86%; @@ -177,17 +196,24 @@ padding: 55px 0; } - .section-title { + .section-heading { display: flex; - justify-content: space-between; align-items: center; - margin-bottom: 28px; + justify-content: space-between; + margin-bottom: 25px; } - .section-title h2 { + .section-heading h2 { font-size: 28px; } + .section-heading span { + color: #777; + font-size: 13px; + } + + /* ================= CATEGORIES ================= */ + .categories { display: flex; gap: 15px; @@ -197,186 +223,179 @@ .category { background: white; - border: 1px solid #e5e7eb; - padding: 13px 24px; + border: 1px solid #e5e5e5; border-radius: 30px; - cursor: pointer; + padding: 13px 24px; white-space: nowrap; + cursor: pointer; + font-size: 14px; font-weight: 600; transition: .2s; } .category:hover, .category.active { - background: #4f46e5; + background: #ef4444; + border-color: #ef4444; color: white; - border-color: #4f46e5; } - /* ================= PRODUCTS ================= */ + /* ================= FOOD GRID ================= */ - .product-grid { + .food-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; } - .product-card { + .food-card { background: white; border-radius: 18px; overflow: hidden; - border: 1px solid #e5e7eb; + border: 1px solid #eee; transition: .3s; position: relative; } - .product-card:hover { - transform: translateY(-6px); - box-shadow: 0 15px 35px rgba(0,0,0,.08); + .food-card:hover { + transform: translateY(-5px); + box-shadow: 0 15px 35px rgba(0,0,0,.09); + } + + .food-image { + height: 210px; + position: relative; + overflow: hidden; + } + + .food-image img { + width: 100%; + height: 100%; + object-fit: cover; + transition: .4s; + } + + .food-card:hover .food-image img { + transform: scale(1.08); } - .wishlist { + .favorite { position: absolute; - right: 15px; - top: 15px; + right: 13px; + top: 13px; width: 38px; height: 38px; border-radius: 50%; border: none; background: white; - box-shadow: 0 4px 15px rgba(0,0,0,.1); cursor: pointer; - z-index: 2; + box-shadow: 0 3px 10px rgba(0,0,0,.15); } - .wishlist:hover { + .favorite:hover { color: #ef4444; } - .product-image { - height: 270px; - background: #f8fafc; - display: flex; - align-items: center; - justify-content: center; - padding: 25px; - } - - .product-image img { - width: 100%; - height: 100%; - object-fit: contain; - transition: .3s; - } - - .product-card:hover .product-image img { - transform: scale(1.06); - } - - .product-info { - padding: 20px; + .food-info { + padding: 18px; } - .brand { - color: #6366f1; - font-size: 12px; - font-weight: 700; + .food-category { + color: #ef4444; text-transform: uppercase; + font-size: 11px; + font-weight: 700; } - .product-name { + .food-name { font-size: 18px; font-weight: 700; margin: 7px 0; } - .specs { - color: #6b7280; + .food-description { + color: #777; font-size: 12px; - margin-bottom: 15px; - line-height: 1.6; + line-height: 1.5; + min-height: 36px; } - .rating { - font-size: 13px; - margin-bottom: 12px; + .food-rating { + margin-top: 10px; + font-size: 12px; } - .rating i { + .food-rating i { color: #f59e0b; } - .price-row { + .food-bottom { + margin-top: 15px; display: flex; justify-content: space-between; align-items: center; } - .price { - font-size: 20px; + .food-price { + font-size: 19px; font-weight: 800; } - .old-price { - color: #9ca3af; - text-decoration: line-through; - font-size: 12px; - margin-left: 5px; - } - - .buy-btn { - background: #4f46e5; + .add-btn { + background: #ef4444; color: white; border: none; - padding: 11px 15px; - border-radius: 9px; + padding: 10px 15px; + border-radius: 8px; cursor: pointer; - font-weight: 600; + font-weight: 700; + font-size: 12px; } - .buy-btn:hover { - background: #3730a3; + .add-btn:hover { + background: #dc2626; } - /* ================= FEATURES ================= */ - - .features { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 20px; - } + /* ================= OFFER ================= */ - .feature { - background: white; - padding: 25px; - border-radius: 15px; - text-align: center; + .offer { + background: linear-gradient(110deg, #dc2626, #f97316); + border-radius: 20px; + padding: 35px 45px; + color: white; + display: flex; + justify-content: space-between; + align-items: center; } - .feature i { - font-size: 28px; - color: #4f46e5; - margin-bottom: 15px; + .offer h2 { + font-size: 30px; + margin-bottom: 8px; } - .feature h3 { - font-size: 15px; - margin-bottom: 7px; + .offer p { + color: #ffe4e6; + font-size: 14px; } - .feature p { - color: #6b7280; - font-size: 12px; + .offer button { + border: none; + background: white; + color: #dc2626; + padding: 13px 23px; + border-radius: 9px; + font-weight: 700; + cursor: pointer; } - /* ================= MODAL ================= */ + /* ================= CART MODAL ================= */ .modal { - display: none; position: fixed; inset: 0; background: rgba(0,0,0,.65); - z-index: 2000; + z-index: 3000; + display: none; align-items: center; justify-content: center; padding: 20px; @@ -386,130 +405,161 @@ display: flex; } - .modal-content { + .modal-box { background: white; width: 100%; - max-width: 550px; + max-width: 600px; border-radius: 20px; padding: 30px; - position: relative; max-height: 90vh; overflow-y: auto; + position: relative; } .close { position: absolute; - right: 20px; + right: 22px; top: 18px; font-size: 25px; cursor: pointer; - color: #6b7280; + color: #777; } .modal-title { - font-size: 24px; - margin-bottom: 5px; + font-size: 25px; + margin-bottom: 20px; } - .modal-subtitle { - color: #6b7280; - font-size: 13px; - margin-bottom: 25px; - } + /* ================= CART ITEMS ================= */ - .order-product { + .cart-item { display: flex; - gap: 20px; + gap: 15px; + padding: 15px 0; + border-bottom: 1px solid #eee; align-items: center; - background: #f8fafc; - padding: 15px; - border-radius: 12px; - margin-bottom: 25px; } - .order-product img { - width: 80px; - height: 80px; - object-fit: contain; + .cart-item img { + width: 75px; + height: 65px; + object-fit: cover; + border-radius: 9px; + } + + .cart-item-info { + flex: 1; } - .order-product h3 { + .cart-item-info h4 { + font-size: 14px; margin-bottom: 5px; } - .order-product p { - color: #6366f1; + .cart-item-info p { + color: #ef4444; + font-size: 13px; font-weight: 700; } - .form-group { - margin-bottom: 17px; + .quantity { + display: flex; + align-items: center; + gap: 8px; } - .form-group label { - display: block; - font-size: 13px; - font-weight: 600; - margin-bottom: 7px; + .quantity button { + width: 28px; + height: 28px; + border: 1px solid #ddd; + background: white; + border-radius: 5px; + cursor: pointer; } - .form-group input, - .form-group select { - width: 100%; - padding: 13px; - border: 1px solid #d1d5db; - border-radius: 8px; - outline: none; + .quantity span { + font-size: 13px; + font-weight: 700; } - .form-group input:focus, - .form-group select:focus { - border-color: #6366f1; + .remove { + color: #ef4444; + cursor: pointer; + margin-left: 10px; } - .summary { - background: #f8fafc; - padding: 18px; - border-radius: 12px; - margin: 20px 0; + /* ================= CHECKOUT ================= */ + + .checkout { + margin-top: 25px; } - .summary-row { + .checkout-row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 14px; } - .summary-total { + .total { border-top: 1px solid #ddd; - padding-top: 12px; + padding-top: 15px; + margin-top: 12px; + font-size: 20px; font-weight: 800; - font-size: 18px; } - .confirm-btn { + .checkout-btn { width: 100%; - padding: 15px; - border: none; - background: #4f46e5; + background: #ef4444; color: white; + border: none; + padding: 15px; border-radius: 10px; - font-weight: 700; + margin-top: 20px; cursor: pointer; + font-weight: 700; + } + + .checkout-btn:hover { + background: #dc2626; + } + + /* ================= FORM ================= */ + + .form-group { + margin-bottom: 15px; + } + + .form-group label { + display: block; + font-size: 13px; + font-weight: 600; + margin-bottom: 7px; + } + + .form-group input, + .form-group textarea, + .form-group select { + width: 100%; + padding: 13px; + border: 1px solid #ddd; + border-radius: 8px; + outline: none; + font-family: inherit; } - .confirm-btn:hover { - background: #3730a3; + .form-group textarea { + resize: vertical; + min-height: 80px; } /* ================= FOOTER ================= */ footer { - background: #111827; + background: #181818; color: white; padding: 50px 7%; - margin-top: 30px; } .footer-grid { @@ -524,137 +574,147 @@ footer p, footer a { - color: #9ca3af; + color: #aaa; font-size: 13px; line-height: 2; text-decoration: none; display: block; } + footer a:hover { + color: white; + } + .copyright { - border-top: 1px solid #374151; + border-top: 1px solid #333; margin-top: 35px; padding-top: 20px; - color: #9ca3af; + color: #777; font-size: 12px; } /* ================= RESPONSIVE ================= */ - @media(max-width: 1000px) { + @media(max-width: 1100px) { - .product-grid { + .food-grid { grid-template-columns: repeat(3, 1fr); } - .features { - grid-template-columns: repeat(2, 1fr); - } - - .hero-phone { - display: none; - } } - @media(max-width: 700px) { - - header { - padding: 15px 5%; - } + @media(max-width: 800px) { nav { display: none; } - .hero { - padding: 45px 5%; + .location { + display: none; } .hero h1 { - font-size: 35px; + font-size: 40px; } - .container { - width: 90%; + .food-grid { + grid-template-columns: repeat(2, 1fr); } - .product-grid { - grid-template-columns: repeat(2, 1fr); - gap: 15px; + .offer { + flex-direction: column; + text-align: center; + gap: 20px; } - .product-image { - height: 200px; + .footer-grid { + grid-template-columns: 1fr 1fr; } - .product-info { - padding: 14px; + } + + @media(max-width: 500px) { + + header { + padding: 0 5%; } - .product-name { - font-size: 15px; + .container { + width: 90%; } - .price { - font-size: 16px; + .hero { + min-height: 420px; } - .buy-btn { - padding: 8px 10px; - font-size: 11px; + .hero h1 { + font-size: 32px; } - .features { - grid-template-columns: 1fr; + .hero p { + font-size: 14px; } - .footer-grid { - grid-template-columns: 1fr 1fr; + .search-box input { + min-width: 0; } - } - @media(max-width: 450px) { + .search-box button { + padding: 12px; + } - .product-grid { + .food-grid { grid-template-columns: 1fr; } - .product-image { - height: 280px; + .food-image { + height: 240px; } .footer-grid { grid-template-columns: 1fr; } + } + + +
-
+
+ +
+ + Hyderabad +
+ +
+ + - + + 0 + -
- - 0
@@ -669,13 +729,13 @@

- Find Your
- Perfect Smartphone + Delicious Food,
+ Delivered Fast

- Discover the latest smartphones from top brands - with amazing prices and fast delivery. + Order your favourite meals from the best restaurants + around you.

@@ -685,10 +745,10 @@ + placeholder="Search pizza, burger, biryani..." + onkeyup="searchFood()"> - @@ -696,10 +756,6 @@
-
- -
-
@@ -709,45 +765,49 @@
-
-

Shop by Brand

+
+ +

+ Explore Categories +

+
+ onclick="filterFood('All', this)"> All
- Apple + onclick="filterFood('Pizza', this)"> + 🍕 Pizza
- Samsung + onclick="filterFood('Burger', this)"> + 🍔 Burger
- OnePlus + onclick="filterFood('Biryani', this)"> + 🍛 Biryani
- Google + onclick="filterFood('Indian', this)"> + 🍲 Indian
- Xiaomi + onclick="filterFood('Dessert', this)"> + 🍰 Desserts
- Vivo + onclick="filterFood('Drinks', this)"> + 🥤 Drinks
@@ -757,59 +817,55 @@ - + -
+ - + -
+
-
+
-
- -

Fast Delivery

-

Get your smartphone delivered quickly.

-
+
-
- -

Secure Payment

-

100% secure and protected transactions.

-
+

+ Get 30% OFF +

-
- -

Easy Returns

-

Simple and hassle-free return policy.

-
+

+ Use coupon code FOOD30 on your first order. +

-
- -

24/7 Support

-

Our support team is always available.

+ +
@@ -817,43 +873,99 @@
- + -
@@ -765,49 +709,45 @@
-
- -

- Explore Categories -

- +
+

Shop by Brand

+ onclick="filterBrand('All', this)"> All
- 🍕 Pizza + onclick="filterBrand('Apple', this)"> + Apple
- 🍔 Burger + onclick="filterBrand('Samsung', this)"> + Samsung
- 🍛 Biryani + onclick="filterBrand('OnePlus', this)"> + OnePlus
- 🍲 Indian + onclick="filterBrand('Google', this)"> + Google
- 🍰 Desserts + onclick="filterBrand('Xiaomi', this)"> + Xiaomi
- 🥤 Drinks + onclick="filterBrand('Vivo', this)"> + Vivo
@@ -817,54 +757,58 @@
- + - - + -
+