Update app.py

app.py

@@ -41,21 +41,31 @@ html_code = f"""
         :root {{ --gold: #d4af37; --dark: #0a0a0a; --card-bg: #1c1c1c; --text: #e0e0e0; --accent: #c5a059; }}
         body {{ margin: 0; padding: 0; background: var(--dark); color: var(--text); font-family: 'Segoe UI', sans-serif; overflow: hidden; }}
 
+        /* --- Common --- */
+        .page {{ position: absolute; top: 0; left: 0; width: 100%; height: 100vh; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); box-sizing: border-box; }}
+        
+        /* --- Main Page --- */
         #main-page {{
-            position: absolute; top: 0; left: 0; width: 100%; height: 100vh;
             background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.95)), url('https://images.unsplash.com/photo-1516981879613-9f5da904015f?q=80&w=2560&auto=format&fit=crop');
             background-size: cover; background-position: center;
-            z-index: 5000; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
-            padding-top: 20px; box-sizing: border-box;
-            transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+            z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
+            padding-top: 20px;
         }}
         
-        .lang-switcher {{ position: absolute; top: 20px; right: 20px; z-index: 6000; display: flex; gap: 8px; }}
+        .lang-switcher {{ position: absolute; top: 20px; right: 20px; z-index: 200; display: flex; gap: 8px; }}
         .lang-btn {{ background: rgba(0,0,0,0.5); border: 1px solid #555; color: #aaa; padding: 5px 10px; border-radius: 15px; cursor: pointer; font-size: 12px; font-weight: bold; transition: all 0.2s; }}
         .lang-btn.active {{ background: var(--gold); color: black; border-color: var(--gold); }}
 
         .brand-title {{ font-size: 24px; font-weight: 900; color: var(--gold); letter-spacing: 4px; margin: 20px 0 0 0; text-transform: uppercase; }}
-        .brand-subtitle {{ font-size: 11px; color: #ccc; letter-spacing: 2px; margin-bottom: 20px; }}
+        .brand-subtitle {{ font-size: 11px; color: #ccc; letter-spacing: 2px; margin-bottom: 10px; }}
+
+        /* World Map Entry Button */
+        .world-map-btn {{
+            background: rgba(212, 175, 55, 0.2); border: 1px solid var(--gold); color: var(--gold);
+            padding: 10px 20px; border-radius: 30px; font-weight: bold; cursor: pointer; margin-bottom: 15px;
+            display: flex; align-items: center; gap: 8px; backdrop-filter: blur(5px);
+        }}
+        .world-map-btn:hover {{ background: var(--gold); color: black; }}
 
         .country-select-wrapper {{ width: 80%; max-width: 400px; margin-bottom: 15px; }}
         .country-select {{
@@ -77,18 +87,16 @@ html_code = f"""
         .pc-name {{ font-size: 16px; font-weight: bold; color: white; }}
         .pc-desc {{ font-size: 12px; color: #bbb; line-height: 1.4; margin-top: 5px; margin-bottom: 15px; }}
         
-        /* 🔥 Twin Action Buttons */
         .card-actions {{ display: flex; gap: 8px; margin-top: auto; }}
         .btn-action {{ flex: 1; padding: 10px 0; border-radius: 8px; font-size: 12px; font-weight: bold; cursor: pointer; text-align: center; transition: all 0.2s; border: none; }}
         .btn-ai {{ background: var(--gold); color: black; }}
-        .btn-ai:hover {{ background: #b89530; }}
         .btn-map {{ background: #333; color: white; border: 1px solid #555; }}
-        .btn-map:hover {{ background: #444; border-color: white; }}
 
-        #detail-page {{ position: absolute; top: 0; left: 0; width: 100%; height: 100vh; transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); z-index: 6000; display: flex; flex-direction: column; background: #111; }}
+        /* --- Detail Page --- */
+        #detail-page {{ background: #111; z-index: 300; transform: translateX(100%); display: flex; flex-direction: column; }}
         .nav-bar {{ height: 50px; background: rgba(0,0,0,0.9); border-bottom: 1px solid #333; display: flex; align-items: center; padding: 0 15px; justify-content: space-between; }}
         .back-btn {{ background: none; border: none; color: var(--gold); font-size: 24px; cursor: pointer; }}
-        #map {{ width: 100%; height: 35%; border-bottom: 2px solid var(--gold); }}
+        #mini-map {{ width: 100%; height: 35%; border-bottom: 2px solid var(--gold); }}
         .report-container {{ flex: 1; overflow-y: auto; padding: 25px 20px 80px 20px; }}
         .report-title {{ font-size: 24px; color: var(--gold); font-weight: bold; margin-bottom: 5px; }}
         .report-meta {{ font-size: 12px; color: #666; margin-bottom: 20px; border-bottom: 1px solid #333; padding-bottom: 15px; }}
@@ -96,6 +104,18 @@ html_code = f"""
         .gmap-btn {{ display: block; width: 90%; margin: 0 auto; padding: 15px 0; background: var(--gold); color: black; text-align: center; font-weight: bold; text-decoration: none; border-radius: 30px; position: fixed; bottom: 20px; left: 5%; z-index: 7000; }}
         .gmap-btn.naver {{ background: #03C75A !important; color: white !important; }} 
 
+        /* --- World Map Page --- */
+        #world-map-page {{ background: #111; z-index: 200; transform: translateY(100%); display: flex; flex-direction: column; }}
+        .map-search-bar {{
+            position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 500px;
+            z-index: 1000; display: flex; gap: 10px; background: rgba(0,0,0,0.8); padding: 10px; border-radius: 12px; border: 1px solid #444;
+        }}
+        .map-input {{ flex: 1; background: transparent; border: none; color: white; font-size: 16px; outline: none; }}
+        .map-icon-btn {{ background: none; border: none; font-size: 20px; cursor: pointer; color: var(--gold); }}
+        .home-btn {{ background: #333; color: white; border: 1px solid #555; padding: 0 15px; border-radius: 8px; font-weight: bold; cursor: pointer; }}
+        #full-map {{ width: 100%; height: 100%; }}
+
+        /* --- Loader --- */
         .loading-screen {{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 8000; display: none; flex-direction: column; justify-content: center; align-items: center; }}
         .loader-ring {{ width: 40px; height: 40px; border: 3px solid #333; border-top: 3px solid var(--gold); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 15px; }}
         .loader-text {{ color: var(--gold); font-family: monospace; font-size: 13px; text-align: center; }}
@@ -104,7 +124,7 @@ html_code = f"""
 </head>
 <body>
 
-    <div id="main-page">
+    <div id="main-page" class="page">
         <div class="lang-switcher">
             <div class="lang-btn active" onclick="setLanguage('KO', this)">🇰🇷</div>
             <div class="lang-btn" onclick="setLanguage('EN', this)">🇺🇸</div>
@@ -115,6 +135,7 @@ html_code = f"""
         <div style="text-align:center;">
             <div class="brand-title">DRUNKEN PLANE</div>
             <div id="app-subtitle" class="brand-subtitle">GLOBAL ALCOHOL HERITAGE TOUR</div>
+            <button class="world-map-btn" onclick="openWorldMapPage()">🗺️ WORLD MAP EXPLORER</button>
         </div>
 
         <div class="country-select-wrapper">
@@ -134,13 +155,13 @@ html_code = f"""
         <div class="place-list-container" id="place-list"></div>
     </div>
 
-    <div id="detail-page">
+    <div id="detail-page" class="page">
         <div class="nav-bar">
-            <button class="back-btn" onclick="goBack()">←</button>
+            <button class="back-btn" onclick="closeDetail()">←</button>
             <div id="report-header" style="color:white; font-weight:bold;">TRAVEL REPORT</div>
             <div style="width:24px;"></div>
         </div>
-        <div id="map"></div>
+        <div id="mini-map"></div>
         <div class="report-container">
             <div id="repo-title" class="report-title"></div>
             <div id="repo-meta" class="report-meta"></div>
@@ -149,6 +170,16 @@ html_code = f"""
         <a id="gmap-link" href="#" target="_blank" class="gmap-btn">🗺️ Google Maps</a>
     </div>
 
+    <div id="world-map-page" class="page">
+        <div class="map-search-bar">
+            <button class="home-btn" onclick="closeWorldMapPage()">🏠 HOME</button>
+            <input type="text" id="map-search-input" class="map-input" placeholder="Search City (e.g. Gangnam, London)..." onkeydown="if(event.key === 'Enter') searchMapLocation()">
+            <button class="map-icon-btn" onclick="searchMapLocation()">🔍</button>
+            <button class="map-icon-btn" onclick="getMyLocation()">📍</button>
+        </div>
+        <div id="full-map"></div>
+    </div>
+
     <div id="loader" class="loading-screen">
         <div class="loader-ring"></div>
         <div id="loader-msg" class="loader-text"></div>
@@ -157,25 +188,28 @@ html_code = f"""
     <script>
         const PLACE_DB = {db_json};
         
-        let map = null;
-        let currentMarker = null;
+        let miniMap = null;
+        let miniMarker = null;
+        let worldMap = null;
+        let worldMarkers = L.layerGroup();
+        
         let selectedCountry = "";
         let selectedType = "All";
         let currentLang = "KO";
         let loadingInterval = null;
 
         const LOADING_MSGS = {{
-            "KO": ["AI가 비행기 타고 이동 중... ✈️", "가게 문을 열고 들어갑니다... 🚪", "주변 분위기를 스캔하는 중... 👀", "시그니처 메뉴를 시음 중... 🍷", "사장님과 인터뷰 중... 🗣️", "취하기 전에 리포트 작성 중... 📝"],
-            "EN": ["Flying to location... ✈️", "Entering the venue... 🚪", "Scanning vibes... 👀", "Tasting signature drinks... 🍷", "Interviewing staff... 🗣️", "Writing report... 📝"],
-            "JP": ["現地へ移動中... ✈️", "入店しています... 🚪", "雰囲気をスキャン中... 👀", "試飲中... 🍷", "レポート作成中... 📝"],
+            "KO": ["AI가 비행기 타고 이동 중... ✈️", "가게 문을 열고 들어갑니다... 🚪", "분위기 스캔 중... 👀", "시그니처 시음 중... 🍷", "사장님 인터뷰 중... 🗣️", "리포트 작성 중... 📝"],
+            "EN": ["Flying to location... ✈️", "Entering venue... 🚪", "Scanning vibes... 👀", "Tasting drinks... 🍷", "Interviewing staff... 🗣️", "Writing report... 📝"],
+            "JP": ["現地へ移動中... ✈️", "入店しています... 🚪", "雰囲気スキャン中... 👀", "試飲中... 🍷", "レポート作成中... 📝"],
             "CN": ["正在前往... ✈️", "正在进店... 🚪", "扫描氛围... 👀", "品尝美酒... 🍷", "撰写报告... 📝"]
         }};
 
         const TRANSLATIONS = {{
-            "KO": {{ "subtitle": "글로벌 주류 헤리티지 투어", "filters": {{ "All": "전체", "Whiskey": "위스키", "Spirits": "증류주", "Beer": "맥주", "Wine": "와인", "Traditional": "전통주/토속주", "Bar": "바/펍" }}, "report_header": "여행 리포트", "gmap": "구글맵", "nmap": "네이버 지도", "cta_ai": "🤖 AI 리뷰", "cta_map": "🗺️ 길찾기", "ai_error": "오프라인 정보로 대체합니다." }},
-            "EN": {{ "subtitle": "GLOBAL ALCOHOL HERITAGE TOUR", "filters": {{ "All": "All", "Whiskey": "Whiskey", "Spirits": "Spirits", "Beer": "Beer", "Wine": "Wine", "Traditional": "Traditional", "Bar": "Bar" }}, "report_header": "TRAVEL REPORT", "gmap": "Google Maps", "nmap": "Naver Map", "cta_ai": "🤖 AI Review", "cta_map": "🗺️ Map", "ai_error": "Using offline mode." }},
-            "JP": {{ "subtitle": "世界のお酒ヘリテージツアー", "filters": {{ "All": "すべて", "Whiskey": "ウイスキー", "Spirits": "蒸留酒", "Beer": "ビール", "Wine": "ワイン", "Traditional": "伝統酒", "Bar": "バー" }}, "report_header": "旅行レポート", "gmap": "Googleマップ", "nmap": "Naverマップ", "cta_ai": "🤖 AIレビュー", "cta_map": "🗺️ 地図", "ai_error": "オフラインモードで実行します。" }},
-            "CN": {{ "subtitle": "全球酒类遗产之旅", "filters": {{ "All": "全部", "Whiskey": "威士忌", "Spirits": "烈酒", "Beer": "啤酒", "Wine": "葡萄酒", "Traditional": "传统酒", "Bar": "酒吧" }}, "report_header": "旅游报告", "gmap": "谷歌地图", "nmap": "Naver地图", "cta_ai": "🤖 AI 评论", "cta_map": "🗺️ 地图", "ai_error": "以离线模式运行。" }}
+            "KO": {{ "subtitle": "글로벌 주류 헤리티지 투어", "filters": {{ "All": "전체", "Whiskey": "위스키", "Spirits": "증류주", "Beer": "맥주", "Wine": "와인", "Traditional": "전통주/토속주", "Bar": "바/펍" }}, "report_header": "여행 리포트", "gmap": "구글맵", "nmap": "네이버 지도", "cta_ai": "🤖 AI 리뷰", "cta_map": "🗺️ 길찾기" }},
+            "EN": {{ "subtitle": "GLOBAL ALCOHOL HERITAGE TOUR", "filters": {{ "All": "All", "Whiskey": "Whiskey", "Spirits": "Spirits", "Beer": "Beer", "Wine": "Wine", "Traditional": "Traditional", "Bar": "Bar" }}, "report_header": "TRAVEL REPORT", "gmap": "Google Maps", "nmap": "Naver Map", "cta_ai": "🤖 AI Review", "cta_map": "🗺️ Map" }},
+            "JP": {{ "subtitle": "世界のお酒ヘリテージツアー", "filters": {{ "All": "すべて", "Whiskey": "ウイスキー", "Spirits": "蒸留酒", "Beer": "ビール", "Wine": "ワイン", "Traditional": "伝統酒", "Bar": "バー" }}, "report_header": "旅行レポート", "gmap": "Googleマップ", "nmap": "Naverマップ", "cta_ai": "🤖 AIレビュー", "cta_map": "🗺️ 地図" }},
+            "CN": {{ "subtitle": "全球酒类遗产之旅", "filters": {{ "All": "全部", "Whiskey": "威士忌", "Spirits": "烈酒", "Beer": "啤酒", "Wine": "葡萄酒", "Traditional": "传统酒", "Bar": "酒吧" }}, "report_header": "旅游报告", "gmap": "谷歌地图", "nmap": "Naver地图", "cta_ai": "🤖 AI 评论", "cta_map": "🗺️ 地图" }}
         }};
 
         window.onload = function() {{
@@ -199,7 +233,6 @@ html_code = f"""
             const t = TRANSLATIONS[currentLang];
             document.getElementById('app-subtitle').innerText = t.subtitle;
             document.getElementById('report-header').innerText = t.report_header;
-            
             document.getElementById('filter-all').innerText = `🌐 ${{t.filters.All}}`;
             document.getElementById('filter-whiskey').innerText = `🥃 ${{t.filters.Whiskey}}`;
             document.getElementById('filter-spirits').innerText = `🍸 ${{t.filters.Spirits}}`;
@@ -232,9 +265,8 @@ html_code = f"""
             renderList();
         }}
 
-        // 🔥 Helper: Get Map URL based on location
         function getMapUrl(place) {{
-            const isKorea = selectedCountry.includes("Korea");
+            const isKorea = selectedCountry.includes("Korea") || (place.name && place.desc_ko && place.real_addr); // Check if place belongs to Korea logic
             let query = "";
             if (isKorea && place.real_addr) {{
                 query = encodeURIComponent(place.real_addr);
@@ -260,15 +292,12 @@ html_code = f"""
             }}
 
             const t = TRANSLATIONS[currentLang];
-
             filtered.forEach(place => {{
                 const card = document.createElement('div');
                 card.className = 'place-card';
-                
                 let desc = currentLang === 'KO' ? place.desc_ko : place.desc_en;
                 if(currentLang === 'JP' || currentLang === 'CN') desc = place.desc_en; 
                 
-                // 🔥 Twin Action Logic (AI vs Map)
                 card.innerHTML = `
                     <div class="card-header">
                         <div class="pc-name">${{place.name}}</div>
@@ -276,7 +305,7 @@ html_code = f"""
                     </div>
                     <div class="pc-desc">${{desc}}</div>
                     <div class="card-actions">
-                        <button class="btn-action btn-ai" onclick="openDetail('${{place.name}}')">${{t.cta_ai}}</button>
+                        <button class="btn-action btn-ai" onclick="openDetail('${{place.name}}', '${{selectedCountry}}')">${{t.cta_ai}}</button>
                         <button class="btn-action btn-map" onclick="window.open('${{getMapUrl(place)}}', '_blank')">${{t.cta_map}}</button>
                     </div>
                 `;
@@ -284,8 +313,85 @@ html_code = f"""
             }});
         }}
 
-        async function openDetail(placeName) {{
-            const place = PLACE_DB[selectedCountry].find(p => p.name === placeName);
+        /* --- World Map Logic --- */
+        function openWorldMapPage() {{
+            document.getElementById('world-map-page').style.transform = 'translateY(0%)';
+            if (!worldMap) {{
+                worldMap = L.map('full-map').setView([20, 0], 2);
+                L.tileLayer('https://{{s}}.tile.openstreetmap.org/{{z}}/{{x}}/{{y}}.png', {{ attribution: '© OpenStreetMap' }}).addTo(worldMap);
+                loadAllMarkers();
+            }}
+        }}
+
+        function closeWorldMapPage() {{
+            document.getElementById('world-map-page').style.transform = 'translateY(100%)';
+        }}
+
+        function loadAllMarkers() {{
+            worldMarkers.clearLayers();
+            Object.keys(PLACE_DB).forEach(country => {{
+                PLACE_DB[country].forEach(place => {{
+                    // Create marker
+                    const marker = L.marker([place.lat, place.lon]).bindPopup(`
+                        <b>${{place.name}}</b><br>${{place.label}}<br>
+                        <button onclick="openDetailFromMap('${{place.name}}', '${{country}}')" style="margin-top:5px; background:black; color:gold; border:none; padding:5px 10px; border-radius:5px; cursor:pointer;">
+                            View Details
+                        </button>
+                    `);
+                    worldMarkers.addLayer(marker);
+                }});
+            }});
+            worldMarkers.addTo(worldMap);
+        }}
+
+        async function searchMapLocation() {{
+            const query = document.getElementById('map-search-input').value;
+            if(!query) return;
+            
+            // Simple Nominatim Geocoding
+            try {{
+                const res = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${{query}}`);
+                const data = await res.json();
+                if(data && data.length > 0) {{
+                    const lat = data[0].lat;
+                    const lon = data[0].lon;
+                    worldMap.setView([lat, lon], 12);
+                }} else {{
+                    alert("Location not found!");
+                }}
+            }} catch(e) {{
+                console.error(e);
+            }}
+        }}
+
+        function getMyLocation() {{
+            if (navigator.geolocation) {{
+                navigator.geolocation.getCurrentPosition(position => {{
+                    const lat = position.coords.latitude;
+                    const lon = position.coords.longitude;
+                    worldMap.setView([lat, lon], 12);
+                    L.marker([lat, lon], {{icon: L.divIcon({{html: '📍', className: 'my-loc-icon', iconSize: [20, 20]}})}}).addTo(worldMap).bindPopup("You are here").openPopup();
+                }});
+            }} else {{
+                alert("Geolocation is not supported by this browser.");
+            }}
+        }}
+
+        /* --- Detail & AI Logic --- */
+        async function openDetailFromMap(placeName, countryName) {{
+            // Close World Map slightly to show transition
+            // But actually we are jumping to detail view.
+            // Need to set selectedCountry so getMapUrl works correctly inside openDetail
+            selectedCountry = countryName; 
+            closeWorldMapPage();
+            openDetail(placeName, countryName);
+        }}
+
+        async function openDetail(placeName, countryName) {{
+            // Find Place Object
+            // countryName arg is optional if coming from list (uses selectedCountry)
+            const cName = countryName || selectedCountry;
+            const place = PLACE_DB[cName].find(p => p.name === placeName);
             if(!place) return;
 
             document.getElementById('main-page').style.transform = 'translateX(-30%)';
@@ -294,29 +400,44 @@ html_code = f"""
             startLoadingAnimation();
 
             document.getElementById('repo-title').innerText = place.name;
-            document.getElementById('repo-meta').innerText = `${{place.label}} • ${{selectedCountry}}`;
+            document.getElementById('repo-meta').innerText = `${{place.label}} • ${{cName}}`;
             
-            // Set Map Button in Detail View
+            // Detail Page Map Button
             const btn = document.getElementById('gmap-link');
-            const isKorea = selectedCountry.includes("Korea");
-            btn.href = getMapUrl(place);
-            btn.innerText = isKorea ? TRANSLATIONS[currentLang].nmap : TRANSLATIONS[currentLang].gmap;
-            if(isKorea) btn.classList.add("naver"); else btn.classList.remove("naver");
+            const isKorea = cName.includes("Korea");
+            
+            let query = "";
+            if (isKorea && place.real_addr) {{
+                query = encodeURIComponent(place.real_addr);
+                btn.innerText = TRANSLATIONS[currentLang].nmap;
+                btn.classList.add("naver");
+                btn.href = `https://map.naver.com/v5/search/${{query}}`;
+            }} else if (isKorea) {{
+                query = encodeURIComponent(place.name);
+                btn.innerText = TRANSLATIONS[currentLang].nmap;
+                btn.classList.add("naver");
+                btn.href = `https://map.naver.com/v5/search/${{query}}`;
+            }} else {{
+                query = encodeURIComponent(place.name + " " + cName);
+                btn.innerText = TRANSLATIONS[currentLang].gmap;
+                btn.classList.remove("naver");
+                btn.href = `https://www.google.com/maps/search/?api=1&query=$${{query}}`;
+            }}
             
             document.getElementById('repo-content').innerHTML = "";
 
-            if (!map) {{
-                map = L.map('map');
-                L.tileLayer('https://{{s}}.tile.openstreetmap.org/{{z}}/{{x}}/{{y}}.png', {{ attribution: '© OpenStreetMap' }}).addTo(map);
+            if (!miniMap) {{
+                miniMap = L.map('mini-map');
+                L.tileLayer('https://{{s}}.tile.openstreetmap.org/{{z}}/{{x}}/{{y}}.png', {{ attribution: '© OpenStreetMap' }}).addTo(miniMap);
             }}
             setTimeout(() => {{
-                map.invalidateSize();
-                map.setView([place.lat, place.lon], 15);
-                if (currentMarker) map.removeLayer(currentMarker);
-                currentMarker = L.marker([place.lat, place.lon]).addTo(map).bindPopup(place.name).openPopup();
+                miniMap.invalidateSize();
+                miniMap.setView([place.lat, place.lon], 15);
+                if (miniMarker) miniMap.removeLayer(miniMarker);
+                miniMarker = L.marker([place.lat, place.lon]).addTo(miniMap).bindPopup(place.name).openPopup();
             }}, 300);
 
-            // 🔥 RAG Logic
+            // RAG Logic
             let contextDesc = "";
             if (place.real_addr) {{
                 contextDesc = `Address: ${{place.real_addr}}, Vibe: ${{place.real_vibe}}, Drink: ${{place.real_drink}}, Tip: ${{place.real_tip}}`;
@@ -324,7 +445,7 @@ html_code = f"""
                 contextDesc = currentLang === 'KO' ? place.desc_ko : place.desc_en;
             }}
 
-            await generatePuterReport(place, contextDesc);
+            await generatePuterReport(place, cName, contextDesc);
         }}
 
         function startLoadingAnimation() {{
@@ -345,14 +466,14 @@ html_code = f"""
             document.getElementById('loader').style.display = 'none';
         }}
 
-        async function generatePuterReport(place, contextDesc) {{
+        async function generatePuterReport(place, countryName, contextDesc) {{
             let langFull = "Korean";
             if(currentLang === "EN") langFull = "English";
             if(currentLang === "JP") langFull = "Japanese";
             if(currentLang === "CN") langFull = "Chinese";
 
             const prompt = `
-            Act as a travel expert. Write a detailed review about "${{place.name}}" in ${{selectedCountry}}.
+            Act as a travel expert. Write a detailed review about "${{place.name}}" in ${{countryName}}.
             
             [Context Info]
             ${{contextDesc}}
@@ -396,7 +517,7 @@ html_code = f"""
         function generateLocalReport(place, dbDesc) {{
             stopLoadingAnimation();
             const report = `
-            ✨ **[Offline Info] ${{TRANSLATIONS[currentLang].ai_error}}**
+            ✨ **[Offline Info]**
             
             **${{place.name}}**
             
@@ -407,7 +528,7 @@ html_code = f"""
             document.getElementById('repo-content').innerHTML = report.replace(/\\n/g, '<br>');
         }}
 
-        function goBack() {{
+        function closeDetail() {{
             document.getElementById('detail-page').style.transform = 'translateX(100%)';
             document.getElementById('main-page').style.transform = 'translateX(0%)';
         }}