`; const input=box.querySelector("input"),num=box.querySelector("[data-num]"); input.oninput=()=>{const n=+input.value;state.answers[q.key]=n;num.textContent=n;input.style.setProperty("--fill",`${(n-q.min)/(q.max-q.min)*100}%`);if(q.key==="distance")refs.distance.textContent=n+" км";preview()}; refs.control.appendChild(box) } refs.back.textContent=state.step===0?"← К началу":"← Назад";refs.progress.style.width=`${((state.step+1)/6)*100}%`;nextState();preview() } function size(h){return h<=164?"S":h<=174?"M":h<=184?"L":h<=194?"XL":"XXL"} function percent(r){return Math.max(83,Math.min(97,Math.round(85+(r[0].value-r[1].value)*1.35+r[0].value/11)))} function reasons(){ return[ `Лучше всего подходит под покрытие «${labels.terrain[state.answers.terrain]}».`, `Поддерживает главный приоритет — ${labels.priority[state.answers.priority]}.`, `Соответствует дистанции около ${state.answers.distance} км и цели «${labels.goal[state.answers.goal]}».` ] } function plan(){ const d=+state.answers.distance,l=state.answers.level||"casual",g=state.answers.goal||"fitness",f={beginner:.7,casual:.85,training:1,fast:1.08}[l]||.85,b=Math.max(15,Math.round(d*f)); let accent="6 × 2 мин чуть выше комфортного темпа"; if(g==="speed")accent="8 × 2 мин в интенсивном темпе"; if(g==="weight")accent="3 спокойные аэробные поездки"; if(g==="distance")accent="ровный темп и работа с питанием"; if(g==="commute")accent="2 рабочих маршрута в спокойном темпе"; if(g==="explore")accent="техника на смешанном покрытии"; return[ ["Неделя 01",`2 лёгкие поездки + ${Math.max(12,Math.round(b*.55))} км в выходной.`], ["Неделя 02",`Добавь объём: 2 короткие + ${Math.max(15,Math.round(b*.72))} км.`], ["Неделя 03",`${accent}. Длинная поездка — ${Math.max(18,Math.round(b*.88))} км.`], ["Неделя 04",`Восстановление и контрольный маршрут ${Math.max(20,b)} км.`] ] } function result(){ const r=ranking(),m=models[r[0].id],p=percent(r); $("[data-type]").textContent=m.type;$("[data-summary]").textContent=m.summary;$("[data-match]").textContent=p+"%"; const card=$("[data-result-card]");card.dataset.word=m.short; const img=$("[data-result-img]");img.src=m.img;img.alt=m.name; $("[data-result-name]").textContent=m.name;$("[data-size]").textContent=size(+state.answers.height); $("[data-reasons]").innerHTML=reasons().map(x=>`

${x}

`).join(""); $("[data-accessories]").innerHTML=m.acc.map(x=>`

${x}

`).join(""); $("[data-weeks]").innerHTML=plan().map(([a,b])=>``).join(""); show("result");root.scrollIntoView({behavior:"smooth",block:"start"}) } function start(demo){ if(demo){state.answers={terrain:"mixed",priority:"versatility",distance:55,level:"training",height:182,goal:"explore"};result();return} state.step=0;show("quiz");render() } function reset(){ state.step=0;state.answers={terrain:null,priority:null,distance:30,level:null,height:178,goal:null};show("start");preview("gravel");root.scrollIntoView({behavior:"smooth",block:"start"}) } function toast(text){refs.toast.textContent=text;refs.toast.classList.add("is-show");clearTimeout(toast.t);toast.t=setTimeout(()=>refs.toast.classList.remove("is-show"),1900)} async function copy(){ const m=models[ranking()[0].id],text=["PANARIDE RIDE DNA",m.type,m.name,"Размер рамы: "+size(+state.answers.height),"Маршрут: "+labels.terrain[state.answers.terrain],"Дистанция: "+state.answers.distance+" км","Цель: "+labels.goal[state.answers.goal]].join("\n"); try{await navigator.clipboard.writeText(text)}catch(e){const a=document.createElement("textarea");a.value=text;a.style.position="fixed";a.style.opacity="0";document.body.appendChild(a);a.select();document.execCommand("copy");a.remove()} toast("Ride DNA скопирован") } $$("[data-act]").forEach(b=>b.onclick=()=>{ const a=b.dataset.act; if(a==="start")start(false);if(a==="demo")start(true);if(a==="restart")reset();if(a==="copy")copy(); if(a==="back"){if(state.step===0)show("start");else{state.step--;render()}} if(a==="next"){if(state.step<5){state.step++;render();root.scrollIntoView({behavior:"smooth",block:"start"})}else result()} }); refs.stage.onpointermove=e=>{ if(matchMedia("(prefers-reduced-motion:reduce)").matches)return; const r=refs.stage.getBoundingClientRect(),x=(e.clientX-r.left)/r.width-.5,y=(e.clientY-r.top)/r.height-.5; refs.bike.style.setProperty("--x",`${-1+x*1.2}%`);refs.bike.style.setProperty("--y",`${y*7}px`);refs.bike.style.setProperty("--rx",`${-y*2.2}deg`);refs.bike.style.setProperty("--ry",`${x*2.8}deg`) }; refs.stage.onpointerleave=()=>{["--x","--y","--rx","--ry"].forEach(v=>refs.bike.style.removeProperty(v))}; let heroIndex=0,heroIds=["gravel","race","trail","city"]; setInterval(()=>{ if(!refs.screens.start.classList.contains("is-active"))return; heroIndex=(heroIndex+1)%heroIds.length;const m=models[heroIds[heroIndex]],img=$("[data-hero-img]"); img.classList.add("is-swap");setTimeout(()=>{img.src=m.img;img.alt=m.name;$("[data-hero-name]").textContent=m.name;img.classList.remove("is-swap")},170) },3200); Object.values(models).forEach(m=>{const i=new Image();i.src=m.img}); preview("gravel");show("start") })();