mirror of
https://github.com/headporter81/specialsource-homepage-frontend.git
synced 2026-08-08 15:21:11 +09:00
607 lines
24 KiB
Vue
607 lines
24 KiB
Vue
<template>
|
|
<div class="homepage-wrapper">
|
|
<nav class="auth-nav">
|
|
<div class="nav-left">
|
|
<span class="status-dot" :class="{ 'secure-mode': isLoggedIn }"></span>
|
|
<span class="brand">SPECIALSOURCE.SYSTEM</span>
|
|
</div>
|
|
|
|
<div class="nav-menu">
|
|
<button
|
|
v-for="item in menuItems"
|
|
:key="item.id"
|
|
@click="changeMenu(item.id)"
|
|
:class="['menu-btn', { active: activeMenu === item.id }]"
|
|
>
|
|
{{ item.name }}
|
|
</button>
|
|
</div>
|
|
|
|
<div class="nav-right">
|
|
<div v-if="!isLoggedIn" class="auth-group">
|
|
<button @click="changeMenu('login')" :class="['nav-item', { 'active-auth': activeMenu === 'login' }]">LOGIN</button>
|
|
<button @click="handleRegister" class="nav-item btn-reg">SIGN UP</button>
|
|
</div>
|
|
<div v-else class="auth-group">
|
|
<span class="user-info">ACCESS GRANTED: ADMIN</span>
|
|
<button @click="handleLogout" class="nav-item btn-logout">LOGOUT</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="content-area">
|
|
<transition name="fade" mode="out-in">
|
|
|
|
<div v-if="activeMenu === 'main'" class="sub-page main-page" key="main">
|
|
<div class="ascii-container">
|
|
<pre class="ascii-art">
|
|
███████╗██████╗ ███████╗ ██████╗██╗ █████╗ ██╗
|
|
██╔════╝██╔══██╗██╔════╝██╔════╝██║██╔══██╗██║
|
|
███████╗██████╔╝█████╗ ██║ ██║███████║██║
|
|
╚════██║██╔═══╝ ██╔══╝ ██║ ██║██╔══██║██║
|
|
███████║██║ ███████╗╚██████╗██║██║ ██║███████╗
|
|
╚══════╝╚═╝ ╚══════╝ ╚═════╝╚═╝╚═╝ ╚═╝╚══════╝
|
|
███████╗██████╗ ██╗ ██╗██████╗ ██████╗███████╗
|
|
██╔════╝██╔═══██╗██║ ██║██╔══██╗██╔════╝██╔════╝
|
|
███████╗██║ ██║██║ ██║██████╔╝██║ █████╗
|
|
╚════██║██║ ██║██║ ██║██╔══██╗██║ ██╔══╝
|
|
███████║╚██████╔╝╚██████╔╝██║ ██║╚██████╗███████╗
|
|
╚══════╝ ╚═════╝ ╚═════╝ ╚═╝ ╚═╝ ╚═════╝╚══════╝
|
|
██████╗ ██████╗ ███╗ ███╗██████╗ █████╗ ███╗ ██╗██╗ ██╗
|
|
██╔════╝██╔═══██╗████╗ ████║██╔══██╗██╔══██╗████╗ ██║╚██╗ ██╔╝
|
|
██║ ██║ ██║██╔████╔██║██████╔╝███████║██╔██╗ ██║ ╚████╔╝
|
|
██║ ██║ ██║██║╚██╔╝██║██╔═══╝ ██╔══██║██║╚██╗██║ ╚██╔╝
|
|
╚██████╗╚██████╔╝██║ ╚═╝ ██║██║ ██║ ██║██║ ╚████║ ██║
|
|
╚═════╝ ╚═════╝ ╚═╝ ╚═╝╚═╝ ╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═╝
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else-if="activeMenu === 'youtube'" id="videos-container" key="youtube">
|
|
<div
|
|
v-for="(video, index) in videos"
|
|
:key="video.id.videoId"
|
|
class="video-card"
|
|
:class="{ 'new-item': index === 0 }"
|
|
@click="openVideo(video.id.videoId)"
|
|
>
|
|
<iframe
|
|
:src="`https://www.youtube-nocookie.com/embed/${video.id.videoId}`"
|
|
frameborder="0"
|
|
allowfullscreen
|
|
></iframe>
|
|
<h5 class="video-title">{{ video.snippet.title }}</h5>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else-if="activeMenu === 'login'" class="sub-page login-page" key="login">
|
|
<div class="login-terminal-frame">
|
|
<h2 class="login-gate-title">> SECURE_AUTHENTICATION_GATEWAY.EXE</h2>
|
|
<p class="login-gate-desc">WARNING: UNAUTHORIZED ACCESS IS STRICTLY PROHIBITED BY COMPLIANCE LAW.</p>
|
|
|
|
<div class="login-form-form">
|
|
<div class="login-input-group">
|
|
<label class="login-label">ACCESS ID_</label>
|
|
<input
|
|
v-model="loginId"
|
|
type="text"
|
|
class="login-input"
|
|
placeholder="ENTER ACCESS ID"
|
|
@keyup.enter="handleLoginSubmit"
|
|
/>
|
|
</div>
|
|
<div class="login-input-group">
|
|
<label class="login-label">ACCESS KEY_</label>
|
|
<input
|
|
v-model="loginPw"
|
|
type="password"
|
|
class="login-input"
|
|
placeholder="ENTER ENCRYPTION KEY"
|
|
@keyup.enter="handleLoginSubmit"
|
|
/>
|
|
</div>
|
|
<button @click="handleLoginSubmit" class="login-submit-btn">
|
|
[ INITIALIZE DECRYPT & ACCESS ]
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else-if="activeMenu === 'project'" class="sub-page project-page" key="project">
|
|
<h2 class="page-title">> EXECUTING PROJECTS_LOG.EXE</h2>
|
|
<div class="project-grid">
|
|
<div class="project-item" v-for="i in 3" :key="i">
|
|
<div class="item-header">PROJ_00{{i}}</div>
|
|
<p>스페셜소스 자동 배포 시스템 고도화 프로젝트 진행 중...</p>
|
|
<div class="status">STATUS: COMPLETED</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else-if="activeMenu === 'about'" class="sub-page about-page" key="about">
|
|
<h2 class="page-title">> ACCESSING CORE_IDENTITY.DAT</h2>
|
|
<p class="about-text">
|
|
스페셜소스는 2021년 설립된 기술 중심의 컴퍼니입니다.<br>
|
|
우리는 인프라 자동화와 효율적인 배포 파이프라인을 구축하여<br>
|
|
개발자가 비즈니스 로직에만 집중할 수 있는 환경을 만듭니다.
|
|
</p>
|
|
</div>
|
|
|
|
<div v-else-if="activeMenu === 'contact'" class="sub-page contact-page" key="contact">
|
|
<h2 class="page-title">> INITIALIZING ENCRYPTED_COMM.INK</h2>
|
|
<div class="contact-form">
|
|
<p>EMAIL: specialsource.company@gmail.com</p>
|
|
<p>LOCATION: SEOUL, SOUTH KOREA</p>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</main>
|
|
|
|
<div class="crt-monitor-frame">
|
|
<div class="monitor-header">
|
|
<span class="monitor-title">📟 SECURE TERMINAL CONSOLE V3.2 [ROOT/{{ activeMenu.toUpperCase() }}]</span>
|
|
<span class="monitor-status">ACTIVE</span>
|
|
</div>
|
|
<div class="crt-screen-overlay">
|
|
<div ref="terminalRef" class="terminal-box"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<transition name="fade">
|
|
<div v-if="isProcessing" class="tui-global-overlay">
|
|
<TuiProgressBar :progress="overlayProgress" :status="overlayStatus" />
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, computed } from 'vue';
|
|
import axios from 'axios';
|
|
import TuiProgressBar from '@/components/TuiProgressBar.vue';
|
|
|
|
const videos = ref([]);
|
|
const terminalRef = ref(null);
|
|
const termInstance = ref(null);
|
|
|
|
const loginId = ref('');
|
|
const loginPw = ref('');
|
|
|
|
const activeMenu = ref('main');
|
|
const authToken = ref(localStorage.getItem('token'));
|
|
|
|
// 글로벌 오버레이 레이어 상태 관리 변수
|
|
const isProcessing = ref(false);
|
|
const overlayProgress = ref(0);
|
|
const overlayStatus = ref('');
|
|
|
|
// 메뉴 아이템 배열
|
|
const menuItems = [
|
|
{ id: 'main', name: 'HOME' },
|
|
{ id: 'youtube', name: 'YOUTUBE' },
|
|
{ id: 'project', name: 'PROJECT' },
|
|
{ id: 'about', name: 'ABOUT' },
|
|
{ id: 'contact', name: 'CONTACT' }
|
|
];
|
|
|
|
const isLoggedIn = computed(() => !!authToken.value);
|
|
|
|
// 🟢 [UPGRADE] 메뉴 이동 시 영화 같은 TUI 로딩바 시퀀스 구동
|
|
const changeMenu = (id) => {
|
|
// 이미 열려있는 메뉴를 다시 누르면 불필요한 시퀀스 방지 차단
|
|
if (activeMenu.value === id) return;
|
|
|
|
// 1) 즉시 화면 전체를 덮고 초기 세팅
|
|
isProcessing.value = true;
|
|
overlayProgress.value = 0;
|
|
overlayStatus.value = `INITIALIZING ROUTE ACCESS: /${id.toUpperCase()}...`;
|
|
|
|
if (termInstance.value) {
|
|
termInstance.value.echo(`\n[[b;green;]>] NAVIGATING TO /${id.toUpperCase()}... INITIALIZING PIPELINE.`);
|
|
}
|
|
|
|
// 2) 400ms 동안 빠르게 게이지를 채우는 인터벌 구동 (속도 체감 굿)
|
|
const interval = setInterval(() => {
|
|
overlayProgress.value += 5;
|
|
|
|
// 진행 수치별 리눅스 해커 감성 문구 전환
|
|
if (overlayProgress.value === 25) {
|
|
overlayStatus.value = `ALLOCATING MEMORY BUFFER FOR VUE_COMPONENT...`;
|
|
}
|
|
if (overlayProgress.value === 55) {
|
|
overlayStatus.value = `DECRYPTING INTERFACE LOGS & SECURE ASSETS...`;
|
|
}
|
|
if (overlayProgress.value === 85) {
|
|
// ★ 85% 지점 오버레이 베일 뒤에서 슥 메인 콘텐츠 메뉴를 스왑!
|
|
activeMenu.value = id;
|
|
overlayStatus.value = `MOUNTING VIRTUAL DOM TREE... SUCCESS.`;
|
|
}
|
|
|
|
// 100% 도달 완료 시 종료 세팅
|
|
if (overlayProgress.value >= 100) {
|
|
clearInterval(interval);
|
|
|
|
if (termInstance.value) {
|
|
termInstance.value.echo(`[[b;green;][SUCCESS]] COMPONENT LOADED PERFECTLY.`);
|
|
}
|
|
|
|
// 여운을 약간 준 뒤 부드럽게 창 닫기
|
|
setTimeout(() => {
|
|
isProcessing.value = false;
|
|
}, 120);
|
|
}
|
|
}, 20); // 20ms * 20단계 = 총 400ms 로딩 스피드 보장
|
|
};
|
|
|
|
// 로그인 등 다른 비즈니스 로직에서 사용하는 동적 제어용 스크립트는 원본 유지
|
|
const triggerOverlayProcess = (durationMs, initialMsg) => {
|
|
isProcessing.value = true;
|
|
overlayProgress.value = 0;
|
|
overlayStatus.value = initialMsg;
|
|
|
|
const steps = 20;
|
|
const stepTime = durationMs / steps;
|
|
|
|
const interval = setInterval(() => {
|
|
if (overlayProgress.value >= 100) {
|
|
clearInterval(interval);
|
|
setTimeout(() => {
|
|
isProcessing.value = false;
|
|
}, 150);
|
|
return;
|
|
}
|
|
overlayProgress.value += (100 / steps);
|
|
}, stepTime);
|
|
};
|
|
|
|
const apiKey = 'AIzaSyD51LHwqoY8spjq6rsY_RlhBXzb96j7D6o';
|
|
const channelId = 'UC8L92ju0V88s6TcmLPb8Bkg';
|
|
const maxResults = 8;
|
|
const apiUrl = `https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=${channelId}&maxResults=${maxResults}&order=date&type=video&key=${apiKey}`;
|
|
|
|
const fetchVideos = async () => {
|
|
try {
|
|
const res = await axios.get(apiUrl);
|
|
videos.value = res.data.items || [];
|
|
} catch (err) { console.error("유튜브 로드 실패:", err); }
|
|
};
|
|
|
|
const openVideo = (id) => window.open(`https://www.youtube.com/watch?v=${id}`);
|
|
const handleRegister = () => alert("회원가입은 현재 관리자 승인제로 운영됩니다.");
|
|
|
|
const handleLogout = () => {
|
|
localStorage.removeItem('token');
|
|
authToken.value = null;
|
|
activeMenu.value = 'main';
|
|
if (termInstance.value) {
|
|
termInstance.value.echo(`\n[[b;red;][ALERT]] SESSION TERMINATED. USER LOGGED OUT.`);
|
|
}
|
|
};
|
|
|
|
const handleLoginSubmit = async () => {
|
|
if (!loginId.value || !loginPw.value) {
|
|
alert("아이디와 비밀번호를 모두 입력해 주세요.");
|
|
return;
|
|
}
|
|
|
|
isProcessing.value = true;
|
|
overlayProgress.value = 10;
|
|
overlayStatus.value = 'Transmitting encryption keys to gateway...';
|
|
|
|
if (termInstance.value) {
|
|
termInstance.value.echo(`\n[SYS] INITIALIZING SECURITY GATEWAY CONNECTION...`);
|
|
termInstance.value.echo(`[SYS] TRANSMITTING CREDENTIALS [USER: ${loginId.value}]`);
|
|
}
|
|
|
|
try {
|
|
const apiBaseUrl = import.meta.env.VITE_API_URL || '';
|
|
|
|
overlayProgress.value = 40;
|
|
overlayStatus.value = 'Validating query signature against PostgreSQL DB...';
|
|
|
|
const response = await axios.post(`${apiBaseUrl}/api/login`, {
|
|
username: loginId.value,
|
|
password: loginPw.value
|
|
}, {
|
|
withCredentials: true
|
|
});
|
|
|
|
if (response.data && response.data.token) {
|
|
overlayProgress.value = 85;
|
|
overlayStatus.value = 'Access Granted. Generating JWT Session token...';
|
|
|
|
localStorage.setItem('token', response.data.token);
|
|
authToken.value = response.data.token;
|
|
|
|
if (termInstance.value) {
|
|
termInstance.value.echo(`[[b;green;][SUCCESS]] ACCESS GRANTED. CREDENTIALS VERIFIED.`);
|
|
}
|
|
|
|
overlayProgress.value = 100;
|
|
overlayStatus.value = 'Session injection complete.';
|
|
|
|
setTimeout(() => {
|
|
isProcessing.value = false;
|
|
loginId.value = '';
|
|
loginPw.value = '';
|
|
activeMenu.value = 'main';
|
|
}, 400);
|
|
}
|
|
} catch (error) {
|
|
console.error("로그인 실패:", error);
|
|
isProcessing.value = false;
|
|
|
|
if (termInstance.value) {
|
|
termInstance.value.echo(`[[b;red;][CRITICAL ERROR]] ACCESS DENIED! INVALID ACCESS KEY.`);
|
|
}
|
|
alert("인증에 실패했습니다. 액세스 키를 확인하세요.");
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
fetchVideos();
|
|
|
|
const globaljQuery = window.$;
|
|
if (globaljQuery && terminalRef.value) {
|
|
termInstance.value = globaljQuery(terminalRef.value).terminal({
|
|
'hello': function () { this.echo('Hello, Welcome to Specialsource.company'); },
|
|
'help': function () {
|
|
this.echo(`- hello : Say hello\n- specialsource : Core info\n- email : Contact\n- clear : Clear console`);
|
|
},
|
|
'specialsource': function () { this.echo('SPECIALSOURCE Established 2021.01.'); },
|
|
'email': function () { this.echo('specialsource.company@gmail.com'); },
|
|
}, {
|
|
greetings: `[SYSTEM V3.2] INTERFACE ONLINE. TYPE 'help' FOR COMMANDS.`,
|
|
prompt: 'admin@specialsource:~$ '
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@700&display=swap');
|
|
.homepage-wrapper {
|
|
background-color: #050505;
|
|
color: #00ff00;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* --- GNB --- */
|
|
.auth-nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 15px 40px;
|
|
background: #000;
|
|
border-bottom: 1px solid rgba(0, 255, 0, 0.2);
|
|
}
|
|
.nav-menu { display: flex; gap: 20px; }
|
|
.menu-btn {
|
|
background: none; border: none; color: #008800;
|
|
font-family: monospace; font-size: 16px; cursor: pointer;
|
|
transition: 0.3s;
|
|
}
|
|
.menu-btn:hover, .menu-btn.active { color: #00ff00; text-shadow: 0 0 10px #00ff00; }
|
|
|
|
.auth-group { display: flex; align-items: center; }
|
|
|
|
.nav-item {
|
|
color: #00ff00 !important;
|
|
text-decoration: none;
|
|
background: none;
|
|
border: 1px solid #00ff00 !important;
|
|
padding: 6px 18px;
|
|
margin-left: 10px;
|
|
cursor: pointer;
|
|
font-family: 'Courier New', Courier, monospace;
|
|
font-size: 13px;
|
|
box-shadow: 0 0 5px rgba(0, 255, 0, 0.3);
|
|
transition: 0.3s;
|
|
}
|
|
.nav-item:hover, .nav-item.active-auth {
|
|
background: rgba(0, 255, 0, 0.2) !important;
|
|
color: #00ff00 !important;
|
|
box-shadow: 0 0 10px #00ff00;
|
|
}
|
|
.user-info { color: #008800 !important; font-size: 12px; margin-right: 15px; font-family: monospace; 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: #00ff00; box-shadow: 0 0 8px #00ff00; }
|
|
|
|
/* --- 컨텐츠 영역 --- */
|
|
.content-area {
|
|
flex: 1; padding: 20px; min-height: 400px;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.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;}
|
|
|
|
/* 메인 홈 아스키 전광판 레이아웃 */
|
|
.main-page {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex: 1;
|
|
position: relative;
|
|
}
|
|
|
|
/* 글로벌 오버레이 배경 암전 처리 레이어 CSS 스타일 */
|
|
.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: auto;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
}
|
|
.ascii-art {
|
|
/* 🟢 [★변경] 시스템 폰트 대신, 다운로드한 정밀 고정폭 폰트를 최우선 적용 */
|
|
font-family: 'JetBrains Mono', monospace !important;
|
|
font-weight: bold;
|
|
white-space: pre;
|
|
display: block;
|
|
margin: 0 auto;
|
|
width: max-content;
|
|
|
|
color: #00ff00 !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;
|
|
}
|
|
|
|
/* 📺 유튜브 그리드 레이아웃 */
|
|
#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 #113311;
|
|
position: relative;
|
|
cursor: pointer;
|
|
transition: 0.3s;
|
|
}
|
|
.video-card:hover { border-color: #00ff00; box-shadow: 0 0 10px rgba(0, 255, 0, 0.3); }
|
|
.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; }
|
|
|
|
/* 보안 로그인 프레임 */
|
|
.login-terminal-frame {
|
|
max-width: 550px; margin: 40px auto;
|
|
border: 1px dashed #00ff00; padding: 35px;
|
|
background: #020a02; box-shadow: 0 0 15px rgba(0, 255, 0, 0.1);
|
|
font-family: 'Courier New', Courier, monospace;
|
|
}
|
|
.login-gate-title { color: #00ff00; font-size: 20px; margin-bottom: 10px; font-weight: bold;}
|
|
.login-gate-desc { color: #008800; 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 #005500; padding-bottom: 5px; }
|
|
.login-label { width: 120px; color: #00ff00; font-weight: bold; font-size: 14px; }
|
|
.login-input {
|
|
flex: 1; background: none; border: none; color: #00ff00;
|
|
font-family: 'Courier New', Courier, monospace; font-size: 15px; outline: none;
|
|
}
|
|
.login-submit-btn {
|
|
margin-top: 15px; background: none; border: 1px solid #00ff00;
|
|
color: #00ff00; padding: 12px; font-family: 'Courier New', Courier, monospace;
|
|
font-size: 14px; font-weight: bold; cursor: pointer; transition: 0.3s;
|
|
}
|
|
.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; }
|
|
.about-text { font-family: monospace; line-height: 2; color: #00cc00;}
|
|
.contact-form { font-family: monospace; line-height: 2; color: #00cc00;}
|
|
|
|
/* 애니메이션 트랜지션 */
|
|
.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: 10px 40px 30px;
|
|
border: 2px solid #1a1a1a; background: #0a0a0a; overflow: hidden;
|
|
}
|
|
.monitor-header { background: #151515; padding: 5px 15px; color: #555; display: flex; justify-content: space-between; font-family: monospace; font-size: 12px;}
|
|
.monitor-status { color: #00aa00; 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; }
|
|
|
|
:deep(.terminal), :deep(.terminal span) {
|
|
--color: #33ff33 !important; font-family: monospace !important;
|
|
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); }
|
|
}
|
|
@media screen and (max-width: 650px) {
|
|
#videos-container { grid-template-columns: 1fr; }
|
|
.project-grid { grid-template-columns: 1fr; }
|
|
.auth-nav { flex-direction: column; gap: 12px; padding: 15px 20px; }
|
|
|
|
/* 🟢 [스크롤 100% 복구] 원래 있던 가로 스크롤바를 강제 활성화하고 부드러운 터치 적용 */
|
|
.ascii-container {
|
|
width: 100%;
|
|
overflow-x: auto !important; /* 👈 가로 스크롤 무조건 부활 */
|
|
overflow-y: hidden !important;
|
|
padding: 15px 5px;
|
|
display: block;
|
|
box-sizing: border-box;
|
|
-webkit-overflow-scrolling: touch; /* 👈 모바일에서 스크롤을 부드럽게 슥슥 넘기게 만듦 */
|
|
}
|
|
|
|
/* 🟢 [갤럭시 S24 타겟팅] 폰트 강제 확대 버그를 찢어버리는 치트키 */
|
|
.ascii-art {
|
|
font-size: 11px !important; /* 👈 가로 스크롤로 편하게 볼 수 있는 최적의 모바일 가독성 크기 */
|
|
line-height: 1.25 !important;
|
|
white-space: pre !important; /* 👈 어떤 일이 있어도 줄바꿈 절대 금지 */
|
|
word-break: keep-all !important;
|
|
width: max-content !important; /* 👈 아스키 아트 고유 가로폭 절대 보존 */
|
|
margin: 0 !important; /* 👈 왼쪽 정렬로 스크롤 시작점 고정 */
|
|
transform: none !important; /* 👈 문제 많던 scale 옵션 완전 제거 */
|
|
|
|
/* 🌟 [핵심] 안드로이드 크롬/삼성인터넷의 폰트 부스팅(글자 크기 제멋대로 키우기) 차단 */
|
|
-webkit-text-size-adjust: none !important;
|
|
text-size-adjust: none !important;
|
|
max-height: 999999px !important; /* 👈 크롬 엔진의 텍스트 오토사이징을 무력화하는 인프라 꼼수 */
|
|
}
|
|
}
|
|
|
|
@keyframes blink { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
|
|
|
|
/* 일회성 사이버 글리치 키프레임 */
|
|
@keyframes once-cyber-glitch-wobble {
|
|
0%, 25% { transform: translate(0) scale(1) skewX(0deg); color: #00ff00 !important; text-shadow: 0 0 8px rgba(0, 255, 0, 0.7) !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: #00ff00 !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: #00ff00 !important; text-shadow: 0 0 15px rgba(0, 255, 0, 1) !important;}
|
|
31%, 50% { transform: translate(0); color: #00ff00 !important; text-shadow: 0 0 8px rgba(0, 255, 0, 0.7) !important;}
|
|
51% { transform: scale(1.05) skewY(1deg); color: #ffffff !important; opacity: 0.05; }
|
|
53% { opacity: 1; transform: translate(0); color: #00ffff !important; text-shadow: 0 0 20px #00ffff, 0 0 40px rgba(0, 255, 255, 0.8) !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: #00ffff !important; text-shadow: 0 0 20px #00ffff !important;}
|
|
100% { transform: translate(0) scale(1) skewX(0deg); color: #00ffff !important; text-shadow: 0 0 15px #00ffff, 0 0 30px rgba(0, 255, 255, 0.7) !important; opacity: 1; }
|
|
}
|
|
</style> |