From ef847061ebd3a95d217067e30f32b93b4fb2ef08 Mon Sep 17 00:00:00 2001 From: "sungjin.choi" Date: Mon, 10 Aug 2026 17:52:27 +0900 Subject: [PATCH] fix : main banner modify --- src/App.vue | 6 - src/components/TuiProgressBar.vue | 81 ---- src/main.js | 1 + src/style.css | 705 +++++++++++++++++++----------- src/views/Login.vue | 9 - src/views/Main.vue | 346 ++------------- 6 files changed, 466 insertions(+), 682 deletions(-) diff --git a/src/App.vue b/src/App.vue index e589ac0..98240ae 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,9 +1,3 @@ - - \ No newline at end of file diff --git a/src/components/TuiProgressBar.vue b/src/components/TuiProgressBar.vue index 92f2ac8..4c7d8fa 100644 --- a/src/components/TuiProgressBar.vue +++ b/src/components/TuiProgressBar.vue @@ -64,84 +64,3 @@ const barString = computed(() => { - - \ No newline at end of file diff --git a/src/main.js b/src/main.js index c625476..5327e58 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,7 @@ import { createApp } from 'vue' import App from './App.vue' import router from './router' // 라우터 가져오기 +import './style.css' // 전역 스타일 (모든 페이지 공통 관리) const app = createApp(App) app.use(router) // 라우터 연결 diff --git a/src/style.css b/src/style.css index 527d4fb..041429a 100644 --- a/src/style.css +++ b/src/style.css @@ -1,296 +1,471 @@ -:root { - --text: #6b6375; - --text-h: #08060d; - --bg: #fff; - --border: #e5e4e7; - --code-bg: #f4f3ec; - --accent: #aa3bff; - --accent-bg: rgba(170, 59, 255, 0.1); - --accent-border: rgba(170, 59, 255, 0.5); - --social-bg: rgba(244, 243, 236, 0.5); - --shadow: - rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px; +/* ============================================================== + 전역 스타일 (Global Styles) + 모든 페이지/컴포넌트의 스타일을 이 파일 한 곳에서 관리합니다. + ============================================================== */ - --sans: system-ui, 'Segoe UI', Roboto, sans-serif; - --heading: system-ui, 'Segoe UI', Roboto, sans-serif; - --mono: ui-monospace, Consolas, monospace; +@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&display=swap'); - font: 18px/145% var(--sans); - letter-spacing: 0.18px; - color-scheme: light dark; - color: var(--text); - background: var(--bg); - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; +/* --- 전역 리셋 --- */ +body, html { margin: 0; padding: 0; width: 100%; height: 100%; background-color: #f1f5f9; } +#app { width: 100%; height: 100%; } - @media (max-width: 1024px) { - font-size: 16px; - } +/* --- 폰트 강제 적용 대상 --- */ +.homepage-wrapper, +.menu-btn, +.nav-item, +.terminal-box, +.tui-global-overlay, +.login-terminal-frame, +.project-item, +.about-text, +.contact-form, +.theme-selector, +.nav-stats, +.server-badge, +.terminal, +.terminal span { + font-family: 'JetBrains Mono', monospace !important; } -@media (prefers-color-scheme: dark) { - :root { - --text: #9ca3af; - --text-h: #f3f4f6; - --bg: #16171d; - --border: #2e303a; - --code-bg: #1f2028; - --accent: #c084fc; - --accent-bg: rgba(192, 132, 252, 0.15); - --accent-border: rgba(192, 132, 252, 0.5); - --social-bg: rgba(47, 48, 58, 0.5); - --shadow: - rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px; - } - - #social .button-icon { - filter: invert(1) brightness(2); - } +/* --- 테마 변수 모음 --- */ +.theme-green { + --tui-color: #00ff00; + --tui-dim: #008800; + --tui-glow: rgba(0, 255, 0, 0.6); + --tui-border: rgba(0, 255, 0, 0.2); +} +.theme-amber { + --tui-color: #ffb000; + --tui-dim: #aa6600; + --tui-glow: rgba(255, 176, 0, 0.6); + --tui-border: rgba(255, 176, 0, 0.2); +} +.theme-vga { + --tui-color: #e2e8f0; + --tui-dim: #718096; + --tui-glow: rgba(226, 232, 240, 0.4); + --tui-border: rgba(226, 232, 240, 0.2); +} +.theme-ega { + --tui-color: #00ffff; + --tui-dim: #008b8b; + --tui-glow: rgba(0, 255, 255, 0.6); + --tui-border: rgba(0, 255, 255, 0.2); +} +.theme-white { + --tui-color: #f4f4f0; + --tui-dim: #9a9a94; + --tui-glow: rgba(244, 244, 240, 0.5); + --tui-border: rgba(244, 244, 240, 0.2); +} +.theme-plasma { + --tui-color: #ff7300; + --tui-dim: #b35100; + --tui-glow: rgba(255, 115, 0, 0.6); + --tui-border: rgba(255, 115, 0, 0.2); } -body { - margin: 0; +/* ============================================================== + 메인 페이지 (Main.vue) + ============================================================== */ +.terminal, .terminal span { + --color: var(--tui-color) !important; + text-shadow: 0 0 5px var(--tui-glow) !important; } -h1, -h2 { - font-family: var(--heading); - font-weight: 500; - color: var(--text-h); -} - -h1 { - font-size: 56px; - letter-spacing: -1.68px; - margin: 32px 0; - @media (max-width: 1024px) { - font-size: 36px; - margin: 20px 0; - } -} -h2 { - font-size: 24px; - line-height: 118%; - letter-spacing: -0.24px; - margin: 0 0 8px; - @media (max-width: 1024px) { - font-size: 20px; - } -} -p { - margin: 0; -} - -code, -.counter { - font-family: var(--mono); - display: inline-flex; - border-radius: 4px; - color: var(--text-h); -} - -code { - font-size: 15px; - line-height: 135%; - padding: 4px 8px; - background: var(--code-bg); -} - -.counter { - font-size: 16px; - padding: 5px 10px; - border-radius: 5px; - color: var(--accent); - background: var(--accent-bg); - border: 2px solid transparent; - transition: border-color 0.3s; - margin-bottom: 24px; - - &:hover { - border-color: var(--accent-border); - } - &:focus-visible { - outline: 2px solid var(--accent); - outline-offset: 2px; - } -} - -.hero { - position: relative; - - .base, - .framework, - .vite { - inset-inline: 0; - margin: 0 auto; - } - - .base { - width: 170px; - position: relative; - z-index: 0; - } - - .framework, - .vite { - position: absolute; - } - - .framework { - z-index: 1; - top: 34px; - height: 28px; - transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg) - scale(1.4); - } - - .vite { - z-index: 0; - top: 107px; - height: 26px; - width: auto; - transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg) - scale(0.8); - } -} - -#app { - width: 1126px; - max-width: 100%; - margin: 0 auto; - text-align: center; - border-inline: 1px solid var(--border); - min-height: 100svh; +.homepage-wrapper { + background-color: #050505; + color: var(--tui-color); + min-height: 100vh; display: flex; flex-direction: column; + overflow-x: hidden; +} + +.nav-stats { + font-size: 13px; + color: var(--tui-color); + font-weight: bold; + border: 1px dashed var(--tui-border); + padding: 3px 10px; + background: rgba(0, 0, 0, 0.5); + letter-spacing: 1px; +} + +.pulse-text { + color: var(--tui-color); + font-weight: bold; + animation: textPulse 2s infinite ease-in-out; + margin: 0 3px; +} + +.theme-selector { + background: #111; + border: 1px solid var(--tui-border); + color: var(--tui-color); + font-size: 11px; + padding: 3px 6px; + outline: none; + cursor: pointer; + transition: 0.3s; + box-shadow: 0 0 4px var(--tui-border); +} +.theme-selector:hover { + border-color: var(--tui-color); + box-shadow: 0 0 8px var(--tui-glow); +} + +.server-badge { + font-size: 11px; + font-weight: bold; + padding: 3px 8px; + border: 1px solid currentColor; + background: rgba(0, 0, 0, 0.5); + letter-spacing: 1px; + border-radius: 2px; + transition: 0.3s; +} +.server-badge.nas { color: var(--tui-color); text-shadow: 0 0 5px var(--tui-glow); border-color: var(--tui-border); } +.server-badge.firebase_night { color: #ffb000; text-shadow: 0 0 5px rgba(255, 176, 0, 0.6); border-color: rgba(255, 176, 0, 0.3); } +.server-badge.firebase_direct { color: #ffb000; text-shadow: 0 0 8px rgba(255, 176, 0, 0.6); border-color: rgba(255, 176, 0, 0.4); } +.server-badge.firebase_failover { color: #ff3b3b; text-shadow: 0 0 8px #ff3b3b; border-color: rgba(255, 59, 59, 0.4); animation: badgeBlink 1.5s infinite ease-in-out; } + +/* --- GNB --- */ +.auth-nav { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + gap: 12px 20px; + padding: 15px clamp(12px, 4vw, 40px); + background: #000; + border-bottom: 1px solid var(--tui-border); +} +.nav-left { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; } +.nav-menu { display: flex; flex-wrap: wrap; gap: 20px; } +.menu-btn { background: none; border: none; color: var(--tui-dim); font-size: 16px; cursor: pointer; transition: 0.3s; } +.menu-btn:hover, .menu-btn.active { color: var(--tui-color); text-shadow: 0 0 10px var(--tui-color); } +.auth-group { display: flex; align-items: center; flex-wrap: wrap; } + +.nav-item { + color: var(--tui-color) !important; text-decoration: none; background: none; + border: 1px solid var(--tui-color) !important; padding: 6px 18px; margin-left: 10px; + cursor: pointer; font-size: 13px; box-shadow: 0 0 5px var(--tui-border); transition: 0.3s; +} +.nav-item:hover, .nav-item.active-auth { + background: var(--tui-border) !important; color: var(--tui-color) !important; box-shadow: 0 0 10px var(--tui-color); +} +.user-info { color: var(--tui-dim) !important; font-size: 12px; margin-right: 15px; letter-spacing: 1px;} +.status-dot { width: 8px; height: 8px; background: #ff3b3b; border-radius: 50%; box-shadow: 0 0 8px #ff3b3b; transition: 0.5s; } +.status-dot.secure-mode { background: var(--tui-color); box-shadow: 0 0 8px var(--tui-color); } + +/* --- 컨텐츠 영역 --- */ +.content-area { flex: 1; padding: 8px 20px; min-height: 220px; overflow-y: auto; display: flex; flex-direction: column; } +.sub-page { max-width: 1000px; margin: 0 auto; padding-top: 15px; width: 100%; } +.page-title { border-bottom: 1px solid var(--tui-border); padding-bottom: 10px; margin-bottom: 20px; color: var(--tui-color);} + +.main-page { display: flex; justify-content: center; align-items: center; flex: 1; position: relative; } + +.tui-global-overlay { + position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; + background-color: rgba(0, 0, 0, 0.88); z-index: 9999; display: flex; + justify-content: center; align-items: center; pointer-events: all; +} + +.ascii-container { width: 100%; overflow-x: auto; overflow-y: hidden; padding: 6px 20px; box-sizing: border-box; position: relative; } +.ascii-clip { width: max-content; margin: 0 auto; overflow: hidden; } +.ascii-art { + font-weight: bold; white-space: pre; display: block; margin: 0 auto; width: max-content; + color: var(--tui-color) !important; font-size: 14px; line-height: 1.2; + border: none; background: transparent; transform-origin: center; opacity: 1; + animation: once-cyber-glitch-wobble 2.5s linear 1 forwards !important; +} + +.bg-block { color: #050505 !important; text-shadow: none !important; } + +/* 📺 유튜브 그리드 레이아웃 */ +#videos-container { + display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; + padding: 10px 20px; max-width: 1300px; margin: 0 auto; width: 100%; box-sizing: border-box; +} +.video-card { + width: 100%; background: #000; padding: 10px; border: 1px solid var(--tui-border); box-sizing: border-box; + position: relative; cursor: pointer; transition: 0.3s; +} +.video-card:hover { border-color: var(--tui-color); box-shadow: 0 0 10px var(--tui-border); } +.video-title { color: var(--tui-dim); margin-top: 10px; font-size: 14px; height: 40px; overflow: hidden; font-family: sans-serif; } +iframe { width: 100%; height: 180px; border-radius: 4px; } + +/* 보안 로그인 프레임 */ +.login-terminal-frame { + max-width: 550px; margin: 40px auto; border: 1px dashed var(--tui-color); padding: 35px; + background: #020a02; box-shadow: 0 0 15px var(--tui-border); box-sizing: border-box; +} +.login-gate-title { color: var(--tui-color); font-size: 20px; margin-bottom: 10px; font-weight: bold;} +.login-gate-desc { color: var(--tui-dim); font-size: 12px; margin-bottom: 30px; line-height: 1.4; } +.login-form-form { display: flex; flex-direction: column; gap: 20px; } +.login-input-group { display: flex; align-items: center; border-bottom: 1px solid var(--tui-dim); padding-bottom: 5px; } +.login-label { width: 120px; color: var(--tui-color); font-weight: bold; font-size: 14px; flex-shrink: 0; } +.login-input { flex: 1; background: none; border: none; color: var(--tui-color); font-size: 15px; outline: none; min-width: 0; } +.login-submit-btn { + margin-top: 15px; background: none; border: 1px solid var(--tui-color); + color: var(--tui-color); padding: 12px; font-size: 14px; font-weight: bold; cursor: pointer; transition: 0.3s; +} +.login-submit-btn:hover { background: var(--tui-color); color: #000; box-shadow: 0 0 15px var(--tui-color); } + +/* 프로젝트, 어바웃, 연락처 등 */ +.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } +.project-item { border: 1px solid var(--tui-border); padding: 15px; background: #080808; } +.item-header { font-weight: bold; margin-bottom: 10px; color: var(--tui-color); } +.about-text { line-height: 2; color: var(--tui-dim);} +.contact-form { line-height: 2; color: var(--tui-dim);} + +/* 애니메이션 트랜지션 */ +.fade-enter-active, .fade-leave-active { transition: opacity 0.25s ease; } +.fade-enter-from, .fade-leave-to { opacity: 0; } + +/* 하단 CRT 터미널 */ +.crt-monitor-frame { height: 300px; margin: 6px 40px 14px; border: 2px solid #1a1a1a; background: #0a0a0a; overflow: hidden; } +.monitor-header { background: #151515; padding: 5px 15px; color: #555; display: flex; justify-content: space-between; font-size: 12px;} +.monitor-status { color: var(--tui-dim); animation: blink 2s infinite; } +.crt-screen-overlay { position: relative; height: calc(100% - 30px); background: #020802; } +.crt-screen-overlay::before { + content: " "; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; + background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); + z-index: 2; background-size: 100% 4px, 6px 100%; pointer-events: none; +} +.terminal-box { width: 100%; height: 100%; padding: 10px; box-sizing: border-box; } + +/* ============================================================== + 진행률 바 (TuiProgressBar.vue) + ============================================================== */ +.tui-window { + background-color: #000000 !important; + color: var(--tui-color) !important; + font-family: 'JetBrains Mono', monospace !important; + padding: 20px !important; + border-radius: 4px !important; + border: 1px solid var(--tui-color) !important; + box-shadow: 0 0 15px var(--tui-border) !important; + display: inline-block; + min-width: 520px; box-sizing: border-box; } -#center { - display: flex; - flex-direction: column; - gap: 25px; - place-content: center; - place-items: center; - flex-grow: 1; - - @media (max-width: 1024px) { - padding: 32px 20px 24px; - gap: 18px; - } +.tui-header { + color: var(--tui-dim) !important; + margin-bottom: 15px !important; + font-size: 14px !important; } -#next-steps { - display: flex; - border-top: 1px solid var(--border); - text-align: left; +.tui-cmd { + color: #ffffff !important; + margin-left: 5px !important; +} - & > div { - flex: 1 1 0; - padding: 32px; - @media (max-width: 1024px) { - padding: 24px 20px; - } - } +.tui-bar-row { + font-size: 20px !important; + letter-spacing: 1px !important; + white-space: pre !important; + display: flex !important; + align-items: center !important; +} - .icon { - margin-bottom: 16px; - width: 22px; - height: 22px; - } +.tui-bracket { + color: var(--tui-dim) !important; +} - @media (max-width: 1024px) { +.tui-bar { + color: var(--tui-color) !important; + text-shadow: 0 0 5px var(--tui-glow) !important; +} + +.tui-percent { + color: #ffffff !important; + margin-left: 12px !important; + font-weight: bold !important; +} + +.tui-status-row { + margin-top: 15px !important; + font-size: 14px !important; + border-top: 1px dotted var(--tui-border) !important; + padding-top: 10px !important; +} + +.tui-label { + color: var(--tui-dim) !important; + margin-right: 8px !important; +} + +.tui-message { + color: #ffffff !important; + word-break: break-all !important; +} + +/* ============================================================== + 시스템 알림 (TuiAlert.vue) — alert() 공통 대체 컴포넌트 + ============================================================== */ +.tui-alert-window { + background-color: #000000 !important; + color: var(--tui-color) !important; + font-family: 'JetBrains Mono', monospace !important; + padding: 25px !important; + border-radius: 4px !important; + border: 1px solid var(--tui-color) !important; + box-shadow: 0 0 15px var(--tui-border) !important; + min-width: 320px; + max-width: 90vw; + box-sizing: border-box; + text-align: center; +} + +.tui-alert-header { + color: var(--tui-dim) !important; + margin-bottom: 15px !important; + font-size: 13px !important; + letter-spacing: 1px; +} + +.tui-alert-body { + color: #ffffff !important; + font-size: 14px; + line-height: 1.6; + margin-bottom: 20px; + word-break: break-word; + white-space: pre-line; +} + +.tui-alert-btn { + background: none !important; + border: 1px solid var(--tui-color) !important; + color: var(--tui-color) !important; + padding: 8px 24px !important; + font-size: 13px !important; + font-weight: bold !important; + cursor: pointer; + transition: 0.3s; + font-family: 'JetBrains Mono', monospace !important; +} +.tui-alert-btn:hover { + background: var(--tui-color) !important; + color: #000 !important; + box-shadow: 0 0 15px var(--tui-color); +} + +/* ============================================================== + 로그인 페이지 (Login.vue) + ============================================================== */ +.login-container { display: flex; justify-content: center; align-items: center; height: 100vh; background: #0f172a; } +.login-box { background: white; padding: 40px; border-radius: 8px; width: 350px; text-align: center; } +.login-box input { width: 100%; padding: 12px; margin: 10px 0; box-sizing: border-box; border: 1px solid #cbd5e1; border-radius: 4px; } +.login-box button { width: 100%; padding: 12px; background: #3b82f6; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; } +.login-box button:hover { background: #2563eb; } +.login-box .error { color: #ef4444; margin-top: 15px; font-size: 14px; } + +/* ============================================================== + 📱 반응형 분기점 (Responsive Design) + ============================================================== */ +@media screen and (max-width: 1100px) { + #videos-container { grid-template-columns: repeat(2, 1fr); } + .project-grid { grid-template-columns: repeat(2, 1fr); } +} + +@media screen and (max-width: 650px) { + /* 1. 레이아웃 & 패딩 초기화 */ + .content-area { padding: 10px; } + #videos-container { grid-template-columns: 1fr; padding: 10px; } + .project-grid { grid-template-columns: 1fr; } + + /* 2. 네비게이션바 줄바꿈 허용 (화면 밖으로 넘어가지 않게 방어) */ + .auth-nav { flex-direction: column; + gap: 15px; + padding: 15px 10px; /* 좌우 패딩 줄임 */ + align-items: stretch; /* 전체 너비 채우기 */ + } + .nav-left { + flex-wrap: wrap; /* 배지, 통계 등이 좁으면 아래로 줄바꿈 */ + justify-content: center; text-align: center; + gap: 10px; + width: 100%; } -} - -#docs { - border-right: 1px solid var(--border); - - @media (max-width: 1024px) { - border-right: none; - border-bottom: 1px solid var(--border); - } -} - -#next-steps ul { - list-style: none; - padding: 0; - display: flex; - gap: 8px; - margin: 32px 0 0; - - .logo { - height: 18px; - } - - a { - color: var(--text-h); - font-size: 16px; - border-radius: 6px; - background: var(--social-bg); + .nav-menu { display: flex; - padding: 6px 12px; - align-items: center; - gap: 8px; - text-decoration: none; - transition: box-shadow 0.3s; - - &:hover { - box-shadow: var(--shadow); - } - .button-icon { - height: 18px; - width: 18px; - } - } - - @media (max-width: 1024px) { - margin-top: 20px; + gap: 12px 16px; flex-wrap: wrap; justify-content: center; + width: 100%; + } + .menu-btn { font-size: 14px; } - li { - flex: 1 1 calc(50% - 8px); - } + .auth-group { width: 100%; justify-content: center; margin-top: 5px; flex-wrap: wrap; gap: 10px; } + .nav-item { margin: 0; } /* 간격 조정 */ - a { - width: 100%; - justify-content: center; - box-sizing: border-box; - } + /* 3. 로그인 폼 세로 배치 (글씨가 겹치는 것 방지) */ + .login-terminal-frame { + margin: 15px 5px; + padding: 20px 15px; /* 모바일에서는 여백을 좁게 */ + } + .login-input-group { + flex-direction: column; /* 라벨과 인풋을 위아래로 배치 */ + align-items: flex-start; + border-bottom: none; /* 하단 선 제거 */ + gap: 8px; + } + .login-label { width: 100%; font-size: 13px; } + .login-input { + width: 100%; + border-bottom: 1px solid var(--tui-dim); + padding-bottom: 5px; + border-radius: 0; + } + + /* 4. ASCII 아트 가독성 및 가로 스크롤 허용 */ + .ascii-container { + padding: 10px 5px; + } + .ascii-art { + font-size: 9px !important; /* 모바일 사이즈에 맞게 축소 */ + line-height: 1.2 !important; + } + + /* 5. 터미널 창 모바일 최적화 */ + .crt-monitor-frame { + height: 180px !important; + margin: 6px 10px !important; + } + .monitor-header { padding: 4px 10px; font-size: 10px; } + + /* 6. 진행률 바 모바일 최적화 */ + .tui-window { + min-width: 90vw !important; + padding: 15px !important; + } + .tui-bar-row { + font-size: 14px !important; } } -#spacer { - height: 88px; - border-top: 1px solid var(--border); - @media (max-width: 1024px) { - height: 48px; - } -} - -.ticks { - position: relative; - width: 100%; - - &::before, - &::after { - content: ''; - position: absolute; - top: -4.5px; - border: 5px solid transparent; - } - - &::before { - left: 0; - border-left-color: var(--border); - } - &::after { - right: 0; - border-right-color: var(--border); - } +/* ============================================================== + 키프레임 애니메이션 + ============================================================== */ +@keyframes blink { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } +@keyframes textPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; text-shadow: 0 0 8px var(--tui-glow); } } +@keyframes badgeBlink { 0%, 100% { opacity: 0.6; box-shadow: 0 0 5px rgba(255, 59, 59, 0.2); } 50% { opacity: 1; box-shadow: 0 0 15px rgba(255, 59, 59, 0.6); text-shadow: 0 0 12px #ff3b3b; } } +@keyframes once-cyber-glitch-wobble { + 0%, 25% { transform: translate(0) scale(1) skewX(0deg); color: var(--tui-color) !important; text-shadow: 0 0 8px var(--tui-glow) !important; opacity: 1; } + 26% { transform: translate(-3px, 1.5px) scale(1.02); color: #ffffff !important; text-shadow: 2px 0 #ff0000, -2px 0 #0000ff !important; } + 27% { transform: translate(3px, -1.5px) skewX(-2deg); color: var(--tui-color) !important; } + 28% { transform: translate(-5px, 0) skewX(10deg); color: #ff00ff !important; text-shadow: -3px 0 magenta, 3px 0 cyan;} + 29% { transform: translate(5px, 0) skewX(-10deg); color: #00ffff !important; text-shadow: 3px 0 magenta, -3px 0 cyan;} + 30% { transform: translate(0); color: var(--tui-color) !important; text-shadow: 0 0 15px var(--tui-color) !important;} + 31%, 50% { transform: translate(0); color: var(--tui-color) !important; text-shadow: 0 0 8px var(--tui-glow) !important;} + 51% { transform: scale(1.05) skewY(1deg); color: #ffffff !important; opacity: 0.05; } + 53% { opacity: 1; transform: translate(0); color: var(--tui-color) !important; text-shadow: 0 0 20px var(--tui-color), 0 0 40px var(--tui-glow) !important; } + 90% { transform: translate(-2px, 1px); text-shadow: 2px 0 red, -2px 0 blue;} + 92% { transform: translate(2px, -1px); text-shadow: -2px 0 red, 2px 0 blue;} + 95% { transform: translate(0); color: var(--tui-color) !important; text-shadow: 0 0 20px var(--tui-color) !important;} + 100% { transform: translate(0) scale(1) skewX(0deg); color: var(--tui-color) !important; text-shadow: 0 0 2px var(--tui-color) !important; opacity: 1; } } diff --git a/src/views/Login.vue b/src/views/Login.vue index 483b854..8510046 100644 --- a/src/views/Login.vue +++ b/src/views/Login.vue @@ -38,12 +38,3 @@ const handleLogin = async () => { } } - - \ No newline at end of file diff --git a/src/views/Main.vue b/src/views/Main.vue index b8d5e00..c0eae67 100644 --- a/src/views/Main.vue +++ b/src/views/Main.vue @@ -14,10 +14,12 @@ @@ -49,7 +51,9 @@
- 

+            

+              

+            

           

         

 
@@ -148,6 +152,12 @@
         
       
     
+
+    
+      

+        
+      

+    
   
 
 
@@ -155,6 +165,7 @@
 import { ref, onMounted, onUnmounted, computed, watch } from 'vue';
 import axios from 'axios';
 import TuiProgressBar from '@/components/TuiProgressBar.vue';
+import TuiAlert from '@/components/TuiAlert.vue';
 
 const videos = ref([]);
 const terminalRef = ref(null);
@@ -166,7 +177,7 @@ const loginPw = ref('');
 const activeMenu = ref('main');
 const authToken = ref(localStorage.getItem('token'));
 const currentUsername = ref(localStorage.getItem('username') || '');
-const VALID_THEMES = ['green', 'amber', 'vga', 'ega'];
+const VALID_THEMES = ['green', 'amber', 'vga', 'ega', 'white', 'plasma'];
 const storedTheme = localStorage.getItem('theme');
 const activeTheme = ref(VALID_THEMES.includes(storedTheme) ? storedTheme : 'green');
 
@@ -178,6 +189,11 @@ const isProcessing = ref(false);
 const overlayProgress = ref(0);
 const overlayStatus = ref('');
 
+const systemAlert = ref({ show: false, message: '' });
+const showSystemAlert = (message) => {
+  systemAlert.value = { show: true, message };
+};
+
 const todayUnique = ref(0);
 const activeNow = ref(0);
 let analyticsTimer = null;
@@ -327,7 +343,7 @@ const fetchVideos = async () => {
 };
 
 const openVideo = (id) => window.open(`https://www.youtube.com/watch?v=${id}`);
-const handleRegister = () => alert("회원가입은 현재 관리자 승인제로 운영됩니다.");
+const handleRegister = () => showSystemAlert("회원가입은 현재 관리자 승인제로 운영됩니다.");
 
 const handleLogout = () => {
   localStorage.removeItem('token');
@@ -343,7 +359,7 @@ const handleLogout = () => {
 
 const handleLoginSubmit = async () => {
   if (!loginId.value || !loginPw.value) {
-    alert("아이디와 비밀번호를 모두 입력해 주세요.");
+    showSystemAlert("아이디와 비밀번호를 모두 입력해 주세요.");
     return;
   }
 
@@ -400,7 +416,7 @@ const handleLoginSubmit = async () => {
     if (termInstance.value) {
       termInstance.value.echo(`[[b;red;][CRITICAL ERROR]] ACCESS DENIED! INVALID ACCESS KEY.`);
     }
-    alert("인증에 실패했습니다. 액세스 키를 확인하세요.");
+    showSystemAlert("인증에 실패했습니다. 액세스 키를 확인하세요.");
   }
 };
 
@@ -505,315 +521,3 @@ onUnmounted(() => {
   if (analyticsTimer) clearInterval(analyticsTimer);
 });
 
-
-
-
-
\ No newline at end of file