|
|
| |
| class VibePlayer extends HTMLElement { |
| connectedCallback() { |
| this.attachShadow({ mode: 'open' }); |
| this.shadowRoot.innerHTML = ` |
| <style> |
| .player-container { |
| background: #f8fafc; |
| padding: 2rem; |
| border-radius: 12px; |
| max-width: 400px; |
| margin: 2rem auto; |
| } |
| .frequency-slider { |
| width: 100%; |
| margin: 1rem 0; |
| } |
| </style> |
| <div class="player-container"> |
| <h3>Vibe Generator</h3> |
| <input type="range" min="20" max="2000" value="432" class="frequency-slider"> |
| <p>Frequenz: <span class="frequency-value">432</span> Hz</p> |
| </div> |
| `; |
| |
| const slider = this.shadowRoot.querySelector('.frequency-slider'); |
| const valueDisplay = this.shadowRoot.querySelector('.frequency-value'); |
| |
| slider.addEventListener('input', () => { |
| valueDisplay.textContent = slider.value; |
| |
| }); |
| } |
| } |
| customElements.define('vibe-player', VibePlayer); |
|
|
| |
| document.addEventListener('DOMContentLoaded', () => { |
| const sections = document.querySelectorAll('section'); |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.classList.add('fade-in'); |
| } |
| }); |
| }, { |
| threshold: 0.1 |
| }); |
|
|
| sections.forEach(section => { |
| observer.observe(section); |
| }); |
|
|
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function(e) { |
| e.preventDefault(); |
| const target = document.querySelector(this.getAttribute('href')); |
| if (target) { |
| target.scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| } |
| }); |
| }); |
| }); |
|
|
| |
| document.querySelectorAll('form').forEach(form => { |
| form.addEventListener('submit', (e) => { |
| e.preventDefault(); |
| const email = form.querySelector('input[type="email"]').value; |
| if (email && email.includes('@')) { |
| alert('Danke für deine Anmeldung! Wir melden uns bald bei dir.'); |
| form.reset(); |
| } else { |
| alert('Bitte gib eine gültige E-Mail-Adresse ein.'); |
| } |
| }); |
| }); |
