mirror of
https://github.com/wasrusgen/zov-survey.git
synced 2026-06-03 14:24:49 +00:00
Expand tools to 15 items (plunge_saw, guide_rail, templates, stepladder, perf_dust), fix submit hang, MAX=17
This commit is contained in:
wasrusgen
parent
54f111cfab
commit
2f62fe64a7
@ -7,224 +7,132 @@
|
|||||||
<script src="https://telegram.org/js/telegram-web-app.js"></script>
|
<script src="https://telegram.org/js/telegram-web-app.js"></script>
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
--tg-bg: var(--tg-theme-bg-color, #ffffff);
|
--bg: var(--tg-theme-bg-color, #ffffff);
|
||||||
--tg-text: var(--tg-theme-text-color, #1e293b);
|
--txt: var(--tg-theme-text-color, #1e293b);
|
||||||
--tg-hint: var(--tg-theme-hint-color, #64748b);
|
--hint:var(--tg-theme-hint-color, #64748b);
|
||||||
--tg-link: var(--tg-theme-link-color, #4f46e5);
|
--sec: var(--tg-theme-secondary-bg-color, #f1f5f9);
|
||||||
--tg-btn: var(--tg-theme-button-color, #4f46e5);
|
--btn: var(--tg-theme-button-color, #4f46e5);
|
||||||
--tg-btn-text: var(--tg-theme-button-text-color, #ffffff);
|
--btx: var(--tg-theme-button-text-color, #ffffff);
|
||||||
--tg-secondary: var(--tg-theme-secondary-bg-color, #f1f5f9);
|
--sep: rgba(0,0,0,.07);
|
||||||
}
|
|
||||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
||||||
body {
|
|
||||||
font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
|
|
||||||
background: var(--tg-bg);
|
|
||||||
color: var(--tg-text);
|
|
||||||
padding: 16px;
|
|
||||||
padding-bottom: 80px;
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
}
|
||||||
|
*{box-sizing:border-box;margin:0;padding:0}
|
||||||
|
body{font-family:-apple-system,'Segoe UI',system-ui,sans-serif;
|
||||||
|
background:var(--bg);color:var(--txt);
|
||||||
|
padding:16px;padding-bottom:90px;font-size:15px}
|
||||||
|
|
||||||
.section-title {
|
.sec-title{font-size:11px;font-weight:700;text-transform:uppercase;
|
||||||
font-size: 11px;
|
letter-spacing:.6px;color:var(--hint);margin:20px 0 8px}
|
||||||
font-weight: 700;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: .6px;
|
|
||||||
color: var(--tg-hint);
|
|
||||||
margin: 20px 0 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field-group {
|
/* Поля */
|
||||||
background: var(--tg-secondary);
|
.fgroup{background:var(--sec);border-radius:12px;overflow:hidden}
|
||||||
border-radius: 12px;
|
.frow{display:flex;flex-direction:column;padding:11px 14px;
|
||||||
overflow: hidden;
|
border-bottom:1px solid var(--sep)}
|
||||||
}
|
.frow:last-child{border-bottom:none}
|
||||||
.field-row {
|
.flabel{font-size:11px;color:var(--hint);margin-bottom:3px;font-weight:600}
|
||||||
display: flex;
|
.finput{background:transparent;border:none;outline:none;
|
||||||
flex-direction: column;
|
font-size:15px;color:var(--txt);width:100%;padding:0}
|
||||||
padding: 12px 14px;
|
.finput::placeholder{color:var(--hint)}
|
||||||
border-bottom: 1px solid rgba(0,0,0,.06);
|
|
||||||
}
|
|
||||||
.field-row:last-child { border-bottom: none; }
|
|
||||||
.field-label {
|
|
||||||
font-size: 11px;
|
|
||||||
color: var(--tg-hint);
|
|
||||||
margin-bottom: 4px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.field-input {
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
font-size: 15px;
|
|
||||||
color: var(--tg-text);
|
|
||||||
width: 100%;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.field-input::placeholder { color: var(--tg-hint); }
|
|
||||||
|
|
||||||
/* Tool list */
|
/* Инструмент */
|
||||||
.tool-list {
|
.tlist{background:var(--sec);border-radius:12px;overflow:hidden}
|
||||||
background: var(--tg-secondary);
|
.titem{display:flex;align-items:center;gap:12px;
|
||||||
border-radius: 12px;
|
padding:13px 14px;border-bottom:1px solid var(--sep);
|
||||||
overflow: hidden;
|
cursor:pointer;-webkit-tap-highlight-color:transparent;
|
||||||
}
|
transition:background .1s}
|
||||||
.tool-item {
|
.titem:last-child{border-bottom:none}
|
||||||
display: flex;
|
.titem:active{background:rgba(0,0,0,.04)}
|
||||||
align-items: center;
|
.tcheck{width:22px;height:22px;border-radius:50%;border:2px solid #cbd5e1;
|
||||||
gap: 12px;
|
flex-shrink:0;display:flex;align-items:center;justify-content:center;
|
||||||
padding: 13px 14px;
|
transition:all .15s}
|
||||||
border-bottom: 1px solid rgba(0,0,0,.06);
|
.titem.on .tcheck{background:var(--btn);border-color:var(--btn)}
|
||||||
cursor: pointer;
|
.tcheck svg{display:none}
|
||||||
transition: background .1s;
|
.titem.on .tcheck svg{display:block}
|
||||||
-webkit-tap-highlight-color: transparent;
|
.tico{font-size:20px;flex-shrink:0;width:26px;text-align:center}
|
||||||
}
|
.tname{flex:1;font-size:14px;line-height:1.35}
|
||||||
.tool-item:last-child { border-bottom: none; }
|
.tpts{font-size:11px;color:var(--hint);background:rgba(0,0,0,.06);
|
||||||
.tool-item:active { background: rgba(0,0,0,.04); }
|
padding:2px 7px;border-radius:10px;font-weight:700;white-space:nowrap}
|
||||||
|
.tpts.pro{background:#ede9fe;color:#6d28d9}
|
||||||
|
|
||||||
.tool-check {
|
/* Результат */
|
||||||
width: 22px;
|
.scard{background:var(--sec);border-radius:12px;padding:16px;
|
||||||
height: 22px;
|
display:flex;align-items:center;gap:14px}
|
||||||
border-radius: 50%;
|
.scirc{width:64px;height:64px;border-radius:50%;border:3px solid #e2e8f0;
|
||||||
border: 2px solid #cbd5e1;
|
display:flex;flex-direction:column;align-items:center;
|
||||||
flex-shrink: 0;
|
justify-content:center;flex-shrink:0;transition:border-color .3s}
|
||||||
display: flex;
|
.snum{font-size:18px;font-weight:800;line-height:1;transition:color .3s}
|
||||||
align-items: center;
|
.smax{font-size:10px;color:var(--hint)}
|
||||||
justify-content: center;
|
.sinfo{flex:1}
|
||||||
transition: all .15s;
|
.scat{font-size:16px;font-weight:700;margin-bottom:5px}
|
||||||
}
|
.sbar-wrap{height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden}
|
||||||
.tool-item.checked .tool-check {
|
.sbar{height:100%;border-radius:3px;transition:width .3s,background .3s;width:0%}
|
||||||
background: var(--tg-btn);
|
.spct{font-size:11px;color:var(--hint);margin-top:4px}
|
||||||
border-color: var(--tg-btn);
|
|
||||||
}
|
|
||||||
.tool-check svg { display: none; }
|
|
||||||
.tool-item.checked .tool-check svg { display: block; }
|
|
||||||
|
|
||||||
.tool-icon { font-size: 20px; flex-shrink: 0; }
|
/* Ошибка */
|
||||||
.tool-name { flex: 1; font-size: 14px; line-height: 1.3; }
|
.err{display:none;color:#dc2626;font-size:12px;padding:8px 14px;
|
||||||
.tool-pts {
|
background:#fef2f2;border-radius:8px;margin-top:8px}
|
||||||
font-size: 12px;
|
.err.show{display:block}
|
||||||
color: var(--tg-hint);
|
|
||||||
background: rgba(0,0,0,.06);
|
|
||||||
padding: 2px 7px;
|
|
||||||
border-radius: 10px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Score card */
|
/* Success overlay */
|
||||||
.score-card {
|
.success{display:none;position:fixed;inset:0;background:var(--bg);
|
||||||
background: var(--tg-secondary);
|
flex-direction:column;align-items:center;justify-content:center;
|
||||||
border-radius: 12px;
|
gap:12px;text-align:center;padding:32px;z-index:100}
|
||||||
padding: 16px;
|
.success.show{display:flex}
|
||||||
display: flex;
|
.success-icon{font-size:64px}
|
||||||
align-items: center;
|
.success-title{font-size:20px;font-weight:700}
|
||||||
gap: 16px;
|
.success-sub{font-size:14px;color:var(--hint);max-width:260px}
|
||||||
}
|
|
||||||
.score-circle {
|
|
||||||
width: 64px;
|
|
||||||
height: 64px;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 3px solid #e2e8f0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-shrink: 0;
|
|
||||||
transition: border-color .3s;
|
|
||||||
}
|
|
||||||
.score-num { font-size: 18px; font-weight: 800; line-height: 1; }
|
|
||||||
.score-max { font-size: 10px; color: var(--tg-hint); }
|
|
||||||
.score-info { flex: 1; }
|
|
||||||
.score-cat { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
|
|
||||||
.score-bar-wrap {
|
|
||||||
height: 6px;
|
|
||||||
background: #e2e8f0;
|
|
||||||
border-radius: 3px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.score-bar {
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 3px;
|
|
||||||
transition: width .3s, background .3s;
|
|
||||||
width: 0%;
|
|
||||||
}
|
|
||||||
.score-pct { font-size: 11px; color: var(--tg-hint); margin-top: 3px; }
|
|
||||||
|
|
||||||
/* Error */
|
/* Кнопка */
|
||||||
.error-msg {
|
.bar{position:fixed;bottom:0;left:0;right:0;padding:12px 16px;
|
||||||
display: none;
|
background:var(--bg);border-top:1px solid var(--sep)}
|
||||||
color: #dc2626;
|
.sbtn{width:100%;padding:14px;background:var(--btn);color:var(--btx);
|
||||||
font-size: 12px;
|
border:none;border-radius:12px;font-size:15px;font-weight:600;
|
||||||
padding: 8px 14px;
|
cursor:pointer;transition:opacity .15s}
|
||||||
background: #fef2f2;
|
.sbtn:active{opacity:.8}
|
||||||
border-radius: 8px;
|
.sbtn:disabled{opacity:.45;cursor:not-allowed}
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
.error-msg.show { display: block; }
|
|
||||||
|
|
||||||
/* Bottom button */
|
|
||||||
.submit-bar {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0; left: 0; right: 0;
|
|
||||||
padding: 12px 16px;
|
|
||||||
background: var(--tg-bg);
|
|
||||||
border-top: 1px solid rgba(0,0,0,.08);
|
|
||||||
}
|
|
||||||
.submit-btn {
|
|
||||||
width: 100%;
|
|
||||||
padding: 14px;
|
|
||||||
background: var(--tg-btn);
|
|
||||||
color: var(--tg-btn-text);
|
|
||||||
border: none;
|
|
||||||
border-radius: 12px;
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: opacity .15s;
|
|
||||||
}
|
|
||||||
.submit-btn:active { opacity: .8; }
|
|
||||||
.submit-btn:disabled { opacity: .45; cursor: not-allowed; }
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="section-title">Личные данные</div>
|
<div class="sec-title">Личные данные</div>
|
||||||
<div class="field-group">
|
<div class="fgroup">
|
||||||
<div class="field-row">
|
<div class="frow">
|
||||||
<div class="field-label">ФИО</div>
|
<div class="flabel">ФИО</div>
|
||||||
<input class="field-input" id="fio" type="text" placeholder="Иванов Иван Иванович"
|
<input class="finput" id="fio" type="text" placeholder="Иванов Иван Иванович"
|
||||||
autocomplete="name" autocorrect="off">
|
autocomplete="name" autocorrect="off" spellcheck="false">
|
||||||
</div>
|
</div>
|
||||||
<div class="field-row">
|
<div class="frow">
|
||||||
<div class="field-label">Дата рождения</div>
|
<div class="flabel">Дата рождения</div>
|
||||||
<input class="field-input" id="dob" type="text" placeholder="15.03.1990"
|
<input class="finput" id="dob" type="text" placeholder="15.03.1990"
|
||||||
inputmode="numeric" maxlength="10">
|
inputmode="numeric" maxlength="10">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="error-msg" id="err">Заполните ФИО и дату рождения</div>
|
<div class="err" id="err">Заполните ФИО и дату рождения</div>
|
||||||
|
|
||||||
<div class="section-title">Инструмент</div>
|
<div class="sec-title">Инструмент</div>
|
||||||
<div class="tool-list" id="toolList"></div>
|
<div class="tlist" id="tlist"></div>
|
||||||
|
|
||||||
<div class="section-title">Результат</div>
|
<div class="sec-title">Результат</div>
|
||||||
<div class="score-card">
|
<div class="scard">
|
||||||
<div class="score-circle" id="scoreCircle">
|
<div class="scirc" id="scirc">
|
||||||
<span class="score-num" id="scoreNum">0</span>
|
<span class="snum" id="snum">0</span>
|
||||||
<span class="score-max">/ 11</span>
|
<span class="smax" id="smax">/ 17</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="score-info">
|
<div class="sinfo">
|
||||||
<div class="score-cat" id="scoreCat">🥉 Базовый</div>
|
<div class="scat" id="scat">🥉 Базовый</div>
|
||||||
<div class="score-bar-wrap">
|
<div class="sbar-wrap"><div class="sbar" id="sbar"></div></div>
|
||||||
<div class="score-bar" id="scoreBar"></div>
|
<div class="spct" id="spct">0% — отметьте инструмент</div>
|
||||||
</div>
|
|
||||||
<div class="score-pct" id="scorePct">0% — заполните анкету</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="submit-bar">
|
<!-- Экран успеха -->
|
||||||
<button class="submit-btn" id="submitBtn" onclick="submit()">
|
<div class="success" id="success">
|
||||||
Отправить анкету
|
<div class="success-icon">✅</div>
|
||||||
</button>
|
<div class="success-title">Анкета отправлена!</div>
|
||||||
|
<div class="success-sub">Ожидайте подтверждения категории от руководства</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bar">
|
||||||
|
<button class="sbtn" id="sbtn" onclick="doSubmit()">Отправить анкету</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -232,113 +140,118 @@ const tg = window.Telegram.WebApp;
|
|||||||
tg.ready();
|
tg.ready();
|
||||||
tg.expand();
|
tg.expand();
|
||||||
|
|
||||||
// ─── Инструменты ─────────────────────────────────────────
|
|
||||||
const TOOLS = [
|
const TOOLS = [
|
||||||
{ key: "drill", icon: "🔩", name: "Шуруповёрт / дрель", pts: 1 },
|
{key:"drill", ico:"🔩", name:"Шуруповёрт / дрель", pts:1},
|
||||||
{ key: "perforator", icon: "⚒", name: "Перфоратор", pts: 1 },
|
{key:"perforator", ico:"⚒️", name:"Перфоратор", pts:1},
|
||||||
{ key: "jigsaw", icon: "🪚", name: "Электролобзик", pts: 1 },
|
{key:"perf_dust", ico:"💨", name:"Насадка пылеотсоса для перфоратора", pts:1},
|
||||||
{ key: "grinder", icon: "⚙️", name: "Угловая шлифмашина (болгарка)", pts: 1 },
|
{key:"jigsaw", ico:"🪚", name:"Электролобзик", pts:1},
|
||||||
{ key: "router", icon: "🔧", name: "Фрезер", pts: 1 },
|
{key:"plunge_saw", ico:"🔪", name:"Погружная (дисковая) пила", pts:2},
|
||||||
{ key: "laser", icon: "📐", name: "Лазерный уровень", pts: 1 },
|
{key:"guide_rail", ico:"📏", name:"Шина направляющая", pts:1},
|
||||||
{ key: "vacuum", icon: "🧹", name: "Строительный пылесос", pts: 1 },
|
{key:"grinder", ico:"⚙️", name:"Угловая шлифмашина (болгарка)", pts:1},
|
||||||
{ key: "clamps", icon: "🗜", name: "Струбцины / зажимы (набор)", pts: 1 },
|
{key:"router", ico:"🔧", name:"Фрезер", pts:1},
|
||||||
{ key: "hand_tools", icon: "🔨", name: "Ручной инструмент (молоток, стамески, ключи)", pts: 1 },
|
{key:"laser", ico:"📐", name:"Лазерный уровень", pts:1},
|
||||||
{ key: "car", icon: "🚗", name: "Личный автомобиль", pts: 2 },
|
{key:"vacuum", ico:"🧹", name:"Строительный пылесос", pts:1},
|
||||||
|
{key:"clamps", ico:"🗜️", name:"Струбцины / зажимы (набор ≥4 шт.)", pts:1},
|
||||||
|
{key:"templates", ico:"📋", name:"Мебельные шаблоны / кондукторы", pts:1},
|
||||||
|
{key:"stepladder", ico:"🪜", name:"Стремянка", pts:1},
|
||||||
|
{key:"hand_tools", ico:"🔨", name:"Ручной инструмент (молоток, стамески, ключи)", pts:1},
|
||||||
|
{key:"car", ico:"🚗", name:"Личный автомобиль", pts:2},
|
||||||
];
|
];
|
||||||
const MAX_SCORE = TOOLS.reduce((s, t) => s + t.pts, 0); // 11
|
const MAX = TOOLS.reduce((s,t) => s+t.pts, 0); // 17
|
||||||
|
document.getElementById('smax').textContent = '/ ' + MAX;
|
||||||
|
|
||||||
const checked = {};
|
const state = {};
|
||||||
TOOLS.forEach(t => checked[t.key] = false);
|
TOOLS.forEach(t => state[t.key] = false);
|
||||||
|
|
||||||
// ─── Рендер чеклиста ────────────────────────────────────
|
// Рендер списка
|
||||||
const list = document.getElementById('toolList');
|
const tlist = document.getElementById('tlist');
|
||||||
TOOLS.forEach(tool => {
|
TOOLS.forEach(t => {
|
||||||
const el = document.createElement('div');
|
const el = document.createElement('div');
|
||||||
el.className = 'tool-item';
|
el.className = 'titem';
|
||||||
el.id = 'item_' + tool.key;
|
el.id = 'ti_' + t.key;
|
||||||
|
const ptsCls = t.pts === 2 ? 'tpts pro' : 'tpts';
|
||||||
|
const ptsLbl = t.pts === 2 ? '+2 б' : '+1 б';
|
||||||
el.innerHTML = `
|
el.innerHTML = `
|
||||||
<div class="tool-check">
|
<div class="tcheck">
|
||||||
<svg width="12" height="10" viewBox="0 0 12 10" fill="none">
|
<svg width="12" height="10" viewBox="0 0 12 10">
|
||||||
<path d="M1 5L4.5 8.5L11 1" stroke="white" stroke-width="2" stroke-linecap="round"/>
|
<path d="M1 5L4.5 8.5L11 1" stroke="white" stroke-width="2.2"
|
||||||
|
stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<span class="tool-icon">${tool.icon}</span>
|
<span class="tico">${t.ico}</span>
|
||||||
<span class="tool-name">${tool.name}</span>
|
<span class="tname">${t.name}</span>
|
||||||
<span class="tool-pts">${tool.pts === 2 ? '+2 б' : '+1 б'}</span>
|
<span class="${ptsCls}">${ptsLbl}</span>`;
|
||||||
`;
|
el.addEventListener('click', () => {
|
||||||
el.addEventListener('click', () => toggle(tool.key, el));
|
state[t.key] = !state[t.key];
|
||||||
list.appendChild(el);
|
el.classList.toggle('on', state[t.key]);
|
||||||
|
updateScore();
|
||||||
|
});
|
||||||
|
tlist.appendChild(el);
|
||||||
});
|
});
|
||||||
|
|
||||||
function toggle(key, el) {
|
|
||||||
checked[key] = !checked[key];
|
|
||||||
el.classList.toggle('checked', checked[key]);
|
|
||||||
updateScore();
|
|
||||||
}
|
|
||||||
|
|
||||||
// ─── Живой подсчёт ──────────────────────────────────────
|
|
||||||
function updateScore() {
|
function updateScore() {
|
||||||
const score = TOOLS.reduce((s, t) => s + (checked[t.key] ? t.pts : 0), 0);
|
const score = TOOLS.reduce((s,t) => s + (state[t.key] ? t.pts : 0), 0);
|
||||||
const pct = Math.round(score / MAX_SCORE * 100);
|
const pct = Math.round(score / MAX * 100);
|
||||||
|
document.getElementById('snum').textContent = score;
|
||||||
document.getElementById('scoreNum').textContent = score;
|
|
||||||
|
|
||||||
let cat, color;
|
let cat, color;
|
||||||
if (pct >= 80) { cat = '🥇 Мастер'; color = '#16a34a'; }
|
if (pct >= 80) { cat = '🥇 Мастер'; color = '#16a34a'; }
|
||||||
else if (pct >= 50) { cat = '🥈 Специалист'; color = '#d97706'; }
|
else if (pct >= 50) { cat = '🥈 Специалист'; color = '#d97706'; }
|
||||||
else { cat = '🥉 Базовый'; color = '#64748b'; }
|
else { cat = '🥉 Базовый'; color = '#64748b'; }
|
||||||
|
|
||||||
document.getElementById('scoreCat').textContent = cat;
|
document.getElementById('scat').textContent = cat;
|
||||||
document.getElementById('scoreBar').style.width = pct + '%';
|
document.getElementById('sbar').style.cssText = `width:${pct}%;background:${color}`;
|
||||||
document.getElementById('scoreBar').style.background = color;
|
document.getElementById('spct').textContent = pct + '%';
|
||||||
document.getElementById('scorePct').textContent = pct + '%';
|
document.getElementById('scirc').style.borderColor = color;
|
||||||
document.getElementById('scoreCircle').style.borderColor = color;
|
document.getElementById('snum').style.color = color;
|
||||||
document.getElementById('scoreNum').style.color = color;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// ─── Автоформат ДР ──────────────────────────────────────
|
// Автоформат ДР: 15.03.1990
|
||||||
document.getElementById('dob').addEventListener('input', function(e) {
|
document.getElementById('dob').addEventListener('input', function(e) {
|
||||||
let v = e.target.value.replace(/\D/g, '');
|
let v = e.target.value.replace(/\D/g,'');
|
||||||
if (v.length > 2) v = v.slice(0,2) + '.' + v.slice(2);
|
if (v.length > 2) v = v.slice(0,2) + '.' + v.slice(2);
|
||||||
if (v.length > 5) v = v.slice(0,5) + '.' + v.slice(5);
|
if (v.length > 5) v = v.slice(0,5) + '.' + v.slice(5);
|
||||||
e.target.value = v.slice(0, 10);
|
e.target.value = v.slice(0,10);
|
||||||
});
|
});
|
||||||
|
|
||||||
// ─── Отправка ───────────────────────────────────────────
|
function doSubmit() {
|
||||||
function submit() {
|
|
||||||
const fio = document.getElementById('fio').value.trim();
|
const fio = document.getElementById('fio').value.trim();
|
||||||
const dob = document.getElementById('dob').value.trim();
|
const dob = document.getElementById('dob').value.trim();
|
||||||
const errEl = document.getElementById('err');
|
const err = document.getElementById('err');
|
||||||
|
|
||||||
if (!fio || !dob) {
|
if (!fio || !dob) {
|
||||||
errEl.classList.add('show');
|
err.className = 'err show';
|
||||||
errEl.textContent = !fio
|
err.textContent = !fio ? 'Введите ФИО' : 'Введите дату рождения (например: 15.03.1990)';
|
||||||
? 'Введите ФИО'
|
|
||||||
: 'Введите дату рождения (например: 15.03.1990)';
|
|
||||||
document.getElementById(fio ? 'dob' : 'fio').focus();
|
document.getElementById(fio ? 'dob' : 'fio').focus();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
errEl.classList.remove('show');
|
err.className = 'err';
|
||||||
|
|
||||||
const score = TOOLS.reduce((s, t) => s + (checked[t.key] ? t.pts : 0), 0);
|
const score = TOOLS.reduce((s,t) => s + (state[t.key] ? t.pts : 0), 0);
|
||||||
const pct = Math.round(score / MAX_SCORE * 100);
|
const pct = Math.round(score / MAX * 100);
|
||||||
let category;
|
let category;
|
||||||
if (pct >= 80) category = '🥇 Мастер';
|
if (pct >= 80) category = '🥇 Мастер';
|
||||||
else if (pct >= 50) category = '🥈 Специалист';
|
else if (pct >= 50) category = '🥈 Специалист';
|
||||||
else category = '🥉 Базовый';
|
else category = '🥉 Базовый';
|
||||||
|
|
||||||
const payload = JSON.stringify({
|
const payload = JSON.stringify({fio, dob, tools: state, score, max_score: MAX, pct, category});
|
||||||
fio, dob, tools: checked, score, max_score: MAX_SCORE, pct, category
|
|
||||||
});
|
|
||||||
|
|
||||||
const btn = document.getElementById('submitBtn');
|
// Показываем success-экран сразу (до отправки — UX)
|
||||||
btn.disabled = true;
|
document.getElementById('success').className = 'success show';
|
||||||
btn.textContent = 'Отправляем...';
|
document.getElementById('sbtn').disabled = true;
|
||||||
|
|
||||||
tg.sendData(payload);
|
// Отправляем данные в бот и закрываем
|
||||||
|
try {
|
||||||
|
tg.sendData(payload);
|
||||||
|
} catch(e) {
|
||||||
|
console.error('sendData error:', e);
|
||||||
|
}
|
||||||
|
// Fallback: если Telegram не закрыл сам — закрыть через 1.5 сек
|
||||||
|
setTimeout(() => {
|
||||||
|
try { tg.close(); } catch(e) {}
|
||||||
|
}, 1500);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Начальный рендер
|
|
||||||
updateScore();
|
updateScore();
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user