277 lines
13 KiB
Vue
277 lines
13 KiB
Vue
<script setup lang="ts">
|
|
import { Head, Link } from '@inertiajs/vue3';
|
|
import { onMounted, ref, onUnmounted } from 'vue';
|
|
import BackgroundStars from '@/components/Welcome/BackgroundStars.vue';
|
|
|
|
defineOptions({ layout: null }); // Disable default layout wrapping
|
|
|
|
defineProps<{
|
|
canRegister?: boolean;
|
|
}>();
|
|
|
|
const isScrolled = ref(false);
|
|
const mobileMenuOpen = ref(false);
|
|
|
|
const handleScroll = () => {
|
|
if (typeof window !== 'undefined') {
|
|
isScrolled.value = window.scrollY > 80;
|
|
}
|
|
};
|
|
|
|
const toggleMobileMenu = () => {
|
|
mobileMenuOpen.value = !mobileMenuOpen.value;
|
|
};
|
|
|
|
const closeMobileMenu = () => {
|
|
mobileMenuOpen.value = false;
|
|
};
|
|
|
|
onMounted(() => {
|
|
window.addEventListener('scroll', handleScroll);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('scroll', handleScroll);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Leaderboard - Bratanbonus.net">
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
|
/>
|
|
</Head>
|
|
|
|
<div
|
|
class="bratanbonus-theme relative min-h-screen overflow-x-hidden bg-[#0a0a0a] font-sans text-white selection:bg-purple-500 selection:text-white"
|
|
>
|
|
<BackgroundStars />
|
|
|
|
<!-- Same Navbar as Welcome.vue without Dashboard -->
|
|
<nav
|
|
:class="[
|
|
'fixed z-100 flex w-full items-center justify-between border-b border-transparent px-6 py-5 shadow-lg transition-all duration-400 ease-in-out md:px-8',
|
|
isScrolled || mobileMenuOpen
|
|
? 'border-white/10 bg-[#0f172a]/80 pt-3 pb-3 backdrop-blur-md hover:bg-gradient-to-r hover:from-purple-500 hover:to-blue-500 hover:backdrop-blur-none'
|
|
: 'bg-gradient-to-r from-purple-500 to-blue-500',
|
|
]"
|
|
>
|
|
<div class="z-50 text-xl font-black tracking-tighter uppercase italic md:text-2xl">
|
|
<Link href="/" @click="closeMobileMenu">BRATANBONUS.NET</Link>
|
|
</div>
|
|
|
|
<!-- Hamburger Button -->
|
|
<button
|
|
class="z-50 flex items-center justify-center p-2 text-white focus:outline-none md:hidden"
|
|
@click="toggleMobileMenu"
|
|
>
|
|
<i :class="mobileMenuOpen ? 'fa-solid fa-xmark text-2xl' : 'fa-solid fa-bars text-2xl'"></i>
|
|
</button>
|
|
|
|
<!-- Desktop Menu -->
|
|
<div
|
|
class="hidden items-center gap-8 text-xs font-bold tracking-widest uppercase md:flex lg:gap-10"
|
|
>
|
|
<a href="/#bonuses" class="transition hover:opacity-70"
|
|
>Bonus Deals</a
|
|
>
|
|
<a href="/#find-me" class="transition hover:opacity-70"
|
|
>Community</a
|
|
>
|
|
<Link href="/leaderboard" class="transition hover:opacity-70 text-purple-200 hover:text-white"
|
|
>Leaderboard <i class="fa-solid fa-trophy ml-1"></i></Link
|
|
>
|
|
|
|
<template v-if="!$page.props.auth?.user">
|
|
<Link
|
|
href="/login"
|
|
class="rounded-full bg-white px-6 py-2 text-black transition hover:scale-105"
|
|
>
|
|
Login
|
|
</Link>
|
|
<Link
|
|
v-if="canRegister"
|
|
href="/register"
|
|
class="rounded-full border border-white/30 bg-white/20 px-6 py-2 text-white transition hover:scale-105 hover:bg-white hover:text-black"
|
|
>
|
|
Register
|
|
</Link>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Mobile Menu -->
|
|
<div
|
|
v-if="mobileMenuOpen"
|
|
class="absolute left-0 top-0 flex w-full flex-col items-center justify-center gap-8 border-b border-white/10 bg-[#0f172a]/95 pb-8 pt-24 backdrop-blur-xl transition-all duration-300 md:hidden"
|
|
>
|
|
<a href="/#bonuses" class="text-lg font-bold tracking-widest uppercase transition hover:opacity-70" @click="closeMobileMenu"
|
|
>Bonus Deals</a
|
|
>
|
|
<a href="/#find-me" class="text-lg font-bold tracking-widest uppercase transition hover:opacity-70" @click="closeMobileMenu"
|
|
>Community</a
|
|
>
|
|
<Link href="/leaderboard" class="text-lg font-bold tracking-widest text-purple-300 uppercase transition hover:text-white" @click="closeMobileMenu"
|
|
>Leaderboard <i class="fa-solid fa-trophy ml-1"></i></Link
|
|
>
|
|
|
|
<div class="mt-4 flex w-full flex-col gap-4 px-12" v-if="!$page.props.auth?.user">
|
|
<Link
|
|
href="/login"
|
|
class="w-full rounded-full bg-white px-6 py-3 text-center font-bold tracking-wider text-black uppercase transition hover:scale-105"
|
|
@click="closeMobileMenu"
|
|
>
|
|
Login
|
|
</Link>
|
|
<Link
|
|
v-if="canRegister"
|
|
href="/register"
|
|
class="w-full rounded-full border border-white/30 bg-white/20 px-6 py-3 text-center font-bold tracking-wider text-white uppercase transition hover:scale-105 hover:bg-white hover:text-black"
|
|
@click="closeMobileMenu"
|
|
>
|
|
Register
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Spacer for fixed nav -->
|
|
<div class="h-24"></div>
|
|
|
|
<!-- Leaderboard Header -->
|
|
<header class="relative z-10 py-16 text-center px-4">
|
|
<h1 class="mb-4 text-4xl md:text-5xl font-black uppercase italic tracking-tighter lg:text-7xl">
|
|
<span class="bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent">DAS LEADERBOARD</span>
|
|
</h1>
|
|
</header>
|
|
|
|
<!-- Main Content Area: Blurred Leaderboard -->
|
|
<main class="relative z-10 mx-auto max-w-5xl px-4 md:px-6 pb-32">
|
|
|
|
<!-- The Coming Soon Overlay (Without bounce animation) -->
|
|
<div class="absolute inset-0 z-20 flex flex-col items-center justify-center rounded-3xl backdrop-blur-md px-4">
|
|
<div class="flex flex-col items-center rounded-3xl border border-white/20 bg-[#0f172a]/90 p-8 md:p-12 text-center shadow-2xl shadow-purple-500/20 backdrop-blur-xl">
|
|
<div class="mb-6 flex h-20 w-20 md:h-24 md:w-24 items-center justify-center rounded-full bg-gradient-to-br from-purple-500 to-blue-600 shadow-lg shadow-purple-500/50">
|
|
<i class="fa-solid fa-trophy text-3xl md:text-4xl text-white"></i>
|
|
</div>
|
|
<h2 class="mb-4 bg-gradient-to-r from-purple-400 via-pink-400 to-blue-400 bg-clip-text text-3xl md:text-5xl font-black uppercase italic text-transparent">
|
|
Coming Soon
|
|
</h2>
|
|
<p class="max-w-md text-lg md:text-xl text-gray-300">
|
|
Das Feature wird aktuell entwickelt. Mach dich bereit für epische Rankings, Level und exklusive Belohnungen!
|
|
</p>
|
|
<div class="mt-8 flex gap-4">
|
|
<Link href="/" class="rounded-full bg-white px-6 md:px-8 py-3 font-bold text-black transition hover:scale-105 text-sm md:text-base">
|
|
Zurück zur Startseite
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Blurred Background Content (Mockup of Leaderboard) -->
|
|
<div class="relative overflow-x-auto overflow-y-hidden rounded-3xl border border-white/5 bg-[#1e293b]/30 p-4 md:p-8 opacity-40 blur-sm pointer-events-none select-none">
|
|
|
|
<!-- Top 3 Podium Mockup -->
|
|
<div class="mb-12 md:mb-16 flex items-end justify-center gap-2 md:gap-4 min-w-[300px]">
|
|
<!-- 2nd Place -->
|
|
<div class="flex w-24 md:w-32 flex-col items-center">
|
|
<div class="mb-2 h-12 w-12 md:h-16 md:w-16 rounded-full bg-gray-600 border-4 border-gray-400"></div>
|
|
<div class="h-24 md:h-32 w-full rounded-t-lg bg-gradient-to-t from-gray-800 to-gray-600 flex items-start justify-center pt-2 md:pt-4">
|
|
<span class="text-xl md:text-2xl font-black text-white">#2</span>
|
|
</div>
|
|
</div>
|
|
<!-- 1st Place -->
|
|
<div class="flex w-28 md:w-40 flex-col items-center">
|
|
<div class="mb-2 h-16 w-16 md:h-20 md:w-20 rounded-full bg-yellow-600 border-4 border-yellow-400"></div>
|
|
<div class="h-32 md:h-40 w-full rounded-t-lg bg-gradient-to-t from-yellow-800 to-yellow-600 flex items-start justify-center pt-2 md:pt-4">
|
|
<span class="text-2xl md:text-3xl font-black text-white">#1</span>
|
|
</div>
|
|
</div>
|
|
<!-- 3rd Place -->
|
|
<div class="flex w-24 md:w-32 flex-col items-center">
|
|
<div class="mb-2 h-12 w-12 md:h-16 md:w-16 rounded-full bg-orange-800 border-4 border-orange-600"></div>
|
|
<div class="h-16 md:h-24 w-full rounded-t-lg bg-gradient-to-t from-orange-900 to-orange-800 flex items-start justify-center pt-2 md:pt-4">
|
|
<span class="text-xl md:text-2xl font-black text-white">#3</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Table Mockup -->
|
|
<div class="w-full rounded-xl bg-black/40 min-w-[500px]">
|
|
<!-- Header -->
|
|
<div class="grid grid-cols-12 gap-2 md:gap-4 border-b border-white/10 p-3 md:p-4 text-xs md:text-sm font-bold text-gray-400 uppercase tracking-wider">
|
|
<div class="col-span-2 text-center">Rang</div>
|
|
<div class="col-span-5">User</div>
|
|
<div class="col-span-2 text-center">Level</div>
|
|
<div class="col-span-3 text-right">Punkte</div>
|
|
</div>
|
|
|
|
<!-- Rows -->
|
|
<div v-for="i in 5" :key="i" class="grid grid-cols-12 gap-2 md:gap-4 border-b border-white/5 p-3 md:p-4 items-center">
|
|
<div class="col-span-2 text-center font-bold text-gray-500 text-xs md:text-base">#{{ i + 3 }}</div>
|
|
<div class="col-span-5 flex items-center gap-2 md:gap-3">
|
|
<div class="h-8 w-8 md:h-10 md:w-10 rounded-full bg-white/10 shrink-0"></div>
|
|
<div class="h-3 md:h-4 w-16 md:w-32 rounded bg-white/20"></div>
|
|
</div>
|
|
<div class="col-span-2 flex justify-center">
|
|
<div class="h-4 md:h-6 w-8 md:w-12 rounded-full bg-purple-500/20"></div>
|
|
</div>
|
|
<div class="col-span-3 text-right font-mono text-sm md:text-lg text-purple-400">
|
|
12,{{ 500 - (i * 100) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<!-- Same Footer as Welcome.vue -->
|
|
<footer
|
|
class="relative z-10 border-t border-white/5 bg-black/50 py-16 text-center"
|
|
>
|
|
<div class="container mx-auto px-6">
|
|
<div
|
|
class="mb-8 text-2xl font-black text-white italic opacity-60"
|
|
>
|
|
BRATANBONUS.NET
|
|
</div>
|
|
<div
|
|
class="mb-10 flex flex-wrap justify-center gap-8 text-sm text-gray-500"
|
|
>
|
|
<Link
|
|
href="/datenschutz"
|
|
class="transition hover:text-white"
|
|
>Datenschutz</Link
|
|
>
|
|
<Link href="/agb" class="transition hover:text-white"
|
|
>AGB</Link
|
|
>
|
|
<Link href="/impressum" class="transition hover:text-white"
|
|
>Impressum</Link
|
|
>
|
|
<Link
|
|
href="/verantwortungsbewusstes-spielen"
|
|
class="transition hover:text-white"
|
|
>Verantwortungsbewusstes Spielen</Link
|
|
>
|
|
</div>
|
|
<p class="mb-4 text-xs tracking-widest text-gray-700 uppercase">
|
|
© 2026 | Alle Rechte vorbehalten
|
|
</p>
|
|
<p
|
|
class="mx-auto max-w-lg rounded-xl border border-red-500/20 p-4 text-[10px] text-red-500/50"
|
|
>
|
|
Glücksspiel kann süchtig machen. Bitte spiele
|
|
verantwortungsbewusst. Teilnahme erst ab 18 Jahren.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.bratanbonus-theme {
|
|
color: white;
|
|
}
|
|
</style>
|