initial commit
This commit is contained in:
+591
@@ -0,0 +1,591 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user