asd

Profice WebSite/index.html

@@ -181,6 +181,18 @@
                     <p>Rufen Sie jetzt an und erleben Sie, wie unsere KI Ihr Anliegen aufnimmt und verarbeitet.</p>
                     <a href="tel:+49123456789" class="demo-btn" id="demoPhoneBtn">Jetzt anrufen</a>
                     <span class="demo-note">Kostenlos · Keine Wartezeit · 24/7</span>
+                    
+                    <!-- Sound Visualization Animation -->
+                    <div class="sound-visualization" id="soundVisualization">
+                        <div class="sound-bar"></div>
+                        <div class="sound-bar"></div>
+                        <div class="sound-bar"></div>
+                        <div class="sound-bar"></div>
+                        <div class="sound-bar"></div>
+                        <div class="sound-bar"></div>
+                        <div class="sound-bar"></div>
+                        <div class="sound-bar"></div>
+                    </div>
                 </div>
 
                 <!-- KI Chat Widget -->

Profice WebSite/scripts/script.js

@@ -1,13 +1,57 @@
 /**
  * Main Script - Profice Website
  * All API calls go through server-side PHP
- * Includes fallback for local file access (no server)
  * 
  * @version 2.1.0
  */
 
 document.addEventListener("DOMContentLoaded", function() {
     
+    // ==========================================
+    // SOUND VISUALIZATION ANIMATION
+    // ==========================================
+    
+    function initSoundVisualization() {
+        const soundVisualization = document.getElementById('soundVisualization');
+        const demoPhoneBtn = document.getElementById('demoPhoneBtn');
+        
+        if (soundVisualization && demoPhoneBtn) {
+            // Start animation on hover
+            demoPhoneBtn.addEventListener('mouseenter', () => {
+                soundVisualization.classList.add('active');
+            });
+            
+            demoPhoneBtn.addEventListener('mouseleave', () => {
+                soundVisualization.classList.remove('active');
+            });
+            
+            // Toggle animation on click/touch
+            demoPhoneBtn.addEventListener('click', (e) => {
+                e.preventDefault();
+                soundVisualization.classList.toggle('active');
+                
+                // Simulate call action after a brief delay
+                setTimeout(() => {
+                    window.location.href = demoPhoneBtn.href;
+                }, 500);
+            });
+            
+            // Touch support for mobile
+            demoPhoneBtn.addEventListener('touchstart', (e) => {
+                e.preventDefault();
+                soundVisualization.classList.add('active');
+            });
+            
+            demoPhoneBtn.addEventListener('touchend', () => {
+                setTimeout(() => {
+                    soundVisualization.classList.remove('active');
+                }, 1000);
+            });
+        }
+    }
+    
+    initSoundVisualization();
+    
     // Use absolute path from site root
     const API_ENDPOINT = '/scripts/add/send.php';
     const isLocalFile = window.location.protocol === 'file:';

Profice WebSite/style/design.css

@@ -1,3 +1,48 @@
+/* Sound Visualization Animation */
+.sound-visualization {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    height: 100px;
+    margin-top: 80px;
+    margin-bottom: 30px;
+    opacity: 1;
+    transition: opacity 0.3s ease;
+}
+
+.sound-visualization.active {
+    opacity: 1;
+}
+
+.sound-bar {
+    width: 10px;
+    background: linear-gradient(to top, var(--accent-orange), var(--accent-teal));
+    border-radius: 5px;
+    animation: soundWave 1.2s ease-in-out infinite;
+    transform-origin: bottom;
+}
+
+.sound-bar:nth-child(1) { animation-delay: 0s; height: 25px; }
+.sound-bar:nth-child(2) { animation-delay: 0.1s; height: 40px; }
+.sound-bar:nth-child(3) { animation-delay: 0.2s; height: 32px; }
+.sound-bar:nth-child(4) { animation-delay: 0.3s; height: 50px; }
+.sound-bar:nth-child(5) { animation-delay: 0.4s; height: 40px; }
+.sound-bar:nth-child(6) { animation-delay: 0.5s; height: 28px; }
+.sound-bar:nth-child(7) { animation-delay: 0.6s; height: 45px; }
+.sound-bar:nth-child(8) { animation-delay: 0.7s; height: 35px; }
+
+@keyframes soundWave {
+    0%, 100% {
+        transform: scaleY(0.3);
+        opacity: 0.7;
+    }
+    50% {
+        transform: scaleY(1);
+        opacity: 1;
+    }
+}
+
 :root {
     --primary-dark: #5a5252;
     --primary-light: #EBEBDE;