<?php
if (!defined('_GNUBOARD_')) exit;
add_stylesheet('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">', 0);
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
// 스타일시트 유지
add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.view.css">', 0);
$view_content = get_view_thumbnail($view['content']);
?>
<style>
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=JetBrains+Mono:wght@400;700&display=swap');
:root {
--neon-cyan: #00f2ff;
--neon-pink: #ff007a;
--neon-glow: rgba(0, 242, 255, 0.4);
--bg-black: #05060a;
--panel-bg: rgba(10, 15, 28, 0.85);
--border-color: rgba(0, 242, 255, 0.2);
--side-margin: 50px;
}
/* 시스템 로딩 애니메이션 (WRITE 디자인 계승) */
#SYSTEM_INIT {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: var(--bg-black); z-index: 10000;
display: flex; flex-direction: column; align-items: center; justify-content: center;
transition: opacity 0.8s ease-in-out;
}
.init-text { font-family: 'Orbitron'; color: var(--neon-cyan); letter-spacing: 8px; font-size: 1.2rem; margin-bottom: 20px; }
.init-bar-wrap { width: 250px; height: 1px; background: rgba(255,255,255,0.1); overflow: hidden; }
.init-bar { width: 0%; height: 100%; background: var(--neon-cyan); box-shadow: 0 0 15px var(--neon-cyan); animation: initProgress 1.5s forwards ease-in-out; }
@keyframes initProgress { to { width: 100%; } }
/* 배경 및 레이아웃 (WRITE 디자인 계승) */
#VIEW_WRAP {
position: relative; min-height: 100vh; background: var(--bg-black);
padding: 60px 0; font-family: 'Pretendard', sans-serif; color: #fff;
background-image:
linear-gradient(rgba(0, 242, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 242, 255, 0.05) 1px, transparent 1px);
background-size: 50px 50px;
animation: gridMove 20s linear infinite;
}
@keyframes gridMove { from { background-position: 0 0; } to { background-position: 0 50px; } }
#starCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity: 0.4; }
/* 모든 섹션 폭 100% 마진 좌우 50px 적용 */
.Board-Info-Header, .Header-Main-Section, .Extra-Category-Area,
.View-Content, .View-Attached-Data, .Custom-Tag-Area,
.Post-Navigation, .View-Bottom-Control {
position: relative;
z-index: 2;
width: calc(100% - 100px) !important;
margin-left: var(--side-margin) !important;
margin-right: var(--side-margin) !important;
max-width: none !important;
}
/* 상단 헤더 (WRITE 디자인 계승) */
.Board-Info-Header {
padding: 30px 40px; border: 1px solid var(--border-color);
background: var(--panel-bg); backdrop-filter: blur(15px);
display: flex; justify-content: space-between; align-items: center;
border-radius: 4px 4px 0 0;
border-bottom: none;
}
.Board-Info-Header h2 {
margin:0; font-family: 'Orbitron'; font-size: 1.4rem; color: var(--neon-cyan);
font-weight: 900; letter-spacing: 2px; text-shadow: 0 0 10px var(--neon-glow);
}
/* 제목 섹션 - 요청사항 반영 (그림자 제거, 폰트 축소) */
.Header-Main-Section {
padding: 60px 40px;
background: var(--panel-bg); backdrop-filter: blur(15px);
border: 1px solid var(--border-color);
border-top: 1px solid rgba(0, 242, 255, 0.1);
border-bottom: none;
text-align: left;
}
.Header-Main-Section h1 {
font-family: 'Orbitron', sans-serif; font-size: 2.8rem; font-weight: 700;
color: #fff; margin: 0 0 15px 0; letter-spacing: -1px; line-height: 1.2;
text-shadow: none; /* 그림자 제거 */
}
.wr-datetime { font-family: 'JetBrains Mono'; color: var(--neon-cyan); letter-spacing: 2px; font-size: 0.9rem; }
/* 본문 프레임 (HUD 스타일 계승) */
.View-Content {
background-color: var(--panel-bg); backdrop-filter: blur(15px);
padding: 60px; line-height: 1.8;
border: 1px solid var(--border-color);
border-top: none; border-bottom: none;
position: relative;
}
/* 사이버틱 코너 장식 */
.View-Content::before {
content: ''; position: absolute; top: 0; left: -1px; width: 20px; height: 20px;
border-left: 2px solid var(--neon-cyan); border-top: 2px solid var(--neon-cyan);
}
.scanline {
position: absolute; top: 0; left: 0; width: 100%; height: 2px;
background: rgba(0, 242, 255, 0.2); box-shadow: 0 0 15px var(--neon-cyan);
animation: scan 4s linear infinite; z-index: 2; pointer-events: none;
}
@keyframes scan { from { top: 0; } to { top: 100%; } }
/* 첨부 데이터 그리드 */
.View-Attached-Data {
background: var(--panel-bg); backdrop-filter: blur(15px);
padding: 0 40px 40px 40px; border: 1px solid var(--border-color);
border-top: none; border-bottom: none;
display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 15px;
}
.data-item {
background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1);
padding: 15px 20px; display: flex; align-items: center; justify-content: space-between;
transition: 0.3s; color: #fff; text-decoration: none; font-family: 'JetBrains Mono'; font-size: 0.85rem;
}
.data-item:hover { border-color: var(--neon-cyan); background: rgba(0, 242, 255, 0.1); box-shadow: 0 0 15px var(--neon-glow); }
/* 버튼 시스템 (WRITE 디자인 계승) */
.btn-action {
border: 1px solid var(--neon-cyan); background: transparent;
color: var(--neon-cyan); padding: 10px 25px; border-radius: 0;
font-family: 'Orbitron'; font-weight: 700; cursor: pointer; transition: 0.3s;
text-transform: uppercase; letter-spacing: 1px; font-size: 0.8rem;
}
.btn-action:hover {
background: var(--neon-cyan); color: #000;
box-shadow: 0 0 20px var(--neon-cyan); transform: translateY(-2px);
}
.Write-Btn { background: var(--neon-cyan) !important; color: #000 !important; }
.Write-Btn:hover { background: #fff !important; box-shadow: 0 0 30px #fff !important; }
/* 하단 네비게이션 */
.Post-Navigation {
display: grid; grid-template-columns: 1fr 1fr;
background: var(--panel-bg); border: 1px solid var(--border-color);
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.Post-Navigation a { padding: 40px; text-decoration: none; transition: 0.3s; border-right: 1px solid var(--border-color); }
.Post-Navigation a:last-child { border-right: none; text-align: right; }
.Post-Navigation a:hover { background: rgba(0, 242, 255, 0.05); }
.nav-label { font-family: 'Orbitron'; font-size: 0.7rem; color: var(--neon-cyan); letter-spacing: 3px; margin-bottom: 10px; display: block; }
.nav-subject { font-size: 1.1rem; font-weight: 700; color: #fff; }
/* 관리자 제어 하단바 */
.View-Bottom-Control {
padding: 40px; display: flex; justify-content: space-between; align-items: center;
background: var(--panel-bg); border: 1px solid var(--border-color);
border-top: none; border-radius: 0 0 4px 4px;
}
.Admin-Control button {
background: transparent; border: 1px solid var(--neon-pink); color: var(--neon-pink);
padding: 7px 15px; cursor: pointer; font-family: 'JetBrains Mono'; margin-right: 5px; font-size: 0.75rem;
}
.Admin-Control button:hover { background: var(--neon-pink); color: #fff; }
@media (max-width: 1024px) {
:root { --side-margin: 20px; }
.Board-Info-Header, .Header-Main-Section, .Extra-Category-Area,
.View-Content, .View-Attached-Data, .Custom-Tag-Area,
.Post-Navigation, .View-Bottom-Control {
width: calc(100% - 40px) !important; margin-left: 20px !important; margin-right: 20px !important;
}
}
</style>
<!-- 시스템 초기화 화면 (로딩) -->
<div id="SYSTEM_INIT">
<div class="init-text">ENCRYPTED_DATA_STREAM...</div>
<div class="init-bar-wrap">
<div class="init-bar"></div>
</div>
</div>
<div id="VIEW_WRAP">
<canvas id="starCanvas"></canvas>
<!-- 상단 헤더 -->
<div class="Board-Info-Header">
<h2><i class="fa-solid fa-terminal"></i> <?php echo $board['bo_subject']; ?></h2>
<div class="Btns-Right">
<button class="btn-action" onclick="location.href='<?php echo $list_href; ?>'">LIST_FILE</button>
<?php if ($update_href) { ?><button class="btn-action" onclick="location.href='<?php echo $update_href; ?>'">MODIFY</button><?php } ?>
<?php if ($write_href) { ?><button class="btn-action Write-Btn" onclick="location.href='<?php echo $write_href; ?>'">CREATE_NEW</button><?php } ?>
</div>
</div>
<!-- 제목 섹션 -->
<header class="Header-Main-Section">
<h1><?php echo get_text($view['wr_subject']); ?></h1>
<div class="wr-datetime">
<span style="opacity:0.5;">TIMESTAMP:</span> <?php echo date("Y-m-d H:i:s", strtotime($view['wr_datetime'])); ?>
<span style="color:var(--neon-pink); margin-left:15px; opacity:0.8;">[SECURED_ACCESS]</span>
</div>
</header>
<!-- 카테고리/상태 영역 -->
<div class="Extra-Category-Area" style="background:var(--panel-bg); border-left:1px solid var(--border-color); border-right:1px solid var(--border-color); padding: 10px 40px; display:flex; gap:10px;">
<?php if($view['x2_ca2']) { ?><span style="border:1px solid var(--neon-cyan); color:var(--neon-cyan); padding:3px 12px; font-size:0.75rem; font-family:'JetBrains Mono';"><?php echo $view['x2_ca2']; ?></span><?php } ?>
<?php if($view['x2_ca3']) { ?><span style="border:1px solid var(--neon-pink); color:var(--neon-pink); padding:3px 12px; font-size:0.75rem; font-family:'JetBrains Mono';"><?php echo $view['x2_ca3']; ?></span><?php } ?>
</div>
<!-- 본문 내용 -->
<div class="View-Content">
<div class="scanline"></div>
<div id="bo_v_atc">
<div id="bo_v_img">
<?php
if ($view['file']['count']) {
for ($i=0; $i<count($view['file']); $i++) {
if (isset($view['file'][$i]['view']) && $view['file'][$i]['view']) {
echo get_view_thumbnail($view['file'][$i]['view']);
}
}
}
?>
</div>
<div id="bo_v_con">
<?php echo $view_content; ?>
</div>
</div>
</div>
<!-- 첨부 데이터 -->
<div class="View-Attached-Data">
<?php
for ($i=1; $i<=count($view['link']); $i++) {
if ($view['link'][$i]) {
?>
<a href="<?php echo $view['link_href'][$i] ?>" target="_blank" class="data-item">
<span><i class="fa-solid fa-link" style="color:var(--neon-cyan); margin-right:10px;"></i> <?php echo cut_str($view['link'][$i], 50); ?></span>
<span style="opacity:0.5; font-size:0.7rem;">[EXT_LINK]</span>
</a>
<?php } } ?>
<?php
if ($view['file']['count']) {
for ($i=0; $i<count($view['file']); $i++) {
if (isset($view['file'][$i]['source']) && !isset($view['file'][$i]['view'])) {
?>
<a href="<?php echo $view['file'][$i]['href']; ?>" class="data-item">
<span><i class="fa-solid fa-download" style="color:var(--neon-cyan); margin-right:10px;"></i> <?php echo $view['file'][$i]['source']; ?></span>
<span style="color:var(--neon-cyan); font-size:0.7rem;"><?php echo $view['file'][$i]['size']; ?></span>
</a>
<?php } } } ?>
</div>
<!-- 태그 영역 -->
<?php if ($view['x2_tag']) { ?>
<div class="Custom-Tag-Area" style="background:var(--panel-bg); border-left:1px solid var(--border-color); border-right:1px solid var(--border-color); padding: 20px 40px; display:flex; gap:10px; flex-wrap:wrap;">
<?php
$x2_tags = explode(',', $view['x2_tag']);
foreach($x2_tags as $tag_val) {
$tag_val = trim($tag_val);
if($tag_val) echo '<a href="'.G5_BBS_URL.'/board.php?bo_table='.$bo_table.'&stx='.urlencode($tag_val).'&sfl=wr_subject||wr_content" style="color:var(--neon-cyan); text-decoration:none; font-size:0.8rem; font-family:\'JetBrains Mono\'; opacity:0.7;">#'.$tag_val.'</a>';
}
?>
</div>
<?php } ?>
<!-- 이전/다음 섹션 -->
<nav class="Post-Navigation">
<?php if ($prev_href) { ?>
<a href="<?php echo $prev_href; ?>">
<span class="nav-label"><< PREV_DATA_SECTOR</span>
<p class="nav-subject"><?php echo $prev_wr_subject; ?></p>
</a>
<?php } else { ?>
<div style="padding:40px; color:var(--text-dim); opacity:0.3; font-family:'Orbitron'; font-size:0.8rem;">INIT_START_BLOCK</div>
<?php } ?>
<?php if ($next_href) { ?>
<a href="<?php echo $next_href; ?>">
<span class="nav-label">NEXT_DATA_SECTOR >></span>
<p class="nav-subject"><?php echo $next_wr_subject; ?></p>
</a>
<?php } else { ?>
<div style="padding:40px; text-align:right; color:var(--text-dim); opacity:0.3; font-family:'Orbitron'; font-size:0.8rem;">END_DATA_BLOCK</div>
<?php } ?>
</nav>
<!-- 하단 관리자 바 -->
<footer class="View-Bottom-Control">
<div class="Admin-Control">
<?php if ($delete_href) { ?><button onclick="if(confirm('PURGE DATA FROM SYSTEM?')) location.href='<?php echo $delete_href; ?>';">PURGE</button><?php } ?>
<?php if ($copy_href) { ?><button onclick="window.open('<?php echo $copy_href; ?>', 'copy_win', 'width=600,height=500');">CLONE</button><?php } ?>
<?php if ($move_href) { ?><button onclick="window.open('<?php echo $move_href; ?>', 'move_win', 'width=600,height=500');">RELOCATE</button><?php } ?>
</div>
<button class="btn-action" onclick="location.href='<?php echo $list_href; ?>'">
<i class="fa-solid fa-arrow-left" style="margin-right:10px;"></i> RETURN_TO_DATABASE
</button>
</footer>
</div>
<script src="<?php echo G5_JS_URL; ?>/viewimageresize.js"></script>
<script>
window.addEventListener('load', function() {
const loader = document.getElementById('SYSTEM_INIT');
setTimeout(() => {
loader.style.opacity = '0';
setTimeout(() => { loader.style.display = 'none'; }, 800);
}, 1200);
});
$(function() {
$(".View-Body-Inner img").viewimageresize();
const canvas = document.getElementById('starCanvas');
const ctx = canvas.getContext('2d');
let stars = [];
function initStars() {
canvas.width = window.innerWidth;
canvas.height = document.getElementById('VIEW_WRAP').scrollHeight;
stars = [];
for(let i=0; i<200; i++) {
stars.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
size: Math.random() * 1.5,
opacity: Math.random(),
speed: Math.random() * 0.02
});
}
}
function drawStars() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
stars.forEach(s => {
ctx.fillStyle = `rgba(0, 242, 255, ${s.opacity})`;
ctx.beginPath(); ctx.arc(s.x, s.y, s.size, 0, Math.PI*2); ctx.fill();
s.opacity += s.speed;
if(s.opacity > 1 || s.opacity < 0.1) s.speed *= -1;
});
requestAnimationFrame(drawStars);
}
initStars();
drawStars();
window.addEventListener('resize', initStars);
});
</script>