Add NeuralNet private messaging MVP

src/main/resources/templates/soziales.html

@@ -1,51 +1,30 @@
 <!DOCTYPE html>
 <html lang="de" data-theme="dark" xmlns:th="http://www.thymeleaf.org">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SysnaptiK Neural Soziales</title>
-    <link rel="stylesheet" href="/css/theme.css?v=3">
-    <script src="/js/theme.js?v=3"></script>
-    <style>
-        .mf-soziales { text-align:center; padding:2.5rem 1.5rem; }
-        .mf-soziales h1 { color:var(--heading); font-size:1.6rem; line-height:1.4; margin-bottom:1rem; }
-        .mf-soziales p { color:var(--text); line-height:1.6; }
-        .mf-time-machine { font-size:3rem; margin:1.6rem 0; filter:drop-shadow(0 0 12px var(--glow-s)); }
-        .mf-small-hint { color:var(--muted); font-size:.86rem; margin-top:1rem; }
-    </style>
+  <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>NeuralNet – SysnaptiK Neural</title>
+  <link rel="stylesheet" href="/css/theme.css?v=3"><link rel="stylesheet" href="/css/neuralnet.css?v=1">
+  <script src="/js/theme.js?v=3"></script><script src="/js/neuralnet.js?v=1" defer></script>
 </head>
 <body>
-
 <div class="mf-theme-float"><button class="mf-theme"></button></div>
-
-<div class="mf-container">
-
-    <div class="mf-page-head">
-        <a th:href="@{/dashboard}" class="mf-back">⟵ Zurück zum Dashboard</a>
-    </div>
-
-    <nav th:replace="~{fragments/layout :: profileTabs('soziales')}"></nav>
-
-    <div class="mf-panel accent mf-soziales">
-        <h1>„Straßen? Wo wir hingehen, brauchen wir keine Straßen!“ 🚀</h1>
-        <p>Das soziale Netzwerk für SysnaptiK Neural-User befindet sich noch in Entwicklung.<br>
-           Bald kannst du dich hier mit anderen Neural-Mitgliedern verbinden!</p>
-        <div class="mf-time-machine">
-            🚗💨💥
-        </div>
-        <p class="mf-small-hint">Zurück in die Zukunft... und bald auch ins SysnaptiK Neural-Netzwerk!</p>
-    </div>
-
-</div>
-
-<footer class="mf-footer">
-  <a href="#">Support</a>
-  <a href="#">Feedback</a>
-  <a href="/nutzungsbedingungen">Nutzungsbedingungen</a>
-  <a href="/richtlinien">Richtlinien</a>
-  <a href="/datenschutz">Datenschutz</a>
-  <a href="/impressum">Impressum</a>
-</footer>
-
-</body>
-</html>
+<main class="mf-container">
+  <div class="mf-page-head"><a th:href="@{/dashboard}" class="mf-back">⟵ Zurück zum Dashboard</a></div>
+  <nav th:replace="~{fragments/layout :: profileTabs('soziales')}"></nav>
+  <section class="nn-head"><span>NEURALNET</span><h1>Private Lernverbindungen</h1><p>Erst eine bestätigte Anfrage, dann ein geschützter Nachrichtenkanal.</p></section>
+  <section id="nnOptIn" class="mf-panel nn-optin" hidden><h2>NeuralNet aktivieren</h2><p>Mit der Aktivierung wirst du für andere Mitglieder auffindbar und kannst Kontaktanfragen senden oder erhalten. Private Nachrichten sind erst nach gegenseitiger Verbindung möglich.</p><button class="mf-btn" data-nn-enable>NeuralNet aktivieren</button></section>
+  <section id="nnApp" class="nn-app" hidden>
+    <aside class="mf-panel nn-sidebar">
+      <form class="nn-request" data-nn-request><label class="mf-label" for="nn-user">Verbindung anfragen</label><div><input class="mf-input" id="nn-user" maxlength="100" placeholder="Benutzername" required><button class="mf-btn" type="submit">Senden</button></div></form>
+      <div class="nn-section"><h2>Offene Anfragen</h2><div data-nn-incoming class="nn-list"></div></div>
+      <div class="nn-section"><h2>Gesendet</h2><div data-nn-outgoing class="nn-list"></div></div>
+      <div class="nn-section"><h2>Verbindungen</h2><div data-nn-connections class="nn-list"></div></div>
+    </aside>
+    <section class="mf-panel nn-chat">
+      <div data-nn-empty class="nn-empty"><strong>Wähle eine Verbindung</strong><span>Private Nachrichten werden erst nach einer angenommenen Anfrage freigeschaltet.</span></div>
+      <div data-nn-conversation hidden><header><div><small>PRIVATE VERBINDUNG</small><h2 data-nn-partner></h2></div></header><div class="nn-messages" data-nn-messages aria-live="polite"></div><form class="nn-compose" data-nn-compose><label class="sr-only" for="nn-message">Nachricht</label><textarea id="nn-message" maxlength="2000" placeholder="Nachricht schreiben …" required></textarea><button class="mf-btn" type="submit">Senden</button></form></div>
+    </section>
+  </section>
+</main>
+<footer class="mf-footer"><a href="#">Support</a><a href="#">Feedback</a><a href="/nutzungsbedingungen">Nutzungsbedingungen</a><a href="/richtlinien">Richtlinien</a><a href="/datenschutz">Datenschutz</a><a href="/impressum">Impressum</a></footer>
+</body></html>