Add interactive getting-started tutorial for first-time users

Auto-starts on first visit with a 9-step walkthrough covering header,
tabs, settings, search, theme, and language controls. Stores completion
in localStorage; restart via ? button in the header. Includes en/ru/zh
translations for all tour steps.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-27 13:45:43 +03:00
parent f6977105b8
commit 111bfe743a
7 changed files with 86 additions and 2 deletions

View File

@@ -22,7 +22,7 @@ import {
openDisplayPicker, closeDisplayPicker, selectDisplay, formatDisplayLabel,
} from './features/displays.js';
import {
startCalibrationTutorial, startDeviceTutorial,
startCalibrationTutorial, startDeviceTutorial, startGettingStartedTutorial,
closeTutorial, tutorialNext, tutorialPrev,
} from './features/tutorials.js';
@@ -174,6 +174,7 @@ Object.assign(window, {
// tutorials
startCalibrationTutorial,
startDeviceTutorial,
startGettingStartedTutorial,
closeTutorial,
tutorialNext,
tutorialPrev,
@@ -502,4 +503,9 @@ document.addEventListener('DOMContentLoaded', async () => {
// Start global events WebSocket and auto-refresh
startEventsWS();
startAutoRefresh();
// Show getting-started tutorial on first visit
if (!localStorage.getItem('tour_completed')) {
setTimeout(() => startGettingStartedTutorial(), 600);
}
});