<?php
// 1. 그누보드 헤더 호출 (이미 <html>, <head>, <body> 태그를 포함하고 있음)
require_once '/home/www/GNU/_PAGE/head.php';
?>
<!-- 스타일과 스크립트만 별도로 삽입 -->
<style>
body { background-color: #020617; }
/* 그누보드 스타일과의 충돌 방지를 위해 고유한 ID(.security-key-wrapper)를 사용합니다. */
.security-key-wrapper {
font-family: 'Inter', 'Pretendard', sans-serif;
width: 100%;
color: #f8fafc;
padding: 0px 0px;
min-height: 80vh; /* 헤더/푸터를 제외한 영역 확보 */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.security-key-wrapper .glass-card {
background: rgba(15, 23, 42, 0.8);
backdrop-filter: blur(12px);
border: 1px solid rgba(30, 41, 59, 0.7);
}
.security-key-wrapper .fade-in-up {
animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.security-key-wrapper .pulse-soft {
animation: pulseSoft 2s infinite;
}
@keyframes pulseSoft {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
/* PHPS 버튼 스타일 강화 */
.security-key-wrapper .phps-link-btn {
background: #1e293b;
border: 1px solid #334155;
color: #cbd5e1;
padding: 12px 28px;
border-radius: 16px;
font-weight: 700;
transition: 0.3s;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
}
.security-key-wrapper .phps-link-btn:hover {
background: #334155;
color: #fff;
border-color: #38bdf8;
}
/* 전체 스크롤바 스타일 */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0d1117; }
::-webkit-scrollbar-thumb { background: #30363d; border-radius: 6px; border: 2px solid #0d1117; }
::-webkit-scrollbar-thumb:hover { background: #8b949e; }
</style>
<!-- Tailwind CSS 로드 (head.php에 없다면 유지) -->
<script src="https://cdn.tailwindcss.com"></script>
<div class="security-key-wrapper">
<div class="container max-w-4xl fade-in-up">
<header class="text-center mb-10">
<h1 class="text-4xl font-black tracking-tighter mb-2 text-white">SITE <span class="text-sky-400">SECURITY PORT KEY</span></h1>
<p class="text-slate-500 font-medium text-sm md:text-base">현재 접속 중인 네트워크와 하드웨어 환경을 정밀 분석합니다.</p>
</header>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- IP 메인 카드 -->
<div class="lg:col-span-2 glass-card rounded-[2rem] p-8 relative overflow-hidden flex flex-col justify-center border-t-4 border-sky-500 shadow-2xl">
<div class="absolute top-0 right-0 p-8 opacity-10">
<i class="fa-solid fa-globe text-9xl"></i>
</div>
<span class="text-sky-500 font-black text-xs uppercase tracking-widest mb-2">Your Public IP Address</span>
<div id="ip-display" class="text-3xl md:text-5xl lg:text-6xl font-black tracking-tighter mb-4 cursor-pointer hover:text-sky-400 transition-colors break-all text-white" onclick="copyToClipboard('ip-display')">
정보를 불러오는 중...
</div>
<p class="text-slate-500 text-xs md:text-sm flex items-center gap-2">
<i class="fa-solid fa-circle-info pulse-soft text-sky-500"></i> 아이피 클릭 시 복사 (실패 시 새로고침 하세요)
</p>
<div class="grid grid-cols-2 gap-4 mt-8">
<div class="bg-slate-900/80 p-4 rounded-2xl border border-slate-800">
<div class="text-[10px] font-black text-slate-600 uppercase mb-1">Location</div>
<div id="loc-display" class="font-bold text-slate-300 text-sm truncate">--</div>
</div>
<div class="bg-slate-900/80 p-4 rounded-2xl border border-slate-800">
<div class="text-[10px] font-black text-slate-600 uppercase mb-1">ISP / Provider</div>
<div id="isp-display" class="font-bold text-slate-300 text-sm truncate">--</div>
</div>
</div>
</div>
<!-- 요약 스탯 -->
<div class="space-y-6">
<div class="glass-card rounded-[2rem] p-6 border-l-4 border-emerald-500 shadow-lg">
<div class="flex items-center gap-4">
<div class="p-3 bg-emerald-500/10 rounded-xl">
<i class="fa-solid fa-desktop text-emerald-500"></i>
</div>
<div>
<div class="text-[10px] font-black text-slate-600 uppercase">OS / Platform</div>
<div id="os-display" class="font-bold text-sm text-white">확인 중...</div>
</div>
</div>
</div>
<div class="glass-card rounded-[2rem] p-6 border-l-4 border-amber-500 shadow-lg">
<div class="flex items-center gap-4">
<div class="p-3 bg-amber-500/10 rounded-xl">
<i class="fa-solid fa-expand text-amber-500"></i>
</div>
<div>
<div class="text-[10px] font-black text-slate-600 uppercase">Screen Resolution</div>
<div id="res-display" class="font-bold text-sm text-white">0 x 0</div>
</div>
</div>
</div>
<div class="glass-card rounded-[2rem] p-6 border-l-4 border-rose-500 shadow-lg">
<div class="flex items-center gap-4">
<div class="p-3 bg-rose-500/10 rounded-xl">
<i class="fa-solid fa-language text-rose-500"></i>
</div>
<div>
<div class="text-[10px] font-black text-slate-600 uppercase">Language</div>
<div id="lang-display" class="font-bold text-sm text-white">--</div>
</div>
</div>
</div>
</div>
<!-- 하단 브라우저 상세 -->
<div class="lg:col-span-3 glass-card rounded-[2rem] p-6 flex items-center justify-between shadow-lg">
<div class="flex items-center gap-4 overflow-hidden">
<div class="p-3 bg-slate-800 rounded-xl flex-shrink-0">
<i class="fa-solid fa-window-maximize text-slate-400"></i>
</div>
<div class="overflow-hidden text-left">
<div class="text-[10px] font-black text-slate-600 uppercase">User Agent String</div>
<div id="ua-display" class="text-xs text-slate-500 truncate max-w-full">
Detecting system...
</div>
</div>
</div>
<button onclick="window.location.reload()" class="bg-slate-800 hover:bg-slate-700 p-3 rounded-xl transition-all ml-4">
<i class="fa-solid fa-rotate-right text-slate-300"></i>
</button>
</div>
</div>
<!-- PHPS 바로가기 버튼 -->
<div class="mt-12 text-center">
<a href="https://www.phps.kr/" target="_blank" class="phps-link-btn group">
<i class="fa-solid fa-link text-sky-400 group-hover:scale-110 transition-transform"></i>
PHPS 바로가기 (새창)
</a>
</div>
<footer class="mt-12 text-center text-slate-600 text-xs font-bold uppercase tracking-widest">
Privacy Secure • Client-side Detection • 2026
</footer>
</div>
</div>
<!-- 토스트 알림 -->
<div id="toast" class="fixed bottom-10 left-1/2 -translate-x-1/2 bg-sky-500 text-slate-950 px-6 py-3 rounded-full font-black text-sm shadow-2xl shadow-sky-500/40 hidden z-[9999]">
IP ADDRESS COPIED!
</div>
<script>
/**
* 1. 네트워크 정보 수집 (Multi-API Failover)
*/
async function fetchNetworkInfo() {
const ipEl = document.getElementById('ip-display');
const locEl = document.getElementById('loc-display');
const ispEl = document.getElementById('isp-display');
try {
const response = await fetch('https://ipapi.co/json/');
if (!response.ok) throw new Error('API 1 Fail');
const data = await response.json();
ipEl.textContent = data.ip;
locEl.textContent = `${data.city}, ${data.country_code}`;
ispEl.textContent = data.org || "Unknown ISP";
} catch (err) {
try {
const response = await fetch('https://api.ipify.org?format=json');
const data = await response.json();
ipEl.textContent = data.ip;
locEl.textContent = "Location Info Limited";
} catch (finalErr) {
ipEl.textContent = "Connection Restricted";
ipEl.style.color = "#f43f5e";
}
}
}
/**
* 2. 시스템 정보 수집
*/
function fetchSystemInfo() {
const ua = navigator.userAgent;
let os = "Other OS";
if (ua.indexOf("Win") != -1) os = "Windows";
if (ua.indexOf("Mac") != -1) os = "macOS";
if (ua.indexOf("Linux") != -1) os = "Linux";
if (ua.indexOf("Android") != -1) os = "Android";
if (ua.indexOf("iPhone") != -1 || ua.indexOf("iPad") != -1) os = "iOS";
document.getElementById('os-display').textContent = os;
document.getElementById('res-display').textContent = `${window.screen.width} x ${window.screen.height}`;
document.getElementById('lang-display').textContent = navigator.language.toUpperCase();
document.getElementById('ua-display').textContent = ua;
}
/**
* 3. 클립보드 복사
*/
function copyToClipboard(id) {
const text = document.getElementById(id).textContent;
if (text.includes("중") || text.includes("Error") || text.includes("Restricted")) return;
const textArea = document.createElement("textarea");
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
document.execCommand("copy");
document.body.removeChild(textArea);
const toast = document.getElementById('toast');
toast.style.display = 'block';
setTimeout(() => { toast.style.display = 'none'; }, 2000);
}
window.onload = () => {
fetchNetworkInfo();
fetchSystemInfo();
};
</script>
<?php
// 3. 그누보드 테일 호출 (이미 </body>, </html> 태그를 포함하고 있음)
require_once '/home/www/GNU/_PAGE/tail.php';
?>