diff --git a/src/static/css/style.css b/src/static/css/style.css index 9ebc6fa..891abcd 100644 --- a/src/static/css/style.css +++ b/src/static/css/style.css @@ -5194,6 +5194,15 @@ a.map-popup-article:hover { .tutorial-cursor-resize { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M22 22H20V20H22V22ZM22 18H18V22H16V16H22V18ZM18 18V14H22V12H16V18H18ZM14 22H12V16H18V14H10V22H14Z' fill='%23fff' stroke='%23000' stroke-width='0.3'/%3E%3C/svg%3E") no-repeat center/contain; } +.tutorial-cursor.clicking { + animation: tutorial-cursor-click 0.3s ease; +} + +@keyframes tutorial-cursor-click { + 0% { transform: scale(1); } + 40% { transform: scale(0.75); } + 100% { transform: scale(1); } +} /* Chat Tutorial-Hinweis */ .chat-tutorial-hint { diff --git a/src/static/js/tutorial.js b/src/static/js/tutorial.js index 29b8c25..d8bf307 100644 --- a/src/static/js/tutorial.js +++ b/src/static/js/tutorial.js @@ -1720,6 +1720,40 @@ const Tutorial = { this._els.cursor.classList.remove('visible'); }, + _clickAtCursor() { + var c = this._els.cursor; + c.classList.remove('clicking'); + void c.offsetWidth; + c.classList.add('clicking'); + var self = this; + return new Promise(function(resolve) { + setTimeout(function() { + c.classList.remove('clicking'); + resolve(); + }, 300); + }); + }, + + _cursorToToggle(checkboxSelector, fromX, fromY) { + var cb = document.querySelector(checkboxSelector); + if (!cb) return this._cursorToElement(checkboxSelector, fromX, fromY); + var toggle = cb.parentElement ? cb.parentElement.querySelector('.toggle-switch') : null; + if (!toggle) return this._cursorToElement(checkboxSelector, fromX, fromY); + var rect = toggle.getBoundingClientRect(); + if (!rect.width && !rect.height) return this._cursorToElement(checkboxSelector, fromX, fromY); + var tx = rect.left + rect.width / 2; + var ty = rect.top + rect.height / 2; + var self = this; + if (fromX !== undefined && fromY !== undefined) { + return this._animateCursor(fromX, fromY, tx, ty, 500).then(function() { + return self._wait(200).then(function() { return { x: tx, y: ty }; }); + }); + } else { + this._showCursor(tx, ty, 'default'); + return this._wait(200).then(function() { return { x: tx, y: ty }; }); + } + }, + _animateCursor(fromX, fromY, toX, toY, ms) { var self = this; return new Promise(function(resolve) { @@ -2094,18 +2128,31 @@ const Tutorial = { var intlLabel = intlCheckbox ? intlCheckbox.closest('.toggle-label') : null; if (intlLabel) { this._highlightSub('#inc-international'); - var pos = await this._cursorToElement('#inc-international'); - await this._wait(1500); + var pos = await this._cursorToToggle('#inc-international'); + await this._wait(600); + + // Klick simulieren: International deaktivieren + await this._clickAtCursor(); + intlCheckbox.checked = false; + await this._wait(1200); + + // Wieder aktivieren + await this._clickAtCursor(); + intlCheckbox.checked = true; + await this._wait(800); this._clearSubHighlights(); // Telegram-Toggle var telegramCheckbox = document.getElementById('inc-telegram'); if (telegramCheckbox) { this._highlightSub('#inc-telegram'); - pos = await this._cursorToElement('#inc-telegram', pos.x, pos.y); - // Aktivieren + pos = await this._cursorToToggle('#inc-telegram', pos.x, pos.y); + await this._wait(600); + + // Klick simulieren: Telegram aktivieren + await this._clickAtCursor(); telegramCheckbox.checked = true; - await this._wait(1500); + await this._wait(1200); this._clearSubHighlights(); } } @@ -2126,18 +2173,20 @@ const Tutorial = { var checkbox = document.getElementById('inc-visibility'); if (checkbox) { this._highlightSub('#inc-visibility'); - var pos = await this._cursorToElement('#inc-visibility'); - await this._wait(1000); + var pos = await this._cursorToToggle('#inc-visibility'); + await this._wait(600); - // Umschalten auf Privat + // Klick simulieren: Umschalten auf Privat + await this._clickAtCursor(); checkbox.checked = false; var textEl = document.getElementById('visibility-text'); - if (textEl) textEl.textContent = 'Privat \u2014 nur f\u00fcr dich sichtbar'; + if (textEl) textEl.textContent = 'Privat — nur für dich sichtbar'; await this._wait(1500); - // Zur\u00fcck auf \u00d6ffentlich + // Klick simulieren: Zurueck auf Oeffentlich + await this._clickAtCursor(); checkbox.checked = true; - if (textEl) textEl.textContent = '\u00d6ffentlich \u2014 f\u00fcr alle Nutzer sichtbar'; + if (textEl) textEl.textContent = 'Öffentlich — für alle Nutzer sichtbar'; await this._wait(800); this._clearSubHighlights(); }