feat: add sound & prefs settings tab in profile

- New 'Настройки' tab in profile.html between Закладки and Безопасность
- Sound section: global enable toggle, volume slider, per-category toggles (ui/classroom/gamification/quiz)
- Test buttons to preview each sound category
- Appearance section: animation toggle, push notifications toggle
- All sound prefs persist via LS.sfx localStorage (ls_sfx key)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/profile.html

@@ -171,6 +171,55 @@
     .p-pane.active { display: flex; }
     #tab-achievements { overflow-y: auto; padding-right: 4px; }
     #tab-bookmarks    { overflow-y: auto; padding-right: 4px; }
+    #tab-prefs        { overflow-y: auto; padding-right: 4px; }
+
+    /* ── Prefs (settings) tab ── */
+    .pref-row {
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 10px 0; border-bottom: 1px solid rgba(15,23,42,0.06);
+    }
+    .pref-row:last-child { border-bottom: none; padding-bottom: 0; }
+    .pref-row-info { display: flex; flex-direction: column; gap: 2px; }
+    .pref-row-label {
+      font-size: 0.83rem; font-weight: 600; color: var(--text);
+    }
+    .pref-row-desc { font-size: 0.72rem; color: var(--text-3); }
+    .pref-toggle {
+      position: relative; width: 38px; height: 22px; flex-shrink: 0;
+    }
+    .pref-toggle input { opacity: 0; width: 0; height: 0; }
+    .pref-toggle-track {
+      position: absolute; inset: 0; border-radius: 999px;
+      background: rgba(15,23,42,0.12); cursor: pointer; transition: background .2s;
+    }
+    .pref-toggle-track::after {
+      content: ''; position: absolute; left: 3px; top: 50%;
+      transform: translateY(-50%); width: 16px; height: 16px;
+      border-radius: 50%; background: #fff;
+      box-shadow: 0 1px 3px rgba(15,23,42,0.2); transition: left .2s;
+    }
+    .pref-toggle input:checked + .pref-toggle-track { background: var(--violet); }
+    .pref-toggle input:checked + .pref-toggle-track::after { left: calc(100% - 19px); }
+    .pref-volume-wrap {
+      display: flex; align-items: center; gap: 10px; min-width: 160px;
+    }
+    .pref-volume-wrap input[type=range] {
+      flex: 1; accent-color: var(--violet); cursor: pointer;
+    }
+    .pref-volume-val {
+      font-size: 0.78rem; font-weight: 700; color: var(--violet);
+      min-width: 32px; text-align: right;
+    }
+    .pref-test-btn {
+      padding: 5px 14px; border-radius: 8px; border: 1.5px solid rgba(155,93,229,0.3);
+      background: rgba(155,93,229,0.06); font-size: 0.76rem; font-weight: 600;
+      color: var(--violet); cursor: pointer; transition: all .15s; white-space: nowrap;
+    }
+    .pref-test-btn:hover { background: rgba(155,93,229,0.12); border-color: var(--violet); }
+    .pref-section-label {
+      font-size: 0.65rem; font-weight: 800; text-transform: uppercase;
+      letter-spacing: 0.08em; color: var(--text-3); margin: 4px 0 8px;
+    }
 
     /* ── Cards ── */
     .p-card {
@@ -613,6 +662,7 @@
           <button class="p-tab" id="tab-btn-achievements" onclick="switchTab(this,'tab-achievements')">Достижения</button>
           <button class="p-tab" id="tab-btn-shop"         onclick="switchTab(this,'tab-shop')">Магазин</button>
           <button class="p-tab"        onclick="switchTab(this,'tab-bookmarks')">Закладки</button>
+          <button class="p-tab"        onclick="switchTab(this,'tab-prefs');loadPrefs()">Настройки</button>
           <button class="p-tab"        onclick="switchTab(this,'tab-security')">Безопасность</button>
         </div>
 
@@ -760,6 +810,148 @@
         </div>
 
         <!-- Tab: Безопасность -->
+        <!-- Tab: Настройки -->
+        <div class="p-pane" id="tab-prefs">
+
+          <!-- Звуки -->
+          <div class="p-card">
+            <div class="p-card-header">
+              <div class="p-card-icon"><i data-lucide="volume-2" style="width:15px;height:15px"></i></div>
+              <div>
+                <div class="p-card-title">Звуки системы</div>
+                <div class="p-card-sub">Уведомления, геймификация, classroom, квизы</div>
+              </div>
+            </div>
+
+            <!-- Master toggle -->
+            <div class="pref-row">
+              <div class="pref-row-info">
+                <div class="pref-row-label">Звуки включены</div>
+                <div class="pref-row-desc">Глобальное управление всеми звуками</div>
+              </div>
+              <label class="pref-toggle">
+                <input type="checkbox" id="pref-sfx-enabled" onchange="prefSfxEnabled(this.checked)">
+                <span class="pref-toggle-track"></span>
+              </label>
+            </div>
+
+            <!-- Volume -->
+            <div class="pref-row">
+              <div class="pref-row-info">
+                <div class="pref-row-label">Громкость</div>
+                <div class="pref-row-desc">Применяется ко всем звукам платформы</div>
+              </div>
+              <div class="pref-volume-wrap">
+                <input type="range" id="pref-sfx-vol" min="0" max="100" value="75"
+                  oninput="prefSfxVolume(this.value)">
+                <span class="pref-volume-val" id="pref-sfx-vol-val">75%</span>
+              </div>
+            </div>
+
+            <div class="pref-section-label" style="margin-top:12px">Категории</div>
+
+            <!-- UI sounds -->
+            <div class="pref-row">
+              <div class="pref-row-info">
+                <div class="pref-row-label">Интерфейс</div>
+                <div class="pref-row-desc">Клики, успех, ошибки, уведомления</div>
+              </div>
+              <label class="pref-toggle">
+                <input type="checkbox" id="pref-sfx-ui" onchange="prefSfxCat('ui',this.checked)">
+                <span class="pref-toggle-track"></span>
+              </label>
+            </div>
+
+            <!-- Classroom sounds -->
+            <div class="pref-row">
+              <div class="pref-row-info">
+                <div class="pref-row-label">Classroom</div>
+                <div class="pref-row-desc">Урок, участники, чат, рука, рисование</div>
+              </div>
+              <label class="pref-toggle">
+                <input type="checkbox" id="pref-sfx-classroom" onchange="prefSfxCat('classroom',this.checked)">
+                <span class="pref-toggle-track"></span>
+              </label>
+            </div>
+
+            <!-- Gamification sounds -->
+            <div class="pref-row">
+              <div class="pref-row-info">
+                <div class="pref-row-label">Геймификация</div>
+                <div class="pref-row-desc">XP, уровень, достижения, монеты</div>
+              </div>
+              <label class="pref-toggle">
+                <input type="checkbox" id="pref-sfx-gamification" onchange="prefSfxCat('gamification',this.checked)">
+                <span class="pref-toggle-track"></span>
+              </label>
+            </div>
+
+            <!-- Quiz sounds -->
+            <div class="pref-row">
+              <div class="pref-row-info">
+                <div class="pref-row-label">Квизы</div>
+                <div class="pref-row-desc">Старт вопроса, правильно, неправильно</div>
+              </div>
+              <label class="pref-toggle">
+                <input type="checkbox" id="pref-sfx-quiz" onchange="prefSfxCat('quiz',this.checked)">
+                <span class="pref-toggle-track"></span>
+              </label>
+            </div>
+
+            <!-- Test button -->
+            <div style="margin-top:14px;display:flex;gap:8px;flex-wrap:wrap">
+              <button class="pref-test-btn" onclick="prefSfxTest('notification')">
+                <i data-lucide="bell" style="width:12px;height:12px;vertical-align:-2px"></i>
+                Уведомление
+              </button>
+              <button class="pref-test-btn" onclick="prefSfxTest('achievement')">
+                <i data-lucide="trophy" style="width:12px;height:12px;vertical-align:-2px"></i>
+                Ачивка
+              </button>
+              <button class="pref-test-btn" onclick="prefSfxTest('level_up')">
+                <i data-lucide="zap" style="width:12px;height:12px;vertical-align:-2px"></i>
+                Уровень
+              </button>
+              <button class="pref-test-btn" onclick="prefSfxTest('lesson_start')">
+                <i data-lucide="play" style="width:12px;height:12px;vertical-align:-2px"></i>
+                Урок
+              </button>
+            </div>
+          </div>
+
+          <!-- Внешний вид -->
+          <div class="p-card">
+            <div class="p-card-header">
+              <div class="p-card-icon"><i data-lucide="monitor" style="width:15px;height:15px"></i></div>
+              <div>
+                <div class="p-card-title">Внешний вид</div>
+                <div class="p-card-sub">Анимации и визуальные настройки</div>
+              </div>
+            </div>
+            <div class="pref-row">
+              <div class="pref-row-info">
+                <div class="pref-row-label">Анимации интерфейса</div>
+                <div class="pref-row-desc">Плавные переходы между страницами</div>
+              </div>
+              <label class="pref-toggle">
+                <input type="checkbox" id="pref-anim" onchange="prefAnim(this.checked)" checked>
+                <span class="pref-toggle-track"></span>
+              </label>
+            </div>
+            <div class="pref-row">
+              <div class="pref-row-info">
+                <div class="pref-row-label">Уведомления на рабочем столе</div>
+                <div class="pref-row-desc">Push-уведомления браузера</div>
+              </div>
+              <label class="pref-toggle">
+                <input type="checkbox" id="pref-push" onchange="prefPush(this.checked)">
+                <span class="pref-toggle-track"></span>
+              </label>
+            </div>
+          </div>
+
+        </div>
+
         <div class="p-pane" id="tab-security">
           <div class="p-card">
             <div class="p-card-header">
@@ -794,6 +986,7 @@
 </div>
 
 <script src="/js/api.js"></script>
+<script src="/js/sound.js"></script>
   <script src="/js/sidebar.js"></script>
   <script src="/js/notifications.js"></script>
 <script>
@@ -1336,6 +1529,77 @@
 
   loadProfile();
   if (window.lucide) lucide.createIcons();
+
+  /* ── Настройки (prefs tab) ── */
+  function loadPrefs() {
+    if (!window.LS || !LS.sfx) return;
+    const sfx = LS.sfx;
+    const setChk = (id, v) => { const el = document.getElementById(id); if (el) el.checked = v; };
+    setChk('pref-sfx-enabled',      sfx.enabled);
+    setChk('pref-sfx-ui',           sfx.prefs.ui);
+    setChk('pref-sfx-classroom',    sfx.prefs.classroom);
+    setChk('pref-sfx-gamification', sfx.prefs.gamification);
+    setChk('pref-sfx-quiz',         sfx.prefs.quiz);
+    const vol = Math.round(sfx.volume * 100);
+    const volEl = document.getElementById('pref-sfx-vol');
+    const volVal = document.getElementById('pref-sfx-vol-val');
+    if (volEl)  volEl.value = vol;
+    if (volVal) volVal.textContent = vol + '%';
+
+    // Push notifications
+    const pushEl = document.getElementById('pref-push');
+    if (pushEl) pushEl.checked = (Notification.permission === 'granted');
+
+    // Animations
+    const animEl = document.getElementById('pref-anim');
+    if (animEl) animEl.checked = localStorage.getItem('ls_anim') !== 'off';
+
+    if (window.lucide) lucide.createIcons();
+  }
+
+  function prefSfxEnabled(v) {
+    if (!window.LS || !LS.sfx) return;
+    LS.sfx.setEnabled(v);
+    if (v) setTimeout(() => LS.sfx.play('success'), 100);
+  }
+
+  function prefSfxVolume(v) {
+    if (!window.LS || !LS.sfx) return;
+    LS.sfx.setVolume(v / 100);
+    const valEl = document.getElementById('pref-sfx-vol-val');
+    if (valEl) valEl.textContent = v + '%';
+    LS.sfx.play('click');
+  }
+
+  function prefSfxCat(cat, v) {
+    if (!window.LS || !LS.sfx) return;
+    LS.sfx.setPref(cat, v);
+    if (v) LS.sfx.play('click');
+  }
+
+  function prefSfxTest(name) {
+    if (!window.LS || !LS.sfx) return;
+    const wasEnabled = LS.sfx.enabled;
+    LS.sfx.enabled = true;
+    LS.sfx.play(name);
+    LS.sfx.enabled = wasEnabled;
+  }
+
+  function prefAnim(v) {
+    localStorage.setItem('ls_anim', v ? 'on' : 'off');
+    LS.toast(v ? 'Анимации включены' : 'Анимации отключены', 'success');
+  }
+
+  function prefPush(v) {
+    if (v) {
+      Notification.requestPermission().then(perm => {
+        const el = document.getElementById('pref-push');
+        if (el) el.checked = perm === 'granted';
+        if (perm === 'granted') LS.toast('Push-уведомления разрешены', 'success');
+        else LS.toast('Браузер запретил уведомления', 'warn');
+      });
+    }
+  }
 </script>
 <script src="/js/search.js"></script>
 <script src="/js/mobile.js"></script>