Spaces:

seawolf2357
/

ev-cook-siteurl

Running

App Files Files Community

seawolf2357 commited on Jun 28

Commit

bcd71ae

verified ·

1 Parent(s): c14b8a9

Update index.html

Browse files

Files changed (1) hide show

index.html +119 -585

index.html CHANGED Viewed

@@ -1,598 +1,132 @@
-<!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;
-        }
-    </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-evcook.hf.space</span>
-                    </div>
-                    <div class="row">
-                        <span class="label">사이트 ID:</span>
-                        <span class="value">38e0a883</span>
-                    </div>
-                    <div class="row">
-                        <span class="label">추적 시작:</span>
-                        <span class="value" id="trackingStart">-</span>
-                    </div>
-                </div>
-            </div>
-            <div class="buttons">
-                <button onclick="testTracking()">📊 추적 테스트</button>
-                <button onclick="sendCustomEvent()">🎯 커스텀 이벤트</button>
-                <button onclick="viewDetails()" class="secondary">📋 상세 정보</button>
-            </div>
-        </section>
-        <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-evcook.hf.space" target="_blank" style="color: white;">seawolf2357-evcook.hf.space</a></p>
-    </footer>
-    <!-- Visitor Tracking Script -->
-    <script>
-    (function() {
-        // 추적 서버 URL (올바른 URL로 수정!)
-        const TRACKING_SERVER = 'https://seawolf2357-evcook.hf.space';
-        const SITE_ID = '38e0a883';
-        // 디바이스 ID 생성/조회
-        function getDeviceId() {
-            let deviceId = localStorage.getItem('_tracker_device_id');
-            if (!deviceId) {
-                // 하드웨어 기반 ID 생성
-                const components = [
-                    screen.width + 'x' + screen.height,
-                    navigator.hardwareConcurrency || 0,
-                    navigator.deviceMemory || 0,
-                    navigator.platform,
-                    navigator.language,
-                    new Date().getTimezoneOffset()
-                ];
-                // 간단한 해시 함수
-                let hash = 0;
-                const str = components.join('|');
-                for (let i = 0; i < str.length; i++) {
-                    const char = str.charCodeAt(i);
-                    hash = ((hash << 5) - hash) + char;
-                    hash = hash & hash;
-                }
-                deviceId = 'DEV_' + Math.abs(hash).toString(36);
-                localStorage.setItem('_tracker_device_id', deviceId);
-            }
-            return deviceId;
-        }
-        // WebGL 정보 수집
-        function getWebGLInfo() {
-            try {
-                const canvas = document.createElement('canvas');
-                const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
-                if (!gl) return 'Not supported';
-                const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
-                if (debugInfo) {
-                    return gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
-                }
-                return 'Unknown';
-            } catch(e) {
-                return 'Error';
             }
         }
-        // Gradio 엔드포인트로 데이터 전송 (두 가지 방법 모두 시도)
-        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,
-                timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-                cpuCores: navigator.hardwareConcurrency || 0,
-                deviceMemory: navigator.deviceMemory || 0,
-                gpuInfo: getWebGLInfo(),
-                timestamp: new Date().toISOString()
-            };
-            try {
-                // 방법 1: 새로운 API 엔드포인트 사용
-                const response1 = await fetch(TRACKING_SERVER + '/api/process_tracking', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({
-                        data_json: JSON.stringify(data)
-                    })
-                });
-                if (response1.ok) {
-                    console.log('[Tracker] ✅ Event tracked via API:', eventType, data);
-                    return;
-                }
-            } catch(e) {
-                console.log('[Tracker] API method failed, trying legacy method...');
-            }
-            try {
-                // 방법 2: 기존 Gradio 엔드포인트 사용 (폴백)
-                const response2 = await fetch(TRACKING_SERVER + '/run/predict', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({
-                        data: [JSON.stringify(data)],
-                        fn_index: 0  // process_tracking API 함수의 인덱스
-                    })
-                });
-                if (response2.ok) {
-                    console.log('[Tracker] ✅ Event tracked via legacy:', eventType, data);
-                } else {
-                    console.error('[Tracker] ❌ Server error:', response2.status);
-                }
-            } catch(e) {
-                console.error('[Tracker] ❌ Network error:', e);
             }
         }
-        // 전역 추적 함수
-        window._tracker = {
-            trackEvent: function(eventName, eventData) {
-                collectAndSend('custom', { name: eventName, data: eventData });
-            }
-        };
-        // 페이지 로드시 추적
-        if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', () => collectAndSend());
-        } else {
-            collectAndSend();
-        }
-        // SPA 지원 - URL 변경 감지
-        let lastUrl = location.href;
-        new MutationObserver(() => {
-            const url = location.href;
-            if (url !== lastUrl) {
-                lastUrl = url;
-                collectAndSend('navigation', { from: lastUrl, to: url });
-            }
-        }).observe(document, {subtree: true, childList: true});
-        // 스크롤 추적
-        let scrollTracked = false;
-        window.addEventListener('scroll', () => {
-            if (!scrollTracked && window.scrollY > 100) {
-                scrollTracked = true;
-                window._tracker.trackEvent('scroll', { depth: window.scrollY });
-            }
-        });
-        // 디버깅 정보 출력
-        console.log('%c🔍 EV Cook 추적 시스템 초기화', 'color: #4CAF50; font-size: 16px; font-weight: bold;');
-        console.log('추적 서버:', TRACKING_SERVER);
-        console.log('사이트 ID:', SITE_ID);
-        console.log('디바이스 ID:', getDeviceId());
-    })();
-    </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'
-                });
-                alert('✅ 추적 이벤트가 전송되었습니다!\n\n개발자 도구(F12) Console 탭에서 확인하세요.');
-            } else {
-                alert('❌ 추적 스크립트가 로드되지 않았습니다.');
-            }
-        }
-        // 커스텀 이벤트 전송
-        function sendCustomEvent() {
-            const eventName = prompt('이벤트 이름을 입력하세요:', 'custom_action');
-            if (eventName && window._tracker) {
-                const eventData = {
-                    custom_name: eventName,
-                    user_input: true,
-                    timestamp: Date.now()
-                };
-                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: '38e0a883',
-                    serverUrl: 'https://seawolf2357-evcook.hf.space'
-                },
-                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
-                },
-                screen: {
-                    resolution: screen.width + 'x' + screen.height,
-                    colorDepth: screen.colorDepth,
-                    pixelRatio: window.devicePixelRatio
-                },
-                viewport: {
-                    width: window.innerWidth,
-                    height: window.innerHeight
-                },
-                hardware: {
-                    cpuCores: navigator.hardwareConcurrency || 'Unknown',
-                    deviceMemory: navigator.deviceMemory ? navigator.deviceMemory + 'GB' : 'Unknown'
                 },
-                location: {
-                    href: window.location.href,
-                    hostname: window.location.hostname,
-                    protocol: window.location.protocol,
-                    pathname: window.location.pathname
-                },
-                time: {
-                    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-                    offset: new Date().getTimezoneOffset(),
-                    locale: new Date().toLocaleString()
-                }
-            };
-            document.getElementById('browserDetails').textContent = JSON.stringify(details, null, 2);
-            document.getElementById('detailsSection').style.display = 'block';
-            // 상세 정보 보기도 추적
-            window._tracker.trackEvent('view_details', { action: 'show_browser_info' });
-        }
-        // 콘솔에 추적 정보 출력
-        console.log('%c🔍 EV Cook 추적 시스템 활성화됨', 'color: #4CAF50; font-size: 16px; font-weight: bold;');
-        console.log('%c추적 서버:', 'font-weight: bold;', 'https://seawolf2357-evcook.hf.space');
-        console.log('%c사이트 ID:', 'font-weight: bold;', '38e0a883');
-        console.log('%cDevice ID:', 'font-weight: bold;', localStorage.getItem('_tracker_device_id') || '생성 중...');
-        console.log('\n%c💡 Tip: window._tracker.trackEvent(name, data)로 커스텀 이벤트를 전송할 수 있습니다.', 'color: #666;');
-    </script>
-</body>
-</html>

+<!-- Simplified API Tracking Script -->
+<script>
+(function() {
+    // 추적 서버 설정
+    const TRACKING_SERVER = 'https://seawolf2357-evcook.hf.space';
+    const SITE_ID = '38e0a883';
+    // 디바이스 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 sendTracking(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()
+        };
+        console.log('[Tracker] Sending:', eventType);
+        // 방법 1: Direct API with data_json parameter
+        try {
+            const response = await fetch(TRACKING_SERVER + '/api/predict/', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    data: [JSON.stringify(data)],  // data_json expects a string
+                    fn_index: 0
+                })
+            });
+            if (response.ok) {
+                console.log('[Tracker] ✅ Success (Method 1)');
+                return;
             }
+        } catch (e) {
+            console.log('[Tracker] Method 1 error:', e);
         }
+        // 방법 2: Using form data (alternative approach)
+        try {
+            const formData = new FormData();
+            formData.append('data_json', JSON.stringify(data));
+            const response = await fetch(TRACKING_SERVER + '/api/process_tracking', {
+                method: 'POST',
+                body: formData
+            });
+            if (response.ok) {
+                console.log('[Tracker] ✅ Success (Method 2)');
+                return;
             }
+        } catch (e) {
+            console.log('[Tracker] Method 2 error:', e);
         }
+        // 방법 3: Legacy endpoint
+        try {
+            const response = await fetch(TRACKING_SERVER + '/run/predict', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
                 },
+                body: JSON.stringify({
+                    data: [JSON.stringify(data)],
+                    fn_index: 0
+                })
+            });
+            if (response.ok) {
+                console.log('[Tracker] ✅ Success (Method 3)');
+                return;
+            }
+        } catch (e) {
+            console.log('[Tracker] Method 3 error:', e);
+        }
+        console.error('[Tracker] ❌ All methods failed');
+    }
+    // 전역 추적 객체
+    window._tracker = {
+        trackEvent: function(name, data) {
+            sendTracking('custom', { name: name, data: data });
+        },
+        // 간단한 테스트 함수
+        test: function() {
+            console.log('[Tracker] Sending test event...');
+            sendTracking('test', {
+                message: 'This is a test event',
+                timestamp: new Date().toISOString()
+            });
+        }
+    };
+    // 페이지 로드 추적
+    sendTracking('pageview');
+    // 스크롤 추적
+    let scrolled = false;
+    window.addEventListener('scroll', function() {
+        if (!scrolled && window.scrollY > 100) {
+            scrolled = true;
+            sendTracking('scroll', { depth: window.scrollY });
+        }
+    });
+    console.log('🔍 EV Cook Tracker Ready');
+    console.log('Device ID:', getDeviceId());
+    console.log('Test with: window._tracker.test()');
+})();
+</script>