Spaces:
Running
Running
File size: 4,027 Bytes
6390fb3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
document.addEventListener('DOMContentLoaded', () => {
loadBlogs();
});
function loadBlogs() {
const blogsContainer = document.getElementById('blogsContainer');
const blogs = JSON.parse(localStorage.getItem('mubashra_blogs_v2')) || [];
if (blogs.length > 0) {
blogsContainer.innerHTML = ''; // Clear empty state
blogs.forEach((blog, index) => {
const card = document.createElement('div');
card.classList.add('blog-card');
// For this version, since the admin creates a free-form "canvas",
// the safest way to "preview" it is to render the HTML structure.
// However, to prevent styles from breaking the card, we might scale it or similar.
// A simple approach: specific card layout.
// But the user said "place it like canva".
// So the blog is likely absolute positioned elements on a fixed size canvas.
// We will render a mini version of that canvas.
const previewScale = 0.3; // Scale down for card
card.innerHTML = `
<div class="blog-preview-wrapper" style="position: relative; width: 100%; padding-top: 75%; overflow: hidden; background: ${blog.backgroundColor || 'transparent'};">
<div class="blog-content-scaler" style="
position: absolute;
top: 0;
left: 0;
width: 100%;
transform-origin: top left;
transform: scale(${previewScale});
width: ${100 / previewScale}%;
height: ${100 / previewScale}%;
pointer-events: none; /* Make it non-interactive in preview */
">
${blog.content}
</div>
</div>
<div style="padding: 1rem; background: rgba(0,0,0,0.2);">
<h3 style="margin-bottom: 0.5rem; font-family: var(--font-heading);">${blog.title || 'Untitled Blog'}</h3>
<p style="font-size: 0.8rem; opacity: 0.7;">${new Date(blog.date).toLocaleDateString()}</p>
</div>
`;
// Optional: Click to view full blog (Modal or separate page).
// For now, let's just create a simple 'View' modal logic or leave as cards.
// The user didn't explicitly ask for a 'View' page, just 'show all blogs'.
// But 'show' usually implies readability.
card.addEventListener('click', () => openBlogModal(blog));
blogsContainer.appendChild(card);
});
}
}
function openBlogModal(blog) {
// fast modal implementation
const modal = document.createElement('div');
modal.style.cssText = `
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.9); z-index: 2000; display: flex;
justify-content: center; align-items: center; overflow: auto;
padding: 2rem;
`;
// The "Canvas" logic from Admin will likely use a fixed width container.
// We need to match that. Assuming standard web 1000px or similar.
modal.innerHTML = `
<div style="position: relative; width: 100%; max-width: 1000px; min-height: 80vh; background: ${blog.backgroundColor || '#1a1a2e'}; border-radius: 10px; box-shadow: 0 0 50px rgba(0,0,0,0.5); padding: 2rem; overflow: hidden;">
<button onclick="this.parentElement.parentElement.remove()" style="position: absolute; top: 1rem; right: 1rem; background: red; border: none; color: white; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; z-index: 100;">X</button>
<div style="position: relative; width: 100%; height: 100%;">
${blog.content}
</div>
</div>
`;
document.body.appendChild(modal);
}
|