Onboarding

timetracker.Server/Components/App.razor

@@ -13,6 +13,15 @@
     <ImportMap />
     <link rel="icon" type="image/svg+xml" href="favicon.svg" />
     <link rel="alternate icon" type="image/png" href="favicon.png" />
+    <style>
+        .onboarding-active-target {
+            position: relative !important;
+            z-index: 10000 !important;
+            box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.75), 0 0 15px rgba(14, 165, 233, 0.5) !important;
+            pointer-events: none !important;
+            transition: all 0.3s ease !important;
+        }
+    </style>
     <HeadOutlet @rendermode="InteractiveWebAssembly" />
 </head>
 
@@ -20,6 +29,25 @@
     <Routes />
     <script src="@Assets["_framework/blazor.web.js"]"></script>
     <script src="_content/MudBlazor/MudBlazor.min.js"></script>
+    <script>
+        window.onboarding = {
+            highlight: function (selector) {
+                document.querySelectorAll('.onboarding-active-target').forEach(function(el) {
+                    el.classList.remove('onboarding-active-target');
+                });
+                var target = document.querySelector(selector);
+                if (target) {
+                    target.classList.add('onboarding-active-target');
+                    target.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                }
+            },
+            clear: function () {
+                document.querySelectorAll('.onboarding-active-target').forEach(function(el) {
+                    el.classList.remove('onboarding-active-target');
+                });
+            }
+        };
+    </script>
 </body>
 
 </html>