TUTORIALZZ

app/Shared/Layout/main.php

@@ -190,6 +190,9 @@ window.addEventListener('load', function() {
 });
 </script>
 <?= $__template->yield('scripts', '') ?>
+<?php if (str_starts_with($_SERVER['REQUEST_URI'] ?? '', '/tutorials/')): ?>
+<script src="/assets/js/tutorial-screenshots.js"></script>
+<?php endif; ?>
 <?php if ($app->isDebug()): ?>
 <?= \App\Core\DebugBar::render() ?>
 <?php endif; ?>

public/assets/js/tutorial-screenshots.js

+(function() {
+    'use strict';
+
+    var path = window.location.pathname;
+    if (path.indexOf('/tutorials') !== 0) return;
+
+    var parts = path.replace(/^\/tutorials\/?/, '').split('/');
+    if (parts.length < 2 || !parts[1]) return;
+
+    var section = parts[0];
+    var slug = parts[1];
+
+    var steps = document.querySelectorAll('.tut-step');
+    if (!steps.length) return;
+
+    var style = document.createElement('style');
+    style.textContent = '.tut-screenshot{margin-top:12px;border:1px solid #E5E7EB;border-radius:8px;overflow:hidden;cursor:pointer;max-height:220px;position:relative;transition:max-height .3s ease}.tut-screenshot::after{content:"\\1F50D اضغط للتكبير";position:absolute;bottom:0;left:0;right:0;padding:8px;text-align:center;font-size:11px;color:#6B7280;background:linear-gradient(transparent,#fff 80%)}.tut-screenshot.expanded{max-height:none}.tut-screenshot.expanded::after{content:"اضغط للتصغير";background:#F9FAFB;position:static;display:block;padding:8px;border-top:1px solid #E5E7EB}.tut-screenshot img{width:100%;display:block;border-radius:8px 8px 0 0}';
+    document.head.appendChild(style);
+
+    var basePath = '/assets/tutorials/' + section + '/' + slug + '/';
+
+    steps.forEach(function(stepEl, idx) {
+        var imgPath = basePath + 'step-' + (idx + 1) + '.png';
+        var img = new Image();
+        img.onload = function() {
+            var wrapper = document.createElement('div');
+            wrapper.className = 'tut-screenshot';
+            wrapper.onclick = function() { this.classList.toggle('expanded'); };
+            wrapper.appendChild(img);
+            stepEl.appendChild(wrapper);
+        };
+        img.src = imgPath;
+        img.alt = 'لقطة شاشة - خطوة ' + (idx + 1);
+    });
+})();