160 lines
8.7 KiB
PHP
160 lines
8.7 KiB
PHP
@extends('frontend.layouts.app')
|
||
@section('title','Giriş Yap — Animexe')
|
||
@push('styles')
|
||
<style>
|
||
/* ═══════════════════════════════════════════════════
|
||
AUTH PAGE PREMIUM
|
||
═══════════════════════════════════════════════════ */
|
||
.auth-page{
|
||
min-height:calc(100vh - var(--nav-h));
|
||
display:flex;align-items:center;justify-content:center;
|
||
padding:40px 16px;
|
||
position:relative;overflow:hidden;
|
||
background:
|
||
radial-gradient(ellipse 80% 60% at 50% -20%,rgba(184,77,255,.2),transparent 55%),
|
||
radial-gradient(ellipse 50% 40% at 100% 100%,rgba(0,245,255,.1),transparent),
|
||
radial-gradient(ellipse 40% 35% at 0% 100%,rgba(255,45,125,.08),transparent);
|
||
}
|
||
/* Animated grid lines in background */
|
||
.auth-page::before{
|
||
content:'';position:absolute;inset:0;pointer-events:none;
|
||
background:
|
||
linear-gradient(rgba(0,245,255,.03) 1px,transparent 1px),
|
||
linear-gradient(90deg,rgba(0,245,255,.03) 1px,transparent 1px);
|
||
background-size:40px 40px;
|
||
mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black,transparent);
|
||
}
|
||
|
||
@keyframes auth-box-in{
|
||
from{opacity:0;transform:translateY(24px) scale(.97)}
|
||
to{opacity:1;transform:none}
|
||
}
|
||
.auth-box{
|
||
background:linear-gradient(160deg,rgba(14,14,28,.97),rgba(8,8,18,.99));
|
||
border:1px solid rgba(0,245,255,.22);
|
||
border-radius:20px;padding:clamp(28px,5vw,44px);
|
||
width:100%;max-width:440px;
|
||
box-shadow:0 32px 80px rgba(0,0,0,.65),0 0 60px rgba(0,245,255,.08),0 0 80px rgba(255,45,125,.05);
|
||
position:relative;overflow:hidden;
|
||
animation:auth-box-in .55s cubic-bezier(.22,1,.36,1) .1s both;
|
||
}
|
||
/* Top accent line */
|
||
.auth-box::before{
|
||
content:'';position:absolute;top:0;left:10%;right:10%;height:1px;
|
||
background:linear-gradient(90deg,transparent,var(--accent2),var(--accent),transparent);
|
||
opacity:.7;
|
||
}
|
||
|
||
.auth-logo{text-align:center;margin-bottom:28px}
|
||
.auth-logo .name{
|
||
font-family:var(--font-display);font-size:1.4rem;font-weight:900;letter-spacing:.22em;
|
||
background:linear-gradient(105deg,#fff 0%,var(--accent2) 40%,var(--accent) 100%);
|
||
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
|
||
text-shadow:none;
|
||
filter:drop-shadow(0 0 20px rgba(0,245,255,.3));
|
||
}
|
||
.auth-logo p{color:rgba(255,255,255,.35);font-size:.85rem;margin-top:5px}
|
||
.auth-title{font-size:1.18rem;font-weight:800;margin-bottom:22px;color:#fff}
|
||
.f-group{margin-bottom:16px;position:relative}
|
||
.f-group label{display:block;font-size:.79rem;font-weight:700;color:rgba(255,255,255,.45);margin-bottom:7px;letter-spacing:.05em;text-transform:uppercase}
|
||
.f-group input{
|
||
width:100%;
|
||
background:rgba(255,255,255,.04);
|
||
border:1px solid rgba(255,255,255,.1);
|
||
border-radius:10px;
|
||
padding:12px 16px;
|
||
color:var(--text);font-size:.9rem;outline:none;
|
||
transition:border .18s,box-shadow .18s,background .18s;
|
||
}
|
||
.f-group input:focus{
|
||
border-color:var(--accent2);
|
||
box-shadow:0 0 0 2px rgba(0,245,255,.12),0 0 24px rgba(0,245,255,.06);
|
||
background:rgba(0,245,255,.04);
|
||
}
|
||
.f-group input::placeholder{color:rgba(255,255,255,.2)}
|
||
.f-err{font-size:.78rem;color:#fca5a5;margin-top:5px;display:flex;align-items:center;gap:4px}
|
||
.f-check{display:flex;align-items:center;gap:9px;margin-bottom:18px}
|
||
.f-check input{width:16px;height:16px;accent-color:var(--accent);border-radius:4px}
|
||
.f-check label{font-size:.84rem;color:rgba(255,255,255,.45);cursor:pointer}
|
||
.auth-btn{
|
||
width:100%;padding:13px;border-radius:12px;border:none;cursor:pointer;
|
||
background:linear-gradient(135deg,var(--accent) 0%,var(--accent3) 100%);
|
||
color:#fff;font-size:.93rem;font-weight:800;letter-spacing:.03em;
|
||
transition:transform .14s,box-shadow .18s;
|
||
box-shadow:0 0 32px rgba(255,45,125,.35),0 4px 20px rgba(0,0,0,.35);
|
||
position:relative;overflow:hidden;
|
||
}
|
||
.auth-btn:hover{transform:translateY(-2px);box-shadow:0 0 44px rgba(255,45,125,.5),0 6px 24px rgba(0,0,0,.35)}
|
||
.auth-btn:active{transform:translateY(0)}
|
||
.auth-sep{text-align:center;margin:18px 0;color:rgba(255,255,255,.2);font-size:.8rem;position:relative}
|
||
.auth-sep::before,.auth-sep::after{content:'';position:absolute;top:50%;width:38%;height:1px;background:rgba(255,255,255,.08)}
|
||
.auth-sep::before{left:0}
|
||
.auth-sep::after{right:0}
|
||
.auth-switch{text-align:center;font-size:.85rem;color:rgba(255,255,255,.35);margin-top:20px}
|
||
.auth-switch a{color:var(--accent2);font-weight:700}
|
||
.auth-switch a:hover{text-decoration:underline;text-shadow:0 0 12px rgba(0,245,255,.5)}
|
||
.social-btns{display:flex;flex-direction:column;gap:10px;margin-top:4px}
|
||
.social-btn{
|
||
display:flex;align-items:center;justify-content:center;gap:10px;
|
||
width:100%;padding:11px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.1);
|
||
background:rgba(255,255,255,.04);color:rgba(255,255,255,.82);
|
||
font-size:.88rem;font-weight:600;cursor:pointer;
|
||
transition:background .15s,border-color .15s,transform .12s;
|
||
text-decoration:none;
|
||
}
|
||
.social-btn:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22);transform:translateY(-1px)}
|
||
.social-btn svg{width:18px;height:18px;flex-shrink:0}
|
||
</style>
|
||
@endpush
|
||
@section('content')
|
||
<div class="auth-page">
|
||
<div class="auth-box">
|
||
<div class="auth-logo">
|
||
<div class="name">ANIMEXE</div>
|
||
<p>Hesabına giriş yap</p>
|
||
</div>
|
||
|
||
@if($errors->any())
|
||
<div class="alert alert-err">{{ $errors->first() }}</div>
|
||
@endif
|
||
|
||
<form action="{{ route('frontend.login') }}" method="POST">
|
||
@csrf
|
||
<div class="f-group">
|
||
<label>E-posta</label>
|
||
<input type="email" name="email" value="{{ old('email') }}" placeholder="ornek@email.com" required autofocus>
|
||
</div>
|
||
<div class="f-group">
|
||
<label>Şifre</label>
|
||
<input type="password" name="password" placeholder="••••••••" required>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:18px">
|
||
<div class="f-check" style="margin-bottom:0">
|
||
<input type="checkbox" id="rem" name="remember">
|
||
<label for="rem">Beni hatırla</label>
|
||
</div>
|
||
<a href="{{ route('password.request') }}" style="font-size:.82rem;color:rgba(255,255,255,.4);transition:color .15s" onmouseover="this.style.color='var(--accent2)'" onmouseout="this.style.color='rgba(255,255,255,.4)'">Şifremi unuttum</a>
|
||
</div>
|
||
<button type="submit" class="auth-btn">Giriş Yap</button>
|
||
</form>
|
||
|
||
<div class="auth-sep" style="margin-top:22px">veya şununla devam et</div>
|
||
|
||
<div class="social-btns">
|
||
<a href="{{ route('social.redirect', 'google') }}" class="social-btn">
|
||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></svg>
|
||
Google ile devam et
|
||
</a>
|
||
<a href="{{ route('social.redirect', 'discord') }}" class="social-btn">
|
||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#5865F2"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
|
||
Discord ile devam et
|
||
</a>
|
||
</div>
|
||
|
||
<div class="auth-switch">
|
||
Hesabın yok mu? <a href="{{ route('frontend.register') }}">Üye ol</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endsection
|