肥宅老司機前進世界地圖

肥宅老司機前進世界地圖 { "@context": "https://schema.org", "@graph": [ { "@type": "WebSite", "@id": "https://fattymap.pages.dev/#website", "url": "https://fattymap.pages.dev", "name": "肥宅老司機前進世界地圖", "alternateName": "FattyMap - Asia Food & Travel Map", "description": "台灣旅人記錄全球美食景點的互動旅遊地圖，結合 Podcast 節目分享旅遊體驗", "inLanguage": "zh-TW", "author": { "@id": "https://fattymap.pages.dev/#author" } }, { "@type": "Person", "@id": "https://fattymap.pages.dev/#author", "name": "肥宅老司機", "description": "熱愛美食與旅遊的台灣旅人，主持旅遊 Podcast 節目超過 200 集，足跡遍及泰國、越南、菲律賓、日本、印尼等亞洲各地", "url": "https://fattymap.pages.dev", "knowsAbout": ["旅遊", "美食", "亞洲旅遊", "背包客", "台灣旅遊"] }, { "@type": "PodcastSeries", "@id": "https://fattymap.pages.dev/#podcast", "name": "肥宅老司機前進世界地圖", "description": "台灣旅人分享亞洲各地旅遊美食體驗的 Podcast 節目", "inLanguage": "zh-TW", "author": { "@id": "https://fattymap.pages.dev/#author" }, "url": "https://fattymap.pages.dev" } ] } /* 確保 App 容器佔滿全螢幕 */ html, body, #root { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; } /* 手機觸控優化：移除點擊高亮、減少延遲 */ * { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } /* 地圖本身需要允許雙指縮放 */ .leaflet-container { touch-action: none; } /* 自定義滾動條 */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f3f4f6; } ::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #6b7280; } /* Leaflet Popup 樣式調整 */ .leaflet-popup-content-wrapper { background: white; color: #1f2937; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .leaflet-popup-tip { background: white; } .leaflet-container { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* 錄音動畫 */ @keyframes pulse-red { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .animate-pulse-red { animation: pulse-red 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* About Overlay 淡入動畫 */ @keyframes fadeInScale { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* ======================================== 贊助商 3D 懸浮 Marker 樣式 (promo = promotion) ======================================== */ .promo-marker-icon { background: transparent !important; border: none !important; } .promo-marker-container { position: relative; width: 60px; height: 80px; display: flex; flex-direction: column; align-items: center; /* 讓容器透明區域可穿透點擊 */ pointer-events: none; } .promo-marker { width: 50px; height: 60px; /* 3D 傾斜效果 */ transform: perspective(500px) rotateX(8deg); /* 陰影模擬立體 */ filter: drop-shadow(0 12px 8px rgba(0, 0, 0, 0.35)); /* 懸浮動畫 */ animation: promo-float 3s ease-in-out infinite; /* 全透明背景 - 由管理員提供去背圖片 */ background: transparent; border-radius: 6px; overflow: hidden; padding: 0; /* 讓滑鼠可以穿透透明區域點擊下面的 Marker */ pointer-events: none; } .promo-marker img { border-radius: 6px; background: transparent; /* 圖片本身可以被點擊 */ pointer-events: auto; } .promo-marker-glow { position: absolute; bottom: 12px; width: 30px; height: 8px; background: radial-gradient(ellipse, rgba(255, 200, 0, 0.5) 0%, transparent 70%); filter: blur(3px); animation: promo-glow 3s ease-in-out infinite; } .promo-marker-badge { position: absolute; bottom: 2px; background: linear-gradient(135deg, #ffd700, #ff8c00); color: white; font-size: 7px; font-weight: bold; padding: 1px 5px; border-radius: 8px; box-shadow: 0 1px 4px rgba(255, 165, 0, 0.5); white-space: nowrap; /* 徽章可以被點擊 */ pointer-events: auto; } @keyframes promo-float { 0%, 100% { transform: perspective(500px) rotateX(8deg) translateY(0px); } 50% { transform: perspective(500px) rotateX(8deg) translateY(-4px); } } @keyframes promo-glow { 0%, 100% { opacity: 0.5; transform: scaleX(1); } 50% { opacity: 0.8; transform: scaleX(1.2); } } /* 贊助商 Popup 樣式 */ .promo-popup .leaflet-popup-content-wrapper { background: linear-gradient(135deg, #fffbeb, #fef3c7); border: 2px solid #fbbf24; } { "imports": { "vite": "https://esm.sh/vite@^7.3.0", "react/": "https://esm.sh/react@^19.2.3/", "react": "https://esm.sh/react@^19.2.3", "@vitejs/plugin-react": "https://esm.sh/@vitejs/plugin-react@^5.1.2", "react-dom/": "https://esm.sh/react-dom@^19.2.3/", "lucide-react": "https://esm.sh/lucide-react@^0.561.0", "leaflet": "https://esm.sh/leaflet@^1.9.4", "react-leaflet": "https://esm.sh/react-leaflet@^5.0.0", "firebase/": "https://esm.sh/firebase@^12.6.0/" } }