Merge pull request #10 from web3dev1337/feature/editor-usability-work1

fix: restore 3D Material Forge iframe, hide nav in embed

Author: web3dev1337

demos.html

@@ -8,7 +8,7 @@
 *{margin:0;padding:0;box-sizing:border-box}
 body{background:#030306;color:#ccc;font-family:'Segoe UI',system-ui,sans-serif;overflow-x:hidden}
 .embed body{overflow:hidden}
-.embed .header,.embed .links,.embed .mat-strips,.embed .info-bar{display:none}
+.embed .header,.embed .links,.embed .mat-strips,.embed .info-bar,.embed #top-nav{display:none}
 .embed #content{padding:10px 0}
 .embed #viewport{max-width:none;border-radius:10px}
 .embed #viewport canvas{height:100%}

showcase.html

@@ -64,12 +64,8 @@
 .preview-info .map-list{list-style:none;padding:0;margin:8px 0}
 .preview-info .map-list li{padding:2px 0;color:#555}
 .preview-info .map-list li::before{content:"▸ ";color:#e94560}
-.forge-card{display:block;text-decoration:none;max-width:720px;margin:0 auto;padding:24px;border:1px solid #1a1a2e;border-radius:12px;background:linear-gradient(180deg,#0c0c18,#08080f);box-shadow:0 20px 60px rgba(0,0,0,.45);transition:border-color .25s,box-shadow .25s}
-.forge-card:hover{border-color:#e94560;box-shadow:0 20px 80px rgba(233,69,96,.12)}
-.forge-previews{display:flex;gap:12px;justify-content:center}
-.forge-orb{width:140px;height:140px;border-radius:50%;object-fit:cover;border:2px solid #1a1a2e;box-shadow:0 0 20px rgba(0,0,0,.6);transition:transform .3s,border-color .3s}
-.forge-card:hover .forge-orb{border-color:#333;transform:scale(1.05)}
-.forge-cta{display:block;text-align:center;margin-top:16px;color:#e94560;font-family:monospace;font-size:13px;letter-spacing:.5px}
+.forge-frame{width:100%;max-width:1400px;margin:0 auto;border:1px solid #1a1a2e;border-radius:10px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.45)}
+.forge-frame iframe{width:100%;height:520px;border:0;display:block;background:#050508}
 .section-note{color:#e94560;font-size:12px;font-family:monospace;margin-bottom:12px;opacity:.8}
 .section-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
 .section-actions a{display:inline-block;padding:6px 12px;border-radius:6px;border:1px solid #333;background:#111;color:#bbb;text-decoration:none;font-family:monospace;font-size:11px;letter-spacing:.4px;transition:all .2s}
@@ -137,17 +133,11 @@ <h1>Feature Showcase</h1>
 
 <section class="chapter" id="forge-preview">
 <span class="chapter-num">FEATURED 3D</span>
-<h2>Material Forge</h2>
-<p>Procedural textures applied to 3D geometry in real time — PBR lighting, bloom, multiple shapes.</p>
-<a href="demos.html" class="forge-card">
-<div class="forge-previews">
-<img src="docs/media/volumetric-nebula.gif" alt="" class="forge-orb"/>
-<img src="docs/media/dark-ritual-portal.gif" alt="" class="forge-orb"/>
-<img src="docs/media/black-hole.gif" alt="" class="forge-orb"/>
-<img src="docs/media/warp-tunnel.gif" alt="" class="forge-orb"/>
+<h2>Material Forge — Live Multi-Shape Preview</h2>
+<p>A live 3D window showing multiple geometries spinning with procedural materials, bloom, and PBR lighting. This is the same scene as the full Material Forge page, embedded here for quick access.</p>
+<div class="forge-frame">
+<iframe title="Material Forge" src="demos.html?embed=1"></iframe>
 </div>
-<span class="forge-cta">Open Material Forge &rarr;</span>
-</a>
 </section>
 <div class="arrow">&#x25BC;</div>