123 lines
No EOL
5.3 KiB
PHP
123 lines
No EOL
5.3 KiB
PHP
<?php
|
|
session_start();
|
|
if (isset($_SESSION['admin_id'])) {
|
|
header('Location: index.php');
|
|
exit;
|
|
}
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ASSET | Login</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Pretendard:wght@400;500;600;700;800&display=swap"
|
|
rel="stylesheet">
|
|
<style>
|
|
body {
|
|
font-family: 'Pretendard', sans-serif;
|
|
}
|
|
|
|
[x-cloak] {
|
|
display: none !important;
|
|
}
|
|
|
|
.glass {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="bg-[#0f172a] min-h-screen flex items-center justify-center p-6 relative overflow-hidden text-slate-800">
|
|
<!-- Animated background elements -->
|
|
<div class="absolute top-0 left-0 w-full h-full opacity-20 pointer-events-none">
|
|
<div
|
|
class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-blue-600 rounded-full blur-[120px] animate-pulse">
|
|
</div>
|
|
<div class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-indigo-600 rounded-full blur-[120px] animate-pulse"
|
|
style="animation-delay: 2s;"></div>
|
|
</div>
|
|
|
|
<div class="w-full max-w-md relative z-10" x-data="{
|
|
login_id: '',
|
|
password: '',
|
|
loading: false,
|
|
error: '',
|
|
|
|
async submit() {
|
|
this.loading = true;
|
|
this.error = '';
|
|
try {
|
|
const res = await fetch('api.php?action=login', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ login_id: this.login_id, password: this.password })
|
|
});
|
|
const data = await res.json();
|
|
if (data.success) {
|
|
location.href = 'index.php';
|
|
} else {
|
|
this.error = data.error || '로그인에 실패했습니다.';
|
|
this.loading = false;
|
|
}
|
|
} catch (e) {
|
|
this.error = '서버 통신 오류가 발생했습니다.';
|
|
this.loading = false;
|
|
}
|
|
}
|
|
}">
|
|
<div class="text-center mb-10">
|
|
<h1 class="text-6xl font-black text-white tracking-tighter mb-2 italic">ASSET</h1>
|
|
<p class="text-blue-400 font-bold uppercase tracking-[0.3em] text-[10px]">Management System v2.0</p>
|
|
</div>
|
|
|
|
<div class="glass rounded-[2.5rem] p-10 shadow-2xl">
|
|
<h2 class="text-2xl font-black text-slate-900 mb-8">Sign In</h2>
|
|
|
|
<form @submit.prevent="submit" class="space-y-6">
|
|
<div>
|
|
<label class="block text-[10px] font-black text-slate-400 uppercase mb-2 ml-1 tracking-widest">Admin
|
|
ID</label>
|
|
<input type="text" x-model="login_id" required placeholder="Enter ID"
|
|
class="w-full px-5 py-4 bg-slate-100/50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none font-bold transition-all">
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
class="block text-[10px] font-black text-slate-400 uppercase mb-2 ml-1 tracking-widest">Password</label>
|
|
<input type="password" x-model="password" required placeholder="••••••••"
|
|
class="w-full px-5 py-4 bg-slate-100/50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none font-bold transition-all">
|
|
</div>
|
|
|
|
<div x-show="error" x-transition x-cloak
|
|
class="p-4 bg-rose-50 border border-rose-100 rounded-2xl text-rose-600 text-xs font-bold"
|
|
x-text="error"></div>
|
|
|
|
<button type="submit" :disabled="loading"
|
|
class="w-full py-5 bg-blue-600 text-white rounded-2xl font-black text-sm shadow-xl shadow-blue-500/20 hover:bg-blue-700 transition-all active:scale-95 disabled:opacity-50 disabled:pointer-events-none flex items-center justify-center gap-2">
|
|
<template x-if="loading">
|
|
<svg class="animate-spin h-5 w-5 text-white" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
|
|
</circle>
|
|
<path class="opacity-75" fill="currentColor"
|
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
|
|
</path>
|
|
</svg>
|
|
</template>
|
|
<span x-text="loading ? 'Authenticating...' : 'Access Console'"></span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<p class="mt-8 text-center text-slate-500 text-[10px] font-bold uppercase tracking-widest">
|
|
Forbidden access is strictly monitored
|
|
</p>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|