Differences

This shows you the differences between two versions of the page.

--- handleiding_nieuw:sub_aichat [2025/12/27 16:57] – support
+++ handleiding_nieuw:sub_aichat [2025/12/29 11:45] (current) – external edit 127.0.0.1
@@ Line 40: / Line 40: @@
     <!-- AANMELDBLOK -->
     <div style="margin:1.2em 0 0; background:#fff; border:1px solid #e6e6e6; padding:1em 1.1em; border-radius:10px;">
       <h3 style="margin:0 0 0.4em 0;">Op de hoogte blijven?</h3>
       <p style="margin:0 0 0.9em 0;">
@@ Line 45: / Line 46: @@
       </p>
-      <form method="post" action="">
+      <!-- Statusmeldingen -->
+      <div id="ai_msg_ok"
+           style="display:none; margin:0 0 1em 0; background:#f0f9f8; border:1px solid #b7e3df; padding:0.9em 1em; border-radius:10px;">
+        <strong>Dank je wel!</strong><br>
+        We hebben je gegevens ontvangen en houden je op de hoogte zodra er nieuws is.
+      </div>
+      <div id="ai_msg_err"
+           style="display:none; margin:0 0 1em 0; background:#fff5f5; border:1px solid #f3b7b7; padding:0.9em 1em; border-radius:10px;">
+        <strong>Oeps.</strong><br>
+        <span id="ai_err_text"></span>
+      </div>
+      <!-- Formulier (nu werkend via PHP endpoint) -->
+      <form method="post" action="/wiki/ai_signup.php">
         <div style="display:flex; gap:12px; flex-wrap:wrap;">
           <div style="flex:1; min-width:220px;">
             <label for="ai_name" style="display:block; font-weight:600; margin-bottom:0.3em;">Naam</label>
-            <input id="ai_name" name="ai_name" type="text"
+            <input id="ai_name" name="ai_name" type="text" required
-                   placeholder="Bijv. Pascal Sijstermans"
+                   placeholder="Bijv. Jan Smit"
                    style="width:100%; padding:10px 12px; border:1px solid #d7d7d7; border-radius:8px; font-size:1em;">
           </div>
@@ Line 56: / Line 71: @@
           <div style="flex:1; min-width:240px;">
             <label for="ai_email" style="display:block; font-weight:600; margin-bottom:0.3em;">E-mailadres</label>
-            <input id="ai_email" name="ai_email" type="email"
+            <input id="ai_email" name="ai_email" type="email" required
                    placeholder="Bijv. naam@organisatie.nl"
                    style="width:100%; padding:10px 12px; border:1px solid #d7d7d7; border-radius:8px; font-size:1em;">
@@ Line 115: / Line 130: @@
         <div style="position:absolute; right:18px; top:22px; width:36%; height:36%; border-radius:12px; border:1px solid #e6e6e6; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,0.06); padding:12px;">
           <div style="font-weight:800; margin-bottom:6px;">AI-agent</div>
+          <div style="font-size:0.95em; color:#333; line-height:1.35;">
+            “Waarom daalt het saldo in jaar 4?”<br>
+            “Vergelijk scenario A en B.”<br>
+            “Welke kostenpost drukt het meest?”
+          </div>
+        </div>
+        <!-- Inzichten-tegel -->
+        <div style="position:absolute; left:18px; bottom:18px; width:88%; height:44%; border-radius:12px; border:1px solid #e6e6e6; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,0.06); padding:12px;">
+          <div style="font-weight:800; margin-bottom:8px;">Nieuwe inzichten &amp; visualisaties</div>
+          <div style="display:flex; gap:14px; flex-wrap:wrap;">
+            <div style="flex:1; min-width:150px; border:1px solid #efefef; border-radius:10px; padding:10px; background:#fbfdfd;">
+              <div style="font-weight:700; margin-bottom:4px;">Uitschieter</div>
+              <div style="font-size:0.95em; color:#444;">Kosten “Bouw- en woonrijp” piekt in jaar 2.</div>
+            </div>
+            <div style="flex:1; min-width:150px; border:1px solid #efefef; border-radius:10px; padding:10px; background:#fbfdfd;">
+              <div style="font-weight:700; margin-bottom:4px;">Vergelijking</div>
+              <div style="font-size:0.95em; color:#444;">Scenario B verlaagt voorfinanciering met 18%.</div>
+            </div>
+            <div style="flex:1; min-width:150px; border:1px solid #efefef; border-radius:10px; padding:10px; background:#fbfdfd;">
+              <div style="font-weight:700; margin-bottom:4px;">Visualisatie</div>
+              <div style="font-size:0.95em; color:#444;">Voorstel: waterfall + cumulatieve cashflow.</div>
+            </div>
+          </div>
+          <div style="margin-top:10px; font-size:0.9em; color:#666;">
+            Interactief, toetsbaar, en direct gekoppeld aan jouw projectdata.
+          </div>
+        </div>
+      </div>
+      <div style="font-size:0.92em; color:#666; margin-top:10px;">
+        Deze schets is een conceptvisualisatie van de richting: dashboards als basis, AI-agent als gesprekspartner, inzichten als output.
+      </div>
+    </div>
+  </div>
+</div>
+<!-- Status-script: leest ?ok=1 of ?err=... en toont melding -->
+<script>
+(function(){
+  var p = new URLSearchParams(window.location.search);
+  if (p.get('ok') === '1') {
+    var ok = document.getElementById('ai_msg_ok');
+    if (ok) ok.style.display = 'block';
+  }
+  var err = p.get('err');
+  if (err) {
+    var box = document.getElementById('ai_msg_err');
+    var txt = document.getElementById('ai_err_text');
+    if (txt) txt.textContent = err;
+    if (box) box.style.display = 'block';
+  }
+})();
+</script>
+</html>