292 lines
8.1 KiB
PHP
292 lines
8.1 KiB
PHP
<!DOCTYPE html>
|
||
<html lang="tr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Giriş — Animexe Admin</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
|
||
<style>
|
||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||
:root{
|
||
--bg:#07071c;
|
||
--surface:#0c0c26;
|
||
--border:rgba(255,255,255,0.08);
|
||
--accent:#7c3aed;
|
||
--accent-lt:#a855f7;
|
||
--accent-glow:rgba(124,58,237,0.3);
|
||
--text:#e2e0f0;
|
||
--text2:#8b87a8;
|
||
--text3:#55527a;
|
||
--danger:#ef4444;
|
||
--danger-dim:rgba(239,68,68,0.1);
|
||
}
|
||
html,body{height:100%}
|
||
body{
|
||
background:var(--bg);
|
||
color:var(--text);
|
||
font-family:'Inter','Segoe UI',system-ui,sans-serif;
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:center;
|
||
min-height:100vh;
|
||
padding:20px;
|
||
-webkit-font-smoothing:antialiased;
|
||
}
|
||
|
||
/* Animated background */
|
||
.bg-glow{
|
||
position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
|
||
}
|
||
.bg-glow::before{
|
||
content:'';
|
||
position:absolute;
|
||
top:-30%;left:-20%;
|
||
width:60%;height:60%;
|
||
background:radial-gradient(ellipse,rgba(124,58,237,0.12) 0%,transparent 70%);
|
||
animation:gbg 8s ease-in-out infinite alternate;
|
||
}
|
||
.bg-glow::after{
|
||
content:'';
|
||
position:absolute;
|
||
bottom:-20%;right:-15%;
|
||
width:50%;height:50%;
|
||
background:radial-gradient(ellipse,rgba(168,85,247,0.08) 0%,transparent 70%);
|
||
animation:gbg 10s ease-in-out infinite alternate-reverse;
|
||
}
|
||
@keyframes gbg{0%{transform:translate(0,0) scale(1)}100%{transform:translate(3%,4%) scale(1.05)}}
|
||
|
||
/* Login box */
|
||
.login-wrap{
|
||
position:relative;z-index:1;
|
||
width:100%;max-width:420px;
|
||
}
|
||
.login-box{
|
||
background:var(--surface);
|
||
border:1px solid var(--border);
|
||
border-radius:20px;
|
||
padding:44px 40px;
|
||
box-shadow:0 24px 80px rgba(0,0,0,0.45);
|
||
}
|
||
|
||
/* Brand */
|
||
.login-brand{
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:center;
|
||
gap:12px;
|
||
margin-bottom:8px;
|
||
}
|
||
.login-brand-icon{
|
||
width:46px;height:46px;
|
||
background:linear-gradient(135deg,var(--accent),var(--accent-lt));
|
||
border-radius:14px;
|
||
display:flex;align-items:center;justify-content:center;
|
||
font-size:22px;color:#fff;
|
||
box-shadow:0 0 30px var(--accent-glow);
|
||
}
|
||
.login-brand-name{
|
||
font-size:22px;font-weight:800;
|
||
color:var(--text);letter-spacing:0.5px;
|
||
}
|
||
.login-brand-name span{color:var(--accent-lt);}
|
||
.login-sub{
|
||
text-align:center;
|
||
font-size:13px;
|
||
color:var(--text3);
|
||
margin-bottom:32px;
|
||
font-weight:500;
|
||
}
|
||
|
||
/* Form */
|
||
.f-group{margin-bottom:18px;}
|
||
.f-label{
|
||
display:block;
|
||
font-size:13px;font-weight:600;
|
||
color:var(--text2);
|
||
margin-bottom:7px;
|
||
}
|
||
.f-input{
|
||
width:100%;
|
||
background:var(--bg);
|
||
border:1px solid rgba(255,255,255,0.1);
|
||
border-radius:10px;
|
||
padding:11px 14px;
|
||
color:var(--text);
|
||
font-size:14px;
|
||
font-family:inherit;
|
||
outline:none;
|
||
transition:border-color 0.15s,box-shadow 0.15s;
|
||
}
|
||
.f-input:focus{
|
||
border-color:var(--accent);
|
||
box-shadow:0 0 0 3px var(--accent-glow);
|
||
}
|
||
.f-input::placeholder{color:var(--text3);}
|
||
|
||
/* Password toggle */
|
||
.f-pass-wrap{position:relative;}
|
||
.f-pass-toggle{
|
||
position:absolute;right:12px;top:50%;transform:translateY(-50%);
|
||
background:none;border:none;color:var(--text3);
|
||
cursor:pointer;font-size:15px;padding:2px;line-height:1;
|
||
transition:color 0.12s;
|
||
}
|
||
.f-pass-toggle:hover{color:var(--text2);}
|
||
|
||
/* Remember */
|
||
.f-remember{
|
||
display:flex;align-items:center;gap:8px;
|
||
margin-bottom:22px;
|
||
}
|
||
.f-remember input[type=checkbox]{
|
||
width:16px;height:16px;
|
||
appearance:none;-webkit-appearance:none;
|
||
background:var(--bg);
|
||
border:1px solid rgba(255,255,255,0.15);
|
||
border-radius:4px;cursor:pointer;
|
||
position:relative;flex-shrink:0;
|
||
transition:all 0.12s;
|
||
}
|
||
.f-remember input:checked{background:var(--accent);border-color:var(--accent);}
|
||
.f-remember input:checked::after{
|
||
content:'';position:absolute;
|
||
top:2px;left:5px;width:4px;height:8px;
|
||
border:2px solid #fff;border-top:none;border-left:none;
|
||
transform:rotate(45deg);
|
||
}
|
||
.f-remember label{font-size:13px;color:var(--text2);cursor:pointer;}
|
||
|
||
/* Submit */
|
||
.f-submit{
|
||
width:100%;
|
||
padding:12px;
|
||
background:linear-gradient(135deg,var(--accent),var(--accent-lt));
|
||
border:none;border-radius:10px;
|
||
color:#fff;
|
||
font-size:14px;font-weight:700;font-family:inherit;
|
||
cursor:pointer;
|
||
box-shadow:0 4px 20px var(--accent-glow);
|
||
transition:opacity 0.15s,transform 0.12s;
|
||
}
|
||
.f-submit:hover{opacity:0.9;}
|
||
.f-submit:active{transform:scale(0.99);}
|
||
|
||
/* Error */
|
||
.f-error{
|
||
background:var(--danger-dim);
|
||
border:1px solid rgba(239,68,68,0.25);
|
||
border-radius:10px;
|
||
padding:11px 14px;
|
||
font-size:13px;
|
||
color:#fca5a5;
|
||
display:flex;align-items:center;gap:8px;
|
||
margin-bottom:20px;
|
||
}
|
||
|
||
/* Footer */
|
||
.login-footer{
|
||
text-align:center;
|
||
margin-top:24px;
|
||
font-size:12px;
|
||
color:var(--text3);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="bg-glow"></div>
|
||
|
||
<div class="login-wrap">
|
||
<div class="login-box">
|
||
<div class="login-brand">
|
||
<div class="login-brand-icon"><i class="bi bi-play-fill"></i></div>
|
||
<div class="login-brand-name">ANIME<span>XE</span></div>
|
||
</div>
|
||
<div class="login-sub">Yönetim Paneli</div>
|
||
|
||
@if($errors->any())
|
||
<div class="f-error">
|
||
<i class="bi bi-exclamation-circle-fill"></i>
|
||
<span>{{ $errors->first() }}</span>
|
||
</div>
|
||
@endif
|
||
|
||
@if(session('error'))
|
||
<div class="f-error">
|
||
<i class="bi bi-exclamation-circle-fill"></i>
|
||
<span>{{ session('error') }}</span>
|
||
</div>
|
||
@endif
|
||
|
||
<form method="POST" action="{{ route('admin.login.post') }}">
|
||
@csrf
|
||
|
||
<div class="f-group">
|
||
<label class="f-label" for="email">E-posta adresi</label>
|
||
<input
|
||
id="email"
|
||
type="email"
|
||
name="email"
|
||
class="f-input"
|
||
placeholder="ornek@animexe.com"
|
||
value="{{ old('email') }}"
|
||
required
|
||
autofocus
|
||
autocomplete="email"
|
||
>
|
||
</div>
|
||
|
||
<div class="f-group">
|
||
<label class="f-label" for="password">Şifre</label>
|
||
<div class="f-pass-wrap">
|
||
<input
|
||
id="password"
|
||
type="password"
|
||
name="password"
|
||
class="f-input"
|
||
placeholder="••••••••"
|
||
required
|
||
autocomplete="current-password"
|
||
style="padding-right:42px"
|
||
>
|
||
<button type="button" class="f-pass-toggle" onclick="togglePass()" tabindex="-1">
|
||
<i class="bi bi-eye" id="pass-eye"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="f-remember">
|
||
<input type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
|
||
<label for="remember">Beni hatırla</label>
|
||
</div>
|
||
|
||
<button type="submit" class="f-submit">
|
||
<i class="bi bi-box-arrow-in-right" style="margin-right:6px"></i> Giriş Yap
|
||
</button>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="login-footer">
|
||
Animexe Admin — Yetkisiz erişim yasaktır.
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function togglePass() {
|
||
const inp = document.getElementById('password');
|
||
const eye = document.getElementById('pass-eye');
|
||
if (inp.type === 'password') {
|
||
inp.type = 'text';
|
||
eye.className = 'bi bi-eye-slash';
|
||
} else {
|
||
inp.type = 'password';
|
||
eye.className = 'bi bi-eye';
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|