\n \n

\n\n

Your Bookmarks

\n \n \n

\n \n

\n\n

\n \n

Loading bookmarks...

\n\n

\n \n

No bookmarks yet

Save interesting posts to read later by clicking the bookmark icon.

\n Explore Posts\n

\n\n \n\n \n\n",[],[171],{"_103":179,"_95":180,"_152":181,"_154":-5,"_155":137,"_156":182,"_157":158,"_105":183,"_100":32,"_160":161,"_162":184,"_164":22,"_165":-5,"_166":185,"_98":186},"dc5ca660-30e3-11f0-a4b1-569c3dd06744","create.html","dc5ca700-30e3-11f0-a4b1-569c3dd06744",3,["D",1747241566120],"\n\n\n \n \n Write a Blog - BlogSphere\n \n \n \n\n\n

\n \n

\n\n

Create a New Blog Post

\n Title\n \n

\n \n

\n Cover Image URL\n \n

Image preview will appear here

\n \n

\n Category\n \n

\n \n

\n Tags (comma separated)\n \n

\n \n

\n Content\n \n

\n \n

\n Excerpt (Short summary)\n \n

\n \n

\n \n \n

\n\n \n\n \n\n",[],[180],{"_103":188,"_95":189,"_152":190,"_154":-5,"_155":137,"_156":191,"_157":158,"_105":192,"_100":32,"_160":161,"_162":193,"_164":22,"_165":-5,"_166":194,"_98":195},"cec2180a-30e3-11f0-ba7f-569c3dd06744","explore.html","cec218dc-30e3-11f0-ba7f-569c3dd06744",2,["D",1747241543296],"\n\n\n \n \n Explore - BlogSphere\n \n \n \n\n\n

\n \n

\n\n

Explore Posts

\n \n \n

\n\n \n\n

\n \n

Loading posts...

\n\n

\n \n

\n 1\n 2\n 3\n

\n \n

\n\n \n\n \n\n",[],[189],{"_103":197,"_95":99,"_152":198,"_154":-5,"_155":137,"_156":199,"_157":158,"_105":200,"_100":32,"_160":161,"_162":201,"_164":22,"_165":-5,"_166":202,"_98":203},"c41fc136-30e3-11f0-a5d8-569c3dd06744","c41fc1cc-30e3-11f0-a5d8-569c3dd06744",1,["D",1747241525450],"\n\n\n \n \n BlogSphere - Share Your Thoughts\n \n \n \n\n\n

\n \n

\n\n

Welcome to BlogSphere

Share your thoughts, connect with others, and explore new ideas.

\n Start Writing\n Explore Posts\n

\n\n

Featured Posts

\n View All \n

\n \n

Loading posts...

\n\n

Popular Categories

\n \n \n

\n\n \n

\n\n \n\n \n\n",[],[99],{"_103":205,"_95":206,"_152":207,"_154":-5,"_155":137,"_156":208,"_157":158,"_105":209,"_100":32,"_160":161,"_162":210,"_164":22,"_165":-5,"_166":211,"_98":212},"fb2f1942-30e3-11f0-8ece-569c3dd06744","post.html","fb2f1a00-30e3-11f0-8ece-569c3dd06744",5,["D",1747241617831],"\n\n\n \n \n Blog Post - BlogSphere\n \n \n \n\n\n

\n \n

\n\n

\n \n

Loading post...

\n\n

\n \n \n \n \n

\n\n

\n $\"Author$ \n

Author Name

Short author bio goes here...

\n \n

\n\n

Comments (0)

\n $\"User$ \n

\n \n \n

\n \n

\n\n \n\n \n \n

\n\n \n\n \n\n",[],[206],{"_103":214,"_95":215,"_152":216,"_154":-5,"_155":137,"_156":217,"_157":158,"_105":218,"_100":32,"_160":161,"_162":219,"_164":22,"_165":-5,"_166":220,"_98":221},"ed533614-30e3-11f0-8a46-569c3dd06744","profile.html","ed5336d2-30e3-11f0-8a46-569c3dd06744",4,["D",1747241594578],"\n\n\n \n \n Profile - BlogSphere\n \n \n \n\n\n

\n \n

\n\n

\n \n

\n $\"Profile$ \n

\n \n

John Doe

Passionate writer and tech enthusiast. I love sharing my thoughts on the latest technology trends and innovations.

\n 24\n Posts\n

\n 1.2k\n Followers\n

\n 384\n Following\n

\n \n \n

\n\n

\n \n \n \n \n

\n\n

\n \n

\n\n

\n \n

\n\n

\n \n

\n\n

\n \n

\n\n \n \n

\n\n \n\n \n\n",[],[215],{"_103":223,"_95":224,"_152":225,"_154":-5,"_155":137,"_156":226,"_157":158,"_105":227,"_100":32,"_160":228,"_162":229,"_164":22,"_165":-5,"_166":230,"_98":231},"bebee14e-30e4-11f0-9d7e-569c3dd06744","script.js","bebee216-30e4-11f0-9d7e-569c3dd06744",8,["D",1747241945925],"script","// DOM Elements\nconst navLinks = document.getElementById('navLinks');\nconst openMenu = document.getElementById('openMenu');\nconst closeMenu = document.getElementById('closeMenu');\n\n// Sample data for the blog\nlet blogPosts = localStorage.getItem('blogPosts') ? \n JSON.parse(localStorage.getItem('blogPosts')) : \n [\n {\n id: 1,\n title: \"10 Essential Tips for Modern Web Development\",\n excerpt: \"Discover the most important practices and tools that every web developer should know in 2023.\",\n content: `

Web development is constantly evolving, and staying up-to-date with the latest practices is essential for creating modern, efficient websites. Here are 10 tips that every web developer should know:

1. Embrace Modern JavaScript

ES6+ features like arrow functions, destructuring, and async/await make your code cleaner and more maintainable. Don't be afraid to use them!

2. Optimize for Performance

Performance is crucial for user experience. Use tools like Lighthouse to identify and fix performance issues.

3. Adopt a Component-Based Approach

Whether you're using a framework or vanilla JS, thinking in components helps create reusable, maintainable code.

4. Prioritize Accessibility

Web content should be accessible to everyone. Use semantic HTML, provide alt text for images, and ensure keyboard navigation works.

5. Implement Responsive Design

With the variety of devices used to access the web, responsive design is no longer optional.

6. Use CSS Custom Properties

CSS variables make your stylesheets more maintainable and allow for dynamic theme changes.

7. Adopt Progressive Enhancement

Build a solid foundation that works for everyone, then enhance the experience for users with modern browsers.

8. Implement Proper Error Handling

Anticipate and handle errors gracefully to provide a better user experience.

9. Write Tests

Testing helps catch bugs early and ensures your code works as expected.

10. Stay Curious and Keep Learning

The web development landscape is always changing. Dedicate time to learning new tools and techniques.

`,\n coverImage: \"https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1472&q=80\",\n category: \"technology\",\n tags: [\"web development\", \"javascript\", \"css\", \"html\", \"tips\"],\n author: {\n id: 1,\n name: \"John Doe\",\n avatar: \"https://randomuser.me/api/portraits/men/32.jpg\",\n bio: \"Full-stack developer with a passion for creating beautiful, functional websites.\"\n },\n date: \"2023-05-15\",\n readTime: \"8 min read\",\n likes: 124,\n comments: [\n {\n id: 1,\n author: {\n id: 2,\n name: \"Jane Smith\",\n avatar: \"https://randomuser.me/api/portraits/women/44.jpg\"\n },\n text: \"Great article! I especially liked the point about accessibility. It's often overlooked but so important.\",\n date: \"2023-05-16\",\n likes: 8\n },\n {\n id: 2,\n author: {\n id: 3,\n name: \"Mike Johnson\",\n avatar: \"https://randomuser.me/api/portraits/men/46.jpg\"\n },\n text: \"I would add that learning about web security is also crucial these days. Maybe that could be tip #11?\",\n date: \"2023-05-17\",\n likes: 12\n }\n ]\n },\n {\n id: 2,\n title: \"The Ultimate Guide to Bali: Hidden Gems and Local Favorites\",\n excerpt: \"Explore the less-known sides of Bali with this comprehensive guide to the island's best-kept secrets.\",\n content: `

Bali, known as the Island of the Gods, is a popular destination for travelers seeking beautiful beaches, vibrant culture, and spiritual experiences. While places like Kuta, Seminyak, and Ubud are well-known, there are many hidden gems that offer a more authentic experience.

Sidemen Valley: Bali's Best-Kept Secret

Located in East Bali, Sidemen Valley offers stunning landscapes of rice terraces, river valleys, and Mount Agung in the background. Unlike the more famous Tegallalang rice terraces, Sidemen remains relatively untouched by mass tourism.

Nyang Nyang Beach: Secluded Paradise

This hidden beach requires a bit of effort to reach - a 15-minute drive from Uluwatu followed by a 15-20 minute hike down a cliff. The reward? A nearly empty stretch of white sand and crystal-clear water.

Bali's Secret Waterfalls

While Gitgit and Tegenungan waterfalls see plenty of visitors, waterfalls like Leke Leke, Tibumana, and Tukad Cepung offer equally beautiful scenery with far fewer crowds.

Local Warungs: Authentic Balinese Cuisine

Skip the tourist restaurants and try these local favorites:

Warung Babi Guling Pak Malen in Seminyak for the best suckling pig
Warung Mak Beng in Sanur for traditional fish soup
Nasi Ayam Kedewatan Ibu Mangku in Ubud for the best chicken rice

Sacred Temples Off the Tourist Trail

While Tanah Lot and Uluwatu temples are magnificent, consider visiting these less crowded but equally spiritual places:

Pura Lempuyang: Famous for its \"Gates of Heaven\"
Pura Gunung Kawi: An 11th-century temple complex with rock-cut shrines
Pura Taman Ayun: A royal temple surrounded by a moat

Practical Tips for Authentic Experiences

To truly experience the magic of Bali:

Learn a few basic Indonesian phrases
Hire a local guide for insider knowledge
Stay in a homestay to experience Balinese family life
Visit during local ceremonies (but be respectful)
Explore by scooter to discover places not on the tourist map

Bali has so much more to offer beyond its famous attractions. By venturing off the beaten path, you'll discover the true essence of this magical island.

`,\n coverImage: \"https://images.unsplash.com/photo-1537996194471-e657df975ab4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1738&q=80\",\n category: \"travel\",\n tags: [\"bali\", \"travel guide\", \"indonesia\", \"hidden gems\", \"travel tips\"],\n author: {\n id: 4,\n name: \"Sarah Williams\",\n avatar: \"https://randomuser.me/api/portraits/women/64.jpg\",\n bio: \"Travel writer and photographer with a love for exploring off-the-beaten-path destinations.\"\n },\n date: \"2023-06-02\",\n readTime: \"10 min read\",\n likes: 89,\n comments: [\n {\n id: 3,\n author: {\n id: 5,\n name: \"David Chen\",\n avatar: \"https://randomuser.me/api/portraits/men/22.jpg\"\n },\n text: \"I visited Sidemen Valley based on your recommendation and it was absolutely breathtaking! Thank you for sharing these hidden gems.\",\n date: \"2023-06-05\",\n likes: 5\n }\n ]\n },\n {\n id: 3,\n title: \"Mastering the Art of Sourdough Bread: A Beginner's Guide\",\n excerpt: \"Learn how to create delicious sourdough bread at home with this step-by-step guide for beginners.\",\n content: `

Sourdough bread has experienced a renaissance in recent years, and for good reason. Its complex flavors, chewy texture, and beautiful crust make it a favorite among bread enthusiasts. While it may seem intimidating at first, making sourdough bread at home is a rewarding process that anyone can master with a bit of patience and practice.

Creating Your Sourdough Starter

The heart of sourdough bread is the starter - a fermented mixture of flour and water that contains wild yeast and beneficial bacteria. Here's how to create your own:

Day 1: Mix 50g whole wheat flour with 50g water in a glass jar. Cover loosely and let sit at room temperature for 24 hours.
Day 2: Discard half the mixture. Add 50g all-purpose flour and 50g water. Mix well and let sit for another 24 hours.
Days 3-7: Repeat the process from Day 2. By day 5-7, your starter should be doubling in size within 8 hours of feeding and showing plenty of bubbles.

Basic Sourdough Bread Recipe

Ingredients:

500g bread flour
350g water
100g active sourdough starter
10g salt

Method:

Autolyse: Mix flour and water, let rest for 30 minutes.
Add starter: Incorporate the active starter into the dough.
Add salt: After 30 minutes, add salt and mix well.
Bulk fermentation: Over 4-6 hours, perform 4-6 sets of stretch and folds.
Pre-shape: Gently shape into a round and let rest for 20 minutes.
Final shape: Shape into a tight ball or batard.
Cold proof: Place in a floured banneton and refrigerate for 12-24 hours.
Bake: Preheat oven with Dutch oven to 500°F (260°C). Score dough, bake covered for 20 minutes, then uncovered for 20-25 minutes at 450°F (230°C).

Troubleshooting Common Issues

Flat Bread with No Oven Spring

Possible causes: Overproofed dough, weak starter, insufficient tension during shaping.

Dense, Gummy Crumb

Possible causes: Underproofed dough, insufficient gluten development, underbaked bread.

Overly Sour Flavor

Possible causes: Long fermentation at warm temperatures, using starter that hasn't been fed recently.

Tips for Success

Maintain a consistent feeding schedule for your starter
Use a kitchen scale for accurate measurements
Pay attention to dough temperature - it affects fermentation time
Be patient and observe how your dough changes
Keep notes on each bake to track your progress

Remember, sourdough bread making is as much art as science. Each loaf is a learning experience, and even \"failures\" are usually delicious! With practice, you'll develop an intuition for the process and be creating beautiful, flavorful loaves in no time.

`,\n coverImage: \"https://images.unsplash.com/photo-1585478259715-1c093a7b70d3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1471&q=80\",\n category: \"food\",\n tags: [\"baking\", \"sourdough\", \"bread\", \"recipe\", \"cooking\"],\n author: {\n id: 6,\n name: \"Emily Johnson\",\n avatar: \"https://randomuser.me/api/portraits/women/33.jpg\",\n bio: \"Home baker, cookbook author, and instructor specializing in artisanal bread.\"\n },\n date: \"2023-04-18\",\n readTime: \"12 min read\",\n likes: 156,\n comments: [\n {\n id: 4,\n author: {\n id: 7,\n name: \"Thomas Brown\",\n avatar: \"https://randomuser.me/api/portraits/men/5.jpg\"\n },\n text: \"I've been struggling with getting good oven spring, but your troubleshooting section helped me identify the issue. My starter wasn't active enough!\",\n date: \"2023-04-20\",\n likes: 3\n },\n {\n id: 5,\n author: {\n id: 8,\n name: \"Lisa Garcia\",\n avatar: \"https://randomuser.me/api/portraits/women/8.jpg\"\n },\n text: \"Do you have any recommendations for whole wheat sourdough? I'd like to try a healthier version.\",\n date: \"2023-04-22\",\n likes: 2\n },\n {\n id: 6,\n author: {\n id: 6,\n name: \"Emily Johnson\",\n avatar: \"https://randomuser.me/api/portraits/women/33.jpg\"\n },\n text: \"@Lisa Garcia - Absolutely! Start by replacing 20% of the bread flour with whole wheat, and increase the water by about 5%. Whole wheat absorbs more water than white flour. You can gradually increase the whole wheat percentage as you get comfortable with the process.\",\n date: \"2023-04-23\",\n likes: 7\n }\n ]\n }\n ];\n\nlet users = localStorage.getItem('users') ? \n JSON.parse(localStorage.getItem('users')) : \n [\n {\n id: 1,\n name: \"John Doe\",\n avatar: \"https://randomuser.me/api/portraits/men/32.jpg\",\n bio: \"Full-stack developer with a passion for creating beautiful, functional websites.\",\n email: \"john.doe@example.com\",\n website: \"https://johndoe.com\",\n social: {\n twitter: \"johndoe\",\n instagram: \"johndoe_dev\",\n linkedin: \"johndoe\"\n },\n followers: 1243,\n following: 384,\n posts: [1]\n },\n {\n id: 4,\n name: \"Sarah Williams\",\n avatar: \"https://randomuser.me/api/portraits/women/64.jpg\",\n bio: \"Travel writer and photographer with a love for exploring off-the-beaten-path destinations.\",\n email: \"sarah.williams@example.com\",\n website: \"https://sarahwilliams.com\",\n social: {\n twitter: \"sarahwilliams\",\n instagram: \"sarahwilliams_travel\",\n linkedin: \"sarahwilliams\"\n },\n followers: 2567,\n following: 512,\n posts: [2]\n },\n {\n id: 6,\n name: \"Emily Johnson\",\n avatar: \"https://randomuser.me/api/portraits/women/33.jpg\",\n bio: \"Home baker, cookbook author, and instructor specializing in artisanal bread.\",\n email: \"emily.johnson@example.com\",\n website: \"https://emilyjohnson.com\",\n social: {\n twitter: \"emilyjohnson\",\n instagram: \"emilyjohnson_bakes\",\n linkedin: \"emilyjohnson\"\n },\n followers: 1876,\n following: 423,\n posts: [3]\n }\n ];\n\n// Current user (for demo purposes)\nlet currentUser = localStorage.getItem('currentUser') ? \n JSON.parse(localStorage.getItem('currentUser')) : \n {\n id: 9,\n name: \"Alex Morgan\",\n avatar: \"https://randomuser.me/api/portraits/men/1.jpg\",\n bio: \"Tech enthusiast and blogger. I love sharing my thoughts on the latest gadgets and innovations.\",\n email: \"alex.morgan@example.com\",\n website: \"https://alexmorgan.com\",\n social: {\n twitter: \"alexmorgan\",\n instagram: \"alexmorgan_tech\",\n linkedin: \"alexmorgan\"\n },\n followers: 856,\n following: 267,\n posts: [],\n bookmarks: [1, 3],\n likes: [2]\n };\n\n// Save data to localStorage\nfunction saveData() {\n localStorage.setItem('blogPosts', JSON.stringify(blogPosts));\n localStorage.setItem('users', JSON.stringify(users));\n localStorage.setItem('currentUser', JSON.stringify(currentUser));\n}\n\n// Mobile menu toggle\nif (openMenu) {\n openMenu.addEventListener('click', () => {\n navLinks.classList.add('active');\n });\n}\n\nif (closeMenu) {\n closeMenu.addEventListener('click', () => {\n navLinks.classList.remove('active');\n });\n}\n\n// Function to format date\nfunction formatDate(dateString) {\n const options = { year: 'numeric', month: 'long', day: 'numeric' };\n return new Date(dateString).toLocaleDateString(undefined, options);\n}\n\n// Function to create post card HTML\nfunction createPostCard(post) {\n return `\n

\n \n $\"${post.title}\"$ \n \n

\n ${post.category}\n

\n ${post.title}\n

${post.excerpt}

\n $\"${post.author.name}\"$ \n ${post.author.name}\n

${formatDate(post.date)}

\n `;\n}\n\n// Function to create author card HTML\nfunction createAuthorCard(user) {\n return `\n

\n $\"${user.name}\"$ \n

${user.name}

${user.bio}

\n ${user.posts.length}\n Posts\n

\n ${user.followers}\n Followers\n

\n \n

\n `;\n}\n\n// Function to create comment HTML\nfunction createCommentHTML(comment) {\n return `\n

\n $\"${comment.author.name}\"$ \n

\n ${comment.author.name}\n ${formatDate(comment.date)}\n

${comment.text}

\n \n \n

\n `;\n}\n\n// Home page functionality\nconst featuredPostsContainer = document.getElementById('featuredPosts');\nconst trendingAuthorsContainer = document.getElementById('trendingAuthors');\n\nif (featuredPostsContainer) {\n // Display featured posts\n featuredPostsContainer.innerHTML = '';\n \n // Sort posts by likes (most popular first)\n const featuredPosts = [...blogPosts].sort((a, b) => b.likes - a.likes).slice(0, 3);\n \n featuredPosts.forEach(post => {\n featuredPostsContainer.innerHTML += createPostCard(post);\n });\n}\n\nif (trendingAuthorsContainer) {\n // Display trending authors\n trendingAuthorsContainer.innerHTML = '';\n \n // Sort users by followers (most popular first)\n const trendingAuthors = [...users].sort((a, b) => b.followers - a.followers).slice(0, 4);\n \n trendingAuthors.forEach(user => {\n trendingAuthorsContainer.innerHTML += createAuthorCard(user);\n });\n}\n\n// Explore page functionality\nconst allPostsContainer = document.getElementById('allPosts');\nconst categoryFilter = document.getElementById('categoryFilter');\nconst sortFilter = document.getElementById('sortFilter');\nconst searchInput = document.getElementById('searchInput');\nconst searchButton = document.getElementById('searchButton');\nconst viewButtons = document.querySelectorAll('.view-btn');\nconst prevPageBtn = document.getElementById('prevPage');\nconst nextPageBtn = document.getElementById('nextPage');\nconst pageNumbers = document.getElementById('pageNumbers');\n\nlet currentPage = 1;\nconst postsPerPage = 6;\nlet filteredPosts = [...blogPosts];\n\n// Function to filter and display posts\nfunction filterAndDisplayPosts() {\n // Apply category filter\n if (categoryFilter && categoryFilter.value !== 'all') {\n filteredPosts = blogPosts.filter(post => post.category === categoryFilter.value);\n } else {\n filteredPosts = [...blogPosts];\n }\n \n // Apply search filter if search input exists and has value\n if (searchInput && searchInput.value.trim() !== '') {\n const searchTerm = searchInput.value.trim().toLowerCase();\n filteredPosts = filteredPosts.filter(post => \n post.title.toLowerCase().includes(searchTerm) || \n post.excerpt.toLowerCase().includes(searchTerm) || \n post.content.toLowerCase().includes(searchTerm) ||\n post.author.name.toLowerCase().includes(searchTerm) ||\n post.category.toLowerCase().includes(searchTerm) ||\n post.tags.some(tag => tag.toLowerCase().includes(searchTerm))\n );\n }\n \n // Apply sort filter\n if (sortFilter) {\n switch(sortFilter.value) {\n case 'recent':\n filteredPosts.sort((a, b) => new Date(b.date) - new Date(a.date));\n break;\n case 'popular':\n filteredPosts.sort((a, b) => b.likes - a.likes);\n break;\n case 'comments':\n filteredPosts.sort((a, b) => b.comments.length - a.comments.length);\n break;\n }\n }\n \n // Update pagination\n updatePagination();\n \n // Display posts for current page\n displayPostsForCurrentPage();\n}\n\n// Function to update pagination\nfunction updatePagination() {\n if (!pageNumbers) return;\n \n const totalPages = Math.ceil(filteredPosts.length / postsPerPage);\n \n // Reset current page if it's beyond the total pages\n if (currentPage > totalPages) {\n currentPage = 1;\n }\n \n // Update page numbers\n pageNumbers.innerHTML = '';\n for (let i = 1; i <= totalPages; i++) {\n pageNumbers.innerHTML += `${i}`;\n }\n \n // Add click event to page numbers\n const pageNumberElements = pageNumbers.querySelectorAll('span');\n pageNumberElements.forEach(element => {\n element.addEventListener('click', () => {\n currentPage = parseInt(element.textContent);\n displayPostsForCurrentPage();\n updatePagination();\n });\n });\n \n // Update prev/next buttons\n if (prevPageBtn) {\n prevPageBtn.disabled = currentPage === 1;\n }\n \n if (nextPageBtn) {\n nextPageBtn.disabled = currentPage === totalPages || totalPages === 0;\n }\n}\n\n// Function to display posts for current page\nfunction displayPostsForCurrentPage() {\n if (!allPostsContainer) return;\n \n const startIndex = (currentPage - 1) * postsPerPage;\n const endIndex = startIndex + postsPerPage;\n const postsToDisplay = filteredPosts.slice(startIndex, endIndex);\n \n allPostsContainer.innerHTML = '';\n \n if (postsToDisplay.length === 0) {\n allPostsContainer.innerHTML = '

No posts found matching your criteria.

';\n return;\n }\n \n postsToDisplay.forEach(post => {\n allPostsContainer.innerHTML += createPostCard(post);\n });\n}\n\n// Initialize explore page\nif (allPostsContainer) {\n filterAndDisplayPosts();\n \n // Add event listeners\n if (categoryFilter) {\n categoryFilter.addEventListener('change', () => {\n currentPage = 1;\n filterAndDisplayPosts();\n });\n }\n \n if (sortFilter) {\n sortFilter.addEventListener('change', filterAndDisplayPosts);\n }\n \n if (searchInput && searchButton) {\n searchButton.addEventListener('click', () => {\n currentPage = 1;\n filterAndDisplayPosts();\n });\n \n searchInput.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') {\n currentPage = 1;\n filterAndDisplayPosts();\n e.preventDefault();\n }\n });\n }\n \n if (prevPageBtn) {\n prevPageBtn.addEventListener('click', () => {\n if (currentPage > 1) {\n currentPage--;\n displayPostsForCurrentPage();\n updatePagination();\n }\n });\n }\n \n if (nextPageBtn) {\n nextPageBtn.addEventListener('click', () => {\n const totalPages = Math.ceil(filteredPosts.length / postsPerPage);\n if (currentPage < totalPages) {\n currentPage++;\n displayPostsForCurrentPage();\n updatePagination();\n }\n });\n }\n \n // View toggle (grid/list)\n if (viewButtons) {\n viewButtons.forEach(button => {\n button.addEventListener('click', () => {\n // Remove active class from all buttons\n viewButtons.forEach(btn => btn.classList.remove('active'));\n \n // Add active class to clicked button\n button.classList.add('active');\n \n // Update view\n const viewType = button.getAttribute('data-view');\n allPostsContainer.className = `posts-container ${viewType}-view`;\n });\n });\n }\n}\n\n// Create post page functionality\nconst blogForm = document.getElementById('blogForm');\nconst postTitleInput = document.getElementById('postTitle');\nconst postCoverImageInput = document.getElementById('postCoverImage');\nconst imagePreview = document.getElementById('imagePreview');\nconst postCategoryInput = document.getElementById('postCategory');\nconst postTagsInput = document.getElementById('postTags');\nconst postContentEditor = document.getElementById('postContent');\nconst postExcerptInput = document.getElementById('postExcerpt');\nconst saveDraftBtn = document.getElementById('saveDraft');\nconst editorButtons = document.querySelectorAll('.editor-toolbar button');\n\n// Preview cover image\nif (postCoverImageInput && imagePreview) {\n postCoverImageInput.addEventListener('input', () => {\n const imageUrl = postCoverImageInput.value.trim();\n if (imageUrl) {\n imagePreview.innerHTML = ` $\"Cover$ `;\n } else {\n imagePreview.innerHTML = '

Image preview will appear here

';\n }\n });\n}\n\n// Rich text editor functionality\nif (editorButtons && postContentEditor) {\n editorButtons.forEach(button => {\n button.addEventListener('click', () => {\n const command = button.getAttribute('data-command');\n \n if (command === 'createLink' || command === 'insertImage') {\n const url = prompt(command === 'createLink' ? 'Enter link URL:' : 'Enter image URL:');\n if (url) {\n document.execCommand(command, false, url);\n }\n } else if (command === 'h2' || command === 'h3') {\n document.execCommand('formatBlock', false, `<${command}>`);\n } else {\n document.execCommand(command, false, null);\n }\n \n postContentEditor.focus();\n });\n });\n}\n\n// Submit blog form\nif (blogForm) {\n blogForm.addEventListener('submit', (e) => {\n e.preventDefault();\n \n if (!postTitleInput.value.trim() || !postCategoryInput.value || !postContentEditor.innerHTML.trim()) {\n alert('Please fill in all required fields: title, category, and content.');\n return;\n }\n \n // Create new blog post\n const newPost = {\n id: blogPosts.length > 0 ? Math.max(...blogPosts.map(post => post.id)) + 1 : 1,\n title: postTitleInput.value.trim(),\n excerpt: postExcerptInput.value.trim() || postTitleInput.value.trim(),\n content: postContentEditor.innerHTML,\n coverImage: postCoverImageInput.value.trim() || 'https://via.placeholder.com/800x400?text=Blog+Post+Image',\n category: postCategoryInput.value,\n tags: postTagsInput.value.split(',').map(tag => tag.trim()).filter(tag => tag),\n author: {\n id: currentUser.id,\n name: currentUser.name,\n avatar: currentUser.avatar,\n bio: currentUser.bio\n },\n date: new Date().toISOString().split('T')[0],\n readTime: Math.ceil(postContentEditor.innerText.split(' ').length / 200) + ' min read',\n likes: 0,\n comments: []\n };\n \n // Add post to blog posts array\n blogPosts.push(newPost);\n \n // Add post to current user's posts\n currentUser.posts.push(newPost.id);\n \n // Save data\n saveData();\n \n // Redirect to the new post\n alert('Blog post published successfully!');\n window.location.href = `post.html?id=${newPost.id}`;\n });\n}\n\n// Save draft functionality\nif (saveDraftBtn) {\n saveDraftBtn.addEventListener('click', () => {\n const draftTitle = postTitleInput.value.trim() || 'Untitled Draft';\n const draftContent = postContentEditor.innerHTML;\n \n // Get existing drafts or initialize empty array\n const drafts = JSON.parse(localStorage.getItem('drafts') || '[]');\n \n // Create new draft\n const newDraft = {\n id: Date.now(),\n title: draftTitle,\n content: draftContent,\n coverImage: postCoverImageInput.value.trim(),\n category: postCategoryInput.value,\n tags: postTagsInput.value,\n excerpt: postExcerptInput.value.trim(),\n date: new Date().toISOString().split('T')[0]\n };\n \n // Add draft to drafts array\n drafts.push(newDraft);\n \n // Save drafts\n localStorage.setItem('drafts', JSON.stringify(drafts));\n \n alert('Draft saved successfully!');\n });\n}\n\n// Individual blog post page functionality\nconst blogPostContainer = document.getElementById('blogPost');\nconst likeBtn = document.getElementById('likeBtn');\nconst likeCount = document.getElementById('likeCount');\nconst commentBtn = document.getElementById('commentBtn');\nconst commentCount = document.getElementById('commentCount');\nconst bookmarkBtn = document.getElementById('bookmarkBtn');\nconst shareBtn = document.getElementById('shareBtn');\nconst authorName = document.getElementById('authorName');\nconst authorBio = document.getElementById('authorBio');\nconst authorAvatar = document.getElementById('authorAvatar');\nconst followBtn = document.getElementById('followBtn');\nconst totalComments = document.getElementById('totalComments');\nconst commentsContainer = document.getElementById('commentsContainer');\nconst commentInput = document.getElementById('commentInput');\nconst submitComment = document.getElementById('submitComment');\nconst relatedPosts = document.getElementById('relatedPosts');\nconst shareModal = document.getElementById('shareModal');\nconst shareLink = document.getElementById('shareLink');\nconst copyLink = document.getElementById('copyLink');\n\n// Get post ID from URL\nconst urlParams = new URLSearchParams(window.location.search);\nconst postId = urlParams.get('id');\n\n// Function to display blog post\nfunction displayBlogPost() {\n if (!blogPostContainer || !postId) return;\n \n // Find post by ID\n const post = blogPosts.find(p => p.id === parseInt(postId));\n \n if (!post) {\n blogPostContainer.innerHTML = '

Post not found.

';\n return;\n }\n \n // Display post\n blogPostContainer.innerHTML = `\n

${post.title}

\n $\"${post.author.name}\"$ \n

\n ${post.author.name}\n ${formatDate(post.date)} · ${post.readTime}\n

\n ${post.category}\n ${post.tags.map(tag => `${tag}`).join('')}\n

\n $\"${post.title}\"$ \n

\n ${post.content}\n

\n `;\n \n // Update like button and count\n if (likeBtn && likeCount) {\n likeCount.textContent = post.likes;\n \n // Check if current user has liked this post\n if (currentUser.likes.includes(post.id)) {\n likeBtn.classList.add('active');\n likeBtn.innerHTML = ` ${post.likes}`;\n }\n \n // Add like functionality\n likeBtn.addEventListener('click', () => {\n if (likeBtn.classList.contains('active')) {\n // Unlike\n post.likes--;\n const index = currentUser.likes.indexOf(post.id);\n if (index > -1) {\n currentUser.likes.splice(index, 1);\n }\n likeBtn.classList.remove('active');\n likeBtn.innerHTML = ` ${post.likes}`;\n } else {\n // Like\n post.likes++;\n currentUser.likes.push(post.id);\n likeBtn.classList.add('active');\n likeBtn.innerHTML = ` ${post.likes}`;\n }\n \n // Update like count\n likeCount.textContent = post.likes;\n \n // Save data\n saveData();\n });\n }\n \n // Update comment count\n if (commentCount) {\n commentCount.textContent = post.comments.length;\n }\n \n // Update bookmark button\n if (bookmarkBtn) {\n // Check if current user has bookmarked this post\n if (currentUser.bookmarks.includes(post.id)) {\n bookmarkBtn.classList.add('active');\n bookmarkBtn.innerHTML = '';\n }\n \n // Add bookmark functionality\n bookmarkBtn.addEventListener('click', () => {\n if (bookmarkBtn.classList.contains('active')) {\n // Remove bookmark\n const index = currentUser.bookmarks.indexOf(post.id);\n if (index > -1) {\n currentUser.bookmarks.splice(index, 1);\n }\n bookmarkBtn.classList.remove('active');\n bookmarkBtn.innerHTML = '';\n } else {\n // Add bookmark\n currentUser.bookmarks.push(post.id);\n bookmarkBtn.classList.add('active');\n bookmarkBtn.innerHTML = '';\n }\n \n // Save data\n saveData();\n });\n }\n \n // Update author section\n if (authorName && authorBio && authorAvatar) {\n authorName.textContent = post.author.name;\n authorBio.textContent = post.author.bio;\n authorAvatar.src = post.author.avatar;\n \n // Add follow functionality\n if (followBtn) {\n // Find author in users array\n const author = users.find(user => user.id === post.author.id);\n \n if (author) {\n // Check if current user is following this author\n const isFollowing = author.followers > 0 && Math.random() > 0.5; // Simulating follow status\n \n if (isFollowing) {\n followBtn.textContent = 'Following';\n followBtn.classList.add('following');\n }\n \n followBtn.addEventListener('click', () => {\n if (followBtn.classList.contains('following')) {\n // Unfollow\n author.followers--;\n followBtn.textContent = 'Follow';\n followBtn.classList.remove('following');\n } else {\n // Follow\n author.followers++;\n followBtn.textContent = 'Following';\n followBtn.classList.add('following');\n }\n \n // Save data\n saveData();\n });\n }\n }\n }\n \n // Display comments\n if (commentsContainer && totalComments) {\n totalComments.textContent = post.comments.length;\n \n commentsContainer.innerHTML = '';\n post.comments.forEach(comment => {\n commentsContainer.innerHTML += createCommentHTML(comment);\n });\n \n // Add like functionality to comments\n const likeCommentBtns = document.querySelectorAll('.like-comment');\n likeCommentBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n const commentId = parseInt(btn.getAttribute('data-id'));\n const comment = post.comments.find(c => c.id === commentId);\n \n if (comment) {\n comment.likes++;\n btn.innerHTML = ` ${comment.likes}`;\n btn.classList.add('active');\n \n // Save data\n saveData();\n }\n });\n });\n }\n \n // Add comment functionality\n if (commentInput && submitComment) {\n submitComment.addEventListener('click', () => {\n const commentText = commentInput.value.trim();\n \n if (!commentText) {\n alert('Please enter a comment.');\n return;\n }\n \n // Create new comment\n const newComment = {\n id: post.comments.length > 0 ? Math.max(...post.comments.map(c => c.id)) + 1 : 1,\n author: {\n id: currentUser.id,\n name: currentUser.name,\n avatar: currentUser.avatar\n },\n text: commentText,\n date: new Date().toISOString().split('T')[0],\n likes: 0\n };\n \n // Add comment to post\n post.comments.push(newComment);\n \n // Update comment count\n if (commentCount) {\n commentCount.textContent = post.comments.length;\n }\n \n if (totalComments) {\n totalComments.textContent = post.comments.length;\n }\n \n // Add comment to DOM\n commentsContainer.innerHTML += createCommentHTML(newComment);\n \n // Clear input\n commentInput.value = '';\n \n // Save data\n saveData();\n \n // Add like functionality to new comment\n const likeCommentBtn = document.querySelector(`.like-comment[data-id=\"${newComment.id}\"]`);\n if (likeCommentBtn) {\n likeCommentBtn.addEventListener('click', () => {\n newComment.likes++;\n likeCommentBtn.innerHTML = ` ${newComment.likes}`;\n likeCommentBtn.classList.add('active');\n \n // Save data\n saveData();\n });\n }\n });\n }\n \n // Display related posts\n if (relatedPosts) {\n // Find posts in the same category\n const related = blogPosts\n .filter(p => p.id !== post.id && p.category === post.category)\n .slice(0, 3);\n \n if (related.length === 0) {\n // If no posts in the same category, show random posts\n related.push(...blogPosts\n .filter(p => p.id !== post.id)\n .sort(() => 0.5 - Math.random())\n .slice(0, 3));\n }\n \n relatedPosts.innerHTML = '';\n related.forEach(relatedPost => {\n relatedPosts.innerHTML += createPostCard(relatedPost);\n });\n }\n \n // Share functionality\n if (shareBtn && shareModal) {\n shareBtn.addEventListener('click', () => {\n shareModal.style.display = 'block';\n \n if (shareLink) {\n shareLink.value = window.location.href;\n }\n });\n \n // Close modal\n const closeBtn = shareModal.querySelector('.close-btn');\n if (closeBtn) {\n closeBtn.addEventListener('click', () => {\n shareModal.style.display = 'none';\n });\n }\n \n // Close modal when clicking outside\n window.addEventListener('click', (e) => {\n if (e.target === shareModal) {\n shareModal.style.display = 'none';\n }\n });\n \n // Copy link\n if (copyLink && shareLink) {\n copyLink.addEventListener('click', () => {\n shareLink.select();\n document.execCommand('copy');\n copyLink.textContent = 'Copied!';\n \n setTimeout(() => {\n copyLink.textContent = 'Copy';\n }, 2000);\n });\n }\n }\n}\n\n// Initialize blog post page\ndisplayBlogPost();\n\n// Profile page functionality\nconst profileName = document.getElementById('profileName');\nconst profileBio = document.getElementById('profileBio');\nconst profileAvatar = document.getElementById('profileAvatar');\nconst postsCount = document.getElementById('postsCount');\nconst followersCount = document.getElementById('followersCount');\nconst followingCount = document.getElementById('followingCount');\nconst editProfileBtn = document.getElementById('editProfileBtn');\nconst editProfileModal = document.getElementById('editProfileModal');\nconst editProfileForm = document.getElementById('editProfileForm');\nconst cancelEditBtn = document.getElementById('cancelEditBtn');\nconst userPosts = document.getElementById('userPosts');\nconst userDrafts = document.getElementById('userDrafts');\nconst userLiked = document.getElementById('userLiked');\nconst userComments = document.getElementById('userComments');\nconst profileTabs = document.querySelectorAll('.tab-btn');\nconst tabContents = document.querySelectorAll('.tab-content');\n\n// Function to display user profile\nfunction displayUserProfile() {\n if (!profileName || !profileBio || !profileAvatar) return;\n \n // Display user info\n profileName.textContent = currentUser.name;\n profileBio.textContent = currentUser.bio;\n profileAvatar.src = currentUser.avatar;\n \n if (postsCount) {\n postsCount.textContent = currentUser.posts.length;\n }\n \n if (followersCount) {\n followersCount.textContent = currentUser.followers;\n }\n \n if (followingCount) {\n followingCount.textContent = currentUser.following;\n }\n \n // Display user posts\n if (userPosts) {\n userPosts.innerHTML = '';\n \n const posts = blogPosts.filter(post => currentUser.posts.includes(post.id));\n \n if (posts.length === 0) {\n userPosts.innerHTML = '

You haven\\'t published any posts yet.

';\n } else {\n posts.forEach(post => {\n userPosts.innerHTML += createPostCard(post);\n });\n }\n }\n \n // Display user drafts\n if (userDrafts) {\n userDrafts.innerHTML = '';\n \n const drafts = JSON.parse(localStorage.getItem('drafts') || '[]');\n \n if (drafts.length === 0) {\n userDrafts.innerHTML = '

You don\\'t have any drafts.

';\n } else {\n drafts.forEach(draft => {\n userDrafts.innerHTML += `\n

\n ${draft.title}\n

${draft.excerpt || 'No excerpt available'}

Last edited: ${formatDate(draft.date)}

\n `;\n });\n }\n }\n \n // Display liked posts\n if (userLiked) {\n userLiked.innerHTML = '';\n \n const likedPosts = blogPosts.filter(post => currentUser.likes.includes(post.id));\n \n if (likedPosts.length === 0) {\n userLiked.innerHTML = '

You haven\\'t liked any posts yet.

';\n } else {\n likedPosts.forEach(post => {\n userLiked.innerHTML += createPostCard(post);\n });\n }\n }\n \n // Display user comments\n if (userComments) {\n userComments.innerHTML = '';\n \n // Find all comments by the current user\n const comments = [];\n blogPosts.forEach(post => {\n post.comments.forEach(comment => {\n if (comment.author.id === currentUser.id) {\n comments.push({\n ...comment,\n postId: post.id,\n postTitle: post.title\n });\n }\n });\n });\n \n if (comments.length === 0) {\n userComments.innerHTML = '

You haven\\'t commented on any posts yet.

';\n } else {\n comments.forEach(comment => {\n userComments.innerHTML += `\n

\n $\"${comment.author.name}\"$ \n

\n You commented on ${comment.postTitle}\n ${formatDate(comment.date)}\n

${comment.text}

\n `;\n });\n }\n }\n}\n\n// Initialize profile page\ndisplayUserProfile();\n\n// Tab functionality\nif (profileTabs && tabContents) {\n profileTabs.forEach(tab => {\n tab.addEventListener('click', () => {\n // Remove active class from all tabs\n profileTabs.forEach(t => t.classList.remove('active'));\n \n // Add active class to clicked tab\n tab.classList.add('active');\n \n // Hide all tab contents\n tabContents.forEach(content => content.classList.remove('active'));\n \n // Show corresponding tab content\n const tabId = tab.getAttribute('data-tab');\n document.getElementById(`${tabId}Tab`).classList.add('active');\n });\n });\n}\n\n// Edit profile functionality\nif (editProfileBtn && editProfileModal) {\n editProfileBtn.addEventListener('click', () => {\n editProfileModal.style.display = 'block';\n \n // Populate form with current user data\n document.getElementById('editName').value = currentUser.name;\n document.getElementById('editBio').value = currentUser.bio;\n document.getElementById('editEmail').value = currentUser.email;\n document.getElementById('editWebsite').value = currentUser.website;\n \n if (currentUser.social) {\n document.getElementById('editTwitter').value = currentUser.social.twitter || '';\n document.getElementById('editInstagram').value = currentUser.social.instagram || '';\n document.getElementById('editLinkedin').value = currentUser.social.linkedin || '';\n }\n });\n \n // Close modal\n const closeBtn = editProfileModal.querySelector('.close-btn');\n if (closeBtn) {\n closeBtn.addEventListener('click', () => {\n editProfileModal.style.display = 'none';\n });\n }\n \n if (cancelEditBtn) {\n cancelEditBtn.addEventListener('click', () => {\n editProfileModal.style.display = 'none';\n });\n }\n \n // Close modal when clicking outside\n window.addEventListener('click', (e) => {\n if (e.target === editProfileModal) {\n editProfileModal.style.display = 'none';\n }\n });\n \n // Submit edit profile form\n if (editProfileForm) {\n editProfileForm.addEventListener('submit', (e) => {\n e.preventDefault();\n \n // Update user data\n currentUser.name = document.getElementById('editName').value.trim();\n currentUser.bio = document.getElementById('editBio').value.trim();\n currentUser.email = document.getElementById('editEmail').value.trim();\n currentUser.website = document.getElementById('editWebsite').value.trim();\n \n currentUser.social = {\n twitter: document.getElementById('editTwitter').value.trim(),\n instagram: document.getElementById('editInstagram').value.trim(),\n linkedin: document.getElementById('editLinkedin').value.trim()\n };\n \n // Save data\n saveData();\n \n // Update profile display\n displayUserProfile();\n \n // Close modal\n editProfileModal.style.display = 'none';\n \n alert('Profile updated successfully!');\n });\n }\n}\n\n// Bookmarks page functionality\nconst bookmarkedPosts = document.getElementById('bookmarkedPosts');\nconst noBookmarks = document.getElementById('noBookmarks');\nconst searchBookmarks = document.getElementById('searchBookmarks');\nconst searchBookmarksBtn = document.getElementById('searchBookmarksBtn');\nconst filterDropdownLinks = document.querySelectorAll('.filter-dropdown-content a');\n\n// Function to display bookmarked posts\nfunction displayBookmarkedPosts(filter = 'all', searchTerm = '') {\n if (!bookmarkedPosts) return;\n \n // Get bookmarked posts\n let posts = blogPosts.filter(post => currentUser.bookmarks.includes(post.id));\n \n // Apply filter\n if (filter !== 'all') {\n if (filter === 'recent') {\n posts.sort((a, b) => new Date(b.date) - new Date(a.date));\n } else {\n posts = posts.filter(post => post.category === filter);\n }\n }\n \n // Apply search\n if (searchTerm) {\n posts = posts.filter(post => \n post.title.toLowerCase().includes(searchTerm) || \n post.excerpt.toLowerCase().includes(searchTerm) || \n post.content.toLowerCase().includes(searchTerm) ||\n post.author.name.toLowerCase().includes(searchTerm) ||\n post.category.toLowerCase().includes(searchTerm) ||\n post.tags.some(tag => tag.toLowerCase().includes(searchTerm))\n );\n }\n \n // Display posts\n if (posts.length === 0) {\n if (noBookmarks) {\n noBookmarks.style.display = 'block';\n }\n bookmarkedPosts.innerHTML = '';\n } else {\n if (noBookmarks) {\n noBookmarks.style.display = 'none';\n }\n \n bookmarkedPosts.innerHTML = '';\n posts.forEach(post => {\n bookmarkedPosts.innerHTML += createPostCard(post);\n });\n }\n}\n\n// Initialize bookmarks page\ndisplayBookmarkedPosts();\n\n// Add search functionality\nif (searchBookmarks && searchBookmarksBtn) {\n searchBookmarksBtn.addEventListener('click', () => {\n const searchTerm = searchBookmarks.value.trim().toLowerCase();\n displayBookmarkedPosts('all', searchTerm);\n });\n \n searchBookmarks.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') {\n const searchTerm = searchBookmarks.value.trim().toLowerCase();\n displayBookmarkedPosts('all', searchTerm);\n e.preventDefault();\n }\n });\n}\n\n// Add filter functionality\nif (filterDropdownLinks) {\n filterDropdownLinks.forEach(link => {\n link.addEventListener('click', (e) => {\n e.preventDefault();\n \n const filter = link.getAttribute('data-filter');\n const searchTerm = searchBookmarks ? searchBookmarks.value.trim().toLowerCase() : '';\n \n displayBookmarkedPosts(filter, searchTerm);\n });\n });\n}",[],[224],{"_103":233,"_95":234,"_152":235,"_154":-5,"_155":137,"_156":236,"_157":158,"_105":237,"_100":32,"_160":161,"_162":238,"_164":22,"_165":-5,"_166":239,"_98":240},"517e0d44-30e4-11f0-87b0-569c3dd06744","styles.css","517e0e0c-30e4-11f0-87b0-569c3dd06744",7,["D",1747241762632],"/* Global Styles */\n:root {\n --primary-color: #4a6cf7;\n --primary-dark: #3a56d4;\n --secondary-color: #6c757d;\n --light-color: #f8f9fa;\n --dark-color: #212529;\n --success-color: #28a745;\n --danger-color: #dc3545;\n --warning-color: #ffc107;\n --info-color: #17a2b8;\n --gray-100: #f8f9fa;\n --gray-200: #e9ecef;\n --gray-300: #dee2e6;\n --gray-400: #ced4da;\n --gray-500: #adb5bd;\n --gray-600: #6c757d;\n --gray-700: #495057;\n --gray-800: #343a40;\n --gray-900: #212529;\n --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n --border-radius: 0.25rem;\n --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);\n --transition: all 0.3s ease;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: var(--font-family);\n line-height: 1.6;\n color: var(--dark-color);\n background-color: #f5f7fb;\n}\n\na {\n text-decoration: none;\n color: var(--primary-color);\n transition: var(--transition);\n}\n\na:hover {\n color: var(--primary-dark);\n}\n\nul {\n list-style: none;\n}\n\nimg {\n max-width: 100%;\n}\n\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 1rem;\n}\n\n.btn {\n display: inline-block;\n padding: 0.5rem 1.5rem;\n border: none;\n border-radius: var(--border-radius);\n cursor: pointer;\n font-weight: 500;\n transition: var(--transition);\n text-align: center;\n}\n\n.primary-btn {\n background-color: var(--primary-color);\n color: white;\n}\n\n.primary-btn:hover {\n background-color: var(--primary-dark);\n color: white;\n}\n\n.secondary-btn {\n background-color: var(--gray-200);\n color: var(--gray-800);\n}\n\n.secondary-btn:hover {\n background-color: var(--gray-300);\n}\n\n.section-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 1.5rem;\n}\n\n.section-header h2 {\n font-size: 1.5rem;\n color: var(--gray-800);\n}\n\n.view-all {\n font-size: 0.9rem;\n display: flex;\n align-items: center;\n}\n\n.view-all i {\n margin-left: 0.25rem;\n}\n\n.loading {\n text-align: center;\n padding: 2rem;\n color: var(--gray-600);\n}\n\n/* Header & Navigation */\nheader {\n background-color: white;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n position: sticky;\n top: 0;\n z-index: 100;\n}\n\n.navbar {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 2rem;\n max-width: 1400px;\n margin: 0 auto;\n}\n\n.logo h1 {\n font-size: 1.5rem;\n color: var(--primary-color);\n}\n\n.nav-links ul {\n display: flex;\n}\n\n.nav-links ul li {\n margin-left: 1.5rem;\n}\n\n.nav-links ul li a {\n color: var(--gray-700);\n font-weight: 500;\n display: flex;\n align-items: center;\n}\n\n.nav-links ul li a i {\n margin-right: 0.5rem;\n}\n\n.nav-links ul li a.active {\n color: var(--primary-color);\n}\n\n.nav-links ul li a:hover {\n color: var(--primary-color);\n}\n\n#openMenu, #closeMenu {\n display: none;\n font-size: 1.5rem;\n cursor: pointer;\n}\n\n/* Hero Section */\n.hero {\n background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80');\n background-size: cover;\n background-position: center;\n color: white;\n padding: 5rem 2rem;\n text-align: center;\n}\n\n.hero-content {\n max-width: 800px;\n margin: 0 auto;\n}\n\n.hero-content h1 {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\n.hero-content p {\n font-size: 1.2rem;\n margin-bottom: 2rem;\n}\n\n.hero-buttons {\n display: flex;\n justify-content: center;\n gap: 1rem;\n}\n\n/* Featured Posts Section */\n.featured-posts {\n padding: 3rem 2rem;\n max-width: 1400px;\n margin: 0 auto;\n}\n\n.posts-container {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 2rem;\n}\n\n.post-card {\n background-color: white;\n border-radius: 10px;\n overflow: hidden;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n transition: transform 0.3s ease;\n}\n\n.post-card:hover {\n transform: translateY(-5px);\n}\n\n.post-image {\n height: 200px;\n overflow: hidden;\n}\n\n.post-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.5s ease;\n}\n\n.post-card:hover .post-image img {\n transform: scale(1.05);\n}\n\n.post-content {\n padding: 1.5rem;\n}\n\n.post-category {\n display: inline-block;\n background-color: var(--primary-color);\n color: white;\n padding: 0.25rem 0.75rem;\n border-radius: 20px;\n font-size: 0.8rem;\n margin-bottom: 0.75rem;\n}\n\n.post-title {\n font-size: 1.25rem;\n margin-bottom: 0.75rem;\n line-height: 1.4;\n}\n\n.post-excerpt {\n color: var(--gray-600);\n margin-bottom: 1rem;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.post-meta {\n display: flex;\n justify-content: space-between;\n align-items: center;\n color: var(--gray-600);\n font-size: 0.9rem;\n}\n\n.post-author {\n display: flex;\n align-items: center;\n}\n\n.author-avatar {\n width: 30px;\n height: 30px;\n border-radius: 50%;\n margin-right: 0.5rem;\n}\n\n.post-date {\n color: var(--gray-500);\n}\n\n/* Categories Section */\n.categories {\n padding: 3rem 2rem;\n background-color: white;\n}\n\n.categories-container {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n gap: 1.5rem;\n max-width: 1400px;\n margin: 0 auto;\n}\n\n.category-card {\n background-color: var(--gray-100);\n border-radius: 10px;\n padding: 1.5rem;\n text-align: center;\n transition: var(--transition);\n border: 1px solid var(--gray-200);\n}\n\n.category-card:hover {\n transform: translateY(-5px);\n box-shadow: var(--box-shadow);\n background-color: var(--primary-color);\n color: white;\n}\n\n.category-card i {\n font-size: 2rem;\n margin-bottom: 1rem;\n color: var(--primary-color);\n}\n\n.category-card:hover i {\n color: white;\n}\n\n.category-card h3 {\n font-size: 1.1rem;\n}\n\n/* Trending Authors Section */\n.trending-authors {\n padding: 3rem 2rem;\n max-width: 1400px;\n margin: 0 auto;\n}\n\n.authors-container {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n gap: 2rem;\n}\n\n.author-card {\n background-color: white;\n border-radius: 10px;\n padding: 1.5rem;\n text-align: center;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n transition: var(--transition);\n}\n\n.author-card:hover {\n transform: translateY(-5px);\n}\n\n.author-card .author-avatar {\n width: 80px;\n height: 80px;\n border-radius: 50%;\n margin: 0 auto 1rem;\n}\n\n.author-card .author-name {\n font-size: 1.2rem;\n margin-bottom: 0.5rem;\n}\n\n.author-card .author-bio {\n color: var(--gray-600);\n margin-bottom: 1rem;\n font-size: 0.9rem;\n}\n\n.author-stats {\n display: flex;\n justify-content: center;\n gap: 1rem;\n margin-bottom: 1rem;\n}\n\n.author-stat {\n text-align: center;\n}\n\n.stat-value {\n font-weight: bold;\n color: var(--primary-color);\n}\n\n.stat-label {\n font-size: 0.8rem;\n color: var(--gray-600);\n}\n\n.follow-btn {\n width: 100%;\n}\n\n/* Footer */\nfooter {\n background-color: var(--gray-800);\n color: white;\n padding-top: 3rem;\n}\n\n.footer-content {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 2rem;\n}\n\n.footer-section h2 {\n font-size: 1.2rem;\n margin-bottom: 1.5rem;\n}\n\n.footer-section.about p {\n margin-bottom: 1rem;\n}\n\n.social-links {\n display: flex;\n gap: 1rem;\n}\n\n.social-links a {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n background-color: rgba(255, 255, 255, 0.1);\n border-radius: 50%;\n color: white;\n transition: var(--transition);\n}\n\n.social-links a:hover {\n background-color: var(--primary-color);\n}\n\n.footer-section.links ul li {\n margin-bottom: 0.75rem;\n}\n\n.footer-section.links ul li a {\n color: var(--gray-400);\n transition: var(--transition);\n}\n\n.footer-section.links ul li a:hover {\n color: white;\n padding-left: 0.5rem;\n}\n\n.footer-section.contact p {\n display: flex;\n align-items: center;\n margin-bottom: 1rem;\n}\n\n.footer-section.contact p i {\n margin-right: 0.75rem;\n color: var(--primary-color);\n}\n\n.footer-bottom {\n background-color: rgba(0, 0, 0, 0.2);\n text-align: center;\n padding: 1.5rem 0;\n margin-top: 3rem;\n}\n\n/* Explore Page */\n.explore-header {\n background-color: white;\n padding: 2rem;\n text-align: center;\n margin-bottom: 2rem;\n}\n\n.explore-header h1 {\n margin-bottom: 1.5rem;\n}\n\n.search-container {\n max-width: 600px;\n margin: 0 auto;\n display: flex;\n}\n\n.search-container input {\n flex: 1;\n padding: 0.75rem 1rem;\n border: 1px solid var(--gray-300);\n border-radius: var(--border-radius) 0 0 var(--border-radius);\n font-size: 1rem;\n}\n\n.search-container button {\n background-color: var(--primary-color);\n color: white;\n border: none;\n padding: 0 1.5rem;\n border-radius: 0 var(--border-radius) var(--border-radius) 0;\n cursor: pointer;\n}\n\n.filter-section {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 2rem;\n background-color: white;\n margin-bottom: 2rem;\n border-radius: var(--border-radius);\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n max-width: 1400px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.filter-container {\n display: flex;\n gap: 1.5rem;\n}\n\n.filter-group {\n display: flex;\n align-items: center;\n}\n\n.filter-group label {\n margin-right: 0.5rem;\n font-weight: 500;\n}\n\n.filter-group select {\n padding: 0.5rem;\n border: 1px solid var(--gray-300);\n border-radius: var(--border-radius);\n background-color: white;\n}\n\n.view-toggle {\n display: flex;\n gap: 0.5rem;\n}\n\n.view-btn {\n background-color: var(--gray-200);\n border: none;\n width: 40px;\n height: 40px;\n border-radius: var(--border-radius);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: var(--transition);\n}\n\n.view-btn.active {\n background-color: var(--primary-color);\n color: white;\n}\n\n.posts-section {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 2rem;\n}\n\n.grid-view {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 2rem;\n}\n\n.list-view {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n}\n\n.list-view .post-card {\n display: flex;\n height: 200px;\n}\n\n.list-view .post-image {\n width: 300px;\n height: 100%;\n}\n\n.list-view .post-content {\n flex: 1;\n}\n\n.pagination {\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 3rem 0;\n gap: 1rem;\n}\n\n.pagination button {\n background-color: white;\n border: 1px solid var(--gray-300);\n padding: 0.5rem 1rem;\n border-radius: var(--border-radius);\n cursor: pointer;\n transition: var(--transition);\n display: flex;\n align-items: center;\n}\n\n.pagination button:hover:not([disabled]) {\n background-color: var(--primary-color);\n color: white;\n}\n\n.pagination button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.pagination button i {\n margin: 0 0.25rem;\n}\n\n#pageNumbers {\n display: flex;\n gap: 0.5rem;\n}\n\n#pageNumbers span {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n cursor: pointer;\n transition: var(--transition);\n}\n\n#pageNumbers span.current-page {\n background-color: var(--primary-color);\n color: white;\n}\n\n/* Create Post Page */\n.create-post {\n max-width: 900px;\n margin: 2rem auto;\n padding: 2rem;\n background-color: white;\n border-radius: 10px;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n}\n\n.blog-form {\n margin-top: 2rem;\n}\n\n.form-group {\n margin-bottom: 1.5rem;\n}\n\n.form-group label {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 500;\n}\n\n.form-group input,\n.form-group select,\n.form-group textarea {\n width: 100%;\n padding: 0.75rem;\n border: 1px solid var(--gray-300);\n border-radius: var(--border-radius);\n font-size: 1rem;\n font-family: inherit;\n}\n\n.image-preview {\n margin-top: 1rem;\n border: 1px dashed var(--gray-300);\n padding: 1rem;\n text-align: center;\n border-radius: var(--border-radius);\n min-height: 150px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.image-preview img {\n max-height: 200px;\n}\n\n.editor-toolbar {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n margin-bottom: 0.5rem;\n border: 1px solid var(--gray-300);\n border-bottom: none;\n padding: 0.5rem;\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n}\n\n.editor-toolbar button {\n background-color: white;\n border: 1px solid var(--gray-300);\n width: 40px;\n height: 40px;\n border-radius: var(--border-radius);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: var(--transition);\n}\n\n.editor-toolbar button:hover {\n background-color: var(--gray-200);\n}\n\n.editor-content {\n border: 1px solid var(--gray-300);\n min-height: 300px;\n padding: 1rem;\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n outline: none;\n overflow-y: auto;\n}\n\n.form-actions {\n display: flex;\n justify-content: flex-end;\n gap: 1rem;\n margin-top: 2rem;\n}\n\n/* Profile Page */\n.profile-header {\n margin-bottom: 2rem;\n}\n\n.profile-cover {\n height: 200px;\n background: linear-gradient(to right, #4a6cf7, #6a11cb);\n position: relative;\n}\n\n.edit-cover {\n position: absolute;\n bottom: 1rem;\n right: 1rem;\n}\n\n.edit-btn {\n background-color: rgba(255, 255, 255, 0.8);\n border: none;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: var(--transition);\n}\n\n.edit-btn:hover {\n background-color: white;\n}\n\n.profile-info {\n max-width: 1000px;\n margin: -50px auto 0;\n padding: 0 2rem;\n display: flex;\n flex-wrap: wrap;\n gap: 2rem;\n}\n\n.profile-avatar {\n position: relative;\n}\n\n.profile-avatar img {\n width: 150px;\n height: 150px;\n border-radius: 50%;\n border: 5px solid white;\n background-color: white;\n}\n\n.edit-avatar {\n position: absolute;\n bottom: 0;\n right: 0;\n}\n\n.profile-details {\n flex: 1;\n min-width: 300px;\n}\n\n.profile-details h1 {\n margin-bottom: 0.5rem;\n}\n\n.profile-bio {\n color: var(--gray-600);\n margin-bottom: 1.5rem;\n}\n\n.profile-stats {\n display: flex;\n gap: 2rem;\n margin-bottom: 1.5rem;\n}\n\n.profile-actions {\n display: flex;\n gap: 1rem;\n}\n\n.profile-content {\n max-width: 1000px;\n margin: 0 auto;\n padding: 0 2rem;\n}\n\n.profile-tabs {\n display: flex;\n border-bottom: 1px solid var(--gray-300);\n margin-bottom: 2rem;\n}\n\n.tab-btn {\n padding: 1rem 1.5rem;\n background: none;\n border: none;\n border-bottom: 2px solid transparent;\n cursor: pointer;\n font-weight: 500;\n color: var(--gray-600);\n transition: var(--transition);\n}\n\n.tab-btn.active {\n color: var(--primary-color);\n border-bottom-color: var(--primary-color);\n}\n\n.tab-content {\n display: none;\n}\n\n.tab-content.active {\n display: block;\n}\n\n/* Modal */\n.modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 1000;\n overflow-y: auto;\n}\n\n.modal-content {\n background-color: white;\n margin: 5% auto;\n width: 90%;\n max-width: 600px;\n border-radius: 10px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);\n animation: modalFadeIn 0.3s;\n}\n\n@keyframes modalFadeIn {\n from {\n opacity: 0;\n transform: translateY(-50px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1.5rem;\n border-bottom: 1px solid var(--gray-300);\n}\n\n.modal-header h2 {\n margin: 0;\n}\n\n.close-btn {\n background: none;\n border: none;\n font-size: 1.5rem;\n cursor: pointer;\n color: var(--gray-600);\n}\n\n.modal-body {\n padding: 1.5rem;\n}\n\n.social-input {\n display: flex;\n align-items: center;\n margin-bottom: 1rem;\n}\n\n.social-input i {\n width: 40px;\n color: var(--gray-600);\n}\n\n/* Blog Post Page */\n.post-page {\n max-width: 900px;\n margin: 2rem auto;\n padding: 0 2rem;\n}\n\n.blog-post {\n background-color: white;\n border-radius: 10px;\n overflow: hidden;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n margin-bottom: 2rem;\n}\n\n.post-header {\n padding: 2rem;\n}\n\n.post-title {\n font-size: 2rem;\n margin-bottom: 1rem;\n line-height: 1.3;\n}\n\n.post-meta {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 1.5rem;\n color: var(--gray-600);\n}\n\n.post-author {\n display: flex;\n align-items: center;\n}\n\n.post-author img {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n margin-right: 0.75rem;\n}\n\n.author-info {\n display: flex;\n flex-direction: column;\n}\n\n.author-name {\n font-weight: 500;\n}\n\n.post-date {\n font-size: 0.9rem;\n}\n\n.post-category-tag {\n display: flex;\n gap: 0.5rem;\n flex-wrap: wrap;\n}\n\n.category-tag {\n background-color: var(--gray-200);\n color: var(--gray-700);\n padding: 0.25rem 0.75rem;\n border-radius: 20px;\n font-size: 0.8rem;\n}\n\n.post-featured-image {\n width: 100%;\n max-height: 500px;\n object-fit: cover;\n}\n\n.post-body {\n padding: 2rem;\n}\n\n.post-content {\n line-height: 1.8;\n font-size: 1.1rem;\n}\n\n.post-content p {\n margin-bottom: 1.5rem;\n}\n\n.post-content h2, .post-content h3 {\n margin: 2rem 0 1rem;\n}\n\n.post-content img {\n max-width: 100%;\n border-radius: 5px;\n margin: 1.5rem 0;\n}\n\n.post-content blockquote {\n border-left: 4px solid var(--primary-color);\n padding-left: 1rem;\n margin: 1.5rem 0;\n color: var(--gray-700);\n font-style: italic;\n}\n\n.post-actions {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 2rem;\n background-color: white;\n border-radius: 10px;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n margin-bottom: 2rem;\n}\n\n.action-buttons {\n display: flex;\n gap: 1.5rem;\n}\n\n.action-btn {\n background: none;\n border: none;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n color: var(--gray-600);\n cursor: pointer;\n transition: var(--transition);\n}\n\n.action-btn:hover {\n color: var(--primary-color);\n}\n\n.action-btn.active {\n color: var(--primary-color);\n}\n\n.action-btn.like-btn.active i {\n color: var(--danger-color);\n}\n\n.action-btn.bookmark-btn.active i {\n color: var(--warning-color);\n}\n\n.author-section {\n background-color: white;\n border-radius: 10px;\n padding: 1.5rem;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n margin-bottom: 2rem;\n}\n\n.author-card {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.author-info {\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\n.author-avatar {\n width: 70px;\n height: 70px;\n border-radius: 50%;\n}\n\n.author-details h3 {\n margin-bottom: 0.5rem;\n}\n\n.author-bio {\n color: var(--gray-600);\n font-size: 0.9rem;\n}\n\n.comments-section {\n background-color: white;\n border-radius: 10px;\n padding: 1.5rem;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n margin-bottom: 2rem;\n}\n\n.comments-section h2 {\n margin-bottom: 1.5rem;\n}\n\n.comment-form {\n display: flex;\n gap: 1rem;\n margin-bottom: 2rem;\n}\n\n.user-avatar {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n}\n\n.comment-input-container {\n flex: 1;\n display: flex;\n flex-direction: column;\n}\n\n.comment-input-container textarea {\n width: 100%;\n padding: 0.75rem;\n border: 1px solid var(--gray-300);\n border-radius: var(--border-radius);\n resize: none;\n height: 100px;\n margin-bottom: 1rem;\n font-family: inherit;\n}\n\n.comment-input-container button {\n align-self: flex-end;\n}\n\n.comment {\n display: flex;\n gap: 1rem;\n margin-bottom: 1.5rem;\n padding-bottom: 1.5rem;\n border-bottom: 1px solid var(--gray-200);\n}\n\n.comment:last-child {\n border-bottom: none;\n margin-bottom: 0;\n padding-bottom: 0;\n}\n\n.comment-content {\n flex: 1;\n}\n\n.comment-header {\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.5rem;\n}\n\n.comment-author {\n font-weight: 500;\n}\n\n.comment-date {\n font-size: 0.8rem;\n color: var(--gray-500);\n}\n\n.comment-text {\n margin-bottom: 0.75rem;\n line-height: 1.6;\n}\n\n.comment-actions {\n display: flex;\n gap: 1rem;\n}\n\n.comment-action {\n background: none;\n border: none;\n color: var(--gray-600);\n font-size: 0.9rem;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.comment-action:hover {\n color: var(--primary-color);\n}\n\n.related-posts {\n margin-bottom: 3rem;\n}\n\n.related-posts h2 {\n margin-bottom: 1.5rem;\n}\n\n.share-options {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n gap: 1rem;\n margin-bottom: 1.5rem;\n}\n\n.share-option {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 1rem;\n border-radius: var(--border-radius);\n color: white;\n transition: var(--transition);\n}\n\n.share-option:hover {\n opacity: 0.9;\n transform: translateY(-3px);\n}\n\n.share-option.facebook {\n background-color: #3b5998;\n}\n\n.share-option.twitter {\n background-color: #1da1f2;\n}\n\n.share-option.linkedin {\n background-color: #0077b5;\n}\n\n.share-option.whatsapp {\n background-color: #25d366;\n}\n\n.share-option i {\n font-size: 1.5rem;\n margin-bottom: 0.5rem;\n}\n\n.share-link {\n display: flex;\n gap: 0.5rem;\n}\n\n.share-link input {\n flex: 1;\n padding: 0.75rem;\n border: 1px solid var(--gray-300);\n border-radius: var(--border-radius);\n font-size: 0.9rem;\n}\n\n/* Bookmarks Page */\n.bookmarks-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 2rem;\n background-color: white;\n margin-bottom: 2rem;\n border-radius: 10px;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n max-width: 1400px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.bookmarks-header h1 {\n margin: 0;\n}\n\n.bookmarks-actions {\n display: flex;\n gap: 1rem;\n}\n\n.filter-dropdown {\n position: relative;\n}\n\n.filter-btn {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n background-color: var(--gray-200);\n border: none;\n padding: 0.5rem 1rem;\n border-radius: var(--border-radius);\n cursor: pointer;\n}\n\n.filter-dropdown-content {\n display: none;\n position: absolute;\n right: 0;\n top: 100%;\n background-color: white;\n min-width: 200px;\n box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);\n z-index: 1;\n border-radius: var(--border-radius);\n margin-top: 0.5rem;\n}\n\n.filter-dropdown-content a {\n display: block;\n padding: 0.75rem 1rem;\n color: var(--gray-700);\n transition: var(--transition);\n}\n\n.filter-dropdown-content a:hover {\n background-color: var(--gray-100);\n}\n\n.filter-dropdown:hover .filter-dropdown-content {\n display: block;\n}\n\n.bookmarks-section {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 2rem;\n}\n\n.no-bookmarks {\n max-width: 600px;\n margin: 3rem auto;\n text-align: center;\n}\n\n.empty-state {\n background-color: white;\n padding: 3rem;\n border-radius: 10px;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n}\n\n.empty-icon {\n font-size: 4rem;\n color: var(--gray-400);\n margin-bottom: 1.5rem;\n}\n\n.empty-state h2 {\n margin-bottom: 1rem;\n}\n\n.empty-state p {\n color: var(--gray-600);\n margin-bottom: 1.5rem;\n}\n\n/* Responsive Styles */\n@media (max-width: 992px) {\n .hero-content h1 {\n font-size: 2rem;\n }\n \n .hero-content p {\n font-size: 1rem;\n }\n \n .filter-section {\n flex-direction: column;\n gap: 1rem;\n align-items: flex-start;\n }\n \n .filter-container {\n width: 100%;\n flex-direction: column;\n gap: 1rem;\n }\n \n .filter-group {\n width: 100%;\n }\n \n .filter-group select {\n width: 100%;\n }\n \n .view-toggle {\n align-self: flex-end;\n }\n \n .author-card {\n flex-direction: column;\n gap: 1.5rem;\n text-align: center;\n }\n \n .author-info {\n flex-direction: column;\n }\n \n .follow-btn {\n width: 100%;\n }\n}\n\n@media (max-width: 768px) {\n .navbar {\n padding: 1rem;\n }\n \n .nav-links {\n position: fixed;\n top: 0;\n right: -300px;\n width: 300px;\n height: 100vh;\n background-color: white;\n z-index: 1000;\n transition: 0.5s;\n box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);\n }\n \n .nav-links.active {\n right: 0;\n }\n \n .nav-links ul {\n flex-direction: column;\n padding: 2rem;\n }\n \n .nav-links ul li {\n margin: 1rem 0;\n }\n \n #openMenu {\n display: block;\n }\n \n #closeMenu {\n display: block;\n position: absolute;\n top: 1rem;\n right: 1rem;\n }\n \n .hero {\n padding: 3rem 1rem;\n }\n \n .hero-buttons {\n flex-direction: column;\n }\n \n .featured-posts, .categories, .trending-authors {\n padding: 2rem 1rem;\n }\n \n .footer-content {\n grid-template-columns: 1fr;\n text-align: center;\n }\n \n .social-links {\n justify-content: center;\n }\n \n .footer-section.contact p {\n justify-content: center;\n }\n \n .profile-info {\n flex-direction: column;\n align-items: center;\n text-align: center;\n }\n \n .profile-stats {\n justify-content: center;\n }\n \n .profile-actions {\n justify-content: center;\n }\n \n .profile-tabs {\n overflow-x: auto;\n white-space: nowrap;\n padding-bottom: 0.5rem;\n }\n \n .tab-btn {\n padding: 0.75rem 1rem;\n }\n \n .comment-form {\n flex-direction: column;\n }\n \n .user-avatar {\n align-self: center;\n }\n}\n\n@media (max-width: 576px) {\n .posts-container {\n grid-template-columns: 1fr;\n }\n \n .categories-container {\n grid-template-columns: repeat(2, 1fr);\n }\n \n .authors-container {\n grid-template-columns: 1fr;\n }\n \n .post-header {\n padding: 1.5rem;\n }\n \n .post-title {\n font-size: 1.5rem;\n }\n \n .post-meta {\n flex-direction: column;\n align-items: flex-start;\n gap: 0.5rem;\n }\n \n .post-body {\n padding: 1.5rem;\n }\n \n .post-content {\n font-size: 1rem;\n }\n \n .action-buttons {\n width: 100%;\n justify-content: space-between;\n }\n \n .comment {\n flex-direction: column;\n }\n \n .comment-header {\n flex-direction: column;\n gap: 0.25rem;\n }\n \n .editor-toolbar {\n overflow-x: auto;\n padding-bottom: 0.5rem;\n }\n}",[],[234],"files",[149,169,178,187,196,204,213,222,232],"counts",{"_245":32,"_246":199,"_247":32,"_248":249},"pulls","branches","forks","envVars",{"_250":32,"_251":32},"count","emptyCount","contents",[],{"_103":197,"_95":99,"_152":198,"_154":-5,"_155":137,"_156":199,"_157":158,"_105":255,"_100":32,"_160":161,"_162":201,"_164":22,"_165":-5,"_98":256},["D",1747241525450],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_93":94,"_95":96,"_97":43,"_98":99,"_101":265,"_161":270,"_273":274,"_277":278,"_281":-7,"_282":32,"_283":22},{"_103":104,"_95":96,"_105":266,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":-5,"_117":32,"_16":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":267,"_131":268,"_134":269,"_146":22},["D",1747241127734],{"_93":94,"_129":130},{"_93":94,"_133":130,"_14":113},{"_100":136,"_95":43,"_103":137,"_138":104,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":96,"_145":94},{"_103":197,"_95":99,"_152":198,"_154":-5,"_155":137,"_156":199,"_157":158,"_105":271,"_100":32,"_160":161,"_162":201,"_164":22,"_165":-5,"_98":272},["D",1747241525450],[99],"history",[275],{"_103":197,"_155":137,"_152":198,"_95":99,"_162":201,"_160":161,"_100":32,"_154":-5,"_105":276,"_156":199,"_165":-5},["D",1747241525450],"versions",[279],{"_161":275,"_280":-5},"previous","versionNumber","page","hasNext","actionData","errors"]

Your Bookmarks

No bookmarks yet

Create a New Blog Post

Explore Posts

Welcome to BlogSphere

Featured Posts

Popular Categories

Technology

Travel

Food

Lifestyle

Health

Business

Trending Authors

Author Name

Comments (0)

Related Posts

Share This Post

John Doe

Edit Profile

1. Embrace Modern JavaScript

2. Optimize for Performance

3. Adopt a Component-Based Approach

4. Prioritize Accessibility

5. Implement Responsive Design

6. Use CSS Custom Properties

7. Adopt Progressive Enhancement

8. Implement Proper Error Handling

9. Write Tests

10. Stay Curious and Keep Learning

Sidemen Valley: Bali's Best-Kept Secret

Nyang Nyang Beach: Secluded Paradise

Bali's Secret Waterfalls

Local Warungs: Authentic Balinese Cuisine

Sacred Temples Off the Tourist Trail

Practical Tips for Authentic Experiences

Creating Your Sourdough Starter

Basic Sourdough Bread Recipe

Ingredients:

Method:

Troubleshooting Common Issues

Flat Bread with No Oven Spring

Dense, Gummy Crumb

Overly Sour Flavor

Tips for Success

\n ${post.title}\n

${user.name}

${post.title}

\n ${draft.title}\n

Danchi

Blog

History for index.html