alexei.dolgolyov/ledgrab
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 14 Wiki Activity

Add interactive getting-started tutorial for first-time users

Browse Source 
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:
Admin
2026-02-27 13:45:43 +03:00
parent f6977105b8
commit 111bfe743a
7 changed files with 86 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/src/wled_controller/templates/partials/tutorial-overlay.html
+17
View File
@@ -1,3 +1,20 @@
<!-- Getting Started Tutorial Overlay (viewport-level) -->
<div id="getting-started-overlay" class="tutorial-overlay tutorial-overlay-fixed" role="dialog" aria-modal="true">
<div class="tutorial-backdrop"></div>
<div class="tutorial-ring"></div>
<div class="tutorial-tooltip">
<div class="tutorial-tooltip-header">
<span class="tutorial-step-counter"></span>
<button class="tutorial-close-btn" onclick="closeTutorial()" data-i18n-aria-label="aria.close">&times;</button>
</div>
<p class="tutorial-tooltip-text"></p>
<div class="tutorial-tooltip-nav">
<button class="tutorial-prev-btn" onclick="tutorialPrev()" data-i18n-aria-label="aria.previous">&#8592;</button>
<button class="tutorial-next-btn" onclick="tutorialNext()" data-i18n-aria-label="aria.next">&#8594;</button>
</div>
</div>
</div>
<!-- Device Tutorial Overlay (viewport-level) -->
<div id="device-tutorial-overlay" class="tutorial-overlay tutorial-overlay-fixed" role="dialog" aria-modal="true">
<div class="tutorial-backdrop"></div>