<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能网址管理工具</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; }
        body { background: #f5f7fa; padding: 20px; }
        .container { max-width: 600px; margin: 0 auto; }
        .title { text-align: center; color: #333; margin-bottom: 30px; }
        
        /* 网址输入区域 */
        .input-group {
            display: flex;
            gap: 10px;
            margin-bottom: 30px;
        }
        #urlInput {
            flex: 1;
            padding: 14px 20px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            font-size: 16px;
            outline: none;
            transition: border 0.2s;
        }
        #urlInput:focus { border-color: #4096ff; }
        #submitBtn {
            padding: 0 24px;
            background: #4096ff;
            color: #fff;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.2s;
        }
        #submitBtn:hover { background: #2584ff; }
        
        /* 智能解析结果区 */
        .result-card {
            background: #fff;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.05);
            margin-bottom: 30px;
            display: none; /* 默认隐藏 */
        }
        .card-title {
            font-size: 18px;
            color: #333;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .card-title i { color: #4096ff; }
        .url-info {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 20px;
        }
        .info-item { font-size: 14px; color: #666; }
        .info-label { color: #999; margin-right: 8px; }
        .action-btns { display: flex; gap: 10px; }
        .action-btn {
            padding: 8px 16px;
            border: 1px solid #4096ff;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .open-btn { background: #4096ff; color: #fff; }
        .copy-btn { background: #fff; color: #4096ff; }
        .open-btn:hover { background: #2584ff; }
        .copy-btn:hover { background: #f5faff; }
        
        /* 智能推荐区 */
        .recommend-section { margin-bottom: 30px; }
        .section-title {
            font-size: 16px;
            color: #333;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .section-title i { color: #f5a623; }
        .recommend-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 12px;
        }
        .recommend-item {
            background: #fff;
            border-radius: 8px;
            padding: 12px;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            cursor: pointer;
            transition: transform 0.2s;
        }
        .recommend-item:hover { transform: translateY(-2px); }
        .item-icon { font-size: 24px; margin-bottom: 8px; }
        .item-name { font-size: 14px; color: #333; }
        
        /* 历史记录区 */
        .history-section { margin-bottom: 20px; }
        .history-list {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            overflow: hidden;
        }
        .history-item {
            padding: 12px 20px;
            border-bottom: 1px solid #f5f5f5;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
        }
        .history-item:last-child { border-bottom: none; }
        .history-item:hover { background: #fafafa; }
        .history-url { font-size: 14px; color: #666; }
        .delete-btn { color: #ff4d4f; font-size: 16px; cursor: pointer; }
    </style>
    <!-- 引入图标库（简化图标实现） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/iconfont@4.0.1/dist/iconfont.css">
</head>
<body>
    <div class="container">
        <h1 class="title">智能网址管理工具</h1>

        <!-- 网址输入区 -->
        <div class="input-group">
            <input type="text" id="urlInput" placeholder="输入网址（如https://example.com）...">
            <button id="submitBtn">解析</button>
        </div>

        <!-- 智能解析结果区 -->
        <div class="result-card" id="resultCard">
            <h3 class="card-title">
                <<i class="iconfont icon-link"></</i>网址解析结果
            </h3>
            <div class="url-info">
                <div class="info-item"><span class="info-label">原始网址：</span><span id="rawUrl"></span></div>
                <div class="info-item"><span class="info-label">协议类型：</span><span id="urlProtocol"></span></div>
                <div class="info-item"><span class="info-label">域名：</span><span id="urlDomain"></span></div>
                <div class="info-item"><span class="info-label">是否安全：</span><span id="urlSafety"></span></div>
            </div>
            <div class="action-btns">
                <div class="action-btn open-btn" id="resultOpenBtn">打开网址</div>
                <div class="action-btn copy-btn" id="resultCopyBtn">复制网址</div>
            </div>
        </div>

        <!-- 智能推荐区 -->
        <div class="recommend-section">
            <h3 class="section-title">
                <<i class="iconfont icon-tuijian"></</i>常用网址推荐
            </h3>
            <div class="recommend-list" id="recommendList">
                <!-- 推荐链接通过JS动态生成 -->
            </div>
        </div>

        <!-- 历史记录区 -->
        <div class="history-section">
            <h3 class="section-title">
                <<i class="iconfont icon-history"></</i>历史记录
            </h3>
            <div class="history-list" id="historyList">
                <!-- 历史记录通过JS从本地存储读取 -->
            </div>
        </div>
    </div>

    <script>
        // 1. 缓存DOM节点
        const urlInput = document.getElementById('urlInput');
        const submitBtn = document.getElementById('submitBtn');
        const resultCard = document.getElementById('resultCard');
        const rawUrl = document.getElementById('rawUrl');
        const urlProtocol = document.getElementById('urlProtocol');
        const urlDomain = document.getElementById('urlDomain');
        const urlSafety = document.getElementById('urlSafety');
        const resultOpenBtn = document.getElementById('resultOpenBtn');
        const resultCopyBtn = document.getElementById('resultCopyBtn');
        const recommendList = document.getElementById('recommendList');
        const historyList = document.getElementById('historyList');

        // 2. 常用网址推荐数据（可自定义修改）
        const recommendUrls = [
            { name: "百度", url: "https://www.baidu.com", icon: "iconfont icon-baidu" },
            { name: "谷歌", url: "https://www.google.com", icon: "iconfont icon-google" },
            { name: "淘宝", url: "https://www.taobao.com", icon: "iconfont icon-taobao" },
            { name: "知乎", url: "https://www.zhihu.com", icon: "iconfont icon-zhihu" },
            { name: "B站", url: "https://www.bilibili.com", icon: "iconfont icon-bilibili" },
            { name: "GitHub", url: "https://github.com", icon: "iconfont icon-github" }
        ];

        // 3. 初始化页面（加载推荐链接、历史记录）
        function initPage() {
            // 渲染推荐链接
            renderRecommendUrls();
            // 加载历史记录
            loadHistory();
        }

        // 4. 渲染推荐链接
        function renderRecommendUrls() {
            recommendList.innerHTML = '';
            recommendUrls.forEach(item => {
                const itemDiv = document.createElement('div');
                itemDiv.className = 'recommend-item';
                itemDiv.innerHTML = `
                    <div class="item-icon ${item.icon}"></div>
                    <div class="item-name">${item.name}</div>
                `;
                // 点击推荐链接：填充输入框+解析
                itemDiv.addEventListener('click', () => {
                    urlInput.value = item.url;
                    analyzeUrl(item.url);
                });
                recommendList.appendChild(itemDiv);
            });
        }

        // 5. 智能解析网址
        function analyzeUrl(url) {
            if (!url) return;

            // 补全协议（若用户未输入http/https）
            let fullUrl = url;
            if (!fullUrl.startsWith('http://') && !fullUrl.startsWith('https://')) {
                fullUrl = 'https://' + fullUrl;
            }

            try {
                const urlObj = new URL(fullUrl);
                // 填充解析结果
                rawUrl.textContent = fullUrl;
                urlProtocol.textContent = urlObj.protocol.slice(0, -1); // 去除末尾的":"
                urlDomain.textContent = urlObj.hostname;
                urlSafety.textContent = urlObj.protocol === 'https:' ? '✅ 安全（HTTPS）' : '⚠️ 非安全（HTTP）';

                // 显示结果卡片
                resultCard.style.display = 'block';
                // 保存到历史记录
                saveToHistory(fullUrl);

            } catch (error) {
                alert('请输入有效的网址！');
                resultCard.style.display = 'none';
            }
        }

        // 6. 历史记录管理（本地存储，页面刷新不丢失）
        function saveToHistory(url) {
            // 从本地存储获取历史记录
            let history = JSON.parse(localStorage.getItem('urlHistory') || '[]');
            // 去重（避免重复记录）
            history = history.filter(item => item !== url);
            // 添加到最前面
            history.unshift(url);
            // 限制最多保存10条
            if (history.length > 10) history.pop();
            // 保存回本地存储
            localStorage.setItem('urlHistory', JSON.stringify(history));
            // 重新渲染历史记录
            loadHistory();
        }

        function loadHistory() {
            const history = JSON.parse(localStorage.getItem('urlHistory') || '[]');
            historyList.innerHTML = '';

            if (history.length === 0) {
                historyList.innerHTML = '<div class="history-item" style="color:#999;">暂无历史记录</div>';
                return;
            }

            history.forEach(url => {
                const itemDiv = document.createElement('div');
                itemDiv.className = 'history-item';
                itemDiv.innerHTML = `
                    <div class="history-url">${url}</div>
                    <div class="delete-btn" data-url="${url}">
                        <<i class="iconfont icon-delete"></</i>
                    </div>
                `;
                // 点击历史记录：填充输入框+解析
                itemDiv.addEventListener('click', (e) => {
                    if (!e.target.closest('.delete-btn')) {
                        urlInput.value = url;
                        analyzeUrl(url);
                    }
                });
                // 点击删除按钮
                const deleteBtn = itemDiv.querySelector('.delete-btn');
                deleteBtn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    deleteHistory(url);
                });
                historyList.appendChild(itemDiv);
            });
        }

        function deleteHistory(url) {
            let history = JSON.parse(localStorage.getItem('urlHistory') || '[]');
            history = history.filter(item => item !== url);
            localStorage.setItem('urlHistory', JSON.stringify(history));
            loadHistory();
        }

        // 7. 绑定事件
        // 解析按钮点击
        submitBtn.addEventListener('click', () => {
            analyzeUrl(urlInput.value.trim());
        });
        // 回车解析
        urlInput.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') analyzeUrl(urlInput.value.trim());
        });
        // 打开解析后的网址
        resultOpenBtn.addEventListener('click', () => {
            window.open(rawUrl.textContent, '_blank');
        });
        // 复制解析后的网址
        resultCopyBtn.addEventListener('click', async () => {
            await navigator.clipboard.writeText(rawUrl.textContent);
            alert('网址已复制到剪贴板！');
        });

        // 8. 初始化页面
        initPage();
    </script>
</body>
</html>
