From 2c885eb9d199ec8bf472054838e920f916540cdd Mon Sep 17 00:00:00 2001
From: CH-RAFAY <arafaychaudhry@gmail.com>
Date: Thu, 20 Jun 2024 23:03:07 +0500
Subject: [PATCH] Updated! form with image option

---
 F3.html                   | 280 ++++++++++++++++++++++++++++++++++++
 file.txt => File/file.txt |   0
 Latest.html               | 288 ++++++++++++++++++++++++++++++++++++++
 nexa.html                 | 288 ++++++++++++++++++++++++++++++++++++++
 4 files changed, 856 insertions(+)
 create mode 100644 F3.html
 rename file.txt => File/file.txt (100%)
 create mode 100644 Latest.html
 create mode 100644 nexa.html
diff --git a/F3.html b/F3.html
new file mode 100644
index 0000000..8e4d826
--- /dev/null
+++ b/F3.html
@@ -0,0 +1,280 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dependent Dropdown Form</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+        }
+        .form-container {
+            max-width: 400px;
+            margin: 50px auto;
+            padding: 20px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+        }
+        .form-group {
+            margin-bottom: 15px;
+        }
+        .form-group label {
+            display: block;
+            margin-bottom: 5px;
+        }
+        .form-group select,
+        .form-group input {
+            width: 100%;
+            padding: 8px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+        }
+        .option-box {
+            display: inline-block;
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            margin: 5px;
+            cursor: pointer;
+        }
+        .option-box.selected {
+            border-color: #ff7f00;
+            background-color: #ff7f00;
+            color: white;
+        }
+        .hidden {
+            display: none;
+        }
+        .submit-btn {
+            display: block;
+            width: 100%;
+            padding: 10px;
+            background-color: #ff7f00;
+            border: none;
+            border-radius: 5px;
+            color: white;
+            font-size: 16px;
+            cursor: pointer;
+        }
+        .submit-btn:disabled {
+            background-color: #ccc;
+        }
+    </style>
+</head>
+<body>
+
+<div class="form-container">
+    <form id="car-review-form">
+        <div class="form-group">
+            <label for="brand">What brand is your car?</label>
+            <select id="brand">
+                <option value="">Select brand</option>
+                <option value="Smart">Smart</option>
+                <option value="Toyota">Toyota</option>
+                <option value="Ford">Ford</option>
+            </select>
+        </div>
+        <div class="form-group">
+            <label for="model">Which model?</label>
+            <select id="model" disabled>
+                <option value="">Select model</option>
+            </select>
+        </div>
+        <div class="form-group">
+            <label for="year">In which year was it registered?</label>
+            <select id="year" disabled>
+                <option value="">Select first registration</option>
+            </select>
+        </div>
+
+        <div class="form-group hidden" id="shape-group">
+            <label for="shape">What shape does it have?</label>
+            <div class="option-box" data-value="Roadster">Roadster</div>
+            <div class="option-box" data-value="Coupe">Coupe</div>
+            <div class="option-box" data-value="SUV">SUV</div>
+            <div class="option-box" data-value="Other">Other</div>
+            <input type="text" id="shape-other" class="hidden" placeholder="Enter shape">
+        </div>
+
+        <div class="form-group hidden" id="fuel-group">
+            <label for="fuel">What fuel does it use?</label>
+            <div class="option-box" data-value="Petrol">Petrol</div>
+            <div class="option-box" data-value="Diesel">Diesel</div>
+            <div class="option-box" data-value="Hybrid">Electric</div>
+            <div class="option-box" data-value="Hybrid">Hybrid</div>
+            <input type="text" id="fuel-other" class="hidden" placeholder="Enter fuel type">
+        </div>
+
+        <div class="form-group hidden" id="variant-group">
+            <label for="variant">Which model variant is it?</label>
+            <div class="option-box" data-value="1.6">1.6 L</div>
+            <div class="option-box" data-value="1.8">1.8 L</div>
+            <div class="option-box" data-value="Other">Other</div>
+            <input type="text" id="variant-other" class="hidden" placeholder="Enter model variant">
+        </div>
+
+        <div class="form-group hidden" id="horsepower-group">
+            <label for="horsepower">How many horsepower does it have?</label>
+            <div class="option-box" data-value="85 kW / 115 hp">85 kW / 115 hp</div>
+            <div class="option-box" data-value="55 kW">55 kW</div>
+            <div class="option-box" data-value="57 kW">57 kW</div>
+            <div class="option-box" data-value="61 kW">61 kW</div>
+            <div class="option-box" data-value="Other">Other</div>
+            <input type="text" id="horsepower-other" class="hidden" placeholder="Enter horsepower">
+        </div>
+
+        <div class="form-group hidden" id="transmission-group">
+            <label for="transmission">What transmission does it have?</label>
+            <div class="option-box" data-value="Automatic">Automatic</div>
+            <div class="option-box" data-value="Manual">Manual</div>
+            <div class="option-box" data-value="Other">Other</div>
+            <input type="text" id="transmission-other" class="hidden" placeholder="Enter transmission type">
+        </div>
+
+        <div class="form-group hidden" id="doors-group">
+            <label for="doors">How many doors does it have?</label>
+            <div class="option-box" data-value="2 doors">2 doors</div>
+            <div class="option-box" data-value="4 doors">4 doors</div>
+            <div class="option-box" data-value="Other">Other</div>
+            <input type="text" id="doors-other" class="hidden" placeholder="Enter number of doors">
+        </div>
+
+        <div class="form-group hidden" id="mileage-group">
+            <label for="mileage">What is the mileage?</label>
+            <input type="text" id="mileage" placeholder="Enter mileage">
+        </div>
+        
+        <div class="form-group hidden" id="additional-options-group">
+            <div class="form-group">
+                <label for="sell-plan">When do you plan to sell?</label>
+                <select id="sell-plan">
+                    <option value="">Select timeframe</option>
+                    <option value="next-4-weeks">Over the next 4 weeks</option>
+                    <option value="next-3-months">Over the next 3 months</option>
+                    <option value="next-6-months">Over the next 6 months</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="prefer-to-sell">Who do you prefer to sell to?</label>
+                <select id="prefer-to-sell">
+                    <option value="">Select option</option>
+                    <option value="private">To Private</option>
+                    <option value="dealer">To Dealer</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="email">Where can we send the sales offer?</label>
+                <input type="email" id="email" placeholder="Please enter email address">
+            </div>
+        </div>
+
+        <button type="submit" class="submit-btn" disabled>View review now</button>
+    </form>
+</div>
+
+<script>
+    document.getElementById('brand').addEventListener('change', function() {
+        var brand = this.value;
+        var modelSelect = document.getElementById('model');
+        var yearSelect = document.getElementById('year');
+        var submitButton = document.querySelector('.submit-btn');
+
+        if (brand) {
+            modelSelect.removeAttribute('disabled');
+            modelSelect.innerHTML = '<option value="">Select model</option>';
+            if (brand === 'Smart') {
+                modelSelect.innerHTML += '<option value="Fortwo">Fortwo</option>';
+                modelSelect.innerHTML += '<option value="Forfour">Forfour</option>';
+            } else if (brand === 'Toyota') {
+                modelSelect.innerHTML += '<option value="Corolla">Corolla</option>';
+                modelSelect.innerHTML += '<option value="Camry">Camry</option>';
+            } else if (brand === 'Ford') {
+                modelSelect.innerHTML += '<option value="Focus">Focus</option>';
+                modelSelect.innerHTML += '<option value="Fiesta">Fiesta</option>';
+            }
+        } else {
+            modelSelect.setAttribute('disabled', 'true');
+            yearSelect.setAttribute('disabled', 'true');
+            submitButton.setAttribute('disabled', 'true');
+        }
+    });
+
+    document.getElementById('model').addEventListener('change', function() {
+        var model = this.value;
+        var yearSelect = document.getElementById('year');
+        var submitButton = document.querySelector('.submit-btn');
+
+        if (model) {
+            yearSelect.removeAttribute('disabled');
+            yearSelect.innerHTML = '<option value="">Select first registration</option>';
+            for (var year = 2000; year <= 2024; year++) {
+                yearSelect.innerHTML += '<option value="' + year + '">' + year + '</option>';
+            }
+        } else {
+            yearSelect.setAttribute('disabled', 'true');
+            submitButton.setAttribute('disabled', 'true');
+        }
+    });
+
+    document.getElementById('year').addEventListener('change', function() {
+        var year = this.value;
+        var submitButton = document.querySelector('.submit-btn');
+
+        if (year) {
+            document.getElementById('shape-group').classList.remove('hidden');
+        } else {
+            document.getElementById('shape-group').classList.add('hidden');
+            submitButton.setAttribute('disabled', 'true');
+        }
+    });
+
+    document.querySelectorAll('.option-box').forEach(function(box) {
+        box.addEventListener('click', function() {
+            var parentGroup = this.parentElement;
+            parentGroup.querySelectorAll('.option-box').forEach(function(option) {
+                option.classList.remove('selected');
+            });
+            this.classList.add('selected');
+
+            var otherInput = parentGroup.querySelector('input[type="text"]');
+            if (this.getAttribute('data-value') === 'Other') {
+                otherInput.classList.remove('hidden');
+            } else {
+                otherInput.classList.add('hidden');
+            }
+
+            // Show next group based on the current group ID
+            var currentGroup = parentGroup.id;
+            if (currentGroup === 'shape-group') {
+                document.getElementById('fuel-group').classList.remove('hidden');
+            } else if (currentGroup === 'fuel-group') {
+                document.getElementById('variant-group').classList.remove('hidden');
+            } else if (currentGroup === 'variant-group') {
+                document.getElementById('horsepower-group').classList.remove('hidden');
+            } else if (currentGroup === 'horsepower-group') {
+                document.getElementById('transmission-group').classList.remove('hidden');
+            } else if (currentGroup === 'transmission-group') {
+                document.getElementById('doors-group').classList.remove('hidden');
+            } else if (currentGroup === 'doors-group') {
+                document.getElementById('mileage-group').classList.remove('hidden');
+            }
+        });
+    });
+
+    document.getElementById('mileage').addEventListener('input', function() {
+        var mileage = this.value;
+        var additionalOptionsGroup = document.getElementById('additional-options-group');
+        var submitButton = document.querySelector('.submit-btn');
+        
+        if (mileage) {
+            additionalOptionsGroup.classList.remove('hidden');
+            submitButton.removeAttribute('disabled');
+        } else {
+            additionalOptionsGroup.classList.add('hidden');
+            submitButton.setAttribute('disabled', 'true');
+        }
+    });
+</script>
+
+</body>
+</html>
diff --git a/file.txt b/File/file.txt
similarity index 100%
rename from file.txt
rename to File/file.txt
diff --git a/Latest.html b/Latest.html
new file mode 100644
index 0000000..906d2e4
--- /dev/null
+++ b/Latest.html
@@ -0,0 +1,288 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dependent Dropdown Form</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+        }
+        .form-container {
+            max-width: 400px;
+            margin: 50px auto;
+            padding: 20px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+        }
+        .form-group {
+            margin-bottom: 15px;
+        }
+        .form-group label {
+            display: block;
+            margin-bottom: 5px;
+        }
+        .form-group select,
+        .form-group input {
+            width: 100%;
+            padding: 8px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+        }
+        .option-box {
+            display: inline-block;
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            margin: 5px;
+            cursor: pointer;
+        }
+        .option-box.selected {
+            border-color: #ff7f00;
+            background-color: #ff7f00;
+            color: white;
+        }
+        .hidden {
+            display: none;
+        }
+        .submit-btn {
+            display: block;
+            width: 100%;
+            padding: 10px;
+            background-color: #ff7f00;
+            border: none;
+            border-radius: 5px;
+            color: white;
+            font-size: 16px;
+            cursor: pointer;
+        }
+        .submit-btn:disabled {
+            background-color: #ccc;
+        }
+    </style>
+</head>
+<body>
+
+<div class="form-container">
+    <form id="car-review-form">
+        <div class="form-group">
+            <label for="brand">What brand is your car?</label>
+            <select id="brand">
+                <option value="">Select brand</option>
+                <option value="Smart">Smart</option>
+                <option value="Toyota">Toyota</option>
+                <option value="Ford">Ford</option>
+            </select>
+        </div>
+        <div class="form-group">
+            <label for="model">Which model?</label>
+            <select id="model" disabled>
+                <option value="">Select model</option>
+            </select>
+        </div>
+        <div class="form-group">
+            <label for="year">In which year was it registered?</label>
+            <select id="year" disabled>
+                <option value="">Select first registration</option>
+            </select>
+        </div>
+
+        <div class="form-group hidden" id="shape-group">
+            <label for="shape">What shape does it have?</label>
+            <div class="option-box" data-value="Roadster">Roadster</div>
+            <div class="option-box" data-value="Coupe">Coupe</div>
+            <div class="option-box" data-value="SUV">SUV</div>
+            <div class="option-box" data-value="Other">Other</div>
+            <input type="text" id="shape-other" class="hidden" placeholder="Enter shape">
+        </div>
+
+        <div class="form-group hidden" id="fuel-group">
+            <label for="fuel">What fuel does it use?</label>
+            <div class="option-box" data-value="Petrol">Petrol</div>
+            <div class="option-box" data-value="Diesel">Diesel</div>
+            <div class="option-box" data-value="Electric">Electric</div>
+            <div class="option-box" data-value="Hybrid">Hybrid</div>
+            <input type="text" id="fuel-other" class="hidden" placeholder="Enter fuel type">
+        </div>
+
+        <div class="form-group hidden" id="variant-group">
+            <label for="variant">Which model variant is it?</label>
+            <div class="option-box" data-value="1.6">1.6 L</div>
+            <div class="option-box" data-value="1.8">1.8 L</div>
+            <div class="option-box" data-value="Other">Other</div>
+            <input type="text" id="variant-other" class="hidden" placeholder="Enter model variant">
+        </div>
+
+        <div class="form-group hidden" id="horsepower-group">
+            <label for="horsepower">How many horsepower does it have?</label>
+            <div class="option-box" data-value="85 kW / 115 hp">85 kW / 115 hp</div>
+            <div class="option-box" data-value="55 kW">55 kW</div>
+            <div class="option-box" data-value="57 kW">57 kW</div>
+            <div class="option-box" data-value="61 kW">61 kW</div>
+            <div class="option-box" data-value="Other">Other</div>
+            <input type="text" id="horsepower-other" class="hidden" placeholder="Enter horsepower">
+        </div>
+
+        <div class="form-group hidden" id="transmission-group">
+            <label for="transmission">What transmission does it have?</label>
+            <div class="option-box" data-value="Automatic">Automatic</div>
+            <div class="option-box" data-value="Manual">Manual</div>
+            <div class="option-box" data-value="Other">Other</div>
+            <input type="text" id="transmission-other" class="hidden" placeholder="Enter transmission type">
+        </div>
+
+        <div class="form-group hidden" id="doors-group">
+            <label for="doors">How many doors does it have?</label>
+            <div class="option-box" data-value="2 doors">2 doors</div>
+            <div class="option-box" data-value="4 doors">4 doors</div>
+            <div class="option-box" data-value="Other">Other</div>
+            <input type="text" id="doors-other" class="hidden" placeholder="Enter number of doors">
+        </div>
+
+        <div class="form-group hidden" id="mileage-group">
+            <label for="mileage">What is the mileage?</label>
+            <input type="text" id="mileage" placeholder="Enter mileage">
+        </div>
+        
+        <div class="form-group hidden" id="additional-options-group">
+            <div class="form-group">
+                <label for="sell-plan">When do you plan to sell?</label>
+                <select id="sell-plan">
+                    <option value="">Select timeframe</option>
+                    <option value="next-4-weeks">Over the next 4 weeks</option>
+                    <option value="next-3-months">Over the next 3 months</option>
+                    <option value="next-6-months">Over the next 6 months</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="prefer-to-sell">Who do you prefer to sell to?</label>
+                <select id="prefer-to-sell">
+                    <option value="">Select option</option>
+                    <option value="private">To Private</option>
+                    <option value="dealer">To Dealer</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="email">Where can we send the sales offer?</label>
+                <input type="email" id="email" placeholder="Please enter email address">
+            </div>
+        </div>
+
+        <div class="form-group hidden" id="upload-image-group">
+            <label for="car-image">Upload an image of your car</label>
+            <input type="file" id="car-image" accept="image/*">
+        </div>
+
+        <button type="submit" class="submit-btn" disabled>View review now</button>
+    </form>
+</div>
+
+<script>
+    document.getElementById('brand').addEventListener('change', function() {
+        var brand = this.value;
+        var modelSelect = document.getElementById('model');
+        var yearSelect = document.getElementById('year');
+        var submitButton = document.querySelector('.submit-btn');
+
+        if (brand) {
+            modelSelect.removeAttribute('disabled');
+            modelSelect.innerHTML = '<option value="">Select model</option>';
+            if (brand === 'Smart') {
+                modelSelect.innerHTML += '<option value="Fortwo">Fortwo</option>';
+                modelSelect.innerHTML += '<option value="Forfour">Forfour</option>';
+            } else if (brand === 'Toyota') {
+                modelSelect.innerHTML += '<option value="Corolla">Corolla</option>';
+                modelSelect.innerHTML += '<option value="Camry">Camry</option>';
+            } else if (brand === 'Ford') {
+                modelSelect.innerHTML += '<option value="Focus">Focus</option>';
+                modelSelect.innerHTML += '<option value="Fiesta">Fiesta</option>';
+            }
+        } else {
+            modelSelect.setAttribute('disabled', 'true');
+            yearSelect.setAttribute('disabled', 'true');
+            submitButton.setAttribute('disabled', 'true');
+        }
+    });
+
+    document.getElementById('model').addEventListener('change', function() {
+        var model = this.value;
+        var yearSelect = document.getElementById('year');
+        var submitButton = document.querySelector('.submit-btn');
+
+        if (model) {
+            yearSelect.removeAttribute('disabled');
+            yearSelect.innerHTML = '<option value="">Select first registration</option>';
+            for (var year = 2000; year <= 2024; year++) {
+                yearSelect.innerHTML += '<option value="' + year + '">' + year + '</option>';
+            }
+        } else {
+            yearSelect.setAttribute('disabled', 'true');
+            submitButton.setAttribute('disabled', 'true');
+        }
+    });
+
+    document.getElementById('year').addEventListener('change', function() {
+        var year = this.value;
+        var submitButton = document.querySelector('.submit-btn');
+
+        if (year) {
+            document.getElementById('shape-group').classList.remove('hidden');
+        } else {
+            document.getElementById('shape-group').classList.add('hidden');
+            submitButton.setAttribute('disabled', 'true');
+        }
+    });
+
+    document.querySelectorAll('.option-box').forEach(function(box) {
+        box.addEventListener('click', function() {
+            var parentGroup = this.parentElement;
+            parentGroup.querySelectorAll('.option-box').forEach(function(option) {
+                option.classList.remove('selected');
+            });
+            this.classList.add('selected');
+
+            var otherInput = parentGroup.querySelector('input[type="text"]');
+            if (this.getAttribute('data-value') === 'Other') {
+                otherInput.classList.remove('hidden');
+            } else {
+                otherInput.classList.add('hidden');
+            }
+
+            // Show next group based on the current group ID
+            var currentGroup = parentGroup.id;
+            if (currentGroup === 'shape-group') {
+                document.getElementById('fuel-group').classList.remove('hidden');
+            } else if (currentGroup === 'fuel-group') {
+                document.getElementById('variant-group').classList.remove('hidden');
+            } else if (currentGroup === 'variant-group') {
+                document.getElementById('horsepower-group').classList.remove('hidden');
+            } else if (currentGroup === 'horsepower-group') {
+                document.getElementById('transmission-group').classList.remove('hidden');
+            } else if (currentGroup === 'transmission-group') {
+                document.getElementById('doors-group').classList.remove('hidden');
+            } else if (currentGroup === 'doors-group') {
+                document.getElementById('mileage-group').classList.remove('hidden');
+            }
+        });
+    });
+
+    document.getElementById('mileage').addEventListener('input', function() {
+        var mileage = this.value;
+        var additionalOptionsGroup = document.getElementById('additional-options-group');
+        var submitButton = document.querySelector('.submit-btn');
+        var uploadImageGroup = document.getElementById('upload-image-group');
+        
+        if (mileage) {
+            additionalOptionsGroup.classList.remove('hidden');
+            uploadImageGroup.classList.remove('hidden');
+            submitButton.removeAttribute('disabled');
+        } else {
+            additionalOptionsGroup.classList.add('hidden');
+            uploadImageGroup.classList.add('hidden');
+            submitButton.setAttribute('disabled', 'true');
+        }
+    });
+</script>
+
+</body>
+</html>
diff --git a/nexa.html b/nexa.html
new file mode 100644
index 0000000..906d2e4
--- /dev/null
+++ b/nexa.html
@@ -0,0 +1,288 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dependent Dropdown Form</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+        }
+        .form-container {
+            max-width: 400px;
+            margin: 50px auto;
+            padding: 20px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+        }
+        .form-group {
+            margin-bottom: 15px;
+        }
+        .form-group label {
+            display: block;
+            margin-bottom: 5px;
+        }
+        .form-group select,
+        .form-group input {
+            width: 100%;
+            padding: 8px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+        }
+        .option-box {
+            display: inline-block;
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            margin: 5px;
+            cursor: pointer;
+        }
+        .option-box.selected {
+            border-color: #ff7f00;
+            background-color: #ff7f00;
+            color: white;
+        }
+        .hidden {
+            display: none;
+        }
+        .submit-btn {
+            display: block;
+            width: 100%;
+            padding: 10px;
+            background-color: #ff7f00;
+            border: none;
+            border-radius: 5px;
+            color: white;
+            font-size: 16px;
+            cursor: pointer;
+        }
+        .submit-btn:disabled {
+            background-color: #ccc;
+        }
+    </style>
+</head>
+<body>
+
+<div class="form-container">
+    <form id="car-review-form">
+        <div class="form-group">
+            <label for="brand">What brand is your car?</label>
+            <select id="brand">
+                <option value="">Select brand</option>
+                <option value="Smart">Smart</option>
+                <option value="Toyota">Toyota</option>
+                <option value="Ford">Ford</option>
+            </select>
+        </div>
+        <div class="form-group">
+            <label for="model">Which model?</label>
+            <select id="model" disabled>
+                <option value="">Select model</option>
+            </select>
+        </div>
+        <div class="form-group">
+            <label for="year">In which year was it registered?</label>
+            <select id="year" disabled>
+                <option value="">Select first registration</option>
+            </select>
+        </div>
+
+        <div class="form-group hidden" id="shape-group">
+            <label for="shape">What shape does it have?</label>
+            <div class="option-box" data-value="Roadster">Roadster</div>
+            <div class="option-box" data-value="Coupe">Coupe</div>
+            <div class="option-box" data-value="SUV">SUV</div>
+            <div class="option-box" data-value="Other">Other</div>
+            <input type="text" id="shape-other" class="hidden" placeholder="Enter shape">
+        </div>
+
+        <div class="form-group hidden" id="fuel-group">
+            <label for="fuel">What fuel does it use?</label>
+            <div class="option-box" data-value="Petrol">Petrol</div>
+            <div class="option-box" data-value="Diesel">Diesel</div>
+            <div class="option-box" data-value="Electric">Electric</div>
+            <div class="option-box" data-value="Hybrid">Hybrid</div>
+            <input type="text" id="fuel-other" class="hidden" placeholder="Enter fuel type">
+        </div>
+
+        <div class="form-group hidden" id="variant-group">
+            <label for="variant">Which model variant is it?</label>
+            <div class="option-box" data-value="1.6">1.6 L</div>
+            <div class="option-box" data-value="1.8">1.8 L</div>
+            <div class="option-box" data-value="Other">Other</div>
+            <input type="text" id="variant-other" class="hidden" placeholder="Enter model variant">
+        </div>
+
+        <div class="form-group hidden" id="horsepower-group">
+            <label for="horsepower">How many horsepower does it have?</label>
+            <div class="option-box" data-value="85 kW / 115 hp">85 kW / 115 hp</div>
+            <div class="option-box" data-value="55 kW">55 kW</div>
+            <div class="option-box" data-value="57 kW">57 kW</div>
+            <div class="option-box" data-value="61 kW">61 kW</div>
+            <div class="option-box" data-value="Other">Other</div>
+            <input type="text" id="horsepower-other" class="hidden" placeholder="Enter horsepower">
+        </div>
+
+        <div class="form-group hidden" id="transmission-group">
+            <label for="transmission">What transmission does it have?</label>
+            <div class="option-box" data-value="Automatic">Automatic</div>
+            <div class="option-box" data-value="Manual">Manual</div>
+            <div class="option-box" data-value="Other">Other</div>
+            <input type="text" id="transmission-other" class="hidden" placeholder="Enter transmission type">
+        </div>
+
+        <div class="form-group hidden" id="doors-group">
+            <label for="doors">How many doors does it have?</label>
+            <div class="option-box" data-value="2 doors">2 doors</div>
+            <div class="option-box" data-value="4 doors">4 doors</div>
+            <div class="option-box" data-value="Other">Other</div>
+            <input type="text" id="doors-other" class="hidden" placeholder="Enter number of doors">
+        </div>
+
+        <div class="form-group hidden" id="mileage-group">
+            <label for="mileage">What is the mileage?</label>
+            <input type="text" id="mileage" placeholder="Enter mileage">
+        </div>
+        
+        <div class="form-group hidden" id="additional-options-group">
+            <div class="form-group">
+                <label for="sell-plan">When do you plan to sell?</label>
+                <select id="sell-plan">
+                    <option value="">Select timeframe</option>
+                    <option value="next-4-weeks">Over the next 4 weeks</option>
+                    <option value="next-3-months">Over the next 3 months</option>
+                    <option value="next-6-months">Over the next 6 months</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="prefer-to-sell">Who do you prefer to sell to?</label>
+                <select id="prefer-to-sell">
+                    <option value="">Select option</option>
+                    <option value="private">To Private</option>
+                    <option value="dealer">To Dealer</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="email">Where can we send the sales offer?</label>
+                <input type="email" id="email" placeholder="Please enter email address">
+            </div>
+        </div>
+
+        <div class="form-group hidden" id="upload-image-group">
+            <label for="car-image">Upload an image of your car</label>
+            <input type="file" id="car-image" accept="image/*">
+        </div>
+
+        <button type="submit" class="submit-btn" disabled>View review now</button>
+    </form>
+</div>
+
+<script>
+    document.getElementById('brand').addEventListener('change', function() {
+        var brand = this.value;
+        var modelSelect = document.getElementById('model');
+        var yearSelect = document.getElementById('year');
+        var submitButton = document.querySelector('.submit-btn');
+
+        if (brand) {
+            modelSelect.removeAttribute('disabled');
+            modelSelect.innerHTML = '<option value="">Select model</option>';
+            if (brand === 'Smart') {
+                modelSelect.innerHTML += '<option value="Fortwo">Fortwo</option>';
+                modelSelect.innerHTML += '<option value="Forfour">Forfour</option>';
+            } else if (brand === 'Toyota') {
+                modelSelect.innerHTML += '<option value="Corolla">Corolla</option>';
+                modelSelect.innerHTML += '<option value="Camry">Camry</option>';
+            } else if (brand === 'Ford') {
+                modelSelect.innerHTML += '<option value="Focus">Focus</option>';
+                modelSelect.innerHTML += '<option value="Fiesta">Fiesta</option>';
+            }
+        } else {
+            modelSelect.setAttribute('disabled', 'true');
+            yearSelect.setAttribute('disabled', 'true');
+            submitButton.setAttribute('disabled', 'true');
+        }
+    });
+
+    document.getElementById('model').addEventListener('change', function() {
+        var model = this.value;
+        var yearSelect = document.getElementById('year');
+        var submitButton = document.querySelector('.submit-btn');
+
+        if (model) {
+            yearSelect.removeAttribute('disabled');
+            yearSelect.innerHTML = '<option value="">Select first registration</option>';
+            for (var year = 2000; year <= 2024; year++) {
+                yearSelect.innerHTML += '<option value="' + year + '">' + year + '</option>';
+            }
+        } else {
+            yearSelect.setAttribute('disabled', 'true');
+            submitButton.setAttribute('disabled', 'true');
+        }
+    });
+
+    document.getElementById('year').addEventListener('change', function() {
+        var year = this.value;
+        var submitButton = document.querySelector('.submit-btn');
+
+        if (year) {
+            document.getElementById('shape-group').classList.remove('hidden');
+        } else {
+            document.getElementById('shape-group').classList.add('hidden');
+            submitButton.setAttribute('disabled', 'true');
+        }
+    });
+
+    document.querySelectorAll('.option-box').forEach(function(box) {
+        box.addEventListener('click', function() {
+            var parentGroup = this.parentElement;
+            parentGroup.querySelectorAll('.option-box').forEach(function(option) {
+                option.classList.remove('selected');
+            });
+            this.classList.add('selected');
+
+            var otherInput = parentGroup.querySelector('input[type="text"]');
+            if (this.getAttribute('data-value') === 'Other') {
+                otherInput.classList.remove('hidden');
+            } else {
+                otherInput.classList.add('hidden');
+            }
+
+            // Show next group based on the current group ID
+            var currentGroup = parentGroup.id;
+            if (currentGroup === 'shape-group') {
+                document.getElementById('fuel-group').classList.remove('hidden');
+            } else if (currentGroup === 'fuel-group') {
+                document.getElementById('variant-group').classList.remove('hidden');
+            } else if (currentGroup === 'variant-group') {
+                document.getElementById('horsepower-group').classList.remove('hidden');
+            } else if (currentGroup === 'horsepower-group') {
+                document.getElementById('transmission-group').classList.remove('hidden');
+            } else if (currentGroup === 'transmission-group') {
+                document.getElementById('doors-group').classList.remove('hidden');
+            } else if (currentGroup === 'doors-group') {
+                document.getElementById('mileage-group').classList.remove('hidden');
+            }
+        });
+    });
+
+    document.getElementById('mileage').addEventListener('input', function() {
+        var mileage = this.value;
+        var additionalOptionsGroup = document.getElementById('additional-options-group');
+        var submitButton = document.querySelector('.submit-btn');
+        var uploadImageGroup = document.getElementById('upload-image-group');
+        
+        if (mileage) {
+            additionalOptionsGroup.classList.remove('hidden');
+            uploadImageGroup.classList.remove('hidden');
+            submitButton.removeAttribute('disabled');
+        } else {
+            additionalOptionsGroup.classList.add('hidden');
+            uploadImageGroup.classList.add('hidden');
+            submitButton.setAttribute('disabled', 'true');
+        }
+    });
+</script>
+
+</body>
+</html>
