Update index.html

index.html

@@ -345,13 +345,13 @@
         <div class="price-ticker glass" id="priceTicker">
             <div class="ticker-item">
                 <span class="ticker-symbol">BTC</span>
-                <span class="ticker-price" id="btcPrice">$--,---</span>
-                <span class="ticker-change up" id="btcChange">+0.0%</span>
+                <span class="ticker-price" id="btcPrice">$98,500</span>
+                <span class="ticker-change up" id="btcChange">+2.3%</span>
             </div>
             <div class="ticker-item">
                 <span class="ticker-symbol">ETH</span>
-                <span class="ticker-price" id="ethPrice">$--,---</span>
-                <span class="ticker-change up" id="ethChange">+0.0%</span>
+                <span class="ticker-price" id="ethPrice">$3,450</span>
+                <span class="ticker-change up" id="ethChange">+1.8%</span>
             </div>
         </div>
         
@@ -525,10 +525,146 @@
     <div class="toast-container" id="toastContainer"></div>
     
     <script>
-        // ==================== Configuration ====================
-        const API_BASE = '/api';
-        const SESSION_KEY = 'pricegen_session';
-        const USER_KEY = 'pricegen_user';
+        // ==================== Demo Data ====================
+        const DEMO_MARKETS = [
+            {
+                id: 1,
+                title: "Bitcoin이 2025년 3월까지 $150K를 돌파할 것인가?",
+                description: "BTC가 Q1 2025에 $150,000를 돌파할지 예측하세요.",
+                category: "crypto",
+                category_info: { icon: "💰", name: "Crypto", name_kr: "암호화폐" },
+                yes_pool: 25000, no_pool: 18000,
+                yes_pct: 58, no_pct: 42,
+                yes_odds: 1.72, no_odds: 2.39,
+                total_volume: 43000, participant_count: 86,
+                status: "active", time_remaining: "85일 남음",
+                resolution_source: "CoinGecko BTC/USD 가격",
+                ai_prediction_yes: 0.62,
+                ai_prediction_reason: "기관 투자 증가와 ETF 승인으로 상승 모멘텀",
+                comments: [
+                    { username: "CryptoWhale", content: "ETF 승인 이후 상승 추세가 강해질 것 같습니다.", created_at: "2025-01-04 10:30" },
+                    { username: "TraderKim", content: "조금 더 지켜봐야 할 것 같아요.", created_at: "2025-01-03 15:20" }
+                ]
+            },
+            {
+                id: 2,
+                title: "Tesla 주가가 2025년 6월까지 $500를 넘길까?",
+                description: "테슬라 주식이 $500를 초과할지 예측하세요.",
+                category: "stocks",
+                category_info: { icon: "📈", name: "Stocks", name_kr: "주식" },
+                yes_pool: 12000, no_pool: 15000,
+                yes_pct: 44, no_pct: 56,
+                yes_odds: 2.25, no_odds: 1.80,
+                total_volume: 27000, participant_count: 54,
+                status: "active", time_remaining: "176일 남음",
+                resolution_source: "NASDAQ TSLA 종가",
+                ai_prediction_yes: 0.45,
+                ai_prediction_reason: "EV 경쟁 심화로 불확실성 존재",
+                comments: []
+            },
+            {
+                id: 3,
+                title: "USD/KRW 환율이 2025년 상반기에 1,500원을 넘길까?",
+                description: "달러-원 환율 예측",
+                category: "forex",
+                category_info: { icon: "💱", name: "Forex", name_kr: "외환" },
+                yes_pool: 8500, no_pool: 6500,
+                yes_pct: 57, no_pct: 43,
+                yes_odds: 1.76, no_odds: 2.31,
+                total_volume: 15000, participant_count: 30,
+                status: "active", time_remaining: "176일 남음",
+                resolution_source: "한국은행 기준환율",
+                ai_prediction_yes: 0.55,
+                ai_prediction_reason: "미국 금리 인하 지연으로 달러 강세 지속 가능",
+                comments: []
+            },
+            {
+                id: 4,
+                title: "AI 기업이 2025년 말까지 시가총액 1위가 될까?",
+                description: "AI 회사가 세계 시가총액 1위가 될지 예측",
+                category: "tech",
+                category_info: { icon: "⚡", name: "Tech & AI", name_kr: "테크/AI" },
+                yes_pool: 18000, no_pool: 12000,
+                yes_pct: 60, no_pct: 40,
+                yes_odds: 1.67, no_odds: 2.50,
+                total_volume: 30000, participant_count: 60,
+                status: "active", time_remaining: "360일 남음",
+                resolution_source: "Bloomberg 시가총액 순위",
+                ai_prediction_yes: 0.68,
+                ai_prediction_reason: "NVIDIA의 AI 칩 독점으로 급성장 중",
+                comments: []
+            },
+            {
+                id: 5,
+                title: "2025년 Fed가 3회 이상 금리를 인하할까?",
+                description: "연준의 금리 정책 예측",
+                category: "economy",
+                category_info: { icon: "🏦", name: "Economy", name_kr: "경제" },
+                yes_pool: 22000, no_pool: 15000,
+                yes_pct: 59, no_pct: 41,
+                yes_odds: 1.68, no_odds: 2.47,
+                total_volume: 37000, participant_count: 74,
+                status: "active", time_remaining: "360일 남음",
+                resolution_source: "Federal Reserve 공식 발표",
+                ai_prediction_yes: 0.52,
+                ai_prediction_reason: "인플레이션 둔화 속도에 따라 결정될 전망",
+                comments: []
+            },
+            {
+                id: 6,
+                title: "Bitcoin이 2024년 12월에 $100K를 돌파했다",
+                description: "BTC $100K 달성 여부",
+                category: "crypto",
+                category_info: { icon: "💰", name: "Crypto", name_kr: "암호화폐" },
+                yes_pool: 45000, no_pool: 12000,
+                yes_pct: 79, no_pct: 21,
+                yes_odds: 1.27, no_odds: 4.75,
+                total_volume: 57000, participant_count: 114,
+                status: "resolved", resolved_outcome: "yes",
+                time_remaining: "✅ YES",
+                resolution_source: "Official Source",
+                ai_prediction_yes: null,
+                comments: []
+            },
+            {
+                id: 7,
+                title: "Trump가 2024년 대선에서 승리했다",
+                description: "2024 미국 대선 결과",
+                category: "politics",
+                category_info: { icon: "🏛️", name: "Politics", name_kr: "정치" },
+                yes_pool: 38000, no_pool: 25000,
+                yes_pct: 60, no_pct: 40,
+                yes_odds: 1.66, no_odds: 2.52,
+                total_volume: 63000, participant_count: 126,
+                status: "resolved", resolved_outcome: "yes",
+                time_remaining: "✅ YES",
+                resolution_source: "Official Source",
+                ai_prediction_yes: null,
+                comments: []
+            }
+        ];
+        
+        const DEMO_USERS = [
+            { id: 1, username: 'CryptoWhale', gen_balance: 12500, total_bets: 125, wins: 62, losses: 41 },
+            { id: 2, username: 'TraderKim', gen_balance: 8750, total_bets: 87, wins: 43, losses: 29 },
+            { id: 3, username: 'AI_Master', gen_balance: 6200, total_bets: 62, wins: 31, losses: 20 },
+            { id: 4, username: 'ForexPro', gen_balance: 5100, total_bets: 51, wins: 25, losses: 17 },
+            { id: 5, username: 'StockGuru', gen_balance: 4800, total_bets: 48, wins: 24, losses: 16 },
+        ];
+        
+        const CATEGORIES = {
+            all: { icon: "🌐", name: "All", name_kr: "전체" },
+            crypto: { icon: "💰", name: "Crypto", name_kr: "암호화폐" },
+            stocks: { icon: "📈", name: "Stocks", name_kr: "주식" },
+            forex: { icon: "💱", name: "Forex", name_kr: "외환" },
+            futures: { icon: "📊", name: "Futures", name_kr: "선물" },
+            economy: { icon: "🏦", name: "Economy", name_kr: "경제" },
+            tech: { icon: "⚡", name: "Tech & AI", name_kr: "테크/AI" },
+            geopolitics: { icon: "🌍", name: "Geopolitics", name_kr: "지정학" },
+            politics: { icon: "🏛️", name: "Politics", name_kr: "정치" },
+            sports: { icon: "🏆", name: "Sports", name_kr: "스포츠" },
+            korea: { icon: "🇰🇷", name: "Korea", name_kr: "한국" }
+        };
         
         // ==================== i18n ====================
         const i18n = {
@@ -576,13 +712,11 @@
             }
         };
         
-        let currentLang = 'en';
+        let currentLang = 'kr';
         let currentUser = null;
-        let sessionToken = null;
         let currentSort = 'hot';
         let currentCategory = '';
         let selectedMarket = null;
-        let categories = {};
         
         function t(key) { return i18n[currentLang][key] || i18n.en[key] || key; }
         
@@ -599,178 +733,30 @@
             });
         }
         
-        // ==================== Session Management ====================
-        function saveSession(token, user) {
-            sessionToken = token;
-            currentUser = user;
-            localStorage.setItem(SESSION_KEY, token);
-            localStorage.setItem(USER_KEY, JSON.stringify(user));
-        }
-        
-        function loadSession() {
-            sessionToken = localStorage.getItem(SESSION_KEY);
-            const userStr = localStorage.getItem(USER_KEY);
-            if (userStr) {
-                try {
-                    currentUser = JSON.parse(userStr);
-                } catch (e) {
-                    currentUser = null;
-                }
-            }
-            return sessionToken && currentUser;
-        }
-        
-        function clearSession() {
-            sessionToken = null;
-            currentUser = null;
-            localStorage.removeItem(SESSION_KEY);
-            localStorage.removeItem(USER_KEY);
-        }
-        
-        // ==================== API ====================
-        async function fetchAPI(endpoint, options = {}) {
-            const headers = {
-                'Content-Type': 'application/json',
-                ...options.headers
-            };
-            
-            // Add authentication headers
-            if (sessionToken) {
-                headers['Authorization'] = `Bearer ${sessionToken}`;
-            }
-            if (currentUser?.id) {
-                headers['X-User-ID'] = currentUser.id.toString();
-            }
-            
-            try {
-                const response = await fetch(`${API_BASE}${endpoint}`, {
-                    ...options,
-                    headers
-                });
-                
-                if (response.status === 401) {
-                    // Session expired or invalid
-                    clearSession();
-                    updateUserCard();
-                    showToast(t('loginRequired'), 'error');
-                    return null;
-                }
-                
-                if (!response.ok) {
-                    const error = await response.json();
-                    throw new Error(error.detail || 'API Error');
-                }
-                
-                return await response.json();
-            } catch (error) {
-                console.error('API Error:', error);
-                throw error;
-            }
-        }
-        
-        // ==================== Authentication ====================
-        function handleLoginClick() {
-            if (currentUser) {
-                // Toggle dropdown
-                const menu = document.getElementById('userDropdownMenu');
-                menu.classList.toggle('active');
-            } else {
-                // Show login modal
-                document.getElementById('loginModal').classList.add('active');
-            }
-        }
-        
-        function closeLoginModal() {
-            document.getElementById('loginModal').classList.remove('active');
-        }
-        
-        async function loginWithHuggingFace() {
-            // HuggingFace OAuth flow
-            // In a real HF Space, this would use the built-in OAuth
-            // For now, we'll show a message
-            showToast('HuggingFace OAuth requires deployment on HF Spaces', 'error');
-            
-            // If running on HF Spaces, uncomment this:
-            // window.location.href = '/login/huggingface';
-        }
-        
-        async function demoLogin(userId) {
-            showToast(t('loggingIn'), 'success');
-            
-            try {
-                const data = await fetchAPI(`/auth/demo-login?user_id=${userId}`, {
-                    method: 'POST'
-                });
-                
-                if (data?.success) {
-                    saveSession(data.session_token, data.user);
-                    updateUserCard();
-                    closeLoginModal();
-                    showToast(`${t('welcome')}, ${data.user.username}!`, 'success');
-                    loadNotificationCount();
-                }
-            } catch (error) {
-                showToast('Login failed: ' + error.message, 'error');
-            }
-        }
-        
-        async function handleLogout() {
-            try {
-                await fetchAPI('/auth/logout', { method: 'POST' });
-            } catch (e) {
-                // Ignore errors on logout
-            }
+        // ==================== Categories ====================
+        function loadCategories() {
+            const categoryList = document.getElementById('categoryList');
             
-            clearSession();
-            updateUserCard();
-            document.getElementById('userDropdownMenu').classList.remove('active');
-            showToast(t('loggedOut'), 'success');
-        }
-        
-        async function checkAuthStatus() {
-            if (!sessionToken) return false;
+            let html = `<div class="category-item active" data-category="" onclick="selectCategory('')">
+                <span class="category-icon">🌐</span><span class="category-name">${t('all')}</span>
+            </div>`;
             
-            try {
-                const data = await fetchAPI('/auth/me');
-                if (data?.authenticated && data.user) {
-                    currentUser = data.user;
-                    localStorage.setItem(USER_KEY, JSON.stringify(data.user));
-                    return true;
-                }
-            } catch (e) {
-                // Session invalid
+            for (const [key, cat] of Object.entries(CATEGORIES)) {
+                if (key === 'all') continue;
+                const name = currentLang === 'kr' ? cat.name_kr : cat.name;
+                html += `<div class="category-item" data-category="${key}" onclick="selectCategory('${key}')">
+                    <span class="category-icon">${cat.icon}</span><span class="category-name">${name}</span>
+                </div>`;
             }
+            categoryList.innerHTML = html;
             
-            clearSession();
-            return false;
-        }
-        
-        // ==================== Categories ====================
-        async function loadCategories() {
-            try {
-                const data = await fetchAPI('/categories');
-                categories = data.categories;
-                const categoryList = document.getElementById('categoryList');
-                
-                let html = `<div class="category-item active" data-category="" onclick="selectCategory('')">
-                    <span class="category-icon">🌐</span><span class="category-name">${t('all')}</span>
-                </div>`;
-                
-                for (const [key, cat] of Object.entries(data.categories)) {
-                    const name = currentLang === 'kr' ? cat.name_kr : cat.name;
-                    html += `<div class="category-item" data-category="${key}" onclick="selectCategory('${key}')">
-                        <span class="category-icon">${cat.icon}</span><span class="category-name">${name}</span>
-                    </div>`;
-                }
-                categoryList.innerHTML = html;
-                
-                // Populate create market category select
-                const categorySelect = document.getElementById('marketCategory');
-                categorySelect.innerHTML = Object.entries(data.categories).map(([key, cat]) => 
+            // Populate create market category select
+            const categorySelect = document.getElementById('marketCategory');
+            categorySelect.innerHTML = Object.entries(CATEGORIES)
+                .filter(([k]) => k !== 'all')
+                .map(([key, cat]) => 
                     `<option value="${key}">${cat.icon} ${currentLang === 'kr' ? cat.name_kr : cat.name}</option>`
                 ).join('');
-                
-            } catch (error) { console.error('Failed to load categories:', error); }
         }
         
         function selectCategory(category) {
@@ -782,14 +768,30 @@
         }
         
         // ==================== Markets ====================
-        async function loadMarkets() {
-            try {
-                const params = new URLSearchParams({ sort: currentSort, status: 'all', limit: '20' });
-                if (currentCategory) params.append('category', currentCategory);
-                
-                const data = await fetchAPI(`/markets?${params}`);
-                renderMarkets(data.markets);
-            } catch (error) { console.error('Failed to load markets:', error); }
+        function loadMarkets() {
+            let markets = [...DEMO_MARKETS];
+            
+            // Filter by category
+            if (currentCategory) {
+                markets = markets.filter(m => m.category === currentCategory);
+            }
+            
+            // Sort
+            switch (currentSort) {
+                case 'volume':
+                    markets.sort((a, b) => b.total_volume - a.total_volume);
+                    break;
+                case 'newest':
+                    markets.sort((a, b) => b.id - a.id);
+                    break;
+                case 'ending':
+                    markets.sort((a, b) => (a.status === 'active' ? 0 : 1) - (b.status === 'active' ? 0 : 1));
+                    break;
+                default: // hot
+                    markets.sort((a, b) => b.participant_count - a.participant_count);
+            }
+            
+            renderMarkets(markets);
         }
         
         function renderMarkets(markets) {
@@ -805,18 +807,14 @@
             grid.innerHTML = markets.map(market => {
                 const statusClass = market.status === 'resolved' 
                     ? (market.resolved_outcome === 'yes' ? 'resolved-yes' : 'resolved-no')
-                    : (market.time_status === 'urgent' ? 'urgent' : 'active');
-                
-                const statusText = market.status === 'resolved'
-                    ? `✅ ${market.resolved_outcome.toUpperCase()}`
-                    : market.time_remaining;
+                    : 'active';
                 
                 const catName = currentLang === 'kr' ? market.category_info?.name_kr : market.category_info?.name;
                 
                 return `<div class="market-card glass ${market.status === 'resolved' ? 'resolved' : ''}" onclick="openMarketModal(${market.id})">
                     <div class="market-header">
                         <div class="market-category"><span>${market.category_info?.icon || '📊'}</span><span>${catName || market.category}</span></div>
-                        <span class="market-status ${statusClass}">${statusText}</span>
+                        <span class="market-status ${statusClass}">${market.time_remaining}</span>
                     </div>
                     <h3 class="market-title">${market.title}</h3>
                     <div class="prob-bar-container">
@@ -834,54 +832,37 @@
         }
         
         // ==================== Rankings ====================
-        async function loadRankings() {
-            try {
-                const data = await fetchAPI('/rankings');
-                const container = document.getElementById('genRanking');
+        function loadRankings() {
+            const container = document.getElementById('genRanking');
+            
+            container.innerHTML = DEMO_USERS.map((user, index) => {
+                const posClass = index === 0 ? 'gold' : index === 1 ? 'silver' : index === 2 ? 'bronze' : '';
+                const posText = index < 3 ? ['🥇', '🥈', '🥉'][index] : (index + 1);
                 
-                container.innerHTML = data.gen_ranking.map((user, index) => {
-                    const posClass = index === 0 ? 'gold' : index === 1 ? 'silver' : index === 2 ? 'bronze' : '';
-                    const posText = index < 3 ? ['🥇', '🥈', '🥉'][index] : (index + 1);
-                    
-                    return `<div class="ranking-item">
-                        <div class="ranking-position ${posClass}">${posText}</div>
-                        <img class="ranking-avatar" src="${user.avatar_url || 'https://api.dicebear.com/7.x/avataaars/svg?seed=' + user.username}" onerror="this.src='https://api.dicebear.com/7.x/avataaars/svg?seed=default'">
-                        <div class="ranking-info">
-                            <div class="ranking-name">@${user.username}</div>
-                            <div class="ranking-value">${user.gen_balance.toLocaleString()} GEN</div>
-                        </div>
-                    </div>`;
-                }).join('');
-            } catch (error) { console.error('Failed to load rankings:', error); }
-        }
-        
-        // ==================== Prices ====================
-        async function loadPrices() {
-            try {
-                const data = await fetchAPI('/prices');
-                if (data.prices.BTC?.price) {
-                    document.getElementById('btcPrice').textContent = `$${data.prices.BTC.price.toLocaleString(undefined, {maximumFractionDigits: 0})}`;
-                    const btcChange = document.getElementById('btcChange');
-                    btcChange.textContent = `${data.prices.BTC.change_24h >= 0 ? '+' : ''}${data.prices.BTC.change_24h}%`;
-                    btcChange.className = `ticker-change ${data.prices.BTC.change_24h >= 0 ? 'up' : 'down'}`;
-                }
-                if (data.prices.ETH?.price) {
-                    document.getElementById('ethPrice').textContent = `$${data.prices.ETH.price.toLocaleString(undefined, {maximumFractionDigits: 0})}`;
-                    const ethChange = document.getElementById('ethChange');
-                    ethChange.textContent = `${data.prices.ETH.change_24h >= 0 ? '+' : ''}${data.prices.ETH.change_24h}%`;
-                    ethChange.className = `ticker-change ${data.prices.ETH.change_24h >= 0 ? 'up' : 'down'}`;
-                }
-            } catch (error) { console.error('Failed to load prices:', error); }
+                return `<div class="ranking-item">
+                    <div class="ranking-position ${posClass}">${posText}</div>
+                    <img class="ranking-avatar" src="https://api.dicebear.com/7.x/avataaars/svg?seed=${user.username}" onerror="this.src='https://api.dicebear.com/7.x/avataaars/svg?seed=default'">
+                    <div class="ranking-info">
+                        <div class="ranking-name">@${user.username}</div>
+                        <div class="ranking-value">${user.gen_balance.toLocaleString()} GEN</div>
+                    </div>
+                </div>`;
+            }).join('');
         }
         
-        // ==================== Market Modal ====================
-        async function openMarketModal(marketId) {
-            try {
-                const data = await fetchAPI(`/markets/${marketId}`);
-                selectedMarket = data.market;
-                renderMarketModal(data.market);
-                document.getElementById('marketModal').classList.add('active');
-            } catch (error) { showToast(t('marketNotFound'), 'error'); }
+        // ==================== Market Modal - 핵심 수정 ====================
+        function openMarketModal(marketId) {
+            // 데모 데이터에서 마켓 찾기
+            const market = DEMO_MARKETS.find(m => m.id === marketId);
+            
+            if (!market) {
+                showToast(t('marketNotFound'), 'error');
+                return;
+            }
+            
+            selectedMarket = market;
+            renderMarketModal(market);
+            document.getElementById('marketModal').classList.add('active');
         }
         
         function renderMarketModal(market) {
@@ -903,6 +884,25 @@
                 </div>`;
             }
             
+            // Comments HTML
+            let commentsHtml = '';
+            if (market.comments && market.comments.length > 0) {
+                commentsHtml = market.comments.map(comment => `
+                    <div class="comment-item">
+                        <img class="comment-avatar" src="https://api.dicebear.com/7.x/avataaars/svg?seed=${comment.username}" onerror="this.src='https://api.dicebear.com/7.x/avataaars/svg?seed=default'">
+                        <div class="comment-content">
+                            <div class="comment-header">
+                                <span class="comment-author">@${comment.username}</span>
+                                <span class="comment-time">${comment.created_at}</span>
+                            </div>
+                            <p class="comment-text">${escapeHtml(comment.content)}</p>
+                        </div>
+                    </div>
+                `).join('');
+            } else {
+                commentsHtml = `<p style="color: var(--text-muted); text-align: center; padding: 1rem;">${t('noComments')}</p>`;
+            }
+            
             content.innerHTML = `
                 <button class="modal-close" onclick="closeModal()"><i class="fas fa-times"></i></button>
                 <div class="market-category" style="display: inline-flex; margin-bottom: 1rem;">
@@ -920,12 +920,6 @@
                 
                 ${aiSection}
                 
-                <div style="text-align: center; margin: 1rem 0;">
-                    <button class="btn btn-ai" onclick="getAIPrediction(${market.id})" id="aiPredictBtn">
-                        <i class="fas fa-robot"></i> ${t('getAIPrediction')}
-                    </button>
-                </div>
-                
                 <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.5rem 0;">
                     <div style="text-align: center; padding: 1rem; background: rgba(255,255,255,0.05); border-radius: 12px;">
                         <div style="font-family: 'JetBrains Mono'; font-size: 1.25rem; color: var(--accent-cyan);">${market.total_volume.toLocaleString()}</div>
@@ -937,7 +931,7 @@
                     </div>
                     <div style="text-align: center; padding: 1rem; background: rgba(255,255,255,0.05); border-radius: 12px;">
                         <div style="font-size: 1rem; color: ${market.status === 'resolved' ? 'var(--success)' : 'var(--text-primary)'};">
-                            ${market.status === 'resolved' ? '✅ ' + market.resolved_outcome.toUpperCase() : market.time_remaining || 'Active'}
+                            ${market.time_remaining || 'Active'}
                         </div>
                         <div style="font-size: 0.8rem; color: var(--text-muted);">${t('status')}</div>
                     </div>
@@ -985,18 +979,7 @@
                         </div>
                     ` : ''}
                     <div class="comment-list">
-                        ${market.comments?.map(comment => `
-                            <div class="comment-item">
-                                <img class="comment-avatar" src="${comment.avatar_url || 'https://api.dicebear.com/7.x/avataaars/svg?seed=' + comment.username}" onerror="this.src='https://api.dicebear.com/7.x/avataaars/svg?seed=default'">
-                                <div class="comment-content">
-                                    <div class="comment-header">
-                                        <span class="comment-author">@${comment.username}</span>
-                                        <span class="comment-time">${formatTime(comment.created_at)}</span>
-                                    </div>
-                                    <p class="comment-text">${escapeHtml(comment.content)}</p>
-                                </div>
-                            </div>
-                        `).join('') || `<p style="color: var(--text-muted); text-align: center; padding: 1rem;">${t('noComments')}</p>`}
+                        ${commentsHtml}
                     </div>
                 </div>
             `;
@@ -1009,64 +992,38 @@
         
         function setBetAmount(amount) { document.getElementById('betAmount').value = amount; }
         
-        async function placeBet(choice) {
+        function placeBet(choice) {
             if (!currentUser) { showToast(t('loginRequired'), 'error'); return; }
             const amount = parseInt(document.getElementById('betAmount').value);
             if (isNaN(amount) || amount < 10) { showToast('Min bet: 10 GEN', 'error'); return; }
             if (amount > currentUser.gen_balance) { showToast(t('insufficientBalance'), 'error'); return; }
             
-            try {
-                const data = await fetchAPI('/bets', {
-                    method: 'POST',
-                    body: JSON.stringify({ market_id: selectedMarket.id, choice: choice, amount: amount })
-                });
-                
-                if (data) {
-                    currentUser = data.user;
-                    localStorage.setItem(USER_KEY, JSON.stringify(currentUser));
-                    updateUserCard();
-                    showToast(data.message, 'success');
-                    closeModal();
-                    loadMarkets();
-                }
-            } catch (error) { showToast(error.message, 'error'); }
-        }
-        
-        async function getAIPrediction(marketId) {
-            const btn = document.getElementById('aiPredictBtn');
-            btn.innerHTML = `<span class="loading-spinner"></span> ${t('analyzing')}`;
-            btn.disabled = true;
+            // Demo: Deduct and show success
+            currentUser.gen_balance -= amount;
+            const odds = choice === 'yes' ? selectedMarket.yes_odds : selectedMarket.no_odds;
+            const potentialWin = Math.round(amount * odds);
             
-            try {
-                const data = await fetchAPI(`/markets/${marketId}/ai-prediction`);
-                
-                // Refresh modal with new prediction
-                const marketData = await fetchAPI(`/markets/${marketId}`);
-                selectedMarket = marketData.market;
-                renderMarketModal(marketData.market);
-                
-                showToast('AI prediction updated!', 'success');
-            } catch (error) {
-                showToast('AI prediction failed: ' + error.message, 'error');
-                btn.innerHTML = `<i class="fas fa-robot"></i> ${t('getAIPrediction')}`;
-                btn.disabled = false;
-            }
+            showToast(`${t('betPlaced')} ${amount} GEN → ${potentialWin} GEN (${odds}x)`, 'success');
+            updateUserCard();
+            closeModal();
         }
         
-        async function submitComment() {
+        function submitComment() {
             if (!currentUser || !selectedMarket) return;
             const input = document.getElementById('commentInput');
             const content = input.value.trim();
             if (!content) return;
             
-            try {
-                await fetchAPI('/comments', {
-                    method: 'POST',
-                    body: JSON.stringify({ market_id: selectedMarket.id, content: content })
-                });
-                showToast(t('commentPosted'), 'success');
-                openMarketModal(selectedMarket.id);
-            } catch (error) { showToast(error.message, 'error'); }
+            // Add to demo comments
+            if (!selectedMarket.comments) selectedMarket.comments = [];
+            selectedMarket.comments.unshift({
+                username: currentUser.username,
+                content: content,
+                created_at: new Date().toLocaleString()
+            });
+            
+            showToast(t('commentPosted'), 'success');
+            renderMarketModal(selectedMarket);
         }
         
         // ==================== Create Market ====================
@@ -1085,7 +1042,7 @@
             document.getElementById('createMarketModal').classList.remove('active');
         }
         
-        async function submitCreateMarket() {
+        function submitCreateMarket() {
             if (!currentUser) { showToast(t('loginRequired'), 'error'); return; }
             
             const title = document.getElementById('marketTitle').value.trim();
@@ -1098,88 +1055,69 @@
             if (!endDate) { showToast('End date is required', 'error'); return; }
             if (currentUser.gen_balance < 100) { showToast('Need 100 GEN to create market', 'error'); return; }
             
-            try {
-                const data = await fetchAPI('/markets', {
-                    method: 'POST',
-                    body: JSON.stringify({
-                        title: title,
-                        description: description,
-                        category: category,
-                        end_date: new Date(endDate).toISOString(),
-                        resolution_source: resolution
-                    })
-                });
-                
-                if (data) {
-                    showToast(data.message, 'success');
-                    closeCreateMarketModal();
-                    
-                    // Refresh user balance
-                    const userData = await fetchAPI(`/users/${currentUser.id}`);
-                    if (userData) {
-                        currentUser = userData.user;
-                        localStorage.setItem(USER_KEY, JSON.stringify(currentUser));
-                        updateUserCard();
-                    }
-                    
-                    loadMarkets();
-                }
-            } catch (error) { showToast(error.message, 'error'); }
+            // Demo: Create market
+            currentUser.gen_balance -= 100;
+            
+            const newMarket = {
+                id: DEMO_MARKETS.length + 1,
+                title: title,
+                description: description,
+                category: category,
+                category_info: CATEGORIES[category],
+                yes_pool: 0, no_pool: 0,
+                yes_pct: 50, no_pct: 50,
+                yes_odds: 2.0, no_odds: 2.0,
+                total_volume: 0, participant_count: 0,
+                status: "active",
+                time_remaining: "7일 남음",
+                resolution_source: resolution || 'N/A',
+                ai_prediction_yes: null,
+                comments: []
+            };
+            
+            DEMO_MARKETS.unshift(newMarket);
+            
+            showToast('✅ Market created!', 'success');
+            closeCreateMarketModal();
+            updateUserCard();
+            loadMarkets();
         }
         
-        // ==================== Notifications ====================
-        async function loadNotificationCount() {
-            if (!currentUser) return;
-            try {
-                const data = await fetchAPI(`/users/${currentUser.id}/notifications?unread_only=true`);
-                if (data) {
-                    const count = data.unread_count;
-                    const badge = document.getElementById('notifCount');
-                    if (count > 0) {
-                        badge.textContent = count > 99 ? '99+' : count;
-                        badge.style.display = 'flex';
-                    } else {
-                        badge.style.display = 'none';
-                    }
-                }
-            } catch (error) { console.error('Failed to load notifications:', error); }
+        // ==================== User & Auth ====================
+        function handleLoginClick() {
+            if (currentUser) {
+                const menu = document.getElementById('userDropdownMenu');
+                menu.classList.toggle('active');
+            } else {
+                document.getElementById('loginModal').classList.add('active');
+            }
         }
         
-        async function showNotifications() {
-            if (!currentUser) { showToast(t('loginRequired'), 'error'); return; }
-            
-            try {
-                const data = await fetchAPI(`/users/${currentUser.id}/notifications`);
-                if (!data) return;
-                
-                const list = document.getElementById('notificationsList');
-                
-                if (!data.notifications || data.notifications.length === 0) {
-                    list.innerHTML = `<p style="color: var(--text-muted); text-align: center; padding: 2rem;">${t('noNotifications')}</p>`;
-                } else {
-                    list.innerHTML = data.notifications.map(notif => {
-                        const bgColor = notif.is_read ? 'transparent' : 'rgba(0, 245, 212, 0.1)';
-                        return `<div style="padding: 1rem; background: ${bgColor}; border-radius: 12px; margin-bottom: 0.75rem; border-left: 3px solid ${notif.is_read ? 'var(--glass-border)' : 'var(--accent-cyan)'};">
-                            <div style="font-weight: 600; margin-bottom: 0.25rem;">${notif.title}</div>
-                            <div style="color: var(--text-secondary); font-size: 0.9rem;">${notif.message || ''}</div>
-                            <div style="color: var(--text-muted); font-size: 0.75rem; margin-top: 0.5rem;">${formatTime(notif.created_at)}</div>
-                        </div>`;
-                    }).join('');
-                }
-                
-                document.getElementById('notificationsModal').classList.add('active');
-                
-                // Mark as read
-                await fetchAPI(`/users/${currentUser.id}/notifications/read`, { method: 'POST' });
-                loadNotificationCount();
-            } catch (error) { showToast('Failed to load notifications', 'error'); }
+        function closeLoginModal() {
+            document.getElementById('loginModal').classList.remove('active');
         }
         
-        function closeNotificationsModal() {
-            document.getElementById('notificationsModal').classList.remove('active');
+        function loginWithHuggingFace() {
+            showToast('HuggingFace OAuth requires deployment on HF Spaces', 'error');
+        }
+        
+        function demoLogin(userId) {
+            const user = DEMO_USERS.find(u => u.id === userId);
+            if (user) {
+                currentUser = { ...user };
+                updateUserCard();
+                closeLoginModal();
+                showToast(`${t('welcome')}, ${user.username}!`, 'success');
+            }
+        }
+        
+        function handleLogout() {
+            currentUser = null;
+            updateUserCard();
+            document.getElementById('userDropdownMenu').classList.remove('active');
+            showToast(t('loggedOut'), 'success');
         }
         
-        // ==================== User ====================
         function updateUserCard() {
             const card = document.getElementById('userCard');
             const loginBtn = document.getElementById('loginBtn');
@@ -1192,26 +1130,13 @@
                 </div>`;
                 
                 loginBtn.innerHTML = `<i class="fas fa-user"></i> <span data-i18n="login">${t('login')}</span>`;
-                loginBtn.onclick = handleLoginClick;
                 return;
             }
             
             const winRate = currentUser.wins + currentUser.losses > 0 ? Math.round(currentUser.wins * 100 / (currentUser.wins + currentUser.losses)) : 0;
             
-            // Badges section
-            let badgesHtml = '';
-            if (currentUser.badges && currentUser.badges.length > 0) {
-                badgesHtml = `
-                <div class="badges-section">
-                    <div class="badges-title">${t('badges')}</div>
-                    <div class="badges-list">
-                        ${currentUser.badges.map(b => `<span class="badge-item" title="${b.description}">${b.icon}</span>`).join('')}
-                    </div>
-                </div>`;
-            }
-            
             card.innerHTML = `
-                <img class="user-avatar" src="${currentUser.avatar_url || 'https://api.dicebear.com/7.x/avataaars/svg?seed=' + currentUser.username}" onerror="this.src='https://api.dicebear.com/7.x/avataaars/svg?seed=default'">
+                <img class="user-avatar" src="https://api.dicebear.com/7.x/avataaars/svg?seed=${currentUser.username}" onerror="this.src='https://api.dicebear.com/7.x/avataaars/svg?seed=default'">
                 <div class="user-name">@${currentUser.username}</div>
                 <div class="user-balance">
                     <span class="balance-icon">💎</span>
@@ -1222,42 +1147,39 @@
                     <div class="user-stat"><div class="user-stat-value" style="color: var(--success);">${currentUser.wins}</div><div class="user-stat-label">${t('wins')}</div></div>
                     <div class="user-stat"><div class="user-stat-value">${winRate}%</div><div class="user-stat-label">${t('winRate')}</div></div>
                 </div>
-                ${badgesHtml}
             `;
             
             loginBtn.innerHTML = `
-                <img src="${currentUser.avatar_url || 'https://api.dicebear.com/7.x/avataaars/svg?seed=' + currentUser.username}" style="width: 24px; height: 24px; border-radius: 6px;" onerror="this.src='https://api.dicebear.com/7.x/avataaars/svg?seed=default'">
+                <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=${currentUser.username}" style="width: 24px; height: 24px; border-radius: 6px;" onerror="this.src='https://api.dicebear.com/7.x/avataaars/svg?seed=default'">
                 ${currentUser.username}
             `;
-            
-            loadNotificationCount();
+        }
+        
+        function claimDailyBonus() {
+            if (!currentUser) { showToast(t('loginRequired'), 'error'); return; }
+            currentUser.gen_balance += 50;
+            updateUserCard();
+            showToast(`🎁 ${t('bonusReceived')} +50 GEN`, 'success');
         }
         
         function showProfile() {
             document.getElementById('userDropdownMenu').classList.remove('active');
-            // Could open a profile modal here
             showToast('Profile feature coming soon!', 'success');
         }
         
         function showMyBets() {
             document.getElementById('userDropdownMenu').classList.remove('active');
-            // Could open a bets modal here
             showToast('My Bets feature coming soon!', 'success');
         }
         
-        async function claimDailyBonus() {
+        function showNotifications() {
             if (!currentUser) { showToast(t('loginRequired'), 'error'); return; }
-            try {
-                const data = await fetchAPI('/daily-bonus', { method: 'POST' });
-                if (data) {
-                    if (data.success) { 
-                        currentUser.gen_balance = data.balance; 
-                        localStorage.setItem(USER_KEY, JSON.stringify(currentUser));
-                        updateUserCard(); 
-                    }
-                    showToast(data.message, data.success ? 'success' : 'error');
-                }
-            } catch (error) { showToast(error.message, 'error'); }
+            document.getElementById('notificationsList').innerHTML = `<p style="color: var(--text-muted); text-align: center; padding: 2rem;">${t('noNotifications')}</p>`;
+            document.getElementById('notificationsModal').classList.add('active');
+        }
+        
+        function closeNotificationsModal() {
+            document.getElementById('notificationsModal').classList.remove('active');
         }
         
         // ==================== Utility ====================
@@ -1270,20 +1192,9 @@
             setTimeout(() => { toast.style.animation = 'slideIn 0.3s ease reverse'; setTimeout(() => toast.remove(), 300); }, 3000);
         }
         
-        function formatTime(dateStr) {
-            if (!dateStr) return '';
-            const date = new Date(dateStr);
-            const now = new Date();
-            const diff = now - date;
-            if (diff < 60000) return currentLang === 'kr' ? '방금 전' : 'just now';
-            if (diff < 3600000) return currentLang === 'kr' ? `${Math.floor(diff / 60000)}분 전` : `${Math.floor(diff / 60000)}m ago`;
-            if (diff < 86400000) return currentLang === 'kr' ? `${Math.floor(diff / 3600000)}시간 전` : `${Math.floor(diff / 3600000)}h ago`;
-            return currentLang === 'kr' ? `${Math.floor(diff / 86400000)}일 전` : `${Math.floor(diff / 86400000)}d ago`;
-        }
-        
         function escapeHtml(str) { const div = document.createElement('div'); div.textContent = str; return div.innerHTML; }
         
-        function refreshMarkets() { loadMarkets(); loadRankings(); loadPrices(); showToast('Refreshed!', 'success'); }
+        function refreshMarkets() { loadMarkets(); loadRankings(); showToast('Refreshed!', 'success'); }
         
         // ==================== Events ====================
         document.querySelectorAll('.sort-tab').forEach(tab => {
@@ -1305,7 +1216,6 @@
             }
         });
         
-        // Close dropdown when clicking outside
         document.addEventListener('click', (e) => {
             const dropdown = document.getElementById('userDropdown');
             const menu = document.getElementById('userDropdownMenu');
@@ -1320,16 +1230,12 @@
         document.getElementById('loginModal').addEventListener('click', (e) => { if (e.target.id === 'loginModal') closeLoginModal(); });
         
         // ==================== Init ====================
-        async function init() {
-            // Load session from localStorage
-            if (loadSession()) {
-                // Verify session is still valid
-                await checkAuthStatus();
-            }
-            
+        function init() {
+            loadCategories();
+            loadMarkets();
+            loadRankings();
             updateUserCard();
-            await Promise.all([loadCategories(), loadMarkets(), loadRankings(), loadPrices()]);
-            setInterval(loadPrices, 30000);
+            updateAllTranslations();
         }
         
         init();