185 lines
9.1 KiB
HTML
185 lines
9.1 KiB
HTML
<!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=20260112d">
|
||
<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=20260112h"></script>
|
||
</body>
|
||
</html>
|