diff --git a/src/views/Main.vue b/src/views/Main.vue index 3665efe..f2e8d6a 100644 --- a/src/views/Main.vue +++ b/src/views/Main.vue @@ -158,7 +158,7 @@ const loginPw = ref('1234'); const activeMenu = ref('main'); const authToken = ref(localStorage.getItem('token')); -// 🟒 [NEW] 메뉴 μ•„μ΄ν…œ 배열에 YOUTUBE λͺ…μ‹œμ μœΌλ‘œ 배치 +// 메뉴 μ•„μ΄ν…œ λ°°μ—΄ const menuItems = [ { id: 'main', name: 'HOME' }, { id: 'youtube', name: 'YOUTUBE' }, @@ -324,32 +324,39 @@ onMounted(() => { .sub-page { max-width: 1000px; margin: 0 auto; padding-top: 15px; width: 100%; } .page-title { font-family: monospace; border-bottom: 1px solid #113311; padding-bottom: 10px; margin-bottom: 20px; color: #00ff00;} -/* 🟒 [NEW] 메인 ν™ˆ μ•„μŠ€ν‚€ μ „κ΄‘νŒ μ „μš© μŠ€νƒ€μΌ 클래슀 양식 */ +/* 메인 ν™ˆ μ•„μŠ€ν‚€ μ „κ΄‘νŒ λ ˆμ΄μ•„μ›ƒ */ .main-page { display: flex; justify-content: center; align-items: center; flex: 1; + position: relative; } .ascii-container { width: 100%; - overflow-x: auto; + overflow: auto; padding: 20px; box-sizing: border-box; + position: relative; } .ascii-art { font-family: 'Courier New', Courier, monospace !important; - color: #33ff33 !important; - line-height: 1.25; - font-size: 13px; font-weight: bold; - text-shadow: 0 0 8px rgba(51, 255, 51, 0.8) !important; - background: transparent; - border: none; - margin: 0 auto; white-space: pre; display: block; + margin: 0 auto; width: max-content; + + /* 🟒 [핡심 μ˜€λ²„λΌμ΄λ“œ] λ„νŠΈ λ‹¨μœ„ 흔듀림과 ν™”λ €ν•œ RGB μŠ€ν”Œλ¦Ώ μ• λ‹ˆλ©”μ΄μ…˜ */ + color: #00ff00 !important; /* 베이슀 색상 κ°•μ œ */ + font-size: 14px; + line-height: 1.2; + border: none; + background: transparent; + transform-origin: center; + + /* 🌟 압도적인 쑴재감의 μ• λ‹ˆλ©”μ΄μ…˜ 적용 (2초 주기둜 폭발적인 λ°˜μ§μž„) */ + animation: extreme-cyber-glitch-wobble 2s linear infinite !important; } /* πŸ“Ί 유튜브 κ·Έλ¦¬λ“œ λ ˆμ΄μ•„μ›ƒ */ @@ -376,12 +383,6 @@ onMounted(() => { .video-title { color: #00aa00; margin-top: 10px; font-size: 14px; height: 40px; overflow: hidden; font-family: sans-serif; } iframe { width: 100%; height: 180px; border-radius: 4px; } -.new-item::before { - content: 'NEW'; position: absolute; top: -5px; left: -5px; - background: #00ff00; color: #000; font-size: 10px; font-weight: bold; - padding: 2px 5px; box-shadow: 0 0 5px #00ff00; z-index: 10; -} - /* λ³΄μ•ˆ 둜그인 ν”„λ ˆμž„ */ .login-terminal-frame { max-width: 550px; margin: 40px auto; @@ -398,7 +399,6 @@ iframe { width: 100%; height: 180px; border-radius: 4px; } flex: 1; background: none; border: none; color: #00ff00; font-family: 'Courier New', Courier, monospace; font-size: 15px; outline: none; } -.login-input::placeholder { color: #004400; } .login-submit-btn { margin-top: 15px; background: none; border: 1px solid #00ff00; color: #00ff00; padding: 12px; font-family: 'Courier New', Courier, monospace; @@ -406,7 +406,7 @@ iframe { width: 100%; height: 180px; border-radius: 4px; } } .login-submit-btn:hover { background: #00ff00; color: #000; box-shadow: 0 0 15px #00ff00; } -/* ν”„λ‘œμ νŠΈ 리슀트 및 기타 μ†Œν˜• μš”μ†Œ */ +/* ν”„λ‘œμ νŠΈ 리슀트 */ .project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .project-item { border: 1px solid #113311; padding: 15px; background: #080808; font-family: monospace;} .item-header { font-weight: bold; margin-bottom: 10px; color: #00ff00; } @@ -437,7 +437,7 @@ iframe { width: 100%; height: 180px; border-radius: 4px; } text-shadow: 0 0 5px rgba(51, 255, 51, 0.6) !important; } -/* πŸ“± λ°˜μ‘ν˜• 처리 */ +/* πŸ“± λ°˜μ‘ν˜• 뢄기점 */ @media screen and (max-width: 1100px) { #videos-container { grid-template-columns: repeat(2, 1fr); } .project-grid { grid-template-columns: repeat(2, 1fr); } @@ -446,7 +446,85 @@ iframe { width: 100%; height: 180px; border-radius: 4px; } #videos-container { grid-template-columns: 1fr; } .project-grid { grid-template-columns: 1fr; } .auth-nav { flex-direction: column; gap: 12px; padding: 15px 20px; } - .ascii-art { font-size: 8px; /* λͺ¨λ°”일 λŒ€μ‘ 크기 μΆ•μ†Œ */ } + .ascii-art { font-size: 7px; line-height: 1.1; } } @keyframes blink { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } + +/* 🟒 [NEW] μ••λ„μ μœΌλ‘œ ν‹°κ°€ λ‚˜λŠ” "읡슀트림 사이버 κΈ€λ¦¬μΉ˜ Wobble" μ• λ‹ˆλ©”μ΄μ…˜ μ •μ˜ */ +@keyframes extreme-cyber-glitch-wobble { + /* [정상 ꡬ간 - 20%] μ°¨λΆ„ν•˜κ²Œ μ‹œμž‘ */ + 0%, 10%, 100% { + transform: translate(0) scale(1) skewX(0deg); + color: #00ff00 !important; + text-shadow: 0 0 8px rgba(0, 255, 0, 0.7) !important; + opacity: 1; + } + + /* [슀파이크 ꡬ간 1] μˆœμ‹κ°„μ— ν‹°κ°€ 팍팍 λ‚˜λŠ” RGB 팝 */ + 11% { + transform: translate(-3px, 1.5px) scale(1.02) skewX(2deg); + color: #ffffff !important; /* μ™„μ „ ν•˜μ–€μƒ‰μœΌλ‘œ ν•œμˆœκ°„ 팝! */ + text-shadow: 2px 0 #ff0000, -2px 0 #0000ff !important; /* 리얼 RGB μŠ€ν”Œλ¦Ώ */ + opacity: 0.95; + } + + /* [볡ꡬ 1] λΉ λ₯΄κ²Œ μ˜€λ¦¬μ§€λ„ ν˜•κ΄‘ κ·Έλ¦° 볡귀 */ + 13% { + transform: translate(3px, -1.5px) scale(0.98) skewX(-2deg); + color: #00ff00 !important; + text-shadow: 0 0 15px rgba(0, 255, 0, 1) !important; + } + + /* [정상 μœ μ§€] 쑰금 κΈ΄ 호흑 */ + 15%, 25% { + transform: translate(0); + text-shadow: 0 0 8px rgba(0, 255, 0, 0.7) !important; + } + + /* [λΉ… κΈ€λ¦¬μΉ˜ 타이밍 1 - 색상 λ°˜μ „] */ + 26% { + transform: translate(0); + color: #00ffff !important; /* 사이버 μ²­λ‘μƒ‰μœΌλ‘œ 색상 ν™• νŠ€κ²Œ λ³€ν™˜ */ + text-shadow: 0 0 20px #00ffff, 0 0 40px rgba(0, 255, 255, 0.8) !important; + opacity: 1; + } + + /* [μ΄ˆκ³ μ† 지지직] 0.02초 λ‹¨μœ„ λ„νŠΈ λ‹¨μœ„ 흔듀림 */ + 27% { transform: translate(-5px, 0) skewX(10deg); color: #ff00ff !important; text-shadow: -3px 0 magenta, 3px 0 cyan;} + 28% { transform: translate(5px, 0) skewX(-10deg); color: #00ffff !important; text-shadow: 3px 0 magenta, -3px 0 cyan;} + + /* [볡ꡬ 2] λ‹€μ‹œ 베이슀 λ…Ήμƒ‰μœΌλ‘œ 터미널 μˆ¨μ‰¬κΈ° */ + 29% { + transform: translate(0); + color: #00ff00 !important; + text-shadow: 0 0 8px rgba(0, 255, 0, 0.7) !important; + } + + /* [μ•ˆμ •ν™”] */ + 30%, 40% { transform: translate(0); } + + /* [νŽ„μŠ€ μ•”μ „ 타이밍 - ν•˜λ“œμ›¨μ–΄ 지지직] */ + 41% { + transform: scale(1.05) skewY(1deg); + color: #ffffff !important; + opacity: 0.1; /* μ™„μ „ 꺼지기 직전 μ‹œμŠ€ν…œ 였λ₯˜ */ + } + + /* [μ•”μ „ 볡ꡬ] */ + 42% { + opacity: 1; + color: #00ff00 !important; + } + + /* [색상 λŒ€λ°˜μ „ 2 - ν˜•κ΄‘ 연두] */ + 55% { + color: #bfff00 !important; /* κ°•λ ¬ν•œ μ‚°μ„± 황둝색 */ + text-shadow: 0 0 15px #bfff00, 0 0 30px rgba(191, 255, 0, 0.7) !important; + } + + /* [μ΅œμ’… κΈ€λ¦¬μΉ˜ 루프 μ‹œμž‘] */ + 90% { transform: translate(0); } + 91% { transform: translate(-2px, 0); color: #ff00ff !important; text-shadow: 2px 0 red, -2px 0 blue;} + 92% { transform: translate(2px, 0); color: #00ffff !important; text-shadow: -2px 0 red, 2px 0 blue;} +} \ No newline at end of file