feat(auth): Separate Login, Register, and Profile views with robust validations and SQL-safe backend

game/index.html

@@ -337,7 +337,7 @@
       <!-- Authentication & Profile Modal -->
       <div id="auth-modal" class="overlay hidden">
         <div class="banner-card auth-card">
-          <!-- 1. Logged-in User Profile Dashboard View -->
+          <!-- 1. Logged-in User Profile View (ТОЛЬКО кнопка Выйти) -->
           <div id="auth-logged-in-view" class="auth-view hidden">
             <h1 style="color: #81c784; font-size: 24px; margin-bottom: 6px;">👤 ЛИЧНЫЙ ПРОФИЛЬ</h1>
             <div class="profile-header-card">
@@ -374,26 +374,50 @@
             </div>
           </div>
 
-          <!-- 2. Guest Login / Registration View -->
-          <div id="auth-guest-view" class="auth-view">
-            <h1 style="color: #ffeb3b; font-size: 24px; margin-bottom: 4px;">ВХОД В ПРОФИЛЬ</h1>
+          <!-- 2. Login View (Логин, Пароль, Войти, Регистрация, Остаться гостем) -->
+          <div id="auth-login-view" class="auth-view">
+            <h1 style="color: #ffeb3b; font-size: 24px; margin-bottom: 4px;">🔑 ВХОД В АККАУНТ</h1>
             <p style="font-size: 13px; margin-bottom: 12px; color: #d7ccc8;">
-              Войдите или зарегистрируйтесь, чтобы сохранять монеты, крафт и уровень кампании на сервере.
+              Войдите под своим логином для синхронизации сохранений с сервером.
             </p>
 
-            <form id="auth-form" onsubmit="return false;" style="display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px;">
-              <input type="text" id="auth-username" class="auth-input" placeholder="Имя пользователя (логин)" maxlength="20" autocomplete="username">
+            <form id="auth-login-form" onsubmit="return false;" style="display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px;">
+              <input type="text" id="auth-username" class="auth-input" placeholder="Логин (имя пользователя)" maxlength="20" autocomplete="username">
               <input type="password" id="auth-password" class="auth-input" placeholder="Пароль" maxlength="30" autocomplete="current-password">
               <div id="auth-error" class="auth-error hidden"></div>
 
-              <div style="display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 6px;">
-                <button type="button" id="btn-auth-submit" class="btn btn-auth-submit">Войти / Регистрация</button>
-                <button type="button" id="btn-auth-guest" class="btn btn-secondary">Играть как Гость</button>
+              <div style="display: flex; flex-direction: column; gap: 8px; margin-top: 4px;">
+                <button type="button" id="btn-auth-submit" class="btn btn-auth-submit" style="font-size: 15px; font-weight: bold; padding: 10px;">🔑 Войти</button>
+                <div style="display: flex; gap: 8px; justify-content: center;">
+                  <button type="button" id="btn-auth-to-register" class="btn btn-secondary" style="flex: 1; font-size: 13px; padding: 8px;">📝 Регистрация</button>
+                  <button type="button" id="btn-auth-guest" class="btn btn-secondary" style="flex: 1; font-size: 13px; padding: 8px;">👤 Остаться гостем</button>
+                </div>
               </div>
             </form>
 
             <button id="btn-auth-close" class="btn btn-secondary" style="font-size: 13px; padding: 6px 20px;">Закрыть</button>
           </div>
+
+          <!-- 3. Register View (Логин, Пароль, Зарегистрироваться, Назад к входу) -->
+          <div id="auth-register-view" class="auth-view hidden">
+            <h1 style="color: #69f0ae; font-size: 24px; margin-bottom: 4px;">📝 РЕГИСТРАЦИЯ</h1>
+            <p style="font-size: 13px; margin-bottom: 12px; color: #d7ccc8;">
+              Создайте профиль игрока для сохранения монет, крафта и кампании.
+            </p>
+
+            <form id="auth-register-form" onsubmit="return false;" style="display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px;">
+              <input type="text" id="auth-reg-username" class="auth-input" placeholder="Придумайте логин (от 3 символов)" maxlength="20" autocomplete="username">
+              <input type="password" id="auth-reg-password" class="auth-input" placeholder="Придумайте пароль (от 4 символов)" maxlength="30" autocomplete="new-password">
+              <div id="auth-reg-error" class="auth-error hidden"></div>
+
+              <div style="display: flex; flex-direction: column; gap: 8px; margin-top: 4px;">
+                <button type="button" id="btn-auth-do-register" class="btn btn-hero" style="background: linear-gradient(135deg, #2e7d32, #43a047); font-size: 15px; font-weight: bold; padding: 10px;">✨ Зарегистрироваться</button>
+                <button type="button" id="btn-auth-to-login" class="btn btn-secondary" style="font-size: 13px; padding: 8px;">◀ Уже есть аккаунт? Войти</button>
+              </div>
+            </form>
+
+            <button id="btn-auth-close-reg" class="btn btn-secondary" style="font-size: 13px; padding: 6px 20px;">Закрыть</button>
+          </div>
         </div>
       </div>