From 780f536d291d9d809658833bf30dfb9a84ab3315 Mon Sep 17 00:00:00 2001 From: Anshuman Tiwari Date: Fri, 26 Jul 2024 07:41:54 +0000 Subject: [PATCH] seller form added --- sell-online/index.html | 206 +++++++++++++++++++++++++++++++++++++---- sell-online/script.js | 53 +++++++++++ sell-online/styles.css | 89 ++++++++++++++++++ 3 files changed, 332 insertions(+), 16 deletions(-) create mode 100644 sell-online/script.js create mode 100644 sell-online/styles.css diff --git a/sell-online/index.html b/sell-online/index.html index 28811af8..cca045d6 100644 --- a/sell-online/index.html +++ b/sell-online/index.html @@ -5,20 +5,108 @@ - - Sell Online - start Selling Online On Flipkart Seller Hub - + Sell Online - start Selling Online On Flipkart Seller Hub - - - + + + + + +
+ This is Header +
@@ -56,11 +144,9 @@

Don’t have a GSTIN?

Register / Login to www.gst.gov.in

-

Fill in the GST Enrolment Application Form

-

Submit Enrolment Application

@@ -68,6 +154,7 @@

Don’t have a GSTIN?

Flipkart offers a diverse range of over 3000+ categories where you can sell your products. These categories represent just a fraction of the wide variety available on Flipkart, providing ample opportunities for sellers to showcase their products to a large customer base. Here are some popular categories to consider for online selling:

+

Grow Faster

@@ -82,20 +169,107 @@

Grow Faster

  • Shopping Festivals and more: Participate in exciting sales events and promotional campaigns.

    • Know more on how to grow your business

    - -
    +

    Help & Support

    What sets us apart is our exceptional Flipkart seller support assistance. We prioritize your needs and are committed to providing you with prompt assistance, whether you have questions, doubts, or require any kind of support for your business. Our dedicated team is here to help you every step of the way, ensuring that you have a smooth and successful selling experience on Flipkart. Feel free to reach out to us whenever you need assistance - we're always here to support you.

    Know more about the assistance we offer.

    A step-by-step guide to help with your Flipkart account creation can be downloaded from here.

    - +
    + +
    +

    Sell Online Form

    +
    +
    Step 1: Personal Information
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + +
    +
    +
    +
    Step 2: Business Information
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    +
    Step 3: Bank Information
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + - \ No newline at end of file + diff --git a/sell-online/script.js b/sell-online/script.js new file mode 100644 index 00000000..19e8cc36 --- /dev/null +++ b/sell-online/script.js @@ -0,0 +1,53 @@ +document.addEventListener('DOMContentLoaded', function () { + const form = document.getElementById('sellForm'); + const formSteps = Array.from(document.querySelectorAll('.form-step')); + const nextButtons = Array.from(document.querySelectorAll('.btn-next')); + const prevButtons = Array.from(document.querySelectorAll('.btn-prev')); + const submitButton = form.querySelector('.btn-submit'); + + let currentStep = 0; + + nextButtons.forEach((button, index) => { + button.addEventListener('click', () => { + if (validateFormStep(index)) { + currentStep++; + updateFormSteps(); + } + }); + }); + + prevButtons.forEach((button) => { + button.addEventListener('click', () => { + currentStep--; + updateFormSteps(); + }); + }); + + form.addEventListener('submit', (e) => { + e.preventDefault(); + Swal.fire( + 'Good job!', + 'Form Submitted Successfully!', + 'success' + ); + }); + + function updateFormSteps() { + formSteps.forEach((step, index) => { + step.classList.toggle('form-step-active', index === currentStep); + }); + } + + function validateFormStep(index) { + const inputs = formSteps[index].querySelectorAll('input'); + for (let input of inputs) { + if (!input.value) { + alert(`Please fill in the ${input.previousElementSibling.innerText}`); + return false; + } + } + return true; + } + + updateFormSteps(); +}); diff --git a/sell-online/styles.css b/sell-online/styles.css new file mode 100644 index 00000000..9474d8ef --- /dev/null +++ b/sell-online/styles.css @@ -0,0 +1,89 @@ +body { + font-family: Arial, sans-serif; +} + +.sell-online-form { + background-color: #ffffff; + border-radius: 8px; + padding: 30px; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); + width: 80%; + max-width: 600px; + margin: 20px auto; +} + +.sell-online-form h2 { + margin-top: 0; + font-size: 24px; + text-align: center; + margin-bottom: 20px; + color: #2874F0; +} + +.sell-online-form .form-group { + margin-bottom: 20px; +} + +.sell-online-form .form-group label { + display: block; + margin-bottom: 8px; + font-weight: bold; +} + +.sell-online-form .form-group input { + width: 100%; + padding: 10px; + box-sizing: border-box; + border: 1px solid #ccc; + border-radius: 5px; + font-size: 16px; +} + +.sell-online-form .btn { + padding: 12px 20px; + border: none; + background-color: #2874F0; + color: #fff; + cursor: pointer; + border-radius: 5px; + font-size: 16px; + margin-right: 10px; + transition: background-color 0.3s ease; +} + +.sell-online-form .btn:hover { + background-color: #1a5bbf; +} + +.sell-online-form .btn:disabled { + background-color: #ccc; + cursor: not-allowed; +} + +.sell-online-form .form-step { + display: none; +} + +.sell-online-form .form-step-active { + display: block; +} + +.sell-online-form .form { + margin-top: 20px; +} + +.sell-online-form .step-title { + font-size: 20px; + margin-bottom: 15px; + color: #333; + text-align: center; +} + +.sell-online-form .btn-group { + text-align: center; + margin-top: 20px; +} + +.sell-online-form .btn-group .btn { + margin: 5px; +}