Differences

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

--- handleiding_nieuw:sub_aichat [2025/04/11 09:30] – support
+++ handleiding_nieuw:sub_aichat [2025/12/29 11:45] (current) – external edit 127.0.0.1
@@ Line 1: / Line 1: @@
+====== AI-chat in Sumsonite ======
 <html>
-<incorrecttag>
-<div style="background: red; color: white; padding: 1em;">Binnenkort AI-chat</div>
-</html>
+<div style="display:flex; align-items:stretch; gap:40px; flex-wrap:wrap;">
+  <!-- TEKSTKOLOM -->
+  <div style="flex:1; font-size:110%; line-height:1.7; min-width:320px;">
+    <p>
+      Je dashboards zitten vol projectdata: kasstromen, kengetallen, scenario’s, kosten- en opbrengstopbouw,
+      en allerlei verbanden die je niet altijd direct ziet.
+      De volgende stap is dat je die data niet alleen bekijkt, maar er ook <strong>in gesprek</strong> mee kunt.
+    </p>
+    <p>
+      Daarom gaan we de komende tijd werken aan een nieuwe ontwikkeling:
+      we maken de <strong>dashboarddata geschikt voor een AI-agent</strong> die je helpt om inzichten te vinden,
+      analyses te maken en nieuwe visualisaties te verkennen.
+      Alsof je met een ervaren <strong>data-analist</strong> aan tafel zit die jouw project kent,
+      jouw vragen begrijpt en je stap voor stap meeneemt.
+    </p>
+    <div style="margin:1em 0; background:#f7f7f7; border:1px solid #e2e2e2; padding:0.9em 1em; border-radius:8px;">
+      <strong>Wat kun je straks doen?</strong>
+      <ul style="margin:0.6em 0 0 1.2em;">
+        <li><strong>Vragen stellen in gewone taal</strong> over je project (bijv. “waardoor ontstaat de dip in jaar 3?”).</li>
+        <li><strong>Nieuwe inzichten laten opsporen</strong> (trends, uitschieters, scenario-vergelijkingen, gevoeligheden).</li>
+        <li><strong>Visualisaties laten voorstellen</strong> die passen bij jouw vraag en jouw type besluitvorming.</li>
+        <li><strong>Toelichting en onderbouwing</strong> krijgen: wat zie je, wat betekent het, en welke aannames spelen mee.</li>
+      </ul>
+    </div>
+    <p>
+      Dit bouwen we zorgvuldig door, zodat de AI-agent aansluit op de logica van Sumsonite en je dashboards
+      (en dus ook echt bruikbare, toetsbare antwoorden geeft).
+      <strong>We houden je op de hoogte</strong> van de voortgang.
+    </p>
+    <!-- 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;">
+        Laat je naam en e-mailadres achter. Dan sturen we je een bericht zodra we een eerste versie kunnen laten zien.
+      </p>
+      <!-- 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" required
+                   placeholder="Bijv. Jan Smit"
+                   style="width:100%; padding:10px 12px; border:1px solid #d7d7d7; border-radius:8px; font-size:1em;">
+          </div>
+          <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" required
+                   placeholder="Bijv. naam@organisatie.nl"
+                   style="width:100%; padding:10px 12px; border:1px solid #d7d7d7; border-radius:8px; font-size:1em;">
+          </div>
+        </div>
+        <div style="margin-top:12px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;">
+          <button type="submit"
+                  style="background:#2f7d78; color:#fff; border:0; padding:10px 16px; border-radius:8px; cursor:pointer; font-weight:700;">
+            Houd mij op de hoogte
+          </button>
+          <span style="font-size:0.95em; color:#666;">
+            Je gegevens worden alleen gebruikt voor updates over deze ontwikkeling.
+          </span>
+        </div>
+      </form>
+    </div>
+    <p style="margin-top:1em; border-left:4px solid #5bc0de; padding-left:10px;">
+      ℹ️ <strong>Status:</strong> in ontwikkeling. De eerste versie richt zich op het analyseren en duiden van dashboarddata.
+      Daarna breiden we uit met het voorstellen van visualisaties en het interactief verkennen van scenario’s.
+    </p>
+  </div>
+  <!-- VISUELE KOLOM -->
+  <div style="flex:1; min-width:320px; display:flex; align-items:center; justify-content:center;">
+    <div style="width:100%; max-width:520px; border:1px solid #e6e6e6; border-radius:12px; padding:16px; background:#fff;">
+      <div style="font-weight:800; font-size:1.05em; margin-bottom:10px;">
+        Visualisatie: van dashboard naar gesprek
+      </div>
+      <!-- “coole visualisatie” zonder externe afhankelijkheden -->
+      <div style="position:relative; height:360px; border-radius:12px; border:1px solid #efefef; overflow:hidden; background:linear-gradient(180deg,#ffffff 0%, #f7fbfb 100%);">
+        <!-- Dashboard-tegel -->
+        <div style="position:absolute; left:18px; top:18px; width:52%; height:42%; 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:700; margin-bottom:6px;">Dashboards</div>
+          <div style="display:flex; gap:10px; align-items:flex-end; height:72%; padding-top:8px;">
+            <div style="width:10%; height:35%; background:#cfe9e7; border-radius:6px;"></div>
+            <div style="width:10%; height:55%; background:#bfe2df; border-radius:6px;"></div>
+            <div style="width:10%; height:45%; background:#a9d9d5; border-radius:6px;"></div>
+            <div style="width:10%; height:70%; background:#8fd0cb; border-radius:6px;"></div>
+            <div style="width:10%; height:50%; background:#a9d9d5; border-radius:6px;"></div>
+            <div style="width:10%; height:62%; background:#bfe2df; border-radius:6px;"></div>
+            <div style="width:10%; height:40%; background:#cfe9e7; border-radius:6px;"></div>
+          </div>
+          <div style="margin-top:8px; font-size:0.9em; color:#666;">Kasstromen • Kengetallen • Scenario’s</div>
+        </div>
+        <!-- Pijl -->
+        <div style="position:absolute; left:56%; top:31%; transform:translateY(-50%); font-size:22px; color:#2f7d78;">
+          ➜
+        </div>
+        <!-- AI-agent-tegel -->
+        <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>