Spaces:

seawolf2357
/

ev-cook-siteurl

Running

App Files Files Community

ev-cook-siteurl / index.html

seawolf2357

Update index.html

e9fa16f verified 3 months ago

raw

history blame

23.9 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>EV Cook Site - 방문자 추적 활성화</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
	min-height: 100vh;
	color: #333;
	}

	.header {
	background: rgba(255, 255, 255, 0.95);
	padding: 20px 0;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	}

	.header-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	}

	.logo {
	font-size: 28px;
	font-weight: bold;
	color: #1e3c72;
	}

	.nav {
	display: flex;
	gap: 30px;
	}

	.nav a {
	color: #333;
	text-decoration: none;
	font-weight: 500;
	transition: color 0.3s;
	}

	.nav a:hover {
	color: #1e3c72;
	}

	.main-container {
	max-width: 1200px;
	margin: 50px auto;
	padding: 0 20px;
	}

	.hero-section {
	background: white;
	border-radius: 20px;
	padding: 60px;
	text-align: center;
	box-shadow: 0 20px 60px rgba(0,0,0,0.1);
	margin-bottom: 40px;
	}

	.hero-section h1 {
	font-size: 48px;
	color: #1e3c72;
	margin-bottom: 20px;
	}

	.hero-section p {
	font-size: 20px;
	color: #666;
	margin-bottom: 30px;
	}

	.tracking-status {
	background: #e8f5e9;
	border: 2px solid #4caf50;
	border-radius: 10px;
	padding: 20px;
	margin: 20px 0;
	}

	.tracking-status h3 {
	color: #2e7d32;
	margin-bottom: 10px;
	}

	.info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	margin-top: 40px;
	}

	.info-card {
	background: white;
	padding: 30px;
	border-radius: 15px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.1);
	transition: transform 0.3s;
	}

	.info-card:hover {
	transform: translateY(-5px);
	}

	.info-card h3 {
	color: #1e3c72;
	margin-bottom: 15px;
	font-size: 24px;
	}

	.info-card p {
	color: #666;
	line-height: 1.6;
	}

	.status-indicator {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #f5f5f5;
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 14px;
	}

	.status-indicator.active {
	background: #e8f5e9;
	color: #2e7d32;
	}

	.status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #4caf50;
	animation: pulse 2s infinite;
	}

	@keyframes pulse {
	0% {
	box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
	}
	70% {
	box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
	}
	100% {
	box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
	}
	}

	.tracking-details {
	background: #f8f9fa;
	padding: 20px;
	border-radius: 10px;
	margin-top: 20px;
	font-family: monospace;
	font-size: 14px;
	}

	.tracking-details .row {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid #e0e0e0;
	}

	.tracking-details .row:last-child {
	border-bottom: none;
	}

	.tracking-details .label {
	font-weight: bold;
	color: #555;
	}

	.tracking-details .value {
	color: #1e3c72;
	}

	.buttons {
	display: flex;
	gap: 15px;
	margin-top: 30px;
	justify-content: center;
	flex-wrap: wrap;
	}

	button {
	padding: 12px 30px;
	background: #1e3c72;
	color: white;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s;
	}

	button:hover {
	background: #2a5298;
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(0,0,0,0.2);
	}

	button.secondary {
	background: #757575;
	}

	button.secondary:hover {
	background: #616161;
	}

	.footer {
	text-align: center;
	padding: 40px 20px;
	color: white;
	margin-top: 60px;
	}

	.console-hint {
	background: #fff3cd;
	border: 1px solid #ffeaa7;
	padding: 15px;
	border-radius: 8px;
	margin: 20px 0;
	text-align: center;
	}

	.console-hint code {
	background: #f8f9fa;
	padding: 2px 6px;
	border-radius: 3px;
	font-family: monospace;
	}

	.debug-panel {
	background: #f0f0f0;
	border: 2px solid #999;
	border-radius: 10px;
	padding: 20px;
	margin: 20px 0;
	display: none;
	}

	.debug-panel h3 {
	color: #333;
	margin-bottom: 10px;
	}

	.debug-log {
	background: white;
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 10px;
	height: 200px;
	overflow-y: auto;
	font-family: monospace;
	font-size: 12px;
	}

	.debug-log .log-entry {
	margin: 2px 0;
	padding: 2px 5px;
	}

	.debug-log .success {
	color: #2e7d32;
	background: #e8f5e9;
	}

	.debug-log .error {
	color: #c62828;
	background: #ffebee;
	}

	.debug-log .info {
	color: #1565c0;
	background: #e3f2fd;
	}
	</style>
	</head>
	<body>
	<header class="header">
	<div class="header-content">
	<div class="logo">⚡ EV Cook</div>
	<nav class="nav">
	<a href="#home">홈</a>
	<a href="#about">소개</a>
	<a href="#tracking">추적정보</a>
	<a href="#contact">문의</a>
	</nav>
	</div>
	</header>

	<div class="main-container">
	<section class="hero-section">
	<h1>EV Cook 추적 데모 사이트</h1>
	<p>이 사이트는 방문자 추적 시스템이 활성화되어 있습니다</p>

	<div class="tracking-status">
	<h3>🔍 추적 상태</h3>
	<div class="status-indicator active">
	<span class="status-dot"></span>
	<span>추적 활성화됨</span>
	</div>

	<div class="tracking-details">
	<div class="row">
	<span class="label">Device ID:</span>
	<span class="value" id="deviceId">로딩 중...</span>
	</div>
	<div class="row">
	<span class="label">추적 서버:</span>
	<span class="value">seawolf2357-ev-cook-siteurl.static.hf.space</span>
	</div>
	<div class="row">
	<span class="label">사이트 ID:</span>
	<span class="value">c4562ca1</span>
	</div>
	<div class="row">
	<span class="label">추적 시작:</span>
	<span class="value" id="trackingStart">-</span>
	</div>
	<div class="row">
	<span class="label">전송 상태:</span>
	<span class="value" id="trackingStatus">대기 중...</span>
	</div>
	</div>
	</div>

	<div class="buttons">
	<button onclick="testTracking()">📊 추적 테스트</button>
	<button onclick="sendCustomEvent()">🎯 커스텀 이벤트</button>
	<button onclick="viewDetails()" class="secondary">📋 상세 정보</button>
	<button onclick="toggleDebug()" class="secondary">🐛 디버그 패널</button>
	</div>
	</section>

	<div class="debug-panel" id="debugPanel">
	<h3>🐛 디버그 로그</h3>
	<div class="debug-log" id="debugLog"></div>
	<div class="buttons" style="margin-top: 10px;">
	<button onclick="clearDebugLog()" class="secondary">로그 지우기</button>
	<button onclick="checkServerStatus()" class="secondary">서버 상태 확인</button>
	</div>
	</div>

	<div class="info-grid">
	<div class="info-card">
	<h3>🚀 실시간 추적</h3>
	<p>페이지 방문, 클릭, 스크롤 등 모든 사용자 활동이 실시간으로 추적됩니다. 개발자 도구 콘솔에서 추적 로그를 확인할 수 있습니다.</p>
	</div>
	<div class="info-card">
	<h3>🔒 개인정보 보호</h3>
	<p>디바이스 ID는 브라우저 정보를 기반으로 생성되며, 개인을 식별할 수 있는 정보는 수집하지 않습니다.</p>
	</div>
	<div class="info-card">
	<h3>📈 분석 대시보드</h3>
	<p>수집된 데이터는 추적 서버의 대시보드에서 실시간으로 확인할 수 있습니다.</p>
	</div>
	</div>

	<div class="console-hint">
	💡 <strong>개발자 도구 활용:</strong> <code>F12</code>를 눌러 Console 탭에서 추적 이벤트를 실시간으로 확인하세요!
	</div>

	<div id="detailsSection" style="display: none;">
	<section class="hero-section" style="margin-top: 40px;">
	<h2>📊 브라우저 상세 정보</h2>
	<pre id="browserDetails" style="text-align: left; background: #f5f5f5; padding: 20px; border-radius: 8px; overflow-x: auto;"></pre>
	</section>
	</div>
	</div>

	<footer class="footer">
	<p>© 2025 EV Cook. 모든 권리 보유.</p>
	<p>추적 서버: <a href="https://seawolf2357-ev-cook-siteurl.static.hf.space" target="_blank" style="color: white;">seawolf2357-ev-cook-siteurl.static.hf.space</a></p>
	</footer>

	<!-- Visitor Tracking Script -->
	<script>
	(function() {
	// 추적 서버 URL
	const TRACKING_SERVER = 'https://seawolf2357-ev-cook-siteurl.static.hf.space/';
	const SITE_ID = 'c4562ca1';

	// 디바이스 ID 생성/조회
	function getDeviceId() {
	let deviceId = localStorage.getItem('_tracker_device_id');
	if (!deviceId) {
	deviceId = 'DEV_' + Date.now() + '_' + Math.random().toString(36).substring(2, 9);
	localStorage.setItem('_tracker_device_id', deviceId);
	}
	return deviceId;
	}

	// 추적 데이터 전송
	async function collectAndSend(eventType = 'pageview', eventData = {}) {
	const data = {
	siteId: SITE_ID,
	deviceId: getDeviceId(),
	eventType: eventType,
	eventData: eventData,
	pageUrl: window.location.href,
	pageTitle: document.title,
	referrer: document.referrer,
	userAgent: navigator.userAgent,
	screenResolution: screen.width + 'x' + screen.height,
	platform: navigator.platform,
	language: navigator.language,
	timestamp: new Date().toISOString()
	};

	try {
	const response = await fetch(TRACKING_SERVER + '/call/process_tracking', {
	method: 'POST',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify({ data: [JSON.stringify(data)] })
	});

	if (response.ok) {
	const result = await response.json();
	if (result.event_id) {
	console.log('[Tracker] ✅ Event tracked');
	updateTrackingStatus('전송 완료');
	addDebugLog('success', `이벤트 전송 성공: ${eventType}`);
	}
	} else {
	console.error('[Tracker] Server error:', response.status);
	updateTrackingStatus('전송 실패');
	addDebugLog('error', `서버 오류: ${response.status}`);
	}
	} catch(e) {
	console.error('[Tracker] Error:', e);
	updateTrackingStatus('네트워크 오류');
	addDebugLog('error', `네트워크 오류: ${e.message}`);
	}
	}

	// 전역 추적 함수
	window._tracker = {
	trackEvent: function(eventName, eventData) {
	collectAndSend('custom', { name: eventName, data: eventData });
	}
	};

	// 페이지 로드시 추적
	if (document.readyState === 'loading') {
	document.addEventListener('DOMContentLoaded', () => collectAndSend());
	} else {
	collectAndSend();
	}

	// 디버그 로그 (UI 연동용)
	const debugLog = [];
	function addDebugLog(type, message) {
	const timestamp = new Date().toLocaleTimeString();
	debugLog.push({ type, message, timestamp });
	updateDebugPanel();
	}

	function updateDebugPanel() {
	const debugLogEl = document.getElementById('debugLog');
	if (debugLogEl) {
	debugLogEl.innerHTML = debugLog.slice(-50).reverse().map(entry =>
	`<div class="log-entry ${entry.type}">[${entry.timestamp}] ${entry.message}</div>`
	).join('');
	}
	}

	function updateTrackingStatus(status) {
	const statusEl = document.getElementById('trackingStatus');
	if (statusEl) {
	statusEl.textContent = status;
	}
	}

	// 전역 함수 확장
	window._tracker.getDebugLog = function() {
	return debugLog;
	};

	// 초기화 로그
	console.log('🔍 EV Cook Tracker 초기화됨');
	console.log('서버:', TRACKING_SERVER);
	console.log('사이트 ID:', SITE_ID);
	console.log('디바이스 ID:', getDeviceId());
	addDebugLog('info', 'EV Cook Tracker 초기화 완료');
	})();
	</script>
	<!-- End Visitor Tracking Script -->

	<!-- 페이지 기능 스크립트 -->
	<script>
	// 페이지 로드시 실행
	window.addEventListener('DOMContentLoaded', () => {
	// Device ID 표시
	setTimeout(() => {
	const deviceId = localStorage.getItem('_tracker_device_id');
	if (deviceId) {
	document.getElementById('deviceId').textContent = deviceId;
	}
	document.getElementById('trackingStart').textContent = new Date().toLocaleString('ko-KR');
	}, 500);
	});

	// 추적 테스트
	function testTracking() {
	if (window._tracker) {
	window._tracker.trackEvent('test_button_click', {
	button: 'tracking_test',
	timestamp: Date.now(),
	location: 'hero_section',
	userAction: true
	});
	alert('✅ 추적 이벤트가 전송되었습니다!\n\n콘솔과 디버그 패널에서 확인하세요.');
	} else {
	alert('❌ 추적 스크립트가 로드되지 않았습니다.');
	}
	}

	// 커스텀 이벤트 전송
	function sendCustomEvent() {
	const eventName = prompt('이벤트 이름을 입력하세요:', 'custom_action');
	if (eventName && window._tracker) {
	const eventData = {
	custom_name: eventName,
	user_input: true,
	timestamp: Date.now(),
	metadata: {
	viewport: {
	width: window.innerWidth,
	height: window.innerHeight
	},
	scroll: {
	x: window.scrollX,
	y: window.scrollY
	}
	}
	};

	window._tracker.trackEvent(eventName, eventData);

	alert(`✅ '${eventName}' 이벤트가 전송되었습니다!`);
	console.log('[Custom Event]', eventName, eventData);
	}
	}

	// 상세 정보 보기
	function viewDetails() {
	const details = {
	tracking: {
	deviceId: localStorage.getItem('_tracker_device_id'),
	siteId: 'c4562ca1',
	serverUrl: 'https://seawolf2357-ev-cook-siteurl.static.hf.space',
	startTime: new Date().toLocaleString()
	},
	browser: {
	userAgent: navigator.userAgent,
	platform: navigator.platform,
	vendor: navigator.vendor,
	language: navigator.language,
	languages: navigator.languages,
	cookieEnabled: navigator.cookieEnabled,
	doNotTrack: navigator.doNotTrack,
	onLine: navigator.onLine,
	plugins: navigator.plugins.length
	},
	screen: {
	resolution: screen.width + 'x' + screen.height,
	availableResolution: screen.availWidth + 'x' + screen.availHeight,
	colorDepth: screen.colorDepth,
	pixelRatio: window.devicePixelRatio,
	orientation: screen.orientation ? screen.orientation.type : 'Unknown'
	},
	viewport: {
	width: window.innerWidth,
	height: window.innerHeight,
	scrollX: window.scrollX,
	scrollY: window.scrollY
	},
	hardware: {
	cpuCores: navigator.hardwareConcurrency \|\| 'Unknown',
	deviceMemory: navigator.deviceMemory ? navigator.deviceMemory + 'GB' : 'Unknown',
	maxTouchPoints: navigator.maxTouchPoints \|\| 0
	},
	location: {
	href: window.location.href,
	hostname: window.location.hostname,
	protocol: window.location.protocol,
	pathname: window.location.pathname,
	search: window.location.search,
	hash: window.location.hash
	},
	time: {
	timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
	offset: new Date().getTimezoneOffset(),
	locale: new Date().toLocaleString()
	},
	storage: {
	localStorage: typeof(Storage) !== "undefined",
	sessionStorage: typeof(sessionStorage) !== "undefined",
	indexedDB: 'indexedDB' in window,
	cookies: navigator.cookieEnabled
	}
	};

	document.getElementById('browserDetails').textContent = JSON.stringify(details, null, 2);
	document.getElementById('detailsSection').style.display = 'block';

	// 상세 정보 보기도 추적
	window._tracker.trackEvent('view_details', {
	action: 'show_browser_info',
	detailsViewed: Object.keys(details)
	});
	}

	// 디버그 패널 토글
	function toggleDebug() {
	const panel = document.getElementById('debugPanel');
	if (panel) {
	panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
	if (panel.style.display === 'block') {
	window._tracker.trackEvent('debug_panel_opened', { timestamp: Date.now() });
	}
	}
	}

	// 디버그 로그 지우기
	function clearDebugLog() {
	if (window._tracker && window._tracker.getDebugLog) {
	window._tracker.getDebugLog().length = 0;
	const debugLogEl = document.getElementById('debugLog');
	if (debugLogEl) {
	debugLogEl.innerHTML = '<div class="log-entry info">로그가 지워졌습니다.</div>';
	}
	}
	}

	// 서버 상태 확인
	async function checkServerStatus() {
	try {
	const response = await fetch('https://seawolf2357-ev-cook-siteurl.static.hf.space/');
	if (response.ok) {
	alert('✅ 서버가 정상적으로 작동 중입니다.');
	} else {
	alert('⚠️ 서버 응답 상태: ' + response.status);
	}
	} catch (e) {
	alert('❌ 서버에 연결할 수 없습니다: ' + e.message);
	}
	}

	// 콘솔에 추적 정보 출력
	console.log('%c🔍 EV Cook 추적 시스템 활성화됨', 'color: #4CAF50; font-size: 16px; font-weight: bold;');
	console.log('%c추적 서버:', 'font-weight: bold;', 'https://seawolf2357-ev-cook-siteurl.static.hf.space');
	console.log('%c사이트 ID:', 'font-weight: bold;', 'c4562ca1');
	console.log('%cDevice ID:', 'font-weight: bold;', localStorage.getItem('_tracker_device_id') \|\| '생성 중...');
	console.log('\n%c💡 Tip: 디버그 패널 버튼을 클릭하여 실시간 추적 로그를 확인하세요!', 'color: #666;');
	</script>
	</body>
	</html>