ir.html

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>منابع ایرانی</title>
    <link href="src/tailwind.min.css" rel="stylesheet">
    <link href="src/font-face.css" rel="stylesheet">
    <link href="src/main-style.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Vazir', sans-serif;
            background-color: #f0f2f5;
            margin: 0;
            padding: 20px;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            /* حذف padding-top و padding-bottom */
            padding: 0.5rem 0.2rem;
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
        }
        .header h1 {
            font-size: 2.5rem;
            color: #343a40;
            margin-bottom: 10px;
        }
        .alert {
            background-color: #e7f3ff;
            border: none;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            margin-bottom: 30px;
            line-height: 1.8;
        }
        .alert a {
            color: #007bff;
            text-decoration: none;
            font-weight: bold;
        }
        .alert a:hover {
            text-decoration: underline;
        }
        .card {
            margin-bottom: 20px;
            border: none;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
        }
        .card-header {
            background: linear-gradient(90deg, #007bff, #0056b3);
            color: white;
            font-weight: bold;
            font-size: 1.25rem;
            border-radius: 12px 12px 0 0;
            padding: 15px;
        }
        .list-group-item {
            border: none;
            padding: 12px 15px;
            font-size: 1rem;
            transition: background-color 0.2s ease;
        }
        .list-group-item:hover {
            background-color: #f8f9fa;
        }
        .list-group-item a {
            text-decoration: none;
            color: #007bff;
            font-weight: 500;
        }
        .list-group-item a:hover {
            text-decoration: underline;
            color: #0056b3;
        }
        @media (max-width: 576px) {
            .header h1 {
                font-size: 1.8rem;
            }
            .card-header {
                font-size: 1.1rem;
            }
            .list-group-item {
                font-size: 0.9rem;
                padding: 10px;
            }
            .alert {
                font-size: 0.85rem;
                padding: 15px;
            }
        }
        /* حذف استایل‌های هدر و فوتر ثابت */
        /* حذف استایل‌های header, footer و container مربوط به fixed و blur و ... */
        @media (max-width: 768px) {
            header h1 {
                font-size: 1.5rem;
            }
            nav {
                display: none;
            }
        }
    </style>
</head>
<body class="min-h-screen text-gray-800 flex flex-col">
    <header id="main-header"></header>
    <main class="container mx-auto px-6 py-20 flex-1 overflow-y-auto main-spacing">
      <div class="container">
          <div class="header">
              <h1>منابع ایرانی</h1>
          </div>
          <div class="alert alert-info" role="alert">
              ایده این پروژه از <a href="https://x.com/old_boye" target="_blank">شادان غمگسار</a> و <a href="https://github.com/mohamadi7613" target="_blank">محمد محمدی</a> بوده است.<br>
              برای تکمیل این لیست، به محمد در تلگرام پیام دهید: <a href="https://t.me/mohamadi_arch" target="_blank">@mohamadi_arch</a><br>
              اگر پیشنهادی دارید، به ریک سانچز پیام دهید: <a href="https://t.me/m4tinbeigipv" target="_blank">@m4tinbeigipv</a><br>
              منابع: <a href="https://www.zoomit.ir/websites/342552-websites-directory-internet-shutdown/" target="_blank">زومیت</a> | 
              <a href="https://github.com/mohamadi7613/awsome_persian_websites/tree/main" target="_blank">گیت‌هاب محمد</a>
          </div>
          <div id="categories-container"></div>
      </div>
    </main>
    <footer id="main-footer"></footer>
    <script src="src/common-header-footer.js"></script>
    <script>
        // فرض می‌کنیم فایل JSON در مسیر زیر باشد
        const jsonUrl = 'json/data.json';

        // بارگذاری داده‌های JSON و نمایش در صفحه
        fetch(jsonUrl)
            .then(response => response.json())
            .then(data => {
                const container = document.getElementById('categories-container');
                data.categories.forEach(category => {
                    // ایجاد کارت برای هر دسته‌بندی
                    const card = document.createElement('div');
                    card.className = 'card';

                    // ایجاد هدر کارت
                    const cardHeader = document.createElement('div');
                    cardHeader.className = 'card-header';
                    cardHeader.textContent = category.name;
                    card.appendChild(cardHeader);

                    // ایجاد لیست آیتم‌ها
                    const listGroup = document.createElement('ul');
                    listGroup.className = 'list-group list-group-flush';

                    category.sites.forEach(site => {
                        const listItem = document.createElement('li');
                        listItem.className = 'list-group-item';
                        listItem.innerHTML = `<a href="${site.url}" target="_blank">${site.name}</a> - ${site.description}`;
                        listGroup.appendChild(listItem);
                    });

                    card.appendChild(listGroup);
                    container.appendChild(card);
                });

                // اضافه کردن قابلیت جستجو
                const searchBox = document.createElement('input');
                searchBox.type = 'text';
                searchBox.placeholder = 'جستجو بین سایت‌ها یا توضیحات...';
                searchBox.className = 'w-full p-3 mb-6 border rounded-lg text-right text-base';
                container.parentNode.insertBefore(searchBox, container);

                let allSites = [];
                data.categories.forEach(category => {
                    category.sites.forEach(site => {
                        // اگر توضیح ندارد، توضیح پیش‌فرض اضافه کن
                        if (!site.description || site.description.trim() === '') {
                            site.description = 'بدون توضیح';
                        }
                        allSites.push({
                            ...site,
                            category: category.name
                        });
                    });
                });

                // ساخت دسته ویژه و قرار دادن در ابتدای آرایه (بدون حذف از دسته اصلی)
                const featuredSites = allSites.filter(site => site.featured);
                if (featuredSites.length > 0) {
                    const featuredCategory = {
                        name: 'ویژه',
                        sites: featuredSites.map(site => ({ ...site, _originalCategory: site.category }))
                    };
                    data.categories.unshift(featuredCategory);
                }

                // ساخت دسته علاقه‌مندی‌ها از localStorage
                function getFavorites() {
                    try {
                        return JSON.parse(localStorage.getItem('favSites') || '[]');
                    } catch { return []; }
                }
                function setFavorites(favs) {
                    localStorage.setItem('favSites', JSON.stringify(favs));
                }
                function isFavorite(url) {
                    return getFavorites().includes(url);
                }
                function toggleFavorite(url) {
                    let favs = getFavorites();
                    if (favs.includes(url)) {
                        favs = favs.filter(u => u !== url);
                    } else {
                        favs.push(url);
                    }
                    setFavorites(favs);
                }
                // اضافه کردن دسته علاقه‌مندی‌ها بعد از ویژه
                function buildFavoritesCategory() {
                    const favUrls = getFavorites();
                    if (!favUrls.length) return null;
                    const favSites = allSites.filter(site => favUrls.includes(site.url));
                    if (!favSites.length) return null;
                    return {
                        name: 'علاقه‌مندی‌ها',
                        sites: favSites.map(site => ({ ...site, _originalCategory: site.category }))
                    };
                }
                // رندر با علاقه‌مندی‌ها
                function renderSites(sitesByCategory) {
                    container.innerHTML = '';
                    // علاقه‌مندی‌ها را بعد از ویژه قرار بده
                    let cats = [...sitesByCategory];
                    const favCat = buildFavoritesCategory();
                    if (favCat) {
                        // اگر ویژه هست، بعدش علاقه‌مندی‌ها بیاد
                        if (cats[0] && cats[0].name === 'ویژه') {
                            cats = [cats[0], favCat, ...cats.slice(1)];
                        } else {
                            cats = [favCat, ...cats];
                        }
                    }
                    cats.forEach((category, idx) => {
                        if (!category.sites.length) return;
                        const isFeatured = category.name === 'ویژه';
                        const isFav = category.name === 'علاقه‌مندی‌ها';
                        const card = document.createElement('div');
                        card.className = 'card' + (isFeatured ? ' border-2 border-yellow-500 shadow-xl bg-gradient-to-br from-yellow-100 to-yellow-50 special-featured-card' : '') + (isFav ? ' border-2 border-pink-400 shadow-xl bg-gradient-to-br from-pink-50 to-pink-100 special-fav-card' : '');
                        const cardHeader = document.createElement('div');
                        cardHeader.className = 'card-header' + (isFeatured ? ' bg-yellow-400 text-yellow-900 border-b-2 border-yellow-500' : '') + (isFav ? ' bg-pink-200 text-pink-900 border-b-2 border-pink-400' : '');
                        cardHeader.innerHTML = isFeatured ? '<span style="font-size:1.5rem; font-weight:900; display:flex; align-items:center; justify-content:center; gap:0.7rem; letter-spacing:0.5px;">✨ سایت‌های ویژه ✨</span>' : isFav ? '<span style="font-size:1.3rem; font-weight:900; display:flex; align-items:center; justify-content:center; gap:0.7rem;">❤️ علاقه‌مندی‌های من</span>' : category.name;
                        card.appendChild(cardHeader);
                        const listGroup = document.createElement('ul');
                        listGroup.className = 'list-group list-group-flush';
                        category.sites.forEach(site => {
                            const iconUrl = site.icon || `https://www.google.com/s2/favicons?domain=${site.url}`;
                            const listItem = document.createElement('li');
                            listItem.className = 'list-group-item flex items-center justify-between' + (isFeatured ? ' bg-yellow-50 hover:bg-yellow-100 border-b border-yellow-200 special-featured-item' : '') + (isFav ? ' bg-pink-50 hover:bg-pink-100 border-b border-pink-200 special-fav-item' : '');
                            // ستاره علاقه‌مندی (سمت چپ)
                            const star = document.createElement('span');
                            star.innerHTML = isFavorite(site.url) ? '★' : '☆';
                            star.title = isFavorite(site.url) ? 'حذف از علاقه‌مندی‌ها' : 'افزودن به علاقه‌مندی‌ها';
                            star.style = 'font-size:1.3rem;cursor:pointer;color:#f59e42;margin-right:0.7rem;user-select:none;transition:color 0.2s;';
                            star.onclick = function(e) {
                                e.stopPropagation();
                                toggleFavorite(site.url);
                                renderSites(data.categories);
                            };
                            // محتوای سایت (سمت راست)
                            const contentDiv = document.createElement('div');
                            contentDiv.className = 'flex items-center';
                            contentDiv.innerHTML = `
                                <img src="${iconUrl}" alt="icon" class="inline-block mr-2 ml-2 shadow-sm" style="width:26px;height:26px;vertical-align:middle;border-radius:7px;background:#fff;border:2px solid #ffd700;box-shadow:0 2px 8px #ffe06633;"> 
                                <a href="${site.url}" target="_blank" style="font-weight:bold;font-size:1.08rem;">${site.name}</a>
                                ${(isFeatured || isFav) ? `<span class=\"text-xs text-yellow-800 ml-2 px-2 py-1 rounded bg-yellow-200 border border-yellow-300\" style=\"margin-right:0.7rem;\">${site._originalCategory}</span>` : ''}
                                <span class="text-gray-600 text-sm ml-2" style="margin-right:0.7rem;">${site.description}</span>
                            `;
                            // چیدمان: [محتوا][ستاره]
                            listItem.appendChild(contentDiv);
                            listItem.appendChild(star);
                            listGroup.appendChild(listItem);
                        });
                        card.appendChild(listGroup);
                        container.appendChild(card);
                    });
                }

                function filterAndRender(searchValue) {
                    if (!searchValue) {
                        renderSites(data.categories);
                        return;
                    }
                    const filtered = {};
                    allSites.forEach(site => {
                        if (
                            site.name.toLowerCase().includes(searchValue.toLowerCase()) ||
                            site.description.toLowerCase().includes(searchValue.toLowerCase())
                        ) {
                            if (!filtered[site.category]) filtered[site.category] = [];
                            filtered[site.category].push(site);
                        }
                    });
                    const filteredCategories = Object.keys(filtered).map(cat => ({
                        name: cat,
                        sites: filtered[cat]
                    }));
                    renderSites(filteredCategories);
                }

                searchBox.addEventListener('input', function() {
                    filterAndRender(this.value);
                });

                renderSites(data.categories);
            })
            .catch(error => console.error('Error loading JSON:', error));

        // استایل ویژه برای دسته ویژه و علاقه‌مندی‌ها
        const style = document.createElement('style');
        style.innerHTML = `
        .special-featured-card {
          border-color: #ffd700 !important;
          background: linear-gradient(135deg, #fffbe6 0%, #fff9c4 100%) !important;
          box-shadow: 0 8px 32px 0 #ffe06655 !important;
        }
        .special-featured-card .card-header {
          background: linear-gradient(90deg, #ffd700 60%, #fffbe6 100%) !important;
          color: #7c5700 !important;
          border-bottom: 2.5px solid #ffd700 !important;
          font-weight: 900 !important;
          letter-spacing: 0.5px;
        }
        .special-featured-item {
          background: #fffde7 !important;
          border-bottom: 1.5px solid #ffe066 !important;
          font-size: 1.08rem !important;
        }
        .special-featured-item a {
          color: #bfa100 !important;
        }
        .special-fav-card {
          border-color: #f472b6 !important;
          background: linear-gradient(135deg, #fff0f6 0%, #ffe4e6 100%) !important;
          box-shadow: 0 8px 32px 0 #f472b655 !important;
        }
        .special-fav-card .card-header {
          background: linear-gradient(90deg, #f472b6 60%, #fff0f6 100%) !important;
          color: #a21caf !important;
          border-bottom: 2.5px solid #f472b6 !important;
          font-weight: 900 !important;
          letter-spacing: 0.5px;
        }
        .special-fav-item {
          background: #fff0f6 !important;
          border-bottom: 1.5px solid #f472b6 !important;
          font-size: 1.08rem !important;
        }
        .special-fav-item a {
          color: #be185d !important;
        }
        `;
        document.head.appendChild(style);
    </script>
</body>
</html>