Embed

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sprachwahl Widget</title>
    <style>
        /* Widget Container - fest positioniert ganz oben links */
        .language-switcher {
            position: fixed;
            top: 5px;
            left: 20px;
            z-index: 9999;
            background-color: #B8CDE2;
            border-radius: 12px;
            padding: 8px 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            font-family: Arial, sans-serif;
            max-width: 280px;
        }

        /* Scrollbarer Container für Flaggen */
        .flags-container {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding: 4px 0;
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
        }

        .flags-container::-webkit-scrollbar {
            height: 4px;
        }

        .flags-container::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 2px;
        }

        .flags-container::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.5);
            border-radius: 2px;
        }

        .flags-container::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.7);
        }

        /* Einzelne Flaggen-Buttons */
        .flag-button {
            min-width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 2px solid white;
            cursor: pointer;
            transition: all 0.3s ease;
            background-size: cover;
            background-position: center;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
            position: relative;
            overflow: hidden;
        }

        .flag-button:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            border-color: #ffffff;
        }

        .flag-button.active {
            border-color: #4CAF50;
            border-width: 3px;
            box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3);
        }

        /* Tooltip für Sprachnamen */
        .flag-button::after {
            content: attr(data-lang);
            position: absolute;
            bottom: -30px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 11px;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .flag-button:hover::after {
            opacity: 1;
        }

        /* Flaggen-Hintergründe mit SVG-Flaggen */
        .flag-de {
            background: linear-gradient(to bottom, #000 33%, #DD0000 33%, #DD0000 66%, #FFCE00 66%);
        }

        .flag-en {
            background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMjAiIGZpbGw9IiMwMDIzNjgiLz4KPHN0cmlwZSB4MT0iMCIgeTE9IjIiIHgyPSI0MCIgeTI9IjIiIGZpbGw9IiNmZmZmZmYiIGhlaWdodD0iMyIvPgo8c3RyaXBlIHgxPSIwIiB5MT0iNiIgeDI9IjQwIiB5Mj0iNiIgZmlsbD0iI2JmMDAzMCIgaGVpZ2h0PSIzIi8+CjxzdHJpcGUgeDE9IjAiIHkxPSIxMCIgeDI9IjQwIiB5Mj0iMTAiIGZpbGw9IiNmZmZmZmYiIGhlaWdodD0iMyIvPgo8L3N2Zz4K');
            background: 
                repeating-linear-gradient(0deg, #B22234 0px, #B22234 3px, #FFFFFF 3px, #FFFFFF 6px),
                #3C3B6E;
            background-size: 100% 70%, 40% 30%;
            background-position: 0 30%, 0 0;
            background-repeat: repeat-x, no-repeat;
        }

        .flag-ru {
            background: linear-gradient(to bottom, #FFFFFF 33%, #0039A6 33%, #0039A6 66%, #D52B1E 66%);
        }

        .flag-es {
            background: linear-gradient(to bottom, #C60B1E 25%, #FFC400 25%, #FFC400 75%, #C60B1E 75%);
        }

        .flag-ar {
            background: linear-gradient(to bottom, #CE1126 33%, #FFFFFF 33%, #FFFFFF 66%, #000000 66%);
        }

        /* Mobile Optimierung */
        @media (max-width: 768px) {
            .language-switcher {
                top: 5px;
                left: 10px;
                max-width: 250px;
                padding: 6px 10px;
            }

            .flag-button {
                min-width: 35px;
                height: 35px;
            }

            .flags-container {
                gap: 6px;
            }
        }

        /* Loading Animation */
        .loading {
            opacity: 0.6;
            pointer-events: none;
        }

        /* Status Indicator */
        .status-indicator {
            position: absolute;
            top: -5px;
            right: -5px;
            width: 12px;
            height: 12px;
            background: #4CAF50;
            border-radius: 50%;
            border: 2px solid white;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .flag-button.active .status-indicator {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="language-switcher" id="languageSwitcher">
        <div class="flags-container" id="flagsContainer">
            <button class="flag-button flag-international" data-lang="Translate" data-code="translate" onclick="activateTranslate()" id="translateButton">
                <span class="translate-icon">🌐</span>
                <div class="status-indicator"></div>
            </button>
        </div>
    </div>

    <script>
        // Aktuelle Sprache verfolgen
        let currentLanguage = 'de';
        let isTranslating = false;

        // Prüfen ob bereits auf übersetzter Seite
        function isOnTranslatedPage() {
            return window.location.href.includes('translate.goog') || 
                   window.location.href.includes('translate.google.com') ||
                   new URLSearchParams(window.location.search).get('_x_tr_tl');
        }

        // Google Translate initialisieren
        function googleTranslateElementInit() {
            new google.translate.TranslateElement({
                pageLanguage: 'de',
                includedLanguages: 'de,en,ru,es,ar',
                layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
                autoDisplay: false,
                multilanguagePage: true
            }, 'google_translate_element');
        }

        // Verstecktes Google Translate Element erstellen
        function initializeTranslate() {
            if (!document.getElementById('google_translate_element')) {
                const translateDiv = document.createElement('div');
                translateDiv.id = 'google_translate_element';
                translateDiv.style.display = 'none';
                document.body.appendChild(translateDiv);

                // Google Translate Script laden
                const script = document.createElement('script');
                script.src = 'https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
                script.async = true;
                document.head.appendChild(script);
            }
        }

        // Übersetzung aktivieren
        function activateTranslate() {
            // Prüfen ob bereits auf übersetzter Seite
            if (isOnTranslatedPage()) {
                console.log('Bereits auf übersetzter Seite - Klick ignoriert');
                return false;
            }

            // Verhindere Mehrfachklicks
            if (isTranslating) {
                console.log('Übersetzung läuft bereits - Klick ignoriert');
                return false;
            }

            // Sofort sperren
            isTranslating = true;
            
            const switcher = document.getElementById('languageSwitcher');
            const button = document.getElementById('translateButton');
            
            // Button komplett deaktivieren
            button.onclick = null;
            button.disabled = true;
            button.style.pointerEvents = 'none';
            button.style.opacity = '0.5';
            button.style.cursor = 'not-allowed';
            
            // Loading-Zustand
            switcher.classList.add('loading');
            button.classList.add('active');

            // URL aufbauen und weiterleiten
            const currentUrl = window.location.href;
            const translateUrl = `https://translate.google.com/translate?sl=de&tl=en&u=${encodeURIComponent(currentUrl)}`;
            
            console.log('Weiterleitung zu Google Translate...');
            window.location.href = translateUrl;
            
            return false;
        }

        // Aktuelle Sprache aus URL erkennen
        function detectCurrentLanguage() {
            const urlParams = new URLSearchParams(window.location.search);
            const hash = window.location.hash;
            
            // Google Translate Parameter prüfen
            if (urlParams.get('_x_tr_tl') || hash.includes('translate.google.com') || window.location.href.includes('translate.google.com')) {
                // Button als aktiv markieren wenn auf übersetzter Seite
                const button = document.querySelector('.flag-international');
                if (button) {
                    button.classList.add('active');
                }
            }
        }

        // Touch-Scrolling für Mobile optimieren
        function initializeMobileScroll() {
            const container = document.getElementById('flagsContainer');
            let isScrolling = false;
            let startX = 0;
            let scrollLeft = 0;

            container.addEventListener('touchstart', (e) => {
                isScrolling = true;
                startX = e.touches[0].pageX - container.offsetLeft;
                scrollLeft = container.scrollLeft;
            });

            container.addEventListener('touchmove', (e) => {
                if (!isScrolling) return;
                e.preventDefault();
                const x = e.touches[0].pageX - container.offsetLeft;
                const walk = (x - startX) * 2;
                container.scrollLeft = scrollLeft - walk;
            });

            container.addEventListener('touchend', () => {
                isScrolling = false;
            });
        }

        // Widget initialisieren
        document.addEventListener('DOMContentLoaded', function() {
            // Prüfen ob bereits auf übersetzter Seite
            if (isOnTranslatedPage()) {
                console.log('Auf übersetzter Seite - Button wird deaktiviert');
                const button = document.getElementById('translateButton');
                if (button) {
                    button.disabled = true;
                    button.style.pointerEvents = 'none';
                    button.style.opacity = '0.5';
                    button.onclick = null;
                    button.classList.add('active');
                }
            }
            
            detectCurrentLanguage();
            initializeMobileScroll();
            
            // Smooth Scrolling für Flaggen-Container
            const container = document.getElementById('flagsContainer');
            if (container) {
                container.style.scrollBehavior = 'smooth';
            }
            
            console.log('Sprachwahl-Widget erfolgreich geladen');
        });

        // Resize Handler für Mobile
        window.addEventListener('resize', function() {
            const switcher = document.getElementById('languageSwitcher');
            if (window.innerWidth <= 768) {
                switcher.style.maxWidth = '250px';
            } else {
                switcher.style.maxWidth = '280px';
            }
        });
    </script>
</body>
</html>

Banner

Rechtliche Angaben zum Art Hotel House One in Baden-Baden gemäß § 5 TMG. Verantwortlich für Inhalt, Anschrift und Kontaktmöglichkeiten im Überblick.

Impressum | Art Hotel House One Baden-Baden

Text

<p>Angaben gemäß § 5 TMG</p>
<p>Balak Gastro UG (haftungsbeschränkt)</p>
<p>Art Hotel House One</p>
<p>Baldreitstraße 1</p>
<p>76530 Baden-Baden</p>
<p>Deutschland</p>
<p>Telefon: +49 (0) 1520 5411111</p>
<p>E-Mail: info@arthotel-ho.com</p>
<p>Web: www.arthotel-ho.com</p>
<p>Vertreten durch:</p>
<p>Rolan Balak</p>
<p>Umsatzsteuer-ID:</p>
<p>Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz:</p>
<p>DE354009935</p>
<p>Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV:</p>
<p>Rolan Balak</p>
<p>Baldreitstraße 1</p>
<p>76530 Baden-Baden</p>
<p>Haftungsausschluss:</p>
<p>Trotz sorgfältiger inhaltlicher Kontrolle übernehmen wir keine Haftung für die Inhalte externer Links. Für den Inhalt der verlinkten Seiten sind ausschließlich deren Betreiber verantwortlich.</p>
<p>Online-Streitbeilegung gemäß Art. 14 Abs. 1 ODR-VO:</p>
<p>Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit:</p>
<p><a href="https://ec.europa.eu/consumers/odr">https://ec.europa.eu/consumers/odr</a></p>
<p>Webdesign: <a href="http://www.evotize.com" target="_blank">Evotize</a></p>
<p> </p>
<p> </p>