592 lines
25 KiB
HTML
592 lines
25 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Bratanbonus.net | Premium Rewards Dash</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<style>
|
|
:root {
|
|
--accent-purple: #a855f7;
|
|
--accent-blue: #3b82f6;
|
|
--bg-dark: #020617;
|
|
--card-gray: #111827;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg-dark);
|
|
color: white;
|
|
font-family: 'Inter', sans-serif;
|
|
overflow-x: hidden;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* --- 1. & 3. STAR BACKGROUND ANIMATION --- */
|
|
#star-canvas {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -2;
|
|
background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);
|
|
}
|
|
|
|
/* --- NAVBAR SWITCH --- */
|
|
nav {
|
|
background: linear-gradient(90deg, var(--accent-purple), var(--accent-blue));
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
border-bottom: 1px solid transparent;
|
|
}
|
|
nav.scrolled {
|
|
background: rgba(15, 23, 42, 0.7);
|
|
backdrop-filter: blur(15px);
|
|
padding-top: 0.75rem;
|
|
padding-bottom: 0.75rem;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
nav.scrolled:hover {
|
|
background: linear-gradient(90deg, var(--accent-purple), var(--accent-blue));
|
|
backdrop-filter: blur(0px);
|
|
}
|
|
|
|
/* --- HERO --- */
|
|
#hero-canvas {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100vh;
|
|
background: transparent;
|
|
}
|
|
.hero-welcome {
|
|
position: absolute;
|
|
top: 38%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 10;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* --- 4. GLOBAL SPOTLIGHT & BORDER GLOW --- */
|
|
.bonus-grid {
|
|
position: relative;
|
|
--mouse-x: -1000px;
|
|
--mouse-y: -1000px;
|
|
}
|
|
|
|
.bonus-card {
|
|
position: relative;
|
|
background: var(--card-gray);
|
|
border-radius: 28px;
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
overflow: hidden;
|
|
transition: transform 0.4s cubic-bezier(0.2, 0, 0.2, 1);
|
|
height: 100%;
|
|
z-index: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.bonus-card:hover {
|
|
transform: translateY(-8px) scale(1.01);
|
|
}
|
|
|
|
/* Das Bild über die gesamte Größe der Card als Hintergrund */
|
|
.card-bg-image {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
opacity: 0.15; /* Dezent im Hintergrund */
|
|
z-index: -1;
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
.bonus-card:hover .card-bg-image {
|
|
opacity: 0.25;
|
|
}
|
|
|
|
/* Die Taschenlampe (Spotlight) */
|
|
/* Die Taschenlampe (Spotlight) */
|
|
.spotlight {
|
|
position: absolute;
|
|
width: 600px;
|
|
height: 600px;
|
|
background: radial-gradient(circle, var(--spot-clr) 0%, transparent 70%);
|
|
pointer-events: none;
|
|
mix-blend-mode: screen;
|
|
z-index: 0;
|
|
opacity: 0;
|
|
/* Präzise Positionierung: Mausposition minus Karten-Offset */
|
|
left: calc(var(--mouse-x) - (var(--card-left) * 1px));
|
|
top: calc(var(--mouse-y) - (var(--card-top) * 1px));
|
|
transform: translate(-50%, -50%);
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
/* Spotlight wird sichtbar, wenn Maus im Grid ist */
|
|
.bonus-grid:hover .spotlight {
|
|
opacity: 0.35;
|
|
}
|
|
|
|
/* Border Glow Effekt - Leuchtet auch außerhalb der Card */
|
|
.bonus-card::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 28px;
|
|
padding: 2px; /* Dicke des leuchtenden Rahmens */
|
|
background: radial-gradient(
|
|
400px circle at calc(var(--mouse-x) - (var(--card-left) * 1px)) calc(var(--mouse-y) - (var(--card-top) * 1px)),
|
|
var(--spot-clr),
|
|
transparent 80%
|
|
);
|
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
pointer-events: none;
|
|
z-index: 5;
|
|
}
|
|
/* Border Glow Effekt - Leuchtet auch außerhalb der Card */
|
|
.bonus-card::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 28px;
|
|
padding: 2px;
|
|
background: radial-gradient(
|
|
350px circle at calc(var(--mouse-x) - var(--card-left) * 1px) calc(var(--mouse-y) - var(--card-top) * 1px),
|
|
var(--spot-clr),
|
|
transparent 80%
|
|
);
|
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
pointer-events: none;
|
|
z-index: 5;
|
|
}
|
|
|
|
.info-btn {
|
|
background: rgba(255,255,255,0.05);
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
transition: all 0.3s;
|
|
}
|
|
.info-btn:hover {
|
|
background: rgba(255,255,255,0.15);
|
|
border-color: white;
|
|
}
|
|
|
|
/* --- 5. CUSTOM DROPDOWN --- */
|
|
.custom-select {
|
|
position: relative;
|
|
min-width: 200px;
|
|
}
|
|
.select-trigger {
|
|
background: rgba(255,255,255,0.05);
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
padding: 14px 20px;
|
|
border-radius: 15px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
transition: border-color 0.3s;
|
|
}
|
|
.select-trigger:hover { border-color: rgba(255,255,255,0.3); }
|
|
|
|
.select-options {
|
|
position: absolute;
|
|
top: 115%;
|
|
left: 0;
|
|
right: 0;
|
|
background: #111827;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
border-radius: 15px;
|
|
display: none;
|
|
z-index: 50;
|
|
overflow: hidden;
|
|
box-shadow: 0 10px 25px rgba(0,0,0,0.5);
|
|
}
|
|
.select-options.open { display: block; }
|
|
.option {
|
|
padding: 12px 20px;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
.option:hover { background: rgba(255,255,255,0.05); }
|
|
|
|
/* --- SOCIAL CARDS 3D --- */
|
|
.social-section { perspective: 2000px; }
|
|
.social-card {
|
|
width: 100%;
|
|
max-width: 550px;
|
|
background: rgba(255,255,255,0.02);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
padding: 2.5rem;
|
|
border-radius: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2rem;
|
|
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
|
|
}
|
|
.social-card.twitch { transform: rotateX(15deg) rotateY(-15deg); }
|
|
.social-card.instagram { transform: rotateX(15deg) rotateY(15deg); }
|
|
.social-card.kick { transform: rotateX(15deg) rotateY(-10deg); }
|
|
|
|
.social-card:hover {
|
|
transform: rotateX(0deg) rotateY(0deg) translateZ(50px) !important;
|
|
background: rgba(255,255,255,0.07);
|
|
border-color: var(--accent-blue);
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.section-divider {
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.3), rgba(59, 130, 246, 0.3), transparent);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<canvas id="star-canvas"></canvas>
|
|
|
|
<nav id="navbar" class="fixed w-full z-[100] px-8 py-5 flex justify-between items-center shadow-lg">
|
|
<div class="text-2xl font-black italic tracking-tighter uppercase">BRATANBONUS.NET</div>
|
|
<div class="hidden md:flex gap-10 font-bold text-xs tracking-widest uppercase">
|
|
<a href="#bonuses" class="hover:opacity-70 transition">Bonus Deals</a>
|
|
<a href="#find-me" class="hover:opacity-70 transition">Community</a>
|
|
<a href="#" class="bg-white text-black px-6 py-2 rounded-full hover:scale-105 transition">Login</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<section class="relative h-screen overflow-hidden bg-transparent">
|
|
<div class="hero-welcome text-center">
|
|
<h2 class="text-3xl md:text-5xl font-thin tracking-[0.8em] uppercase opacity-30">Welcome</h2>
|
|
</div>
|
|
<canvas id="hero-canvas"></canvas>
|
|
</section>
|
|
|
|
<div class="section-divider"></div>
|
|
|
|
<section id="bonuses" class="container mx-auto px-6 py-28">
|
|
<h2 class="text-5xl font-black italic text-center mb-20 uppercase tracking-tighter">Premium <span class="text-blue-500">Deals</span></h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 mb-16 items-end bg-gray-950/50 p-6 rounded-3xl border border-white/5 backdrop-blur-sm">
|
|
<div class="xl:col-span-2 relative">
|
|
<label class="text-xs text-gray-500 mb-2 block uppercase font-bold tracking-wider">Schnellsuche</label>
|
|
<div class="relative">
|
|
<i class="fas fa-search absolute left-5 top-1/2 -translate-y-1/2 text-gray-600"></i>
|
|
<input type="text" placeholder="Casino Name oder Bonusart..." class="w-full bg-white/5 border border-white/10 rounded-xl py-4 pl-14 outline-none focus:border-purple-500 transition focus:ring-1 focus:ring-purple-500">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="custom-select" id="country-select">
|
|
<label class="text-xs text-gray-500 mb-2 block uppercase font-bold tracking-wider">Land</label>
|
|
<div class="select-trigger">
|
|
<span>🇩🇪 Germany</span>
|
|
<i class="fas fa-chevron-down opacity-50 text-xs transition-transform"></i>
|
|
</div>
|
|
<div class="select-options">
|
|
<div class="option">🇩🇪 Germany</div>
|
|
<div class="option">🇦🇹 Austria</div>
|
|
<div class="option">🇨🇭 Switzerland</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="custom-select" id="method-select">
|
|
<label class="text-xs text-gray-500 mb-2 block uppercase font-bold tracking-wider">Methode</label>
|
|
<div class="select-trigger">
|
|
<span><i class="fas fa-wallet text-blue-400 mr-2"></i> Hybrid</span>
|
|
<i class="fas fa-chevron-down opacity-50 text-xs transition-transform"></i>
|
|
</div>
|
|
<div class="select-options">
|
|
<div class="option"><i class="fas fa-wallet text-blue-400 mr-2"></i> Hybrid</div>
|
|
<div class="option"><i class="fab fa-bitcoin text-orange-400 mr-2"></i> Crypto</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 bonus-grid">
|
|
|
|
<div class="bonus-card" data-color="rgba(168, 85, 247, 0.8)">
|
|
<img src="https://www.shutterstock.com/shutterstock/videos/5850002/thumb/1.jpg?ip=x480" class="card-bg-image" alt="Background">
|
|
<div class="spotlight"></div>
|
|
|
|
<div class="p-8 relative z-10 flex flex-col h-full">
|
|
<h3 class="text-4xl font-black italic tracking-tighter mb-2">STAKE.COM</h3>
|
|
|
|
<p class="text-gray-300 text-sm leading-relaxed mb-6">Exklusiver 200% Bonus bis zu 1000€ + Sofortiger Rakeback & Wöchentliche Boosts.</p>
|
|
|
|
<div class="flex flex-wrap gap-2 mb-8">
|
|
<span class="px-3 py-1 bg-purple-500/20 text-purple-300 border border-purple-500/30 rounded-full text-[10px] font-bold uppercase tracking-wider">VIP Deal</span>
|
|
<span class="px-3 py-1 bg-green-500/20 text-green-400 border border-green-500/30 rounded-full text-[10px] font-bold uppercase tracking-wider">Instant Rakeback</span>
|
|
</div>
|
|
|
|
<div class="mt-auto space-y-3 text-xs text-gray-400 border-t border-white/10 pt-6 mb-8">
|
|
<div class="flex justify-between"><span>Min Deposit</span><span class="text-white font-bold">20€</span></div>
|
|
<div class="flex justify-between"><span>Wagering</span><span class="text-white font-bold">35x</span></div>
|
|
<div class="flex justify-between"><span>Max Bet</span><span class="text-white font-bold">5€</span></div>
|
|
</div>
|
|
|
|
<div class="flex gap-3">
|
|
<button class="flex-grow bg-white text-black font-black py-4 rounded-xl hover:bg-purple-600 hover:text-white transition uppercase tracking-tighter">Deal Sichern</button>
|
|
<button class="info-btn px-5 rounded-xl text-white" title="Mehr Infos"><i class="fas fa-info"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bonus-card" data-color="rgba(59, 130, 246, 0.8)">
|
|
<img src="https://www.shutterstock.com/shutterstock/videos/5850002/thumb/1.jpg?ip=x480" class="card-bg-image" alt="Background">
|
|
<div class="spotlight"></div>
|
|
|
|
<div class="p-8 relative z-10 flex flex-col h-full">
|
|
<h3 class="text-4xl font-black italic tracking-tighter mb-2">ROOBET</h3>
|
|
<p class="text-gray-300 text-sm leading-relaxed mb-6">Täglich 15% Cashback für die ersten 7 Tage + 70 Freispiele ohne Umsatzbedingungen.</p>
|
|
|
|
<div class="flex flex-wrap gap-2 mb-8">
|
|
<span class="px-3 py-1 bg-blue-500/20 text-blue-300 border border-blue-500/30 rounded-full text-[10px] font-bold uppercase tracking-wider">No Sticky</span>
|
|
<span class="px-3 py-1 bg-yellow-500/20 text-yellow-400 border border-yellow-500/30 rounded-full text-[10px] font-bold uppercase tracking-wider">Daily Rewards</span>
|
|
</div>
|
|
|
|
<div class="mt-auto space-y-3 text-xs text-gray-400 border-t border-white/10 pt-6 mb-8">
|
|
<div class="flex justify-between"><span>Min Deposit</span><span class="text-white font-bold">10€</span></div>
|
|
<div class="flex justify-between"><span>Wagering</span><span class="text-white font-bold">0x (Spins)</span></div>
|
|
<div class="flex justify-between"><span>Max Bet</span><span class="text-white font-bold">Kein Limit</span></div>
|
|
</div>
|
|
|
|
<div class="flex gap-3">
|
|
<button class="flex-grow bg-white text-black font-black py-4 rounded-xl hover:bg-blue-600 hover:text-white transition uppercase tracking-tighter">Deal Sichern</button>
|
|
<button class="info-btn px-5 rounded-xl text-white"><i class="fas fa-info"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bonus-card" data-color="rgba(83, 252, 24, 0.7)">
|
|
<div class="card-bg-image bg-[#53FC18]/10 flex items-center justify-center">
|
|
<i class="fas fa-bolt text-9xl text-[#53FC18] opacity-20"></i>
|
|
</div>
|
|
<div class="spotlight"></div>
|
|
|
|
<div class="p-8 relative z-10 flex flex-col h-full">
|
|
<h3 class="text-4xl font-black italic tracking-tighter mb-2 text-[#53FC18]">KICKBACK</h3>
|
|
<p class="text-gray-300 text-sm leading-relaxed mb-6">Spezial High Roller VIP Treatment + Persönlicher Account Manager & Höhere Limits.</p>
|
|
|
|
<div class="flex flex-wrap gap-2 mb-8">
|
|
<span class="px-3 py-1 bg-[#53FC18]/20 text-[#53FC18] border border-[#53FC18]/30 rounded-full text-[10px] font-bold uppercase tracking-wider">High Roller</span>
|
|
</div>
|
|
|
|
<div class="mt-auto space-y-3 text-xs text-gray-400 border-t border-white/10 pt-6 mb-8">
|
|
<div class="flex justify-between"><span>Min Deposit</span><span class="text-white font-bold">250€</span></div>
|
|
<div class="flex justify-between"><span>Wagering</span><span class="text-white font-bold">Keines</span></div>
|
|
<div class="flex justify-between"><span>Max Bet</span><span class="text-white font-bold">Custom</span></div>
|
|
</div>
|
|
|
|
<div class="flex gap-3">
|
|
<button class="flex-grow bg-[#53FC18] text-black font-black py-4 rounded-xl hover:brightness-110 transition uppercase tracking-tighter">Deal Sichern</button>
|
|
<button class="info-btn px-5 rounded-xl text-white"><i class="fas fa-info"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="section-divider"></div>
|
|
|
|
<section id="find-me" class="py-32 social-section bg-gray-950/20">
|
|
<h2 class="text-center text-5xl font-black mb-24 italic uppercase tracking-tighter">Join the <span class="text-purple-500">Squad</span></h2>
|
|
<div class="flex flex-col gap-12 items-center px-6">
|
|
<div class="social-card twitch hover:scale-105">
|
|
<i class="fab fa-twitch text-7xl text-[#9146FF]"></i>
|
|
<div class="flex-grow">
|
|
<h4 class="text-3xl font-black tracking-tight">TWITCH</h4>
|
|
<p class="text-gray-500 font-bold text-lg mt-1">Live Casino Action jeden Abend @ 20 Uhr</p>
|
|
</div>
|
|
<i class="fas fa-chevron-right opacity-20 text-3xl"></i>
|
|
</div>
|
|
<div class="social-card instagram hover:scale-105">
|
|
<i class="fab fa-instagram text-7xl text-pink-500"></i>
|
|
<div class="flex-grow">
|
|
<h4 class="text-3xl font-black tracking-tight">INSTAGRAM</h4>
|
|
<p class="text-gray-500 font-bold text-lg mt-1">Behind the Scenes, News & Giveaways</p>
|
|
</div>
|
|
<i class="fas fa-chevron-right opacity-20 text-3xl"></i>
|
|
</div>
|
|
<div class="social-card kick hover:scale-105">
|
|
<i class="fas fa-bolt text-7xl text-[#53FC18]"></i>
|
|
<div class="flex-grow">
|
|
<h4 class="text-3xl font-black tracking-tight">KICK</h4>
|
|
<p class="text-gray-500 font-bold text-lg mt-1">The new home of high stakes uncut</p>
|
|
</div>
|
|
<i class="fas fa-chevron-right opacity-20 text-3xl"></i>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="py-16 border-t border-white/5 text-center bg-black/50 relative z-10">
|
|
<div class="container mx-auto px-6">
|
|
<div class="text-2xl font-black italic mb-8 opacity-60">BRATANBONUS.NET</div>
|
|
<div class="flex justify-center gap-8 text-gray-500 text-sm mb-10 flex-wrap">
|
|
<a href="#" class="hover:text-white transition">Datenschutz</a>
|
|
<a href="#" class="hover:text-white transition">AGB</a>
|
|
<a href="#" class="hover:text-white transition">Impressum</a>
|
|
<a href="#" class="hover:text-white transition">Verantwortungsbewusstes Spielen</a>
|
|
</div>
|
|
<p class="text-gray-700 text-xs tracking-widest uppercase mb-4">© 2026 | Alle Rechte vorbehalten</p>
|
|
<p class="text-[10px] max-w-lg mx-auto text-red-500/50 border border-red-500/20 p-4 rounded-xl">Glücksspiel kann süchtig machen. Bitte spiele verantwortungsbewusst. Teilnahme erst ab 18 Jahren.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
const starCanvas = document.getElementById('star-canvas');
|
|
const sCtx = starCanvas.getContext('2d');
|
|
let backgroundStars = [];
|
|
|
|
function initBackgroundStars() {
|
|
starCanvas.width = window.innerWidth;
|
|
starCanvas.height = window.innerHeight;
|
|
backgroundStars = [];
|
|
const count = Math.min(window.innerWidth / 5, 200);
|
|
for(let i=0; i<count; i++) {
|
|
backgroundStars.push({
|
|
x: Math.random() * starCanvas.width,
|
|
y: Math.random() * starCanvas.height,
|
|
size: Math.random() * 1.5,
|
|
opacity: Math.random(),
|
|
speed: Math.random() * 0.15 + 0.05
|
|
});
|
|
}
|
|
}
|
|
|
|
function drawBackgroundStars() {
|
|
sCtx.clearRect(0,0, starCanvas.width, starCanvas.height);
|
|
backgroundStars.forEach(s => {
|
|
s.opacity += (Math.random() - 0.5) * 0.03;
|
|
if(s.opacity <= 0) s.opacity = 0.1;
|
|
if(s.opacity >= 1) s.opacity = 0.9;
|
|
sCtx.fillStyle = `rgba(255, 255, 255, ${s.opacity})`;
|
|
sCtx.beginPath();
|
|
sCtx.arc(s.x, s.y, s.size, 0, Math.PI*2);
|
|
sCtx.fill();
|
|
s.y -= s.speed;
|
|
if(s.y < -10) s.y = starCanvas.height + 10;
|
|
});
|
|
requestAnimationFrame(drawBackgroundStars);
|
|
}
|
|
|
|
const canvas = document.getElementById('hero-canvas');
|
|
const ctx = canvas.getContext('2d', { alpha: true });
|
|
let particles = [];
|
|
const mouse = { x: -1000, y: -1000, radius: 120 };
|
|
|
|
window.addEventListener('mousemove', e => { mouse.x = e.clientX; mouse.y = e.clientY; });
|
|
|
|
class Particle {
|
|
constructor(x, y) {
|
|
this.baseX = x; this.baseY = y;
|
|
this.x = Math.random() * canvas.width;
|
|
this.y = Math.random() * canvas.height;
|
|
this.size = 1.6;
|
|
this.isWhite = false;
|
|
this.blinkTimer = 0;
|
|
this.opacity = 1;
|
|
this.ease = 0.06;
|
|
}
|
|
draw() {
|
|
if (this.isWhite) {
|
|
this.opacity = Math.sin(this.blinkTimer) * 0.5 + 0.5;
|
|
ctx.fillStyle = `rgba(255, 255, 255, ${Math.max(0.3, this.opacity)})`;
|
|
this.blinkTimer += 0.1;
|
|
if(this.blinkTimer > Math.PI) { this.isWhite = false; this.opacity = 1; }
|
|
} else {
|
|
const ratio = this.x / canvas.width;
|
|
const r = 168 - (168 - 59) * ratio;
|
|
const g = 85 + (130 - 85) * ratio;
|
|
ctx.fillStyle = `rgb(${r},${g},255)`;
|
|
}
|
|
ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill();
|
|
}
|
|
update() {
|
|
let dx = mouse.x - this.x; let dy = mouse.y - this.y;
|
|
let distance = Math.sqrt(dx*dx + dy*dy);
|
|
if (distance < mouse.radius) {
|
|
const force = (mouse.radius - distance) / mouse.radius;
|
|
this.x -= (dx / distance) * force * 7;
|
|
this.y -= (dy / distance) * force * 7;
|
|
} else {
|
|
this.x += (this.baseX - this.x) * this.ease;
|
|
this.y += (this.baseY - this.y) * this.ease;
|
|
}
|
|
}
|
|
}
|
|
|
|
function initHero() {
|
|
canvas.width = window.innerWidth; canvas.height = window.innerHeight;
|
|
const tCanvas = document.createElement('canvas');
|
|
const tCtx = tCanvas.getContext('2d');
|
|
tCanvas.width = canvas.width; tCanvas.height = canvas.height;
|
|
const fontSize = Math.min(canvas.width / 9, 90);
|
|
tCtx.fillStyle = 'white'; tCtx.font = `bold ${fontSize}px Arial`; tCtx.textAlign = 'center';
|
|
tCtx.fillText('BRATANBONUS.NET', tCanvas.width/2, tCanvas.height/2);
|
|
const pixels = tCtx.getImageData(0,0, tCanvas.width, tCanvas.height);
|
|
particles = [];
|
|
const step = 5;
|
|
for(let y=0; y<pixels.height; y+=step) {
|
|
for(let x=0; x<pixels.width; x+=step) {
|
|
if(pixels.data[(y * 4 * pixels.width) + (x * 4) + 3] > 128) {
|
|
particles.push(new Particle(x, y));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function animateHero() {
|
|
ctx.clearRect(0,0, canvas.width, canvas.height);
|
|
if(Math.random() > 0.93 && particles.length > 0) {
|
|
const p = particles[Math.floor(Math.random() * particles.length)];
|
|
if(!p.isWhite) { p.isWhite = true; p.blinkTimer = 0; }
|
|
}
|
|
particles.forEach(p => { p.update(); p.draw(); });
|
|
requestAnimationFrame(animateHero);
|
|
}
|
|
|
|
initBackgroundStars();
|
|
drawBackgroundStars();
|
|
initHero();
|
|
animateHero();
|
|
|
|
window.addEventListener('scroll', () => {
|
|
const nav = document.getElementById('navbar');
|
|
if (window.scrollY > 80) nav.classList.add('scrolled');
|
|
else nav.classList.remove('scrolled');
|
|
});
|
|
|
|
// Globales Tracking für den Taschenlampen-Effekt
|
|
const bGrid = document.querySelector('.bonus-grid');
|
|
const cards = document.querySelectorAll('.bonus-card');
|
|
|
|
window.addEventListener('mousemove', e => {
|
|
// Holen der exakten Position des Grids auf der Seite
|
|
const gridRect = bGrid.getBoundingClientRect();
|
|
|
|
// Berechnung der Mausposition relativ zum Grid-Container
|
|
// clientX/Y ist die Maus im Sichtfenster, gridRect.left/top ist der Abstand des Grids zum Sichtfenster
|
|
const mx = e.clientX - gridRect.left;
|
|
const my = e.clientY - gridRect.top;
|
|
|
|
bGrid.style.setProperty('--mouse-x', mx + 'px');
|
|
bGrid.style.setProperty('--mouse-y', my + 'px');
|
|
|
|
cards.forEach(card => {
|
|
// OffsetLeft/Top bezieht sich auf den nächsten positionierten Parent (das Grid)
|
|
card.style.setProperty('--card-left', card.offsetLeft);
|
|
card.style.setProperty('--card-top', card.offsetTop);
|
|
card.style.setProperty('--spot-clr', card.dataset.color);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|