<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" c initial-scale=1.0"> > > <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.3/build/css/intlTelInput.css"> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css"> <style> html, body { height: 100%; margin: 0; padding: 0; } body { font-family: 'Syne', 'Space Grotesk', sans-serif; background: #000000; /* Main background color */ color: #fff; } * { box-sizing: border-box; } .container { display: flex; align-items: center; justify-content: center; height: 100vh; margin-top: 500px; } .project-form { width: 500px; padding: 40px; background: rgba(107, 109, 89, 0.5); /* Lighter background color with transparency */ border-radius: 10px; margin: 0 auto; position: relative; transition: box-shadow 0.3s ease; } .slider-container { margin: 20 0px; /* Adjusted gap between sliders */ } .project-form:hover { box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); /* White glow effect on hover */ /* Adjust the values as needed */ } .project-form h1{ margin: 0 0 30px; text-align: center; color: #FFF; /* Headings color */ } .project-form h3 { margin: 0 0 30px; text-align: center; color: #FFF; /* Headings color */ } .user-box, .phone-input, .select-box, .currency-select, .slider-label-left, .slider-label { margin-bottom: 20px; } .project-form form { display: grid; gap: 20px; grid-template-columns: 1fr; /* Adjust the columns as needed */ box-sizing: border-box; /* Include padding and borders in the total width and height */ } /* Add media query for screens smaller than 768px (e.g., mobile devices) */ @media (max-width: 767px) { .project-form { width: 90%; /* Adjust width as needed for smaller screens */ padding: 20px; /* Adjust padding for smaller screens */ } } /* Add media query for screens between 768px and 1023px (e.g., tablets) */ @media (min-width: 768px) and (max-width: 1023px) { .project-form { width: 70%; /* Adjust width as needed for tablets */ } } /* Add media query for screens larger than 1023px (e.g., desktops) */ @media (min-width: 1024px) { .project-form { width: 80%; /* Adjust width as needed for larger screens */ } } /* Add media query for screens between 1024px and 1365px (e.g., laptops) */ @media (min-width: 1024px) and (max-width: 1365px) { .project-form { width: 75%; /* Adjust width as needed for laptops */ } } /* This section is for Phone Field */ .phone-input { position: relative; margin-bottom: 20px; } .phone-input label { position: absolute; top: -35px; left: 0; padding: 10px 0; font-size: 16px; color: #DAA520; pointer-events: none; transition: .5s; } .phone-input input { width: 100%; padding: 10px 10; font-size: 16px; color: #fff; border: none; border-bottom: 1px solid #fff; outline: none; background: transparent; transition: border-bottom-color 0.5s ease; } .iti__country-list { background-color: #36372D; /* Specify your background color */ arrowColor: #DAA520; color: #fff; /* Specify your text color */ /* Add any other styles you want to customize */ } .iti__arrow { border-top-color: #DAA520 !important; /* Replace #yourDesiredColor with your desired color */ } /* Override the arrow color in the country code dropdown */ .iti__country-list .iti__arrow { border-top-color: #DAA520 !important; /* Replace #yourDesiredColor with your desired color */ } .phone-input input:focus ~ label, .phone-input input:valid ~ label, .phone-input input:active ~ label { top: -20px; left: 0; color: #DAA520 !important; font-size: 12px; } .phone-input input:focus { border-bottom-color: #DAA520; } #phone-validation-icon { position: absolute; right: 290px; top: 30%; transform: translateY(-50%); font-size: 1.2em; transition: color 0.3s ease, text-shadow 0.3s ease; } /* Add new styles for email input and error message */ .email-input { position: relative; margin-bottom: 20px; } .email-input label { position: absolute; top: -35px; left: 0; padding: 10px 0; font-size: 16px; color: #DAA520; pointer-events: none; transition: .5s; } .email-input input { width: 100%; padding: 10px 10; font-size: 16px; color: #fff; border: none; border-bottom: 1px solid #fff; outline: none; background: transparent; transition: border-bottom-color 0.5s ease; } .email-input input:focus ~ label, .email-input input:valid ~ label { top: -20px; left: 0; color: #DAA520; font-size: 12px; } .email-input input:focus { border-bottom-color: #DAA520; } .email-error { color: red; font-size: 12px; margin-top: 5px; } /* This below is for services select box */ .project-form .select-box { position: relative; width: 100%; margin-bottom: 30px; } .project-form .select-box select { width: 100%; padding: 10px 0; font-size: 12px; color: transparent; /* Set font color to transparent */ border: none; border-bottom: 1px solid #FFFFFF; /* Set border color to transparent */ outline: none; background: #36372D; appearance: none; border-radius: 5px; } .project-form .select-box select::-ms-expand { display: none; } .project-form .select-box:after { content: "▼"; position: absolute; right: 2.4px; top: 5px; pointer-events: none; color: #DAA520; font-size: 12px; } .project-form .select-box label { position: absolute; top: 0; left: 10px; /* Adjusted left padding */ padding: 10px 0; font-size: 16px; color: #DAA520; pointer-events: none; transition: .5s; } .project-form .select-box select:focus + label, .project-form .select-box select.has-value + label { top: -30px; left: 0; color: #DAA520; font-size: 16px; } .project-form .select-box .sub-category { display: none; margin-top: 10px; } .project-form .select-box .sub-category select { margin-top: 5px; } .project-form .select-box select:focus { border-bottom-color: #DAA520; color: #FFFFFF; } .project-form .select-box select.has-value { color: #FFFFFF; } .project-form .select-box.rotate:after { transform: rotate(180deg); transition: transform 0.3s ease; /* You can adjust the transition duration and timing function */ } .project-form .custom-options { display: none; position: absolute; font-size: 12px; color: #000; top: calc(100% - -3px); /* Adjusted the top position */ left: 0; width: 100%; max-height: 80px; /* Adjusted the maximum height */ overflow-y: auto; /* Add a scrollbar if the options exceed the max height */ z-index: 1000; /* Adjust the z-index as needed to ensure it's above other elements */ animation: slideInOut 0.3s ease-in-out; background: #36372D; border-radius: 6px; box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); /* Color for the arrow */ border-bottom: 4px solid #DAA520; /* Color for the sliding handle */ scrollbar-color: #DAA520 rgb(47, 49, 41); scrollbar-width: thin; } /* Add a hover effect for the sliding handle */ .project-form .custom-options::-webkit-scrollbar-thumb:hover { background-color: #DAA520; } .project-form .custom-option { padding: 4px; color: rgb(25, 10, 20); /* Default faded text color */ cursor: pointer; transition: color 0.3s ease; /* Add a transition effect for smooth color change */ } .project-form .custom-option:hover { color: #FFFFFF; /* Change text color on hover as needed */ } .project-form .custom-option:last-child { border-bottom: none; } /* Add this style for the search box */ .project-form .custom-options input { width: calc(100% - 20px); margin: 10px; padding: 8px; box-sizing: border-box; border: 1px solid #DAA520; border-radius: 5px; background: #36372D; color: #FFFFFF; animation: slideIn 0.3s ease-in-out; /* Add the animation here */ } @keyframes slideIn { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideInOut { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* This section is for name email fields */ .project-form .user-box { position: relative; } .project-form .user-box input { width: 100%; padding: 10px 0 10px 30px; /* Adjust the padding to accommodate the icon on the left */ font-size: 16px; color: #fff; margin-bottom: 30px; border: none; border-bottom: 1px solid #fff; outline: none; background: transparent; position: relative; z-index: 1; } .project-form .user-box label { position: absolute; top: 10px; /* Adjust the top position to your preference */ left: 0; padding: 0 5px; /* Adjust padding to your preference */ font-size: 16px; color: #DAA520; pointer-events: none; transition: .5s; opacity: 0; /* Adjust the opacity to your preference */ z-index: 2; } .project-form .user-box input:focus ~ label, .project-form .user-box input:valid ~ label { top: -20px; opacity: 1; font-size: 16px; } .project-form .user-box input:focus::placeholder { opacity: 0; /* Hide the placeholder on focus */ } .project-form .user-box input:not(:placeholder-shown) ~ label { top: -20px; opacity: 1; } .project-form .user-box input:focus { border-bottom-color: #DAA520; } /* Validation and Field Icons */ .user-box .icon::before { content: ""; /* Ensure that the content property is present */ display: inline-block; vertical-align: middle; /* Align the icon vertically in the middle */ } .material-icons { font-size: 2px; /* Adjust the font size of the icons */ color: #FFF; /* Change the color of the icons */ } /* Additional customization for positioning */ #name-icon, #email-icon { position: absolute; left: 2px; /* Adjust the left position to your preference */ top: 25%; /* Adjust the top position to center vertically */ transform: translateY(-50%); } .icon { position: absolute; right: 10px; top: 30%; transform: translateY(-50%); font-size: 1.2em; transition: color 0.3s ease, text-shadow 0.3s ease; } .tick-icon { color: green; } .exclamation-icon { color: red; } .glow { text-shadow: 0 0 10px #4CAF50; /* Adjust the third parameter to control the glow intensity */ color: #4CAF50; } /* This section is for Textarea */ .project-form .other-description { margin-bottom: 20px; position: relative; /* Added position relative */ } .project-form .other-description label { position: absolute; top: 0px; /* Adjusted top position */ left: 0px; /* Adjusted left position */ padding: 0 5px; /* Adjusted padding */ font-size: 16px; color: #DAA520; pointer-events: none; transition: .5s; background-color: transparent; /* Added background-color */ } .project-form .other-description textarea { width: calc(100% - 20px); /* Adjusted width with padding */ padding: 10px 10px 10px; font-size: 16px; color: #fff; border: 1px solid #fff; border-radius: 5px; outline: none; background: transparent; transition: border-color 0.5s ease; resize: vertical; margin-top: 40px; } .project-form .other-description textarea:focus ~ label, .project-form .other-description textarea:valid ~ label, .project-form .other-description textarea:active ~ label { top: -20px; left: 10px; color: #DAA520; font-size: 12px; } .project-form .other-description textarea:focus { border-color: #DAA520; } /* Placeholder styling */ .project-form .other-description textarea::placeholder { color: #fff; opacity: 0.7; position: absolute; top: 10px; /* Adjusted top position for placeholder */ left: 10px; /* Adjusted left position for placeholder */ font-size: 16px; } /* This section is for Currency Selector */ .project-form .currency-select { position: relative; margin-bottom: 30px; margin-top: 30px; } .project-form .currency-select label { position: absolute; top: -35px; left: 0; padding: 10px 0; font-size: 16px; color:#DAA520; pointer-events: none; transition: .5s; } .project-form .currency-select select { width: 100%; padding: 10px 10; font-size: 12px; color: #fff; border: none; border-bottom: 1px solid #fff; outline: none; background: #36372D; appearance: none; transition: border-bottom-color 0.5s ease, color 0.5s ease; } .project-form .currency-select select::-ms-expand { display: none; } .project-form .currency-select:after { content: "▼"; position: absolute; right: 2.6px; top: -2px; pointer-events: none; color: #DAA520; font-size: 12px; } .project-form .currency-select.open:after { transform: rotate(180deg); /* Rotate the arrow when the select is open */ } .project-form .currency-select select:focus ~ label, .project-form .currency-select select:valid ~ label, .project-form .currency-select select:active ~ label { top: -20px; left: 0; font-size: 12px; } .project-form .currency-select select:focus { border-bottom-color: #DAA520; } .project-form .currency-select label::after, .range::before { content: attr(data-currency); margin-left: 5px; } /* This is for budget and timeline range slider */ .project-form .irs--flat .irs-line { top: 25px; height: 1px; background-color: #000; border-radius: 4px; } .project-form .irs--flat .irs-bar { top: 25px; height: 2px; background-color: #FFF; } .project-form .irs--flat .irs-handle { top: 18px; width: 16px; height: 16px; border-radius: 50%; /* Make it a circle */ background-color: #fff; } .project-form .glow { box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* Adjust the shadow color and size */ } .project-form .glow-grid-text { color: #fff; /* Adjust the text color for better visibility */ text-shadow: 0 0 10px rgba(255, 250, 250, 0.7); /* Adjust the shadow color and size for grid text */ } .project-form .irs--flat .irs-handle > i:first-child { position: absolute; display: block; top: 3px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 100%; /* Make it a circle */ background-color: #DAA520; } .project-form .irs--flat .irs-handle.state_hover > i:first-child, .project-form .irs--flat .irs-handle:hover > i:first-child { background-color: #FFF; } .project-form .irs--flat .irs-min, .project-form .irs--flat .irs-max { top: 0; padding: 1px 3px; color: #999; font-size: 12px; line-height: 1.0; text-shadow: none; background-color: #e1e4e9; border-radius: 4px; } .project-form .irs--flat .irs-from, .project-form .irs--flat .irs-to, .project-form .irs--flat .irs-single { color: #000000; font-size: 12px; line-height: 1.0; text-shadow: none; padding: 1px 5px; background-color: #DAA520; border-radius: 4px; } .project-form .irs--flat .irs-from:before, .project-form .irs--flat .irs-to:before, .project-form .irs--flat .irs-single:before { position: absolute; display: block; content: ""; bottom: -6px; left: 50%; width: 0; height: 0; margin-left: -3px; overflow: hidden; border: 3px solid transparent; border-top-color: #FFF; } .project-form .irs--flat .irs-grid-pol { background-color: #DAA520; } .project-form .irs--flat .irs-grid-text { color: #FFF; font-size: 10px; } /* This is for Radio Buttons */ .project-form .filter { position: absolute; left: -9999px; } .project-form .radios-boxes { display: flex; flex-direction: column; /* Arrange radios and labels in a column */ align-items: center; /* Center horizontally */ justify-content: center; /* Center vertically */ margin-top: 40px; } .project-form .radios-boxes .label-select-timeline { position: absolute; /* Change to absolute positioning */ top: 1080px; /* Adjust the top position as needed */ left: 20px; /* Adjust the left position to align it to the left */ padding: 10px 0; font-size: 16px; color: #DAA520; } .project-form .radios { display: flex; align-items: center; gap: 20px; /* Adjust the gap between radio buttons as needed */ filter: url('#gooeyness'); overflow: hidden; position: relative; margin-top: 10px; /* Adjust the top margin as needed */ } .project-form .radio { -moz-appearance: none; -ms-appearance: none; -webkit-appearance: none; appearance: none; border-radius: 60%; border: 12px solid #fff; cursor: pointer; height: 20px; margin: 25px; padding: 10px 10px; outline: 0; -webkit-tap-highlight-color: transparent; transition: border-color 800ms; width: 20px; /* Adjust the positioning as needed */ position: relative; top: 1px; /* Move the radio button 10px down (adjust as needed) */ left: -15px; /* Move the radio button 20px to the right (adjust as needed) */ } .project-form .radio.active { border-color: white; background: rgba(255, 155, 125, 0.4); transform: scale(0); animation: breathing 1s infinite alternate; } @keyframes breathing { to { transform: scale(1.1); } } .project-form .ball { background: white; border-radius: 50%; height: 34px; pointer-events: none; position: absolute; top: 30px; transform: translateX(-80px); /* Adjust the X-axis position */ transition: transform 800ms; width: 34px; } .project-form .ball.pos0 { transform: translateX(20px); } .project-form .ball.pos1 { transform: translateX(130px); } .project-form .ball.pos2 { transform: translateX(240px); } .project-form .radios-boxes .labels { display: flex; align-items: center; justify-content: center; margin-top: -40px; /* Adjust the top margin as needed */ margin-right: -40px; } .project-form .radios-boxes .label { color: #DAA520; cursor: pointer; font-size: 12px; line-height: 50px; padding: 10px 10px; -webkit-tap-highlight-color: transparent; transition: color 800ms; margin-right: 60px; /* Adjust the margin as needed */ } .project-form .radios-boxes .label.active { color: white; } .project-form form button { background: transparent; color: #fff; /* Change text color to white */ border: 0px solid #fff; /* Change border color to white */ border-radius: 10px; position: relative; display: inline-block; padding: 10px 20px; font-size: 16px; text-decoration: none; text-transform: uppercase; overflow: hidden; transition: .5s; margin-top: 60px; letter-spacing: 4px; cursor: pointer; } .project-form form button:hover { background: #fff; /* Change background color to white on hover */ color: #000000; /* Change text color on hover to gold */ border-radius: 4; box-shadow: 0 0 5px #fff, /* Change shadow color to white */ 0 0 25px #fff, /* Change shadow color to white */ 0 0 50px #fff, /* Change shadow color to white */ 0 0 100px #fff; /* Change shadow color to white */ } .project-form form button span { position: absolute; display: block; } .project-form form button span:nth-child(1) { top: 0; left: -100%; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #fff); /* Change gradient color to white */ animation: btn-anim1 1s linear infinite; } @keyframes btn-anim1 { 0% { left: -100%; } 50%, 100% { left: 100%; } } .project-form form button span:nth-child(2) { top: -100%; right: 0; width: 2px; height: 100%; background: linear-gradient(180deg, transparent, #fff); /* Change gradient color to white */ animation: btn-anim2 1s linear infinite; animation-delay: 0.25s; } @keyframes btn-anim2 { 0% { top: -100%; } 50%, 100% { top: 100%; } } .project-form form button span:nth-child(3) { bottom: 0; right: -100%; width: 100%; height: 2px; background: linear-gradient(270deg, transparent, #fff); /* Change gradient color to white */ animation: btn-anim3 1s linear infinite; animation-delay: 0.5s; } @keyframes btn-anim3 { 0% { right: -100%; } 50%, 100% { right: 100%; } } .project-form form button span:nth-child(4) { bottom: -100%; left: 0; width: 2px; height: 100%; background: linear-gradient(360deg, transparent, #fff); /* Change gradient color to white */ animation: btn-anim4 1s linear infinite; animation-delay: 0.75s; } </style> </head> <body>

Start a Project

>" method="POST"> <!-- About Yourself -->

About Yourself

<input type="text" name="name" id="name" required placeholder="John Doe"> person
<input type="tel" id="phone" name="phone" placeholder=""> <!-- Add this line for the validation icon -->
<!-- What do you need? -->

What do you need?

<!-- Service Selection -->
<!-- Category Selection -->
<!-- Type Selection -->
<!-- Textarea for entering custom service/subcategory -->
<textarea id="other-description" class="form-control" rows="4" placeholder="Enter your description here"></textarea>
<!-- Your Approximation? -->

Your Approximation?

<!-- Currency Selection Box -->
<!-- Budget Slider --> <input type="text" id="budget-slider" /> <!-- Radio Buttons -->
<input type="radio" name="radio" id="radio1" class="radio" value="Days"> <input type="radio" name="radio" id="radio2" class="radio" value="Weeks"> <input type="radio" name="radio" id="radio3" class="radio" value="Months">
<!-- Timeline Slider -->
<input type="text" id="timeline-slider" />
<!-- Submit Button --> </form> <?php if ($_SERVER["REQUEST_METHOD"] == "POST") { // Retrieve form data $name = $_POST["name"]; $email = $_POST["email"]; $phone = $_POST["phone"]; $service = $_POST["service"]; $subcategory = $_POST["subcategory"]; $subsubcategory = $_POST["subsubcategory"]; $currency = $_POST["currency"]; $budget = $_POST["budget"]; $timeline = $_POST["timeline"]; // Compose the email message $subject = "New Project Submission"; $message = "Name: $name\n"; $message .= "Email: $email\n"; $message .= "Phone: $phone\n"; $message .= "Service: $service\n"; $message .= "Subcategory: $subcategory\n"; $message .= "Subsubcategory: $subsubcategory\n"; $message .= "Currency: $currency\n"; $message .= "Budget: $budget\n"; $message .= "Timeline: $timeline\n"; // Replace this email address with your desired recipient email $to = "aevuminventix@gmail.com"; // Send the email $headers = "From: $email"; mail($to, $subject, $message, $headers); // Redirect after submitting the form header("Location: thank-you.html"); exit(); } else { // Handle invalid requests http_response_code(400); echo "Invalid request!"; } ?>
[removed][removed] [removed][removed] [removed][removed] [removed][removed] [removed][removed] [removed] // This is for submit button section function submitForm() { // You can add any additional logic or validation here before submitting the form document.querySelector('form').submit(); } // This is for Name field section document.addEventListener("DOMContentLoaded", function () { const nameInput = document.querySelector("input[name='name']"); const emailInput = document.querySelector("input[name='email']"); const emailError = document.querySelector("#email-error"); const nameIcon = document.getElementById("name-validation-icon"); const emailIcon = document.getElementById("email-icon"); nameInput.addEventListener("input", function () { const validName = /^[A-Za-z\s'-.]+$/.test(nameInput.value); nameInput.style.borderBottomColor = validName ? '#fff' : 'red'; const nameIcon = document.getElementById("name-validation-icon"); if (!validName) { nameIcon[removed] = ''; nameIcon.classList.remove("glow"); // Remove glow class if invalid } else { nameIcon[removed] = ''; // Add glow class if valid } }); emailInput.addEventListener("input", function () { const validEmail = validateEmail(emailInput.value); emailInput.style.borderBottomColor = validEmail ? '#fff' : 'red'; const emailIcon = document.getElementById("email-validation-icon"); if (!validEmail) { emailError.textContent = "Invalid email format"; emailIcon[removed] = ''; emailIcon.classList.remove("glow"); // Remove glow class if invalid } else { emailError.textContent = ""; emailIcon[removed] = ''; // Add glow class if valid } }); // Function to validate email using a more strict regular expression function validateEmail(email) { // A stricter email validation regex const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/; return emailRegex.test(email); } }); // This is for Currency Selector and Budget Slider section $(document).ready(function () { let currencySymbol = getCurrencySymbol("USD"); // Initialize the ionRangeSlider const initializeSlider = (prefix) => { $("#budget-slider").ionRangeSlider({ type: "double", grid: true, min: 0, max: 200000, from: 500, to: 5000, step: 100, prefix: prefix, onFinish: function (data) { let selectedValues = `${currencySymbol}${data.from} - ${currencySymbol}${data.to}`; if (data.to === this.max) { selectedValues += "+"; } console.log("Selected values:", selectedValues); } }); // Add glow effect to handles and grid text by default $(".irs--flat .irs-handle").addClass("glow"); $(".irs--flat .irs-grid-text").addClass("glow-grid-text"); // Add plus sign to maximum value in grid text const maxGridText = $(".irs--flat .irs-grid-text:last"); const originalText = maxGridText.text(); maxGridText.text(originalText + "+"); }; initializeSlider(currencySymbol); // Update the slider when the currency selection changes $("#currency").on("change", function () { currencySymbol = getCurrencySymbol($(this).val()); // Destroy the existing slider $("#budget-slider").data("ionRangeSlider").destroy(); // Re-initialize the slider with the new prefix initializeSlider(currencySymbol); }); // Toggle rotation class for currency select arrow $(".currency-select").click(function() { $(this).toggleClass("open"); }); }); function getCurrencySymbol(currencyCode) { switch (currencyCode) { case "USD": return "$"; case "EUR": return "€"; case "GBP": return "£"; default: return "$"; // Default to USD } } // This is for Radio Buttons let radios = document.querySelectorAll('.radio'); let labels = document.querySelectorAll('.label'); let ball = document.querySelector('.ball'); let prevRadio, prevLabel; let selectedValue = "Days"; // Default selected value radios.forEach((radio, index) => { radio.addEventListener('click', function (e) { if (prevRadio) prevRadio.classList.toggle('active'); if (prevLabel) prevLabel.classList.toggle('active'); radio.classList.toggle('active'); prevRadio = radio; labels[index].classList.toggle('active'); prevLabel = labels[index]; ball.className = `ball pos${index}`; // Apply breathing effect to the selected radio button if (radio.classList.contains('active')) { radio.classList.add('breathing'); } else { radio.classList.remove('breathing'); } // Store the selected value selectedValue = radio.value; // Log the selected value (you can replace this with your desired logic) console.log('Selected Value:', selectedValue); // Update postfix of the slider with the selected radio button value $("#timeline-slider").data("ionRangeSlider").update({ postfix: ` ${selectedValue}` }); }); }); // Add a listener for animation end to remove the breathing class radios.forEach((radio) => { radio.addEventListener('animationend', function () { radio.classList.remove('breathing'); }); }); // This below is For Timeline Range Slider $(document).ready(function () { // Initialize the ionRangeSlider for timeline selection $("#timeline-slider").ionRangeSlider({ type: "double", grid: true, min: 0, max: 24, from: 1, to: 12, step: 1, postfix: ` ${selectedValue}`, // Set default postfix based on the default selected value onFinish: function (data) { let selectedValues = `${data.from} - ${data.to}`; if (data.to === this.max) { selectedValues += "+"; } // Append the selected radio button value to the slider grid text const selectedRadioValue = selectedValue ? ` ${selectedValue}` : ''; selectedValues += selectedRadioValue; console.log("Selected values:", selectedValues); } }); // Add glow effect to handles and grid text by default $(".irs--flat .irs-handle").addClass("glow"); $(".irs--flat .irs-grid-text").addClass("glow-grid-text"); // Add plus sign to maximum value in grid text const maxGridText = $(".irs--flat .irs-grid-text:last"); const originalText = maxGridText.text(); maxGridText.text(originalText + "+"); }); // This is for Phone Field section document.addEventListener("DOMContentLoaded", function () { const input = document.querySelector("#phone"); const icon = document.querySelector("#phone-validation-icon"); // Assuming you have an element with this ID for the validation icon const iti = window.intlTelInput(input, { initialCountry: "auto", geoIpLookup: function (success, failure) { $.get("https://ipinfo.io", function () {}, "jsonp").always(function (resp) { const countryCode = (resp && resp.country) ? resp.country : "us"; success(countryCode); }); }, utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/utils.js", }); input.addEventListener("input", function () { input.style.borderBottomColor = '#FFF'; const isValidNumber = iti.isValidNumber(); if (!isValidNumber) { input.style.borderBottomColor = 'red'; icon[removed] = ''; icon.classList.remove("glow"); // Remove glow class if invalid } else { const countryData = iti.getSelectedCountryData(); const formattedNumber = iti.getNumber(intlTelInputUtils.numberFormat.NATIONAL); input.value = formattedNumber; icon[removed] = ''; // Add glow class if valid } }); }); // This is for What do you need? section document.addEventListener("DOMContentLoaded", function() { var selectBoxes = document.querySelectorAll('.select-box select'); selectBoxes.forEach(function(selectBox) { var customOptions = document.createElement('div'); customOptions.className = 'custom-options'; customOptions.id = 'custom-' + selectBox.id + '-options'; selectBox.parentElement.appendChild(customOptions); selectBox.addEventListener('change', function() { if (selectBox.value !== '' && !selectBox.options[selectBox.selectedIndex].disabled) { selectBox.classList.add('has-value'); } else { selectBox.classList.remove('has-value'); } }); // Add custom options to the respective select box var customOptionsId = 'custom-' + selectBox.id + '-options'; var customOptionsContainer = document.getElementById(customOptionsId); // Replace 'mouseover' event with 'click' selectBox.addEventListener('click', function(event) { var selectBoxContainer = selectBox.closest('.select-box'); var allSelectBoxes = document.querySelectorAll('.select-box'); // Close all open dropdowns closeAllCustomOptions(); // Remove 'rotate' class from all select boxes allSelectBoxes.forEach(function(box) { box.classList.remove('rotate'); }); // Toggle 'rotate' class on the current select box container selectBoxContainer.classList.toggle('rotate'); event.stopPropagation(); if (selectBoxContainer.classList.contains('rotate')) { // Open dropdown and update custom options updateCustomOptions(selectBox, customOptionsContainer); } }); }); document.body.addEventListener('click', function(event) { // Close all custom options when clicking outside the select boxes closeAllCustomOptions(); removeRotateClassFromSelectBoxes(); }); function closeAllCustomOptions() { var allCustomOptionsContainers = document.querySelectorAll('.custom-options'); allCustomOptionsContainers.forEach(function(container) { container.style.display = 'none'; }); } function removeRotateClassFromSelectBoxes() { var allSelectBoxes = document.querySelectorAll('.select-box select'); allSelectBoxes.forEach(function(selectBox) { selectBox.parentElement.classList.remove('rotate'); }); } }); function updateCustomOptions(selectBox, customOptionsContainer) { var options = selectBox.options; customOptionsContainer[removed] = ''; // Add search box var searchInput = document.createElement('input'); searchInput.type = 'text'; searchInput.placeholder = 'Search...'; // Prevent the click on the search box from closing the dropdown searchInput.addEventListener('click', function(event) { event.stopPropagation(); }); searchInput.addEventListener('input', function() { filterOptions(selectBox, customOptionsContainer, this.value); }); customOptionsContainer.appendChild(searchInput); for (var i = 1; i < options.length; i++) { var customOpti customOption.className = 'custom-option'; customOption.textC customOption.addEventListener('click', function() { selectBox.value = this.textContent; selectBox.dispatchEvent(new Event('change')); customOptionsContainer.style.display = 'none'; }); customOptionsContainer.appendChild(customOption); } searchInput.style.display = 'none'; customOptionsContainer.style.display = 'block'; // Add event listener to document for key press document.addEventListener('keydown', function() { searchInput.style.display = 'block'; }); } // Add a function to filter options based on the search input function filterOptions(selectBox, customOptionsContainer, searchText) { searchText = searchText.toLowerCase(); var opti for (var i = 1; i < options.length; i++) { var opti var customOpti if (optionText.includes(searchText)) { customOption.style.display = 'block'; } else { customOption.style.display = 'none'; } } } function updateCategories() { var serviceSelect = document.getElementById('service'); var categorySelect = document.getElementById('category'); var typeSelect = document.getElementById('type'); var categoryC var typeC var customOpti var otherDescripti // Reset and hide category categorySelect[removed] = ''; typeSelect[removed] = ''; categoryContainer.style.display = 'none'; typeContainer.style.display = 'none'; customOptionsContainer.style.display = 'none'; otherDescriptionDiv.style.display = 'none'; // Check if the selected value is 'Other' if (serviceSelect.value === 'Other') { categoryContainer.style.display = 'none'; customOptionsContainer.style.display = 'none'; otherDescriptionDiv.style.display = 'block'; } else { // Populate categories based on the selected service if (serviceSelect.value === 'Designing') { addOption(categorySelect, 'Graphic Design', 'Graphic Design'); addOption(categorySelect, 'UI/UX Design', 'UI/UX Design'); } else if (serviceSelect.value === 'Digital Marketing') { addOption(categorySelect, 'SEO', 'SEO'); addOption(categorySelect, 'Content Marketing', 'Content Marketing'); } // Show category container if a service is selected categoryContainer.style.display = serviceSelect.value ? 'block' : 'none'; customOptionsContainer.style.display = 'none'; } } function updateTypes() { var categorySelect = document.getElementById('category'); var typeSelect = document.getElementById('type'); var typeContainer = document.querySelector('.sub-sub-category'); var customOptionsContainer = document.getElementById('custom-type-options'); // Reset and hide type typeSelect[removed] = ''; // Check if the selected value is 'Other' if (categorySelect.value === 'Other') { typeContainer.style.display = 'none'; customOptionsContainer.style.display = 'none'; } else { // Populate types based on the selected category if (categorySelect.value === 'Graphic Design') { addOption(typeSelect, 'Logo Design', 'Logo Design'); addOption(typeSelect, 'Brochure Design', 'Brochure Design'); addOption(typeSelect, 'Poster Design', 'Poster Design'); // Add other subsubcategories as needed } else if (categorySelect.value === 'UI/UX Design') { addOption(typeSelect, 'Mobile App Interface Design', 'Mobile App Interface Design'); addOption(typeSelect, 'User Flow Optimization', 'User Flow Optimization'); // Add other subsubcategories as needed } else if (categorySelect.value === 'SEO') { addOption(typeSelect, 'On-page optimization', 'On-page optimization'); addOption(typeSelect, 'Off-page optimization', 'Off-page optimization'); addOption(typeSelect, 'Keyword research', 'Keyword research'); addOption(typeSelect, 'SEO audits', 'SEO audits'); } else if (categorySelect.value === 'Content Marketing') { addOption(typeSelect, 'Content strategy', 'Content strategy'); addOption(typeSelect, 'Blog writing', 'Blog writing'); addOption(typeSelect, 'Infographic creation', 'Infographic creation'); addOption(typeSelect, 'Video content production', 'Video content production'); } // Show type container if a category is selected typeContainer.style.display = categorySelect.value ? 'block' : 'none'; customOptionsContainer.style.display = 'none'; } } function addOption(select, value, text) { var option = document.createElement('option'); option.value = value; option.text = text; select.add(option); } [removed] </body> </html>