Add initial version

Author: squix78

docs/guides/icon256-word-clock.md

@@ -16,28 +16,25 @@ Connect the Icon256 - Word Clock to a USB-C power source (5V, at least 1A recomm
 
 ### Connect to WiFi
 
-When powered on for the first time, the Icon256 creates its own WiFi access point for easy configuration.
+When powered on for the first time, the Icon256 creates its own WiFi access point for easy configuration. Follow these steps:
 
 1. **Quick connect with QR code**: Scan this QR code with your smartphone to connect automatically to the access point:
 
    ![Scan to connect to default access point](../img/guides/icon256-word-clock/default-ap-qr.png)
 
    *Alternatively, if the QR code doesn't work:* Manually find and connect to the WiFi network named `WLED-AP` (or similar, may include the device's chip ID) using the password `wled1234`
 
-2. **Open the configuration page**: 
-   - Your device should automatically open a captive portal
-   - If not, open a web browser and navigate to `http://4.3.2.1`
+2. **Follow the visual setup guide**: Click on any image below to view the setup steps in a carousel. Use arrow keys or click the arrows to navigate between steps.
 
-   ![WLED settings interface](../img/guides/icon256-word-clock/setup/0-settings.webp)
+![Step 1: Open Settings](../img/guides/icon256-word-clock/setup/01-settings.webp){ data-title="Step 1: Open Settings" data-description="Your device should automatically open a captive portal. If not, navigate to http://4.3.2.1" }
 
-3. **Configure WiFi settings**:
-   - Click on the "WIFI SETUP" button
-   - Select your home WiFi network from the list
-   - Enter your WiFi password
-   - Click "Save & Connect"
-4. **Reconnect to your home WiFi**: After a few seconds, the Icon256 will restart and connect to your home network
-   - Reconnect your phone/computer to your regular WiFi network
-   - The web interface will display the IP address assigned to your Icon256
+![Step 2: WiFi Setup](../img/guides/icon256-word-clock/setup/02-wifi-ap.webp){ data-title="Step 2: WiFi Setup" data-description="Click on the WIFI SETUP button to access network settings" }
+
+![Step 3: Configure WiFi](../img/guides/icon256-word-clock/setup/03-wifi-settings.webp){ data-title="Step 3: Configure WiFi" data-description="Select your home WiFi network, enter password, and click Save & Connect" }
+
+![Step 4: Connected](../img/guides/icon256-word-clock/setup/04-wled-main.webp){ data-title="Step 4: Connected" data-description="The Icon256 will restart and connect to your network" }
+
+![Step 5: WiFi Selection](../img/guides/icon256-word-clock/setup/05-wifi-selection.webp){ data-title="Step 5: WiFi Selection" data-description="Reconnect your phone to your regular WiFi network" }
 
 !!! tip
     Write down the IP address shown on the configuration page. You can access the WLED interface anytime by entering this IP address in your browser while connected to the same WiFi network.

…icon256-word-clock/setup/0-settings.webp …con256-word-clock/setup/01-settings.webpdocs/img/guides/icon256-word-clock/setup/0-settings.webp renamed to docs/img/guides/icon256-word-clock/setup/01-settings.webp docs/img/guides/icon256-word-clock/setup/0-settings.webp renamed to docs/img/guides/icon256-word-clock/setup/01-settings.webp

@@ -88,6 +88,8 @@ watch:
 markdown_extensions:
   # https://squidfunk.github.io/mkdocs-material/reference/admonitions/
   - admonition
+  - attr_list
+  - md_in_html
   - toc:
       permalink: §
   # https://python-markdown.github.io/extensions/definition_lists/
@@ -115,6 +117,19 @@ markdown_extensions:
   - pymdownx.tilde
 
 plugins:
+  - glightbox:
+      touchNavigation: true
+      loop: false
+      effect: zoom
+      slide_effect: slide
+      width: 100%
+      height: auto
+      zoomable: true
+      draggable: true
+      skip_classes:
+        - custom-skip-class-name
+      auto_caption: false
+      caption_position: bottom
   - mkdocs-video:
       is_video: True
       video_muted: True

docs/img/guides/icon256-word-clock/setup/02-wifi-ap.webp

@@ -3,3 +3,4 @@ mkdocs-material==9.5.13
 markdown-include>=0.5.1
 pymdown-extensions>=7.0
 mkdocs_video>=1.5.0
+mkdocs-glightbox>=0.4.0