Dolo/BetiX
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initialer Laravel Commit für BetiX
Some checks failed
linter / quality (push) Has been cancelled
Details
tests / ci (8.4) (push) Has been cancelled
Details
tests / ci (8.5) (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Dolo
2026-04-04 18:01:50 +02:00
commit 0280278978
374 changed files with 65210 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
resources/js/pages/User.vue Normal file
View File

@@ -0,0 +1,156 @@
<script setup>
import { ref, onMounted, nextTick } from 'vue';
import UserLayout from '../layouts/user/userlayout.vue';
const liveFeed = ref([]);
const generateLiveFeed = () => {
const games = ['Mental', 'San Quentin', 'Flight Mode', 'Sweet Bonanza'];
const users = ['Andri_X', 'CryptoKing', 'Neon_Ripper'];
const items = [];
for(let i=0; i<8; i++) {
const isWin = Math.random() > 0.3;
items.push({
id: i,
user: users[Math.floor(Math.random()*users.length)],
game: games[Math.floor(Math.random()*games.length)],
amount: isWin ? '+' + (Math.random()).toFixed(3) + ' BTC' : '—',
isWin
});
}
liveFeed.value = items;
nextTick(() => {
if (window.lucide) window.lucide.createIcons();
});
};
onMounted(() => {
generateLiveFeed();
// Slot hover effect
const slots = document.querySelectorAll('.slot');
slots.forEach(card => {
card.addEventListener('mousemove', e => {
const rect = card.getBoundingClientRect();
card.style.setProperty('--mouse-x', `${((e.clientX - rect.left) / rect.width) * 100}%`);
card.style.setProperty('--mouse-y', `${((e.clientY - rect.top) / rect.height) * 100}%`);
});
});
});
</script>
<template>
<UserLayout>
<section class="content">
<div class="wrap">
<div class="panel">
<div class="toolbar">
<div class="search">
<i data-lucide="search" style="width:14px; color:#333;"></i>
<input type="text" placeholder="Suche nach Slots...">
</div>
<div style="display:flex;">
<div class="chip active">Alle</div>
<div class="chip">Top</div>
<div class="chip">Neu</div>
</div>
</div>
<div class="section-head">
<h2>Top Slots</h2>
<div class="view-all">Alle anzeigen →</div>
</div>
<div class="grid">
<article class="slot c1"><div class="slot-provider">Nolimit City</div><div class="thumb"><img src="https://netcontent.cc/bitkingz/i/s4/nolimit/FlightModeDX2.webp"></div><div class="slot-overlay"><button class="btn-s btn-play">Play</button><button class="btn-s btn-demo">Demo</button></div></article>
<article class="slot c2"><div class="slot-provider">Nolimit City</div><div class="thumb"><img src="https://netcontent.cc/bitkingz/i/s6/nolimit/SanQuentin.webp"></div><div class="slot-overlay"><button class="btn-s btn-play">Play</button><button class="btn-s btn-demo">Demo</button></div></article>
<article class="slot c3"><div class="slot-provider">Nolimit City</div><div class="thumb"><img src="https://netcontent.cc/bitkingz/i/s4/nolimit/MentalDX1.webp"></div><div class="slot-overlay"><button class="btn-s btn-play">Play</button><button class="btn-s btn-demo">Demo</button></div></article>
<article class="slot c4"><div class="slot-provider">Pragmatic Play</div><div class="thumb"><img src="https://netcontent.cc/bitkingz/i/s4/pragmatic/SweetBonanza.webp"></div><div class="slot-overlay"><button class="btn-s btn-play">Play</button><button class="btn-s btn-demo">Demo</button></div></article>
</div>
</div>
<div class="panel live-card">
<div class="live-head">
<div class="live-title"><span class="dot"></span> Live Feed</div>
<div class="live-meta" style="font-size: 10px; color: #444; font-weight: 800;">Realtime Protocol v2.0</div>
</div>
<div class="live-body" id="live-feed">
<div v-for="item in liveFeed" :key="item.id" class="live-item">
<div class="li-avatar"><i data-lucide="user" style="width:14px; color:#333;"></i></div>
<div class="li-info"><span class="li-user">{{ item.user }}</span><span class="li-game">{{ item.game }}</span></div>
<div class="li-val"><span :class="['li-amount', { loss: !item.isWin }]">{{ item.amount }}</span></div>
</div>
</div>
</div>
</div>
</section>
</UserLayout>
</template>
<style scoped>
.content { padding: 30px; padding-bottom: 30px; }
.wrap { max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 30px; }
.panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; animation: fade-in 0.8s cubic-bezier(0.2, 0, 0, 1); }
@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.toolbar { padding: 15px 20px; display: flex; gap: 20px; align-items: center; border-bottom: 1px solid var(--border); }
.search { flex: 1; background: #000; border: 1px solid var(--border); display: flex; align-items: center; padding: 0 15px; border-radius: 10px; transition: 0.3s; }
.search:focus-within { border-color: var(--cyan); }
.search input { background: transparent; border: none; color: #fff; padding: 10px; width: 100%; font-size: 12px; }
.chip { padding: 8px 16px; font-size: 10px; font-weight: 900; color: #444; cursor: pointer; text-transform: uppercase; border-radius: 8px; transition: 0.2s; }
.chip:hover { color: #fff; }
.chip.active { color: var(--magenta); background: rgba(255,0,122,0.05); }
.section-head { padding: 25px 20px 10px; display: flex; justify-content: space-between; align-items: flex-end; }
.section-head h2 { margin: 0; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: #444; }
.view-all { font-size: 10px; color: var(--cyan); font-weight: 900; cursor: pointer; text-transform: uppercase; }
.grid { padding: 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.slot { background: #000; border: 1px solid var(--border); border-radius: 18px; position: relative; overflow: hidden; aspect-ratio: 16/11; transition: 0.4s cubic-bezier(0.2, 0, 0, 1); --mouse-x: 50%; --mouse-y: 50%; }
.slot::after { content: ""; position: absolute; inset: -10px; z-index: 3; pointer-events: none; background: radial-gradient(240px circle at var(--mouse-x) var(--mouse-y), var(--glow), transparent 70%); opacity: 0; transition: opacity 0.22s cubic-bezier(0.2, 0, 0, 1); filter: blur(10px); }
.slot:hover::after { opacity: 1; }
.slot.c1 { --glow: var(--cyan); }
.slot.c2 { --glow: var(--magenta); }
.slot.c3 { --glow: var(--green); }
.slot.c4 { --glow: var(--gold); }
.slot:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 15px 40px rgba(0,0,0,0.9); }
.slot-provider { position: absolute; top: 12px; left: 12px; z-index: 4; font-size: 8px; font-weight: 900; background: rgba(0,0,0,0.85); padding: 5px 10px; border-radius: 6px; text-transform: uppercase; letter-spacing: 1px; color: #fff; border: 1px solid #222; opacity: 1; transition: 0.3s; }
.slot:hover .slot-provider { opacity: 0; }
.thumb { width: 100%; height: 100%; }
.thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; transition: 0.6s cubic-bezier(0.2, 0, 0, 1); filter: grayscale(1) brightness(0.6); }
.slot:hover img { opacity: 1; filter: grayscale(0) brightness(1); transform: scale(1.08); }
.slot-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); opacity: 0; transition: 0.3s; z-index: 5; }
.slot:hover .slot-overlay { opacity: 1; }
.btn-s { width: 110px; padding: 10px; border-radius: 50px; font-size: 10px; font-weight: 900; text-transform: uppercase; cursor: pointer; transition: 0.2s; border: none; }
.btn-play { background: var(--glow); color: #000; box-shadow: 0 0 15px var(--glow); }
.btn-demo { background: transparent; border: 1px solid #fff; color: #fff; margin-top: 4px; }
.live-card { background: #000; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.live-head { padding: 16px 20px; display:flex; align-items:center; justify-content:space-between; border-bottom: 1px solid var(--border); }
.live-title { display:flex; align-items:center; gap:10px; font-size: 11px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #fff; }
.live-title .dot { width:8px; height:8px; border-radius:99px; background: var(--green); box-shadow: 0 0 18px rgba(0,255,157,.6); animation: pulse 1.2s infinite; }
@keyframes pulse { 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.25); opacity:.65 } }
.live-body { height: 280px; overflow-y: auto; padding: 15px; display: flex; flex-direction: column; gap: 8px; }
.live-item { display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap: 15px; padding: 10px 15px; border-radius: 12px; border: 1px solid #111; background: #050505; transition: .3s cubic-bezier(0.2, 0, 0, 1); }
.li-avatar { width: 32px; height: 32px; border-radius: 8px; background: #111; display: flex; align-items: center; justify-content: center; border: 1px solid #222; }
.li-info { display: flex; flex-direction: column; }
.li-user { font-size: 12px; font-weight: 800; color: #fff; }
.li-game { font-size: 10px; color: #555; font-weight: 700; text-transform: uppercase; }
.li-val { text-align: right; }
.li-amount { font-size: 12px; font-weight: 900; color: var(--green); display: block; }
.li-amount.loss { color: #444; }
:global(:root) {
--bg-card: #0a0a0a;
--border: #151515;
--magenta: #ff007a;
--cyan: #00f2ff;
--green: #00ff9d;
--gold: #f7931a;
}
</style>