<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title id="pageTitle">BTS-EU | Tauchsport-Großhandel weltweit</title>
<!-- Lade Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Konfiguriere Tailwind für eine dunkle Meeres-Palette -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'deep-sea': '#0A192F', // Dunkles Blau/Fast Schwarz
'ocean-blue': '#1F7094', // Mittleres Blau
'aqua-light': '#6EE7F9', // Helles Türkis für Akzente
'gray-light': '#F3F4F6',
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
}
}
}
</script>
<style>
/* Setze die Standard-Schriftart und Hintergrundfarbe */
body {
font-family: 'Inter', sans-serif;
background-color: #F3F4F6;
}
/* Definiere einen sanften Übergang für Buttons */
.cta-button {
transition: all 0.3s ease;
}
</style>
</head>
<body class="text-deep-sea">
<!-- Header / Navigation -->
<header class="bg-deep-sea shadow-lg">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
<!-- Logo Sektion (Ersetzt durch SVG und Text) -->
<div class="flex items-center space-x-2">
<!-- Inline SVG of a Diving Icon (Mask and Snorkel) -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-aqua-light" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 2a10 10 0 0 0-4.3 1.13"></path>
<path d="M12 2a10 10 0 0 1 4.3 1.13"></path>
<path d="M12 12v6"></path>
<path d="M10 16h4"></path>
</svg>
<h1 class="text-2xl font-bold text-aqua-light" id="headerTitle">
BTS-EU
</h1>
<span class="text-gray-light font-light text-base ml-1 hidden sm:inline-block" id="headerSubtitle">Wholesale Diving Products</span>
</div>
<div class="flex items-center space-x-4">
<!-- Sprachwechsler -->
<button id="langToggle" class="text-sm font-semibold px-3 py-1 rounded-full text-deep-sea bg-aqua-light hover:bg-white transition cta-button">
EN
</button>
<!-- Shop Link -->
<a href="https://shop.bts-eu.com" target="_blank" class="text-gray-light hover:text-aqua-light transition duration-200 font-medium cta-button" id="navShop">
Zum Shop <span class="hidden sm:inline-block">→</span>
</a>
</div>
</div>
</header>
<!-- 1. Hero Sektion -->
<section class="relative h-[60vh] md:h-[70vh] flex items-center justify-center bg-cover bg-center"
style="background-image: url('https://placehold.co/1920x800/1F7094/F3F4F6?text=Professioneller%20Tauchsport%20Grosshandel%20|%20BTS-EU');">
<div class="absolute inset-0 bg-deep-sea bg-opacity-70"></div>
<div class="z-10 text-center px-4 max-w-4xl">
<h2 class="text-4xl sm:text-5xl md:text-6xl font-extrabold text-white mb-4 leading-tight" id="heroTitle">
Ihr Partner für Tauchsport-Großhandel
</h2>
<p class="text-xl sm:text-2xl text-gray-light mb-8 font-light" id="heroSubtitle">
Hochwertige Tauchprodukte. Weltweiter Vertrieb exklusiv an registrierte Händler.
</p>
<a href="https://shop.bts-eu.com" target="_blank" class="inline-block px-10 py-4 bg-aqua-light text-deep-sea font-bold text-lg rounded-xl shadow-xl hover:bg-white hover:scale-105 cta-button uppercase tracking-wider" id="heroButton">
Zum Händler-Shop (shop.bts-eu.com)
</a>
</div>
</section>
<!-- 2. Kernkompetenzen / USP -->
<section class="py-16 bg-gray-light">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h3 class="text-3xl font-bold text-center mb-12 text-deep-sea" id="uspTitle">Warum BTS-EU?</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Feature 1: Umfangreiches Sortiment -->
<div class="bg-white p-6 rounded-xl shadow-lg border-t-4 border-ocean-blue">
<div class="text-4xl text-ocean-blue mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
</svg>
</div>
<h4 class="text-xl font-semibold mb-3 text-deep-sea" id="feature1Title">Umfangreiches Sortiment</h4>
<p class="text-gray-600" id="feature1Text">Wir bieten eine breite Palette an Tauchausrüstung und Zubehör von führenden Marken. Alles, was Ihre Kunden benötigen.</p>
</div>
<!-- Feature 2: Weltweiter Vertrieb -->
<div class="bg-white p-6 rounded-xl shadow-lg border-t-4 border-ocean-blue">
<div class="text-4xl text-ocean-blue mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.929m-11 3.284A4.896 4.896 0 015 16m0 0v-2.5A2.5 2.5 0 017.5 11H18a2 2 0 002-2V7.5A2.5 2.5 0 0017.5 5H9.422a1 1 0 00-.814.436l-.867 1.14c-.815 1.076-.864 2.164-.239 3.249m2.001.695v9m-2-3H10" />
</svg>
</div>
<h4 class="text-xl font-semibold mb-3 text-deep-sea" id="feature2Title">Weltweiter Vertrieb</h4>
<p class="text-gray-600" id="feature2Text">Wir beliefern registrierte Händler zuverlässig in alle Teile der Welt. Schnelle Logistik ist unsere Priorität.</p>
</div>
<!-- Feature 3: Exklusiver Händler-Fokus -->
<div class="bg-white p-6 rounded-xl shadow-lg border-t-4 border-ocean-blue">
<div class="text-4xl text-ocean-blue mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8c1.657 0 3 .895 3 2s-1.343 2-3 2v2m0 0c-1.657 0-3 .895-3 2s1.343 2 3 2m-3 0h6m-9 0H3M21 21h-3M3 3h3m12 0h-3" />
</svg>
</div>
<h4 class="text-xl font-semibold mb-3 text-deep-sea" id="feature3Title">Händler-Vorteile</h4>
<p class="text-gray-600" id="feature3Text">Als Fachhändler profitieren Sie von exklusiven Großhandelspreisen und persönlichem Support.</p>
</div>
</div>
</div>
</section>
<!-- 3. CTA Sektion für Händler-Zugang -->
<section class="py-20 bg-deep-sea text-center">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<h3 class="text-3xl sm:text-4xl font-bold text-white mb-4" id="ctaTitle">
Exklusiver Zugang für registrierte Partner
</h3>
<p class="text-lg text-gray-300 mb-8" id="ctaSubtitle">
Auf unserem Shop-Portal finden Sie den vollständigen, aktuellen Produktkatalog, Preise und die Möglichkeit zur direkten Bestellung.
</p>
<div class="space-y-4 sm:space-y-0 sm:space-x-6">
<!-- Primärer CTA zum Shop -->
<a href="https://shop.bts-eu.com" target="_blank" class="inline-block px-8 py-3 bg-aqua-light text-deep-sea font-bold text-lg rounded-xl shadow-xl hover:bg-white hover:scale-105 cta-button transition duration-300" id="ctaButton1">
Direkt zum Login/Shop
</a>
<!-- Sekundärer CTA zur Registrierung (Placeholder) -->
<a href="#" class="inline-block px-8 py-3 bg-transparent text-white border-2 border-white font-medium text-lg rounded-xl shadow-xl hover:bg-ocean-blue hover:border-ocean-blue hover:scale-105 cta-button transition duration-300" id="ctaButton2" onclick="customAlert(content[currentLang].alertRegistration)">
Händler-Registrierung anfragen
</a>
</div>
</div>
</section>
<!-- 4. Footer -->
<footer class="bg-deep-sea border-t border-ocean-blue text-gray-400 py-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-sm md:text-base">
<div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
<p id="footerCopy" class="text-center md:text-left">© 2024 BTS-EU Tauchsport-Großhandel. Alle Rechte vorbehalten.</p>
<div class="flex space-x-6">
<a href="https://shop.bts-eu.com" target="_blank" class="hover:text-aqua-light transition duration-200" id="footerLinkShop">Shop-Plattform</a>
<a href="#" class="hover:text-aqua-light transition duration-200" id="footerLinkLegal" onclick="customAlert(content[currentLang].alertLegal)">Impressum/Datenschutz</a>
<a href="#" class="hover:text-aqua-light transition duration-200" id="footerLinkContact" onclick="customAlert(content[currentLang].alertContact)">Kontakt</a>
</div>
</div>
<p class="text-center mt-6 text-xs text-gray-500" id="footerNote">Hinweis: Die Hauptinhalte und Produkte sind unter shop.bts-eu.com gelistet.</p>
</div>
</footer>
<!-- JavaScript für die einfache Alert-Funktion (ersetzt window.alert) und Sprachlogik -->
<script>
const content = {
de: {
htmlLang: "de",
title: "BTS-EU | Tauchsport-Großhandel weltweit",
navShop: "Zum Shop",
heroTitle: "Ihr Partner für Tauchsport-Großhandel",
heroSubtitle: "Hochwertige Tauchprodukte. Weltweiter Vertrieb exklusiv an registrierte Händler.",
heroButton: "Zum Händler-Shop (shop.bts-eu.com)",
uspTitle: "Warum BTS-EU?",
feature1Title: "Umfangreiches Sortiment",
feature1Text: "Wir bieten eine breite Palette an Tauchausrüstung und Zubehör von führenden Marken. Alles, was Ihre Kunden benötigen.",
feature2Title: "Weltweiter Vertrieb",
feature2Text: "Wir beliefern registrierte Händler zuverlässig in alle Teile der Welt. Schnelle Logistik ist unsere Priorität.",
feature3Title: "Händler-Vorteile",
feature3Text: "Als Fachhändler profitieren Sie von exklusiven Großhandelspreisen und persönlichem Support.",
ctaTitle: "Exklusiver Zugang für registrierte Partner",
ctaSubtitle: "Auf unserem Shop-Portal finden Sie den vollständigen, aktuellen Produktkatalog, Preise und die Möglichkeit zur direkten Bestellung.",
ctaButton1: "Direkt zum Login/Shop",
ctaButton2: "Händler-Registrierung anfragen",
// HIER wurde die Jahreszahl entfernt:
footerCopy: "BTS-EU Tauchsport-Großhandel. Alle Rechte vorbehalten.",
footerLinkShop: "Shop-Plattform",
footerLinkLegal: "Impressum/Datenschutz",
footerLinkContact: "Kontakt",
footerNote: "Hinweis: Die Hauptinhalte und Produkte sind unter shop.bts-eu.com gelistet.",
alertRegistration: "Bitte kontaktieren Sie uns für die Händlerregistrierung unter info@bts-eu.com",
alertLegal: "Impressum/Datenschutz-Informationen sind üblicherweise auf der Shop-Seite zu finden.",
alertContact: "Kontakt: info@bts-eu.com",
alertClose: "Schließen",
},
en: {
htmlLang: "en",
title: "BTS-EU | Worldwide Diving Wholesale",
navShop: "Go to Shop",
heroTitle: "Your Partner for Diving Wholesale",
heroSubtitle: "High-quality diving products. Worldwide distribution exclusively to registered dealers.",
heroButton: "Go to Dealer Shop (shop.bts-eu.com)",
uspTitle: "Why BTS-EU?",
feature1Title: "Extensive Product Range",
feature1Text: "We offer a wide range of diving equipment and accessories from leading brands. Everything your customers need.",
feature2Title: "Worldwide Distribution",
feature2Text: "We reliably supply registered dealers to all parts of the world. Fast logistics is our priority.",
feature3Title: "Dealer Benefits",
feature3Text: "As a specialist dealer, you benefit from exclusive wholesale prices and personal support.",
ctaTitle: "Exclusive Access for Registered Partners",
ctaSubtitle: "On our shop portal, you will find the complete, current product catalog, prices, and the possibility for direct ordering.",
ctaButton1: "Direct to Login/Shop",
ctaButton2: "Request Dealer Registration",
// HIER wurde die Jahreszahl entfernt:
footerCopy: "BTS-EU Diving Wholesale. All rights reserved.",
footerLinkShop: "Shop Platform",
footerLinkLegal: "Imprint/Privacy",
footerLinkContact: "Contact",
footerNote: "Note: The main content and products are listed on shop.bts-eu.com.",
alertRegistration: "Please contact us for dealer registration at info@bts-eu.com",
alertLegal: "Imprint/Privacy information is typically found on the shop page.",
alertContact: "Contact: info@bts-eu.com",
alertClose: "Close",
}
};
let currentLang = 'de';
const langToggle = document.getElementById('langToggle');
// Hole die aktuelle Jahreszahl einmal
const currentYear = new Date().getFullYear();
function updateContent(lang) {
// Update HTML language attribute
document.documentElement.lang = content[lang].htmlLang;
// Update dynamic elements
document.getElementById('pageTitle').textContent = content[lang].title;
// headerTitle and headerSubtitle are static for the logo, no need to update
document.getElementById('navShop').innerHTML = `${content[lang].navShop} <span class="hidden sm:inline-block">→</span>`;
document.getElementById('heroTitle').textContent = content[lang].heroTitle;
document.getElementById('heroSubtitle').textContent = content[lang].heroSubtitle;
document.getElementById('heroButton').textContent = content[lang].heroButton;
document.getElementById('uspTitle').textContent = content[lang].uspTitle;
document.getElementById('feature1Title').textContent = content[lang].feature1Title;
document.getElementById('feature1Text').textContent = content[lang].feature1Text;
document.getElementById('feature2Title').textContent = content[lang].feature2Title;
document.getElementById('feature2Text').textContent = content[lang].feature2Text;
document.getElementById('feature3Title').textContent = content[lang].feature3Title;
document.getElementById('feature3Text').textContent = content[lang].feature3Text;
document.getElementById('ctaTitle').textContent = content[lang].ctaTitle;
document.getElementById('ctaSubtitle').textContent = content[lang].ctaSubtitle;
document.getElementById('ctaButton1').textContent = content[lang].ctaButton1;
document.getElementById('ctaButton2').textContent = content[lang].ctaButton2;
// Füge die Jahreszahl dynamisch in den Footer ein
document.getElementById('footerCopy').innerHTML = `© ${currentYear} ${content[lang].footerCopy}`;
document.getElementById('footerLinkShop').textContent = content[lang].footerLinkShop;
document.getElementById('footerLinkLegal').textContent = content[lang].footerLinkLegal;
document.getElementById('footerLinkContact').textContent = content[lang].footerLinkContact;
document.getElementById('footerNote').textContent = content[lang].footerNote;
// Update button label
langToggle.textContent = lang === 'de' ? 'EN' : 'DE';
}
function toggleLanguage() {
currentLang = currentLang === 'de' ? 'en' : 'de';
updateContent(currentLang);
}
// Attach event listener to the toggle button
langToggle.addEventListener('click', toggleLanguage);
// Initial content load (default is 'de')
document.addEventListener('DOMContentLoaded', () => {
updateContent(currentLang);
});
// Custom alert function
function customAlert(message) {
const modal = document.createElement('div');
modal.style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: flex; justify-content: center; align-items: center; z-index: 1000;';
const box = document.createElement('div');
box.style.cssText = 'background: white; padding: 30px; border-radius: 12px; max-width: 400px; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.3);';
const msg = document.createElement('p');
msg.textContent = message;
msg.style.cssText = 'margin-bottom: 20px; font-size: 1.1rem; color: #0A192F;';
const closeButton = document.createElement('button');
closeButton.textContent = content[currentLang].alertClose;
closeButton.style.cssText = 'background: #1F7094; color: white; padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; transition: background 0.3s;';
closeButton.onmouseover = () => closeButton.style.backgroundColor = '#0A192F';
closeButton.onmouseout = () => closeButton.style.backgroundColor = '#1F7094';
closeButton.onclick = () => document.body.removeChild(modal);
box.appendChild(msg);
box.appendChild(closeButton);
modal.appendChild(box);
document.body.appendChild(modal);
}
// Overwrite standard alert function for links using customAlert
window.alert = customAlert;
</script>
</body>
</html>