201 lines
6.5 KiB
Vue
201 lines
6.5 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue';
|
|
import axios from 'axios';
|
|
|
|
const isTwitchLive = ref(false);
|
|
const isKickLive = ref(false);
|
|
|
|
const checkLiveStatus = async () => {
|
|
try {
|
|
const { data } = await axios.get('/api/live-status');
|
|
isTwitchLive.value = data.twitch;
|
|
isKickLive.value = data.kick;
|
|
} catch (e) {
|
|
console.error('Status-Check fehlgeschlagen', e);
|
|
}
|
|
};
|
|
|
|
const trackSocial = async (platform: string) => {
|
|
try {
|
|
await axios.post('/api/track-social', { platform });
|
|
} catch (e) {
|
|
console.error('Tracking failed', e);
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
checkLiveStatus();
|
|
// Alle 5 Minuten im Hintergrund aktualisieren
|
|
setInterval(checkLiveStatus, 300000);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<section
|
|
id="find-me"
|
|
class="social-section relative z-30 bg-gray-950/20 py-32"
|
|
>
|
|
<div class="container mx-auto px-6">
|
|
<h2
|
|
class="mb-24 text-center text-5xl font-black tracking-tighter text-white uppercase italic"
|
|
>
|
|
Join the <span class="text-purple-500">Squad</span>
|
|
</h2>
|
|
|
|
<div
|
|
class="mx-auto grid max-w-7xl grid-cols-1 gap-8 md:grid-cols-3"
|
|
>
|
|
<a
|
|
href="https://www.twitch.tv/bratander1ste"
|
|
target="_blank"
|
|
@click="trackSocial('twitch')"
|
|
class="social-card group twitch flex cursor-pointer flex-col items-center gap-6 rounded-[30px] border border-white/10 bg-white/5 p-8 transition-all duration-500 ease-out hover:border-[#9146FF] hover:bg-white/10"
|
|
:class="{ 'live-active-twitch': isTwitchLive }"
|
|
>
|
|
<div v-if="isTwitchLive" class="live-indicator">
|
|
<span class="pulse-dot"></span> LIVE
|
|
</div>
|
|
|
|
<i
|
|
class="fab fa-twitch text-6xl text-[#9146FF] drop-shadow-[0_0_15px_rgba(145,70,255,0.4)] transition-transform duration-500 group-hover:scale-110"
|
|
></i>
|
|
<div class="text-center">
|
|
<h4
|
|
class="mb-2 text-2xl font-black tracking-tight text-white"
|
|
>
|
|
TWITCH
|
|
</h4>
|
|
<p class="text-sm font-medium text-gray-400">
|
|
Action jeden Abend live
|
|
</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a
|
|
href="#"
|
|
@click="trackSocial('instagram')"
|
|
class="social-card group instagram flex cursor-pointer flex-col items-center gap-6 rounded-[30px] border border-white/10 bg-white/5 p-8 transition-all duration-500 ease-out hover:border-[#E1306C] hover:bg-white/10"
|
|
>
|
|
<i
|
|
class="fab fa-instagram text-6xl text-pink-500 drop-shadow-[0_0_15px_rgba(236,72,153,0.4)] transition-transform duration-500 group-hover:scale-110"
|
|
></i>
|
|
<div class="text-center">
|
|
<h4
|
|
class="mb-2 text-2xl font-black tracking-tight text-white"
|
|
>
|
|
INSTAGRAM
|
|
</h4>
|
|
<p class="text-sm font-medium text-gray-400">
|
|
News & Giveaways
|
|
</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a
|
|
href="https://kick.com/Bratander1ste"
|
|
target="_blank"
|
|
@click="trackSocial('kick')"
|
|
class="social-card group kick flex cursor-pointer flex-col items-center gap-6 rounded-[30px] border border-white/10 bg-white/5 p-8 transition-all duration-500 ease-out hover:border-[#53FC18] hover:bg-white/10"
|
|
:class="{ 'live-active-kick': isKickLive }"
|
|
>
|
|
<div v-if="isKickLive" class="live-indicator">
|
|
<span class="pulse-dot"></span> LIVE
|
|
</div>
|
|
|
|
<i
|
|
class="fas fa-bolt text-6xl text-[#53FC18] drop-shadow-[0_0_15px_rgba(83,252,24,0.4)] transition-transform duration-500 group-hover:scale-110"
|
|
></i>
|
|
<div class="text-center">
|
|
<h4
|
|
class="mb-2 text-2xl font-black tracking-tight text-[#53FC18]"
|
|
>
|
|
KICK
|
|
</h4>
|
|
<p class="text-sm font-medium text-gray-400">
|
|
The home of high stakes
|
|
</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.social-section {
|
|
perspective: 2000px;
|
|
}
|
|
.social-card {
|
|
transform-style: preserve-3d;
|
|
position: relative;
|
|
}
|
|
|
|
/* Initiale 3D Lage */
|
|
.social-card.twitch {
|
|
transform: rotateY(-10deg) rotateX(5deg);
|
|
}
|
|
.social-card.kick {
|
|
transform: rotateY(10deg) rotateX(5deg);
|
|
}
|
|
.social-card:hover {
|
|
transform: rotateY(0deg) rotateX(0deg) translateZ(20px) !important;
|
|
}
|
|
|
|
/* LIVE INDICATOR */
|
|
.live-indicator {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 20px;
|
|
background: rgba(255, 0, 0, 0.15);
|
|
border: 1px solid #ff0000;
|
|
color: #ff4d4d;
|
|
padding: 4px 12px;
|
|
border-radius: 99px;
|
|
font-size: 11px;
|
|
font-weight: 900;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
box-shadow: 0 0 15px rgba(255, 0, 0, 0.4);
|
|
z-index: 50;
|
|
}
|
|
|
|
.pulse-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: #ff0000;
|
|
border-radius: 50%;
|
|
animation: pulse 1.5s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
transform: scale(0.9);
|
|
opacity: 1;
|
|
box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
|
|
}
|
|
70% {
|
|
transform: scale(1);
|
|
opacity: 0.8;
|
|
box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
|
|
}
|
|
100% {
|
|
transform: scale(0.9);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* LIVE HIGHLIGHTS */
|
|
.live-active-twitch {
|
|
border-color: rgba(145, 70, 255, 0.8) !important;
|
|
box-shadow: 0 0 40px rgba(145, 70, 255, 0.2);
|
|
background: rgba(145, 70, 255, 0.05) !important;
|
|
}
|
|
|
|
.live-active-kick {
|
|
border-color: rgba(83, 252, 24, 0.8) !important;
|
|
box-shadow: 0 0 40px rgba(83, 252, 24, 0.2);
|
|
background: rgba(83, 252, 24, 0.05) !important;
|
|
}
|
|
</style>
|