/* Styling für den oberen Link */ .top-link { display: block; text-align: center; margin-bottom: 20px; font-size: 16px; color: #ff0000; /* Rote Schrift */ text-decoration: none; font-weight: bold; transition: color 0.3s; } .top-link:hover { color: #cc0000; /* Dunkleres Rot beim Hover */ } /* Zentrierte Button-Gruppe */ .size-controls { display: flex; justify-content: center; align-items: center; margin-bottom: 20px; gap: 10px; } /* Buttons-Styling */ .size-controls button { padding: 10px 20px; background-color: transparent; /* Transparenter Hintergrund */ color: #ff0000; /* Rote Schrift */ border: 2px solid #ff0000; /* Roter Rahmen */ border-radius: 20px; /* Abgerundeter Rahmen */ cursor: pointer; font-size: 14px; font-weight: bold; text-align: center; transition: background-color 0.3s, color 0.3s, transform 0.2s; } .size-controls button:hover { background-color: #ff0000; /* Roter Hintergrund beim Hover */ color: #fff; /* Weiße Schrift beim Hover */ transform: scale(1.05); /* Leichtes Vergrößern beim Hover */ } /* Container für das IFrame */ .iframe-container { text-align: center; border: 1px solid #ddd; padding: 10px; margin: 0 auto; max-width: 100%; /* Passt sich der Bildschirmbreite an */ } /* Iframe-Styling */ iframe { border: 0; display: block; margin: 0 auto; /* Zentriert das IFrame */ width: 100%; /* Standardbreite */ max-width: 100%; /* Begrenzung auf die Monitorbreite */ height: 600px; /* Standardhöhe */ } Besuche die echte Website // Referenzen zu den Buttons und dem IFrame const iframeContainer = document.getElementById('iframe-container'); const closeButton = document.getElementById('close-button'); const reopenButton = document.getElementById('reopen-button'); const iframe = document.getElementById('reference-iframe'); const desktopButton = document.getElementById('desktop'); const tabletButton = document.getElementById('tablet'); const mobileButton = document.getElementById('mobile'); // Dynamisch maximale Breite des Monitors anpassen und zentrieren function adjustIframe() { iframe.style.margin = '0 auto'; iframe.style.maxWidth = `${window.innerWidth}px`; } // Event Listener für Fenstergrößenänderung window.addEventListener('resize', adjustIframe); // Größe ändern: PC desktopButton.addEventListener('click', function () { iframe.style.width = '100%'; // Volle Breite iframe.style.height = '800px'; // Desktop-Höhe adjustIframe(); }); // Größe ändern: Tablet tabletButton.addEventListener('click', function () { iframe.style.width = '768px'; // Tablet-Breite iframe.style.height = '1024px'; // Tablet-Höhe adjustIframe(); }); // Größe ändern: Mobil mobileButton.addEventListener('click', function () { iframe.style.width = '375px'; // Mobile-Breite iframe.style.height = '667px'; // Mobile-Höhe adjustIframe(); }); // Initiale Anpassung bei Seitenaufruf adjustIframe(); // Zuklappen-Button Funktionalität closeButton.addEventListener('click', function () { iframeContainer.style.display = 'none'; // Versteckt das IFrame closeButton.style.display = 'none'; // Versteckt den Zuklappen-Button reopenButton.style.display = 'block'; // Zeigt den Wiederherstellen-Button }); // Wiederherstellen-Button Funktionalität reopenButton.addEventListener('click', function () { iframeContainer.style.display = 'block'; // Zeigt das IFrame closeButton.style.display = 'block'; // Zeigt den Zuklappen-Button reopenButton.style.display = 'none'; // Versteckt den Wiederherstellen-Button });