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

227
resources/js/pages/auth/Login.vue Normal file
View File

@@ -0,0 +1,227 @@
<script setup lang="ts">
import { Head, Link } from '@inertiajs/vue3';
import LoginForm from '@/components/auth/LoginForm.vue';
import UserLayout from '@/layouts/user/userlayout.vue';
defineProps<{
status?: string;
canResetPassword: boolean;
canRegister: boolean;
}>();
</script>
<template>
<UserLayout>
<Head title="Login" />
<div class="lp-wrap">
<!-- Ambient background -->
<div class="lp-bg">
<div class="orb orb-a"></div>
<div class="orb orb-b"></div>
<div class="orb orb-c"></div>
<div class="grid-overlay"></div>
</div>
<div class="lp-card">
<!-- Glowing top bar -->
<div class="card-glow-bar"></div>
<!-- Brand / Logo area -->
<div class="lp-brand">
<div class="brand-diamond">
<span class="diamond-icon">♦</span>
</div>
<h1 class="brand-title">WELCOME <span class="brand-accent">BACK</span></h1>
<p class="brand-sub">Sign in to continue playing</p>
</div>
<!-- Divider -->
<div class="lp-divider">
<span class="divider-dot"></span>
<span class="divider-line"></span>
<span class="divider-text">Your Account</span>
<span class="divider-line"></span>
<span class="divider-dot"></span>
</div>
<!-- Form -->
<LoginForm :status="status">
<template #forgot-password>
<Link v-if="canResetPassword" href="/forgot-password" class="forgot-link">
Forgot password?
</Link>
</template>
</LoginForm>
<!-- Footer -->
<div class="lp-footer" v-if="canRegister">
<span class="footer-text">New here?</span>
<button
class="reg-link"
@click="() => window.dispatchEvent(new Event('require-register'))"
>
Create account
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</button>
</div>
<!-- Trust badges -->
<div class="trust-row">
<div class="trust-badge"><span class="trust-icon">🔒</span> SSL Encrypted</div>
<div class="trust-badge"><span class="trust-icon">⚡</span> Instant Access</div>
<div class="trust-badge"><span class="trust-icon">🛡️</span> Secure</div>
</div>
</div>
</div>
</UserLayout>
</template>
<style scoped>
/* ── Wrapper ─────────────────────────────────────────────── */
.lp-wrap {
min-height: calc(100vh - 80px);
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
position: relative;
overflow: hidden;
}
/* ── Ambient background ──────────────────────────────────── */
.lp-bg { position: absolute; inset: 0; pointer-events: none; }
.orb {
position: absolute;
border-radius: 50%;
filter: blur(90px);
animation: orb-float 12s ease-in-out infinite;
}
.orb-a { width: 360px; height: 360px; background: var(--primary, #df006a); opacity: .18; top: -80px; left: -80px; }
.orb-b { width: 440px; height: 440px; background: #7c3aed; opacity: .12; bottom: -120px; right: -100px; animation-delay: -5s; }
.orb-c { width: 220px; height: 220px; background: #06b6d4; opacity: .10; top: 40%; left: 60%; animation-delay: -9s; }
@keyframes orb-float {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(20px, 30px) scale(1.05); }
66% { transform: translate(-15px, -20px) scale(.97); }
}
.grid-overlay {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
background-size: 40px 40px;
mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}
/* ── Card ────────────────────────────────────────────────── */
.lp-card {
width: 100%;
max-width: 440px;
background: rgba(8, 8, 12, 0.85);
backdrop-filter: blur(24px);
border: 1px solid rgba(255,255,255,.08);
border-radius: 28px;
padding: 0 0 28px;
position: relative;
z-index: 10;
box-shadow:
0 0 0 1px rgba(255,255,255,.04),
0 25px 60px rgba(0,0,0,.6),
0 0 80px rgba(223,0,106,.06);
animation: card-in .7s cubic-bezier(.16,1,.3,1) both;
}
@keyframes card-in {
from { opacity: 0; transform: translateY(32px) scale(.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* ── Top glow bar ────────────────────────────────────────── */
.card-glow-bar {
height: 3px;
border-radius: 28px 28px 0 0;
background: linear-gradient(90deg, transparent, var(--primary, #df006a) 30%, #a855f7 70%, transparent);
margin-bottom: 32px;
}
/* ── Brand ───────────────────────────────────────────────── */
.lp-brand { text-align: center; padding: 0 32px 8px; }
.brand-diamond {
width: 60px; height: 60px;
background: rgba(223,0,106,.1);
border: 1px solid rgba(223,0,106,.25);
border-radius: 16px;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 18px;
box-shadow: 0 0 30px rgba(223,0,106,.15);
}
.diamond-icon { font-size: 28px; color: var(--primary, #df006a); filter: drop-shadow(0 0 8px var(--primary, #df006a)); }
.brand-title {
font-size: 1.9rem;
font-weight: 900;
color: #fff;
letter-spacing: 3px;
margin: 0 0 6px;
line-height: 1.1;
}
.brand-accent {
color: var(--primary, #df006a);
text-shadow: 0 0 24px rgba(223,0,106,.5);
}
.brand-sub { color: #555; font-size: .8rem; letter-spacing: 1.5px; text-transform: uppercase; margin: 0; }
/* ── Divider ─────────────────────────────────────────────── */
.lp-divider {
display: flex; align-items: center; gap: 10px;
padding: 20px 32px 24px;
}
.divider-line { flex: 1; height: 1px; background: rgba(255,255,255,.06); }
.divider-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(223,0,106,.4); }
.divider-text { font-size: 10px; color: #444; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; }
/* ── Form wrapper ────────────────────────────────────────── */
:deep(.login-form-content) { padding: 0 32px; }
/* ── Footer ──────────────────────────────────────────────── */
.lp-footer {
display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 24px 32px 8px;
border-top: 1px solid rgba(255,255,255,.05);
margin-top: 24px;
}
.footer-text { color: #555; font-size: .82rem; }
.reg-link {
display: flex; align-items: center; gap: 5px;
background: none; border: none; cursor: pointer;
color: var(--primary, #df006a); font-size: .82rem; font-weight: 700;
letter-spacing: .5px; transition: .2s; padding: 0;
}
.reg-link:hover { gap: 8px; filter: brightness(1.2); }
/* ── Trust badges ────────────────────────────────────────── */
.trust-row {
display: flex; align-items: center; justify-content: center; gap: 12px;
padding: 16px 32px 0;
flex-wrap: wrap;
}
.trust-badge {
display: flex; align-items: center; gap: 5px;
font-size: 10px; color: #444; letter-spacing: .5px;
}
.trust-icon { font-size: 11px; }
/* ── Forgot link (rendered inside LoginForm slot) ────────── */
:deep(.forgot-link) {
font-size: .75rem;
color: #555;
text-decoration: none;
transition: .2s;
letter-spacing: .3px;
}
:deep(.forgot-link:hover) { color: var(--primary, #df006a); }
</style>