From da7ebe03c67a94c10b5b8a97c779c8a7bb520711 Mon Sep 17 00:00:00 2001 From: chpark Date: Tue, 31 Mar 2026 11:15:52 +0900 Subject: [PATCH] =?UTF-8?q?design:=20=EC=9A=B0=EC=A3=BC=20=ED=85=8C?= =?UTF-8?q?=EB=A7=88=20=EB=B0=B0=EA=B2=BD=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 반짝이는 별(twinkle 애니메이션) - 유성(shooting star) 효과 - 관리자/로그인/공개 페이지 전체 적용 - 기존 글래스모피즘 유지 + 우주 배경 레이어 추가 --- src/services/crawler.js | 20 ++++++++++++++++++-- views/admin/layout.ejs | 11 ++++++++++- views/admin/login.ejs | 17 ++++++++++++----- 3 files changed, 40 insertions(+), 8 deletions(-) diff --git a/src/services/crawler.js b/src/services/crawler.js index fe33379..d936c35 100644 --- a/src/services/crawler.js +++ b/src/services/crawler.js @@ -317,8 +317,14 @@ ${adsenseScript} :root{--primary:#6c5ce7;--primary-light:#a29bfe;--bg:#080b16;--bg-card:#12122a;--bg-card-hover:#1a1a3e;--text:#e0e0ee;--text-muted:#7878aa;--accent:#00cec9;--gold:#ffd700;--silver:#c0c0c0;--bronze:#cd7f32;--danger:#ff6b6b;--border:#1e1e44;--star:#f9ca24} *{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);line-height:1.6;min-height:100vh;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% 20%,rgba(108,92,231,.12),transparent 50%),radial-gradient(500px circle at 80% 60%,rgba(0,206,201,.08),transparent 50%),radial-gradient(400px circle at 50% 80%,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% 20%,rgba(108,92,231,.1),transparent 50%),radial-gradient(500px circle at 80% 60%,rgba(0,206,201,.07),transparent 50%),radial-gradient(400px circle at 50% 80%,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% 15%,rgba(255,255,255,.7),transparent),radial-gradient(1.5px 1.5px at 25% 60%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 40% 8%,rgba(255,255,255,.8),transparent),radial-gradient(1px 1px at 55% 42%,rgba(255,255,255,.4),transparent),radial-gradient(1.5px 1.5px at 72% 78%,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 88% 25%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 15% 88%,rgba(255,255,255,.4),transparent),radial-gradient(1.5px 1.5px at 62% 12%,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 92% 52%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 33% 38%,rgba(255,255,255,.3),transparent),radial-gradient(1.5px 1.5px at 5% 48%,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 78% 22%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 48% 72%,rgba(255,255,255,.5),transparent),radial-gradient(1.5px 1.5px at 18% 92%,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 58% 95%,rgba(255,255,255,.4),transparent),radial-gradient(1.5px 1.5px at 82% 88%,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(-20px,15px) scale(1.05)}100%{transform:translate(15px,-10px) scale(1)}} +@keyframes twinkle{0%{opacity:.5}100%{opacity:1}} +.shooting-star{position:fixed;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.8),transparent);z-index:0;pointer-events:none;opacity:0} +.shooting-star:nth-child(1){top:18%;left:35%;width:90px;animation:shoot 4s ease-in-out infinite} +.shooting-star:nth-child(2){top:55%;left:55%;width:70px;animation:shoot 4s ease-in-out 2.5s infinite} +@keyframes shoot{0%{transform:translateX(0) translateY(0) rotate(-35deg);opacity:0}5%{opacity:1}25%{transform:translateX(350px) translateY(180px) rotate(-35deg);opacity:0}100%{opacity:0}} .header{background:rgba(10,10,30,.5);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:2.5rem 1rem 2rem;text-align:center;border-bottom:1px solid rgba(255,255,255,.08);position:relative;z-index:1} .header h1{font-size:1.8rem;font-weight:800;color:#fff} .version-badge{display:inline-block;background:var(--accent);color:#000;font-size:.7rem;font-weight:700;padding:.2rem .6rem;border-radius:12px;margin-left:.5rem;vertical-align:middle} @@ -357,6 +363,8 @@ body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;z-ind +
+

${escapeHtml(site.name)}${escapeHtml(meta.title?.match(/ver\.?([\d.]+)/)?.[1] || now.split(' ')[0])}

업데이트: ${now}

@@ -442,8 +450,14 @@ ${adsenseScript} :root{--primary:#6c5ce7;--primary-light:#a29bfe;--bg:#080b16;--bg-card:#1a1a2e;--text:#e0e0ee;--text-muted:#8888aa;--accent:#00cec9;--border:#2a2a4a} *{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);line-height:1.8;min-height:100vh;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 30% 25%,rgba(108,92,231,.12),transparent 50%),radial-gradient(500px circle at 70% 70%,rgba(0,206,201,.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 30% 25%,rgba(108,92,231,.1),transparent 50%),radial-gradient(500px circle at 70% 70%,rgba(0,206,201,.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% 15%,rgba(255,255,255,.7),transparent),radial-gradient(1.5px 1.5px at 28% 62%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 42% 8%,rgba(255,255,255,.8),transparent),radial-gradient(1px 1px at 58% 42%,rgba(255,255,255,.4),transparent),radial-gradient(1.5px 1.5px at 75% 78%,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 88% 28%,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 65% 12%,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 92% 55%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 35% 38%,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 48% 72%,rgba(255,255,255,.5),transparent),radial-gradient(1.5px 1.5px at 82% 90%,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 20% 95%,rgba(255,255,255,.4),transparent);animation:twinkle 4s ease-in-out infinite alternate} @keyframes bgShift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-20px,15px) scale(1.05)}100%{transform:translate(15px,-10px) scale(1)}} +@keyframes twinkle{0%{opacity:.5}100%{opacity:1}} +.shooting-star{position:fixed;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.8),transparent);z-index:0;pointer-events:none;opacity:0} +.shooting-star:nth-child(1){top:22%;left:30%;width:90px;animation:shoot 4s ease-in-out infinite} +.shooting-star:nth-child(2){top:60%;left:50%;width:65px;animation:shoot 4s ease-in-out 2.5s infinite} +@keyframes shoot{0%{transform:translateX(0) translateY(0) rotate(-35deg);opacity:0}5%{opacity:1}25%{transform:translateX(350px) translateY(180px) rotate(-35deg);opacity:0}100%{opacity:0}} .lp-header{background:rgba(10,10,30,.5);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:2.5rem 1rem 2rem;text-align:center;border-bottom:1px solid rgba(255,255,255,.08);position:relative;z-index:1} .lp-header h1{font-size:1.6rem;font-weight:800;color:#fff} .lp-header .sub{color:var(--text-muted);font-size:.8rem;margin-top:.5rem} @@ -466,6 +480,8 @@ body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;z-ind +
+

${seoTitle}

업데이트: ${now}

diff --git a/views/admin/layout.ejs b/views/admin/layout.ejs index c1c85ea..46606c2 100644 --- a/views/admin/layout.ejs +++ b/views/admin/layout.ejs @@ -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)} +
+
+