Bosh sahifa
Maqolalar
Audiolar
Videolar
Murojaat

Audiolar

Audiolar - Smart Feed

Postni do‘stlaringizga ulashing:

/* --- ZAMONAVIY SHARE WIDGET --- */ .modern-share-container {   max-width: 500px; /* Vidjet juda cho'zilib ketmasligi uchun cheklov */   margin: 25px auto; /* Butun blokni ekran markaziga olib keladi */   font-family: 'Roboto', 'Google Sans', system-ui, sans-serif; } .modern-share-title {   font-size: 16px;   font-weight: 500;   margin-bottom: 12px;   color: var(--sf-text, #0f0f0f);   opacity: 0.9;   text-align: center; /* Matnni to'liq markazga tekislaydi */ } .modern-share-wrapper { display: flex; align-items: center; background: var(--sf-hover, #f5f5f5); border-radius: 12px; padding: 6px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.05); transition: all 0.3s ease; } /* Tungi rejim (Dark Mode) moslashuvi */ .is-dark .modern-share-wrapper, html.is-dark .modern-share-wrapper { border: 1px solid rgba(255,255,255,0.1); } .modern-share-input-box { display: flex; align-items: center; flex: 1; padding: 0 12px; overflow: hidden; } .link-icon { width: 18px; height: 18px; color: #888; flex-shrink: 0; margin-right: 10px; } #page-url-input { width: 100%; border: none; background: transparent; font-size: 14px; color: #666; outline: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; pointer-events: none; /* Faqat o'qish uchun */ } .modern-copy-btn { display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--sf-modal-btn-bg, #0f0f0f); color: var(--sf-modal-btn-color, #ffffff); border: none; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; } .modern-copy-btn svg { width: 16px; height: 16px; transition: transform 0.3s ease; } /* Hover va Active effektlari */ .modern-copy-btn:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .modern-copy-btn:active { transform: scale(0.96); } /* Muwaffaqiyatli nusxalash holati */ .modern-copy-btn.success { background: #10b981 !important; /* Chiroyli yashil rang */ color: #ffffff !important; transform: scale(1.02); } .modern-copy-btn.success svg { transform: scale(1.2); } @media (max-width: 480px) { .modern-share-wrapper { flex-direction: column; padding: 10px; border-radius: 14px; } .modern-share-input-box { width: 100%; margin-bottom: 10px; padding: 8px 4px; } .modern-copy-btn { width: 100%; padding: 12px; } } // Sahifa yuklanganda input ichiga joriy havolani avtomatik joylashtirish document.addEventListener("DOMContentLoaded", function() { const urlInput = document.getElementById("page-url-input"); if (urlInput) { urlInput.value = window.location.href; } }); function copyPageUrl() { const currentUrl = window.location.href; const btn = document.getElementById("modern-copy-btn"); const textSpan = document.getElementById("copy-btn-text"); const iconSvg = document.getElementById("copy-btn-icon"); // Clipboard ga nusxalash API si navigator.clipboard.writeText(currentUrl).then(() => { // Tugma dizaynini "Muwaffaqiyatli" holatga o'tkazish btn.classList.add("success"); textSpan.innerText = "Post manzili nusxalandi!"; // Ikonkani "Pichka" (Check) belgisiga o'zgartirish iconSvg.innerHTML = '<polyline points="20 6 9 17 4 12"></polyline>'; // 2.5 soniyadan keyin asliga qaytarish setTimeout(() => { btn.classList.remove("success"); textSpan.innerText = "Post manzilini nusxalash"; // Ikonkani "Nusxalash" belgisiga qaytarish iconSvg.innerHTML = '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>'; }, 2500); }).catch(err => { console.error("Nusxalashda xatolik yuz berdi: ", err); alert("Nusxalash imkonsiz bo'ldi. Iltimos o'zingiz belgilab nusxalang."); }); }

/* --- ASOSIY SOZLAMALAR --- */ .sf-tags { display: none !important; } :root { --sf-bg: #ffffff; --sf-text: #0f0f0f; --sf-hover: #f8f9fa; --sf-radius: 12px; --sf-skeleton-bg: #e5e5e5; } :root.is-dark, html.is-dark, body.is-dark, .is-dark { --sf-text: #f1f1f1; --sf-hover: #222; --sf-skeleton-bg: #272727; } #smart-feed-wrapper { margin: 30px auto 30px auto !important; max-width: 1280px; padding: 0 20px; min-height: 100vh; } .sf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px 10px; opacity: 0; transition: opacity 0.5s ease; } .sf-grid.visible { opacity: 1; } .sf-loader-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px 10px; } .sk-card { background: transparent; border-radius: 0; overflow: hidden; height: auto; position: relative; } .sk-thumb { padding-top: 56.25%; background: var(--sf-skeleton-bg); position: relative; overflow: hidden; border-radius: var(--sf-radius) !important; transform: translateZ(0); } .sk-text { padding: 10px 4px 14px 4px; } .sk-line { height: 14px; background: var(--sf-skeleton-bg); margin-bottom: 10px; border-radius: 4px; width: 88%; position: relative; overflow: hidden; } .sk-line.short { width: 60%; } .sk-thumb::after, .sk-line::after { content: ""; position: absolute; top: 0; left: -150%; width: 150%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); animation: shimmer 1.2s infinite; } @keyframes shimmer { 0% { left: -150%; } 100% { left: 150%; } } .sf-card { background: transparent; border-radius: 0; overflow: hidden; position: relative; cursor: pointer; } .sf-thumb-box { position: relative; width: 100%; padding-top: 56.25%; background: var(--sf-skeleton-bg); overflow: hidden; border-radius: var(--sf-radius) !important; transform: translateZ(0); } .sf-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .sf-card:hover .sf-thumb { transform: scale(1.04); } .sf-thumb-box.video-icon::after, .sf-thumb-box.audio-icon::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; background-color: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: 50%; z-index: 10; display: block; transition: all 0.2s ease; pointer-events: none; } .sf-card:hover .sf-thumb-box.video-icon::after, .sf-card:hover .sf-thumb-box.audio-icon::after { background-color: rgba(0, 0, 0, 0.75); transform: translate(-50%, -50%) scale(1.05); } .sf-thumb-box.video-icon::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-40%, -50%); width: 0; height: 0; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent #ffffff; z-index: 11; transition: all 0.2s ease; pointer-events: none; } .sf-thumb-box.audio-icon::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 22px; height: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 3a9 9 0 0 0-9 9v7c0 1.1.9 2 2 2h3v-8H5v-1c0-3.87 3.13-7 7-7s7 3.13 7 7v1h-3v8h3c1.1 0 2-.9 2-2v-7a9 9 0 0 0-9-9z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; z-index: 11; transition: all 0.2s ease; pointer-events: none; } .sf-premium-badge { position: absolute; bottom: 8px; right: 8px; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: #fff; font-size: 10.5px; font-weight: 500; padding: 5px 8px; border-radius: 6px; display: flex; align-items: center; gap: 5px; z-index: 12; pointer-events: none; line-height: 1; max-width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sf-premium-badge svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; } .sf-content { padding: 10px 4px 14px 4px; } .sf-post-title { font-size: 15px; font-weight: 500; line-height: 1.4; margin: 0; color: var(--sf-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } @media (max-width: 768px) { .sf-grid, .sf-loader-container { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px 10px; } #smart-feed-wrapper { margin: 20px auto; padding: 0 15px; } } @media (max-width: 500px) { #smart-feed-wrapper { padding: 0 !important; margin-top: 0 !important; width: 100% !important; max-width: 100% !important; } .sf-grid, .sf-loader-container { grid-template-columns: 100% !important; gap: 6px 0 !important; } .sf-content, .sk-text { padding: 10px 14px 16px 14px !important; } .sf-post-title { font-size: 14px; } .sf-thumb-box.video-icon::after, .sf-thumb-box.audio-icon::after { width: 42px; height: 42px; } .sf-thumb-box.video-icon::before { border-width: 8px 0 8px 12px; } .sf-thumb-box.audio-icon::before { width: 20px; height: 20px; } } // ================= CONFIG ================= const POSTS_PER_PAGE = 4; const TOTAL_FETCH_LIMIT = 200; const DISCOVERY_RATE = 0.45; const RECENCY_WEIGHT = 70; const CLICK_BOOST = 4; const DECAY_FACTOR = 0.90; // ================= SKELETON GENERATOR ================= const loader = document.getElementById('sf-loader'); function showSkeletons() { let skeletonHTML = ''; for(let i = 0; i < POSTS_PER_PAGE; i++) { skeletonHTML += `<div class="sk-card"><div class="sk-thumb"></div><div class="sk-text"><div class="sk-line"></div><div class="sk-line short"></div></div></div>`; } loader.innerHTML = skeletonHTML; loader.style.display = 'grid'; } showSkeletons(); // ================= STATE ================= let allPosts = []; let displayedCount = 0; let userPreferences = migratePreferences(JSON.parse(localStorage.getItem('sf_prefs_v4')) || { tags: {}, words: {}, types: {}, clicked: [], timestamps: {} }); let isLoading = false; const currentPath = window.location.pathname; // ================= MIGRATION & NLP ================= function migratePreferences(prefs) { if (!prefs.timestamps) prefs.timestamps = {}; if (!prefs.words) prefs.words = {}; if (!prefs.types) prefs.types = {}; if (prefs.clicked && prefs.clicked.length > 500) { prefs.clicked = prefs.clicked.slice(-500); } return prefs; } function extractKeywords(str) { if (!str) return []; return str.toLowerCase() .replace(/['`‘’]/g, '') .replace(/[^a-z0-9а-яёўқғҳ]/gi, ' ') .split(/\s+/) .filter(w => w.length > 2); } // ================= INIT ================= initSmartFeed(); async function initSmartFeed() { const grid = document.getElementById('smart-feed-grid'); try { const response = await fetch('/feeds/posts/default?alt=json&max-results=' + TOTAL_FETCH_LIMIT); const data = await response.json(); if (data.feed?.entry) { allPosts = data.feed.entry.map(parseEntry).filter(post => { try { const postPath = new URL(post.link).pathname; return postPath !== currentPath || currentPath === '/'; } catch(e) { return true; } }); applyPreferenceDecay(); sortPostsByInterest(); setTimeout(async () => { await loadMorePosts(); grid.classList.add('visible'); window.addEventListener('scroll', handleScroll); }, 500); } } catch (err) { console.error("Xatolik:", err); loader.style.display = 'none'; } } // ================= PARSER ================= function parseEntry(entry) { const title = entry.title.$t; const link = entry.link.find(l => l.rel === 'alternate')?.href || '#'; const tags = entry.category ? entry.category.map(c => c.term) : []; const published = new Date(entry.published.$t).getTime(); const content = entry.content?.$t || ''; let img = 'https://via.placeholder.com/720x405.png?text=Image+Error'; if (entry['media$thumbnail']) { img = entry['media$thumbnail'].url .replace(/\/s72-c\//, '/w720-h405-p-k-no-nu/') .replace(/\/s\d+-c\//, '/w720-h405-p-k-no-nu/'); } else if (content) { const match = content.match(/src=["'](.*?)["']/i); if (match) img = match[1]; } const imgCount = (content.match(/<img[^>]*>/gi) || []).length; const paragraphCount = (content.match(/<p[^>]*>/gi) || []).length; // Yorliqlarni tekshirishni qo'shamiz const isVideoTag = tags.some(t => t.toLowerCase().includes('video')); const isAudioTag = tags.some(t => t.toLowerCase().includes('audio')); // Qamrovni kengaytiramiz const hasVideo = content.includes('<video') || content.includes('youtube.com') || content.includes('vimeo.com') || content.includes('art-video-player') || (content.includes('<iframe') && content.includes('video')) || isVideoTag; const hasAudio = content.includes('<audio') || content.includes('soundcloud.com') || content.includes('strict-audio-box') || (content.includes('<iframe') && content.includes('audio')) || isAudioTag; const isFree = content.includes('<div id="free-access"></div>'); const isAd = content.includes('<div id="advertisement"></div>'); const isArtVideo = content.includes('art-video-player'); const isStrictAudio = content.includes('strict-audio-box'); let contentType = 'Text'; if (hasVideo) { contentType = (paragraphCount > 2) ? 'TextVideo' : 'Video'; } else if (hasAudio) { contentType = (paragraphCount > 2) ? 'TextAudio' : 'Audio'; } else if (imgCount >= 2) { contentType = 'TextImage'; } return { title, link, tags, img, score: 0, id: link, published, contentType, isFree, isAd, isDiscovery: false, isArtVideo, isStrictAudio }; } // ================= ALGORITHM ================= function applyPreferenceDecay() { const now = Date.now(); const decayItems = ['tags', 'words', 'types']; decayItems.forEach(category => { if (!userPreferences[category]) userPreferences[category] = {}; Object.keys(userPreferences[category]).forEach(key => { let timestampKey = category === 'tags' ? 't_'+key : category === 'words' ? 'w_'+key : 'type_'+key; const ageDays = (now - (userPreferences.timestamps[timestampKey] || now)) / 86400000; userPreferences[category][key] *= Math.pow(DECAY_FACTOR, ageDays); if (userPreferences[category][key] < 0.5) { delete userPreferences[category][key]; delete userPreferences.timestamps[timestampKey]; } }); }); } function sortPostsByInterest() { const now = Date.now(); allPosts.forEach(post => { post.score = 0; if (userPreferences.clicked.includes(post.id)) { post.score -= 40; } post.tags.forEach(tag => { if (userPreferences.tags && userPreferences.tags[tag]) post.score += userPreferences.tags[tag] * 18; }); const titleWords = extractKeywords(post.title); let wordMatchCount = 0; titleWords.forEach(word => { if (userPreferences.words && userPreferences.words[word]) { post.score += userPreferences.words[word] * 12; wordMatchCount++; } }); if (wordMatchCount > 1) post.score += (wordMatchCount * 6); if (userPreferences.types && userPreferences.types[post.contentType]) { post.score += userPreferences.types[post.contentType] * 15; } const ageDays = (now - post.published) / 86400000; post.score += RECENCY_WEIGHT / (1 + ageDays / 5); const chaosFactor = allPosts.length < 15 ? 400 : 100; post.score += Math.random() * chaosFactor; if (Math.random() < DISCOVERY_RATE) { post.score += 50 + Math.random() * chaosFactor; post.isDiscovery = true; } }); allPosts.sort((a, b) => b.score - a.score); if (allPosts.length <= 15) { for (let i = allPosts.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [allPosts[i], allPosts[j]] = [allPosts[j], allPosts[i]]; } } else { const topPosts = allPosts.slice(0, POSTS_PER_PAGE); for (let i = topPosts.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [topPosts[i], topPosts[j]] = [topPosts[j], topPosts[i]]; } allPosts.splice(0, POSTS_PER_PAGE, ...topPosts); } } // ================= RENDER ================= async function loadMorePosts() { if (isLoading || displayedCount >= allPosts.length) return; isLoading = true; const container = document.getElementById('smart-feed-grid'); const slice = allPosts.slice(displayedCount, displayedCount + POSTS_PER_PAGE); slice.forEach(post => { const card = document.createElement('div'); card.className = `sf-card`; let iconClass = ''; // Endi barcha audio postlarga (contentType'da Audio bo'lsa ham) quloqchin beriladi if (post.isStrictAudio || post.contentType.includes('Audio')) { iconClass = 'audio-icon'; } else if (post.isArtVideo || post.contentType.includes('Video')) { iconClass = 'video-icon'; } let premiumBadgeHTML = ''; if (post.isAd) { premiumBadgeHTML = `<div class="sf-premium-badge"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><span>Reklama Post</span></div>`; } else if (post.isFree) { premiumBadgeHTML = `<div class="sf-premium-badge"><svg viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg><span>Odatiy Post</span></div>`; } else { premiumBadgeHTML = `<div class="sf-premium-badge"><svg viewBox="0 0 24 24"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"/></svg><span>Maxsus Post</span></div>`; } card.innerHTML = ` <a href="${post.link}" target="_top" style="text-decoration:none; color:inherit; display:block; height:100%;"> <div class="sf-thumb-box ${iconClass}"> <img src="${post.img}" class="sf-thumb" loading="lazy" alt="${post.title}" onerror="this.src='https://via.placeholder.com/720x405.png?text=Image+Error'"> ${premiumBadgeHTML} </div> <div class="sf-content"> <div class="sf-post-title">${post.title}</div> </div> </a> `; card.querySelector('a').addEventListener('click', () => trackClick(post)); container.appendChild(card); }); displayedCount += slice.length; loader.style.display = 'none'; isLoading = false; } // ================= TRACKING ================= function trackClick(post) { const now = Date.now(); post.tags.forEach(tag => { userPreferences.tags[tag] = (userPreferences.tags[tag] || 0) + CLICK_BOOST; userPreferences.timestamps['t_'+tag] = now; }); const words = extractKeywords(post.title); words.forEach(word => { userPreferences.words[word] = (userPreferences.words[word] || 0) + (CLICK_BOOST * 0.8); userPreferences.timestamps['w_'+word] = now; }); userPreferences.types[post.contentType] = (userPreferences.types[post.contentType] || 0) + (CLICK_BOOST * 1.5); userPreferences.timestamps['type_'+post.contentType] = now; if (!userPreferences.clicked.includes(post.id)) { userPreferences.clicked.push(post.id); } localStorage.setItem('sf_prefs_v4', JSON.stringify(userPreferences)); } // ================= SCROLL HANDLER ================= function handleScroll() { if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 400) { if (!isLoading && displayedCount < allPosts.length) { showSkeletons(); setTimeout(() => loadMorePosts(), 400); } } }

Bosh sahifa Maqolalar Audiolar Videolar Murojaat