Vehicle Condition

Nav rapide
Mechanical Condition External Condition Internal Condition Color choose Additional information

Mechanical Condition

Mechanical Condition - Voir le template
Etat mécanique
Mauvais Très bon
  • template
<div class="flex flex-col gap-2.5 max-w-[375px]">

    <div class="flex justify-start font-medium">

        <span>Etat mécanique</span>

    </div>

    <div class="flex gap-2.5">

        <div class="form-element form-checkbox-button w-full max-w-[67px]">

            <label for="1">

                <input type="radio" id="1" class="" name="condition">

                <span class="controller controller__radio controller__radio__no-padding bg-[#F8B1A1] aspect-[1.675] justify-center">

                <span>1</span>

            </span>

            </label>

        </div>

        <div class="form-element form-checkbox-button w-full max-w-[67px]">

            <label for="2">

                <input type="radio" id="2" class="" name="condition">

                <span class="controller controller__radio controller__radio__no-padding bg-[#F8D0AC] aspect-[1.675] justify-center">

                <span>2</span>

            </span>

            </label>

        </div>

        <div class="form-element form-checkbox-button w-full max-w-[67px]">

            <label for="3">

                <input type="radio" id="3" class="" name="condition">

                <span class="controller controller__radio controller__radio__no-padding bg-[#FFF1BD] aspect-[1.675] justify-center">

                <span>3</span>

            </span>

            </label>

        </div>

        <div class="form-element form-checkbox-button w-full max-w-[67px]">

            <label for="4">

                <input type="radio" id="4" class="" name="condition">

                <span class="controller controller__radio controller__radio__no-padding bg-[#CCF598] aspect-[1.675] justify-center">

                <span>4</span>

            </span>

            </label>

        </div>

        <div class="form-element form-checkbox-button w-full max-w-[67px]">

            <label for="5">

                <input type="radio" id="5" class="" name="condition">

                <span class="controller controller__radio controller__radio__no-padding bg-[#92EF90] aspect-[1.675] p-0 justify-center">

                <span>5</span>

            </span>

            </label>

        </div>

    </div>

    <div class="flex justify-between font-medium text-text-light">

        <span>Mauvais</span>

        <span>Très bon</span>

    </div>

</div>

External Condition

External Condition - Voir le template
Etat extérieur
Mauvais Très bon
  • template
<div class="flex flex-col gap-2.5 max-w-[375px]">

    <div class="flex justify-start font-medium">

        <span>Etat extérieur</span>

    </div>

    <div class="flex gap-2.5">

        <div class="form-element form-checkbox-button w-full max-w-[67px]">

            <label for="1">

                <input type="radio" id="1" class="" name="condition">

                <span class="controller controller__radio controller__radio__no-padding bg-[#F8B1A1] aspect-[1.675] justify-center">

                <span>1</span>

            </span>

            </label>

        </div>

        <div class="form-element form-checkbox-button w-full max-w-[67px]">

            <label for="2">

                <input type="radio" id="2" class="" name="condition">

                <span class="controller controller__radio controller__radio__no-padding bg-[#F8D0AC] aspect-[1.675] justify-center">

                <span>2</span>

            </span>

            </label>

        </div>

        <div class="form-element form-checkbox-button w-full max-w-[67px]">

            <label for="3">

                <input type="radio" id="3" class="" name="condition">

                <span class="controller controller__radio controller__radio__no-padding bg-[#FFF1BD] aspect-[1.675] justify-center">

                <span>3</span>

            </span>

            </label>

        </div>

        <div class="form-element form-checkbox-button w-full max-w-[67px]">

            <label for="4">

                <input type="radio" id="4" class="" name="condition">

                <span class="controller controller__radio controller__radio__no-padding bg-[#CCF598] aspect-[1.675] justify-center">

                <span>4</span>

            </span>

            </label>

        </div>

        <div class="form-element form-checkbox-button w-full max-w-[67px]">

            <label for="5">

                <input type="radio" id="5" class="" name="condition">

                <span class="controller controller__radio controller__radio__no-padding bg-[#92EF90] aspect-[1.675] justify-center">

                <span>5</span>

            </span>

            </label>

        </div>

    </div>

    <div class="flex justify-between font-medium text-text-light">

        <span>Mauvais</span>

        <span>Très bon</span>

    </div>

</div>

Internal Condition

Internal Condition - Voir le template
Etat intérieur
Mauvais Moyen Bon
  • template
<div class="flex flex-col gap-2.5 max-w-[375px]" x-data="initEstimateStateLevel()">

    <div class="flex justify-start font-medium mb-3.5">

        <span>Etat intérieur</span>

    </div>



    <div class="form-element text form-range" x-data="rangeSlider(0, 2, 0)">

        <input type="range" x-ref="input"

               id="estimate_level_state"

               name="range" class="" title=""

               x-bind:min="min" x-bind:max="max" x-model="selected" step="1"

               @input="slide()"

        >

        <div class="relative z-10 h-0.75 mb-3.5">

            <div class="absolute z-10 left-0 right-0 bottom-0 top-0 rounded-md bg-[#C2C6D3]"></div>

            <div class="absolute z-20 top-0 bottom-0 rounded-md bg-primary-accent left-0" x-bind:style="'width:'+thumb+'%;'"></div>

            <div class="range-thumb" x-bind:style="'left: calc('+thumb+'% - (30px * ('+thumb+' / 100))'"></div>

        </div>



        <div class="flex justify-between font-medium text-text-light">

            <span class="cursor-pointer" @click="changeValue(0)">Mauvais</span>

            <span class="cursor-pointer ml-[-37px]" @click="changeValue(1)">Moyen</span>

            <span class="cursor-pointer" @click="changeValue(2)">Bon</span>

        </div>

    </div>

</div>



<script>

  function initEstimateStateLevel() {

    return {

      init() {

        console.log('init')

      },

      setValue(value) {

        console.log('set : ' + value)

        document.getElementById('estimate_level_state').value = "'" + value + "'";

      }

    }

  }

</script>

Color choose

Color choose - Voir le template
Couleur de votre voiture
+5
-
  • template
<div x-data="initChooseColor()" class="flex flex-col gap-2.5 max-w-[409px] bg-white border-1 rounded-[10px] p-4">

    <div class="flex justify-start font-medium">

        <span>Couleur de votre voiture</span>

    </div>

    <div class="grid grid-cols-7 gap-2.5">

        <div class="form-element form-checkbox-button w-full max-w-[45px]">

            <label for="gray">

                <input type="radio" id="gray" class="" name="color" @change="changeLabel()" data-labelname="Gris">

                <span class="controller controller__radio controller__radio__color-choose bg-gradient-to-r from-[#EDF0FA] to-[#D4D9E9] aspect-square"></span>

            </label>

        </div>

        <div class="form-element form-checkbox-button w-full max-w-[45px]">

            <label for="black">

                <input type="radio" id="black" class="" name="color" @change="changeLabel()" data-labelname="Noir">

                <span class="controller controller__radio controller__radio__color-choose bg-gradient-to-r from-[#0D0E12] to-[#0D0E12] aspect-square"></span>

            </label>

        </div>

        <div class="form-element form-checkbox-button w-full max-w-[45px]">

            <label for="gray-dark">

                <input type="radio" id="gray-dark" class="" name="color" @change="changeLabel()" data-labelname="Gris foncé">

                <span class="controller controller__radio controller__radio__color-choose bg-[#7D818E] aspect-square"></span>

            </label>

        </div>

        <div class="form-element form-checkbox-button w-full max-w-[45px]">

            <label for="blue">

                <input type="radio" id="blue" class="" name="color" @change="changeLabel()" data-labelname="Bleu gris">

                <span class="controller controller__radio controller__radio__color-choose bg-gradient-to-r from-[#646F96] to-[#3F5088] aspect-square"></span>

            </label>

        </div>

        <div class="form-element form-checkbox-button w-full max-w-[45px]">

            <label for="red">

                <input type="radio" id="red" class="" name="color" @change="changeLabel()" data-labelname="Rouge">

                <span class="controller controller__radio controller__radio__color-choose bg-[#CB4A4A] aspect-square"></span>

            </label>

        </div>

        <div class="form-element form-checkbox-button w-full max-w-[45px]">

            <label for="white">

                <input type="radio" id="white" class="" name="color" @change="changeLabel()" data-labelname="Blanc">

                <span class="controller controller__radio controller__radio__color-choose controller__radio__border bg-gradient-to-r from-[#FAFAFA] to-[#FDFDFD] aspect-square border-1 border-[#DEE0E7]"></span>

            </label>

        </div>

        <div x-on:click="open = !open" x-show="!open" class="w-full max-w-[45px] bg-white aspect-square border-1 border-[#DEE0E7] rounded-[15px] cursor-pointer flex items-center justify-center">

            <span class="text-icon text-xs-tiny font-medium">+5</span>

        </div>

        <div x-show="open" class="form-element form-checkbox-button w-full max-w-[45px]">

            <label for="blue-light">

                <input type="radio" id="blue-light" class="" name="color" @change="changeLabel()" data-labelname="Bleu ciel">

                <span class="controller controller__radio controller__radio__color-choose controller__radio__border bg-blue-50 aspect-square border-1 border-[#DEE0E7]"></span>

            </label>

        </div>

        <div x-show="open" class="form-element form-checkbox-button w-full max-w-[45px]">

            <label for="bg-blue-200">

                <input type="radio" id="bg-blue-200" class="" name="color" @change="changeLabel()" data-labelname="Bleu foncé">

                <span class="controller controller__radio controller__radio__color-choose controller__radio__border bg-blue-200 aspect-square border-1 border-[#DEE0E7]"></span>

            </label>

        </div>

        <div x-show="open" class="form-element form-checkbox-button w-full max-w-[45px]">

            <label for="bg-blue-300">

                <input type="radio" id="bg-blue-300" class="" name="color" @change="changeLabel()" data-labelname="Bleu">

                <span class="controller controller__radio controller__radio__color-choose controller__radio__border bg-blue-300 aspect-square border-1 border-[#DEE0E7]"></span>

            </label>

        </div>

        <div x-show="open" class="form-element form-checkbox-button w-full max-w-[45px]">

            <label for="bg-hector">

                <input type="radio" id="bg-hector" class="" name="color" @change="changeLabel()" data-labelname="Urricane">

                <span class="controller controller__radio controller__radio__color-choose controller__radio__border bg-hector aspect-square border-1 border-[#DEE0E7]"></span>

            </label>

        </div>

        <div x-on:click="open = !open" x-show="open" class="w-full max-w-[45px] bg-white aspect-square border-1 border-[#DEE0E7] rounded-[15px] cursor-pointer flex items-center justify-center">

            <span class="text-icon text-xs-tiny font-medium">-</span>

        </div>

    </div>

    <div class="flex justify-between font-medium min-h-[24px]">

        <span x-text="labelName"></span>

    </div>



    <script>

      function initChooseColor() {

        return {

          open: false,

          labelName: '',

          changeLabel() {

            this.labelName = this.$event.target.dataset.labelname

          }

        }

      }

    </script>

</div>

Additional information

Additional information - Voir le template
Informations complémentaires
  • template
<div class="flex flex-col gap-2.5 max-w-[375px] bg-white border-1 rounded-[10px] p-4">

    <div class="flex justify-start font-medium">

        <span>Informations complémentaires</span>

    </div>

    <div class="form-element form-select form-select__blue w-full min-w-0 after:bg-primary-accent"

         x-data="selectInput('no', 'Non')"

         :class="{ 'active' : active }"

         @click.away="active = false"

    >

        <input x-ref="input"

               name="first-hand"

               class="" id="first-hand"

               type="text" pattern="\S+"

               x-model="currentValue"

        >

        <div x-ref="display" @click="active = !active" class="form-input select" x-text="currentLabel"></div>

        <label @click="active = !active" class="moved" :class="{ 'moved' : full }" for="first-hand">Est-ce une 1ère main</label>

        <ul x-ref="options" class="select-options" x-show="active">

            <li><button type="button" value="yes">Oui</button></li>

            <li><button type="button" value="no">Non</button></li>

        </ul>

    </div>

    <div class="form-element form-select form-select__blue w-full min-w-0 after:bg-primary-accent"

         x-data="selectInput('no', 'Non')"

         :class="{ 'active' : active }"

         @click.away="active = false"

    >

        <input x-ref="input"

               name="paint"

               class="" id="paint"

               type="text" pattern="\S+"

               x-model="currentValue"

        >

        <div x-ref="display" @click="active = !active" class="form-input select" x-text="currentLabel"></div>

        <label @click="active = !active" class="moved" :class="{ 'moved' : full }" for="paint">A-t-il été repeint</label>

        <ul x-ref="options" class="select-options" x-show="active">

            <li><button type="button" value="yes">Oui</button></li>

            <li><button type="button" value="no">Non</button></li>

        </ul>

    </div>

    <div class="form-element form-select form-select__blue w-full min-w-0 after:bg-primary-accent"

         x-data="selectInput('no', 'Non')"

         :class="{ 'active' : active }"

         @click.away="active = false"

    >

        <input x-ref="input"

               name="accident"

               class="" id="accident"

               type="text" pattern="\S+"

               x-model="currentValue"

        >

        <div x-ref="display" @click="active = !active" class="form-input select" x-text="currentLabel"></div>

        <label @click="active = !active" class="moved" :class="{ 'moved' : full }" for="accident">Le véhicule a-t-il été accidenté</label>

        <ul x-ref="options" class="select-options" x-show="active">

            <li><button type="button" value="yes">Oui</button></li>

            <li><button type="button" value="no">Non</button></li>

        </ul>

    </div>

</div>