<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="theme-color" content="#0f0f1a">
    <title>会面点 - 寻找最佳聚会地点</title>
    <link rel="stylesheet" href="/static/css/style.css?v=20260112i">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
</head>
<body>
    <div class="app-container">
        <!-- 侧边栏遮罩 -->
        <div class="sidebar-overlay" id="sidebarOverlay"></div>
        
        <!-- 侧边栏 -->
        <aside class="sidebar" id="sidebar">
            <div class="logo">
                <div class="logo-icon">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z" fill="currentColor"/>
                        <circle cx="12" cy="9" r="2.5" fill="#1a1a2e"/>
                    </svg>
                </div>
                <h1>会面点</h1>
            </div>
            
            <div class="sidebar-content">
                <!-- 位置列表 -->
                <section class="section locations-section">
                    <div class="section-header">
                        <h2>📍 参与者位置</h2>
                        <span class="badge" id="locationCount">0</span>
                    </div>
                    
                    <!-- 搜索添加位置 -->
                    <div class="search-box">
                        <div class="search-input-wrapper">
                            <svg class="search-icon" viewBox="0 0 24 24" fill="none">
                                <circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2"/>
                                <path d="m16 16 4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            </svg>
                            <input type="text" id="searchInput" placeholder="搜索地址或地点名称..." autocomplete="off">
                            <button class="clear-btn" id="clearSearch" style="display: none;">×</button>
                        </div>
                        <div class="search-tips" id="searchTips"></div>
                    </div>
                    
                    <p class="help-text">💡 点击地图也可以添加位置</p>
                    
                    <ul class="location-list" id="locationList">
                        <li class="empty-state">
                            <span class="empty-icon">🗺️</span>
                            <span>还没有添加位置</span>
                            <span class="empty-hint">搜索地址或点击地图开始</span>
                        </li>
                    </ul>
                </section>
                
                <!-- 搜索设置 -->
                <section class="section search-section">
                    <div class="section-header">
                        <h2>🎯 寻找目的地</h2>
                    </div>
                    
                    <div class="form-group">
                        <label for="poiKeywords">搜索类型</label>
                        <div class="keywords-input">
                            <input type="text" id="poiKeywords" placeholder="例如：咖啡馆、餐厅、KTV...">
                        </div>
                        <div class="quick-tags">
                            <button class="tag" data-keyword="咖啡馆">☕ 咖啡馆</button>
                            <button class="tag" data-keyword="餐厅">🍽️ 餐厅</button>
                            <button class="tag" data-keyword="网咖">🎮 网咖</button>
                            <button class="tag" data-keyword="棋牌室">🎲 棋牌室</button>
                            <button class="tag" data-keyword="KTV">🎤 KTV</button>
                            <button class="tag" data-keyword="电影院">🎬 电影院</button>
                            <button class="tag" data-keyword="健身房">💪 健身房</button>
                            <button class="tag" data-keyword="书店">📚 书店</button>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="searchRadius">搜索半径</label>
                        <div class="radius-slider">
                            <input type="range" id="searchRadius" min="500" max="10000" step="500" value="1000">
                            <span class="radius-value" id="radiusValue">1 公里</span>
                        </div>
                    </div>
                    
                    <button class="btn btn-primary btn-search" id="searchBtn" disabled>
                        <svg viewBox="0 0 24 24" fill="none">
                            <circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2"/>
                            <path d="m16 16 5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                        </svg>
                        搜索最佳会面点
                    </button>
                </section>
                
            </div>
        </aside>
        
        <!-- 地图区域 -->
        <main class="map-area">
            <div id="mapContainer"></div>
            
            <!-- 移动端搜索框 -->
            <div class="mobile-search-bar" id="mobileSearchBar">
                <div class="mobile-search-input-wrapper">
                    <input type="text" id="mobileSearchInput" placeholder="🔍 搜索地址添加位置...">
                    <button class="mobile-search-clear" id="mobileSearchClear" style="display:none;">×</button>
                </div>
                <div class="mobile-search-tips" id="mobileSearchTips"></div>
            </div>
            
            <!-- 地图点击确认弹框 -->
            <div class="map-click-confirm" id="mapClickConfirm" style="display:none;">
                <div class="confirm-content">
                    <div class="confirm-title">添加此位置？</div>
                    <div class="confirm-address" id="confirmAddress">加载中...</div>
                    <div class="confirm-actions">
                        <button class="confirm-btn cancel" id="confirmCancel">取消</button>
                        <button class="confirm-btn ok" id="confirmOk">添加</button>
                    </div>
                </div>
            </div>
            
            <!-- 浮动结果按钮 -->
            <button class="floating-result-btn" id="floatingResultBtn">
                <span class="result-icon">📋</span>
                <span class="result-text">查看结果</span>
                <span class="result-badge" id="floatingResultBadge">0</span>
            </button>
            
            <!-- 中心点信息 -->
            <div class="center-info" id="centerInfo" style="display: none;">
                <div class="center-badge">
                    <span class="center-icon">⭐</span>
                    <span>几何中心点</span>
                </div>
            </div>
            
            <!-- 浮动搜索结果面板 -->
            <div class="floating-results" id="floatingResults" style="display: none;">
                <div class="floating-results-header">
                    <h3>🎯 搜索结果</h3>
                    <span class="result-count" id="floatingResultCount">0</span>
                    <button class="close-btn" id="closeFloatingResults">×</button>
                </div>
                <div class="floating-results-filter">
                    <input type="text" id="resultFilter" placeholder="🔍 筛选结果...">
                </div>
                <ul class="floating-result-list" id="floatingResultList"></ul>
            </div>
            
            <!-- 移动端快捷操作栏 -->
            <div class="mobile-action-bar" id="mobileActionBar">
                <div class="action-row">
                    <button class="menu-btn" id="menuBtn" aria-label="设置">⚙️</button>
                    <button class="action-search-btn" id="mobileSearchBtn" disabled>
                        🔍 搜索会面点
                    </button>
                    <div class="action-info">
                        <span class="location-badge" id="mobileLocationCount">0</span>
                    </div>
                </div>
            </div>
            
            <!-- 加载提示 -->
            <div class="loading-overlay" id="loadingOverlay" style="display: none;">
                <div class="loading-spinner"></div>
                <span>正在搜索...</span>
            </div>
        </main>
    </div>
    
    <!-- 应用脚本 -->
    <script src="/static/js/app.js?v=20260112j"></script>
</body>
</html>
