Homepage: fullscreen editor overlay HTML

Author: pepc84

index.html

@@ -188,12 +188,23 @@ <h1 style="font-family:'Space Grotesk',sans-serif;font-size:2rem;font-weight:600
           <a class="hero-link" href="/reference">Reference</a>
           <a class="hero-btn-download" href="/downloads">Download</a>
         </div>
-        <div id="hero-editor-panel" style="border:1px solid #e0e0e0;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.06);max-height:0;opacity:0;transition:max-height 0.4s ease,opacity 0.3s ease;">
-          <div style="background:#f5f5f5;border-bottom:1px solid #e0e0e0;padding:6px 12px;display:flex;align-items:center;gap:8px;">
-            <span style="font-family:monospace;font-size:11px;color:#888;flex:1;">sketch.cpp</span>
-            <button id="hero-run-btn" style="background:#e8b400;color:#111;border:none;padding:4px 14px;border-radius:4px;font-size:12px;font-weight:700;cursor:pointer;">&#9654; Run</button>
+        <textarea id="hero-editor" style="display:none;"></textarea>
+
+        <!-- Fullscreen editor overlay -->
+        <div id="hero-editor-overlay" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#fff;z-index:1000;flex-direction:column;">
+          <div style="background:#f5f5f5;border-bottom:1px solid #e0e0e0;padding:8px 16px;display:flex;align-items:center;gap:10px;flex-shrink:0;">
+            <span style="font-family:monospace;font-size:12px;color:#888;flex:1;">sketch.cpp</span>
+            <button id="hero-run-btn" style="background:#e8b400;color:#111;border:none;padding:5px 18px;border-radius:4px;font-size:13px;font-weight:700;cursor:pointer;">&#9654; Run</button>
+            <button onclick="toggleHeroEditor()" style="background:none;border:1px solid #e0e0e0;color:#555;padding:5px 14px;border-radius:4px;font-size:12px;cursor:pointer;">&#10005; Close</button>
+          </div>
+          <div style="display:flex;flex:1;overflow:hidden;">
+            <div id="hero-cm-wrap" style="flex:1;overflow:auto;border-right:1px solid #e0e0e0;"></div>
+            <div id="hero-preview-overlay" style="width:50%;position:relative;background:#000;">
+              <iframe sandbox="allow-scripts allow-same-origin"
+                style="position:absolute;top:0;left:0;width:100%;height:100%;border:none;"
+                src="/assets/logo_sketch.html"></iframe>
+            </div>
           </div>
-          <div style="overflow-x:auto;"><textarea id="hero-editor"></textarea></div>
         </div>
         <p style="font-size:0.8rem;color:#aaa;">Independently developed by Jose Gonzalez Llamas</p>
       </div>