hakimel · MohamedRishard · Aug 30, 2025 · Aug 30, 2025 · Aug 31, 2025 · Aug 31, 2025
diff --git a/.gitignore b/.gitignore
@@ -8,4 +8,6 @@ out/
 log/*.log
 tmp/**
 node_modules/
-.sass-cache
+.sass-cache
+# Local Netlify folder
+.netlify
diff --git a/Contribution/Enhancements/FeatureDemos(Open FeatureDemos.html)/Dragdrop.html b/Contribution/Enhancements/FeatureDemos(Open FeatureDemos.html)/Dragdrop.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>Drag-and-Drop Blocks Demo (CDN)</title>
+  <!-- Reveal.js via CDN -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reveal.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/theme/black.min.css" id="theme">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/monokai.min.css">
+  <style>
+    .canvas-area { position:relative; height:420px; background:rgba(255,255,255,.05); border-radius:12px; overflow:hidden; }
+    .node { position:absolute; padding:10px 14px; border-radius:10px; background:rgba(0,0,0,.6); color:#fff; user-select:none; touch-action:none; border:1px solid rgba(255,255,255,.15); }
+    .node:active { box-shadow:0 0 0 3px rgba(255,255,255,.2) inset; }
+  </style>
+</head>
+<body>
+  <div class="reveal">
+    <div class="slides">
+      <section>
+        <h2>Drag-and-Drop Blocks</h2>
+        <p>Drag the blocks inside the canvas to arrange a diagram.</p>
+        <div class="canvas-area" id="dragArea">
+          <div class="node" style="left:20px;top:20px;">Start</div>
+          <div class="node" style="left:200px;top:60px;">Process</div>
+          <div class="node" style="left:380px;top:140px;">Decision?</div>
+          <div class="node" style="left:120px;top:260px;">Result</div>
+        </div>
+      </section>
+    </div>
+  </div>
+
+  <!-- Reveal.js scripts via CDN -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reveal.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/plugin/notes/notes.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/plugin/markdown/markdown.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/plugin/highlight/highlight.min.js"></script>
+  <script>
+    Reveal.initialize({
+      controls: true,
+      progress: true,
+      slideNumber: 'c/t',
+      hash: true,
+      plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
+    });
+
+    const dragArea=document.getElementById('dragArea');
+    let dragTarget=null,dx=0,dy=0;
+    dragArea.querySelectorAll('.node').forEach(node=>{
+      node.addEventListener('pointerdown',e=>{
+        dragTarget=node; node.setPointerCapture(e.pointerId);
+        const rect=node.getBoundingClientRect();
+        dx=e.clientX-rect.left; dy=e.clientY-rect.top;
+      });
+      node.addEventListener('pointermove',e=>{
+        if(!dragTarget||dragTarget!==node)return;
+        const p=dragArea.getBoundingClientRect();
+        const x=Math.min(Math.max(0,e.clientX-p.left-dx),p.width-node.offsetWidth);
+        const y=Math.min(Math.max(0,e.clientY-p.top-dy),p.height-node.offsetHeight);
+        node.style.left=x+'px'; node.style.top=y+'px';
+      });
+      node.addEventListener('pointerup',()=>{ dragTarget=null; });
+      node.addEventListener('pointercancel',()=>{ dragTarget=null; });
+    });
+  </script>
+</body>
+</html>
diff --git a/Contribution/Enhancements/FeatureDemos(Open FeatureDemos.html)/Effects.html b/Contribution/Enhancements/FeatureDemos(Open FeatureDemos.html)/Effects.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>Media Effects Demo (CDN)</title>
+  <!-- Reveal.js via CDN -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reveal.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/theme/black.min.css" id="theme">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/monokai.min.css">
+  <style>
+    .fx-btn { padding:6px 10px; border-radius:8px; border:1px solid #444; background:#111; color:#fff; cursor:pointer; margin-right:6px; }
+    .effect-glitch{position:relative}
+    .effect-glitch::before,.effect-glitch::after{content:attr(data-glitch-text);position:absolute;inset:0;mix-blend-mode:screen;color:#fff;pointer-events:none}
+    .effect-glitch::before{text-shadow:-2px 0 #f0f;clip-path:polygon(0 2%,100% 2%,100% 44%,0 44%);animation:glitch 2s infinite linear alternate-reverse}
+    .effect-glitch::after{text-shadow:2px 0 #0ff;clip-path:polygon(0 56%,100% 56%,100% 98%,0 98%);animation:glitch 1.8s infinite linear alternate}
+    @keyframes glitch{0%{transform:translate(0,0)}20%{transform:translate(-2px,1px)}40%{transform:translate(2px,-1px)}60%{transform:translate(-1px,2px)}80%{transform:translate(1px,-2px)}100%{transform:translate(0,0)}}
+    .effect-vhs{position:relative;filter:contrast(1.1) saturate(1.2)}
+    .effect-vhs::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.08) 0 2px,rgba(0,0,0,0) 2px 4px);mix-blend-mode:overlay;pointer-events:none}
+    .effect-blurpulse{animation:blurPulse 2.5s ease-in-out infinite}
+    @keyframes blurPulse{0%,100%{filter:blur(0px) brightness(1)}50%{filter:blur(2px) brightness(1.1)}}
+  </style>
+</head>
+<body>
+  <div class="reveal">
+    <div class="slides">
+      <section>
+        <h2>Media Effects (Glitch / VHS / BlurPulse)</h2>
+        <p>Click a button to apply effects to the media below.</p>
+        <div style="display:flex;gap:16px;flex-wrap:wrap;align-items:center;">
+
+          <video class="fx-target" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" style="max-width:340px;border-radius:12px;" autoplay muted loop playsinline></video>
+        </div>
+        <div style="margin-top:12px;">
+          <button class="fx-btn" data-fx="none">None</button>
+          <button class="fx-btn" data-fx="glitch">Glitch</button>
+          <button class="fx-btn" data-fx="vhs">VHS</button>
+          <button class="fx-btn" data-fx="blurpulse">BlurPulse</button>
+        </div>
+      </section>
+    </div>
+  </div>
+
+  <!-- Reveal.js scripts via CDN -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reveal.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/plugin/notes/notes.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/plugin/markdown/markdown.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/plugin/highlight/highlight.min.js"></script>
+  <script>
+    Reveal.initialize({
+      controls: true,
+      progress: true,
+      slideNumber: 'c/t',
+      hash: true,
+      plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
+    });
+
+    function setFx(mode){
+      const cur=Reveal.getCurrentSlide();
+      cur?.querySelectorAll('.fx-target').forEach(t=>{
+        t.classList.remove('effect-glitch','effect-vhs','effect-blurpulse');
+        if(mode==='glitch'){
+          if(/^H[1-6]$/.test(t.tagName)) t.setAttribute('data-glitch-text', t.textContent.trim());
+          t.classList.add('effect-glitch');
+        }
+        if(mode==='vhs'){ t.classList.add('effect-vhs'); }
+        if(mode==='blurpulse'){ t.classList.add('effect-blurpulse'); }
+      });
+    }
+    document.querySelectorAll('button[data-fx]').forEach(b=>b.onclick=()=>setFx(b.dataset.fx));
+  </script>
+</body>
+</html>
diff --git a/Contribution/Enhancements/FeatureDemos(Open FeatureDemos.html)/FeatureDemos.html b/Contribution/Enhancements/FeatureDemos(Open FeatureDemos.html)/FeatureDemos.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1" name="viewport"/>
+<title>Reveal.js Feature Demos — Gallery</title>
+<style>
+    :root { color-scheme: dark; }
+    body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; background: #0b0d10; color: #e6e6e6; }
+    header { padding: 28px 20px; border-bottom: 1px solid #1c2127; background: linear-gradient(180deg, #10151a, #0b0d10); position: sticky; top: 0; }
+    h1 { margin: 0 0 6px 0; font-weight: 700; letter-spacing: .3px; }
+    p.sub { margin: 0; opacity: .8; }
+    .container { max-width: 1100px; margin: 0 auto; padding: 24px; }
+    .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
+    .card { background: #0f141a; border: 1px solid #1c2127; border-radius: 16px; padding: 16px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
+    .card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.35); border-color: #2a323b; }
+    .title { font-size: 1.05rem; margin: 0 0 8px 0; display:flex; align-items:center; gap:8px; }
+    .desc { font-size: .95rem; opacity: .9; margin: 0 0 12px 0; min-height: 48px; }
+    .tags { display:flex; gap:6px; flex-wrap:wrap; }
+    .tag { font-size: .75rem; padding: 4px 8px; border-radius: 999px; background:#121920; border:1px solid #222b35; opacity:.95; }
+    a.btn { display:inline-block; margin-top: 6px; padding: 8px 12px; border-radius: 10px; background:#1a2330; border:1px solid #223043; color:#e6e6e6; text-decoration:none; }
+    a.btn:hover { background:#1f2a3a; }
+    footer { text-align:center; font-size:.9rem; opacity:.7; padding: 20px; border-top: 1px solid #1c2127; margin-top: 24px; }
+    .emoji { font-size: 1.15rem; }
+  </style>
+</head>
+<body>
+<header>
+<h1>Reveal.js Feature Demos — Gallery</h1>
+<p class="sub">Open any demo. All are CDN-based and work from any folder.</p>
+</header>
+<div class="container">
+<div class="grid">
+<div class="card">
+<div class="title"><span class="emoji">🖊️</span><strong>Whiteboard</strong></div>
+<p class="desc">Draw on slides with a fullscreen canvas overlay; color/size controls + clear.</p>
+<div class="tags"><span class="tag">overlay</span><span class="tag">canvas</span><span class="tag">interactive</span></div>
+<a class="btn" href="Whiteboard.html">Open demo</a>
+</div>
+<div class="card">
+<div class="title"><span class="emoji">🗺️</span><strong>Minimap</strong></div>
+<p class="desc">Clickable dots for each slide. Jump instantly. Current slide highlighted.</p>
+<div class="tags"><span class="tag">navigation</span><span class="tag">UX</span></div>
+<a class="btn" href="Minimap.html">Open demo</a>
+</div>
+
+<div class="card">
+<div class="title"><span class="emoji">✨</span><strong>Media Effects</strong></div>
+<p class="desc">Glitch, VHS, and BlurPulse effects toggled via buttons, pure CSS + JS.</p>
+<div class="tags"><span class="tag">visual</span><span class="tag">css</span></div>
+<a class="btn" href="Effects.html">Open demo</a>
+</div>
+<div class="card">
+<div class="title"><span class="emoji">🎨</span><strong>Slide Overlays</strong></div>
+<p class="desc">Dark, grid, and dotted overlays, plus badges and ribbon captions.</p>
+<div class="tags"><span class="tag">styling</span><span class="tag">layout</span></div>
+<a class="btn" href="Overlays.html">Open demo</a>
+</div>
+<div class="card">
+<div class="title"><span class="emoji">🧪</span><strong>Live Playground</strong></div>
+<p class="desc">Edit HTML/CSS/JS and preview immediately in an iframe.</p>
+<div class="tags"><span class="tag">education</span><span class="tag">live</span></div>
+<a class="btn" href="Playground.html">Open demo</a>
+</div>
+<div class="card">
+<div class="title"><span class="emoji">💻</span><strong>Terminal</strong></div>
+<p class="desc">Scripted typing effect simulating CLI output for safe, repeatable demos.</p>
+<div class="tags"><span class="tag">demo</span><span class="tag">animation</span></div>
+<a class="btn" href="Terminal.html">Open demo</a>
+</div>
+<div class="card">
+<div class="title"><span class="emoji">🎚️</span><strong>Filters</strong></div>
+<p class="desc">Adjust blur, grayscale, hue, brightness, and contrast live.</p>
+<div class="tags"><span class="tag">image</span><span class="tag">css</span></div>
+<a class="btn" href="Filters.html">Open demo</a>
+</div>
+<div class="card">
+<div class="title"><span class="emoji">🏷️</span><strong>Drag-and-Drop</strong></div>
+<p class="desc">Move blocks inside a canvas area to build quick diagrams.</p>
+<div class="tags"><span class="tag">interactive</span><span class="tag">pointer</span></div>
+<a class="btn" href="Dragdrop.html">Open demo</a>
+</div>
+</div>
+<footer>
+      Tip: Keep this gallery file in the same folder as the demos so links work directly.
+    </footer>
+</div>
+</body>
+</html>
diff --git a/Contribution/Enhancements/FeatureDemos(Open FeatureDemos.html)/Filters.html b/Contribution/Enhancements/FeatureDemos(Open FeatureDemos.html)/Filters.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>Dynamic Media Filters Demo (CDN)</title>
+  <!-- Reveal.js via CDN -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reveal.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/theme/black.min.css" id="theme">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/monokai.min.css">
+  <style>
+    .filter-controls { display:grid; grid-template-columns:max-content 1fr; gap:8px 12px; align-items:center; margin-top:10px; }
+    .filter-target { max-width:60%; border-radius:12px; }
+  </style>
+</head>
+<body>
+  <div class="reveal">
+    <div class="slides">
+      <section>
+        <h2>Dynamic Media Filters</h2>
+        <p>Use the sliders to apply CSS filters to the image below.</p>
+        <img id="filterTarget" class="filter-target" src="https://static.slid.es/reveal/image-placeholder.png" alt="sample">
+        <div class="filter-controls">
+          <label>Blur</label><input id="fBlur" type="range" min="0" max="10" step="0.5" value="0">
+          <label>Grayscale</label><input id="fGray" type="range" min="0" max="1" step="0.05" value="0">
+          <label>Hue</label><input id="fHue" type="range" min="0" max="360" step="1" value="0">
+          <label>Brightness</label><input id="fBright" type="range" min="0.5" max="1.5" step="0.05" value="1">
+          <label>Contrast</label><input id="fContrast" type="range" min="0.5" max="1.5" step="0.05" value="1">
+        </div>
+      </section>
+    </div>
+  </div>
+
+  <!-- Reveal.js scripts via CDN -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reveal.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/plugin/notes/notes.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/plugin/markdown/markdown.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/plugin/highlight/highlight.min.js"></script>
+  <script>
+    Reveal.initialize({
+      controls: true,
+      progress: true,
+      slideNumber: 'c/t',
+      hash: true,
+      plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
+    });
+
+    function apply(){
+      const img=document.getElementById('filterTarget');
+      const blur=fBlur.value, gray=fGray.value, hue=fHue.value, bri=fBright.value, con=fContrast.value;
+      img.style.filter=`blur(${blur}px) grayscale(${gray}) hue-rotate(${hue}deg) brightness(${bri}) contrast(${con})`;
+    }
+    ['fBlur','fGray','fHue','fBright','fContrast'].forEach(id=>document.getElementById(id).addEventListener('input',apply));
+    apply();
+  </script>
+</body>
+</html>