chpark
da7ebe03c6
- 반짝이는 별(twinkle 애니메이션) - 유성(shooting star) 효과 - 관리자/로그인/공개 페이지 전체 적용 - 기존 글래스모피즘 유지 + 우주 배경 레이어 추가
90 lines
6.3 KiB
Plaintext
90 lines
6.3 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Crawl Manager - 로그인</title>
|
|
<style>
|
|
:root{--bg:#0a0e1a;--card:#1e293b;--border:#334155;--primary:#6366f1;--primary-hover:#818cf8;--text:#f1f5f9;--muted:#94a3b8;--danger:#ef4444;--radius:12px}
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans KR',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
|
|
|
|
/* 우주 배경 */
|
|
.bg-glow{position:fixed;top:-50%;left:-50%;width:200%;height:200%;z-index:0}
|
|
.bg-glow::before,.bg-glow::after{content:'';position:absolute;border-radius:50%;filter:blur(100px);opacity:.18}
|
|
.bg-glow::before{top:20%;left:25%;width:500px;height:500px;background:#6366f1;animation:float 12s ease-in-out infinite}
|
|
.bg-glow::after{bottom:15%;right:25%;width:450px;height:450px;background:#06b6d4;animation:float 12s ease-in-out infinite reverse}
|
|
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-30px) scale(1.1)}}
|
|
.stars{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;background-image:radial-gradient(1px 1px at 10% 20%,rgba(255,255,255,.7),transparent),radial-gradient(1.5px 1.5px at 25% 65%,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 40% 10%,rgba(255,255,255,.8),transparent),radial-gradient(1.5px 1.5px at 55% 45%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 70% 80%,rgba(255,255,255,.7),transparent),radial-gradient(1.5px 1.5px at 85% 30%,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 15% 85%,rgba(255,255,255,.5),transparent),radial-gradient(1.5px 1.5px at 60% 15%,rgba(255,255,255,.8),transparent),radial-gradient(1px 1px at 90% 55%,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 35% 40%,rgba(255,255,255,.4),transparent),radial-gradient(1.5px 1.5px at 5% 50%,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 75% 25%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 45% 75%,rgba(255,255,255,.6),transparent),radial-gradient(1.5px 1.5px at 20% 95%,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 95% 10%,rgba(255,255,255,.5),transparent),radial-gradient(1.5px 1.5px at 50% 90%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 30% 55%,rgba(255,255,255,.6),transparent),radial-gradient(1.5px 1.5px at 65% 35%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 80% 95%,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 12% 40%,rgba(255,255,255,.6),transparent);animation:twinkle 4s ease-in-out infinite alternate}
|
|
@keyframes twinkle{0%{opacity:.5}100%{opacity:1}}
|
|
.shooting-star{position:fixed;width:100px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.9),transparent);z-index:0;pointer-events:none;opacity:0;animation:shoot 4s ease-in-out infinite}
|
|
@keyframes shoot{0%{transform:translateX(0) translateY(0) rotate(-35deg);opacity:0}5%{opacity:1}25%{transform:translateX(400px) translateY(200px) rotate(-35deg);opacity:0}100%{opacity:0}}
|
|
|
|
.login-container{position:relative;z-index:1;width:100%;max-width:420px;padding:1rem}
|
|
|
|
.login-card{background:rgba(30,41,59,.45);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:2.5rem 2rem;box-shadow:0 25px 60px rgba(0,0,0,.4)}
|
|
|
|
.logo{text-align:center;margin-bottom:2rem}
|
|
.logo .icon{width:56px;height:56px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:14px;display:inline-flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:1rem;box-shadow:0 8px 25px rgba(99,102,241,.4);border:1px solid rgba(255,255,255,.15)}
|
|
.logo h1{font-size:1.3rem;font-weight:700;letter-spacing:-.5px}
|
|
.logo p{color:var(--muted);font-size:.82rem;margin-top:.3rem}
|
|
|
|
.form-group{margin-bottom:1.2rem}
|
|
.form-group label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:.4rem;font-weight:500}
|
|
.form-group input{width:100%;padding:.75rem 1rem;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);color:var(--text);font-size:.92rem;transition:all .2s;outline:none}
|
|
.form-group input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,.2);background:rgba(0,0,0,.4)}
|
|
.form-group input::placeholder{color:#475569}
|
|
|
|
.error-msg{background:rgba(239,68,68,.08);backdrop-filter:blur(8px);border:1px solid rgba(239,68,68,.2);border-radius:10px;padding:.6rem 1rem;margin-bottom:1.2rem;font-size:.82rem;color:var(--danger);display:flex;align-items:center;gap:.5rem}
|
|
|
|
.btn-login{width:100%;padding:.8rem;background:linear-gradient(135deg,#6366f1,#7c3aed);border:none;border-radius:var(--radius);color:#fff;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s;margin-top:.5rem;box-shadow:0 4px 15px rgba(99,102,241,.3)}
|
|
.btn-login:hover{background:linear-gradient(135deg,#818cf8,#8b5cf6);transform:translateY(-2px);box-shadow:0 8px 30px rgba(99,102,241,.4)}
|
|
.btn-login:active{transform:translateY(0)}
|
|
|
|
.footer-text{text-align:center;margin-top:1.5rem;font-size:.75rem;color:#475569}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="bg-glow"></div>
|
|
<div class="stars"></div>
|
|
<div class="shooting-star" style="top:20%;left:30%"></div>
|
|
<div class="shooting-star" style="top:60%;left:50%;animation-delay:2s;width:70px"></div>
|
|
|
|
<div class="login-container">
|
|
<div class="login-card">
|
|
<div class="logo">
|
|
<div class="icon">CM</div>
|
|
<h1>Crawl Manager</h1>
|
|
<p>관리자 로그인</p>
|
|
</div>
|
|
|
|
<% if (error) { %>
|
|
<div class="error-msg">
|
|
<span>⚠</span> <%= error %>
|
|
</div>
|
|
<% } %>
|
|
|
|
<form method="POST" action="/login">
|
|
<input type="hidden" name="redirect" value="<%= redirect %>">
|
|
|
|
<div class="form-group">
|
|
<label>이메일</label>
|
|
<input type="email" name="email" placeholder="admin@example.com" required autofocus>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>비밀번호</label>
|
|
<input type="password" name="password" placeholder="비밀번호를 입력하세요" required>
|
|
</div>
|
|
|
|
<button type="submit" class="btn-login">로그인</button>
|
|
</form>
|
|
|
|
<div class="footer-text">Crawl Manager v1.0</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|