Редактор страницы предквалификации — Симуляторная ";
let current = ORIGINAL;
const $=id=>document.getElementById(id);
const code=$("code"), preview=$("preview"), status=$("status");
code.value=current;
function replaceOne(s,re,val){
return re.test(s)?s.replace(re,val):s;
}
function fromControls(base){
let s=base;
const v=id=>$(id).value;
s=replaceOne(s,/#spbg\{width:100vw;margin-left:calc\(50% - 50vw\);padding:\d+px 14px \d+px;/,
`#spbg{width:100vw;margin-left:calc(50% - 50vw);padding:${v("padTop")}px 14px ${v("padBottom")}px;`);
s=replaceOne(s,/@media\(max-width:720px\)\{#spbg\{padding:\d+px 0 \d+px\}\}/,
`@media(max-width:720px){#spbg{padding:${v("mPadTop")}px 0 ${v("mPadBottom")}px}}`);
s=replaceOne(s,/#sp\{--p:[^;]+;--p2:[^;]+;--b:[^;]+;--l:#e9e4ef;max-width:\d+px;/,
`#sp{--p:${v("purple")};--p2:${v("purple2")};--b:${v("blue")};--l:#e9e4ef;max-width:${v("maxWidth")}px;`);
s=replaceOne(s,/border-radius:\d+px;overflow:hidden;box-shadow:0 24px 60px #19082d24;/,
`border-radius:${v("radius")}px;overflow:hidden;box-shadow:0 24px 60px #19082d24;`);
s=replaceOne(s,/#sp \.h\{height:\d+px;/,
`#sp .h{height:${v("heroHeight")}px;`);
s=replaceOne(s,/#sp \.logo\{position:absolute;z-index:2;top:-?\d+px;left:-?\d+px;width:min\(\d+px,55vw\)\}/,
`#sp .logo{position:absolute;z-index:2;top:${v("logoTop")}px;left:${v("logoLeft")}px;width:min(${v("logoWidth")}px,55vw)}`);
s=replaceOne(s,/#sp \.car\{position:absolute;z-index:1;right:-?\d+px;top:-?\d+px;width:\d+px;max-width:36vw;filter:/,
`#sp .car{position:absolute;z-index:1;right:${v("carRight")}px;top:${v("carTop")}px;width:${v("carWidth")}px;max-width:36vw;opacity:${v("carOpacity")};filter:`);
return s;
}
function render(){
preview.srcdoc=current;
code.value=current;
status.textContent="Предпросмотр обновлён";
setTimeout(()=>status.textContent="Готово",1000);
}
function applyControls(){
current=fromControls(code.value);
render();
}
$("apply").onclick=applyControls;
[
"padTop","padBottom","mPadTop","mPadBottom","maxWidth","radius","heroHeight",
"purple","purple2","blue","logoWidth","logoTop","logoLeft","carWidth","carTop","carRight","carOpacity"
].forEach(id=>$(id).addEventListener("input",applyControls));
code.addEventListener("input",()=>{
current=code.value;
preview.srcdoc=current;
});
$("reset").onclick=()=>{
if(!confirm("Вернуть исходный утверждённый дизайн?")) return;
current=ORIGINAL;
code.value=current;
render();
};
$("copy").onclick=async()=>{
await navigator.clipboard.writeText(current);
status.textContent="HTML скопирован";
};
$("download").onclick=()=>{
const blob=new Blob([current],{type:"text/html;charset=utf-8"});
const a=document.createElement("a");
a.href=URL.createObjectURL(blob);
a.download="simulyatornaya_prequal_custom.html";
a.click();
setTimeout(()=>URL.revokeObjectURL(a.href),1000);
status.textContent="HTML скачан";
};
document.querySelectorAll(".device").forEach(b=>b.onclick=()=>{
document.querySelectorAll(".device").forEach(x=>x.classList.remove("on"));
b.classList.add("on");
$("wrap").classList.toggle("mobile",b.dataset.device==="mobile");
});
render();