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

181
resources/js/pages/responsible/SelfExclusion.vue Normal file
View File

@@ -0,0 +1,181 @@
<script setup lang="ts">
import { Head, router } from '@inertiajs/vue3'
import { AlertTriangle } from 'lucide-vue-next'
import { ref } from 'vue'
import Button from '@/components/ui/button.vue'
import Input from '@/components/ui/input.vue'
import Label from '@/components/ui/label.vue'
import Select from '@/components/ui/select.vue'
import UserLayout from '@/layouts/user/userlayout.vue'
// Local state for forms (no persistence yet — posts to placeholder endpoint)
const lossLimitDaily = ref<string>('')
const lossLimitWeekly = ref<string>('')
const lossLimitMonthly = ref<string>('')
const wagerLimitDaily = ref<string>('')
const sessionLimitMinutes = ref<string>('')
const timeoutDuration = ref<string>('')
function submitLimits() {
router.post('/responsible/limits', {
lossLimitDaily: lossLimitDaily.value || null,
lossLimitWeekly: lossLimitWeekly.value || null,
lossLimitMonthly: lossLimitMonthly.value || null,
wagerLimitDaily: wagerLimitDaily.value || null,
sessionLimitMinutes: sessionLimitMinutes.value || null,
timeoutDuration: timeoutDuration.value || null,
})
}
</script>
<template>
<UserLayout>
<Head title="Self Exclusion" />
<section class="content">
<div class="wrap">
<!-- Intro panel -->
<div class="panel">
<div class="section-head">
<h2>Responsible Gaming</h2>
<div class="view-all">Self Exclusion</div>
</div>
<div class="panel-body">
<p class="muted">Setze persönliche Limits und nimm bei Bedarf eine Spielpause. Behalte jederzeit die Kontrolle über dein Spielverhalten.</p>
</div>
</div>
<!-- Verlustlimits -->
<div class="panel">
<div class="section-head">
<h2>Verlustlimits</h2>
</div>
<div class="panel-body">
<p class="muted">Begrenze, wie viel du in einem bestimmten Zeitraum maximal verlieren möchtest.</p>
<div class="form-row three">
<div class="field">
<Label for="lossDaily">Tageslimit</Label>
<Input id="lossDaily" v-model="lossLimitDaily" type="number" min="0" placeholder="z. B. 100" />
</div>
<div class="field">
<Label for="lossWeekly">Wochenlimit</Label>
<Input id="lossWeekly" v-model="lossLimitWeekly" type="number" min="0" placeholder="z. B. 300" />
</div>
<div class="field">
<Label for="lossMonthly">Monatslimit</Label>
<Input id="lossMonthly" v-model="lossLimitMonthly" type="number" min="0" placeholder="z. B. 1000" />
</div>
</div>
</div>
</div>
<!-- Einsatzlimits -->
<div class="panel">
<div class="section-head">
<h2>Einsatzlimits</h2>
</div>
<div class="panel-body">
<p class="muted">Lege fest, wie viel du pro Tag maximal einsetzen möchtest.</p>
<div class="form-row one">
<div class="field">
<Label for="wagerDaily">Tägliches Einsatzlimit</Label>
<Input id="wagerDaily" v-model="wagerLimitDaily" type="number" min="0" placeholder="z. B. 200" />
</div>
</div>
</div>
</div>
<!-- Spielpause -->
<div class="panel">
<div class="section-head">
<h2>Spielpause</h2>
</div>
<div class="panel-body">
<p class="muted">Lege eine Auszeit fest. Während der gewählten Dauer kannst du dich nicht einloggen und nicht spielen.</p>
<div class="form-row one">
<div class="field">
<Label for="timeout">Dauer wählen</Label>
<Select id="timeout" v-model="timeoutDuration" :options="[
{ label: 'Keine', value: '' },
{ label: '1 Tag', value: '1d' },
{ label: '3 Tage', value: '3d' },
{ label: '7 Tage', value: '7d' },
{ label: '14 Tage', value: '14d' },
{ label: '1 Monat', value: '1m' },
{ label: '3 Monate', value: '3m' },
{ label: '6 Monate', value: '6m' }
]" placeholder="Dauer wählen" />
</div>
</div>
<div class="warning">
<AlertTriangle class="w-4 h-4" />
<span>Hinweis: Eine Spielpause kann nicht rückgängig gemacht werden und gilt sofort.</span>
</div>
</div>
</div>
<!-- Sitzungslimits -->
<div class="panel">
<div class="section-head">
<h2>Sitzungslimits</h2>
</div>
<div class="panel-body">
<p class="muted">Lege fest, wie lange eine einzelne Spielsitzung maximal dauern darf.</p>
<div class="form-row one">
<div class="field">
<Label for="sessionLimit">Minuten pro Sitzung</Label>
<Input id="sessionLimit" v-model="sessionLimitMinutes" type="number" min="0" placeholder="z. B. 60" />
</div>
</div>
</div>
</div>
<!-- Aktionen -->
<div class="panel">
<div class="panel-body actions">
<Button class="btn-primary" @click="submitLimits">Speichern</Button>
<Button variant="outline" @click="router.visit('/wallet')">Abbrechen</Button>
</div>
</div>
</div>
</section>
</UserLayout>
</template>
<style scoped>
/* Align with User.vue layout */
.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); } }
.section-head { padding: 25px 20px 10px; display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid var(--border); }
.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; text-transform: uppercase; }
.panel-body { padding: 20px; }
.muted { color: #777; font-size: 12px; font-weight: 700; margin: 0 0 12px; }
.form-row { display: grid; gap: 12px; }
.form-row.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.form-row.one { grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: 8px; }
.warning { display: flex; align-items: center; gap: 10px; border: 1px solid #111; background: #050505; padding: 12px 14px; border-radius: 12px; color: #facc15; font-weight: 800; }
.actions { display: flex; gap: 12px; align-items: center; }
.btn-primary { background: var(--cyan); color: #000; border: none; }
:global(:root) {
--bg-card: #0a0a0a;
--border: #151515;
--magenta: #ff007a;
--cyan: #00f2ff;
--green: #00ff9d;
--gold: #f7931a;
}
</style>