chpark/crawlmanager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: 우주 테마 배경 추가

Browse Source 
- 반짝이는 별(twinkle 애니메이션)
- 유성(shooting star) 효과
- 관리자/로그인/공개 페이지 전체 적용
- 기존 글래스모피즘 유지 + 우주 배경 레이어 추가
This commit is contained in:
chpark
2026-03-31 11:15:52 +09:00
parent efdf4c2fd5
commit da7ebe03c6
3 changed files with 40 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/admin/layout.ejs
+10 -1
View File
@@ -8,8 +8,14 @@
:root{--bg:#0a0e1a;--bg2:#1f2937;--bg3:#374151;--text:#f9fafb;--muted:#9ca3af;--primary:#6366f1;--primary-hover:#818cf8;--danger:#ef4444;--success:#22c55e;--warning:#f59e0b;--border:#374151;--radius:12px;--glass-bg:rgba(255,255,255,.05);--glass-bg-hover:rgba(255,255,255,.08);--glass-border:rgba(255,255,255,.1);--glass-border-hover:rgba(255,255,255,.18);--glass-blur:blur(12px);--glass-blur-heavy:blur(20px);--glass-shadow:0 8px 32px rgba(0,0,0,.3)}
*{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;position:relative;overflow-x:hidden}
body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;background:radial-gradient(600px circle at 20% 30%,rgba(99,102,241,.12),transparent 50%),radial-gradient(500px circle at 80% 70%,rgba(6,182,212,.08),transparent 50%),radial-gradient(400px circle at 50% 50%,rgba(139,92,246,.06),transparent 50%);animation:bgShift 15s ease-in-out infinite alternate;pointer-events:none}
body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;background:radial-gradient(600px circle at 20% 30%,rgba(99,102,241,.1),transparent 50%),radial-gradient(500px circle at 80% 70%,rgba(6,182,212,.07),transparent 50%),radial-gradient(400px circle at 50% 50%,rgba(139,92,246,.05),transparent 50%);animation:bgShift 20s ease-in-out infinite alternate;pointer-events:none}
body::after{content:'';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,.6),transparent),radial-gradient(1px 1px at 25% 65%,rgba(255,255,255,.5),transparent),radial-gradient(1.5px 1.5px at 40% 10%,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 55% 45%,rgba(255,255,255,.4),transparent),radial-gradient(1.5px 1.5px at 70% 80%,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 85% 30%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 15% 85%,rgba(255,255,255,.4),transparent),radial-gradient(1.5px 1.5px at 60% 15%,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 90% 55%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 35% 40%,rgba(255,255,255,.3),transparent),radial-gradient(1.5px 1.5px at 5% 50%,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 75% 25%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 45% 75%,rgba(255,255,255,.5),transparent),radial-gradient(1.5px 1.5px at 20% 95%,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 95% 10%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 50% 90%,rgba(255,255,255,.3),transparent),radial-gradient(1.5px 1.5px at 30% 55%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 65% 35%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 80% 95%,rgba(255,255,255,.6),transparent),radial-gradient(1.5px 1.5px at 12% 40%,rgba(255,255,255,.5),transparent);animation:twinkle 4s ease-in-out infinite alternate}
@keyframes bgShift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,20px) scale(1.05)}100%{transform:translate(20px,-15px) scale(1)}}
@keyframes twinkle{0%{opacity:.6}100%{opacity:1}}
.shooting-star{position:fixed;width:80px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.8),transparent);z-index:0;pointer-events:none;opacity:0;animation:shoot 3s ease-in-out infinite}
.shooting-star:nth-child(2){top:15%;left:60%;animation-delay:2s;width:60px}
.shooting-star:nth-child(3){top:70%;left:20%;animation-delay:5s;width:100px}
@keyframes shoot{0%{transform:translateX(0) translateY(0) rotate(-35deg);opacity:0}5%{opacity:1}30%{transform:translateX(300px) translateY(150px) rotate(-35deg);opacity:0}100%{opacity:0}}
/* 사이드바 */
.sidebar{width:220px;background:rgba(15,20,35,.75);backdrop-filter:var(--glass-blur-heavy);-webkit-backdrop-filter:var(--glass-blur-heavy);border-right:1px solid var(--glass-border);padding:1.5rem 0;flex-shrink:0;position:fixed;top:0;left:0;height:100vh;overflow-y:auto;z-index:2}
@@ -97,6 +103,9 @@ tr:hover td{background:rgba(255,255,255,.04)}
</style>
</head>
<body>
<div class="shooting-star" style="top:25%;left:40%"></div>
<div class="shooting-star" style="top:15%;left:60%"></div>
<div class="shooting-star" style="top:70%;left:20%"></div>
<aside class="sidebar">
<div class="logo">Crawl Manager</div>
<nav>
views/admin/login.ejs
+12 -5
View File
@@ -7,14 +7,18 @@
<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}
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:.2}
.bg-glow::before{top:20%;left:25%;width:500px;height:500px;background:#6366f1;animation:float 10s ease-in-out infinite}
.bg-glow::after{bottom:15%;right:25%;width:450px;height:450px;background:#06b6d4;animation:float 10s ease-in-out infinite reverse}
.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}
@@ -43,6 +47,9 @@ body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans KR',sans
<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">