<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3MC 码上送 - 官方唯一：3mc.tech</title>
<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    background: #f2f4f6;
    padding: 20px;
    max-width: 420px;
    margin: 0 auto;
    color: #222;
}

.container {
    background: #ffffff;
    border-radius: 24px;
    padding: 32px 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
}

.logo {
    font-size: 36px;
    font-weight: 900;
    color: #0066ff;
    text-align: center;
    margin-bottom: 6px;
}

.slogan {
    text-align: center;
    font-size: 15px;
    color: #0066ff;
    font-weight: 600;
    margin-bottom: 8px;
}

.domain {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #222;
    margin-bottom: 26px;
}

.label {
    font-size: 14px;
    color: #444;
    margin-bottom: 8px;
    font-weight: 500;
}

input {
    width: 100%;
    padding: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    font-size: 16px;
    margin-bottom: 20px;
    outline: none;
    background: #fafbfc;
}

input:focus {
    border-color: #0066ff;
    background: #fff;
}

.btn-search {
    width: 100%;
    padding: 18px;
    background: #0066ff;
    color: #fff;
    font-size: 17px;
    font-weight: bold;
    border: none;
    border-radius: 16px;
    margin-bottom: 24px;
    cursor: pointer;
}

.btn-search:active {
    background: #0052cc;
}

.result {
    background: #e6f7ff;
    border-radius: 16px;
    padding: 16px;
    text-align: center;
    font-size: 15px;
    margin-bottom: 20px;
    display: none;
    line-height: 1.6;
}

.map-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.map-btn {
    padding: 16px 12px;
    border-radius: 16px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
}

.gaode { background: #1677ff; }
.baidu { background: #20c0ff; }
.tencent { background: #00b42a; }
.bike { background: #722ed1; }

.footer {
    text-align: center;
    font-size: 12px;
    color: #999;
    margin-top: 24px;
    line-height: 1.5;
}
</style>
</head>

<body>

<div class="container">
    <div class="logo">3MC · 码上送</div>
    <div class="slogan">三秒查地址 · 码上送到位</div>
    <div class="domain">✅ 官方唯一网址：3mc.tech</div>

    <div class="label">寻址网名</div>
    <input type="text" id="name" placeholder="如：abc@box 或 post:abc@box">

    <div class="label">6 位拼码</div>
    <input type="text" id="code" maxlength="6" placeholder="请输入6位数字">

    <button class="btn-search" onclick="search()">🔍 一键查询位置</button>

    <div id="result" class="result"></div>

    <div class="map-group">
        <div class="map-btn gaode" onclick="goGaode()">高德地图</div>
        <div class="map-btn baidu" onclick="goBaidu()">百度地图</div>
        <div class="map-btn tencent" onclick="goTencent()">腾讯地图</div>
        <div class="map-btn bike" onclick="goBike()">骑行导航</div>
    </div>

    <div class="footer">
        快递员 / 外卖员 免费使用<br>
        免登录 · 无广告 · 不收集隐私<br>
        官方支持：<b>3mc.tech</b>
    </div>
</div>

<script>
let currentLat = 0;
let currentLon = 0;
let currentAddr = "";

function cleanName(val) {
    val = val.trim().replace(/^post\s*[:：]\s*/i, '');
    return val.split(/\s+/)[0] || '';
}

async function search() {
    let name = document.getElementById('name').value.trim();
    let code = document.getElementById('code').value.trim();
    let resBox = document.getElementById('result');

    if (!name || !code) {
        alert('请输入寻址网名和6位拼码');
        return;
    }

    let realName = cleanName(name);

    try {
        const url = `https://vertiname.cn/api/resolve?name=${encodeURIComponent(realName)}&code=${code}`;
        let resp = await fetch(url);
        let data = await resp.json();

        if (data.code === 0) {
            currentAddr = data.data.addr_name;
            currentLat = data.data.lat;
            currentLon = data.data.lon;

            resBox.innerHTML = `
                ✅ 查询成功<br>
                地址：${currentAddr}<br>
                坐标：${currentLat}, ${currentLon}
            `;
            resBox.style.display = "block";
        } else {
            alert(data.msg || "查询失败");
            resBox.style.display = "none";
        }
    } catch (e) {
        alert("网络或接口异常");
        console.error(e);
    }
}

function goGaode() {
    if (!currentLat || !currentLon) { alert("请先查询"); return; }
    window.open(`https://ditu.amap.com/regeo?lat=${currentLat}&lng=${currentLon}`, "_blank");
}

function goBaidu() {
    if (!currentLat || !currentLon) { alert("请先查询"); return; }
    window.open(`https://api.map.baidu.com/marker?location=${currentLat},${currentLon}&title=${currentAddr}`, "_blank");
}

function goTencent() {
    if (!currentLat || !currentLon) { alert("请先查询"); return; }
    window.open(`https://apis.map.qq.com/uri/v1/marker?marker=coord:${currentLat},${currentLon};title:${currentAddr}`, "_blank");
}

function goBike() {
    if (!currentLat || !currentLon) { alert("请先查询"); return; }
    window.open(`https://ditu.amap.com/dir?type=ride&to=${currentLat},${currentLon}`, "_blank");
}
</script>

</body>
</html>