Blog De Libros Pdf Google Drive Online
// ======================== // 2. LISTA DE PDFs para el sidebar (Google Drive) // Mismos datos que posts pero se muestran también como lista independiente. // ======================== function buildDrivePdfList() const pdfListEl = document.getElementById('drivePdfList'); if (!pdfListEl) return; pdfListEl.innerHTML = ''; blogPosts.forEach(post => const li = document.createElement('li'); li.className = 'pdf-item'; const driveUrl = `https://drive.google.com/file/d/$post.pdfDriveId/preview`; const link = document.createElement('a'); link.href = "#"; link.setAttribute('data-pdf-url', driveUrl); link.setAttribute('data-pdf-name', post.pdfFileName); link.innerHTML = `<i class="fas fa-file-pdf"></i> <span>$post.pdfFileName.replace(/_/g, ' ').replace('.pdf', '')</span>`; link.addEventListener('click', (e) => e.preventDefault(); openPdfModal(driveUrl, post.pdfFileName); ); li.appendChild(link); pdfListEl.appendChild(li); );
.blog-header h1 i margin-right: 12px; color: #f9d56e;
body font-family: 'Inter', sans-serif; background: #faf6f0; color: #2c2b28; scroll-behavior: smooth;
.drive-description font-size: 0.85rem; color: #5c5a55; margin-bottom: 1.5rem; line-height: 1.4; Blog De Libros Pdf Google Drive
<footer> <p><i class="fas fa-heart" style="color:#f9b23f;"></i> Blog de Libros · Inspirado por la literatura universal y la tecnología | Conecta con nuestra biblioteca en la nube</p> <p style="margin-top: 10px;">Todos los enlaces son de demostración educativa usando IDs públicos de Google Drive (ejemplos simulados).</p> </footer>
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>Blog de Libros · Biblioteca PDF en Google Drive</title> <!-- Google Fonts & Font Awesome Icons --> <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,600;14..32,700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <style> * margin: 0; padding: 0; box-sizing: border-box;
/* Encabezado principal tipo blog */ .blog-header background: linear-gradient(135deg, #1e3c2c 0%, #2a5a3a 100%); color: white; padding: 2.5rem 2rem; text-align: center; box-shadow: 0 8px 20px rgba(0,0,0,0.1); // ======================== // 2
.filter-btn background: transparent; border: none; font-weight: 600; padding: 0.5rem 1.2rem; border-radius: 40px; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 0.9rem; transition: all 0.2s ease; color: #3a5a44;
// Event listeners modal if (closeModalBtn) closeModalBtn.addEventListener('click', closeModal); window.addEventListener('click', (e) => if (e.target === modal) closeModal(); );
function closeModal() modal.style.display = 'none'; pdfIframe.src = ''; // limpiar para detener carga document.body.style.overflow = 'auto'; const filterValue = btn.getAttribute('data-filter')
// ======================== // 5. FILTROS Y NAVEGACIÓN // ======================== function initFilters() const filterBtns = document.querySelectorAll('.filter-btn'); filterBtns.forEach(btn => btn.addEventListener('click', () => const filterValue = btn.getAttribute('data-filter'); if (!filterValue) return; activeFilter = filterValue; renderPosts(); // Actualizar clase activa filterBtns.forEach(b => b.classList.remove('active')); btn.classList.add('active'); ); );
.drive-note background: #f4efe7; border-radius: 20px; padding: 1rem; font-size: 0.8rem; text-align: center; color: #6b5a48; margin-top: 1rem;
init();
postsContainer.innerHTML = filteredPosts.map(post => const drivePreviewUrl = `https://drive.google.com/file/d/$post.pdfDriveId/preview`; return ` <article class="post-card"> <div class="post-img"> $post.imageIcon </div> <div class="post-content"> <div class="post-category">$post.categoryLabel</div> <h2 class="post-title">$post.title</h2> <div class="post-meta"> <span><i class="far fa-calendar-alt"></i> $post.date</span> <span><i class="fas fa-tag"></i> $post.categoryLabel</span> </div> <p class="post-excerpt">$post.excerpt</p> <button class="btn-pdf open-pdf-btn" data-pdf-url="$drivePreviewUrl" data-pdf-name="$post.pdfFileName"> <i class="fas fa-eye"></i> Leer PDF desde Google Drive </button> </div> </article> `; ).join('');
.modal-header display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; background: #1e3c2c; color: white;
