Homepage: wire up hero-editor textarea and hero-preview div

Author: pepc84

index.html

@@ -177,37 +177,24 @@
 
   <div class="page-body">
     <div class="main">
-      <div class="left">
-        <pre style="font-family:monospace;font-size:11.5px;color:#555;line-height:1.7;background:#f8f8f8;padding:1.2rem 1.4rem;border-radius:8px;border:1px solid #e0e0e0;overflow:hidden;"><code>enum PartType {
-  HALF_O, PLUS, PLUS_SHADOW
-};
-struct Part {
-  PartType type;
-  float x, y, rot, r, t, s;
-  color col;
-};
-Part parts[] = {
-  {PLUS_SHADOW, 411,340,-0.5f,
-   0,55,170, color(190,145,85)},
-  {HALF_O, 261,344,0,
-   180,70,0, color(255,210,60)},
-  {PLUS, 319,348,-0.5f,
-   0,55,170, color(255,210,60)},
-};
-void setup() { size(600,700); noLoop(); }
-void draw() {
-  background(255);
-  for (auto& p : parts) show(p);
-}</code></pre>
-        <div class="hero-actions" style="margin-top:1rem;">
+      <div class="left" style="display:flex;flex-direction:column;gap:0.75rem;min-width:0;flex:1;">
+        <div style="border:1px solid #e0e0e0;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.06);">
+          <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>
+          </div>
+          <textarea id="hero-editor"></textarea>
+        </div>
+        <div class="hero-actions">
           <a class="hero-link" href="/reference">Reference</a>
           <a class="hero-btn-download" href="/downloads">Download</a>
         </div>
-        <p style="margin-top:1rem;font-size:0.8rem;color:#aaa;">Independently developed by Jose Gonzalez Llamas</p>
+        <p style="font-size:0.8rem;color:#aaa;">Independently developed by Jose Gonzalez Llamas</p>
       </div>
-      <div class="right" style="flex:1;display:flex;align-items:center;justify-content:flex-end;">
-        <div style="width:320px;height:380px;position:relative;overflow:hidden;border-radius:8px;box-shadow:0 4px 24px rgba(0,0,0,0.08);flex-shrink:0;">
-          <iframe sandbox="allow-scripts allow-same-origin"
+      <div class="right" style="display:flex;align-items:center;gap:0.75rem;flex-shrink:0;">
+        <svg width="36" height="36" viewBox="0 0 36 36"><path d="M4 18L28 18M20 10L28 18L20 26" stroke="#e8b400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>
+        <div id="hero-preview" style="width:320px;height:380px;position:relative;overflow:hidden;border-radius:8px;box-shadow:0 4px 24px rgba(0,0,0,0.08);flex-shrink:0;background:#fff;">
+          <iframe id="hero-iframe" sandbox="allow-scripts allow-same-origin"
             style="position:absolute;top:0;left:0;width:600px;height:700px;border:none;transform-origin:top left;transform:scale(0.533);"
             src="/assets/logo_sketch.html"></iframe>
         </div>