Facebook

contact form safest cryptocurrency exchange

From amir, 2 Weeks ago, written in HTML5.
URL https://pastebin.pl/view/d5676e7f
Embed
Download Paste or View Raw
Hits: 126
  1.  
  2. <!DOCTYPE html>
  3. &lt;html lang="en"&gt;
  4. &lt;head&gt;
  5.   &lt;meta charset="UTF-8"&gt;
  6.   &lt;meta name="viewport" c initial-scale=1.0"&gt;
  7.   >
  8.  
  9.   >
  10.   &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/css/intlTelInput.css"&gt;
  11.   &lt;link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"&gt;
  12.   &lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"&gt;
  13.   &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css"&gt;
  14.  
  15.  
  16.  
  17. &lt;style&gt;
  18.  
  19. html, body {
  20.   height: 100%;
  21.   margin: 0;
  22.   padding: 0;
  23. }
  24.  
  25. body {
  26.   font-family: 'Syne', 'Space Grotesk', sans-serif;
  27.   background: #000000; /* Main background color */
  28.   color: #fff;
  29. }
  30.  
  31. * {
  32.   box-sizing: border-box;
  33. }
  34.  
  35. .container {
  36.   display: flex;
  37.   align-items: center;
  38.   justify-content: center;
  39.   height: 100vh;
  40.   margin-top: 500px;
  41. }
  42.  
  43. .project-form {
  44.   width: 500px;
  45.   padding: 40px;
  46.   background: rgba(107, 109, 89, 0.5); /* Lighter background color with transparency */
  47.   border-radius: 10px;
  48.   margin: 0 auto;
  49.   position: relative;
  50.   transition: box-shadow 0.3s ease;
  51. }
  52.  
  53. .slider-container {
  54.       margin: 20 0px; /* Adjusted gap between sliders */
  55.     }
  56.    
  57. .project-form:hover {
  58.   box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); /* White glow effect on hover */
  59.   /* Adjust the values as needed */
  60. }
  61.  
  62. .project-form h1{
  63.   margin: 0 0 30px;
  64.   text-align: center;
  65.   color: #FFF; /* Headings color */
  66. }
  67.  
  68. .project-form h3 {
  69.   margin: 0 0 30px;
  70.   text-align: center;
  71.   color: #FFF; /* Headings color */
  72. }
  73.  
  74. .user-box, .phone-input, .select-box, .currency-select, .slider-label-left, .slider-label {
  75.   margin-bottom: 20px;
  76. }
  77.  
  78. .project-form form {
  79.   display: grid;
  80.   gap: 20px;
  81.   grid-template-columns: 1fr; /* Adjust the columns as needed */
  82.   box-sizing: border-box; /* Include padding and borders in the total width and height */
  83. }
  84.  
  85.  
  86. /* Add media query for screens smaller than 768px (e.g., mobile devices) */
  87. @media (max-width: 767px) {
  88.   .project-form {
  89.     width: 90%; /* Adjust width as needed for smaller screens */
  90.     padding: 20px; /* Adjust padding for smaller screens */
  91.   }
  92. }
  93.  
  94. /* Add media query for screens between 768px and 1023px (e.g., tablets) */
  95. @media (min-width: 768px) and (max-width: 1023px) {
  96.   .project-form {
  97.     width: 70%; /* Adjust width as needed for tablets */
  98.   }
  99. }
  100.  
  101. /* Add media query for screens larger than 1023px (e.g., desktops) */
  102. @media (min-width: 1024px) {
  103.   .project-form {
  104.     width: 80%; /* Adjust width as needed for larger screens */
  105.   }
  106. }
  107.  
  108. /* Add media query for screens between 1024px and 1365px (e.g., laptops) */
  109. @media (min-width: 1024px) and (max-width: 1365px) {
  110.   .project-form {
  111.     width: 75%; /* Adjust width as needed for laptops */
  112.   }
  113. }
  114.  
  115. /* This section is for Phone Field */
  116. .phone-input {
  117.   position: relative;
  118.   margin-bottom: 20px;
  119. }
  120.  
  121. .phone-input label {
  122.   position: absolute;
  123.   top: -35px;
  124.   left: 0;
  125.   padding: 10px 0;
  126.   font-size: 16px;
  127.   color: #DAA520;
  128.   pointer-events: none;
  129.   transition: .5s;
  130. }
  131.  
  132. .phone-input input {
  133.   width: 100%;
  134.   padding: 10px 10;
  135.   font-size: 16px;
  136.   color: #fff;
  137.   border: none;
  138.   border-bottom: 1px solid #fff;
  139.   outline: none;
  140.   background: transparent;
  141.   transition: border-bottom-color 0.5s ease;
  142. }
  143.  
  144. .iti__country-list {
  145.   background-color: #36372D; /* Specify your background color */
  146.   arrowColor: #DAA520;
  147.   color: #fff; /* Specify your text color */
  148.   /* Add any other styles you want to customize */
  149. }
  150.  
  151. .iti__arrow {
  152.   border-top-color: #DAA520 !important; /* Replace #yourDesiredColor with your desired color */
  153. }
  154.  
  155. /* Override the arrow color in the country code dropdown */
  156. .iti__country-list .iti__arrow {
  157.   border-top-color: #DAA520 !important; /* Replace #yourDesiredColor with your desired color */
  158. }
  159.  
  160. .phone-input input:focus ~ label,
  161. .phone-input input:valid ~ label,
  162. .phone-input input:active ~ label {
  163.   top: -20px;
  164.   left: 0;
  165.   color: #DAA520 !important;
  166.   font-size: 12px;
  167. }
  168.  
  169. .phone-input input:focus {
  170.   border-bottom-color: #DAA520;
  171. }
  172.  
  173. #phone-validation-icon {
  174.   position: absolute;
  175.   right: 290px;
  176.   top: 30%;
  177.   transform: translateY(-50%);
  178.   font-size: 1.2em;
  179.   transition: color 0.3s ease, text-shadow 0.3s ease;
  180. }
  181.  
  182. /* Add new styles for email input and error message */
  183.   .email-input {
  184.     position: relative;
  185.     margin-bottom: 20px;
  186.   }
  187.  
  188.   .email-input label {
  189.     position: absolute;
  190.     top: -35px;
  191.     left: 0;
  192.     padding: 10px 0;
  193.     font-size: 16px;
  194.     color: #DAA520;
  195.     pointer-events: none;
  196.     transition: .5s;
  197.   }
  198.  
  199.   .email-input input {
  200.     width: 100%;
  201.     padding: 10px 10;
  202.     font-size: 16px;
  203.     color: #fff;
  204.     border: none;
  205.     border-bottom: 1px solid #fff;
  206.     outline: none;
  207.     background: transparent;
  208.     transition: border-bottom-color 0.5s ease;
  209.   }
  210.  
  211.   .email-input input:focus ~ label,
  212.   .email-input input:valid ~ label {
  213.     top: -20px;
  214.     left: 0;
  215.     color: #DAA520;
  216.     font-size: 12px;
  217.   }
  218.  
  219.   .email-input input:focus {
  220.     border-bottom-color: #DAA520;
  221.   }
  222.  
  223.   .email-error {
  224.     color: red;
  225.     font-size: 12px;
  226.     margin-top: 5px;
  227.   }
  228.  
  229. /* This below is for services select box */
  230. .project-form .select-box {
  231.   position: relative;
  232.   width: 100%;
  233.   margin-bottom: 30px;
  234. }
  235.  
  236. .project-form .select-box select {
  237.   width: 100%;
  238.   padding: 10px 0;
  239.   font-size: 12px;
  240.   color: transparent; /* Set font color to transparent */
  241.   border: none;
  242.   border-bottom: 1px solid #FFFFFF; /* Set border color to transparent */
  243.   outline: none;
  244.   background: #36372D;
  245.   appearance: none;
  246.   border-radius: 5px;
  247. }
  248.  
  249. .project-form .select-box select::-ms-expand {
  250.  display: none;
  251. }
  252.  
  253. .project-form .select-box:after {
  254.  content: "▼";
  255.  position: absolute;
  256.  right: 2.4px;
  257.  top: 5px;
  258.  pointer-events: none;
  259.  color: #DAA520;
  260.  font-size: 12px;
  261. }
  262.  
  263. .project-form .select-box label {
  264.   position: absolute;
  265.   top: 0;
  266.   left: 10px; /* Adjusted left padding */
  267.   padding: 10px 0;
  268.   font-size: 16px;
  269.   color: #DAA520;
  270.   pointer-events: none;
  271.   transition: .5s;
  272. }
  273.  
  274. .project-form .select-box select:focus + label,
  275. .project-form .select-box select.has-value + label {
  276.   top: -30px;
  277.   left: 0;
  278.   color: #DAA520;
  279.   font-size: 16px;
  280. }
  281.  
  282.  
  283. .project-form .select-box .sub-category {
  284.   display: none;
  285.   margin-top: 10px;
  286. }
  287.  
  288. .project-form .select-box .sub-category select {
  289.   margin-top: 5px;
  290. }
  291.  
  292. .project-form .select-box select:focus {
  293.   border-bottom-color: #DAA520;
  294.   color: #FFFFFF;
  295.  
  296. }
  297. .project-form .select-box select.has-value {
  298.   color: #FFFFFF;
  299. }
  300.  
  301. .project-form .select-box.rotate:after {
  302.   transform: rotate(180deg);
  303.   transition: transform 0.3s ease; /* You can adjust the transition duration and timing function */
  304. }
  305.  
  306.  .project-form .custom-options {
  307.             display: none;
  308.             position: absolute;
  309.             font-size: 12px;
  310.             color: #000;
  311.             top: calc(100% - -3px);
  312.             /* Adjusted the top position */
  313.             left: 0;
  314.             width: 100%;
  315.             max-height: 80px;
  316.             /* Adjusted the maximum height */
  317.             overflow-y: auto;
  318.             /* Add a scrollbar if the options exceed the max height */
  319.             z-index: 1000;
  320.             /* Adjust the z-index as needed to ensure it's above other elements */
  321.             animation: slideInOut 0.3s ease-in-out;
  322.             background: #36372D;
  323.             border-radius: 6px;
  324.             box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
  325.             /* Color for the arrow */
  326.             border-bottom: 4px solid #DAA520;
  327.  
  328.             /* Color for the sliding handle */
  329.             scrollbar-color: #DAA520 rgb(47, 49, 41);
  330.             scrollbar-width: thin;
  331.         }
  332.  
  333.         /* Add a hover effect for the sliding handle */
  334.  
  335.         .project-form .custom-options::-webkit-scrollbar-thumb:hover {
  336.             background-color: #DAA520;
  337.         }
  338.  
  339.         .project-form .custom-option {
  340.             padding: 4px;
  341.             color: rgb(25, 10, 20);
  342.             /* Default faded text color */
  343.             cursor: pointer;
  344.             transition: color 0.3s ease;
  345.             /* Add a transition effect for smooth color change */
  346.         }
  347.  
  348.         .project-form .custom-option:hover {
  349.             color: #FFFFFF;
  350.             /* Change text color on hover as needed */
  351.         }
  352.  
  353.         .project-form .custom-option:last-child {
  354.             border-bottom: none;
  355.         }
  356.  
  357.         /* Add this style for the search box */
  358.  
  359.         .project-form .custom-options input {
  360.             width: calc(100% - 20px);
  361.             margin: 10px;
  362.             padding: 8px;
  363.             box-sizing: border-box;
  364.             border: 1px solid #DAA520;
  365.             border-radius: 5px;
  366.             background: #36372D;
  367.             color: #FFFFFF;
  368.             animation: slideIn 0.3s ease-in-out;
  369.             /* Add the animation here */
  370.         }
  371.  
  372.         @keyframes slideIn {
  373.             from {
  374.                 transform: translateX(-100%);
  375.                 opacity: 0;
  376.             }
  377.             to {
  378.                 transform: translateX(0);
  379.                 opacity: 1;
  380.             }
  381.         }
  382.  
  383.  
  384.         @keyframes slideInOut {
  385.             from {
  386.                 opacity: 0;
  387.                 transform: translateY(-10px);
  388.             }
  389.             to {
  390.                 opacity: 1;
  391.                 transform: translateY(0);
  392.             }
  393.         }
  394.  
  395. /* This section is for name email fields */
  396. .project-form .user-box {
  397.   position: relative;
  398. }
  399.  
  400. .project-form .user-box input {
  401.   width: 100%;
  402.   padding: 10px 0 10px 30px; /* Adjust the padding to accommodate the icon on the left */
  403.   font-size: 16px;
  404.   color: #fff;
  405.   margin-bottom: 30px;
  406.   border: none;
  407.   border-bottom: 1px solid #fff;
  408.   outline: none;
  409.   background: transparent;
  410.   position: relative;
  411.   z-index: 1;
  412. }
  413.  
  414. .project-form .user-box label {
  415.   position: absolute;
  416.   top: 10px; /* Adjust the top position to your preference */
  417.   left: 0;
  418.   padding: 0 5px; /* Adjust padding to your preference */
  419.   font-size: 16px;
  420.   color: #DAA520;
  421.   pointer-events: none;
  422.   transition: .5s;
  423.   opacity: 0; /* Adjust the opacity to your preference */
  424.   z-index: 2;
  425. }
  426.  
  427. .project-form .user-box input:focus ~ label,
  428. .project-form .user-box input:valid ~ label {
  429.   top: -20px;
  430.   opacity: 1;
  431.   font-size: 16px;
  432. }
  433.  
  434. .project-form .user-box input:focus::placeholder {
  435.   opacity: 0; /* Hide the placeholder on focus */
  436. }
  437.  
  438. .project-form .user-box input:not(:placeholder-shown) ~ label {
  439.   top: -20px;
  440.   opacity: 1;
  441. }
  442.  
  443. .project-form .user-box input:focus {
  444.   border-bottom-color: #DAA520;
  445. }
  446.  
  447. /* Validation and Field Icons */
  448. .user-box .icon::before {
  449.   content: ""; /* Ensure that the content property is present */
  450.   display: inline-block;
  451.   vertical-align: middle; /* Align the icon vertically in the middle */
  452. }
  453.  
  454. .material-icons {
  455.   font-size: 2px; /* Adjust the font size of the icons */
  456.   color: #FFF; /* Change the color of the icons */
  457. }
  458.  
  459. /* Additional customization for positioning */
  460. #name-icon,
  461. #email-icon {
  462.   position: absolute;
  463.   left: 2px; /* Adjust the left position to your preference */
  464.   top: 25%; /* Adjust the top position to center vertically */
  465.   transform: translateY(-50%);
  466. }
  467.  
  468. .icon {
  469.   position: absolute;
  470.   right: 10px;
  471.   top: 30%;
  472.   transform: translateY(-50%);
  473.   font-size: 1.2em;
  474.   transition: color 0.3s ease, text-shadow 0.3s ease;
  475. }
  476.  
  477. .tick-icon {
  478.   color: green;
  479. }
  480.  
  481. .exclamation-icon {
  482.   color: red;
  483. }
  484.  
  485. .glow {
  486.   text-shadow: 0 0 10px #4CAF50; /* Adjust the third parameter to control the glow intensity */
  487.   color: #4CAF50;
  488. }
  489.  
  490.  
  491.  
  492. /* This section is for Textarea */
  493. .project-form .other-description {
  494.   margin-bottom: 20px;
  495.   position: relative; /* Added position relative */
  496. }
  497.  
  498. .project-form .other-description label {
  499.   position: absolute;
  500.   top: 0px; /* Adjusted top position */
  501.   left: 0px; /* Adjusted left position */
  502.   padding: 0 5px; /* Adjusted padding */
  503.   font-size: 16px;
  504.   color: #DAA520;
  505.   pointer-events: none;
  506.   transition: .5s;
  507.   background-color: transparent; /* Added background-color */
  508. }
  509.  
  510. .project-form .other-description textarea {
  511.   width: calc(100% - 20px); /* Adjusted width with padding */
  512.   padding: 10px 10px 10px;
  513.   font-size: 16px;
  514.   color: #fff;
  515.   border: 1px solid #fff;
  516.   border-radius: 5px;
  517.   outline: none;
  518.   background: transparent;
  519.   transition: border-color 0.5s ease;
  520.   resize: vertical;
  521.   margin-top: 40px;
  522. }
  523.  
  524. .project-form .other-description textarea:focus ~ label,
  525. .project-form .other-description textarea:valid ~ label,
  526. .project-form .other-description textarea:active ~ label {
  527.   top: -20px;
  528.   left: 10px;
  529.   color: #DAA520;
  530.   font-size: 12px;
  531. }
  532.  
  533. .project-form .other-description textarea:focus {
  534.   border-color: #DAA520;
  535. }
  536.  
  537. /* Placeholder styling */
  538. .project-form .other-description textarea::placeholder {
  539.   color: #fff;
  540.   opacity: 0.7;
  541.   position: absolute;
  542.   top: 10px; /* Adjusted top position for placeholder */
  543.   left: 10px; /* Adjusted left position for placeholder */
  544.   font-size: 16px;
  545. }
  546.  
  547.  
  548. /* This section is for Currency Selector */
  549.  
  550.   .project-form .currency-select {
  551.   position: relative;
  552.   margin-bottom: 30px;
  553.   margin-top: 30px;
  554. }
  555.  
  556. .project-form .currency-select label {
  557.  position: absolute;
  558.  top: -35px;
  559.  left: 0;
  560.  padding: 10px 0;
  561.  font-size: 16px;
  562.  color:#DAA520;
  563.  pointer-events: none;
  564.  transition: .5s;
  565. }
  566.  
  567. .project-form .currency-select select {
  568.  width: 100%;
  569.  padding: 10px 10;
  570.  font-size: 12px;
  571.  color: #fff;
  572.  border: none;
  573.  border-bottom: 1px solid #fff;
  574.  outline: none;
  575.  background: #36372D;
  576.  appearance: none;
  577.  transition: border-bottom-color 0.5s ease, color 0.5s ease;
  578.  
  579. }
  580.  
  581. .project-form .currency-select select::-ms-expand {
  582.  display: none;
  583. }
  584.  
  585. .project-form .currency-select:after {
  586.  content: "▼";
  587.  position: absolute;
  588.  right: 2.6px;
  589.  top: -2px;
  590.  pointer-events: none;
  591.  color: #DAA520;
  592.  font-size: 12px;
  593. }
  594.  
  595. .project-form .currency-select.open:after {
  596.   transform: rotate(180deg); /* Rotate the arrow when the select is open */
  597. }
  598.  
  599.  
  600. .project-form .currency-select select:focus ~ label,
  601. .project-form .currency-select select:valid ~ label,
  602. .project-form .currency-select select:active ~ label {
  603.  top: -20px;
  604.  left: 0;
  605.  font-size: 12px;
  606. }
  607.  
  608. .project-form .currency-select select:focus {
  609.  border-bottom-color: #DAA520;
  610. }
  611.  
  612. .project-form .currency-select label::after,
  613. .range::before {
  614. content: attr(data-currency);
  615. margin-left: 5px;
  616. }
  617.        
  618. /* This is for budget and timeline range slider */
  619.   .project-form .irs--flat .irs-line {
  620.   top: 25px;
  621.   height: 1px;
  622.   background-color: #000;
  623.   border-radius: 4px;
  624. }
  625.  .project-form .irs--flat .irs-bar {
  626.   top: 25px;
  627.   height: 2px;
  628.   background-color: #FFF;
  629. }
  630.  
  631.  
  632. .project-form .irs--flat .irs-handle {
  633.   top: 18px;
  634.   width: 16px;
  635.   height: 16px;
  636.   border-radius: 50%; /* Make it a circle */
  637.   background-color: #fff;
  638. }
  639.  
  640. .project-form .glow {
  641.       box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* Adjust the shadow color and size */
  642.     }
  643.     .project-form .glow-grid-text {
  644.       color: #fff; /* Adjust the text color for better visibility */
  645.       text-shadow: 0 0 10px rgba(255, 250, 250, 0.7); /* Adjust the shadow color and size for grid text */
  646.     }
  647. .project-form .irs--flat .irs-handle > i:first-child {
  648.   position: absolute;
  649.   display: block;
  650.   top: 3px;
  651.   left: 50%;
  652.   width: 10px;
  653.   height: 10px;
  654.   margin-left: -5px;
  655.   border-radius: 100%; /* Make it a circle */
  656.   background-color: #DAA520;
  657. }
  658. .project-form .irs--flat .irs-handle.state_hover > i:first-child,
  659. .project-form .irs--flat .irs-handle:hover > i:first-child {
  660.   background-color: #FFF;
  661.  
  662. }
  663.  
  664. .project-form .irs--flat .irs-min,
  665. .project-form .irs--flat .irs-max {
  666.   top: 0;
  667.   padding: 1px 3px;
  668.   color: #999;
  669.   font-size: 12px;
  670.   line-height: 1.0;
  671.   text-shadow: none;
  672.   background-color: #e1e4e9;
  673.   border-radius: 4px;
  674. }
  675.  
  676. .project-form .irs--flat .irs-from,
  677. .project-form .irs--flat .irs-to,
  678. .project-form .irs--flat .irs-single {
  679.   color: #000000;
  680.   font-size: 12px;
  681.   line-height: 1.0;
  682.   text-shadow: none;
  683.   padding: 1px 5px;
  684.   background-color: #DAA520;
  685.   border-radius: 4px;
  686. }
  687. .project-form .irs--flat .irs-from:before,
  688. .project-form .irs--flat .irs-to:before,
  689. .project-form .irs--flat .irs-single:before {
  690.   position: absolute;
  691.   display: block;
  692.   content: "";
  693.   bottom: -6px;
  694.   left: 50%;
  695.   width: 0;
  696.   height: 0;
  697.   margin-left: -3px;
  698.   overflow: hidden;
  699.   border: 3px solid transparent;
  700.   border-top-color: #FFF;
  701. }
  702.  
  703. .project-form .irs--flat .irs-grid-pol {
  704.   background-color: #DAA520;
  705. }
  706. .project-form .irs--flat .irs-grid-text {
  707.   color: #FFF;
  708.   font-size: 10px;
  709. }
  710.  
  711.  
  712.  
  713. /* This is for Radio Buttons */
  714.  
  715. .project-form .filter {
  716.       position: absolute;
  717.       left: -9999px;
  718.     }
  719.  
  720. .project-form .radios-boxes {
  721.   display: flex;
  722.   flex-direction: column; /* Arrange radios and labels in a column */
  723.   align-items: center; /* Center horizontally */
  724.   justify-content: center; /* Center vertically */
  725.   margin-top: 40px;
  726. }
  727.  
  728. .project-form .radios-boxes .label-select-timeline {
  729.   position: absolute; /* Change to absolute positioning */
  730.   top: 1080px; /* Adjust the top position as needed */
  731.   left: 20px; /* Adjust the left position to align it to the left */
  732.   padding: 10px 0;
  733.   font-size: 16px;
  734.   color: #DAA520;
  735. }
  736.  
  737. .project-form .radios {
  738.   display: flex;
  739.   align-items: center;
  740.   gap: 20px; /* Adjust the gap between radio buttons as needed */
  741.   filter: url('#gooeyness');
  742.   overflow: hidden;
  743.   position: relative;
  744.   margin-top: 10px; /* Adjust the top margin as needed */
  745. }
  746.  
  747. .project-form .radio {
  748.   -moz-appearance: none;
  749.   -ms-appearance: none;
  750.   -webkit-appearance: none;
  751.   appearance: none;
  752.   border-radius: 60%;
  753.   border: 12px solid #fff;
  754.   cursor: pointer;
  755.   height: 20px;
  756.   margin: 25px;
  757.   padding: 10px 10px;
  758.   outline: 0;
  759.   -webkit-tap-highlight-color: transparent;
  760.   transition: border-color 800ms;
  761.   width: 20px;
  762.   /* Adjust the positioning as needed */
  763.   position: relative;
  764.   top: 1px; /* Move the radio button 10px down (adjust as needed) */
  765.   left: -15px; /* Move the radio button 20px to the right (adjust as needed) */
  766. }
  767.  
  768. .project-form .radio.active {
  769.   border-color: white;
  770.   background: rgba(255, 155, 125, 0.4);
  771.   transform: scale(0);
  772.   animation: breathing 1s infinite alternate;
  773. }
  774.  
  775.  
  776. @keyframes breathing {
  777.   to {
  778.     transform: scale(1.1);
  779.   }
  780. }
  781.  
  782.  
  783.     .project-form .ball {
  784.       background: white;
  785.       border-radius: 50%;
  786.       height: 34px;
  787.       pointer-events: none;
  788.       position: absolute;
  789.       top: 30px;
  790.       transform: translateX(-80px); /* Adjust the X-axis position */
  791.       transition: transform 800ms;
  792.       width: 34px;
  793.     }
  794.  
  795. .project-form .ball.pos0 {
  796.   transform: translateX(20px);
  797. }
  798.  
  799. .project-form .ball.pos1 {
  800.   transform: translateX(130px);
  801. }
  802.  
  803. .project-form .ball.pos2 {
  804.   transform: translateX(240px);
  805. }
  806.  
  807. .project-form .radios-boxes .labels {
  808.   display: flex;
  809.   align-items: center;
  810.   justify-content: center;
  811.   margin-top: -40px; /* Adjust the top margin as needed */
  812.   margin-right: -40px;
  813. }
  814.  
  815. .project-form .radios-boxes .label {
  816.   color: #DAA520;
  817.   cursor: pointer;
  818.   font-size: 12px;
  819.   line-height: 50px;
  820.   padding: 10px 10px;
  821.   -webkit-tap-highlight-color: transparent;
  822.   transition: color 800ms;
  823.   margin-right: 60px; /* Adjust the margin as needed */
  824. }
  825. .project-form .radios-boxes .label.active {
  826.       color: white;
  827.     }
  828.  
  829.  
  830.  
  831. .project-form form button {
  832.   background: transparent;
  833.   color: #fff; /* Change text color to white */
  834.   border: 0px solid #fff; /* Change border color to white */
  835.   border-radius: 10px;
  836.   position: relative;
  837.   display: inline-block;
  838.   padding: 10px 20px;
  839.   font-size: 16px;
  840.   text-decoration: none;
  841.   text-transform: uppercase;
  842.   overflow: hidden;
  843.   transition: .5s;
  844.   margin-top: 60px;
  845.   letter-spacing: 4px;
  846.   cursor: pointer;
  847. }
  848.  
  849. .project-form form button:hover {
  850.   background: #fff; /* Change background color to white on hover */
  851.   color: #000000; /* Change text color on hover to gold */
  852.   border-radius: 4;
  853.   box-shadow: 0 0 5px #fff, /* Change shadow color to white */
  854.               0 0 25px #fff, /* Change shadow color to white */
  855.               0 0 50px #fff, /* Change shadow color to white */
  856.               0 0 100px #fff; /* Change shadow color to white */
  857. }
  858.  
  859. .project-form form button span {
  860.   position: absolute;
  861.   display: block;
  862. }
  863.  
  864. .project-form form button span:nth-child(1) {
  865.   top: 0;
  866.   left: -100%;
  867.   width: 100%;
  868.   height: 2px;
  869.   background: linear-gradient(90deg, transparent, #fff); /* Change gradient color to white */
  870.   animation: btn-anim1 1s linear infinite;
  871. }
  872.  
  873. @keyframes btn-anim1 {
  874.   0% {
  875.     left: -100%;
  876.   }
  877.   50%, 100% {
  878.     left: 100%;
  879.   }
  880. }
  881.  
  882. .project-form form button span:nth-child(2) {
  883.   top: -100%;
  884.   right: 0;
  885.   width: 2px;
  886.   height: 100%;
  887.   background: linear-gradient(180deg, transparent, #fff); /* Change gradient color to white */
  888.   animation: btn-anim2 1s linear infinite;
  889.   animation-delay: 0.25s;
  890. }
  891.  
  892. @keyframes btn-anim2 {
  893.   0% {
  894.     top: -100%;
  895.   }
  896.   50%, 100% {
  897.     top: 100%;
  898.   }
  899. }
  900.  
  901. .project-form form button span:nth-child(3) {
  902.   bottom: 0;
  903.   right: -100%;
  904.   width: 100%;
  905.   height: 2px;
  906.   background: linear-gradient(270deg, transparent, #fff); /* Change gradient color to white */
  907.   animation: btn-anim3 1s linear infinite;
  908.   animation-delay: 0.5s;
  909. }
  910.  
  911. @keyframes btn-anim3 {
  912.   0% {
  913.     right: -100%;
  914.   }
  915.   50%, 100% {
  916.     right: 100%;
  917.   }
  918. }
  919.  
  920. .project-form form button span:nth-child(4) {
  921.   bottom: -100%;
  922.   left: 0;
  923.   width: 2px;
  924.   height: 100%;
  925.   background: linear-gradient(360deg, transparent, #fff); /* Change gradient color to white */
  926.   animation: btn-anim4 1s linear infinite;
  927.   animation-delay: 0.75s;
  928. }
  929.  
  930.  
  931. &lt;/style&gt;
  932. &lt;/head&gt;
  933.  
  934.  
  935.  
  936. &lt;body&gt;
  937.   <div class="container">
  938.   <div class="project-form" id="glow-form">
  939.     <h1>Start a Project</h1>
  940.     >" method="POST">
  941.        
  942.       &lt;!-- About Yourself --&gt;
  943.       <h3>About Yourself</h3>
  944.      
  945. <div class="user-box">
  946.   &lt;input type="text" name="name" id="name" required placeholder="John Doe"&gt;
  947.   <span id="name-icon" class="icon material-icons">person</span>
  948.   <label>Name</label>
  949.   <span id="name-validation-icon" class="icon"></span>
  950. </div>
  951.      
  952. <div class="user-box email-input">
  953.   &lt;input type="email" name="email" id="email" required placeholder="[email protected]"&gt;
  954.   <label for="email">Email</label>
  955.   <span id="email-error" class="email-error"></span>
  956.   <span id="email-icon" class="icon material-icons">email</span>
  957.   <span id="email-validation-icon" class="icon"></span>
  958. </div>
  959.      
  960. <div class="phone-input">
  961.   &lt;input type="tel" id="phone" name="phone" placeholder=""&gt;
  962.   <label for="phone">Phone Number</label>
  963.   <span id="phone-validation-icon" class="icon"></span> &lt;!-- Add this line for the validation icon --&gt;
  964. </div>
  965.    
  966.       &lt;!-- What do you need? --&gt;
  967.       <h3>What do you need?</h3>
  968.      
  969.                 &lt;!-- Service Selection --&gt;
  970.                 <div class="select-box">
  971.                     <select id="service" class="form-control"   false">
  972.             <option value="" selected disabled>Select Service</option>
  973.             <option value="Designing">Designing</option>
  974.             <option value="Digital Marketing">Digital Marketing</option>
  975.             <option value="Other">Other</option>&lt;!-- Add other services as needed --&gt;
  976.           </select>
  977.                     <label>Service</label>
  978.                     <div class="custom-options" id="custom-service-options"></div>
  979.                 </div>
  980.  
  981.                 &lt;!-- Category Selection --&gt;
  982.                 <div class="select-box sub-category">
  983.                     <select id="category" class="form-control"   false">
  984.             <option value="" selected disabled>Select Category</option>
  985.             <option value="Other">Other</option>&lt;!-- Add other categories as needed --&gt;
  986.           </select>
  987.                     <label>Category</label>
  988.                     <div class="custom-options" id="custom-category-options"></div>
  989.                 </div>
  990.  
  991.                 &lt;!-- Type Selection --&gt;
  992.                 <div class="select-box sub-category sub-sub-category">
  993.                     <select id="type" class="form-control"  false">
  994.             <option value="" selected disabled>Select Type</option>
  995.             <option value="Other">Other</option>&lt;!-- Add other types as needed --&gt;
  996.           </select>
  997.                     <label>Type</label>
  998.                     <div class="custom-options" id="custom-type-options"></div>
  999.                 </div>
  1000.  
  1001. &lt;!-- Textarea for entering custom service/subcategory --&gt;
  1002. <div class="other-description"  none;">
  1003.   <label>Please Describe</label>
  1004.   &lt;textarea id="other-description" class="form-control" rows="4" placeholder="Enter your description here"&gt;&lt;/textarea>
  1005. </div>
  1006.  
  1007.       &lt;!-- Your Approximation? --&gt;
  1008.       <h3>Your Approximation?</h3>
  1009.      
  1010.        &lt;!-- Currency Selection Box --&gt;
  1011.                 <div class="currency-select">
  1012.         <label for="currency" data-currency="">Select Currency and Budget</label>
  1013.         <select id="currency" >
  1014.           <option value="" disabled selected>Select Currency</option>
  1015.           <option value="USD">USD</option>
  1016.           <option value="EUR">EUR</option>
  1017.           <option value="GBP">GBP</option>
  1018.         </select>
  1019.       </div>
  1020.      
  1021.          &lt;!-- Budget Slider --&gt;      
  1022. &lt;input type="text" id="budget-slider" /&gt;
  1023.  
  1024.  
  1025. &lt;!-- Radio Buttons  --&gt;
  1026.  
  1027.   <svg class="filter" versi>
  1028.     <defs>
  1029.       <filter id="gooeyness">
  1030.         <feGaussianBlur in="SourceGraphic" stdDeviati result="blur" />
  1031.         <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10" result="gooey" />
  1032.         <feComposite in="SourceGraphic" in2="gooey" operator="atop" />
  1033.       </filter>
  1034.     </defs>
  1035.   </svg>
  1036.  
  1037.   <div class="radios-boxes">
  1038.       <label for="radio1" class="label-select-timeline">Select Estimated Time</label>
  1039.     <div class="radios">
  1040.       &lt;input type="radio" name="radio" id="radio1" class="radio" value="Days"&gt;
  1041.       &lt;input type="radio" name="radio" id="radio2" class="radio" value="Weeks"&gt;
  1042.       &lt;input type="radio" name="radio" id="radio3" class="radio" value="Months"&gt;
  1043.       <div class="ball"></div>
  1044.     </div>
  1045.    
  1046.     <div class="labels">
  1047.       <label for="radio1" class="label">Day</label>
  1048.       <label for="radio2" class="label">Week</label>
  1049.       <label for="radio3" class="label">Month</label>
  1050.     </div>
  1051.   </div>
  1052.  
  1053. &lt;!-- Timeline Slider  --&gt;
  1054.      
  1055.   <div class="slider-container">
  1056.   &lt;input type="text" id="timeline-slider" /&gt;
  1057.  </div>
  1058.  
  1059.  &lt;!-- Submit Button --&gt;
  1060.     <button type="button" class="form button" >
  1061.         <span></span>
  1062.         <span></span>
  1063.         <span></span>
  1064.         <span></span>
  1065.         Submit
  1066.     </button>
  1067.            
  1068.     &lt;/form&gt;
  1069.    
  1070.     &lt;?php
  1071. if ($_SERVER["REQUEST_METHOD"] == "POST") {
  1072.     // Retrieve form data
  1073.     $name = $_POST["name"];
  1074.     $email = $_POST["email"];
  1075.     $phone = $_POST["phone"];
  1076.     $service = $_POST["service"];
  1077.     $subcategory = $_POST["subcategory"];
  1078.     $subsubcategory = $_POST["subsubcategory"];
  1079.     $currency = $_POST["currency"];
  1080.     $budget = $_POST["budget"];
  1081.     $timeline = $_POST["timeline"];
  1082.  
  1083.     // Compose the email message
  1084.     $subject = "New Project Submission";
  1085.     $message = "Name: $name\n";
  1086.     $message .= "Email: $email\n";
  1087.     $message .= "Phone: $phone\n";
  1088.     $message .= "Service: $service\n";
  1089.     $message .= "Subcategory: $subcategory\n";
  1090.     $message .= "Subsubcategory: $subsubcategory\n";
  1091.     $message .= "Currency: $currency\n";
  1092.     $message .= "Budget: $budget\n";
  1093.     $message .= "Timeline: $timeline\n";
  1094.  
  1095.     // Replace this email address with your desired recipient email
  1096.     $to = "[email protected]";
  1097.  
  1098.     // Send the email
  1099.     $headers = "From: $email";
  1100.     mail($to, $subject, $message, $headers);
  1101.  
  1102.     // Redirect after submitting the form
  1103.     header("Location: thank-you.html");
  1104.     exit();
  1105. } else {
  1106.     // Handle invalid requests
  1107.     http_response_code(400);
  1108.     echo "Invalid request!";
  1109. }
  1110. ?&gt;
  1111.  
  1112.    
  1113.    
  1114.   </div>
  1115.   </div>
  1116.  
  1117.  
  1118. [removed][removed]
  1119.  
  1120. [removed][removed]
  1121.  
  1122.  
  1123. [removed][removed]
  1124. [removed][removed]
  1125.  
  1126. [removed][removed]
  1127.  
  1128. [removed]
  1129.  
  1130.   // This is for submit button section
  1131.  
  1132. function submitForm() {
  1133.     // You can add any additional logic or validation here before submitting the form
  1134.     document.querySelector('form').submit();
  1135. }
  1136.  
  1137.   // This is for Name field section
  1138.  
  1139. document.addEventListener("DOMContentLoaded", function () {
  1140.   const nameInput = document.querySelector("input[name='name']");
  1141.   const emailInput = document.querySelector("input[name='email']");
  1142.   const emailError = document.querySelector("#email-error");
  1143.   const nameIcon = document.getElementById("name-validation-icon");
  1144.   const emailIcon = document.getElementById("email-icon");
  1145.  
  1146.   nameInput.addEventListener("input", function () {
  1147.     const validName = /^[A-Za-z\s'-.]+$/.test(nameInput.value);
  1148.     nameInput.style.borderBottomColor = validName ? '#fff' : 'red';
  1149.  
  1150.     const nameIcon = document.getElementById("name-validation-icon");
  1151.  
  1152.     if (!validName) {
  1153.       nameIcon[removed] = '<i class="iconify exclamation-icon" data-ic></i>';
  1154.       nameIcon.classList.remove("glow"); // Remove glow class if invalid
  1155.     } else {
  1156.       nameIcon[removed] = '<i class="iconify tick-icon glow" data-ic></i>'; // Add glow class if valid
  1157.     }
  1158.   });
  1159.  
  1160.   emailInput.addEventListener("input", function () {
  1161.     const validEmail = validateEmail(emailInput.value);
  1162.     emailInput.style.borderBottomColor = validEmail ? '#fff' : 'red';
  1163.  
  1164.     const emailIcon = document.getElementById("email-validation-icon");
  1165.  
  1166.     if (!validEmail) {
  1167.       emailError.textContent = "Invalid email format";
  1168.       emailIcon[removed] = '<i class="iconify exclamation-icon" data-ic></i>';
  1169.       emailIcon.classList.remove("glow"); // Remove glow class if invalid
  1170.     } else {
  1171.       emailError.textContent = "";
  1172.       emailIcon[removed] = '<i class="iconify tick-icon glow" data-ic></i>'; // Add glow class if valid
  1173.     }
  1174.   });
  1175.  
  1176.   // Function to validate email using a more strict regular expression
  1177.   function validateEmail(email) {
  1178.     // A stricter email validation regex
  1179.     const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
  1180.  
  1181.     return emailRegex.test(email);
  1182.   }
  1183. });
  1184.  
  1185. // This is for Currency Selector and Budget Slider section
  1186.  
  1187.  
  1188. $(document).ready(function () {
  1189.   let currencySymbol = getCurrencySymbol("USD");
  1190.  
  1191.   // Initialize the ionRangeSlider
  1192.   const initializeSlider = (prefix) => {
  1193.     $("#budget-slider").ionRangeSlider({
  1194.       type: "double",
  1195.       grid: true,
  1196.       min: 0,
  1197.       max: 200000,
  1198.       from: 500,
  1199.       to: 5000,
  1200.       step: 100,
  1201.       prefix: prefix,
  1202.      onFinish: function (data) {
  1203.         let selectedValues = `${currencySymbol}${data.from} - ${currencySymbol}${data.to}`;
  1204.  
  1205.         if (data.to === this.max) {
  1206.           selectedValues += "+";
  1207.         }
  1208.         console.log("Selected values:", selectedValues);
  1209.       }
  1210.     });
  1211.    
  1212.      
  1213.     // Add glow effect to handles and grid text by default
  1214.     $(".irs--flat .irs-handle").addClass("glow");
  1215.     $(".irs--flat .irs-grid-text").addClass("glow-grid-text");
  1216.    
  1217.     // Add plus sign to maximum value in grid text
  1218.                 const maxGridText = $(".irs--flat .irs-grid-text:last");
  1219.                 const originalText = maxGridText.text();
  1220.                 maxGridText.text(originalText + "+");
  1221.   };
  1222.    
  1223.   initializeSlider(currencySymbol);
  1224.  
  1225.   // Update the slider when the currency selection changes
  1226.   $("#currency").on("change", function () {
  1227.     currencySymbol = getCurrencySymbol($(this).val());
  1228.    
  1229.         // Destroy the existing slider
  1230.     $("#budget-slider").data("ionRangeSlider").destroy();
  1231.  
  1232.     // Re-initialize the slider with the new prefix
  1233.     initializeSlider(currencySymbol);
  1234.    
  1235.   });
  1236.  
  1237.   // Toggle rotation class for currency select arrow
  1238.   $(".currency-select").click(function() {
  1239.     $(this).toggleClass("open");
  1240.   });
  1241. });
  1242.  
  1243. function getCurrencySymbol(currencyCode) {
  1244.   switch (currencyCode) {
  1245.     case "USD":
  1246.       return "$";
  1247.     case "EUR":
  1248.       return "€";
  1249.     case "GBP":
  1250.       return "£";
  1251.     default:
  1252.       return "$"; // Default to USD
  1253.   }
  1254. }
  1255.  
  1256.  
  1257.  // This is for Radio Buttons
  1258.  
  1259.  
  1260.   let radios = document.querySelectorAll('.radio');
  1261.   let labels = document.querySelectorAll('.label');
  1262.   let ball = document.querySelector('.ball');
  1263.   let prevRadio, prevLabel;
  1264.   let selectedValue = "Days"; // Default selected value
  1265.  
  1266.   radios.forEach((radio, index) => {
  1267.     radio.addEventListener('click', function (e) {
  1268.       if (prevRadio) prevRadio.classList.toggle('active');
  1269.       if (prevLabel) prevLabel.classList.toggle('active');
  1270.       radio.classList.toggle('active');
  1271.       prevRadio = radio;
  1272.       labels[index].classList.toggle('active');
  1273.       prevLabel = labels[index];
  1274.       ball.className = `ball pos${index}`;
  1275.      
  1276.       // Apply breathing effect to the selected radio button
  1277.       if (radio.classList.contains('active')) {
  1278.         radio.classList.add('breathing');
  1279.       } else {
  1280.         radio.classList.remove('breathing');
  1281.       }
  1282.  
  1283.       // Store the selected value
  1284.       selectedValue = radio.value;
  1285.  
  1286.       // Log the selected value (you can replace this with your desired logic)
  1287.       console.log('Selected Value:', selectedValue);
  1288.  
  1289.       // Update postfix of the slider with the selected radio button value
  1290.       $("#timeline-slider").data("ionRangeSlider").update({
  1291.         postfix: ` ${selectedValue}`
  1292.       });
  1293.    });
  1294.   });
  1295.  
  1296.   // Add a listener for animation end to remove the breathing class
  1297.   radios.forEach((radio) => {
  1298.     radio.addEventListener('animationend', function () {
  1299.       radio.classList.remove('breathing');
  1300.     });
  1301.   });
  1302.  
  1303.  
  1304.   // This below is For Timeline Range Slider
  1305.  
  1306.   $(document).ready(function () {
  1307.     // Initialize the ionRangeSlider for timeline selection
  1308.     $("#timeline-slider").ionRangeSlider({
  1309.       type: "double",
  1310.       grid: true,
  1311.       min: 0,
  1312.       max: 24,
  1313.       from: 1,
  1314.       to: 12,
  1315.       step: 1,
  1316.       postfix: ` ${selectedValue}`, // Set default postfix based on the default selected value
  1317.       onFinish: function (data) {
  1318.         let selectedValues = `${data.from} - ${data.to}`;
  1319.  
  1320.         if (data.to === this.max) {
  1321.           selectedValues += "+";
  1322.         }
  1323.  
  1324.         // Append the selected radio button value to the slider grid text
  1325.         const selectedRadioValue = selectedValue ? ` ${selectedValue}` : '';
  1326.         selectedValues += selectedRadioValue;
  1327.  
  1328.         console.log("Selected values:", selectedValues);
  1329.       }
  1330.     });
  1331.  
  1332.     // Add glow effect to handles and grid text by default
  1333.     $(".irs--flat .irs-handle").addClass("glow");
  1334.     $(".irs--flat .irs-grid-text").addClass("glow-grid-text");
  1335.  
  1336.     // Add plus sign to maximum value in grid text
  1337.     const maxGridText = $(".irs--flat .irs-grid-text:last");
  1338.     const originalText = maxGridText.text();
  1339.     maxGridText.text(originalText + "+");
  1340.   });
  1341.  
  1342.  
  1343.   // This is for Phone Field section
  1344.  
  1345. document.addEventListener("DOMContentLoaded", function () {
  1346.   const input = document.querySelector("#phone");
  1347.   const icon = document.querySelector("#phone-validation-icon"); // Assuming you have an element with this ID for the validation icon
  1348.  
  1349.   const iti = window.intlTelInput(input, {
  1350.     initialCountry: "auto",
  1351.     geoIpLookup: function (success, failure) {
  1352.       $.get("https://ipinfo.io", function () {}, "jsonp").always(function (resp) {
  1353.         const countryCode = (resp && resp.country) ? resp.country : "us";
  1354.         success(countryCode);
  1355.       });
  1356.     },
  1357.     utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/utils.js",
  1358.   });
  1359.  
  1360.   input.addEventListener("input", function () {
  1361.     input.style.borderBottomColor = '#FFF';
  1362.     const isValidNumber = iti.isValidNumber();
  1363.    
  1364.     if (!isValidNumber) {
  1365.       input.style.borderBottomColor = 'red';
  1366.       icon[removed] = '<i class="iconify exclamation-icon" data-ic></i>';
  1367.       icon.classList.remove("glow"); // Remove glow class if invalid
  1368.     } else {
  1369.       const countryData = iti.getSelectedCountryData();
  1370.       const formattedNumber = iti.getNumber(intlTelInputUtils.numberFormat.NATIONAL);
  1371.       input.value = formattedNumber;
  1372.  
  1373.       icon[removed] = '<i class="iconify tick-icon glow" data-ic></i>'; // Add glow class if valid
  1374.     }
  1375.   });
  1376. });
  1377.  
  1378.    
  1379.     // This is for What do you need? section
  1380.  
  1381.    
  1382.                     document.addEventListener("DOMContentLoaded", function() {
  1383.                         var selectBoxes = document.querySelectorAll('.select-box select');
  1384.  
  1385.                         selectBoxes.forEach(function(selectBox) {
  1386.                             var customOptions = document.createElement('div');
  1387.                             customOptions.className = 'custom-options';
  1388.                             customOptions.id = 'custom-' + selectBox.id + '-options';
  1389.  
  1390.                             selectBox.parentElement.appendChild(customOptions);
  1391.  
  1392.                             selectBox.addEventListener('change', function() {
  1393.                                 if (selectBox.value !== '' && !selectBox.options[selectBox.selectedIndex].disabled) {
  1394.                                    selectBox.classList.add('has-value');
  1395.                                 } else {
  1396.                                     selectBox.classList.remove('has-value');
  1397.                                 }
  1398.                             });
  1399.  
  1400.                             // Add custom options to the respective select box
  1401.                             var customOptionsId = 'custom-' + selectBox.id + '-options';
  1402.                             var customOptionsContainer = document.getElementById(customOptionsId);
  1403.  
  1404.                             // Replace 'mouseover' event with 'click'
  1405.                             selectBox.addEventListener('click', function(event) {
  1406.                                 var selectBoxContainer = selectBox.closest('.select-box');
  1407.                                 var allSelectBoxes = document.querySelectorAll('.select-box');
  1408.  
  1409.                                 // Close all open dropdowns
  1410.                                 closeAllCustomOptions();
  1411.  
  1412.                                 // Remove 'rotate' class from all select boxes
  1413.                                 allSelectBoxes.forEach(function(box) {
  1414.                                     box.classList.remove('rotate');
  1415.                                 });
  1416.  
  1417.                                 // Toggle 'rotate' class on the current select box container
  1418.                                 selectBoxContainer.classList.toggle('rotate');
  1419.  
  1420.                                 event.stopPropagation();
  1421.  
  1422.                                 if (selectBoxContainer.classList.contains('rotate')) {
  1423.                                     // Open dropdown and update custom options
  1424.                                     updateCustomOptions(selectBox, customOptionsContainer);
  1425.                                 }
  1426.                             });
  1427.                         });
  1428.  
  1429.                         document.body.addEventListener('click', function(event) {
  1430.                             // Close all custom options when clicking outside the select boxes
  1431.                             closeAllCustomOptions();
  1432.                             removeRotateClassFromSelectBoxes();
  1433.                         });
  1434.  
  1435.  
  1436.  
  1437.                         function closeAllCustomOptions() {
  1438.                             var allCustomOptionsContainers = document.querySelectorAll('.custom-options');
  1439.                             allCustomOptionsContainers.forEach(function(container) {
  1440.                                 container.style.display = 'none';
  1441.  
  1442.                             });
  1443.                         }
  1444.  
  1445.                         function removeRotateClassFromSelectBoxes() {
  1446.                             var allSelectBoxes = document.querySelectorAll('.select-box select');
  1447.                             allSelectBoxes.forEach(function(selectBox) {
  1448.                                 selectBox.parentElement.classList.remove('rotate');
  1449.                             });
  1450.                         }
  1451.                     });
  1452.  
  1453.                     function updateCustomOptions(selectBox, customOptionsContainer) {
  1454.                         var options = selectBox.options;
  1455.                         customOptionsContainer[removed] = '';
  1456.  
  1457.  
  1458.                         // Add search box
  1459.                         var searchInput = document.createElement('input');
  1460.                         searchInput.type = 'text';
  1461.                         searchInput.placeholder = 'Search...';
  1462.  
  1463.                         // Prevent the click on the search box from closing the dropdown
  1464.                         searchInput.addEventListener('click', function(event) {
  1465.                             event.stopPropagation();
  1466.                         });
  1467.  
  1468.  
  1469.                         searchInput.addEventListener('input', function() {
  1470.                             filterOptions(selectBox, customOptionsContainer, this.value);
  1471.  
  1472.                         });
  1473.  
  1474.                         customOptionsContainer.appendChild(searchInput);
  1475.  
  1476.  
  1477.                         for (var i = 1; i < options.length; i++) {
  1478.                             var customOpti
  1479.                            customOption.className = 'custom-option';
  1480.                             customOption.textC
  1481.                            customOption.addEventListener('click', function() {
  1482.                                selectBox.value = this.textContent;
  1483.                                selectBox.dispatchEvent(new Event('change'));
  1484.                                customOptionsContainer.style.display = 'none';
  1485.                            });
  1486.                            customOptionsContainer.appendChild(customOption);
  1487.                        }
  1488.                        searchInput.style.display = 'none';
  1489.                        customOptionsContainer.style.display = 'block';
  1490.  
  1491.                        // Add event listener to document for key press
  1492.                        document.addEventListener('keydown', function() {
  1493.                            searchInput.style.display = 'block';
  1494.                        });
  1495.                    }
  1496.  
  1497.                    // Add a function to filter options based on the search input
  1498.                    function filterOptions(selectBox, customOptionsContainer, searchText) {
  1499.                        searchText = searchText.toLowerCase();
  1500.                         var opti
  1501.  
  1502.                        for (var i = 1; i < options.length; i++) {
  1503.                             var opti
  1504.                             var customOpti
  1505.                            if (optionText.includes(searchText)) {
  1506.                                customOption.style.display = 'block';
  1507.                            } else {
  1508.                                customOption.style.display = 'none';
  1509.                            }
  1510.                        }
  1511.                    }
  1512.  
  1513.                    function updateCategories() {
  1514.                        var serviceSelect = document.getElementById('service');
  1515.                        var categorySelect = document.getElementById('category');
  1516.                        var typeSelect = document.getElementById('type');
  1517.                         var categoryC
  1518.                         var typeC
  1519.                         var customOpti
  1520.                         var otherDescripti
  1521.  
  1522.  
  1523.                        // Reset and hide category
  1524.                        categorySelect[removed] = '<option value="" selected disabled>Select Category</option>';
  1525.                         typeSelect[removed] = '<option value="" selected disabled>Select Type</option>';
  1526.                         categoryContainer.style.display = 'none';
  1527.                         typeContainer.style.display = 'none';
  1528.                         customOptionsContainer.style.display = 'none';
  1529.                         otherDescriptionDiv.style.display = 'none';
  1530.  
  1531.                         // Check if the selected value is 'Other'
  1532.                         if (serviceSelect.value === 'Other') {
  1533.                             categoryContainer.style.display = 'none';
  1534.                             customOptionsContainer.style.display = 'none';
  1535.                             otherDescriptionDiv.style.display = 'block';
  1536.                         } else {
  1537.                             // Populate categories based on the selected service
  1538.                             if (serviceSelect.value === 'Designing') {
  1539.                                 addOption(categorySelect, 'Graphic Design', 'Graphic Design');
  1540.                                 addOption(categorySelect, 'UI/UX Design', 'UI/UX Design');
  1541.                             } else if (serviceSelect.value === 'Digital Marketing') {
  1542.                                 addOption(categorySelect, 'SEO', 'SEO');
  1543.                                 addOption(categorySelect, 'Content Marketing', 'Content Marketing');
  1544.                             }
  1545.  
  1546.                             // Show category container if a service is selected
  1547.                             categoryContainer.style.display = serviceSelect.value ? 'block' : 'none';
  1548.                             customOptionsContainer.style.display = 'none';
  1549.                         }
  1550.                     }
  1551.  
  1552.                     function updateTypes() {
  1553.                         var categorySelect = document.getElementById('category');
  1554.                         var typeSelect = document.getElementById('type');
  1555.                         var typeContainer = document.querySelector('.sub-sub-category');
  1556.                         var customOptionsContainer = document.getElementById('custom-type-options');
  1557.  
  1558.                         // Reset and hide type
  1559.                         typeSelect[removed] = '<option value="" selected disabled>Select Type</option>';
  1560.  
  1561.                         // Check if the selected value is 'Other'
  1562.                         if (categorySelect.value === 'Other') {
  1563.                             typeContainer.style.display = 'none';
  1564.                             customOptionsContainer.style.display = 'none';
  1565.                         } else {
  1566.                             // Populate types based on the selected category
  1567.                             if (categorySelect.value === 'Graphic Design') {
  1568.                                 addOption(typeSelect, 'Logo Design', 'Logo Design');
  1569.                                 addOption(typeSelect, 'Brochure Design', 'Brochure Design');
  1570.                                 addOption(typeSelect, 'Poster Design', 'Poster Design');
  1571.                                 // Add other subsubcategories as needed
  1572.                             } else if (categorySelect.value === 'UI/UX Design') {
  1573.                                 addOption(typeSelect, 'Mobile App Interface Design', 'Mobile App Interface Design');
  1574.                                 addOption(typeSelect, 'User Flow Optimization', 'User Flow Optimization');
  1575.                                 // Add other subsubcategories as needed
  1576.                             } else if (categorySelect.value === 'SEO') {
  1577.                                 addOption(typeSelect, 'On-page optimization', 'On-page optimization');
  1578.                                 addOption(typeSelect, 'Off-page optimization', 'Off-page optimization');
  1579.                                 addOption(typeSelect, 'Keyword research', 'Keyword research');
  1580.                                 addOption(typeSelect, 'SEO audits', 'SEO audits');
  1581.                             } else if (categorySelect.value === 'Content Marketing') {
  1582.                                 addOption(typeSelect, 'Content strategy', 'Content strategy');
  1583.                                 addOption(typeSelect, 'Blog writing', 'Blog writing');
  1584.                                 addOption(typeSelect, 'Infographic creation', 'Infographic creation');
  1585.                                 addOption(typeSelect, 'Video content production', 'Video content production');
  1586.                             }
  1587.  
  1588.                             // Show type container if a category is selected
  1589.                             typeContainer.style.display = categorySelect.value ? 'block' : 'none';
  1590.                             customOptionsContainer.style.display = 'none';
  1591.                         }
  1592.                     }
  1593.  
  1594.                     function addOption(select, value, text) {
  1595.                         var option = document.createElement('option');
  1596.                         option.value = value;
  1597.                         option.text = text;
  1598.                         select.add(option);
  1599.                     }
  1600. [removed]
  1601. &lt;/body&gt;
  1602. &lt;/html&gt;
  1603.  
  1604.  

Reply to "contact form"