route step
unknown
plain_text
3 years ago
42 kB
3
Indexable
<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>Editor is loading...