From 2c7f8fc32a4f8f3b5f333f0e7bf39b389da64458 Mon Sep 17 00:00:00 2001 From: Krisha Gandhi Date: Thu, 31 Jul 2025 10:43:58 +0530 Subject: [PATCH 1/8] Add .gitignore to exclude env and node_modules --- .gitignore | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3d247e9 --- /dev/null +++ b/.gitignore @@ -0,0 +1,17 @@ +# Node.js +node_modules/ +.env +.env.local +.DS_Store + +# Logs +logs +*.log +npm-debug.log* + +# Vercel local settings +.vercel + +# Optional: OS or editor specific +.vscode/ +*.swp From a97dcba16086403c2d7280e88688e4acb5ee820c Mon Sep 17 00:00:00 2001 From: Krisha Gandhi Date: Thu, 31 Jul 2025 10:45:28 +0530 Subject: [PATCH 2/8] Delete old files as part of cleanup --- about.html | 231 ------- blog.html | 187 ------ cancel.html | 250 -------- cart.html | 363 ----------- contact.html | 169 ----- index.html | 1258 ------------------------------------ login.html | 300 --------- register.html | 261 -------- script.js | 18 - server.js | 59 -- shop.html | 1149 --------------------------------- sproduct.html | 260 -------- sproduct1.html | 174 ----- sproduct10.html | 247 -------- sproduct11.html | 244 ------- sproduct12.html | 247 -------- sproduct13.html | 247 -------- sproduct14.html | 247 -------- sproduct15.html | 245 ------- sproduct2.html | 260 -------- sproduct3.html | 260 -------- sproduct4.html | 247 -------- sproduct5.html | 247 -------- sproduct6.html | 247 -------- sproduct7.html | 247 -------- sproduct8.html | 247 -------- sproduct9.html | 247 -------- style.css | 1622 ----------------------------------------------- success.html | 289 --------- 29 files changed, 10069 deletions(-) delete mode 100644 about.html delete mode 100644 blog.html delete mode 100644 cancel.html delete mode 100644 cart.html delete mode 100644 contact.html delete mode 100644 index.html delete mode 100644 login.html delete mode 100644 register.html delete mode 100644 script.js delete mode 100644 server.js delete mode 100644 shop.html delete mode 100644 sproduct.html delete mode 100644 sproduct1.html delete mode 100644 sproduct10.html delete mode 100644 sproduct11.html delete mode 100644 sproduct12.html delete mode 100644 sproduct13.html delete mode 100644 sproduct14.html delete mode 100644 sproduct15.html delete mode 100644 sproduct2.html delete mode 100644 sproduct3.html delete mode 100644 sproduct4.html delete mode 100644 sproduct5.html delete mode 100644 sproduct6.html delete mode 100644 sproduct7.html delete mode 100644 sproduct8.html delete mode 100644 sproduct9.html delete mode 100644 style.css delete mode 100644 success.html diff --git a/about.html b/about.html deleted file mode 100644 index e35128e..0000000 --- a/about.html +++ /dev/null @@ -1,231 +0,0 @@ - - - - - - - - STYLÉKA - - - - - - - - - -
-

#KnowUs

-

Where Luxury Meets Simplicity - Discover Our Story

-
- - -
- STYLÉKA Fashion Collection -
-

Who We Are?

-

Welcome to STYLÉKA, where fashion meets sophistication. We're more than just an online store - we're your personal style curator, bringing you carefully selected pieces that speak to your unique fashion sense.

- -

Our Promise to You:

-
-
- -
- On-Time Delivery: Guaranteed prompt delivery with real-time tracking for complete peace of mind. -
-
-
- -
- Easy Returns: Hassle-free 30-day return policy with free shipping on all returns. -
-
-
- -
- 24/7 Support: Our dedicated team is always here to assist with any questions. -
-
-
- -
- Secure Payments: Multiple payment methods with advanced encryption for your security. -
-
-
- -
- Personalized Experience: Curated recommendations tailored to your style preferences. -
-
-
- -
- Premium Packaging: Every order arrives beautifully packaged, perfect for gifting. -
-
-
- -
-
- "At STYLÉKA, we believe that style is a way of saying who you are without having to speak. - Our mission is to make luxury fashion accessible while delivering an exceptional shopping experience - from browse to unbox." -
-
-
-
- - -
-
-
-
50K+
-
Happy Customers
-
-
-
10K+
-
Products Delivered
-
-
-
99%
-
Customer Satisfaction
-
-
-
24/7
-
Customer Support
-
-
-
- - -
-

Experience STYLÉKA on Mobile

-

Download our app for exclusive deals, early access to collections, and personalized shopping experience.

-
- - Download on App Store - - - Get it on Google Play - -
-
- -
-
- -
-
- -
Free Shipping
-
-
- -
Online Order
-
-
- -
Save Money
-
-
- -
Promotions
-
-
- -
Happy Sell
-
-
- -
24/7 Support
-
-
- -
-
-

Join the STYLÉKA Community

-

Be the first to know about new collections, exclusive offers, and style tips delivered to your inbox.

-
-
- - -
-
- -
-
-
-

STYLÉKA

-

Where fashion meets innovation and style transcends boundaries. STYLÉKA is your premier destination for curated fashion that speaks to the modern individual. From streetwear to haute couture, we blend contemporary trends with timeless elegance, offering a shopping experience that's as unique as your personal style. Discover collections that celebrate diversity, sustainability, and the art of self-expression.

-
- -
-

Navigation

- Home - Shop - About - Contact - Blog -
- -
-

Contact

-

Address: Guru Nanak Dev University, Amritsar

-

Phone: (+91)-8507566667

-

Hours: 10:00-18:00, Mon-Sat

-

Follow us

-
- - - - -
-
- -
-

Install App

-
- -
-

Secure Payment Gateways

-
- -
-
-
- -
-

© 2025, Powered By STYLÉKA - Where Fashion Meets Excellence

-
-
- - - - - diff --git a/blog.html b/blog.html deleted file mode 100644 index bd91b25..0000000 --- a/blog.html +++ /dev/null @@ -1,187 +0,0 @@ - - - - - - - - STYLÉKA - - - - - - - - - -
- -

#Read More

- -

Read all Our case studies about the product

- -
- -
-
-
- -
-
-

The Cotton-Jersey Zip-Up here

-

Kickstarter man braid godard coloring book . Reclette Waistcoat selfies yr - wolf chartreuse hexagon irony , godard... -

- CONTINUE READING -
-

13/01

-
-
-
- -
-
-

How to Style A Quiff

-

Kickstarter man braid godard coloring book . Reclette Waistcoat selfies yr - wolf chartreuse hexagon irony , godard... -

- CONTINUE READING -
-

13/04

-
-
-
- -
-
-

Must have Skater-Girl Items

-

Kickstarter man braid godard coloring book . Reclette Waistcoat selfies yr - wolf chartreuse hexagon irony , godard... -

- CONTINUE READING -
-

12/01

-
-
-
- -
-
-

Runway Inspired Trends

-

Kickstarter man braid godard coloring book . Reclette Waistcoat selfies yr - wolf chartreuse hexagon irony , godard... -

- CONTINUE READING -
-

16/01

-
-
-
- -
-
-

AW20 Menswear Trends

-

Kickstarter man braid godard coloring book . Reclette Waistcoat selfies yr - wolf chartreuse hexagon irony , godard... -

- CONTINUE READING -
-

10/03

-
-
- - - -
- 1 - 2 - -
- -
-
-

Sign Up For Newsletter

-

Get E-mail updates about ourlatest shop and special offers.

-
-
- - -
-
- -
-
-
-

STYLÉKA

-

Where fashion meets innovation and style transcends boundaries. STYLÉKA is your premier destination for curated fashion that speaks to the modern individual. From streetwear to haute couture, we blend contemporary trends with timeless elegance, offering a shopping experience that's as unique as your personal style. Discover collections that celebrate diversity, sustainability, and the art of self-expression.

-
- -
-

Navigation

- Home - Shop - About - Contact - Blog -
- -
-

Contact

-

Address: Guru Nanak Dev University, Amritsar

-

Phone: (+91)-8507566667

-

Hours: 10:00-18:00, Mon-Sat

-

Follow us

-
- - - - -
-
- -
-

Install App

-
- -
-

Secure Payment Gateways

-
- -
-
-
- -
-

© 2025 , Powered By STYLÉKA

-
-
- - - - - diff --git a/cancel.html b/cancel.html deleted file mode 100644 index 71dc536..0000000 --- a/cancel.html +++ /dev/null @@ -1,250 +0,0 @@ - - - - - - Payment Failed - - - -
-
-
-
- -
- × -
- -

Payment Not Completed

- -

Oops! Something went wrong with your order. The payment process was not completed or was canceled.

- -
-

Possible reasons:

-

• Payment was canceled

-

• You navigated away from the payment page

-

• There was an issue with the payment gateway

-

• Your session timed out

-
- -

Don't worry, no payment has been processed and your cart items are still saved. You can try again or contact our support team if you need assistance.

- -
- Return to Cart - Contact Support -
-
- - - - diff --git a/cart.html b/cart.html deleted file mode 100644 index a2b1b6f..0000000 --- a/cart.html +++ /dev/null @@ -1,363 +0,0 @@ - - - - My Cart - - - - - - - -

My Cart

- -

Total: ₹0

- -
- - -
-

- - - - - - diff --git a/contact.html b/contact.html deleted file mode 100644 index e590049..0000000 --- a/contact.html +++ /dev/null @@ -1,169 +0,0 @@ - - - - - - - - STYLÉKA - - - - - - - - - -
- -

#Lets Talk

- -

LEAVE A MESSAGE , We love to hear from you!

- -
- -
-
- GET IN TOUCH -

Visit One of Our Agency locations OR Contact Us Today

-

Head Office

-
-
  • - -

    Guru Nanak Dev University Amritsar Punjab

    -
    • -
  • - -

    contact@example.com

    -
    • -
  • - -

    +91-2121212121

    -
    • -
  • - -

    Monday to Saturday : 9:00am to 16:00pm

    -
    • -
    -
    - -
    - -
    -
    - -
    -
    - LEAVE A MESSAGE -

    We Love To Hear From You

    - - - - - - -
    - -
    -
    - -

    John DoeSenior Marketing Manager
    +91-5645564555
    Email: Johndoe@gmail.com

    -
    -
    - -

    William SmithSenior Marketing Manager
    +91-5612654555
    Email: Smithwilliam@gmail.com

    -
    -
    - -

    Emma StoneSenior Marketing Manager
    +91-5645564999
    Email: Emma123E@gmail.com

    -
    -
    -
    - -
    -
    -

    Sign Up For Newsletter

    -

    Get E-mail updates about ourlatest shop and special offers.

    -
    -
    - - -
    -
    - -
    -
    -
    -

    STYLÉKA

    -

    Where fashion meets innovation and style transcends boundaries. STYLÉKA is your premier destination for curated fashion that speaks to the modern individual. From streetwear to haute couture, we blend contemporary trends with timeless elegance, offering a shopping experience that's as unique as your personal style. Discover collections that celebrate diversity, sustainability, and the art of self-expression.

    -
    - -
    -

    Navigation

    - Home - Shop - About - Contact - Blog -
    - -
    -

    Contact

    -

    Address: Guru Nanak Dev University, Amritsar

    -

    Phone: (+91)-8507566667

    -

    Hours: 10:00-18:00, Mon-Sat

    -

    Follow us

    -
    - - - - -
    -
    - -
    -

    Install App

    -
    - -
    -

    Secure Payment Gateways

    -
    - -
    -
    -
    - -
    -

    © 2025 , Powered By STYLÉKA

    -
    -
    - - - - - diff --git a/index.html b/index.html deleted file mode 100644 index 58c272b..0000000 --- a/index.html +++ /dev/null @@ -1,1258 +0,0 @@ - - - - - - - - STYLÉKA - - - - - - - - -
    -
    -

    Trade-in-offer

    -

    Super value deals

    -

    On all products

    -

    Save more with coupons & upto 70% off !

    - -
    -
    - hero-section-image -
    -
    - -
    -
    - free shipping -
    Free Shipping
    -
    -
    - online order -
    Online Order
    -
    -
    - save money -
    Save Money
    -
    -
    - promotions -
    Promotions
    -
    -
    - happy Sell -
    Happy Sell
    -
    -
    - 24/7 Support -
    24/7 Support
    -
    -
    - -
    -

    Featured Products

    -

    New Designs Added

    -
    -
    - -
    - Adidas -
    White tee with black stripes
    -
    - - - - - -
    -

    ₹2000

    -
    -
    -
    - -
    - Zara -
    Printed Shirt
    -
    - - - - - -
    -

    ₹5000

    -
    - -
    -
    - -
    - Gucci -
    Flower print exclusive shirt
    -
    - - - - - -
    -

    ₹14999

    -
    - -
    -
    - -
    - Puma -
    One8 Shoes By Virat
    -
    - - - - - -
    -

    ₹5999

    -
    - -
    -
    - -
    - Puma -
    Ferrari Sports Hoodie
    -
    - - - - - -
    -

    ₹8999

    -
    - -
    -
    - -
    - Zara -
    Dual Color Shirt
    -
    - - - - - -
    -

    ₹4000

    -
    - -
    -
    - -
    - HnM -
    Printed Women Trouser
    -
    - - - - - -
    -

    ₹1599

    -
    - -
    -
    - -
    - HnM -
    Exclusive Purple Women t-shirts
    -
    - - - - - -
    -

    ₹2999

    -
    - -
    -
    -
    - - - - -
    - - -
    - -
    - - - -
    - -
    -
    -

    Sign Up For Newsletter

    -

    Get E-mail updates about ourlatest shop and special offers.

    -
    -
    - - -
    -
    - -
    -
    -
    -

    STYLÉKA

    -

    Where fashion meets innovation and style transcends boundaries. STYLÉKA is your premier destination for curated fashion that speaks to the modern individual. From streetwear to haute couture, we blend contemporary trends with timeless elegance, offering a shopping experience that's as unique as your personal style. Discover collections that celebrate diversity, sustainability, and the art of self-expression.

    -
    - -
    -

    Navigation

    - Home - Shop - About - Contact - Blog -
    - -
    -

    Contact

    -

    Address: Guru Nanak Dev University, Amritsar

    -

    Phone: (+91)-8507566667

    -

    Hours: 10:00-18:00, Mon-Sat

    -

    Follow us

    -
    - - - - -
    -
    - -
    -

    Install App

    -
    - -
    -

    Secure Payment Gateways

    -
    - -
    -
    -
    - -
    -

    © 2025 , Powered By STYLÉKA

    -
    -
    - - - - - diff --git a/login.html b/login.html deleted file mode 100644 index 406913e..0000000 --- a/login.html +++ /dev/null @@ -1,300 +0,0 @@ - - - - - - Login - - - -
    - -
    -

    Login to Your Account

    -
    -
    - - -

    - -
    - - - - - - diff --git a/register.html b/register.html deleted file mode 100644 index 576e2bf..0000000 --- a/register.html +++ /dev/null @@ -1,261 +0,0 @@ - - - - - - Register - - - -
    - -
    -

    Create an Account

    - - - - -

    - -
    - - - - - - diff --git a/script.js b/script.js deleted file mode 100644 index 1d4d482..0000000 --- a/script.js +++ /dev/null @@ -1,18 +0,0 @@ -import { app } from "./firebase-Config"; -console.log("Firebase Initialized:", app); - -const bar = document.getElementById('bar'); -const close = document.getElementById('close'); -const nav = document.getElementById('navbar'); - -if(bar){ - bar.addEventListener('click' , () => { - nav.classList.add('active'); - }) -} - -if(close){ - close.addEventListener('click' , () => { - nav.classList.remove('active'); - }) -} diff --git a/server.js b/server.js deleted file mode 100644 index 3796920..0000000 --- a/server.js +++ /dev/null @@ -1,59 +0,0 @@ -const express = require("express"); -const app = express(); -const stripe = require("stripe")("sk_test_51REOhFECJtYsBmLBlRG39DmeRj54tr3dBaa1DZEoCZ4m7LBoCV5JlZ3bSZsQMYUqJln87KmzhIcOXSNeXDJC7uPo00fkQfN74f"); -const cors = require("cors"); - -// Middleware -app.use(cors()); -app.use(express.json()); - -// Route to create Stripe Checkout session -app.post("/create-checkout-session", async (req, res) => { - // Log the incoming request to check if it’s correct - console.log("Request received:", req.body); - - const { items } = req.body; - - // Ensure the items are valid - if (!items || !Array.isArray(items)) { - return res.status(400).json({ error: "Invalid items format" }); - } - - // Map through items to format them for Stripe - const lineItems = items.map(item => ({ - price_data: { - currency: 'inr', - product_data: { - name: item.title, - }, - unit_amount: item.price * 100, // price in paise - }, - quantity: item.quantity, - })); - - try { - // Create a Stripe Checkout session - const session = await stripe.checkout.sessions.create({ - payment_method_types: ['card'], - line_items: lineItems, - mode: 'payment', - success_url: 'http://localhost:3000/success.html', - cancel_url: 'http://localhost:3000/cancel.html', - }); - - // Respond with session id - res.json({ id: session.id }); - } catch (error) { - console.error("Stripe error:", error); - res.status(500).json({ error: error.message }); - } -}); - -// Start server -const PORT = 4242; -app.listen(PORT, () => { - console.log(`Server running on http://localhost:${PORT}`); -}); - -// cd stripe-backend -// npm start diff --git a/shop.html b/shop.html deleted file mode 100644 index 7da500a..0000000 --- a/shop.html +++ /dev/null @@ -1,1149 +0,0 @@ - - - - - - - - STYLÉKA - Shop - - - - - - - - -
    -

    #stayhome

    -

    Save more with coupons & upto 70% off !

    -
    - -
    -
    -
    - -
    - Adidas -
    White tee with black stripes
    -
    - - - - - -
    -

    ₹2000

    -
    -
    -
    - -
    - Zara -
    Printed Shirt
    -
    - - - - - -
    -

    ₹5000

    -
    -
    -
    - -
    - Gucci -
    Flower print exclusive shirt
    -
    - - - - - -
    -

    ₹14999

    -
    -
    -
    - -
    - Puma -
    One8 Shoes By Virat
    -
    - - - - - -
    -

    ₹5999

    -
    -
    -
    - -
    - Puma -
    Ferrari Sports Hoodie
    -
    - - - - - -
    -

    ₹8999

    -
    -
    -
    - -
    - Zara -
    Dual Color Shirt
    -
    - - - - - -
    -

    ₹4000

    -
    -
    -
    - -
    - HnM -
    Printed Women Trouser
    -
    - - - - - -
    -

    ₹1599

    -
    -
    -
    - -
    - HnM -
    Exclusive Purple Women t-shirts
    -
    - - - - - -
    -

    ₹2999

    -
    -
    - -
    - -
    - H&M -
    Plain Black Shirt
    -
    - - - - - -
    -

    ₹1500

    -
    -
    -
    - -
    - H&M -
    Blue Shirt
    -
    - - - - - -
    -

    ₹2500

    -
    - -
    -
    - -
    - Lacouste -
    Checked Shirt
    -
    - - - - - -
    -

    ₹6000

    -
    - -
    -
    - -
    - Goldstar -
    White Shirt
    -
    - - - - - -
    -

    ₹2000

    -
    - -
    -
    - -
    - LV -
    Designer Shirt
    -
    - - - - - -
    -

    ₹12000

    -
    - -
    -
    - -
    - Kaloster -
    Denim Jacket
    -
    - - - - - -
    -

    ₹3500

    -
    - -
    -
    - -
    - Lacouste -
    Shorts
    -
    - - - - - -
    -

    ₹2600

    -
    - -
    -
    - -
    - Gucci -
    Desert Shirt
    -
    - - - - - -
    -

    ₹26000

    -
    - -
    -
    -
    - -
    - 1 - 2 - -
    - -
    -
    -

    Sign Up For Newsletter

    -

    Get E-mail updates about ourlatest shop and special offers.

    -
    -
    - - -
    -
    - -
    -
    -
    -

    STYLÉKA

    -

    Where fashion meets innovation and style transcends boundaries. STYLÉKA is your premier destination for curated fashion that speaks to the modern individual. From streetwear to haute couture, we blend contemporary trends with timeless elegance, offering a shopping experience that's as unique as your personal style. Discover collections that celebrate diversity, sustainability, and the art of self-expression.

    -
    - -
    -

    Navigation

    - Home - Shop - About - Contact - Blog -
    - -
    -

    Contact

    -

    Address: Guru Nanak Dev University, Amritsar

    -

    Phone: (+91)-8507566667

    -

    Hours: 10:00-18:00, Mon-Sat

    -

    Follow us

    -
    - - - - -
    -
    - -
    -

    Install App

    -
    - -
    -

    Secure Payment Gateways

    -
    - -
    -
    -
    - -
    -

    © 2025 , Powered By STYLÉKA

    -
    -
    - - - - - diff --git a/sproduct.html b/sproduct.html deleted file mode 100644 index 149a6ed..0000000 --- a/sproduct.html +++ /dev/null @@ -1,260 +0,0 @@ - - - - - Product Details - - - - -
    -
    - Product -
    - -
    Men's Fashion T-Shirts
    -
    Incl. of all taxes
    Free delivery
    -
    5000
    - -
    -
    S
    -
    M
    -
    L
    -
    XL
    -
    - - - -
    -
    - -
    -

    You May Also Like

    -
    -
    - Product 1 -

    Flower Print Shirt

    -

    ₹14999

    - -
    -
    - Product 2 -

    Dual Color Shirt

    -

    ₹4000

    - -
    -
    - Product 3 -

    Printed Women Trouser

    -

    ₹1599

    - -
    -
    - Product 4 -

    Exclusive Purple T-Shirt

    -

    ₹2999

    - -
    -
    -
    - - - - - - - - - - diff --git a/sproduct1.html b/sproduct1.html deleted file mode 100644 index 616a074..0000000 --- a/sproduct1.html +++ /dev/null @@ -1,174 +0,0 @@ - - - - - Product Details - - - - -
    -
    - Product -
    - -
    White tee with black stripes
    -
    Incl. of all taxes
    Free delivery
    -
    2000
    - -
    -
    S
    -
    M
    -
    L
    -
    XL
    -
    - - - -
    -
    - - - - - - - - - - diff --git a/sproduct10.html b/sproduct10.html deleted file mode 100644 index 77a3687..0000000 --- a/sproduct10.html +++ /dev/null @@ -1,247 +0,0 @@ - - - - - Product Details - - - - -
    -
    - Product -
    - -
    Checked Shirt
    -
    Incl. of all taxes
    Free delivery
    -
    6000
    - -
    -
    S
    -
    M
    -
    L
    -
    XL
    -
    - - - -
    -
    - -
    -

    You May Also Like

    -
    -
    - Product 1 -

    Men's Fashion T-Shirts

    -

    ₹5000

    - -
    -
    - Product 2 -

    Flower Print Shirt

    -

    ₹14999

    - -
    -
    - Product 3 -

    Dual Color Shirt

    -

    ₹4000

    - -
    -
    - Product 4 -

    Exclusive Purple T-Shirt

    -

    ₹2999

    - -
    -
    -
    - - - - - - - - - - diff --git a/sproduct11.html b/sproduct11.html deleted file mode 100644 index 799ff01..0000000 --- a/sproduct11.html +++ /dev/null @@ -1,244 +0,0 @@ - - - - - Product Details - - - - -
    -
    - Product -
    - -
    White Shirt
    -
    Incl. of all taxes
    Free delivery
    -
    2000
    - -
    -
    S
    -
    M
    -
    L
    -
    XL
    -
    - - - -
    -
    - -
    -

    You May Also Like

    -
    -
    - Product 1 -

    Men's Fashion T-Shirts

    -

    ₹5000

    - -
    -
    - Product 2 -

    Flower Print Shirt

    -

    ₹14999

    - -
    -
    - Product 3 -

    Dual Color Shirt

    -

    ₹4000

    - -
    -
    - Product 4 -

    Exclusive Purple T-Shirt

    -

    ₹2999

    - -
    -
    -
    - - - - - - - - - - diff --git a/sproduct12.html b/sproduct12.html deleted file mode 100644 index 950ca1f..0000000 --- a/sproduct12.html +++ /dev/null @@ -1,247 +0,0 @@ - - - - - Product Details - - - - -
    -
    - Product -
    - -
    Designer Shirt
    -
    Incl. of all taxes
    Free delivery
    -
    12000
    - -
    -
    S
    -
    M
    -
    L
    -
    XL
    -
    - - - -
    -
    - -
    -

    You May Also Like

    -
    -
    - Product 1 -

    Men's Fashion T-Shirts

    -

    ₹5000

    - -
    -
    - Product 2 -

    Flower Print Shirt

    -

    ₹14999

    - -
    -
    - Product 3 -

    Dual Color Shirt

    -

    ₹4000

    - -
    -
    - Product 4 -

    Exclusive Purple T-Shirt

    -

    ₹2999

    - -
    -
    -
    - - - - - - - - - - diff --git a/sproduct13.html b/sproduct13.html deleted file mode 100644 index 988916c..0000000 --- a/sproduct13.html +++ /dev/null @@ -1,247 +0,0 @@ - - - - - Product Details - - - - -
    -
    - Product -
    - -
    Denim Jacket
    -
    Incl. of all taxes
    Free delivery
    -
    3500
    - -
    -
    S
    -
    M
    -
    L
    -
    XL
    -
    - - - -
    -
    - -
    -

    You May Also Like

    -
    -
    - Product 1 -

    Men's Fashion T-Shirts

    -

    ₹5000

    - -
    -
    - Product 2 -

    Flower Print Shirt

    -

    ₹14999

    - -
    -
    - Product 3 -

    Dual Color Shirt

    -

    ₹4000

    - -
    -
    - Product 4 -

    Exclusive Purple T-Shirt

    -

    ₹2999

    - -
    -
    -
    - - - - - - - - - - diff --git a/sproduct14.html b/sproduct14.html deleted file mode 100644 index fbe99e1..0000000 --- a/sproduct14.html +++ /dev/null @@ -1,247 +0,0 @@ - - - - - Product Details - - - - -
    -
    - Product -
    - -
    Shorts
    -
    Incl. of all taxes
    Free delivery
    -
    2600
    - -
    -
    S
    -
    M
    -
    L
    -
    XL
    -
    - - - -
    -
    - -
    -

    You May Also Like

    -
    -
    - Product 1 -

    Men's Fashion T-Shirts

    -

    ₹5000

    - -
    -
    - Product 2 -

    Flower Print Shirt

    -

    ₹14999

    - -
    -
    - Product 3 -

    Dual Color Shirt

    -

    ₹4000

    - -
    -
    - Product 4 -

    Exclusive Purple T-Shirt

    -

    ₹2999

    - -
    -
    -
    - - - - - - - - - - diff --git a/sproduct15.html b/sproduct15.html deleted file mode 100644 index 8e7a88c..0000000 --- a/sproduct15.html +++ /dev/null @@ -1,245 +0,0 @@ - - - - - Product Details - - - - -
    -
    - Product -
    - -
    Desert Shirt
    -
    Incl. of all taxes
    Free delivery
    -
    26000
    - -
    -
    S
    -
    M
    -
    L
    -
    XL
    -
    - - - -
    -
    - -
    -

    You May Also Like

    -
    -
    - Product 1 -

    Men's Fashion T-Shirts

    -

    ₹5000

    - -
    -
    - Product 2 -

    Flower Print Shirt

    -

    ₹14999

    - -
    -
    - Product 3 -

    Dual Color Shirt

    -

    ₹4000

    - -
    -
    - Product 4 -

    Exclusive Purple T-Shirt

    -

    ₹2999

    - -
    -
    -
    - - - - - - - - - - diff --git a/sproduct2.html b/sproduct2.html deleted file mode 100644 index 170de6f..0000000 --- a/sproduct2.html +++ /dev/null @@ -1,260 +0,0 @@ - - - - - Product Details - - - - -
    -
    - Product -
    - -
    Flower print exclusive shirt
    -
    Incl. of all taxes
    Free delivery
    -
    14999
    - -
    -
    S
    -
    M
    -
    L
    -
    XL
    -
    - - - -
    -
    - -
    -

    You May Also Like

    -
    -
    - Product 1 -

    Men's Fashion T-Shirts

    -

    ₹5000

    - -
    -
    - Product 2 -

    Dual Color Shirt

    -

    ₹4000

    - -
    -
    - Product 3 -

    Printed Women Trouser

    -

    ₹1599

    - -
    -
    - Product 4 -

    Exclusive Purple T-Shirt

    -

    ₹2999

    - -
    -
    -
    - - - - - - - - - - diff --git a/sproduct3.html b/sproduct3.html deleted file mode 100644 index f70110f..0000000 --- a/sproduct3.html +++ /dev/null @@ -1,260 +0,0 @@ - - - - - Product Details - - - - -
    -
    - Product -
    - -
    One8 Shoes By Virat
    -
    Incl. of all taxes
    Free delivery
    -
    5999
    - -
    -
    7
    -
    8
    -
    9
    -
    10
    -
    - - - -
    -
    - -
    -

    You May Also Like

    -
    -
    - Product 1 -

    Men's Fashion T-Shirts

    -

    ₹5000

    - -
    -
    - Product 2 -

    Flower Print Shirt

    -

    ₹14999

    - -
    -
    - Product 3 -

    Dual Color Shirt

    -

    ₹4000

    - -
    -
    - Product 4 -

    Exclusive Purple T-Shirt

    -

    ₹2999

    - -
    -
    -
    - - - - - - - - - - diff --git a/sproduct4.html b/sproduct4.html deleted file mode 100644 index 5b641e0..0000000 --- a/sproduct4.html +++ /dev/null @@ -1,247 +0,0 @@ - - - - - Product Details - - - - -
    -
    - Product -
    - -
    Dual Color Shirt
    -
    Incl. of all taxes
    Free delivery
    -
    4000
    - -
    -
    S
    -
    M
    -
    L
    -
    XL
    -
    - - - -
    -
    - -
    -

    You May Also Like

    -
    -
    - Product 1 -

    Men's Fashion T-Shirts

    -

    ₹5000

    - -
    -
    - Product 2 -

    Flower Print Shirt

    -

    ₹14999

    - -
    -
    - Product 3 -

    Dual Color Shirt

    -

    ₹4000

    - -
    -
    - Product 4 -

    Exclusive Purple T-Shirt

    -

    ₹2999

    - -
    -
    -
    - - - - - - - - - - diff --git a/sproduct5.html b/sproduct5.html deleted file mode 100644 index 4811e0c..0000000 --- a/sproduct5.html +++ /dev/null @@ -1,247 +0,0 @@ - - - - - Product Details - - - - -
    -
    - Product -
    - -
    Printed Women Trouser
    -
    Incl. of all taxes
    Free delivery
    -
    1599
    - -
    -
    S
    -
    M
    -
    L
    -
    XL
    -
    - - - -
    -
    - -
    -

    You May Also Like

    -
    -
    - Product 1 -

    Men's Fashion T-Shirts

    -

    ₹5000

    - -
    -
    - Product 2 -

    Flower Print Shirt

    -

    ₹14999

    - -
    -
    - Product 3 -

    Dual Color Shirt

    -

    ₹4000

    - -
    -
    - Product 4 -

    Exclusive Purple T-Shirt

    -

    ₹2999

    - -
    -
    -
    - - - - - - - - - - diff --git a/sproduct6.html b/sproduct6.html deleted file mode 100644 index 83b5f5c..0000000 --- a/sproduct6.html +++ /dev/null @@ -1,247 +0,0 @@ - - - - - Product Details - - - - -
    -
    - Product -
    - -
    Exclusive Purple Women t-shirts
    -
    Incl. of all taxes
    Free delivery
    -
    2999
    - -
    -
    S
    -
    M
    -
    L
    -
    XL
    -
    - - - -
    -
    - -
    -

    You May Also Like

    -
    -
    - Product 1 -

    Men's Fashion T-Shirts

    -

    ₹5000

    - -
    -
    - Product 2 -

    Flower Print Shirt

    -

    ₹14999

    - -
    -
    - Product 3 -

    Dual Color Shirt

    -

    ₹4000

    - -
    -
    - Product 4 -

    Printed Women Trouser

    -

    ₹1599

    - -
    -
    -
    - - - - - - - - - - diff --git a/sproduct7.html b/sproduct7.html deleted file mode 100644 index 8630475..0000000 --- a/sproduct7.html +++ /dev/null @@ -1,247 +0,0 @@ - - - - - Product Details - - - - -
    -
    - Product -
    - -
    Ferrari Sports Hoodie
    -
    Incl. of all taxes
    Free delivery
    -
    8999
    - -
    -
    S
    -
    M
    -
    L
    -
    XL
    -
    - - - -
    -
    - -
    -

    You May Also Like

    -
    -
    - Product 1 -

    Men's Fashion T-Shirts

    -

    ₹5000

    - -
    -
    - Product 2 -

    Flower Print Shirt

    -

    ₹14999

    - -
    -
    - Product 3 -

    Dual Color Shirt

    -

    ₹4000

    - -
    -
    - Product 4 -

    Exclusive Purple T-Shirt

    -

    ₹2999

    - -
    -
    -
    - - - - - - - - - - diff --git a/sproduct8.html b/sproduct8.html deleted file mode 100644 index 16e5896..0000000 --- a/sproduct8.html +++ /dev/null @@ -1,247 +0,0 @@ - - - - - Product Details - - - - -
    -
    - Product -
    - -
    Plain Black Shirt
    -
    Incl. of all taxes
    Free delivery
    -
    1500
    - -
    -
    S
    -
    M
    -
    L
    -
    XL
    -
    - - - -
    -
    - -
    -

    You May Also Like

    -
    -
    - Product 1 -

    Men's Fashion T-Shirts

    -

    ₹5000

    - -
    -
    - Product 2 -

    Flower Print Shirt

    -

    ₹14999

    - -
    -
    - Product 3 -

    Dual Color Shirt

    -

    ₹4000

    - -
    -
    - Product 4 -

    Exclusive Purple T-Shirt

    -

    ₹2999

    - -
    -
    -
    - - - - - - - - - - diff --git a/sproduct9.html b/sproduct9.html deleted file mode 100644 index 6bf742c..0000000 --- a/sproduct9.html +++ /dev/null @@ -1,247 +0,0 @@ - - - - - Product Details - - - - -
    -
    - Product -
    - -
    Blue Shirt
    -
    Incl. of all taxes
    Free delivery
    -
    1500
    - -
    -
    S
    -
    M
    -
    L
    -
    XL
    -
    - - - -
    -
    - -
    -

    You May Also Like

    -
    -
    - Product 1 -

    Men's Fashion T-Shirts

    -

    ₹5000

    - -
    -
    - Product 2 -

    Flower Print Shirt

    -

    ₹14999

    - -
    -
    - Product 3 -

    Dual Color Shirt

    -

    ₹4000

    - -
    -
    - Product 4 -

    Exclusive Purple T-Shirt

    -

    ₹2999

    - -
    -
    -
    - - - - - - - - - - diff --git a/style.css b/style.css deleted file mode 100644 index e03e359..0000000 --- a/style.css +++ /dev/null @@ -1,1622 +0,0 @@ - -@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap'); - -*{ - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: "Play", serif; -} - -h1 { - font-size: 50px; - line-height: 64px; - color: rgb(10, 10, 10); -} - -h2 { - font-size: 46px; - line-height: 54px; - color: black; -} - -h4 { - font-size: 20px; - color: black; -} - -h6 { - font-weight: 700; - font-size: 12px; -} - -p{ - font-size: 16px; - color: rebeccapurple; - margin: 15px 0 20px 0; -} -section{ - margin: 0; -} -.section-p1{ - padding: 40px 80px; -} - -.section-m1{ - margin: 40px 0; -} - -button.normal{ - font-size: 14px; - font-weight: 600; - padding: 15px 30px; - color: #000; - background-color: #fff; - border-radius: 4px; - cursor: pointer; - border: none; - outline: none; - transition: 0.2sec; -} - -button.white{ - font-size: 13px; - font-weight: 600; - padding: 11px 18px; - color: #fff; - background-color: transparent; - cursor: pointer; - border: 1px solid #fff; - outline: none; - transition: 0.2sec; -} -button.green { - font-size: 13px; - font-weight: 600; - padding: 11px 18px; - cursor: pointer; - border: 1px solid #fff; - outline: none; - transition: 0.2s; - background: #088178; - color: #fff; -} -body{ - width: 100%; -} - -/*Header Start */ -#header{ - display: flex; - align-items: center; - justify-content: space-between; - /* font-style: italic; */ - padding: 20px 80px; - background: #E3E6F3; - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); - z-index: 999; - position: sticky; - top: 0; - left: 0; -} - -.site-title{ - font-size: 5em; - font-weight: bold; - color: black; -} - -.logo{ - height: 200px; -} - -#navbar{ - display: flex; - align-items: center; - justify-content: center; -} - -#navbar li{ - list-style: none; - padding: 0 20px; - position: relative; -} - -#navbar li a{ - text-decoration: none; - font-size: 16px; - font-weight: 600; - color: #1a1a1a; - transition: 0.3s ease; -} - -#navbar li a:hover , -#navbar li a.active{ - color: #088178; -} - -#navbar li a.active::after, -#navbar li a:hover::after{ - content: ""; - width: 30%; - height: 2px; - background: #088178; - position: absolute; - bottom: -4px; - left: 20px; -} - -#mobile{ - display: none; - align-items: center; -} - -#close{ - display: none; -} - -/* Home Page */ -#Hero{ - background-image: url("img/61CG8tD+GFL._AC_UF1000_1000_QL80_-removebg-preview.png"); - background-repeat: no-repeat; - /* background-position: right center; */ - background-size: 60%; - background-position: 110%; - padding-top: 60px; - padding-bottom: 40px; - height: 90vh; - width: 100%; - margin-bottom: 0; - padding-left: 50px; - gap: 30px; - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - text-align: center; - -} -.left{ - flex:1; - padding-right: 30px; - text-align: left; -} -.right{ - flex:1; - display: flex; - justify-content: center; - align-items: center; -} -.right img{ - max-width: 100%; - height: 100%; - -} -#Hero h1{ - font-size: 70px; - font-weight: bold; - color: #088178; -} - -#Hero h2{ - font-size: 60px; -} - -#Hero h4{ - font-size: 20px; - padding-bottom:15px ; -} - -#Hero p{ - font-size: 18px; -} - -#Hero button{ - //background-image: url(img/button.png); - background-color: #088178; - color: #fff; - border: 0; - border-radius: 30px; - width: 220px; - padding: 14px 80px 14px 65px; - background-repeat: no-repeat; - cursor: pointer; - font-weight: 700; - font-size: 15px; -} - -#feature{ - display:flex; - align-items: center; - justify-content: space-between; - flex-wrap: wrap; - margin-top:0; - padding-top:0; -} - -#feature .fe-box{ - width: 200px; - text-align: center; - padding: 25px 15px; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); - border: 1px solid #cce7d0; - border-radius: 8px; - margin: 15px; - transition: all 0.3s ease; - background-color: #fff; -} - -#feature .fe-box:hover{ - box-shadow: 0 10px 20px rgba(8, 129, 120, 0.2); - transform: translateY(-4px); - cursor: pointer; -} - -#feature .fe-box img{ - width: 64px; - height: 64px; - object-fit: contain; - margin: 0 auto 10px; - display: block; -} - -#feature .fe-box h6{ - padding: 10px 12px; - border-radius: 4px; - font-size: 0.9rem; - font-weight: 600; - color: #088178; - background-color: #e2f8f6; - display: inline-block; - transition: background-color 0.3s ease; -} -#feature .fe-box:nth-child(1) { - border-left: 4px solid #ffee00ff; -} -#feature .fe-box:nth-child(2) { - border-left: 4px solid #927fff; -} -#feature .fe-box:nth-child(3) { - border-left: 4px solid #ff7f7f; -} -#feature .fe-box:nth-child(4) { - border-left: 4px solid #abe856; -} -#feature .fe-box:nth-child(5) { - border-left: 4px solid #c3782c; -} -#feature .fe-box:nth-child(6) { - border-left: 4px solid #fddde4; -} - -#product1{ - text-align: center; -} - -#product1 .pro-container{ - display: flex; - justify-content: space-between; - padding-top: 20px; - flex-wrap: wrap; -} - -#product1 .pro{ - width: 23%; - min-width: 250px; - padding: 10px 12px; - border : 1px solid #cce7d0; - border-radius: 25px; - cursor: pointer; - box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.02); - margin: 15px 0; - transition: 0.2sec ease; - position: relative; -} - -#product1 .pro:hover{ - box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.06); -} - -#product1 .pro img{ - width: 100%; - border-radius: 20px; -} - -#product1 .pro .des{ - text-align: start; - padding: 10px 0; -} - -#product1 .pro .des span{ - color: #606063; - font-size: 12px; -} - -#product1 .pro .des h5{ - padding-top: 7px; - color: #1a1a1a; - font-size: 14px; -} - -#product1 .pro .des i{ - font-size: 12px; - color: rgb(243, 181, 25); -} - -#product1 .pro .des h4{ - padding-top: 7px; - font-size: 15px; - font-weight: 700; - color: #088178; -} - -#product1 .pro .cart{ - width: 40px; - height: 40px; - line-height: 40px; - border-radius: 50px; - background-color: #e8f6ea; - font-weight: 500; - color: #088178; - border: 1px solid #cce7d0; - position: absolute; - right: 10px; - bottom: 10px; - z-index: 10; - display: flex; - justify-content: center; - align-items: center; - font-size: 20px; -} - -#banner{ - position: relative; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; - width: 100%; - height: 47vh; - background: - linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), - url("images/b33.jpg") ; - background-size: cover; - background-position: center; - border-radius: 10px; - padding: 20px; - margin: 40px 0; - color: #fff; -} - -#banner h3{ - color: #fff; - font-size: 20px; - margin-bottom: 10px; - letter-spacing: 1px; -} - -#banner h2{ - color: #fff; - font-size: 36px; - margin: 10px 0; - line-height: 1.4; - max-width: 90%; -} - -#banner h2 span{ - color: #ef3636; - font-weight: bold; -} -#banner .normal{ - margin-top: 20px; - padding: 12px 30px; - font-size: 16px; - font-weight: 600; - border: none; - border-radius: 30px; - background-color: #fff; - color: #088178; - cursor: pointer; - transition: all 0.3s ease; - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); -} - -#banner .normal:hover { - background-color: #088178; - color: #fff; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); -} -#banner button:hover{ - background: #088178; - color: #fff; -} - -#sm-banner{ - display: flex; - flex-direction: column; - gap: 30px; - width: 100%; - padding: 40px 0; - - -} - -#sm-banner .banner-box{ -display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-start; - background-image: url("images/b3.jpg"); - background-size: cover; - background-position: center; - width: 100%; - max-width: 1200px; - margin: 0 auto; - padding: 40px; - min-height: 350px; - border-radius: 10px; - box-shadow: 0 4px 12px rgba(0,0,0,0.1); - border: 0.7px solid #088178; -} - -#sm-banner .banner-box2 { - background-image: url("images/b4.jpg"); - display: flex; - justify-content: flex-end; - align-items: center; - position: relative; - background-size: cover; - background-position: center; - width: 100%; - margin: 0 auto; - padding: 40px; - min-height: 350px; - border-radius: 10px; - box-shadow: 0 4px 12px rgba(0,0,0,0.1); - border: 0.7px solid #088178; -} - -#sm-banner .rightban { - display: flex; - flex-direction: column; - align-items: flex-end; - text-align: right; - width: 100%; - padding-right: 60px; -} - -#sm-banner .rightban h4, -#sm-banner .rightban h2, -#sm-banner .rightban span { - color: #111; -} - -#sm-banner h4{ - color: #fff; - font-size: 20px; - font-weight: 300; -} - -#sm-banner h2{ - color: #fff; - font-size: 28px; - font-weight: 800; -} - -#sm-banner span{ - color: #fff; - font-size: 14px; - font-weight: 500; - padding-bottom: 15px; -} - -#sm-banner .banner-box:hover button{ - background: #088178; - border: 1px #088178; -} - - -#sm-banner .banner-box2:hover .green { - background: #fff; - color: #088178; - border: 1px solid #088178; - -} - -#banner3{ - display: flex; - justify-content: space-between; - flex-wrap: wrap; - padding: 0 80px; -} - -#banner3 .banner-box{ - display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-start; - background-image: url("images/b16.jpg"); - min-width: 30%; - height: 30vh; - background-size: cover; - background-position: center; - padding: 40px 20px; - margin-bottom: 20px; - border: 1px solid #9b6102ff; - border-radius: 10px; - box-shadow: 0 4px 12px rgba(0,0,0,0.1); -} - -#banner3 .banner-box2{ - background-image: url("images/b17.jpg"); - border: 1px solid #000000ff; - border-radius: 10px; - box-shadow: 0 4px 12px rgba(0,0,0,0.1); -} - -#banner3 .banner-box3{ - background-image: url("images/b18.jpg"); - border: 1px solid #085981ff; - border-radius: 10px; - box-shadow: 0 4px 12px rgba(0,0,0,0.1); -} - -#banner3 h2{ - margin-bottom: 10px; - color: #fff; - font-weight: 900; - font-size: 24px; - text-shadow: 1px 1px 3px rgba(0,0,0,0.3); -} -#banner3 h2.foot{ - color: #000000ff; - margin-bottom: 10px; -} -#banner3 h2.tshirt{ - color: #003366; - margin-bottom: 10px; - } -#banner3 h3{ - font-weight: 800; - font-size: 15px; - text-shadow: 1px 1px 3px rgba(0,0,0,0.3); -} -#banner3 h3{ - color: #ec544e; -} -#banner3 h3.winter{ - color: #5a0b00; -} -#banner3 h3.subtshirt{ - color: #d35400; -} -#newsletter{ - display: flex; - justify-content: space-between; - flex-wrap: wrap; - align-items: center; - background-image: url("img/Banner/b14.png"); - background-repeat: no-repeat; - background-position: 20% 30%; - background-color: #041e42; -} - -#newsletter h4{ - font-size: 22px; - font-weight: 700; - color: #fff; -} - -#newsletter p{ - font-size: 14px; - font-weight: 600; - color: #818ea0; -} - -#newsletter p span{ - color: #ffbd27; -} - -#newsletter .form{ - display: flex; - width: 40%; -} - -#newsletter input{ - height: 3.125rem; - padding: 0 1.25em; - font-size: 14px; - width: 100%; - border : 1px solid transparent; - border-radius: 4px; - outline: none; - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -#newsletter button{ - background-color: #088178; - color: #fff; - white-space: nowrap; - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -/* Enhanced Footer - Dark Theme with Glowing Border */ -footer{ - background: #E6E6FA; /* Changed to lilac color */ - color: white; - padding: 40px 80px; - border-radius: 20px; - margin: 40px 20px 20px 20px; - position: relative; - border: none; - box-shadow: 0 0 30px rgba(230, 230, 250, 0.6), - inset 0 0 30px rgba(230, 230, 250, 0.2); -} - -footer::before { - content: ''; - position: absolute; - top: -3px; - left: -3px; - right: -3px; - bottom: -3px; - background: linear-gradient(45deg, #007bff, #00d4ff, #007bff, #00d4ff); - border-radius: 23px; - z-index: -1; - animation: outerGlow 3s ease-in-out infinite alternate; -} - -.footer-container { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - width: 100%; - background-color: white; - color: #0066cc; - padding: 20px; - border-radius: 10px; - margin: 10px; - position: relative; - border: none; - box-shadow: 0 0 20px rgba(230, 230, 250, 0.5), - inset 0 0 20px rgba(230, 230, 250, 0.15); -} - -.footer-container::before { - content: ''; - position: absolute; - top: -2px; - left: -2px; - right: -2px; - bottom: -2px; - background: linear-gradient(45deg, #007bff, #00d4ff, #007bff); - border-radius: 12px; - z-index: -1; - animation: glow 2s ease-in-out infinite alternate; -} - - - -@keyframes glow { - from { - box-shadow: 0 0 20px rgba(0, 123, 255, 0.5); - } - to { - box-shadow: 0 0 30px rgba(0, 123, 255, 0.8); - } -} - -footer .col{ - display: flex; - flex-direction: column; - align-items: flex-start; - margin-bottom: 20px; - flex: 1; - min-width: 250px; -} - -/* Add spacing between STYLÉKA and Navigation columns */ -footer .col:first-child { - margin-right: 40px; -} - -footer h4{ - font-size: 1.3rem; - padding-bottom: 15px; - color: #007bff; - font-weight: 600; - margin-bottom: 15px; -} - -footer p{ - font-size: 14px; - margin: 5px 0 8px 0; - color: #0066cc; - line-height: 1.6; -} - -footer a{ - font-size: 14px; - text-decoration: none; - color: #0066cc; - margin-bottom: 8px; - transition: all 0.3s ease; -} - -footer a:hover{ - color: #007bff; - transform: translateX(5px); -} - -footer .follow{ - margin-top: 20px; -} - -footer .follow i{ - color: #007bff; - padding-right: 15px; - cursor: pointer; - transition: all 0.3s ease; - font-size: 1.2rem; -} - -footer .follow i:hover{ - transform: scale(1.2); - color: #00d4ff; -} - -.icon a { - color: #0066cc; - padding-right: 15px; - cursor: pointer; - transition: all 0.3s ease; - font-size: 1.2rem; - text-decoration: none; -} - -.icon a:hover { - transform: scale(1.2); - color: #00d4ff; -} - -footer .install .row img{ - border: 1px solid #007bff; - border-radius: 6px; -} - -footer .install img{ - margin: 10px 0 15px 0; -} - -footer .copyright{ - width: 100%; - text-align: center; - margin-top: 30px; - padding-top: 20px; - border-top: 1px solid rgba(0, 123, 255, 0.3); - color: #0066cc; -} - -/* Shop Page */ -#page-header{ - background-image: url("img/Banner/b1.jpg"); - width: 100%; - height: 40vh; - background-size: cover; - display: flex; - justify-content: center; - text-align: center; - flex-direction: column; - padding: 14px; -} - -#page-header h2, -#page-header p{ - color: #fff; -} - -#pagination{ - text-align: center; -} - -#pagination a{ - text-decoration: none; - background-color: #088178; - padding: 15px 20px; - border-radius: 4px; - color: #fff; - font-weight: 600; -} - -#pagination a i{ - font-size: 16px; - font-weight: 600; -} - -/*Single Product */ - -#prodetails{ - display: flex; - margin-top: 20px; -} - -#prodetails .single-pro-image{ - width: 40%; - margin-right: 50px; -} - -.small-img-group{ - display: flex; - justify-content: space-between; -} - -.small-img-col{ - flex-basis : 24%; - cursor : pointer; -} - -#prodetails .single-pro-details{ - width: 50%; - padding-top: 30px; -} - -#prodetails .single-pro-details h4{ - padding: 40px 0 20px 0; -} - -#prodetails .single-pro-details h2{ - font-size: 26px; -} - -#prodetails .single-pro-details select{ - display: block; - padding: 5px 10px; - margin-bottom: 10px; -} - -#prodetails .single-pro-details input{ - width: 50px; - height: 47px; - padding-left: 10px; - font-size: 16px; - margin-right: 10px; -} - -#prodetails .single-pro-details input:focus{ - outline: none; -} - -#prodetails .single-pro-details button{ - background: #088178; - color: #fff; -} - -#prodetails .single-pro-details span{ - line-height: 25px; -} - -/* blog */ - -#page-header.blog-header{ - background-image: url("img/Banner/b19.jpg"); -} - -#blog{ - padding : 150px 150px 0 150px; -} - -#blog .blog-box{ - display: flex; - align-items: center; - width: 100%; - position: relative; - padding-bottom: 90px; -} - -#blog .blog-img{ - width: 35%; - margin-right: 40px; -} - -#blog img{ - width: 100%; - height: 400px; - object-fit: cover; -} - -#blog .blog-details{ - width: 50%; -} - -#blog .blog-details a{ - text-decoration: none; - font-size: 21px; - color: #000; - font-weight: 700; - position: relative; - transition: 0.3s; -} - -#blog .blog-details a ::after{ - content: ""; - width : 50px; - height: 1px; - background-color: #000; - position: absolute; - top: 4px; - right: -60px; -} - -#blog .blog-details a:hover{ - color: #088178; -} - -#blog .blog-box h1{ - position: absolute; - top: -50px; - left: 0; - font-size: 70px; - font-weight: 700; - color: #c9cbce; - z-index: -9; -} - -/* About */ - -#page-header.about-header{ - background-image: url("img/About/banner.png"); -} - -#about-head{ - display: flex; - align-items: center; -} - -#about-head img{ - width: 50%; - height: auto; -} - -#about-head div{ - padding-left: 40px; -} - -#about-app{ - text-align: center; -} - -#about-app .video{ - width: 70%; - height: 100%; - margin: 30px auto 0 auto; -} - -#about-app .video video{ - width: 100%; - height: 100%; - border-radius: 20px; -} - -/* Enhanced About Page Styles */ -.features-list { - margin: 25px 0; -} - -.feature-item { - display: flex; - align-items: flex-start; - margin: 15px 0; - padding: 15px; - background: rgba(227, 230, 243, 0.3); - border-radius: 10px; - transition: all 0.3s ease; -} - -.feature-item:hover { - background: rgba(227, 230, 243, 0.5); - transform: translateX(5px); -} - -.feature-item i { - color: rebeccapurple; - font-size: 20px; - margin-right: 15px; - margin-top: 2px; - min-width: 25px; -} - -.feature-item div { - flex: 1; -} - -.feature-item strong { - color: #333; - display: block; - margin-bottom: 5px; -} - -.mission-statement { - margin: 30px 0; - padding: 25px; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - border-radius: 15px; - color: white; -} - -.mission-statement blockquote { - font-style: italic; - font-size: 18px; - line-height: 1.8; - margin: 0; - position: relative; -} - -.mission-statement blockquote:before { - content: '"'; - font-size: 60px; - position: absolute; - left: -20px; - top: -10px; - color: rgba(255, 255, 255, 0.3); -} - -/* Stats Section */ -#stats-section { - background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); - margin: 60px 0; -} - -.stats-container { - display: flex; - justify-content: space-around; - flex-wrap: wrap; - gap: 30px; -} - -.stat-item { - text-align: center; - padding: 30px 20px; - background: white; - border-radius: 15px; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); - transition: transform 0.3s ease; - min-width: 200px; -} - -.stat-item:hover { - transform: translateY(-10px); -} - -.stat-number { - font-size: 48px; - font-weight: bold; - color: rebeccapurple; - margin-bottom: 10px; -} - -.stat-label { - font-size: 16px; - color: #666; - font-weight: 500; -} - -/* Enhanced App Section */ -#about-app { - text-align: center; - background: rgba(227, 230, 243, 0.2); - border-radius: 20px; - margin: 40px 0; -} - -#about-app h1 { - margin-bottom: 15px; - color: #333; -} - -#about-app p { - font-size: 18px; - margin-bottom: 30px; - max-width: 600px; - margin-left: auto; - margin-right: auto; -} - -.app-buttons { - display: flex; - justify-content: center; - gap: 20px; - margin: 30px 0; - flex-wrap: wrap; -} - -.app-download-btn { - transition: transform 0.3s ease; -} - -.app-download-btn:hover { - transform: scale(1.05); -} - -.app-download-btn img { - height: 60px; - border-radius: 10px; -} - -/* Responsive Design for About Page Enhancements */ -@media (max-width: 768px) { - .stats-container { - flex-direction: column; - align-items: center; - } - - .stat-item { - width: 100%; - max-width: 300px; - } - - .feature-item { - flex-direction: column; - text-align: center; - } - - .feature-item i { - margin-bottom: 10px; - margin-right: 0; - } - - .mission-statement blockquote:before { - display: none; - } - - .app-buttons { - flex-direction: column; - align-items: center; - } -} - -/* Enhanced Social Media Icons */ -.follow .icon a { - color: #222; - transition: all 0.3s ease; - display: inline-block; - padding: 10px; - border-radius: 50%; - margin: 0 5px; -} - -.follow .icon a:hover { - transform: translateY(-3px); - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); -} - -.follow .icon a:hover .fa-facebook { - color: #3b5998; -} - -.follow .icon a:hover .fa-twitter { - color: #1da1f2; -} - -.follow .icon a:hover .fa-instagram { - color: #e4405f; -} - -.follow .icon a:hover .fa-pinterest-p { - color: #bd081c; -} - -.follow .icon a:hover .fa-youtube { - color: #ff0000; -} - -/* Contact */ - -#contact-details{ - display: flex; - align-items: center; - justify-content: space-between; -} - -#contact-details .details{ - width: 40%; -} - -#contact-details .details span , -#form-details form span{ - font-size: 12px; -} - -#contact-details .details h2 , -#form-details form h2{ - font-size: 40px; - line-height: 35px; - padding: 20px 0; -} - -#contact-details .details h3{ - font-size: 16px; - padding-bottom: 15px; -} - -#contact-details .details li{ - list-style: none; - display: flex; - padding: 10px 0; -} - -#contact-details .details li i{ - font-size: 14px; - padding-right: 22px; -} - -#contact-details .details li p{ - margin: 0; - font-size: 14px; -} - -#contact-details .map{ - width: 55%; - height: 400px; -} - -#contact-details .map iframe{ - width: 100%; - height: 100%; -} - -#form-details{ - display: flex; - justify-content: space-between; - margin: 30px; - padding: 80px; - border: 1px solid #e1e1e1; -} - -#form-details form{ - width: 65%; - display: flex; - flex-direction: column; - align-items: flex-start; -} - -#form-details form input , -#form-details form textarea{ - width: 100%; - padding: 12px 15px; - outline: none; - margin-bottom: 20px; - border: 1px solid #e1e1e1; -} - -#form-details form button{ - background-color: #088178; - color: #fff; -} - -#form-details .people div{ - margin-bottom: 25px; - display: flex; - align-items: flex-start; -} - -#form-details .people div img{ - width: 65px; - height: 65px; - object-fit: cover; - margin-right: 15px; -} - -#form-details .people div p{ - margin: 0; - font-size: 13px; - line-height: 25px; -} - -#form-details .people div p span{ - display: block; - font-size: 16px; - font-weight: 600; - color: #000; -} - -/* Start Media Query */ - -@media (max-width : 799px) { - .section-p1 { - padding: 40px 40px; - } - #navbar { - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: flex-start; - position: fixed; - top: 0; - right: -300px; - height: 100vh; - width: 300px; - background-color: #E3E6F3; - box-shadow: 0 40px 60px rgba(0 , 0 , 0 , 0.1); - padding: 80px 0 0 10px; - transition: 0.3s ; - } - - #navbar.active{ - right: 0px; - } - - #navbar li{ - margin-bottom: 25px; - } - - #mobile{ - display: flex; - align-items: center; - } - - #mobile i{ - color: #1a1a1a; - font-size: 24px; - padding-left: 20px; - } - - #close { - display: initial; - position: absolute; - top: 30px; - left: 30px; - color: #222; - font-size: 24px; - } - - #lg-bag{ - display: none; - } - - #Hero { - height: 50vh; - padding-left: 20px; - background-position: top 0px left 100px; - background-size: cover; - background-repeat: no-repeat; - } - - #Hero h1{ - font-size: 28px; - } - - #Hero h2{ - font-size: 24px; - } - - #Hero h4{ - font-size: 22px; - } - - #Hero p{ - font-size: 18px; - } - - #feature { - justify-content: center; - } - - #feature .fe-box { - margin: 15px 15px; - } - - #product1 .pro-container { - justify-content: center; - } - - #product1 .pro { - margin: 15px; - } - #banner { - height: 25vh; - } - #banner h2{ - font-size:20px; - line-height: 1.3; - padding: 20px 10px; - } - #banner h3{ - font-size: 14px; - } - #banner .normal{ - padding: 8px 20px; - font-size: 14px; - } - #sm-banner .banner-box { - min-width: 100%; - height: 30vh; - } - #banner3 { - padding: 0 40px; - } - #banner3 .banner-box { - width: 28%; - } - #newsletter .form { - width: 70%; - } - - /* Contact Page */ - #form-details { - padding: 40px; - } -} - -@media (max-width : 477px){ - .site-title { - font-size: 1.5em; - } - #Hero { - height: 50vh; - padding-left: 20px; - background-position: top 0px left 100px; - background-size: cover; - background-repeat: no-repeat; - } - .section-p1 { - padding: 20px; - } - #header { - padding: 10px 20px; - } - #Hero h1 { - font-size: 24px; - } - #Hero h2 { - font-size: 22px; - } - #Hero { - padding: 0 20px; - background-position: top 0 left 20px; - } - #feature { - justify-content: space-between; - } - #feature .fe-box { - width: 155px; - margin: 0 0 15px 0; - } - #product1 .pro { - width: 90%; - } - #banner { - height: auto; - padding: 30px 10px; - } - #banner h2 { - font-size: 20px; - padding: 10px 0; - } - #banner h3{ - font-size: 12px; - margin-bottom: 6px; - } - #banner .normal { - padding: 6px 18px; - font-size: 12px; - margin-top: 10px; - border-radius: 20px; - white-space: nowrap; - - } - #sm-banner .banner-box { - height: 40vh; - } - #sm-banner .banner-box2 { - margin-top: 20px; - } - #banner3 { - padding: 0 20px; - } - #banner3 .banner-box { - width: 90%; - } - #newsletter .form { - width: 100%; - } - #newsletter { - padding: 40px 20px; - } - footer .copyright { - text-align: start; - } - - /* Single Product */ - #prodetails { - display: flex; - flex-direction: column; - } - #prodetails .single-pro-image { - width: 100%; - margin-right: 0px; - } - #prodetails .single-pro-details { - width: 100%; - - } - - /* Blog page */ - #blog { - padding: 100px 20px 0 20px; - } - #blog .blog-box { - display: flex; - flex-direction: column; - align-items: flex-start; - } - - #blog .blog-img { - width: 100%; - margin-right: 0px; - margin-bottom: 30px; - } - - #blog .blog-details { - width: 100%; - } - - /* About Page */ - - #about-head { - flex-direction: column; - } - - #about-head img { - width: 100%; - } - - #about-head div { - padding-left: 0px; - } - - #about-app .video { - width: 100%; - } - - /* Contact Page */ - #contact-details { - flex-direction: column; - } - - #contact-details .details { - width: 100%; - margin-bottom: 30px; - } - - #contact-details .details h2, #form-details form h2 { - font-size: 30px; - } - - #contact-details .map { - width: 100%; - } - - #form-details { - margin: 10px; - padding: 30px 10px; - flex-wrap: wrap; - } - - #form-details form { - width: 100%; - margin-bottom: 30px; - } - - /* #prodetails1 { - display: flex; - flex-direction: column; - } - - #prodetails1 .single-pro-image1 { - width: 40%; - margin-right: 50px; - } */ -} diff --git a/success.html b/success.html deleted file mode 100644 index 1abe857..0000000 --- a/success.html +++ /dev/null @@ -1,289 +0,0 @@ - - - - - - Order Success - - - -
    -
    - L -
    -

    Order Placed Successfully!

    -

    Thank you for your purchase. Your order has been received and is being processed.

    - -
    -

    Order Number: ORD-2025-04-16-7892

    -

    Date: April 16, 2025

    -

    Estimated Delivery: April 20-23, 2025

    -
    - -

    We've sent a confirmation email with all the details to your registered email address.

    - -
    - Back to Cart - Continue Shopping -
    -
    - - - - From d986980f49c197ac224a4b2ddbbef3740a84b81b Mon Sep 17 00:00:00 2001 From: Krisha Gandhi Date: Thu, 31 Jul 2025 10:49:30 +0530 Subject: [PATCH 3/8] Add public and api folders with chatbot files --- api/chatbot.js | 57 ++ public/about.html | 231 ++++++ public/blog.html | 187 +++++ public/cancel.html | 250 +++++++ public/cart.html | 363 +++++++++ public/chatbot.css | 469 ++++++++++++ public/chatbot.js | 178 +++++ public/contact.html | 169 +++++ public/index.html | 1292 ++++++++++++++++++++++++++++++++ public/login.html | 300 ++++++++ public/register.html | 261 +++++++ public/script.js | 18 + public/server.js | 59 ++ public/shop.html | 1149 ++++++++++++++++++++++++++++ public/sproduct.html | 260 +++++++ public/sproduct1.html | 174 +++++ public/sproduct10.html | 247 ++++++ public/sproduct11.html | 244 ++++++ public/sproduct12.html | 247 ++++++ public/sproduct13.html | 247 ++++++ public/sproduct14.html | 247 ++++++ public/sproduct15.html | 245 ++++++ public/sproduct2.html | 260 +++++++ public/sproduct3.html | 260 +++++++ public/sproduct4.html | 247 ++++++ public/sproduct5.html | 247 ++++++ public/sproduct6.html | 247 ++++++ public/sproduct7.html | 247 ++++++ public/sproduct8.html | 247 ++++++ public/sproduct9.html | 247 ++++++ public/style.css | 1622 ++++++++++++++++++++++++++++++++++++++++ public/success.html | 289 +++++++ 32 files changed, 10807 insertions(+) create mode 100644 api/chatbot.js create mode 100644 public/about.html create mode 100644 public/blog.html create mode 100644 public/cancel.html create mode 100644 public/cart.html create mode 100644 public/chatbot.css create mode 100644 public/chatbot.js create mode 100644 public/contact.html create mode 100644 public/index.html create mode 100644 public/login.html create mode 100644 public/register.html create mode 100644 public/script.js create mode 100644 public/server.js create mode 100644 public/shop.html create mode 100644 public/sproduct.html create mode 100644 public/sproduct1.html create mode 100644 public/sproduct10.html create mode 100644 public/sproduct11.html create mode 100644 public/sproduct12.html create mode 100644 public/sproduct13.html create mode 100644 public/sproduct14.html create mode 100644 public/sproduct15.html create mode 100644 public/sproduct2.html create mode 100644 public/sproduct3.html create mode 100644 public/sproduct4.html create mode 100644 public/sproduct5.html create mode 100644 public/sproduct6.html create mode 100644 public/sproduct7.html create mode 100644 public/sproduct8.html create mode 100644 public/sproduct9.html create mode 100644 public/style.css create mode 100644 public/success.html diff --git a/api/chatbot.js b/api/chatbot.js new file mode 100644 index 0000000..a924add --- /dev/null +++ b/api/chatbot.js @@ -0,0 +1,57 @@ +import 'dotenv/config'; + +export default async function handler(req, res) { + if (req.method !== 'POST') { + return res.status(405).json({ error: 'Only POST requests allowed' }); + } + + try { + const body = req.body || (await new Promise((resolve, reject) => { + let data = ''; + req.on('data', chunk => data += chunk); + req.on('end', () => resolve(JSON.parse(data))); + req.on('error', reject); + })); + + const { messages } = body; + + if (!messages || !Array.isArray(messages) || messages.length === 0) { + return res.status(400).json({ error: 'Messages array is required' }); +} + + const response = await fetch("https://openrouter.ai/api/v1/chat/completions", { + method: "POST", + headers: { + "Authorization": `Bearer ${process.env.OPENROUTER_API_KEY}`, + "Content-Type": "application/json", + "HTTP-Referer": "https://wander-wise-smart-routes-hidden-gems-travel-smarter-b7vtijzkc.vercel.app/", + "X-Title": "Styleka Fashion Assistant" + }, + body: JSON.stringify({ + model: "openai/gpt-4o-mini", + messages: [ + { + role: "system", + content: `You are Styleka, a helpful and friendly fashion assistant for an e-commerce clothing site. +You help users with sizing, return policies, offers, order status, and outfit recommendations based on current trends or occasion. +Keep your tone stylish, brief, and confident.` + }, + ...messages + ] + }), + }); + + const result = await response.json(); + console.log("OpenRouter API response:", result); + + if (!result.choices || result.choices.length === 0) { + return res.status(500).json({ error: "No response from model" }); + } + + res.status(200).json({ reply: result.choices[0].message.content }); + + } catch (error) { + console.error('Error:', error); + res.status(500).json({ error: 'Something went wrong.' }); + } +} diff --git a/public/about.html b/public/about.html new file mode 100644 index 0000000..406538e --- /dev/null +++ b/public/about.html @@ -0,0 +1,231 @@ + + + + + + + + STYLÉKA + + + + + + + + + +
    +

    #KnowUs

    +

    Where Luxury Meets Simplicity - Discover Our Story

    +
    + + +
    + STYLÉKA Fashion Collection +
    +

    Who We Are?

    +

    Welcome to STYLÉKA, where fashion meets sophistication. We're more than just an online store - we're your personal style curator, bringing you carefully selected pieces that speak to your unique fashion sense.

    + +

    Our Promise to You:

    +
    +
    + +
    + On-Time Delivery: Guaranteed prompt delivery with real-time tracking for complete peace of mind. +
    +
    +
    + +
    + Easy Returns: Hassle-free 30-day return policy with free shipping on all returns. +
    +
    +
    + +
    + 24/7 Support: Our dedicated team is always here to assist with any questions. +
    +
    +
    + +
    + Secure Payments: Multiple payment methods with advanced encryption for your security. +
    +
    +
    + +
    + Personalized Experience: Curated recommendations tailored to your style preferences. +
    +
    +
    + +
    + Premium Packaging: Every order arrives beautifully packaged, perfect for gifting. +
    +
    +
    + +
    +
    + "At STYLÉKA, we believe that style is a way of saying who you are without having to speak. + Our mission is to make luxury fashion accessible while delivering an exceptional shopping experience + from browse to unbox." +
    +
    +
    +
    + + +
    +
    +
    +
    50K+
    +
    Happy Customers
    +
    +
    +
    10K+
    +
    Products Delivered
    +
    +
    +
    99%
    +
    Customer Satisfaction
    +
    +
    +
    24/7
    +
    Customer Support
    +
    +
    +
    + + +
    +

    Experience STYLÉKA on Mobile

    +

    Download our app for exclusive deals, early access to collections, and personalized shopping experience.

    +
    + + Download on App Store + + + Get it on Google Play + +
    +
    + +
    +
    + +
    +
    + +
    Free Shipping
    +
    +
    + +
    Online Order
    +
    +
    + +
    Save Money
    +
    +
    + +
    Promotions
    +
    +
    + +
    Happy Sell
    +
    +
    + +
    24/7 Support
    +
    +
    + +
    +
    +

    Join the STYLÉKA Community

    +

    Be the first to know about new collections, exclusive offers, and style tips delivered to your inbox.

    +
    +
    + + +
    +
    + +
    +
    +
    +

    STYLÉKA

    +

    Where fashion meets innovation and style transcends boundaries. STYLÉKA is your premier destination for curated fashion that speaks to the modern individual. From streetwear to haute couture, we blend contemporary trends with timeless elegance, offering a shopping experience that's as unique as your personal style. Discover collections that celebrate diversity, sustainability, and the art of self-expression.

    +
    + +
    +

    Navigation

    + Home + Shop + About + Contact + Blog +
    + +
    +

    Contact

    +

    Address: Guru Nanak Dev University, Amritsar

    +

    Phone: (+91)-8507566667

    +

    Hours: 10:00-18:00, Mon-Sat

    +

    Follow us

    +
    + + + + +
    +
    + +
    +

    Install App

    +
    + +
    +

    Secure Payment Gateways

    +
    + +
    +
    +
    + +
    +

    © 2025, Powered By STYLÉKA - Where Fashion Meets Excellence

    +
    +
    + + + + + diff --git a/public/blog.html b/public/blog.html new file mode 100644 index 0000000..bd91b25 --- /dev/null +++ b/public/blog.html @@ -0,0 +1,187 @@ + + + + + + + + STYLÉKA + + + + + + + + + +
    + +

    #Read More

    + +

    Read all Our case studies about the product

    + +
    + +
    +
    +
    + +
    +
    +

    The Cotton-Jersey Zip-Up here

    +

    Kickstarter man braid godard coloring book . Reclette Waistcoat selfies yr + wolf chartreuse hexagon irony , godard... +

    + CONTINUE READING +
    +

    13/01

    +
    +
    +
    + +
    +
    +

    How to Style A Quiff

    +

    Kickstarter man braid godard coloring book . Reclette Waistcoat selfies yr + wolf chartreuse hexagon irony , godard... +

    + CONTINUE READING +
    +

    13/04

    +
    +
    +
    + +
    +
    +

    Must have Skater-Girl Items

    +

    Kickstarter man braid godard coloring book . Reclette Waistcoat selfies yr + wolf chartreuse hexagon irony , godard... +

    + CONTINUE READING +
    +

    12/01

    +
    +
    +
    + +
    +
    +

    Runway Inspired Trends

    +

    Kickstarter man braid godard coloring book . Reclette Waistcoat selfies yr + wolf chartreuse hexagon irony , godard... +

    + CONTINUE READING +
    +

    16/01

    +
    +
    +
    + +
    +
    +

    AW20 Menswear Trends

    +

    Kickstarter man braid godard coloring book . Reclette Waistcoat selfies yr + wolf chartreuse hexagon irony , godard... +

    + CONTINUE READING +
    +

    10/03

    +
    +
    + + + +
    + 1 + 2 + +
    + +
    +
    +

    Sign Up For Newsletter

    +

    Get E-mail updates about ourlatest shop and special offers.

    +
    +
    + + +
    +
    + +
    +
    +
    +

    STYLÉKA

    +

    Where fashion meets innovation and style transcends boundaries. STYLÉKA is your premier destination for curated fashion that speaks to the modern individual. From streetwear to haute couture, we blend contemporary trends with timeless elegance, offering a shopping experience that's as unique as your personal style. Discover collections that celebrate diversity, sustainability, and the art of self-expression.

    +
    + +
    +

    Navigation

    + Home + Shop + About + Contact + Blog +
    + +
    +

    Contact

    +

    Address: Guru Nanak Dev University, Amritsar

    +

    Phone: (+91)-8507566667

    +

    Hours: 10:00-18:00, Mon-Sat

    +

    Follow us

    +
    + + + + +
    +
    + +
    +

    Install App

    +
    + +
    +

    Secure Payment Gateways

    +
    + +
    +
    +
    + +
    +

    © 2025 , Powered By STYLÉKA

    +
    +
    + + + + + diff --git a/public/cancel.html b/public/cancel.html new file mode 100644 index 0000000..71dc536 --- /dev/null +++ b/public/cancel.html @@ -0,0 +1,250 @@ + + + + + + Payment Failed + + + +
    +
    +
    +
    + +
    + × +
    + +

    Payment Not Completed

    + +

    Oops! Something went wrong with your order. The payment process was not completed or was canceled.

    + +
    +

    Possible reasons:

    +

    • Payment was canceled

    +

    • You navigated away from the payment page

    +

    • There was an issue with the payment gateway

    +

    • Your session timed out

    +
    + +

    Don't worry, no payment has been processed and your cart items are still saved. You can try again or contact our support team if you need assistance.

    + +
    + Return to Cart + Contact Support +
    +
    + + + + diff --git a/public/cart.html b/public/cart.html new file mode 100644 index 0000000..a2b1b6f --- /dev/null +++ b/public/cart.html @@ -0,0 +1,363 @@ + + + + My Cart + + + + + + + +

    My Cart

    +
      +

      Total: ₹0

      + +
      + + +
      +

      + + + + + + diff --git a/public/chatbot.css b/public/chatbot.css new file mode 100644 index 0000000..3889491 --- /dev/null +++ b/public/chatbot.css @@ -0,0 +1,469 @@ +/* --- CHATBOT STYLES --- */ +/* This file is now correctly mapped to your main styles.css variables for a perfect theme match. */ + +.chatbot-toggler { + position: fixed; + bottom: 30px; + right: 30px; + width: 50px; + height: 50px; + /* Uses your main app's gradient for the button */ + background: #4d2d5e; + color: red; + border: none; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + z-index: 1001; + transition: var(--transition); + box-shadow: 0 5px 15px rgba(0,0,0,0.15); +} +.chatbot-toggler:hover { + transform: translateY(-4px) scale(1.1); + box-shadow: 0 8px 20px rgba(0,0,0,0.2); +} +body.show-chatbot .chatbot-toggler { + transform: rotate(90deg); +} +.chatbot-toggler span { + position: absolute; + transition: opacity 0.2s, transform 0.2s; +} +.chatbot-toggler span:last-child, +body.show-chatbot .chatbot-toggler span:first-child { + opacity: 0; + transform: rotate(-90deg); +} +body.show-chatbot .chatbot-toggler span:last-child { + opacity: 1; + transform: rotate(0deg); +} + +/* Chatbot Window */ +.chatbot { + position: fixed; + right: 35px; + bottom: 90px; + width: 420px; + height: 500px; + + background: #fff; + border-radius: 15px; + box-shadow: 0 0 128px 0 rgba(0,0,0,0.1), + 0 32px 64px -48px rgba(0,0,0,0.5); + transition: all 0.1s ease; + + /* Animation and visibility handling */ + opacity: 0; + pointer-events: none; + transform: scale(0.5); + transform-origin: bottom right; + + /* ✅ FIX: Proper flex layout */ + display: flex; + flex-direction: column; /* Stack header, chatbox, and input vertically */ + + overflow: hidden; /* Don't scroll the outer container */ + z-index: 999; +} + + +body.show-chatbot .chatbot { + opacity: 1; + pointer-events: auto; + transform: scale(1); +} + +.chatbot header { + background: #088178; + color: #fff; + padding: 16px 0; + text-align: center; + position: relative; /* Keeps it in the normal flow */ + z-index: 2; /* Ensures it's above the chatbox */ +} + +.chatbot header h2 { + color: white; + font-size: 1.4rem; + margin: 0; +} + +.chatbot header .close-btn { + position: absolute; + right: 15px; + top: 50%; + transform: translateY(-50%); + cursor: pointer; +} + +/* ✅ MAIN FIX: Proper scrolling setup for chatbox */ +.chatbot .chatbox { + /* ✅ Main Fix 2: Make the chatbox grow to fill available space */ + flex: 1; + overflow-y: auto; + padding: 30px 20px 10px; /* Adjusted padding, no large bottom value needed */ +} + + +/* ✅ Webkit scrollbar styling for better appearance */ +.chatbot .chatbox::-webkit-scrollbar { + width: 6px; +} + +.chatbot .chatbox::-webkit-scrollbar-track { + background: #e2f8f6; + border-radius: 3px; +} + +.chatbot .chatbox::-webkit-scrollbar-thumb { + background: #088178; + border-radius: 3px; +} + +.chatbot .chatbox::-webkit-scrollbar-thumb:hover { + background:#088178; +} + +/* ✅ Chat messages container */ +.chatbox .chat-messages { + display: flex; + flex-direction: column; + gap: 15px; + min-height: min-content; /* ✅ Allow content to determine height */ +} + +.chatbox .chat { + display: flex; + list-style: none; + margin: 20px 0; + padding: 0; + word-wrap: break-word; /* ✅ Break long words */ + overflow-wrap: break-word; /* ✅ Modern alternative */ +} + +.chatbox .outgoing { + justify-content: flex-end; +} + +.chatbox .incoming { + display: flex; + align-items: flex-start; /* aligns icon and text top-aligned */ + gap: 10px; /* space between icon and text */ +} + +.bot-message-content { + display: flex; + flex-direction: column; /* stack message and buttons vertically */ + gap: 6px; /* small gap between text and preview buttons */ +} + + + +.chatbox .incoming span { + width: 32px; + height: 32px; + background: #E3E6F3; + color: #088178; + text-align: center; + line-height: 32px; + border-radius: 4px; + margin: 0 10px 0 0; + align-self: flex-start; /* ✅ Align to top for long messages */ + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; /* ✅ Prevent avatar from shrinking */ +} + +.chatbox .chat p { + padding: 12px 16px; + border-radius: 10px; + max-width: 75%; + font-size: 0.95rem; + white-space: pre-wrap; + word-wrap: break-word; /* ✅ Break long words */ + overflow-wrap: break-word; + margin: 0; /* ✅ Remove default margin */ + line-height: 1.4; /* ✅ Better readability */ +} + +.chatbox .outgoing p { + background: #088178; + color: #fff; + border-radius: 10px 10px 0 10px; + margin-left: auto; /* ✅ Push to right */ +} + +.chatbox .incoming p { + background: #E3E6F3; + color: #1a1a1a; + border-radius: 10px 10px 10px 0; +} + +/* ✅ Chat Input - Fixed positioning */ +.chatbot .chat-input { + display: flex; + gap: 5px; + /* ✅ Main Fix 3: The input is now a normal flex item, not absolutely positioned */ + padding: 10px 20px; + background: #fff; + border-top: 1px solid #cce7d0; +} + + +.chat-input textarea { + flex: 1; + height: 55px; + border: none; + outline: none; + resize: none; + background: transparent; + color:#1a1a1a; + font-size: 0.95rem; + padding: 16px 15px 16px 0; + font-family: inherit; +} + +.chat-input textarea::placeholder { + color:#606063; + opacity: 0.7; +} + +/* Button styling */ +.chat-input button { + align-self: flex-end; + color: #088178; + cursor: pointer; + height: 55px; + display: flex; + align-items: center; + font-size: 1.7rem; + border: none; + background: none; +} + +.chat-input button:hover { + color: #065c58; +} + +/* Send button logic */ +.chat-input #send-btn { + opacity: 0; + pointer-events: none; + transform: scale(0); + transition: all 0.2s ease; +} + +.chat-input textarea:valid ~ #send-btn { + opacity: 1; + pointer-events: auto; + transform: scale(1); +} + +/* ✅ Loading indicator for when bot is typing */ +.chatbox .typing-indicator { + display: flex; + align-items: center; + padding: 12px 16px; + background: rebeccapurple; + border-radius: 10px 10px 10px 0; + max-width: 75%; + margin: 0; +} + +.typing-indicator .dots { + display: flex; + gap: 4px; +} + +.typing-indicator .dot { + width: 8px; + height: 8px; + background: rebeccapurple; + border-radius: 50%; + animation: typing 1.4s infinite ease-in-out; +} + +.typing-indicator .dot:nth-child(2) { + animation-delay: 0.2s; +} + +.typing-indicator .dot:nth-child(3) { + animation-delay: 0.4s; +} + +body.show-chatbot { + overflow: hidden; +} +@keyframes typing { + 0%, 60%, 100% { + transform: translateY(0); + opacity: 0.5; + } + 30% { + transform: translateY(-10px); + opacity: 1; + } +} + +/* Floating buttons */ +.floating-action, +.chatbot-toggler { + width: 50px; + height: 50px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + cursor: pointer; + box-shadow: 0 5px 15px rgba(0,0,0,0.15); + position: fixed; + right: 30px; + z-index: 1001; + background: var(--accent-primary); + color: white; + transition: var(--transition); +} + +.floating-action:hover, +.chatbot-toggler:hover { + transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(0,0,0,0.2); +} + +.floating-action { + bottom: 100px; + z-index: 1002; +} + +.chatbot-toggler { + bottom: 30px; + z-index: 1001; +} + +.floating-action i, +.chatbot-toggler span, +.chatbot-toggler i { + font-size: 24px; +} + +body.show-chatbot .floating-action { + display: none; +} + +/* Focus states for accessibility */ +:is(button, textarea):focus-visible { + outline: 2px solid #088178;; + outline-offset: 2px; +} + +/* Responsive design */ +@media (max-width: 490px) { + .chatbot { + right: 0; + bottom: 0; + width: 100%; + height: 100%; + max-height: 100vh; + border-radius: 0; + } + + .chatbot .chatbox { + padding: 15px; + } + + .chatbox .chat p { + max-width: 85%; + font-size: 0.9rem; + } + + .chat-input { + padding: 10px 15px; + } +} + +@media (max-width: 320px) { + .chatbox .chat p { + max-width: 90%; + padding: 10px 12px; + } +} + +.preview-button-container { + display: flex; + flex-direction: column; /* Stack buttons vertically */ + gap: 10px; /* Space between buttons */ + margin-top: 8px; /* Space above container */ +} + +.preview-button { + width: 100%; /* Make buttons full width of container */ + padding: 10px 15px; + background-color: #088178; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + font-weight: 600; + transition: background-color 0.3s ease; + text-align: center; +} + +.preview-button:hover { + background-color: #5566cc; +} + +.chatbot, .chatbot * { + box-sizing: border-box; +} + +body.dark-mode .chatbot { + background-color: #121212; + color: #eee; +} + +body.dark-mode .chatbot .chatbox { + background-color: transparent; /* or #121212 if needed */ + color: #eee; +} + +body.dark-mode .chatbot .chatbox .chat.incoming p { + background-color: #1e1e1e; + color: #ddd; +} + +body.dark-mode .chatbot .chatbox .chat.outgoing p { + background-color: #2a2a2a; + color: #ccc; +} + +/* Buttons inside chatbot */ +body.dark-mode .preview-button-container button.preview-button { + background-color: #333; + color: #eee; + border: 1px solid #555; +} + +/* Scrollbar thumb */ +body.dark-mode .chatbot .chatbox::-webkit-scrollbar-thumb { + background-color: #555; +} + +body.dark-mode #chat-input textarea { + background-color: #1e1e1e; /* dark background */ + color: #eee; /* light text */ + border-color: #444; /* subtle border color if applicable */ +} + +body.dark-mode #chat-input textarea::placeholder { + color: #999; /* lighter placeholder text */ +} + +body.dark-mode .chatbot .chat-input { + background-color: #1e1e1e; /* Sets a dark background for the input bar */ + border-top: 1px solid #333; /* A darker top border */ +} \ No newline at end of file diff --git a/public/chatbot.js b/public/chatbot.js new file mode 100644 index 0000000..dc06676 --- /dev/null +++ b/public/chatbot.js @@ -0,0 +1,178 @@ +document.addEventListener("DOMContentLoaded", () => { + const chatbotToggler = document.querySelector(".chatbot-toggler"); + const closeBtn = document.querySelector(".chatbot .close-btn"); + const chatbox = document.getElementById("chat-window"); + const chatInput = document.getElementById("chat-input"); + const sendChatBtn = document.querySelector("#send-btn"); + const chatForm = document.getElementById("chat-form"); + + chatInput.addEventListener("keydown", (e) => { + if (e.key === "Enter" && !e.shiftKey) { + e.preventDefault(); // Prevent adding a newline + chatForm.requestSubmit(); // Trigger form submit event + } + }); + + const darkModeToggle = document.getElementById('dark-mode-toggle'); + if (darkModeToggle) { + darkModeToggle.addEventListener('click', () => { + document.body.classList.toggle('dark-mode'); + }); + } + + const chatHistory = [ + { + role: "system", + content: ` + You are Styleka Assistant, a friendly and knowledgeable fashion and shopping expert for an e-commerce site. + + When a user asks about clothes, footwear, accessories, styling tips, or order help, provide smart, helpful replies like a real fashion stylist and shopping assistant. + + You can: + - Recommend outfits based on occasions (e.g., "What should I wear to a wedding?") + - Help find specific items (e.g., "Show me black boots under ₹3000") + - Offer style advice based on trends + - Answer questions about size guides, return policies, delivery time, etc. + - Suggest complete looks from Styleka's product range + + Be casual, confident, warm — like a cool stylist who's also great with online shopping. + `.trim() + } +]; + +const tabMap = { + "new arrivals": "new-arrivals", + "best sellers": "best-sellers", + "offers": "offers", + "my orders": "orders", + "return policy": "returns" +}; + + chatForm.addEventListener("submit", e => { + e.preventDefault(); + handleChat(); + }); + + chatbotToggler.addEventListener("click", () => { + document.body.classList.toggle("show-chatbot"); + }); + closeBtn.addEventListener("click", () => { + document.body.classList.remove("show-chatbot"); + }); + + const createChatLi = (message, className) => { + const li = document.createElement("li"); + li.classList.add("chat", className); + + if (className === "incoming") { + li.innerHTML = ` + smart_toy +
      +

      ${message}

      +
      + `; + } else { + li.innerHTML = `

      ${message}

      `; + } + + return li; +}; + + + const handleChat = async () => { + const userMessage = chatInput.value.trim(); + if (!userMessage) return; + + chatInput.value = ""; + chatbox.appendChild(createChatLi(userMessage, "outgoing")); + chatbox.appendChild(createChatLi("Thinking...", "incoming")); + chatbox.scrollTop = chatbox.scrollHeight; + + chatHistory.push({ role: "user", content: userMessage }); + + chatInput.disabled = true; + sendChatBtn.disabled = true; + + try { + const response = await fetch('/api/chatbot', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ messages: chatHistory }) + }); + + + const data = await response.json(); + const botReply = data.reply || "Sorry, no reply."; + chatHistory.push({ role: "assistant", content: botReply }); + chatbox.lastChild.querySelector("p").textContent = botReply; + chatbox.scrollTop = chatbox.scrollHeight; + + // After updating bot reply text in chat window: + const previewContainer = document.createElement('div'); + previewContainer.className = 'preview-button-container'; + +const lowerUserMessage = userMessage.toLowerCase(); +const showAllButtons = lowerUserMessage.includes("list of functionalities") + || lowerUserMessage.includes("features") + || lowerUserMessage.includes("what can you do"); + +if (showAllButtons) { + for (const [keyword, tabId] of Object.entries(tabMap)) { + const btn = document.createElement('button'); + btn.textContent = `Go to ${keyword.charAt(0).toUpperCase() + keyword.slice(1)}`; + btn.className = 'preview-button'; + btn.type = "button"; + btn.addEventListener('click', () => { + switchTab(tabId); + document.body.classList.remove('show-chatbot'); + }); + previewContainer.appendChild(btn); + } +} else { + const lowerReply = botReply.toLowerCase(); + const fashionKeywords = ["return", "returns", "size", "sizing", "offer", "discount", "order", "orders", "recommend", "recommendation", "trending", "popular"]; + + if (fashionKeywords.some(word => lowerReply.includes(word))) { + for (const [keyword, tabId] of Object.entries(tabMap)) { + const btn = document.createElement('button'); + btn.textContent = `Explore ${keyword.charAt(0).toUpperCase() + keyword.slice(1)}`; + btn.className = 'preview-button'; + btn.type = "button"; + btn.addEventListener('click', () => { + switchTab(tabId); + document.body.classList.remove('show-chatbot'); + }); + previewContainer.appendChild(btn); + } + } +} + + + // Append buttons if any were created + if (previewContainer.childElementCount > 0) { + chatbox.lastChild.querySelector('.bot-message-content').appendChild(previewContainer); + } + + chatbox.scrollTop = chatbox.scrollHeight; + + } catch (error) { + chatbox.lastChild.querySelector("p").textContent = + "Oops, something went wrong."; + console.error("Fetch error:", error); + } finally { + chatInput.disabled = false; + sendChatBtn.disabled = false; + chatInput.focus(); + } + }; + function switchTab(tabId) { + const tab = document.getElementById(tabId); + if (tab) { + tab.scrollIntoView({ behavior: 'smooth' }); + } +} + +// 🔥 Make it globally accessible +window.switchTab = switchTab; + +}); diff --git a/public/contact.html b/public/contact.html new file mode 100644 index 0000000..e590049 --- /dev/null +++ b/public/contact.html @@ -0,0 +1,169 @@ + + + + + + + + STYLÉKA + + + + + + + + + +
      + +

      #Lets Talk

      + +

      LEAVE A MESSAGE , We love to hear from you!

      + +
      + +
      +
      + GET IN TOUCH +

      Visit One of Our Agency locations OR Contact Us Today

      +

      Head Office

      +
      +
    • + +

      Guru Nanak Dev University Amritsar Punjab

      +
      • +
    • + +

      contact@example.com

      +
      • +
    • + +

      +91-2121212121

      +
      • +
    • + +

      Monday to Saturday : 9:00am to 16:00pm

      +
      • +
      +
      + +
      + +
      +
      + +
      +
      + LEAVE A MESSAGE +

      We Love To Hear From You

      + + + + + + +
      + +
      +
      + +

      John DoeSenior Marketing Manager
      +91-5645564555
      Email: Johndoe@gmail.com

      +
      +
      + +

      William SmithSenior Marketing Manager
      +91-5612654555
      Email: Smithwilliam@gmail.com

      +
      +
      + +

      Emma StoneSenior Marketing Manager
      +91-5645564999
      Email: Emma123E@gmail.com

      +
      +
      +
      + +
      +
      +

      Sign Up For Newsletter

      +

      Get E-mail updates about ourlatest shop and special offers.

      +
      +
      + + +
      +
      + +
      +
      +
      +

      STYLÉKA

      +

      Where fashion meets innovation and style transcends boundaries. STYLÉKA is your premier destination for curated fashion that speaks to the modern individual. From streetwear to haute couture, we blend contemporary trends with timeless elegance, offering a shopping experience that's as unique as your personal style. Discover collections that celebrate diversity, sustainability, and the art of self-expression.

      +
      + +
      +

      Navigation

      + Home + Shop + About + Contact + Blog +
      + +
      +

      Contact

      +

      Address: Guru Nanak Dev University, Amritsar

      +

      Phone: (+91)-8507566667

      +

      Hours: 10:00-18:00, Mon-Sat

      +

      Follow us

      +
      + + + + +
      +
      + +
      +

      Install App

      +
      + +
      +

      Secure Payment Gateways

      +
      + +
      +
      +
      + +
      +

      © 2025 , Powered By STYLÉKA

      +
      +
      + + + + + diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..6e7cfbc --- /dev/null +++ b/public/index.html @@ -0,0 +1,1292 @@ + + + + + + + + STYLÉKA + + + + + + + + + + + +
      +
      +

      Trade-in-offer

      +

      Super value deals

      +

      On all products

      +

      Save more with coupons & upto 70% off !

      + +
      +
      + hero-section-image +
      +
      + +
      +
      + free shipping +
      Free Shipping
      +
      +
      + online order +
      Online Order
      +
      +
      + save money +
      Save Money
      +
      +
      + promotions +
      Promotions
      +
      +
      + happy Sell +
      Happy Sell
      +
      +
      + 24/7 Support +
      24/7 Support
      +
      +
      + +
      +

      Featured Products

      +

      New Designs Added

      +
      +
      + +
      + Adidas +
      White tee with black stripes
      +
      + + + + + +
      +

      ₹2000

      +
      +
      +
      + +
      + Zara +
      Printed Shirt
      +
      + + + + + +
      +

      ₹5000

      +
      + +
      +
      + +
      + Gucci +
      Flower print exclusive shirt
      +
      + + + + + +
      +

      ₹14999

      +
      + +
      +
      + +
      + Puma +
      One8 Shoes By Virat
      +
      + + + + + +
      +

      ₹5999

      +
      + +
      +
      + +
      + Puma +
      Ferrari Sports Hoodie
      +
      + + + + + +
      +

      ₹8999

      +
      + +
      +
      + +
      + Zara +
      Dual Color Shirt
      +
      + + + + + +
      +

      ₹4000

      +
      + +
      +
      + +
      + HnM +
      Printed Women Trouser
      +
      + + + + + +
      +

      ₹1599

      +
      + +
      +
      + +
      + HnM +
      Exclusive Purple Women t-shirts
      +
      + + + + + +
      +

      ₹2999

      +
      + +
      +
      +
      + + + + +
      + + +
      + +
      + + + +
      + +
      +
      +

      Sign Up For Newsletter

      +

      Get E-mail updates about ourlatest shop and special offers.

      +
      +
      + + +
      +
      + +
      +
      +
      +

      STYLÉKA

      +

      Where fashion meets innovation and style transcends boundaries. STYLÉKA is your premier destination for curated fashion that speaks to the modern individual. From streetwear to haute couture, we blend contemporary trends with timeless elegance, offering a shopping experience that's as unique as your personal style. Discover collections that celebrate diversity, sustainability, and the art of self-expression.

      +
      + +
      +

      Navigation

      + Home + Shop + About + Contact + Blog +
      + +
      +

      Contact

      +

      Address: Guru Nanak Dev University, Amritsar

      +

      Phone: (+91)-8507566667

      +

      Hours: 10:00-18:00, Mon-Sat

      +

      Follow us

      +
      + + + + +
      +
      + +
      +

      Install App

      +
      + +
      +

      Secure Payment Gateways

      +
      + +
      +
      +
      + +
      +

      © 2025 , Powered By STYLÉKA

      +
      +
      + + + +
      +
      +

      Styleka Assistant 🤖

      + close +
      + +
      +
        +
      • + smart_toy +
        +

        Hi there 👋
        Looking for style advice or help? I'm here to assist!

        +
        +
        • +
      + +
      + + + +
      +
      +
      + + + + + + + diff --git a/public/login.html b/public/login.html new file mode 100644 index 0000000..406913e --- /dev/null +++ b/public/login.html @@ -0,0 +1,300 @@ + + + + + + Login + + + +
      + +
      +

      Login to Your Account

      +
      +
      + + +

      + +
      + + + + + + diff --git a/public/register.html b/public/register.html new file mode 100644 index 0000000..576e2bf --- /dev/null +++ b/public/register.html @@ -0,0 +1,261 @@ + + + + + + Register + + + +
      + +
      +

      Create an Account

      + + + + +

      + +
      + + + + + + diff --git a/public/script.js b/public/script.js new file mode 100644 index 0000000..1d4d482 --- /dev/null +++ b/public/script.js @@ -0,0 +1,18 @@ +import { app } from "./firebase-Config"; +console.log("Firebase Initialized:", app); + +const bar = document.getElementById('bar'); +const close = document.getElementById('close'); +const nav = document.getElementById('navbar'); + +if(bar){ + bar.addEventListener('click' , () => { + nav.classList.add('active'); + }) +} + +if(close){ + close.addEventListener('click' , () => { + nav.classList.remove('active'); + }) +} diff --git a/public/server.js b/public/server.js new file mode 100644 index 0000000..3796920 --- /dev/null +++ b/public/server.js @@ -0,0 +1,59 @@ +const express = require("express"); +const app = express(); +const stripe = require("stripe")("sk_test_51REOhFECJtYsBmLBlRG39DmeRj54tr3dBaa1DZEoCZ4m7LBoCV5JlZ3bSZsQMYUqJln87KmzhIcOXSNeXDJC7uPo00fkQfN74f"); +const cors = require("cors"); + +// Middleware +app.use(cors()); +app.use(express.json()); + +// Route to create Stripe Checkout session +app.post("/create-checkout-session", async (req, res) => { + // Log the incoming request to check if it’s correct + console.log("Request received:", req.body); + + const { items } = req.body; + + // Ensure the items are valid + if (!items || !Array.isArray(items)) { + return res.status(400).json({ error: "Invalid items format" }); + } + + // Map through items to format them for Stripe + const lineItems = items.map(item => ({ + price_data: { + currency: 'inr', + product_data: { + name: item.title, + }, + unit_amount: item.price * 100, // price in paise + }, + quantity: item.quantity, + })); + + try { + // Create a Stripe Checkout session + const session = await stripe.checkout.sessions.create({ + payment_method_types: ['card'], + line_items: lineItems, + mode: 'payment', + success_url: 'http://localhost:3000/success.html', + cancel_url: 'http://localhost:3000/cancel.html', + }); + + // Respond with session id + res.json({ id: session.id }); + } catch (error) { + console.error("Stripe error:", error); + res.status(500).json({ error: error.message }); + } +}); + +// Start server +const PORT = 4242; +app.listen(PORT, () => { + console.log(`Server running on http://localhost:${PORT}`); +}); + +// cd stripe-backend +// npm start diff --git a/public/shop.html b/public/shop.html new file mode 100644 index 0000000..7da500a --- /dev/null +++ b/public/shop.html @@ -0,0 +1,1149 @@ + + + + + + + + STYLÉKA - Shop + + + + + + + + +
      +

      #stayhome

      +

      Save more with coupons & upto 70% off !

      +
      + +
      +
      +
      + +
      + Adidas +
      White tee with black stripes
      +
      + + + + + +
      +

      ₹2000

      +
      +
      +
      + +
      + Zara +
      Printed Shirt
      +
      + + + + + +
      +

      ₹5000

      +
      +
      +
      + +
      + Gucci +
      Flower print exclusive shirt
      +
      + + + + + +
      +

      ₹14999

      +
      +
      +
      + +
      + Puma +
      One8 Shoes By Virat
      +
      + + + + + +
      +

      ₹5999

      +
      +
      +
      + +
      + Puma +
      Ferrari Sports Hoodie
      +
      + + + + + +
      +

      ₹8999

      +
      +
      +
      + +
      + Zara +
      Dual Color Shirt
      +
      + + + + + +
      +

      ₹4000

      +
      +
      +
      + +
      + HnM +
      Printed Women Trouser
      +
      + + + + + +
      +

      ₹1599

      +
      +
      +
      + +
      + HnM +
      Exclusive Purple Women t-shirts
      +
      + + + + + +
      +

      ₹2999

      +
      +
      + +
      + +
      + H&M +
      Plain Black Shirt
      +
      + + + + + +
      +

      ₹1500

      +
      +
      +
      + +
      + H&M +
      Blue Shirt
      +
      + + + + + +
      +

      ₹2500

      +
      + +
      +
      + +
      + Lacouste +
      Checked Shirt
      +
      + + + + + +
      +

      ₹6000

      +
      + +
      +
      + +
      + Goldstar +
      White Shirt
      +
      + + + + + +
      +

      ₹2000

      +
      + +
      +
      + +
      + LV +
      Designer Shirt
      +
      + + + + + +
      +

      ₹12000

      +
      + +
      +
      + +
      + Kaloster +
      Denim Jacket
      +
      + + + + + +
      +

      ₹3500

      +
      + +
      +
      + +
      + Lacouste +
      Shorts
      +
      + + + + + +
      +

      ₹2600

      +
      + +
      +
      + +
      + Gucci +
      Desert Shirt
      +
      + + + + + +
      +

      ₹26000

      +
      + +
      +
      +
      + +
      + 1 + 2 + +
      + +
      +
      +

      Sign Up For Newsletter

      +

      Get E-mail updates about ourlatest shop and special offers.

      +
      +
      + + +
      +
      + +
      +
      +
      +

      STYLÉKA

      +

      Where fashion meets innovation and style transcends boundaries. STYLÉKA is your premier destination for curated fashion that speaks to the modern individual. From streetwear to haute couture, we blend contemporary trends with timeless elegance, offering a shopping experience that's as unique as your personal style. Discover collections that celebrate diversity, sustainability, and the art of self-expression.

      +
      + +
      +

      Navigation

      + Home + Shop + About + Contact + Blog +
      + +
      +

      Contact

      +

      Address: Guru Nanak Dev University, Amritsar

      +

      Phone: (+91)-8507566667

      +

      Hours: 10:00-18:00, Mon-Sat

      +

      Follow us

      +
      + + + + +
      +
      + +
      +

      Install App

      +
      + +
      +

      Secure Payment Gateways

      +
      + +
      +
      +
      + +
      +

      © 2025 , Powered By STYLÉKA

      +
      +
      + + + + + diff --git a/public/sproduct.html b/public/sproduct.html new file mode 100644 index 0000000..149a6ed --- /dev/null +++ b/public/sproduct.html @@ -0,0 +1,260 @@ + + + + + Product Details + + + + +
      +
      + Product +
      + +
      Men's Fashion T-Shirts
      +
      Incl. of all taxes
      Free delivery
      +
      5000
      + +
      +
      S
      +
      M
      +
      L
      +
      XL
      +
      + + + +
      +
      + +
      +

      You May Also Like

      +
      +
      + Product 1 +

      Flower Print Shirt

      +

      ₹14999

      + +
      +
      + Product 2 +

      Dual Color Shirt

      +

      ₹4000

      + +
      +
      + Product 3 +

      Printed Women Trouser

      +

      ₹1599

      + +
      +
      + Product 4 +

      Exclusive Purple T-Shirt

      +

      ₹2999

      + +
      +
      +
      + + + + + + + + + + diff --git a/public/sproduct1.html b/public/sproduct1.html new file mode 100644 index 0000000..616a074 --- /dev/null +++ b/public/sproduct1.html @@ -0,0 +1,174 @@ + + + + + Product Details + + + + +
      +
      + Product +
      + +
      White tee with black stripes
      +
      Incl. of all taxes
      Free delivery
      +
      2000
      + +
      +
      S
      +
      M
      +
      L
      +
      XL
      +
      + + + +
      +
      + + + + + + + + + + diff --git a/public/sproduct10.html b/public/sproduct10.html new file mode 100644 index 0000000..77a3687 --- /dev/null +++ b/public/sproduct10.html @@ -0,0 +1,247 @@ + + + + + Product Details + + + + +
      +
      + Product +
      + +
      Checked Shirt
      +
      Incl. of all taxes
      Free delivery
      +
      6000
      + +
      +
      S
      +
      M
      +
      L
      +
      XL
      +
      + + + +
      +
      + +
      +

      You May Also Like

      +
      +
      + Product 1 +

      Men's Fashion T-Shirts

      +

      ₹5000

      + +
      +
      + Product 2 +

      Flower Print Shirt

      +

      ₹14999

      + +
      +
      + Product 3 +

      Dual Color Shirt

      +

      ₹4000

      + +
      +
      + Product 4 +

      Exclusive Purple T-Shirt

      +

      ₹2999

      + +
      +
      +
      + + + + + + + + + + diff --git a/public/sproduct11.html b/public/sproduct11.html new file mode 100644 index 0000000..799ff01 --- /dev/null +++ b/public/sproduct11.html @@ -0,0 +1,244 @@ + + + + + Product Details + + + + +
      +
      + Product +
      + +
      White Shirt
      +
      Incl. of all taxes
      Free delivery
      +
      2000
      + +
      +
      S
      +
      M
      +
      L
      +
      XL
      +
      + + + +
      +
      + +
      +

      You May Also Like

      +
      +
      + Product 1 +

      Men's Fashion T-Shirts

      +

      ₹5000

      + +
      +
      + Product 2 +

      Flower Print Shirt

      +

      ₹14999

      + +
      +
      + Product 3 +

      Dual Color Shirt

      +

      ₹4000

      + +
      +
      + Product 4 +

      Exclusive Purple T-Shirt

      +

      ₹2999

      + +
      +
      +
      + + + + + + + + + + diff --git a/public/sproduct12.html b/public/sproduct12.html new file mode 100644 index 0000000..950ca1f --- /dev/null +++ b/public/sproduct12.html @@ -0,0 +1,247 @@ + + + + + Product Details + + + + +
      +
      + Product +
      + +
      Designer Shirt
      +
      Incl. of all taxes
      Free delivery
      +
      12000
      + +
      +
      S
      +
      M
      +
      L
      +
      XL
      +
      + + + +
      +
      + +
      +

      You May Also Like

      +
      +
      + Product 1 +

      Men's Fashion T-Shirts

      +

      ₹5000

      + +
      +
      + Product 2 +

      Flower Print Shirt

      +

      ₹14999

      + +
      +
      + Product 3 +

      Dual Color Shirt

      +

      ₹4000

      + +
      +
      + Product 4 +

      Exclusive Purple T-Shirt

      +

      ₹2999

      + +
      +
      +
      + + + + + + + + + + diff --git a/public/sproduct13.html b/public/sproduct13.html new file mode 100644 index 0000000..988916c --- /dev/null +++ b/public/sproduct13.html @@ -0,0 +1,247 @@ + + + + + Product Details + + + + +
      +
      + Product +
      + +
      Denim Jacket
      +
      Incl. of all taxes
      Free delivery
      +
      3500
      + +
      +
      S
      +
      M
      +
      L
      +
      XL
      +
      + + + +
      +
      + +
      +

      You May Also Like

      +
      +
      + Product 1 +

      Men's Fashion T-Shirts

      +

      ₹5000

      + +
      +
      + Product 2 +

      Flower Print Shirt

      +

      ₹14999

      + +
      +
      + Product 3 +

      Dual Color Shirt

      +

      ₹4000

      + +
      +
      + Product 4 +

      Exclusive Purple T-Shirt

      +

      ₹2999

      + +
      +
      +
      + + + + + + + + + + diff --git a/public/sproduct14.html b/public/sproduct14.html new file mode 100644 index 0000000..fbe99e1 --- /dev/null +++ b/public/sproduct14.html @@ -0,0 +1,247 @@ + + + + + Product Details + + + + +
      +
      + Product +
      + +
      Shorts
      +
      Incl. of all taxes
      Free delivery
      +
      2600
      + +
      +
      S
      +
      M
      +
      L
      +
      XL
      +
      + + + +
      +
      + +
      +

      You May Also Like

      +
      +
      + Product 1 +

      Men's Fashion T-Shirts

      +

      ₹5000

      + +
      +
      + Product 2 +

      Flower Print Shirt

      +

      ₹14999

      + +
      +
      + Product 3 +

      Dual Color Shirt

      +

      ₹4000

      + +
      +
      + Product 4 +

      Exclusive Purple T-Shirt

      +

      ₹2999

      + +
      +
      +
      + + + + + + + + + + diff --git a/public/sproduct15.html b/public/sproduct15.html new file mode 100644 index 0000000..8e7a88c --- /dev/null +++ b/public/sproduct15.html @@ -0,0 +1,245 @@ + + + + + Product Details + + + + +
      +
      + Product +
      + +
      Desert Shirt
      +
      Incl. of all taxes
      Free delivery
      +
      26000
      + +
      +
      S
      +
      M
      +
      L
      +
      XL
      +
      + + + +
      +
      + +
      +

      You May Also Like

      +
      +
      + Product 1 +

      Men's Fashion T-Shirts

      +

      ₹5000

      + +
      +
      + Product 2 +

      Flower Print Shirt

      +

      ₹14999

      + +
      +
      + Product 3 +

      Dual Color Shirt

      +

      ₹4000

      + +
      +
      + Product 4 +

      Exclusive Purple T-Shirt

      +

      ₹2999

      + +
      +
      +
      + + + + + + + + + + diff --git a/public/sproduct2.html b/public/sproduct2.html new file mode 100644 index 0000000..170de6f --- /dev/null +++ b/public/sproduct2.html @@ -0,0 +1,260 @@ + + + + + Product Details + + + + +
      +
      + Product +
      + +
      Flower print exclusive shirt
      +
      Incl. of all taxes
      Free delivery
      +
      14999
      + +
      +
      S
      +
      M
      +
      L
      +
      XL
      +
      + + + +
      +
      + +
      +

      You May Also Like

      +
      +
      + Product 1 +

      Men's Fashion T-Shirts

      +

      ₹5000

      + +
      +
      + Product 2 +

      Dual Color Shirt

      +

      ₹4000

      + +
      +
      + Product 3 +

      Printed Women Trouser

      +

      ₹1599

      + +
      +
      + Product 4 +

      Exclusive Purple T-Shirt

      +

      ₹2999

      + +
      +
      +
      + + + + + + + + + + diff --git a/public/sproduct3.html b/public/sproduct3.html new file mode 100644 index 0000000..f70110f --- /dev/null +++ b/public/sproduct3.html @@ -0,0 +1,260 @@ + + + + + Product Details + + + + +
      +
      + Product +
      + +
      One8 Shoes By Virat
      +
      Incl. of all taxes
      Free delivery
      +
      5999
      + +
      +
      7
      +
      8
      +
      9
      +
      10
      +
      + + + +
      +
      + +
      +

      You May Also Like

      +
      +
      + Product 1 +

      Men's Fashion T-Shirts

      +

      ₹5000

      + +
      +
      + Product 2 +

      Flower Print Shirt

      +

      ₹14999

      + +
      +
      + Product 3 +

      Dual Color Shirt

      +

      ₹4000

      + +
      +
      + Product 4 +

      Exclusive Purple T-Shirt

      +

      ₹2999

      + +
      +
      +
      + + + + + + + + + + diff --git a/public/sproduct4.html b/public/sproduct4.html new file mode 100644 index 0000000..5b641e0 --- /dev/null +++ b/public/sproduct4.html @@ -0,0 +1,247 @@ + + + + + Product Details + + + + +
      +
      + Product +
      + +
      Dual Color Shirt
      +
      Incl. of all taxes
      Free delivery
      +
      4000
      + +
      +
      S
      +
      M
      +
      L
      +
      XL
      +
      + + + +
      +
      + +
      +

      You May Also Like

      +
      +
      + Product 1 +

      Men's Fashion T-Shirts

      +

      ₹5000

      + +
      +
      + Product 2 +

      Flower Print Shirt

      +

      ₹14999

      + +
      +
      + Product 3 +

      Dual Color Shirt

      +

      ₹4000

      + +
      +
      + Product 4 +

      Exclusive Purple T-Shirt

      +

      ₹2999

      + +
      +
      +
      + + + + + + + + + + diff --git a/public/sproduct5.html b/public/sproduct5.html new file mode 100644 index 0000000..4811e0c --- /dev/null +++ b/public/sproduct5.html @@ -0,0 +1,247 @@ + + + + + Product Details + + + + +
      +
      + Product +
      + +
      Printed Women Trouser
      +
      Incl. of all taxes
      Free delivery
      +
      1599
      + +
      +
      S
      +
      M
      +
      L
      +
      XL
      +
      + + + +
      +
      + +
      +

      You May Also Like

      +
      +
      + Product 1 +

      Men's Fashion T-Shirts

      +

      ₹5000

      + +
      +
      + Product 2 +

      Flower Print Shirt

      +

      ₹14999

      + +
      +
      + Product 3 +

      Dual Color Shirt

      +

      ₹4000

      + +
      +
      + Product 4 +

      Exclusive Purple T-Shirt

      +

      ₹2999

      + +
      +
      +
      + + + + + + + + + + diff --git a/public/sproduct6.html b/public/sproduct6.html new file mode 100644 index 0000000..83b5f5c --- /dev/null +++ b/public/sproduct6.html @@ -0,0 +1,247 @@ + + + + + Product Details + + + + +
      +
      + Product +
      + +
      Exclusive Purple Women t-shirts
      +
      Incl. of all taxes
      Free delivery
      +
      2999
      + +
      +
      S
      +
      M
      +
      L
      +
      XL
      +
      + + + +
      +
      + +
      +

      You May Also Like

      +
      +
      + Product 1 +

      Men's Fashion T-Shirts

      +

      ₹5000

      + +
      +
      + Product 2 +

      Flower Print Shirt

      +

      ₹14999

      + +
      +
      + Product 3 +

      Dual Color Shirt

      +

      ₹4000

      + +
      +
      + Product 4 +

      Printed Women Trouser

      +

      ₹1599

      + +
      +
      +
      + + + + + + + + + + diff --git a/public/sproduct7.html b/public/sproduct7.html new file mode 100644 index 0000000..8630475 --- /dev/null +++ b/public/sproduct7.html @@ -0,0 +1,247 @@ + + + + + Product Details + + + + +
      +
      + Product +
      + +
      Ferrari Sports Hoodie
      +
      Incl. of all taxes
      Free delivery
      +
      8999
      + +
      +
      S
      +
      M
      +
      L
      +
      XL
      +
      + + + +
      +
      + +
      +

      You May Also Like

      +
      +
      + Product 1 +

      Men's Fashion T-Shirts

      +

      ₹5000

      + +
      +
      + Product 2 +

      Flower Print Shirt

      +

      ₹14999

      + +
      +
      + Product 3 +

      Dual Color Shirt

      +

      ₹4000

      + +
      +
      + Product 4 +

      Exclusive Purple T-Shirt

      +

      ₹2999

      + +
      +
      +
      + + + + + + + + + + diff --git a/public/sproduct8.html b/public/sproduct8.html new file mode 100644 index 0000000..16e5896 --- /dev/null +++ b/public/sproduct8.html @@ -0,0 +1,247 @@ + + + + + Product Details + + + + +
      +
      + Product +
      + +
      Plain Black Shirt
      +
      Incl. of all taxes
      Free delivery
      +
      1500
      + +
      +
      S
      +
      M
      +
      L
      +
      XL
      +
      + + + +
      +
      + +
      +

      You May Also Like

      +
      +
      + Product 1 +

      Men's Fashion T-Shirts

      +

      ₹5000

      + +
      +
      + Product 2 +

      Flower Print Shirt

      +

      ₹14999

      + +
      +
      + Product 3 +

      Dual Color Shirt

      +

      ₹4000

      + +
      +
      + Product 4 +

      Exclusive Purple T-Shirt

      +

      ₹2999

      + +
      +
      +
      + + + + + + + + + + diff --git a/public/sproduct9.html b/public/sproduct9.html new file mode 100644 index 0000000..6bf742c --- /dev/null +++ b/public/sproduct9.html @@ -0,0 +1,247 @@ + + + + + Product Details + + + + +
      +
      + Product +
      + +
      Blue Shirt
      +
      Incl. of all taxes
      Free delivery
      +
      1500
      + +
      +
      S
      +
      M
      +
      L
      +
      XL
      +
      + + + +
      +
      + +
      +

      You May Also Like

      +
      +
      + Product 1 +

      Men's Fashion T-Shirts

      +

      ₹5000

      + +
      +
      + Product 2 +

      Flower Print Shirt

      +

      ₹14999

      + +
      +
      + Product 3 +

      Dual Color Shirt

      +

      ₹4000

      + +
      +
      + Product 4 +

      Exclusive Purple T-Shirt

      +

      ₹2999

      + +
      +
      +
      + + + + + + + + + + diff --git a/public/style.css b/public/style.css new file mode 100644 index 0000000..12f92b2 --- /dev/null +++ b/public/style.css @@ -0,0 +1,1622 @@ + +@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap'); + +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Play", serif; +} + +h1 { + font-size: 50px; + line-height: 64px; + color: rgb(10, 10, 10); +} + +h2 { + font-size: 46px; + line-height: 54px; + color: black; +} + +h4 { + font-size: 20px; + color: black; +} + +h6 { + font-weight: 700; + font-size: 12px; +} + +p{ + font-size: 16px; + color: rebeccapurple; + margin: 15px 0 20px 0; +} +section{ + margin: 0; +} +.section-p1{ + padding: 40px 80px; +} + +.section-m1{ + margin: 40px 0; +} + +button.normal{ + font-size: 14px; + font-weight: 600; + padding: 15px 30px; + color: #000; + background-color: #fff; + border-radius: 4px; + cursor: pointer; + border: none; + outline: none; + transition: 0.2sec; +} + +button.white{ + font-size: 13px; + font-weight: 600; + padding: 11px 18px; + color: #fff; + background-color: transparent; + cursor: pointer; + border: 1px solid #fff; + outline: none; + transition: 0.2sec; +} +button.green { + font-size: 13px; + font-weight: 600; + padding: 11px 18px; + cursor: pointer; + border: 1px solid #fff; + outline: none; + transition: 0.2s; + background: #088178; + color: #fff; +} +body{ + width: 100%; +} + +/*Header Start */ +#header{ + display: flex; + align-items: center; + justify-content: space-between; + /* font-style: italic; */ + padding: 20px 80px; + background: #E3E6F3; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); + z-index: 999; + position: sticky; + top: 0; + left: 0; +} + +.site-title{ + font-size: 5em; + font-weight: bold; + color: black; +} + +.logo{ + height: 200px; +} + +#navbar{ + display: flex; + align-items: center; + justify-content: center; +} + +#navbar li{ + list-style: none; + padding: 0 20px; + position: relative; +} + +#navbar li a{ + text-decoration: none; + font-size: 16px; + font-weight: 600; + color: #1a1a1a; + transition: 0.3s ease; +} + +#navbar li a:hover , +#navbar li a.active{ + color: #088178; +} + +#navbar li a.active::after, +#navbar li a:hover::after{ + content: ""; + width: 30%; + height: 2px; + background: #088178; + position: absolute; + bottom: -4px; + left: 20px; +} + +#mobile{ + display: none; + align-items: center; +} + +#close{ + display: none; +} + +/* Home Page */ +#Hero{ + background-image: url("img/61CG8tD+GFL._AC_UF1000_1000_QL80_-removebg-preview.png"); + background-repeat: no-repeat; + /* background-position: right center; */ + background-size: 60%; + background-position: 110%; + padding-top: 60px; + padding-bottom: 40px; + height: 90vh; + width: 100%; + margin-bottom: 0; + padding-left: 50px; + gap: 30px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + text-align: center; + +} +.left{ + flex:1; + padding-right: 30px; + text-align: left; +} +.right{ + flex:1; + display: flex; + justify-content: center; + align-items: center; +} +.right img{ + max-width: 100%; + height: 100%; + +} +#Hero h1{ + font-size: 70px; + font-weight: bold; + color: #088178; +} + +#Hero h2{ + font-size: 60px; +} + +#Hero h4{ + font-size: 20px; + padding-bottom:15px ; +} + +#Hero p{ + font-size: 18px; +} + +#Hero button{ + //background-image: url(img/button.png); + background-color: #088178; + color: #fff; + border: 0; + border-radius: 30px; + width: 220px; + padding: 14px 80px 14px 65px; + background-repeat: no-repeat; + cursor: pointer; + font-weight: 700; + font-size: 15px; +} + +#feature{ + display:flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + margin-top:0; + padding-top:0; +} + +#feature .fe-box{ + width: 200px; + text-align: center; + padding: 25px 15px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); + border: 1px solid #cce7d0; + border-radius: 8px; + margin: 15px; + transition: all 0.3s ease; + background-color: #fff; +} + +#feature .fe-box:hover{ + box-shadow: 0 10px 20px rgba(8, 129, 120, 0.2); + transform: translateY(-4px); + cursor: pointer; +} + +#feature .fe-box img{ + width: 64px; + height: 64px; + object-fit: contain; + margin: 0 auto 10px; + display: block; +} + +#feature .fe-box h6{ + padding: 10px 12px; + border-radius: 4px; + font-size: 0.9rem; + font-weight: 600; + color: #088178; + background-color: #e2f8f6; + display: inline-block; + transition: background-color 0.3s ease; +} +#feature .fe-box:nth-child(1) { + border-left: 4px solid #ffee00ff; +} +#feature .fe-box:nth-child(2) { + border-left: 4px solid #927fff; +} +#feature .fe-box:nth-child(3) { + border-left: 4px solid #ff7f7f; +} +#feature .fe-box:nth-child(4) { + border-left: 4px solid #abe856; +} +#feature .fe-box:nth-child(5) { + border-left: 4px solid #c3782c; +} +#feature .fe-box:nth-child(6) { + border-left: 4px solid #fddde4; +} + +#product1{ + text-align: center; +} + +#product1 .pro-container{ + display: flex; + justify-content: space-between; + padding-top: 20px; + flex-wrap: wrap; +} + +#product1 .pro{ + width: 23%; + min-width: 250px; + padding: 10px 12px; + border : 1px solid #cce7d0; + border-radius: 25px; + cursor: pointer; + box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.02); + margin: 15px 0; + transition: 0.2sec ease; + position: relative; +} + +#product1 .pro:hover{ + box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.06); +} + +#product1 .pro img{ + width: 100%; + border-radius: 20px; +} + +#product1 .pro .des{ + text-align: start; + padding: 10px 0; +} + +#product1 .pro .des span{ + color: #606063; + font-size: 12px; +} + +#product1 .pro .des h5{ + padding-top: 7px; + color: #1a1a1a; + font-size: 14px; +} + +#product1 .pro .des i{ + font-size: 12px; + color: rgb(243, 181, 25); +} + +#product1 .pro .des h4{ + padding-top: 7px; + font-size: 15px; + font-weight: 700; + color: #088178; +} + +#product1 .pro .cart{ + width: 40px; + height: 40px; + line-height: 40px; + border-radius: 50px; + background-color: #e8f6ea; + font-weight: 500; + color: #088178; + border: 1px solid #cce7d0; + position: absolute; + right: 10px; + bottom: 10px; + z-index: 10; + display: flex; + justify-content: center; + align-items: center; + font-size: 20px; +} + +#banner{ + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + width: 100%; + height: 47vh; + background: + linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), + url("images/b33.jpg") ; + background-size: cover; + background-position: center; + border-radius: 10px; + padding: 20px; + margin: 40px 0; + color: #fff; +} + +#banner h3{ + color: #fff; + font-size: 20px; + margin-bottom: 10px; + letter-spacing: 1px; +} + +#banner h2{ + color: #fff; + font-size: 36px; + margin: 10px 0; + line-height: 1.4; + max-width: 90%; +} + +#banner h2 span{ + color: #ef3636; + font-weight: bold; +} +#banner .normal{ + margin-top: 20px; + padding: 12px 30px; + font-size: 16px; + font-weight: 600; + border: none; + border-radius: 30px; + background-color: #fff; + color: #088178; + cursor: pointer; + transition: all 0.3s ease; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); +} + +#banner .normal:hover { + background-color: #088178; + color: #fff; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); +} +#banner button:hover{ + background: #088178; + color: #fff; +} + +#sm-banner{ + display: flex; + flex-direction: column; + gap: 30px; + width: 100%; + padding: 40px 0; + + +} + +#sm-banner .banner-box{ +display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + background-image: url("images/b3.jpg"); + background-size: cover; + background-position: center; + width: 100%; + max-width: 1200px; + margin: 0 auto; + padding: 40px; + min-height: 350px; + border-radius: 10px; + box-shadow: 0 4px 12px rgba(0,0,0,0.1); + border: 0.7px solid #088178; +} + +#sm-banner .banner-box2 { + background-image: url("images/b4.jpg"); + display: flex; + justify-content: flex-end; + align-items: center; + position: relative; + background-size: cover; + background-position: center; + width: 100%; + margin: 0 auto; + padding: 40px; + min-height: 350px; + border-radius: 10px; + box-shadow: 0 4px 12px rgba(0,0,0,0.1); + border: 0.7px solid #088178; +} + +#sm-banner .rightban { + display: flex; + flex-direction: column; + align-items: flex-end; + text-align: right; + width: 100%; + padding-right: 60px; +} + +#sm-banner .rightban h4, +#sm-banner .rightban h2, +#sm-banner .rightban span { + color: #111; +} + +#sm-banner h4{ + color: #fff; + font-size: 20px; + font-weight: 300; +} + +#sm-banner h2{ + color: #fff; + font-size: 28px; + font-weight: 800; +} + +#sm-banner span{ + color: #fff; + font-size: 14px; + font-weight: 500; + padding-bottom: 15px; +} + +#sm-banner .banner-box:hover button{ + background: #088178; + border: 1px #088178; +} + + +#sm-banner .banner-box2:hover .green { + background: #fff; + color: #088178; + border: 1px solid #088178; + +} + +#banner3{ + display: flex; + justify-content: space-between; + flex-wrap: wrap; + padding: 0 80px; +} + +#banner3 .banner-box{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + background-image: url("images/b16.jpg"); + min-width: 30%; + height: 30vh; + background-size: cover; + background-position: center; + padding: 40px 20px; + margin-bottom: 20px; + border: 1px solid #9b6102ff; + border-radius: 10px; + box-shadow: 0 4px 12px rgba(0,0,0,0.1); +} + +#banner3 .banner-box2{ + background-image: url("images/b17.jpg"); + border: 1px solid #000000ff; + border-radius: 10px; + box-shadow: 0 4px 12px rgba(0,0,0,0.1); +} + +#banner3 .banner-box3{ + background-image: url("images/b18.jpg"); + border: 1px solid #085981ff; + border-radius: 10px; + box-shadow: 0 4px 12px rgba(0,0,0,0.1); +} + +#banner3 h2{ + margin-bottom: 10px; + color: #fff; + font-weight: 900; + font-size: 24px; + text-shadow: 1px 1px 3px rgba(0,0,0,0.3); +} +#banner3 h2.foot{ + color: #000000ff; + margin-bottom: 10px; +} +#banner3 h2.tshirt{ + color: #003366; + margin-bottom: 10px; + } +#banner3 h3{ + font-weight: 800; + font-size: 15px; + text-shadow: 1px 1px 3px rgba(0,0,0,0.3); +} +#banner3 h3{ + color: #ec544e; +} +#banner3 h3.winter{ + color: #5a0b00; +} +#banner3 h3.subtshirt{ + color: #d35400; +} +#newsletter{ + display: flex; + justify-content: space-between; + flex-wrap: wrap; + align-items: center; + background-image: url("img/Banner/b14.png"); + background-repeat: no-repeat; + background-position: 20% 30%; + background-color: #041e42; +} + +#newsletter h4{ + font-size: 22px; + font-weight: 700; + color: #fff; +} + +#newsletter p{ + font-size: 14px; + font-weight: 600; + color: #818ea0; +} + +#newsletter p span{ + color: #ffbd27; +} + +#newsletter .form{ + display: flex; + width: 40%; +} + +#newsletter input{ + height: 3.125rem; + padding: 0 1.25em; + font-size: 14px; + width: 100%; + border : 1px solid transparent; + border-radius: 4px; + outline: none; + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +#newsletter button{ + background-color: #088178; + color: #fff; + white-space: nowrap; + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +/* Enhanced Footer - Dark Theme with Glowing Border */ +footer{ + background: #E6E6FA; /* Changed to lilac color */ + color: white; + padding: 40px 80px; + border-radius: 20px; + margin: 40px 20px 20px 20px; + position: relative; + border: none; + box-shadow: 0 0 30px rgba(230, 230, 250, 0.6), + inset 0 0 30px rgba(230, 230, 250, 0.2); +} + +footer::before { + content: ''; + position: absolute; + top: -3px; + left: -3px; + right: -3px; + bottom: -3px; + background: linear-gradient(45deg, #007bff, #00d4ff, #007bff, #00d4ff); + border-radius: 23px; + z-index: -1; + animation: outerGlow 3s ease-in-out infinite alternate; +} + +.footer-container { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + width: 100%; + background-color: white; + color: #0066cc; + padding: 20px; + border-radius: 10px; + margin: 10px; + position: relative; + border: none; + box-shadow: 0 0 20px rgba(230, 230, 250, 0.5), + inset 0 0 20px rgba(230, 230, 250, 0.15); +} + +.footer-container::before { + content: ''; + position: absolute; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + background: linear-gradient(45deg, #007bff, #00d4ff, #007bff); + border-radius: 12px; + z-index: -1; + animation: glow 2s ease-in-out infinite alternate; +} + + + +@keyframes glow { + from { + box-shadow: 0 0 20px rgba(0, 123, 255, 0.5); + } + to { + box-shadow: 0 0 30px rgba(0, 123, 255, 0.8); + } +} + +footer .col{ + display: flex; + flex-direction: column; + align-items: flex-start; + margin-bottom: 20px; + flex: 1; + min-width: 250px; +} + +/* Add spacing between STYLÉKA and Navigation columns */ +footer .col:first-child { + margin-right: 40px; +} + +footer h4{ + font-size: 1.3rem; + padding-bottom: 15px; + color: #007bff; + font-weight: 600; + margin-bottom: 15px; +} + +footer p{ + font-size: 14px; + margin: 5px 0 8px 0; + color: #0066cc; + line-height: 1.6; +} + +footer a{ + font-size: 14px; + text-decoration: none; + color: #0066cc; + margin-bottom: 8px; + transition: all 0.3s ease; +} + +footer a:hover{ + color: #007bff; + transform: translateX(5px); +} + +footer .follow{ + margin-top: 20px; +} + +footer .follow i{ + color: #007bff; + padding-right: 15px; + cursor: pointer; + transition: all 0.3s ease; + font-size: 1.2rem; +} + +footer .follow i:hover{ + transform: scale(1.2); + color: #00d4ff; +} + +.icon a { + color: #0066cc; + padding-right: 15px; + cursor: pointer; + transition: all 0.3s ease; + font-size: 1.2rem; + text-decoration: none; +} + +.icon a:hover { + transform: scale(1.2); + color: #00d4ff; +} + +footer .install .row img{ + border: 1px solid #007bff; + border-radius: 6px; +} + +footer .install img{ + margin: 10px 0 15px 0; +} + +footer .copyright{ + width: 100%; + text-align: center; + margin-top: 30px; + padding-top: 20px; + border-top: 1px solid rgba(0, 123, 255, 0.3); + color: #0066cc; +} + +/* Shop Page */ +#page-header{ + background-image: url("img/Banner/b1.jpg"); + width: 100%; + height: 40vh; + background-size: cover; + display: flex; + justify-content: center; + text-align: center; + flex-direction: column; + padding: 14px; +} + +#page-header h2, +#page-header p{ + color: #fff; +} + +#pagination{ + text-align: center; +} + +#pagination a{ + text-decoration: none; + background-color: #088178; + padding: 15px 20px; + border-radius: 4px; + color: #fff; + font-weight: 600; +} + +#pagination a i{ + font-size: 16px; + font-weight: 600; +} + +/*Single Product */ + +#prodetails{ + display: flex; + margin-top: 20px; +} + +#prodetails .single-pro-image{ + width: 40%; + margin-right: 50px; +} + +.small-img-group{ + display: flex; + justify-content: space-between; +} + +.small-img-col{ + flex-basis : 24%; + cursor : pointer; +} + +#prodetails .single-pro-details{ + width: 50%; + padding-top: 30px; +} + +#prodetails .single-pro-details h4{ + padding: 40px 0 20px 0; +} + +#prodetails .single-pro-details h2{ + font-size: 26px; +} + +#prodetails .single-pro-details select{ + display: block; + padding: 5px 10px; + margin-bottom: 10px; +} + +#prodetails .single-pro-details input{ + width: 50px; + height: 47px; + padding-left: 10px; + font-size: 16px; + margin-right: 10px; +} + +#prodetails .single-pro-details input:focus{ + outline: none; +} + +#prodetails .single-pro-details button{ + background: #088178; + color: #fff; +} + +#prodetails .single-pro-details span{ + line-height: 25px; +} + +/* blog */ + +#page-header.blog-header{ + background-image: url("img/Banner/b19.jpg"); +} + +#blog{ + padding : 150px 150px 0 150px; +} + +#blog .blog-box{ + display: flex; + align-items: center; + width: 100%; + position: relative; + padding-bottom: 90px; +} + +#blog .blog-img{ + width: 35%; + margin-right: 40px; +} + +#blog img{ + width: 100%; + height: 400px; + object-fit: cover; +} + +#blog .blog-details{ + width: 50%; +} + +#blog .blog-details a{ + text-decoration: none; + font-size: 21px; + color: #000; + font-weight: 700; + position: relative; + transition: 0.3s; +} + +#blog .blog-details a ::after{ + content: ""; + width : 50px; + height: 1px; + background-color: #000; + position: absolute; + top: 4px; + right: -60px; +} + +#blog .blog-details a:hover{ + color: #088178; +} + +#blog .blog-box h1{ + position: absolute; + top: -50px; + left: 0; + font-size: 70px; + font-weight: 700; + color: #c9cbce; + z-index: -9; +} + +/* About */ + +#page-header.about-header{ + background-image: url("img/About/banner.png"); +} + +#about-head{ + display: flex; + align-items: center; +} + +#about-head img{ + width: 50%; + height: auto; +} + +#about-head div{ + padding-left: 40px; +} + +#about-app{ + text-align: center; +} + +#about-app .video{ + width: 70%; + height: 100%; + margin: 30px auto 0 auto; +} + +#about-app .video video{ + width: 100%; + height: 100%; + border-radius: 20px; +} + +/* Enhanced About Page Styles */ +.features-list { + margin: 25px 0; +} + +.feature-item { + display: flex; + align-items: flex-start; + margin: 15px 0; + padding: 15px; + background: rgba(227, 230, 243, 0.3); + border-radius: 10px; + transition: all 0.3s ease; +} + +.feature-item:hover { + background: rgba(227, 230, 243, 0.5); + transform: translateX(5px); +} + +.feature-item i { + color: rebeccapurple; + font-size: 20px; + margin-right: 15px; + margin-top: 2px; + min-width: 25px; +} + +.feature-item div { + flex: 1; +} + +.feature-item strong { + color: #333; + display: block; + margin-bottom: 5px; +} + +.mission-statement { + margin: 30px 0; + padding: 25px; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border-radius: 15px; + color: white; +} + +.mission-statement blockquote { + font-style: italic; + font-size: 18px; + line-height: 1.8; + margin: 0; + position: relative; +} + +.mission-statement blockquote:before { + content: '"'; + font-size: 60px; + position: absolute; + left: -20px; + top: -10px; + color: rgba(255, 255, 255, 0.3); +} + +/* Stats Section */ +#stats-section { + background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); + margin: 60px 0; +} + +.stats-container { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + gap: 30px; +} + +.stat-item { + text-align: center; + padding: 30px 20px; + background: white; + border-radius: 15px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease; + min-width: 200px; +} + +.stat-item:hover { + transform: translateY(-10px); +} + +.stat-number { + font-size: 48px; + font-weight: bold; + color: rebeccapurple; + margin-bottom: 10px; +} + +.stat-label { + font-size: 16px; + color: #666; + font-weight: 500; +} + +/* Enhanced App Section */ +#about-app { + text-align: center; + background: rgba(227, 230, 243, 0.2); + border-radius: 20px; + margin: 40px 0; +} + +#about-app h1 { + margin-bottom: 15px; + color: #333; +} + +#about-app p { + font-size: 18px; + margin-bottom: 30px; + max-width: 600px; + margin-left: auto; + margin-right: auto; +} + +.app-buttons { + display: flex; + justify-content: center; + gap: 20px; + margin: 30px 0; + flex-wrap: wrap; +} + +.app-download-btn { + transition: transform 0.3s ease; +} + +.app-download-btn:hover { + transform: scale(1.05); +} + +.app-download-btn img { + height: 60px; + border-radius: 10px; +} + +/* Responsive Design for About Page Enhancements */ +@media (max-width: 768px) { + .stats-container { + flex-direction: column; + align-items: center; + } + + .stat-item { + width: 100%; + max-width: 300px; + } + + .feature-item { + flex-direction: column; + text-align: center; + } + + .feature-item i { + margin-bottom: 10px; + margin-right: 0; + } + + .mission-statement blockquote:before { + display: none; + } + + .app-buttons { + flex-direction: column; + align-items: center; + } +} + +/* Enhanced Social Media Icons */ +.follow .icon a { + color: #222; + transition: all 0.3s ease; + display: inline-block; + padding: 10px; + border-radius: 50%; + margin: 0 5px; +} + +.follow .icon a:hover { + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); +} + +.follow .icon a:hover .fa-facebook { + color: #3b5998; +} + +.follow .icon a:hover .fa-twitter { + color: #1da1f2; +} + +.follow .icon a:hover .fa-instagram { + color: #e4405f; +} + +.follow .icon a:hover .fa-pinterest-p { + color: #bd081c; +} + +.follow .icon a:hover .fa-youtube { + color: #ff0000; +} + +/* Contact */ + +#contact-details{ + display: flex; + align-items: center; + justify-content: space-between; +} + +#contact-details .details{ + width: 40%; +} + +#contact-details .details span , +#form-details form span{ + font-size: 12px; +} + +#contact-details .details h2 , +#form-details form h2{ + font-size: 40px; + line-height: 35px; + padding: 20px 0; +} + +#contact-details .details h3{ + font-size: 16px; + padding-bottom: 15px; +} + +#contact-details .details li{ + list-style: none; + display: flex; + padding: 10px 0; +} + +#contact-details .details li i{ + font-size: 14px; + padding-right: 22px; +} + +#contact-details .details li p{ + margin: 0; + font-size: 14px; +} + +#contact-details .map{ + width: 55%; + height: 400px; +} + +#contact-details .map iframe{ + width: 100%; + height: 100%; +} + +#form-details{ + display: flex; + justify-content: space-between; + margin: 30px; + padding: 80px; + border: 1px solid #e1e1e1; +} + +#form-details form{ + width: 65%; + display: flex; + flex-direction: column; + align-items: flex-start; +} + +#form-details form input , +#form-details form textarea{ + width: 100%; + padding: 12px 15px; + outline: none; + margin-bottom: 20px; + border: 1px solid #e1e1e1; +} + +#form-details form button{ + background-color: #088178; + color: #fff; +} + +#form-details .people div{ + margin-bottom: 25px; + display: flex; + align-items: flex-start; +} + +#form-details .people div img{ + width: 65px; + height: 65px; + object-fit: cover; + margin-right: 15px; +} + +#form-details .people div p{ + margin: 0; + font-size: 13px; + line-height: 25px; +} + +#form-details .people div p span{ + display: block; + font-size: 16px; + font-weight: 600; + color: #000; +} + +/* Start Media Query */ + +@media (max-width : 799px) { + .section-p1 { + padding: 40px 40px; + } + #navbar { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + position: fixed; + top: 0; + right: -300px; + height: 100vh; + width: 300px; + background-color: #E3E6F3; + box-shadow: 0 40px 60px rgba(0 , 0 , 0 , 0.1); + padding: 80px 0 0 10px; + transition: 0.3s ; + } + + #navbar.active{ + right: 0px; + } + + #navbar li{ + margin-bottom: 25px; + } + + #mobile{ + display: flex; + align-items: center; + } + + #mobile i{ + color: #1a1a1a; + font-size: 24px; + padding-left: 20px; + } + + #close { + display: initial; + position: absolute; + top: 30px; + left: 30px; + color: #222; + font-size: 24px; + } + + #lg-bag{ + display: none; + } + + #Hero { + height: 50vh; + padding-left: 20px; + background-position: top 0px left 100px; + background-size: cover; + background-repeat: no-repeat; + } + + #Hero h1{ + font-size: 28px; + } + + #Hero h2{ + font-size: 24px; + } + + #Hero h4{ + font-size: 22px; + } + + #Hero p{ + font-size: 18px; + } + + #feature { + justify-content: center; + } + + #feature .fe-box { + margin: 15px 15px; + } + + #product1 .pro-container { + justify-content: center; + } + + #product1 .pro { + margin: 15px; + } + #banner { + height: 25vh; + } + #banner h2{ + font-size:20px; + line-height: 1.3; + padding: 20px 10px; + } + #banner h3{ + font-size: 14px; + } + #banner .normal{ + padding: 8px 20px; + font-size: 14px; + } + #sm-banner .banner-box { + min-width: 100%; + height: 30vh; + } + #banner3 { + padding: 0 40px; + } + #banner3 .banner-box { + width: 28%; + } + #newsletter .form { + width: 70%; + } + + /* Contact Page */ + #form-details { + padding: 40px; + } +} + +@media (max-width : 477px){ + .site-title { + font-size: 1.5em; + } + #Hero { + height: 50vh; + padding-left: 20px; + background-position: top 0px left 100px; + background-size: cover; + background-repeat: no-repeat; + } + .section-p1 { + padding: 20px; + } + #header { + padding: 10px 20px; + } + #Hero h1 { + font-size: 24px; + } + #Hero h2 { + font-size: 22px; + } + #Hero { + padding: 0 20px; + background-position: top 0 left 20px; + } + #feature { + justify-content: space-between; + } + #feature .fe-box { + width: 155px; + margin: 0 0 15px 0; + } + #product1 .pro { + width: 90%; + } + #banner { + height: auto; + padding: 30px 10px; + } + #banner h2 { + font-size: 20px; + padding: 10px 0; + } + #banner h3{ + font-size: 12px; + margin-bottom: 6px; + } + #banner .normal { + padding: 6px 18px; + font-size: 12px; + margin-top: 10px; + border-radius: 20px; + white-space: nowrap; + + } + #sm-banner .banner-box { + height: 40vh; + } + #sm-banner .banner-box2 { + margin-top: 20px; + } + #banner3 { + padding: 0 20px; + } + #banner3 .banner-box { + width: 90%; + } + #newsletter .form { + width: 100%; + } + #newsletter { + padding: 40px 20px; + } + footer .copyright { + text-align: start; + } + + /* Single Product */ + #prodetails { + display: flex; + flex-direction: column; + } + #prodetails .single-pro-image { + width: 100%; + margin-right: 0px; + } + #prodetails .single-pro-details { + width: 100%; + + } + + /* Blog page */ + #blog { + padding: 100px 20px 0 20px; + } + #blog .blog-box { + display: flex; + flex-direction: column; + align-items: flex-start; + } + + #blog .blog-img { + width: 100%; + margin-right: 0px; + margin-bottom: 30px; + } + + #blog .blog-details { + width: 100%; + } + + /* About Page */ + + #about-head { + flex-direction: column; + } + + #about-head img { + width: 100%; + } + + #about-head div { + padding-left: 0px; + } + + #about-app .video { + width: 100%; + } + + /* Contact Page */ + #contact-details { + flex-direction: column; + } + + #contact-details .details { + width: 100%; + margin-bottom: 30px; + } + + #contact-details .details h2, #form-details form h2 { + font-size: 30px; + } + + #contact-details .map { + width: 100%; + } + + #form-details { + margin: 10px; + padding: 30px 10px; + flex-wrap: wrap; + } + + #form-details form { + width: 100%; + margin-bottom: 30px; + } + + /* #prodetails1 { + display: flex; + flex-direction: column; + } + + #prodetails1 .single-pro-image1 { + width: 40%; + margin-right: 50px; + } */ +} diff --git a/public/success.html b/public/success.html new file mode 100644 index 0000000..1abe857 --- /dev/null +++ b/public/success.html @@ -0,0 +1,289 @@ + + + + + + Order Success + + + +
      +
      + L +
      +

      Order Placed Successfully!

      +

      Thank you for your purchase. Your order has been received and is being processed.

      + +
      +

      Order Number: ORD-2025-04-16-7892

      +

      Date: April 16, 2025

      +

      Estimated Delivery: April 20-23, 2025

      +
      + +

      We've sent a confirmation email with all the details to your registered email address.

      + +
      + Back to Cart + Continue Shopping +
      +
      + + + + From c0479d285887062a3f79b86b78141d2b43dd0205 Mon Sep 17 00:00:00 2001 From: Krisha Gandhi Date: Thu, 31 Jul 2025 13:11:28 +0530 Subject: [PATCH 4/8] Update chatbot and API handler with new features --- api/chatbot.js | 36 ++++++---------- package-lock.json | 27 ++++++++++++ package.json | 11 +++++ public/chatbot.css | 48 ++++++++++++++------- public/chatbot.js | 103 ++++++++++++++++++++++++++++++++++++++++----- public/index.html | 12 +++--- 6 files changed, 183 insertions(+), 54 deletions(-) create mode 100644 package-lock.json create mode 100644 package.json diff --git a/api/chatbot.js b/api/chatbot.js index a924add..a4c46ee 100644 --- a/api/chatbot.js +++ b/api/chatbot.js @@ -1,4 +1,5 @@ -import 'dotenv/config'; +import dotenv from 'dotenv'; +dotenv.config(); export default async function handler(req, res) { if (req.method !== 'POST') { @@ -6,43 +7,34 @@ export default async function handler(req, res) { } try { - const body = req.body || (await new Promise((resolve, reject) => { - let data = ''; - req.on('data', chunk => data += chunk); - req.on('end', () => resolve(JSON.parse(data))); - req.on('error', reject); - })); - - const { messages } = body; + const { messages } = req.body; if (!messages || !Array.isArray(messages) || messages.length === 0) { - return res.status(400).json({ error: 'Messages array is required' }); -} + return res.status(400).json({ error: 'Messages array is required' }); + } const response = await fetch("https://openrouter.ai/api/v1/chat/completions", { method: "POST", headers: { "Authorization": `Bearer ${process.env.OPENROUTER_API_KEY}`, "Content-Type": "application/json", - "HTTP-Referer": "https://wander-wise-smart-routes-hidden-gems-travel-smarter-b7vtijzkc.vercel.app/", "X-Title": "Styleka Fashion Assistant" }, body: JSON.stringify({ model: "openai/gpt-4o-mini", - messages: [ - { - role: "system", - content: `You are Styleka, a helpful and friendly fashion assistant for an e-commerce clothing site. + messages: [ + { + role: "system", + content: `You are Styleka, a helpful and friendly fashion assistant for an e-commerce clothing site. You help users with sizing, return policies, offers, order status, and outfit recommendations based on current trends or occasion. Keep your tone stylish, brief, and confident.` - }, - ...messages - ] + }, + ...messages + ] }), }); const result = await response.json(); - console.log("OpenRouter API response:", result); if (!result.choices || result.choices.length === 0) { return res.status(500).json({ error: "No response from model" }); @@ -50,8 +42,8 @@ Keep your tone stylish, brief, and confident.` res.status(200).json({ reply: result.choices[0].message.content }); - } catch (error) { - console.error('Error:', error); + } catch (err) { + console.error("Handler error:", err); res.status(500).json({ error: 'Something went wrong.' }); } } diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..a8e937d --- /dev/null +++ b/package-lock.json @@ -0,0 +1,27 @@ +{ + "name": "styleka", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "styleka", + "version": "1.0.0", + "dependencies": { + "dotenv": "^17.2.1" + } + }, + "node_modules/dotenv": { + "version": "17.2.1", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.2.1.tgz", + "integrity": "sha512-kQhDYKZecqnM0fCnzI5eIv5L4cAe/iRI+HqMbO/hbRdTAeXDG+M9FjipUxNfbARuEg4iHIbhnhs78BCHNbSxEQ==", + "license": "BSD-2-Clause", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://dotenvx.com" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..0602482 --- /dev/null +++ b/package.json @@ -0,0 +1,11 @@ +{ + "name": "styleka", + "version": "1.0.0", + "type": "module", + "scripts": { + "dev": "node api/chatbot.js" + }, + "dependencies": { + "dotenv": "^17.2.1" + } +} diff --git a/public/chatbot.css b/public/chatbot.css index 3889491..d03f401 100644 --- a/public/chatbot.css +++ b/public/chatbot.css @@ -8,8 +8,8 @@ width: 50px; height: 50px; /* Uses your main app's gradient for the button */ - background: #4d2d5e; - color: red; + background: #927fff; + color: #fff; border: none; border-radius: 50%; display: flex; @@ -77,7 +77,7 @@ body.show-chatbot .chatbot { } .chatbot header { - background: #088178; + background: #927fff; color: #fff; padding: 16px 0; text-align: center; @@ -105,6 +105,7 @@ body.show-chatbot .chatbot { flex: 1; overflow-y: auto; padding: 30px 20px 10px; /* Adjusted padding, no large bottom value needed */ + list-style: none; } @@ -119,12 +120,12 @@ body.show-chatbot .chatbot { } .chatbot .chatbox::-webkit-scrollbar-thumb { - background: #088178; + background: #927fff; border-radius: 3px; } .chatbot .chatbox::-webkit-scrollbar-thumb:hover { - background:#088178; + background: #927fff; } /* ✅ Chat messages container */ @@ -165,8 +166,8 @@ body.show-chatbot .chatbot { .chatbox .incoming span { width: 32px; height: 32px; - background: #E3E6F3; - color: #088178; + background:#927fff; + color: #fff; text-align: center; line-height: 32px; border-radius: 4px; @@ -211,6 +212,7 @@ body.show-chatbot .chatbot { padding: 10px 20px; background: #fff; border-top: 1px solid #cce7d0; + flex-shrink: 0; } @@ -235,7 +237,7 @@ body.show-chatbot .chatbot { /* Button styling */ .chat-input button { align-self: flex-end; - color: #088178; + color: #927fff; cursor: pointer; height: 55px; display: flex; @@ -246,7 +248,7 @@ body.show-chatbot .chatbot { } .chat-input button:hover { - color: #065c58; + color: #7c66e0; } /* Send button logic */ @@ -403,7 +405,7 @@ body.show-chatbot .floating-action { .preview-button { width: 100%; /* Make buttons full width of container */ padding: 10px 15px; - background-color: #088178; + background-color: #927fff; color: white; border: none; border-radius: 5px; @@ -414,7 +416,7 @@ body.show-chatbot .floating-action { } .preview-button:hover { - background-color: #5566cc; + background-color: #7c66e0; } .chatbot, .chatbot * { @@ -437,15 +439,15 @@ body.dark-mode .chatbot .chatbox .chat.incoming p { } body.dark-mode .chatbot .chatbox .chat.outgoing p { - background-color: #2a2a2a; + background-color:#4d2d5e; color: #ccc; } /* Buttons inside chatbot */ body.dark-mode .preview-button-container button.preview-button { - background-color: #333; + background-color: #4d2d5e; + border: 1px solid #7c66e0; color: #eee; - border: 1px solid #555; } /* Scrollbar thumb */ @@ -466,4 +468,20 @@ body.dark-mode #chat-input textarea::placeholder { body.dark-mode .chatbot .chat-input { background-color: #1e1e1e; /* Sets a dark background for the input bar */ border-top: 1px solid #333; /* A darker top border */ -} \ No newline at end of file +} + +.static-link-container a.chatbot-link { + display: inline-block; + margin: 6px 6px 0 0; + padding: 6px 12px; + background-color: #927fff; + color: #fff; + border-radius: 20px; + text-decoration: none; + font-size: 14px; + transition: background-color 0.2s ease; +} + +.static-link-container a.chatbot-link:hover { + background-color: #7c66e0; +} diff --git a/public/chatbot.js b/public/chatbot.js index dc06676..c491f6c 100644 --- a/public/chatbot.js +++ b/public/chatbot.js @@ -24,10 +24,41 @@ document.addEventListener("DOMContentLoaded", () => { { role: "system", content: ` - You are Styleka Assistant, a friendly and knowledgeable fashion and shopping expert for an e-commerce site. + You are STYLÉKA’s intelligent shopping assistant built into a front-end fashion e-commerce site. You know everything about the STYLÉKA website structure, product pages, blog content, UI design, and available features. - When a user asks about clothes, footwear, accessories, styling tips, or order help, provide smart, helpful replies like a real fashion stylist and shopping assistant. +Website Overview: +- STYLÉKA is a fashion storefront with product listings, 15+ individual product pages, a static cart, a fashion blog, a contact form, newsletter, and team info. +- The app includes the following HTML pages: index.html (home), shop.html, sproduct1.html to sproduct15.html, cart.html, contact.html, blog.html, about.html, login.html, register.html. +Main Features: +- Browse product listings with prices, discounts, and dynamic ratings. +- View 15+ individual product detail pages with descriptions and images. +- Static Cart interface that shows added products. +- Read and explore the Fashion Blog. +- Fill out the Newsletter form to stay updated. +- Post and read product reviews (UI only). +- View Team section and contact support via a form. +- Fully responsive experience across all screen sizes. + +Instructions: +- Answer any user questions intelligently based on this structure. +- If a user asks about products, mention that they can explore 15+ items. +- If they want to view or go to any section, respond with a link (relative HTML file). +- Keep your replies helpful, concise, and friendly. Avoid vague or generic replies. +- Always act as if you're guiding the user through the STYLÉKA website. Mention features, suggest pages, offer help. +- Never claim functionality not present (like payment, dynamic cart, real-time updates). +- Always prefer linking to exact HTML files when users ask to visit or explore something. +- You can use emojis to keep the conversation human and engaging. + +Examples of what you should handle: +- "Show me shoes under ₹1500" +- "What's on the blog right now?" +- "Where can I view my cart?" +- "How do I contact you?" +- "Do you have jackets?" +- "Tell me more about STYLÉKA" + +You are always aware of the full structure and capabilities of the STYLÉKA frontend. You can: - Recommend outfits based on occasions (e.g., "What should I wear to a wedding?") - Help find specific items (e.g., "Show me black boots under ₹3000") @@ -41,11 +72,11 @@ document.addEventListener("DOMContentLoaded", () => { ]; const tabMap = { - "new arrivals": "new-arrivals", - "best sellers": "best-sellers", - "offers": "offers", - "my orders": "orders", - "return policy": "returns" + "new arrivals": "shop.html", + "best sellers": "shop.html", + "offers": "shop.html", + "my orders": "cart.html", // fallback to cart since orders are not dynamic + "return policy": "contact.html" }; chatForm.addEventListener("submit", e => { @@ -88,6 +119,8 @@ const tabMap = { chatbox.appendChild(createChatLi("Thinking...", "incoming")); chatbox.scrollTop = chatbox.scrollHeight; + + chatHistory.push({ role: "user", content: userMessage }); chatInput.disabled = true; @@ -102,11 +135,20 @@ const tabMap = { const data = await response.json(); + function parseMarkdownBold(text) { + return text.replace(/\*\*(.*?)\*\*/g, '$1'); + } + const botReply = data.reply || "Sorry, no reply."; + const formattedReply = parseMarkdownBold(botReply); + chatHistory.push({ role: "assistant", content: botReply }); - chatbox.lastChild.querySelector("p").textContent = botReply; + chatbox.lastChild.querySelector("p").innerHTML = formattedReply; + chatbox.scrollTop = chatbox.scrollHeight; + + // After updating bot reply text in chat window: const previewContainer = document.createElement('div'); previewContainer.className = 'preview-button-container'; @@ -115,6 +157,37 @@ const lowerUserMessage = userMessage.toLowerCase(); const showAllButtons = lowerUserMessage.includes("list of functionalities") || lowerUserMessage.includes("features") || lowerUserMessage.includes("what can you do"); +const exploreIntent = lowerUserMessage.includes("explore new") || lowerUserMessage.includes("explore feature"); + + +const showStaticLinks = lowerUserMessage.includes("about") || + lowerUserMessage.includes("contact") || + lowerUserMessage.includes("cart") || + lowerUserMessage.includes("blog") || + showAllButtons; + +if (showStaticLinks) { + const staticLinks = [ + { label: "🛒 Cart", href: "cart.html" }, + { label: "📬 Contact Us", href: "contact.html" }, + { label: "📰 Blog", href: "blog.html" }, + { label: "ℹ️ About Us", href: "about.html" } + ]; + + const linksContainer = document.createElement('div'); + linksContainer.className = 'static-link-container'; + + staticLinks.forEach(link => { + const a = document.createElement('a'); + a.href = link.href; + a.textContent = link.label; + a.className = 'chatbot-link'; + linksContainer.appendChild(a); + }); + + chatbox.lastChild.querySelector('.bot-message-content').appendChild(linksContainer); +} + if (showAllButtons) { for (const [keyword, tabId] of Object.entries(tabMap)) { @@ -155,6 +228,7 @@ if (showAllButtons) { chatbox.scrollTop = chatbox.scrollHeight; + } catch (error) { chatbox.lastChild.querySelector("p").textContent = "Oops, something went wrong."; @@ -166,12 +240,19 @@ if (showAllButtons) { } }; function switchTab(tabId) { - const tab = document.getElementById(tabId); - if (tab) { - tab.scrollIntoView({ behavior: 'smooth' }); + // If tabId is a page, navigate + if (tabId.endsWith(".html")) { + window.location.href = tabId; // open in same page + } else { + // else scroll to section if it exists + const tab = document.getElementById(tabId); + if (tab) { + tab.scrollIntoView({ behavior: 'smooth' }); + } } } + // 🔥 Make it globally accessible window.switchTab = switchTab; diff --git a/public/index.html b/public/index.html index 6e7cfbc..b1e28cb 100644 --- a/public/index.html +++ b/public/index.html @@ -1260,14 +1260,15 @@

      Secure Payment Gateways

      mode_comment close -
      + +

      Styleka Assistant 🤖

      close
      -
      -
        +
        +
        • smart_toy
          @@ -1275,12 +1276,11 @@

          Styleka Assistant 🤖

        - -
        +
        + -
      From 1b79471cf7ec1e135883d74d200eae293495f78e Mon Sep 17 00:00:00 2001 From: Krisha Gandhi Date: Thu, 31 Jul 2025 13:31:17 +0530 Subject: [PATCH 5/8] Added chatbot UI and logic for all-page visibility --- public/about.html | 13 +++++++++++++ public/blog.html | 13 +++++++++++++ public/chatbot.html | 36 +++++++++++++++++++++++++++++++++++ public/chatbot.js | 9 +++++++-- public/contact.html | 13 +++++++++++++ public/index.html | 46 ++++++++++++--------------------------------- 6 files changed, 94 insertions(+), 36 deletions(-) create mode 100644 public/chatbot.html diff --git a/public/about.html b/public/about.html index 406538e..73b2e53 100644 --- a/public/about.html +++ b/public/about.html @@ -224,7 +224,20 @@

      Secure Payment Gateways

      © 2025, Powered By STYLÉKA - Where Fashion Meets Excellence

      + + +
      + + + diff --git a/public/blog.html b/public/blog.html index bd91b25..e036fc6 100644 --- a/public/blog.html +++ b/public/blog.html @@ -180,6 +180,19 @@

      Secure Payment Gateways

      © 2025 , Powered By STYLÉKA

      +
      + + + + + diff --git a/public/chatbot.html b/public/chatbot.html new file mode 100644 index 0000000..203a2b7 --- /dev/null +++ b/public/chatbot.html @@ -0,0 +1,36 @@ + + + + + + + +
      +
      +

      Styleka Assistant 🤖

      + close +
      + +
      +
        +
      • + smart_toy +
        +

        Hi there 👋
        Looking for style advice or help? I'm here to assist!

        +
        +
        • +
      +
      +
      + + + +
      +
      + + + + diff --git a/public/chatbot.js b/public/chatbot.js index c491f6c..42ea959 100644 --- a/public/chatbot.js +++ b/public/chatbot.js @@ -1,4 +1,4 @@ -document.addEventListener("DOMContentLoaded", () => { +window.initChatbot = function () { const chatbotToggler = document.querySelector(".chatbot-toggler"); const closeBtn = document.querySelector(".chatbot .close-btn"); const chatbox = document.getElementById("chat-window"); @@ -6,6 +6,11 @@ document.addEventListener("DOMContentLoaded", () => { const sendChatBtn = document.querySelector("#send-btn"); const chatForm = document.getElementById("chat-form"); + if (!chatbotToggler || !closeBtn || !chatbox || !chatInput || !sendChatBtn || !chatForm) { + console.warn("Chatbot elements not found. Skipping initialization."); + return; + } + chatInput.addEventListener("keydown", (e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); // Prevent adding a newline @@ -256,4 +261,4 @@ if (showAllButtons) { // 🔥 Make it globally accessible window.switchTab = switchTab; -}); +}; diff --git a/public/contact.html b/public/contact.html index e590049..5c82bdc 100644 --- a/public/contact.html +++ b/public/contact.html @@ -162,6 +162,19 @@

      Secure Payment Gateways

      © 2025 , Powered By STYLÉKA

      +
      + + + + + diff --git a/public/index.html b/public/index.html index b1e28cb..0879f45 100644 --- a/public/index.html +++ b/public/index.html @@ -7,9 +7,6 @@ STYLÉKA - - -