alexei.dolgolyov/wled-screen-controller-mixed
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 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

3
server/src/wled_controller/templates/index.html
View File

@@ -28,6 +28,9 @@
</div>
<div class="server-info">
<a href="/docs" target="_blank" class="header-link" data-i18n-title="app.api_docs" title="API Docs">API</a>
<button class="search-toggle" id="tour-restart-btn" onclick="startGettingStartedTutorial()" data-i18n-title="tour.restart" title="Restart tutorial">
?
</button>
<button class="search-toggle" onclick="openCommandPalette()" data-i18n-title="search.open" title="Search (Ctrl+K)">
🔍
</button>

17
server/src/wled_controller/templates/partials/tutorial-overlay.html
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>