Initial commit: Animexe Laravel platform
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.8
@@ -0,0 +1,291 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user