<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MetaSearch聚合搜索引擎</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            text-align: center;
        }
        .search-group {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        select, input[type="text"], button {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
            box-sizing: border-box;
        }
        button {
            background-color: #007BFF;
            color: white;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        .favorite-sites {
            margin-top: 20px;
        }
        .favorite-sites h2 {
            margin-bottom: 10px;
        }
        .favorite-sites .site-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .favorite-sites .site-item {
            height:60px;
            background-color: #fff;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            width: calc(25% - 7.5px);
        }
        .favorite-sites .site-item a {
            color: #007BFF;
            text-decoration: none;
            flex-grow: 1;
        }
        .favorite-sites .site-item a:hover {
            text-decoration: underline;
        }
        .favorite-sites .site-item button {
            background-color: #ff4d4d;
            border: none;
            color: white;
            padding: 5px;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
            writing-mode: vertical-rl;
            text-orientation: upright;
            margin-left: 5px;
            height: 100%;
            width: 20px;
        }
        .favorite-sites .site-item button:hover {
            background-color: #cc0000;
        }
        @media (max-width: 480px) {
            .favorite-sites .site-item {
                width: calc(50% - 5px);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>聚合搜索引擎</h1>
        <div class="search-group">
            <select id="search-engine">
                <option value="https://www.google.com/search?q=">Google</option>
                <option value="https://www.bing.com/search?q=">Bing</option>
                <option value="https://www.baidu.com/s?wd=">百度</option>
                <option value="https://www.yahoo.com/search?p=">Yahoo</option>
                <option value="https://duckduckgo.com/?q=">DuckDuckGo</option>
            </select>
            <input type="text" id="search-query" placeholder="输入搜索内容">
            <button onclick="search()">搜索</button>
        </div>

        <div class="favorite-sites">
            <h2>喜欢的网站</h2>
            <div class="search-group">
                <input type="text" id="site-url" placeholder="输入网站URL">
                <input type="text" id="site-name" placeholder="输入网站显示名称">
                <button onclick="addSite()">添加网站</button>
            </div>
            <div class="site-list" id="sites-list"></div>
        </div>
    </div>

    <script>
        // 从 localStorage 加载网站列表
        function loadSites() {
            const siteList = document.getElementById('sites-list');
            const sites = JSON.parse(localStorage.getItem('favoriteSites')) || [];
            sites.forEach(site => {
                addSiteToDOM(site.url, site.name);
            });
        }

        // 将网站添加到 DOM 中
        function addSiteToDOM(url, name) {
            const siteList = document.getElementById('sites-list');

            const siteItem = document.createElement('div');
            siteItem.className = 'site-item';

            const siteLink = document.createElement('a');
            siteLink.href = url.startsWith('http') ? url : `https://${url}`;
            siteLink.textContent = name;
            siteLink.target = '_blank';

            const deleteButton = document.createElement('button');
            deleteButton.textContent = '删除';
            deleteButton.onclick = function() {
                siteList.removeChild(siteItem);
                removeSiteFromStorage(url, name);
            };

            siteItem.appendChild(siteLink);
            siteItem.appendChild(deleteButton);
            siteList.appendChild(siteItem);
        }

        // 添加网站到 localStorage
        function addSite() {
            const siteUrl = document.getElementById('site-url').value;
            const siteName = document.getElementById('site-name').value;
            if (siteUrl.trim() && siteName.trim()) {
                const site = { url: siteUrl, name: siteName };
                const sites = JSON.parse(localStorage.getItem('favoriteSites')) || [];
                sites.push(site);
                localStorage.setItem('favoriteSites', JSON.stringify(sites));
                addSiteToDOM(siteUrl, siteName);

                document.getElementById('site-url').value = '';
                document.getElementById('site-name').value = '';
            } else {
                alert('请输入有效的URL和网站名称！');
            }
        }

        // 从 localStorage 中移除网站
        function removeSiteFromStorage(url, name) {
            const sites = JSON.parse(localStorage.getItem('favoriteSites')) || [];
            const updatedSites = sites.filter(site => site.url !== url || site.name !== name);
            localStorage.setItem('favoriteSites', JSON.stringify(updatedSites));
        }

        // 页面加载时初始化
        window.onload = function() {
            loadSites();
            // 绑定回车事件
            document.getElementById('search-query').addEventListener('keydown', function(e) {
                if (e.key === 'Enter') {
                    search();
                }
            });
        };

        // 搜索功能
        function search() {
            const engine = document.getElementById('search-engine').value;
            const query = document.getElementById('search-query').value.trim();
            if (query) {
                window.open(engine + encodeURIComponent(query), '_blank');
            }
        }
    </script>
</body>
</html>