From 796b9b6a9667e064a991b19c121151149c6c08f4 Mon Sep 17 00:00:00 2001
From: "Martin Rattensberger (aider)" <martin@rattensberger.com>
Date: Thu, 10 Oct 2024 15:14:17 +0200
Subject: [PATCH] feat: Implement dark theme with expandable consultant details
 and animations

---
 index.html | 21 +++++++++++++++++++++
 styles.css | 39 +++++++++++++++++++++++++++++++++++----
 2 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 21a6e19..5c06d7b 100644
--- a/index.html
+++ b/index.html
@@ -14,6 +14,15 @@
         <section class="consultant">
             <h2>Consultant 1</h2>
             <p>Experte für maschinelles Lernen und Datenanalyse.</p>
+            <div class="consultant-details">
+                <p>Details zu Consultant 1...</p>
+            </div>
+            <div class="consultant-details">
+                <p>Details zu Consultant 2...</p>
+            </div>
+            <div class="consultant-details">
+                <p>Details zu Consultant 3...</p>
+            </div>
         </section>
         <section class="consultant">
             <h2>Consultant 2</h2>
@@ -27,5 +36,17 @@
     <footer>
         <p>&copy; 2024 AI Consultants</p>
     </footer>
+<script>
+    document.querySelectorAll('.consultant').forEach(item => {
+        item.addEventListener('click', event => {
+            document.querySelectorAll('.consultant').forEach(c => {
+                c.classList.remove('active');
+                c.querySelector('.consultant-details').style.display = 'none';
+            });
+            item.classList.add('active');
+            item.querySelector('.consultant-details').style.display = 'block';
+        });
+    });
+</script>
 </body>
 </html>
diff --git a/styles.css b/styles.css
index 836ad70..562c156 100644
--- a/styles.css
+++ b/styles.css
@@ -1,7 +1,7 @@
 body {
     font-family: Arial, sans-serif;
-    background-color: #fff;
-    color: #000;
+    background-color: #000;
+    color: #fff;
     margin: 0;
     padding: 0;
 }
@@ -15,10 +15,41 @@ header, footer {
 
 main {
     padding: 2em;
+    display: flex;
+    justify-content: space-around;
 }
 
 .consultant {
-    border: 1px solid #000;
-    margin: 1em 0;
+    border: 1px solid #fff;
+    margin: 1em;
     padding: 1em;
+    width: 30%;
+    cursor: pointer;
+    transition: opacity 0.3s ease;
+}
+
+.consultant:hover {
+    opacity: 0.7;
+}
+
+.consultant.active {
+    opacity: 1;
+}
+
+.consultant-details {
+    display: none;
+    background-color: #111;
+    padding: 1em;
+    margin-top: 1em;
+    width: 80%;
+    animation: expand 0.5s ease-out forwards;
+}
+
+@keyframes expand {
+    from {
+        max-height: 0;
+    }
+    to {
+        max-height: 500px;
+    }
 }