route step

mail@pastecode.io avatar
unknown
plain_text
2 years ago
42 kB
1
Indexable
Never
<div class="steps step-register">
                <div class="form-fields-box">
                    <div class="form-inline">
                        <div class="row">
                            <div class="col-12 d-flex justify-content-between flex-column flex-xl-row align-items-xl-start align-items-center bottom-border">
                                <p class="lable-pra">Are you running with kids aged below 10?</p>
                                <div>
                                    <label for="kidsUnder10-no" class="radio-container ">
                                        No
                                        <input class="js-participate-with-kids-Under10" type="radio" name="radioParticipateWithKidsUnder10" id="kidsUnder10-no" data-value="2" autocomplete="off">
                                        <span class="checkmark"></span>
                                    </label>
                                    <label for="kidsUnder10-yes" class="radio-container mr0">
                                        Yes
                                        <input class="js-participate-with-kids-Under10" type="radio" name="radioParticipateWithKidsUnder10" id="kidsUnder10-yes" data-value="1" autocomplete="off">
                                        <span class="checkmark"></span>
                                    </label>
                                </div>
                            </div>

                            <div class="col-12 bottom-border">
                                <p class="lable-pra">Choose route distance:</p>

                                <div class="row">
                                    <div class="col-12 d-flex justify-content-between flex-column flex-xl-row align-items-xl-start align-items-center">
                                            <div class="route-map-wrap">
                                                <div class="route-map">
                                                    <div class="route-map__thumb">



                                                        <a href="javascript:void(0);" class="click-badge-overlay route-map__icon zoom-button" data-img-src="/media/pfockxjc/general.png" data-mob-src="/media/pfockxjc/general.png" style="cursor: pointer;">
                                                            <img src="/Common/images/run/icon-zoom.svg" alt="zoom in">
                                                        </a>

                                                        <img class="thumb" src="/media/pfockxjc/general.png" alt="general">
                                                    </div>
                                                    <div class="route-map__download">
                                                        <a href="javascript:void(0);" class="download-image-link" download="GeneralRoute.png" data-download="/media/pfockxjc/general.png" style="cursor: pointer;">
                                                            <img src="/Common/images/run/icon-download.svg" alt="Download Map">
                                                        </a>
                                                    </div>
                                                </div>
                                                <label for="GENERAL" class="radio-container">

                                                    <div class="note d-flex align-items-center ">

                                                        
                                                        <span>General</span>
                                                                                                            </div>
                                                    <input class="js-route-distance " type="radio" name="routeDistance" id="GENERAL" autocomplete="off" data-route="GENERAL" data-value="5362" checked="false">
                                                    <span class="checkmark"></span>
                                                </label>
                                            </div>
                                            <div class="route-map-wrap">
                                                <div class="route-map">
                                                    <div class="route-map__thumb">



                                                        <a href="javascript:void(0);" class="click-badge-overlay route-map__icon zoom-button" data-img-src="/media/kamlrgsa/family.png" data-mob-src="/media/kamlrgsa/family.png">
                                                            <img src="/Common/images/run/icon-zoom.svg" alt="zoom in">
                                                        </a>

                                                        <img class="thumb" src="/media/kamlrgsa/family.png" alt="general">
                                                    </div>
                                                    <div class="route-map__download">
                                                        <a href="javascript:void(0);" class="download-image-link" download="FamilyRoute.png" data-download="/media/kamlrgsa/family.png">
                                                            <img src="/Common/images/run/icon-download.svg" alt="Download Map">
                                                        </a>
                                                    </div>
                                                </div>
                                                <label for="FAMILY" class="radio-container">

                                                    <div class="note d-flex align-items-center ">

                                                        
                                                        <span>Family</span>
                                                            <small>Only available route for families with kids under 13</small>
                                                                                                            </div>
                                                    <input class="js-route-distance js-default-click" type="radio" name="routeDistance" id="FAMILY" autocomplete="off" data-route="FAMILY" data-value="5363" checked="false">
                                                    <span class="checkmark"></span>
                                                </label>
                                            </div>
                                        <input id="RideRouteValue" name="RideRouteValue" type="hidden" value="" autocomplete="off">
                                    </div>
                                </div>

                                <input id="dubaiRideRouteDistance" name="DubaiRideRouteDistance" type="hidden" value="5362" autocomplete="off">
                                <input id="dubaiRideRouteUniqueName" name="DubaiRideRouteUniqueName" type="hidden" value="GENERAL" autocomplete="off">
                            </div>
                            <div class="col-12 bottom-border">
                                <div class="form-check">
                                    <input class="form-check-input" data-val="true" data-val-required="The RideCapableParticipantsCheck field is required." id="RideCapableParticipantsCheck" name="RideCapableParticipantsCheck" type="checkbox" value="true" autocomplete="off"><input name="RideCapableParticipantsCheck" type="hidden" value="false" autocomplete="off">
                                    <label for="RideCapableParticipantsCheck">I Confirm that all articipant are capable of completing the choosen ride route.</label>
                                    
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" data-val="true" data-val-required="The RideHelmetsAndLightsCheck field is required." id="RideHelmetsAndLightsCheck" name="RideHelmetsAndLightsCheck" type="checkbox" value="true" autocomplete="off"><input name="RideHelmetsAndLightsCheck" type="hidden" value="false" autocomplete="off">
                                    <label for="RideHelmetsAndLightsCheck">I confirm that all riders will have helmet, lights etc.</label>
                                    

                                </div>
                            </div>

                            <div class="col-12 bottom-border pt-20">
                                <div class="row">

                                    
                                    <div class="col-6">
                                        <div class="input-group select-dropdown timeSlots">
                                            <div class="input-group-prepend">
                                                <div class="input-group-text">
                                                    <img src="/Common/images/run/icon-clock.svg" alt="email">
                                                </div>
                                            </div>
                                            <select class="js-time-slot form-control valid" id="timeSlots" name="TimeSlot">
                                                <option value="-1" data-id="0">
                                                    Choose Your Time Slot
                                                    
                                                </option>
                                            <option value="5364">4:30 AM</option><option value="5365">4:45 AM</option><option value="5366">5:00 AM</option><option value="5367">5:15 AM</option></select>
                                            <input id="timeSlotValue" name="TimeSlotValue" type="hidden" value="" autocomplete="off">
                                        </div>
                                        <div class="alert alert-error">
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="input-group select-dropdown">
                                            <div class="input-group-prepend">
                                                <div class="input-group-text">
                                                    <img src="/Common/images/run/icon-location.svg" alt="clock">
                                                </div>
                                            </div>
                                            <select class="js-country-flags form-control valid" id="StartLocations" name="StartLocation">
                                                <option value="-1" data-id="0">
                                                    Select Start Location
                                                    
                                                </option>
                                            <option value="5632">Downtown</option><option value="5633">Location 2</option></select>
                                            <input id="startLocationValue" name="StartLocationValue" type="hidden" value="" autocomplete="off">
                                            <p class="lable-pra lable-pra small">
                                                Only one route is allowed for families.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 bottom-border pt-20">
                                <div class="row">
                                    <div class="col-6">
                                        <p class="lable-pra">
                                            How are arriving at the Venue?
                                            <small class="d-block">
                                                Please note that no bicycles will be available to hire.
                                            </small>
                                        </p>
                                    </div>
                                    <div class="col-6 d-flex justify-content-between flex-column flex-xl-row align-items-xl-start align-items-center">
                                        <div>
                                            <label class="radio-container">
                                                Car
                                                <input class="form-control venueArrivals" data-val="1" id="VenueArrivalCar" name="VenueArrivalValue" type="radio" value="Car" autocomplete="off">
                                                <span class="checkmark"></span>
                                            </label>
                                            <label class="radio-container mr0">
                                                Bicycle
                                                <input class="form-control venueArrivals" data-val="2" id="VenueArrivalBiCycle" name="VenueArrivalValue" type="radio" value="Bicycle" autocomplete="off">
                                                <span class="checkmark"></span>
                                            </label>
                                        </div>
                                    </div>

                                </div>
                                <input data-val="true" data-val-number="The field VenueArrival must be a number." data-val-required="The VenueArrival field is required." id="VenueArrival" name="VenueArrival" type="hidden" value="0" autocomplete="off">
                            </div>
                                <div class="col-12 pt-10">
                                    <p class="lable-pra">
                                        Emergency contact
                                        <small>
                                            This should be an adult who is not a member of the registered group.
                                        </small>
                                    </p>
                                    <div class="row">
                                        <div class="col-6">
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <div class="input-group-text">
                                                        <img loading="lazy" src="/Common/images/run/icon-avatar.svg" alt="email">
                                                    </div>
                                                </div>
                                                <input autocomplete="off" class="form-control" data-val="true" data-val-maxlength="The length of emergency contact name must 100 characters or fewer." data-val-maxlength-max="100" data-val-regex="Emergency contact name must contain letters." data-val-regex-pattern="^[a-zA-Z][a-zA-Z ]+$|^[\u0600-\u06FF][\u0600-\u06FF ]+$" data-val-required="Emergency contact name field is required." id="emergencyContactName" maxlength="100" name="EmergencyContactName" placeholder="Emergency Contact Name" type="text" value="">
                                                <span class="field-validation-valid" data-valmsg-for="EmergencyContactName" data-valmsg-replace="true"></span>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="input-group input-group-phone">
                                                <div class="input-group-prepend">
                                                    <div class="input-group-text">
                                                        <img loading="lazy" src="/Common/images/run/icon-phone.svg" alt="email">
                                                    </div>
                                                </div>
                                                <div class="select-dropdown form-control-1">
                                                    <select class="js-country-flags " id="emergencyCountryCode" name="EmergencyCountryCode">
                                                                <option value="+971" selected="">+971</option>
                                                                <option value="+93">+93</option>
                                                                <option value="+355">+355</option>
                                                                <option value="+213">+213</option>
                                                                <option value="+1-684">+1-684</option>
                                                                <option value="+376">+376</option>
                                                                <option value="+244">+244</option>
                                                                <option value="+1-264">+1-264</option>
                                                                <option value="+672">+672</option>
                                                                <option value="+1-268">+1-268</option>
                                                                <option value="+54">+54</option>
                                                                <option value="+374">+374</option>
                                                                <option value="+297">+297</option>
                                                                <option value="+61">+61</option>
                                                                <option value="+43">+43</option>
                                                                <option value="+994">+994</option>
                                                                <option value="+1-242">+1-242</option>
                                                                <option value="+973">+973</option>
                                                                <option value="+880">+880</option>
                                                                <option value="+1-246">+1-246</option>
                                                                <option value="+375">+375</option>
                                                                <option value="+32">+32</option>
                                                                <option value="+501">+501</option>
                                                                <option value="+229">+229</option>
                                                                <option value="+1-441">+1-441</option>
                                                                <option value="+975">+975</option>
                                                                <option value="+591">+591</option>
                                                                <option value="+387">+387</option>
                                                                <option value="+267">+267</option>
                                                                <option value="+55">+55</option>
                                                                <option value="+246">+246</option>
                                                                <option value="+1-284">+1-284</option>
                                                                <option value="+673">+673</option>
                                                                <option value="+359">+359</option>
                                                                <option value="+226">+226</option>
                                                                <option value="+257">+257</option>
                                                                <option value="+855">+855</option>
                                                                <option value="+237">+237</option>
                                                                <option value="+1">+1</option>
                                                                <option value="+238">+238</option>
                                                                <option value="+1-345">+1-345</option>
                                                                <option value="+236">+236</option>
                                                                <option value="+235">+235</option>
                                                                <option value="+56">+56</option>
                                                                <option value="+86">+86</option>
                                                                <option value="+61">+61</option>
                                                                <option value="+61">+61</option>
                                                                <option value="+57">+57</option>
                                                                <option value="+269">+269</option>
                                                                <option value="+682">+682</option>
                                                                <option value="+506">+506</option>
                                                                <option value="+385">+385</option>
                                                                <option value="+53">+53</option>
                                                                <option value="+599">+599</option>
                                                                <option value="+357">+357</option>
                                                                <option value="+420">+420</option>
                                                                <option value="+243">+243</option>
                                                                <option value="+45">+45</option>
                                                                <option value="+253">+253</option>
                                                                <option value="+1-767">+1-767</option>
                                                                <option value="+1-809">+1-809</option>
                                                                <option value="+670">+670</option>
                                                                <option value="+593">+593</option>
                                                                <option value="+20">+20</option>
                                                                <option value="+503">+503</option>
                                                                <option value="+240">+240</option>
                                                                <option value="+291">+291</option>
                                                                <option value="+372">+372</option>
                                                                <option value="+251">+251</option>
                                                                <option value="+500">+500</option>
                                                                <option value="+298">+298</option>
                                                                <option value="+679">+679</option>
                                                                <option value="+358">+358</option>
                                                                <option value="+33">+33</option>
                                                                <option value="+689">+689</option>
                                                                <option value="+241">+241</option>
                                                                <option value="+220">+220</option>
                                                                <option value="+995">+995</option>
                                                                <option value="+49">+49</option>
                                                                <option value="+233">+233</option>
                                                                <option value="+350">+350</option>
                                                                <option value="+30">+30</option>
                                                                <option value="+299">+299</option>
                                                                <option value="+1-473">+1-473</option>
                                                                <option value="+1-671">+1-671</option>
                                                                <option value="+502">+502</option>
                                                                <option value="+44-1481">+44-1481</option>
                                                                <option value="+224">+224</option>
                                                                <option value="+245">+245</option>
                                                                <option value="+592">+592</option>
                                                                <option value="+509">+509</option>
                                                                <option value="+504">+504</option>
                                                                <option value="+852">+852</option>
                                                                <option value="+36">+36</option>
                                                                <option value="+354">+354</option>
                                                                <option value="+91">+91</option>
                                                                <option value="+62">+62</option>
                                                                <option value="+98">+98</option>
                                                                <option value="+964">+964</option>
                                                                <option value="+353">+353</option>
                                                                <option value="+44-1624">+44-1624</option>
                                                                <option value="+972">+972</option>
                                                                <option value="+39">+39</option>
                                                                <option value="+225">+225</option>
                                                                <option value="+1-876">+1-876</option>
                                                                <option value="+81">+81</option>
                                                                <option value="+44-1534">+44-1534</option>
                                                                <option value="+962">+962</option>
                                                                <option value="+7">+7</option>
                                                                <option value="+254">+254</option>
                                                                <option value="+686">+686</option>
                                                                <option value="+383">+383</option>
                                                                <option value="+965">+965</option>
                                                                <option value="+996">+996</option>
                                                                <option value="+856">+856</option>
                                                                <option value="+371">+371</option>
                                                                <option value="+961">+961</option>
                                                                <option value="+266">+266</option>
                                                                <option value="+231">+231</option>
                                                                <option value="+218">+218</option>
                                                                <option value="+423">+423</option>
                                                                <option value="+370">+370</option>
                                                                <option value="+352">+352</option>
                                                                <option value="+853">+853</option>
                                                                <option value="+389">+389</option>
                                                                <option value="+261">+261</option>
                                                                <option value="+265">+265</option>
                                                                <option value="+60">+60</option>
                                                                <option value="+960">+960</option>
                                                                <option value="+223">+223</option>
                                                                <option value="+356">+356</option>
                                                                <option value="+692">+692</option>
                                                                <option value="+222">+222</option>
                                                                <option value="+230">+230</option>
                                                                <option value="+262">+262</option>
                                                                <option value="+52">+52</option>
                                                                <option value="+691">+691</option>
                                                                <option value="+373">+373</option>
                                                                <option value="+377">+377</option>
                                                                <option value="+976">+976</option>
                                                                <option value="+382">+382</option>
                                                                <option value="+1-664">+1-664</option>
                                                                <option value="+212">+212</option>
                                                                <option value="+258">+258</option>
                                                                <option value="+95">+95</option>
                                                                <option value="+264">+264</option>
                                                                <option value="+674">+674</option>
                                                                <option value="+977">+977</option>
                                                                <option value="+31">+31</option>
                                                                <option value="+599">+599</option>
                                                                <option value="+687">+687</option>
                                                                <option value="+64">+64</option>
                                                                <option value="+505">+505</option>
                                                                <option value="+227">+227</option>
                                                                <option value="+234">+234</option>
                                                                <option value="+683">+683</option>
                                                                <option value="+850">+850</option>
                                                                <option value="+1-670">+1-670</option>
                                                                <option value="+47">+47</option>
                                                                <option value="+968">+968</option>
                                                                <option value="+92">+92</option>
                                                                <option value="+680">+680</option>
                                                                <option value="+970">+970</option>
                                                                <option value="+507">+507</option>
                                                                <option value="+675">+675</option>
                                                                <option value="+595">+595</option>
                                                                <option value="+51">+51</option>
                                                                <option value="+63">+63</option>
                                                                <option value="+64">+64</option>
                                                                <option value="+48">+48</option>
                                                                <option value="+351">+351</option>
                                                                <option value="+1-787">+1-787</option>
                                                                <option value="+974">+974</option>
                                                                <option value="+242">+242</option>
                                                                <option value="+262">+262</option>
                                                                <option value="+40">+40</option>
                                                                <option value="+7">+7</option>
                                                                <option value="+250">+250</option>
                                                                <option value="+590">+590</option>
                                                                <option value="+290">+290</option>
                                                                <option value="+1-869">+1-869</option>
                                                                <option value="+1-758">+1-758</option>
                                                                <option value="+590">+590</option>
                                                                <option value="+508">+508</option>
                                                                <option value="+1-784">+1-784</option>
                                                                <option value="+685">+685</option>
                                                                <option value="+378">+378</option>
                                                                <option value="+239">+239</option>
                                                                <option value="+966">+966</option>
                                                                <option value="+221">+221</option>
                                                                <option value="+381">+381</option>
                                                                <option value="+248">+248</option>
                                                                <option value="+232">+232</option>
                                                                <option value="+65">+65</option>
                                                                <option value="+1-721">+1-721</option>
                                                                <option value="+421">+421</option>
                                                                <option value="+386">+386</option>
                                                                <option value="+677">+677</option>
                                                                <option value="+252">+252</option>
                                                                <option value="+27">+27</option>
                                                                <option value="+82">+82</option>
                                                                <option value="+211">+211</option>
                                                                <option value="+34">+34</option>
                                                                <option value="+94">+94</option>
                                                                <option value="+249">+249</option>
                                                                <option value="+597">+597</option>
                                                                <option value="+47">+47</option>
                                                                <option value="+268">+268</option>
                                                                <option value="+46">+46</option>
                                                                <option value="+41">+41</option>
                                                                <option value="+963">+963</option>
                                                                <option value="+886">+886</option>
                                                                <option value="+992">+992</option>
                                                                <option value="+255">+255</option>
                                                                <option value="+66">+66</option>
                                                                <option value="+228">+228</option>
                                                                <option value="+690">+690</option>
                                                                <option value="+676">+676</option>
                                                                <option value="+1-868">+1-868</option>
                                                                <option value="+216">+216</option>
                                                                <option value="+90">+90</option>
                                                                <option value="+993">+993</option>
                                                                <option value="+1-649">+1-649</option>
                                                                <option value="+688">+688</option>
                                                                <option value="+1-340">+1-340</option>
                                                                <option value="+256">+256</option>
                                                                <option value="+380">+380</option>
                                                                <option value="+44">+44</option>
                                                                <option value="+1">+1</option>
                                                                <option value="+598">+598</option>
                                                                <option value="+998">+998</option>
                                                                <option value="+678">+678</option>
                                                                <option value="+379">+379</option>
                                                                <option value="+58">+58</option>
                                                                <option value="+84">+84</option>
                                                                <option value="+681">+681</option>
                                                                <option value="+212">+212</option>
                                                                <option value="+967">+967</option>
                                                                <option value="+260">+260</option>
                                                                <option value="+263">+263</option>
                                                    </select>
                                                </div>
                                                <input autocomplete="off" class="form-control-2" data-val="true" data-val-regex="The mobile number format is incorrect." data-val-regex-pattern="^[0-9]{4,14}(?:x.+)?$" data-val-required="Mobile number field is required." id="emergencyMobileNumber" maxlength="13" name="EmergencyMobileNumber" placeholder="Emergency Number" type="tel" value="">
                                                <span class="field-validation-valid" data-valmsg-for="EmergencyMobileNumber" data-valmsg-replace="true"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            <div class="col-12">
                                <div class="steps__footer mt-0 align-items-center d-flex justify-content-between justify-content-sm-end">
                                    <a id="DFCRunRideRegistrationStep4RouteSelectionBack" href="javascript:void(0);">Back</a>
                                    <button id="DFCRunRideRegistrationStep3RouteSelectionSubmit" type="button" class="btn btn-rounded btn-rounded-green-filled">Next</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>