Spaces:
Running
Running
| <html class="light" lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta content="width=device-width, initial-scale=1.0" name="viewport" /> | |
| <title>All Blogs - Mubashra</title> | |
| <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" | |
| rel="stylesheet" /> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=Playfair+Display:wght@700&display=swap" | |
| rel="stylesheet" /> | |
| <script> | |
| tailwind.config = { | |
| darkMode: "class", | |
| theme: { | |
| extend: { | |
| colors: { | |
| "primary": "#2D6A4F", | |
| "pastel-green-light": "#F0F7F4", | |
| "pastel-green-accent": "#D8E9E1", | |
| "background-light": "#f5f7f8", | |
| "background-dark": "#101922", | |
| }, | |
| fontFamily: { | |
| "display": ["Inter", "sans-serif"], | |
| "serif": ["Playfair Display", "serif"] | |
| }, | |
| }, | |
| }, | |
| } | |
| </script> | |
| <style> | |
| .line-clamp-2 { | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| } | |
| @keyframes float { | |
| 0% { | |
| transform: translate(0, 0) scale(1); | |
| } | |
| 33% { | |
| transform: translate(30px, -50px) scale(1.1); | |
| } | |
| 66% { | |
| transform: translate(-20px, 20px) scale(0.9); | |
| } | |
| 100% { | |
| transform: translate(0, 0) scale(1); | |
| } | |
| } | |
| .animate-blob { | |
| animation: float 15s infinite ease-in-out; | |
| } | |
| .animation-delay-2000 { | |
| animation-delay: 2s; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-display bg-background-light dark:bg-background-dark text-[#111418] dark:text-white"> | |
| <!-- Header --> | |
| <header | |
| class="sticky top-0 z-50 w-full border-b border-solid border-[#f0f2f5] dark:border-[#2a343f] bg-white/80 dark:bg-background-dark/80 backdrop-blur-md px-6 md:px-20 py-3"> | |
| <div class="max-w-[1200px] mx-auto flex items-center justify-between"> | |
| <a href="index.html" class="flex items-center gap-4 text-primary"> | |
| <div class="size-6"> | |
| <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> | |
| <path | |
| d="M42.4379 44C42.4379 44 36.0744 33.9038 41.1692 24C46.8624 12.9336 42.2078 4 42.2078 4L7.01134 4C7.01134 4 11.6577 12.932 5.96912 23.9969C0.876273 33.9029 7.27094 44 7.27094 44L42.4379 44Z" | |
| fill="currentColor"></path> | |
| </svg> | |
| </div> | |
| <h2 class="text-[#111418] dark:text-white text-xl font-bold leading-tight tracking-[-0.015em]">Mubashra | |
| </h2> | |
| </a> | |
| <div class="flex flex-1 justify-end gap-8 items-center"> | |
| <nav class="hidden md:flex items-center gap-9"> | |
| <a class="text-[#111418] dark:text-white text-sm font-medium hover:text-primary transition-colors" | |
| href="index.html">Home</a> | |
| <a class="text-primary text-sm font-medium" href="blogs.html">Blogs</a> | |
| <a class="text-[#111418] dark:text-white text-sm font-medium hover:text-primary transition-colors" | |
| href="portfolio.html">Portfolio</a> | |
| </nav> | |
| <a href="admin.html" | |
| class="flex min-w-[84px] cursor-pointer items-center justify-center rounded-lg h-10 px-5 bg-primary text-white text-sm font-bold hover:bg-primary/90 transition-all shadow-sm"> | |
| <span class="truncate">Login</span> | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="min-h-screen"> | |
| <!-- Hero Section --> | |
| <section class="relative py-20 overflow-hidden bg-[#F7FAF9] dark:bg-[#0D1510]"> | |
| <div class="absolute inset-0 z-0"> | |
| <div | |
| class="absolute top-[-10%] left-[10%] w-[35%] h-[35%] rounded-full bg-[#D1E7DD] dark:bg-[#1A3328] blur-[100px] animate-blob"> | |
| </div> | |
| <div | |
| class="absolute bottom-[-5%] right-[5%] w-[40%] h-[40%] rounded-full bg-[#E2EFDE] dark:bg-[#142A1F] blur-[120px] animate-blob animation-delay-2000"> | |
| </div> | |
| </div> | |
| <div class="relative z-10 max-w-[1200px] mx-auto px-6 md:px-20 text-center"> | |
| <h1 class="text-[#111418] dark:text-white text-5xl md:text-6xl font-serif mb-6 leading-tight"> | |
| All <span class="text-primary italic">Stories</span> | |
| </h1> | |
| <p class="text-[#4A5568] dark:text-gray-300 text-lg max-w-2xl mx-auto leading-relaxed"> | |
| Explore my thoughts on design, development, and the creative process. | |
| </p> | |
| </div> | |
| </section> | |
| <!-- All Blogs Grid --> | |
| <section class="max-w-[1200px] mx-auto px-6 md:px-20 py-16"> | |
| <div id="blogGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Blog posts will be loaded here dynamically --> | |
| </div> | |
| <div id="noBlogsMessage" class="hidden text-center py-20"> | |
| <span class="material-symbols-outlined text-8xl text-gray-300 dark:text-gray-600 mb-6">article</span> | |
| <h2 class="text-2xl font-bold text-gray-400 mb-2">No Blog Posts Yet</h2> | |
| <p class="text-gray-500 dark:text-gray-400 text-lg mb-8">Check back soon for new stories and insights! | |
| </p> | |
| <a href="admin.html" | |
| class="inline-flex items-center gap-2 px-6 py-3 bg-primary text-white font-bold rounded-lg hover:bg-primary/90 transition-all"> | |
| <span class="material-symbols-outlined">add</span> | |
| Create First Blog | |
| </a> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="border-t border-gray-100 dark:border-gray-800 py-12 px-6 md:px-20"> | |
| <div class="max-w-[1200px] mx-auto flex flex-col md:flex-row justify-between items-center gap-6"> | |
| <div class="flex items-center gap-2"> | |
| <div class="size-5 text-primary"> | |
| <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> | |
| <path | |
| d="M42.4379 44C42.4379 44 36.0744 33.9038 41.1692 24C46.8624 12.9336 42.2078 4 42.2078 4L7.01134 4C7.01134 4 11.6577 12.932 5.96912 23.9969C0.876273 33.9029 7.27094 44 7.27094 44L42.4379 44Z" | |
| fill="currentColor"></path> | |
| </svg> | |
| </div> | |
| <span class="font-bold">Mubashra</span> | |
| </div> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">© 2024 Mubashra Portfolio. Built with passion.</p> | |
| <div class="flex gap-6"> | |
| <a class="text-gray-400 hover:text-primary transition-colors" href="#"> | |
| <span class="material-symbols-outlined">alternate_email</span> | |
| </a> | |
| <a class="text-gray-400 hover:text-primary transition-colors" href="#"> | |
| <span class="material-symbols-outlined">person</span> | |
| </a> | |
| <a class="text-gray-400 hover:text-primary transition-colors" href="#"> | |
| <span class="material-symbols-outlined">share</span> | |
| </a> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Load and display all blog posts | |
| function loadBlogs() { | |
| const blogs = JSON.parse(localStorage.getItem('mubashra_blogs_v2')) || []; | |
| const blogGrid = document.getElementById('blogGrid'); | |
| const noBlogsMessage = document.getElementById('noBlogsMessage'); | |
| if (blogs.length === 0) { | |
| blogGrid.classList.add('hidden'); | |
| noBlogsMessage.classList.remove('hidden'); | |
| return; | |
| } | |
| blogGrid.classList.remove('hidden'); | |
| noBlogsMessage.classList.add('hidden'); | |
| blogGrid.innerHTML = blogs.map((blog, index) => { | |
| const date = new Date(blog.date); | |
| const formattedDate = date.toLocaleDateString('en-US', { | |
| month: 'short', | |
| day: 'numeric', | |
| year: 'numeric' | |
| }); | |
| // Extract first text content for preview | |
| const tempDiv = document.createElement('div'); | |
| tempDiv.innerHTML = blog.content; | |
| const textContent = tempDiv.textContent || tempDiv.innerText || ''; | |
| const preview = textContent.substring(0, 120) + (textContent.length > 120 ? '...' : ''); | |
| // Get first heading for title | |
| const headingEl = tempDiv.querySelector('h1, h2, h3'); | |
| const title = headingEl ? headingEl.textContent : blog.title; | |
| // Categories | |
| const categories = ['Design', 'Development', 'Minimalism', 'Technology', 'Lifestyle']; | |
| const category = categories[index % categories.length]; | |
| // Placeholder images | |
| const images = [ | |
| 'https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?w=600&h=400&fit=crop', | |
| 'https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=600&h=400&fit=crop', | |
| 'https://images.unsplash.com/photo-1493119508027-2b584f234d6c?w=600&h=400&fit=crop', | |
| 'https://images.unsplash.com/photo-1555949963-aa79dcee981c?w=600&h=400&fit=crop', | |
| 'https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=600&h=400&fit=crop', | |
| 'https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=600&h=400&fit=crop' | |
| ]; | |
| const image = images[index % images.length]; | |
| return ` | |
| <article class="group flex flex-col gap-4 cursor-pointer" onclick="viewBlog(${blog.id})"> | |
| <div class="relative w-full aspect-[16/10] overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800"> | |
| <div class="absolute inset-0 bg-center bg-cover transition-transform duration-500 group-hover:scale-110" | |
| style="background-image: url('${image}');"> | |
| </div> | |
| <div class="absolute top-4 left-4"> | |
| <span class="px-3 py-1 rounded-full bg-white/90 dark:bg-background-dark/90 text-primary text-xs font-bold shadow-sm">${category}</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col gap-2"> | |
| <div class="flex items-center gap-3 text-[#60758a] dark:text-gray-400 text-xs font-medium"> | |
| <span>${formattedDate}</span> | |
| <span class="size-1 rounded-full bg-gray-300"></span> | |
| <span>5 min read</span> | |
| </div> | |
| <h3 class="text-[#111418] dark:text-white text-xl font-bold leading-snug group-hover:text-primary transition-colors"> | |
| ${title} | |
| </h3> | |
| <p class="text-[#60758a] dark:text-gray-400 text-sm leading-relaxed line-clamp-2"> | |
| ${preview} | |
| </p> | |
| </div> | |
| </article> | |
| `; | |
| }).join(''); | |
| } | |
| // Navigate to blog view page | |
| function viewBlog(blogId) { | |
| window.location.href = `blog.html?id=${blogId}`; | |
| } | |
| // Load blogs on page load | |
| document.addEventListener('DOMContentLoaded', loadBlogs); | |
| </script> | |
| </body> | |
| </html> |