Spaces:

seawolf2357
/

ev-cook-siteurl

Running

File size: 23,857 Bytes

<!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>&copy; 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>