Gibrat_Auganov/galikon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v23 — явные подсказки на каждом шаге регистрации вместо ИИ-чата

Browse Source
This commit is contained in:
Dauren777 2026-06-01 12:12:32 +00:00
parent 155c193aae
commit f6525cb094
1 changed files with 10 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
index.html
View File

@ -132,13 +132,6 @@ label.file-btn{display:inline-block;background:#1a2332;padding:12px 20px;border-
label.file-btn:active{background:#2a3342}
input[type=file]{display:none}
.ai-helper{position:fixed;bottom:16px;right:16px;z-index:350;width:280px;max-width:90vw;background:var(--ink);border:1px solid #2a3342;border-radius:16px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.5);transition:transform .3s}
.ai-helper.minimized{transform:translateY(calc(100% - 44px))}
.ai-helper .ai-hdr{background:var(--cyan);color:var(--ink);padding:8px 14px;font-weight:700;font-size:13px;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.ai-helper .ai-hdr button{background:none;border:none;color:var(--ink);font-size:16px;cursor:pointer}
.ai-helper .ai-body{padding:10px;max-height:200px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.ai-helper .ai-msg{background:#1a2332;color:var(--cyan);padding:6px 10px;border-radius:10px;font-size:12px;line-height:1.4;animation:fadeIn .4s}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
/* ROLE BUTTONS */
@ -216,6 +209,7 @@ input[type=file]{display:none}
<div class="reg-step" data-step="2">
<h2>&#x1F511; Придумай логин и пароль</h2>
<p class="hint">Логин — твоё имя в приложении. Пароль — секрет.</p>
<div style="background:#1a2332;border:1px solid var(--cyan);border-radius:10px;padding:10px 14px;margin-bottom:8px;font-size:13px;color:var(--cyan)">&#x1F916; <b>Подсказка:</b> Логин — латиница, без пробелов. Пароль — минимум 3 символа.</div>
<input type="text" id="rLogin" placeholder="Логин (латиница, без пробелов)">
<input type="password" id="rPass" placeholder="Пароль (минимум 3 символа)" oninput="showPassStrength()"><div id="passStrength" style="font-size:12px;margin-bottom:4px"></div>
<div class="reg-nav">
@ -227,6 +221,7 @@ input[type=file]{display:none}
<div class="reg-step" data-step="3">
<h2>&#x1F3CA; Твой вид спорта</h2>
<p class="hint">Выбери из списка олимпийских видов</p>
<div style="background:#1a2332;border:1px solid var(--cyan);border-radius:10px;padding:10px 14px;margin-bottom:8px;font-size:13px;color:var(--cyan)">&#x1F916; <b>Подсказка:</b> Выбери свой вид спорта. В списке — все 39 олимпийских видов.</div>
<select id="rSport"><option value="">Выбери вид спорта</option><option>Академическая гребля</option><option>Бадминтон</option><option>Баскетбол</option><option>Бокс</option><option>Борьба вольная</option><option>Борьба греко-римская</option><option>Велоспорт</option><option>Водное поло</option><option>Волейбол</option><option>Гандбол</option><option>Гимнастика спортивная</option><option>Гимнастика художественная</option><option>Гольф</option><option>Гребля на байдарках и каноэ</option><option>Дзюдо</option><option>Карате</option><option>Конный спорт</option><option>Лёгкая атлетика</option><option>Настольный теннис</option><option>Парусный спорт</option><option>Плавание</option><option>Прыжки в воду</option><option>Прыжки на батуте</option><option>Регби</option><option>Сёрфинг</option><option>Синхронное плавание</option><option>Скейтбординг</option><option>Современное пятиборье</option><option>Спортивное скалолазание</option><option>Стрельба из лука</option><option>Стрельба пулевая</option><option>Теннис</option><option>Триатлон</option><option>Тхэквондо</option><option>Тяжёлая атлетика</option><option>Фехтование</option><option>Футбол</option><option>Хоккей на траве</option></select>
<div class="reg-nav">
<button class="btn outline" onclick="prevStep()">&#x2190; Назад</button>
@ -238,6 +233,7 @@ input[type=file]{display:none}
<div class="reg-step" data-step="4">
<h2>&#x1F464; Кто ты?</h2>
<p class="hint">Выбери свою роль в спорте</p>
<div style="background:#1a2332;border:1px solid var(--cyan);border-radius:10px;padding:10px 14px;margin-bottom:8px;font-size:13px;color:var(--cyan)">&#x1F916; <b>Подсказка:</b> Кто ты? Спортсмен, тренер или родитель? Если родитель — укажи имя ребёнка.</div>
<div style="display:flex;flex-direction:column;gap:8px;margin-bottom:12px">
<button class="role-btn" data-role="athlete" onclick="selectRole('athlete')">&#x1F3CA; Спортсмен</button>
<button class="role-btn" data-role="coach" onclick="selectRole('coach')">&#x1F3CB;&#xFE0F; Тренер</button>
@ -254,6 +250,7 @@ input[type=file]{display:none}
<div class="reg-step" data-step="5">
<h2>&#x1F382; Дата рождения</h2>
<p class="hint">Возраст посчитается автоматически</p>
<div style="background:#1a2332;border:1px solid var(--cyan);border-radius:10px;padding:10px 14px;margin-bottom:8px;font-size:13px;color:var(--cyan)">&#x1F916; <b>Подсказка:</b> Дата рождения — возраст посчитается сам. Выбери аватарку или загрузи фото.</div>
<input type="date" id="rBirth" onchange="autoAge()">
<input type="text" id="rAge" placeholder="Возраст (авто)" readonly style="background:#0F1218;border-color:#1a2332">
<p style="text-align:center;color:var(--gray-500);font-size:13px;margin-top:8px">&#x1F4F7; Выбери аватарку:</p>
@ -278,6 +275,7 @@ input[type=file]{display:none}
<div class="reg-step" data-step="6">
<h2>&#x1F30D; Где ты?</h2>
<p class="hint">Страна и город</p>
<div style="background:#1a2332;border:1px solid var(--cyan);border-radius:10px;padding:10px 14px;margin-bottom:8px;font-size:13px;color:var(--cyan)">&#x1F916; <b>Подсказка:</b> Сначала выбери страну, потом город.</div>
<select id="rCountry" onchange="updateCities()"><option value="">Страна</option><option>Австралия</option><option>Австрия</option><option>Азербайджан</option><option>Армения</option><option>Беларусь</option><option>Бельгия</option><option>Болгария</option><option>Бразилия</option><option>Великобритания</option><option>Венгрия</option><option>Германия</option><option>Греция</option><option>Грузия</option><option>Дания</option><option>Египет</option><option>Израиль</option><option>Индия</option><option>Индонезия</option><option>Испания</option><option>Италия</option><option>Казахстан</option><option>Канада</option><option>Катар</option><option>Китай</option><option>Корея Южная</option><option>Куба</option><option>Кыргызстан</option><option>Латвия</option><option>Литва</option><option>Малайзия</option><option>Мексика</option><option>Молдова</option><option>Монголия</option><option>Нидерланды</option><option>Новая Зеландия</option><option>Норвегия</option><option>ОАЭ</option><option>Польша</option><option>Португалия</option><option>Россия</option><option>Румыния</option><option>Саудовская Аравия</option><option>Сербия</option><option>Сингапур</option><option>США</option><option>Таджикистан</option><option>Таиланд</option><option>Туркменистан</option><option>Турция</option><option>Узбекистан</option><option>Украина</option><option>Финляндия</option><option>Франция</option><option>Хорватия</option><option>Чехия</option><option>Швейцария</option><option>Швеция</option><option>Эстония</option><option>ЮАР</option><option>Япония</option></select>
<input type="text" id="rCity" placeholder="Город" list="cityList" autocomplete="off">
<datalist id="cityList"></datalist>
@ -290,6 +288,7 @@ input[type=file]{display:none}
<div class="reg-step" data-step="7">
<h2>&#x1F3EB; Клуб и тренер</h2>
<p class="hint">Где и с кем ты тренируешься</p>
<div style="background:#1a2332;border:1px solid var(--cyan);border-radius:10px;padding:10px 14px;margin-bottom:8px;font-size:13px;color:var(--cyan)">&#x1F916; <b>Подсказка:</b> Укажи клуб, тренера и разряд. Цель — твоя главная мечта.</div>
<input type="text" id="rClub" placeholder="Клуб / спортивная школа">
<input type="text" id="rCoach" placeholder="Тренер (ФИО)">
<input type="text" id="rRank" placeholder="Разряд / звание (например: 1 юн, 3 взр)">
@ -303,6 +302,7 @@ input[type=file]{display:none}
<div class="reg-step" data-step="8">
<h2>&#x1F4F1; Контакты</h2>
<p class="hint">Телефон и email — чтобы тренер и родители могли связаться</p>
<div style="background:#1a2332;border:1px solid var(--cyan);border-radius:10px;padding:10px 14px;margin-bottom:8px;font-size:13px;color:var(--cyan)">&#x1F916; <b>Подсказка:</b> Телефон ОБЯЗАТЕЛЕН (формат +77011234567). Email нужен для связи.</div>
<input type="tel" id="rPhone" placeholder="+7 (___) ___-__-__" required>
<input type="email" id="rEmail" placeholder="Email" required>
<div class="reg-nav">
@ -311,16 +311,7 @@ input[type=file]{display:none}
</div>
</div>
<!-- AI Assistant Registration -->
<div class="ai-helper show" id="aiRegHelper">
<div class="ai-hdr" onclick="toggleAI('aiRegHelper','aiRegToggle')">
&#x1F916; Твой помощник
<button onclick="event.stopPropagation();toggleAI('aiRegHelper','aiRegToggle')" id="aiRegToggle">&#x25BC;</button>
</div>
<div class="ai-body" id="aiRegBody">
<div class="ai-msg">&#x1F44B; Привет! Я помогу заполнить профиль.</div>
</div>
</div>
</div>
<!-- MAIN APP SCREEN -->
@ -329,17 +320,6 @@ input[type=file]{display:none}
<div class="bottom-nav" id="bottomNav"></div>
</div>
<!-- AI Assistant App -->
<div class="ai-helper" id="aiAppHelper">
<div class="ai-hdr" onclick="toggleAI('aiAppHelper','aiAppToggle')">
&#x1F916; Помощник
<button onclick="event.stopPropagation();toggleAI('aiAppHelper','aiAppToggle')" id="aiAppToggle">&#x25BC;</button>
</div>
<div class="ai-body" id="aiAppBody">
<div class="ai-msg">&#x1F44B; Я здесь! Нажми на раздел — подскажу.</div>
</div>
</div>
<div class="toast" id="toast"></div>
<div class="lightbox" id="lightbox" style="display:none" onclick="this.style.display='none'"></div>
@ -501,52 +481,6 @@ const LS=(k)=>{try{return JSON.parse(localStorage.getItem('g_'+k))}catch{return
const SS=(k,v)=>{try{localStorage.setItem('g_'+k,JSON.stringify(v))}catch{toast('Память полна!')}};
let currentUser=null, currentPage='profile', currentChat=null, chatFilter='all';
function toggleAI(helperId, btnId) {
const ai = document.getElementById(helperId);
const btn = document.getElementById(btnId);
if (!ai) return;
ai.classList.toggle('minimized');
btn.textContent = ai.classList.contains('minimized') ? '\u25B2' : '\u25BC';
}
function aiSay(msg, target) {
const body = document.getElementById(target || 'aiAppBody') || document.getElementById('aiRegBody');
if (!body) return;
const div = document.createElement('div');
div.className = 'ai-msg';
div.innerHTML = msg;
body.appendChild(div);
body.scrollTop = body.scrollHeight;
}
function showAIForTab(tab) {
const tips = {
profile: '&#x1F464; Это твой профиль. Здесь значки, достижения, данные. Добавь достижение или скачай отчёт для тренера!',
diary: '&#x1F4D6; Дневник тренировок. Записывай каждую! Через месяц увидишь прогресс.',
calendar: '&#x1F4C5; Календарь соревнований. Добавляй турниры и сборы — не пропустишь ни одного старта!',
chat: '&#x1F4AC; Чаты с другими спортсменами, тренерами и родителями. Жми &#x1F3AE; чтобы поиграть!',
tools: '&#x2699; Инструменты: нормативы, сравнение с чемпионами, анализ видео, витамины, рейтинг.',
students: '&#x1F465; Твои ученики. Здесь их дневники и прогресс.',
child: '&#x1F476; Профиль твоего ребёнка. Смотри тренировки, значки, цели.'
};
if (tips[tab]) aiSay(tips[tab], 'aiAppBody');
}
// Registration AI hints
function aiRegHint(step) {
const hints = {
1: '&#x270F; Напиши фамилию, имя и отчество полностью. Например: Кайрат Гали Аскарович.',
2: '&#x1F511; Придумай логин (латиница) и пароль. Пароль — минимум 3 символа. Смотри на индикатор силы!',
3: '&#x1F3CA; Выбери свой вид спорта. Все варианты — олимпийские!',
4: '&#x1F464; Кто ты в спорте? Спортсмен, тренер или родитель? Если родитель — введи имя ребёнка.',
5: '&#x1F382; Дата рождения. Возраст посчитается сам! Выбери аватарку или загрузи фото.',
6: '&#x1F30D; Где ты живёшь? Выбери страну — появятся города.',
7: '&#x1F3EB; Твой клуб, тренер, разряд и главная цель. Это важно!',
8: '&#x1F4F1; Телефон и email ОБЯЗАТЕЛЬНЫ! Телефон в формате +7... Без них нельзя завершить регистрацию.'
};
if (hints[step]) aiSay(hints[step], 'aiRegBody');
}
// Show AI assistant on login
@ -593,12 +527,6 @@ function backToLogin(){
document.getElementById('regScreen').classList.remove('active');
document.getElementById('loginScreen').classList.add('active');
// Show AI helper on login
setTimeout(() => {
const ai = document.getElementById('aiAppHelper');
if(ai) ai.classList.add('show');
const aiReg = document.getElementById('aiRegHelper');
if(aiReg) aiReg.classList.add('show');
}, 500);
}
function showRegStep(n){
regStep=n;
@ -607,7 +535,7 @@ function showRegStep(n){
if(step){step.classList.add('active');step.querySelector('input,select')?.focus()}
document.getElementById('stepNum').textContent=n;
updateStepDots();
setTimeout(() => aiRegHint(n), 200);
}
function buildStepDots(){
let h=''; for(let i=1;i<=8;i++)h+=`<div class="step-dot${i<=regStep?' done':''}${i===regStep?' current':''}"></div>`;
@ -743,7 +671,7 @@ function showPage(page){
currentPage=page;
document.querySelectorAll('.nav-item').forEach(n=>n.classList.toggle('active',n.dataset.page===page));
renderPage();
setTimeout(() => showAIForTab(page), 300);
}
function renderPage(){
if(isAdmin()){
@ -1500,12 +1428,6 @@ function doLogout(){
document.getElementById('appScreen').classList.remove('active');
document.getElementById('loginScreen').classList.add('active');
// Show AI helper on login
setTimeout(() => {
const ai = document.getElementById('aiAppHelper');
if(ai) ai.classList.add('show');
const aiReg = document.getElementById('aiRegHelper');
if(aiReg) aiReg.classList.add('show');
}, 500);
document.getElementById('lUser').value='';document.getElementById('lPass').value='';
}
@ -1529,12 +1451,6 @@ function renderAll(){
if('serviceWorker'in navigator)navigator.serviceWorker.register('sw.js').catch(()=>{});
document.getElementById('loginScreen').classList.add('active');
// Show AI helper on login
setTimeout(() => {
const ai = document.getElementById('aiAppHelper');
if(ai) ai.classList.add('show');
const aiReg = document.getElementById('aiRegHelper');
if(aiReg) aiReg.classList.add('show');
}, 500);
</script>
</body>
</html>