v11 — ИИ-помощник при регистрации

index.html

@@ -105,6 +105,16 @@ input[type=file]{display:none}
 .app-screen.active{display:block}
 .profile-screen.hidden,#loginScreen.hidden{display:none}
 
+
+.ai-helper{position:fixed;bottom:16px;right:16px;z-index:350;width:300px;max-width:90vw;background:var(--ink);border:1px solid #2a3342;border-radius:16px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.4);transition:transform .3s}
+.ai-helper.minimized{transform:translateY(calc(100% - 48px))}
+.ai-helper .ai-header{background:var(--cyan);color:var(--ink);padding:10px 14px;font-weight:700;font-size:14px;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
+.ai-helper .ai-header button{background:none;border:none;color:var(--ink);font-size:18px;cursor:pointer;padding:0 4px}
+.ai-helper .ai-body{padding:12px;max-height:240px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
+.ai-helper .ai-msg{background:#1a2332;color:#9aa3b2;padding:8px 12px;border-radius:12px;font-size:13px;line-height:1.4;max-width:90%;animation:fadeIn .4s}
+.ai-helper .ai-msg.user{background:var(--cyan);color:var(--ink);align-self:flex-end;text-align:right}
+@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
+
 @media(max-width:480px){
   .grid2{grid-template-columns:1fr}
   header h1{font-size:16px}
@@ -133,6 +143,16 @@ input[type=file]{display:none}
 </div>
 
 <!-- REGISTER + PROFILE SCREEN -->
+<!-- AI ASSISTANT -->
+<div class="ai-helper" id="aiHelper">
+  <div class="ai-header" onclick="toggleAI()">
+    &#x1F916; ИИ-помощник
+    <button onclick="event.stopPropagation();toggleAI()" id="aiToggleBtn">&#x25BC;</button>
+  </div>
+  <div class="ai-body" id="aiBody">
+    <div class="ai-msg">&#x1F44B; Привет! Я помогу тебе зарегистрироваться. Давай по шагам!</div>
+  </div>
+</div>
 <div class="profile-screen hidden" id="profileScreen">
   <h2>&#x1F3CA; <span>Галикон</span></h2>
   <p class="sub">Приложение для спортсменов. Создай свой профиль.</p>
@@ -502,6 +522,64 @@ function updateCityList() {
   cities.forEach(c => { const opt = document.createElement('option'); opt.value = c; datalist.appendChild(opt); });
 }
 
+function toggleAI() {
+  const ai = document.getElementById('aiHelper');
+  const btn = document.getElementById('aiToggleBtn');
+  if (ai.classList.contains('minimized')) {
+    ai.classList.remove('minimized');
+    btn.textContent = '\u25BC';
+  } else {
+    ai.classList.add('minimized');
+    btn.textContent = '\u25B2';
+  }
+}
+
+function aiSay(msg) {
+  const body = document.getElementById('aiBody');
+  const div = document.createElement('div');
+  div.className = 'ai-msg';
+  div.textContent = msg;
+  body.appendChild(div);
+  body.scrollTop = body.scrollHeight;
+}
+
+function aiHelp(field) {
+  const tips = {
+    regName: '&#x270F; Напиши свои Фамилию, Имя и Отчество. Например: Кайрат Гали Аскарович.',
+    regLogin: '&#x1F511; Придумай логин — короткое имя на латинице. Например: gali_swim. Его НЕ видно другим!',
+    regPass: '&#x1F512; Пароль — твой секрет. Минимум 3 символа. Не говори никому!',
+    regSport: '&#x1F3CA; Выбери свой вид спорта из списка. Ты пловец? Выбирай "Плавание"!',
+    regBirth: '&#x1F382; Твоя дата рождения. Возраст посчитается сам!',
+    regCountry: '&#x1F30D; Выбери страну — и появятся города этой страны.',
+    regCity: '&#x1F3D9; Напиши свой город. Если его нет в подсказках — просто впиши.',
+    regClub: '&#x1F3EB; В каком клубе или спортшколе ты занимаешься?',
+    regCoach: '&#x1F468;&#x200D;&#x1F3EB; Имя твоего тренера. Он будет рад, что ты здесь!',
+    regRank: '&#x1F3C5; Твой разряд или звание. Например: 1 юношеский, 3 взрослый.',
+    regGoal: '&#x1F3AF; Твоя главная цель! Например: 50 м в/с за 23 секунды.',
+    regPhoto: '&#x1F4F7; Загрузи своё фото — так твой профиль будет красивее!'
+  };
+  if (tips[field]) aiSay(tips[field]);
+}
+
+// Attach focus listeners to all registration fields
+setTimeout(() => {
+  const fields = ['regName','regLogin','regPass','regSport','regBirth','regCountry','regCity','regClub','regCoach','regRank','regGoal'];
+  fields.forEach(id => {
+    const el = document.getElementById(id);
+    if (el) el.addEventListener('focus', () => aiHelp(id));
+  });
+  // Welcome message sequence
+  const welcome = [
+    '&#x1F44B; Привет! Я помогу тебе зарегистрироваться.',
+    '&#x1F4CB; Сейчас мы заполним твой профиль шаг за шагом. Начнём!'
+  ];
+  let i = 0;
+  const timer = setInterval(() => {
+    if (i < welcome.length) aiSay(welcome[i++]);
+    else clearInterval(timer);
+  }, 1500);
+}, 500);
+
 function calcAge() {
   const b = document.getElementById('regBirth').value;
   if (!b) return;