Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Blog with Static Dataset</title> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: linear-gradient(180deg, #0b1020, #0b1022 30%, #0b1124); | |
| color: #e2e8f0; | |
| margin: 0; | |
| padding: 20px; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .blog-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); | |
| gap: 2rem; | |
| margin-top: 2rem; | |
| } | |
| .blog-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| overflow: hidden; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| transition: transform 0.3s ease; | |
| } | |
| .blog-card:hover { | |
| transform: translateY(-8px); | |
| } | |
| .blog-card-image { | |
| width: 100%; | |
| height: 200px; | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .blog-card-content { | |
| padding: 1.5rem; | |
| } | |
| .blog-card-title { | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| margin-bottom: 0.5rem; | |
| } | |
| .blog-card-date { | |
| color: #94a3b8; | |
| font-size: 0.875rem; | |
| margin-bottom: 1rem; | |
| } | |
| .blog-card-link { | |
| color: #8b5cf6; | |
| text-decoration: none; | |
| font-weight: 600; | |
| font-size: 0.875rem; | |
| text-transform: uppercase; | |
| } | |
| .search-bar { | |
| background: rgba(255, 255, 255, 0.1); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| border-radius: 25px; | |
| padding: 0.75rem 1.5rem; | |
| color: #e2e8f0; | |
| width: 100%; | |
| max-width: 400px; | |
| margin: 2rem auto; | |
| display: block; | |
| } | |
| .search-bar::placeholder { | |
| color: #94a3b8; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Blog with Dataset Integration</h1> | |
| <input type="text" class="search-bar" placeholder="Search articles..." id="searchInput"> | |
| <div class="blog-grid" id="blogGrid"> | |
| <!-- Articles will be loaded here --> | |
| </div> | |
| </div> | |
| <script> | |
| // Static dataset - you can replace this with your own data | |
| const newsDataset = [ | |
| { | |
| title: "The Future of Artificial Intelligence in 2024", | |
| description: "Exploring the latest developments in AI technology and their impact on various industries.", | |
| date: "2024-01-15", | |
| source: "Tech News", | |
| category: "Technology", | |
| image: "https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=500" | |
| }, | |
| { | |
| title: "Sustainable Business Practices That Drive Growth", | |
| description: "How companies are implementing eco-friendly strategies while maintaining profitability.", | |
| date: "2024-01-14", | |
| source: "Business Weekly", | |
| category: "Business", | |
| image: "https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=500" | |
| }, | |
| { | |
| title: "Mental Health Awareness in the Digital Age", | |
| description: "Understanding the impact of social media and technology on mental well-being.", | |
| date: "2024-01-13", | |
| source: "Health Journal", | |
| category: "Health", | |
| image: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=500" | |
| }, | |
| { | |
| title: "Climate Change Solutions: What Works", | |
| description: "Evidence-based approaches to addressing climate change at individual and corporate levels.", | |
| date: "2024-01-12", | |
| source: "Environmental Times", | |
| category: "Environment", | |
| image: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=500" | |
| }, | |
| { | |
| title: "The Rise of Remote Work Culture", | |
| description: "How remote work is reshaping company culture and employee expectations.", | |
| date: "2024-01-11", | |
| source: "Workplace Insights", | |
| category: "Work", | |
| image: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=500" | |
| }, | |
| { | |
| title: "Digital Privacy in the Age of Big Data", | |
| description: "Protecting personal information in an increasingly connected world.", | |
| date: "2024-01-10", | |
| source: "Privacy Today", | |
| category: "Technology", | |
| image: "https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?w=500" | |
| } | |
| ]; | |
| // Function to create article cards | |
| function createArticleCard(article) { | |
| return ` | |
| <article class="blog-card"> | |
| <div class="blog-card-image" style="background-image: url('${article.image}');"></div> | |
| <div class="blog-card-content"> | |
| <h3 class="blog-card-title">${article.title}</h3> | |
| <p class="blog-card-date">${article.date} • ${article.source} • ${article.category}</p> | |
| <p style="color: #94a3b8; font-size: 0.875rem; margin-bottom: 1rem;">${article.description}</p> | |
| <a href="#" class="blog-card-link">READ MORE</a> | |
| </div> | |
| </article> | |
| `; | |
| } | |
| // Function to display articles | |
| function displayArticles(articles) { | |
| const blogGrid = document.getElementById('blogGrid'); | |
| blogGrid.innerHTML = articles.map(createArticleCard).join(''); | |
| } | |
| // Function to filter articles | |
| function filterArticles(searchTerm) { | |
| const filtered = newsDataset.filter(article => | |
| article.title.toLowerCase().includes(searchTerm.toLowerCase()) || | |
| article.description.toLowerCase().includes(searchTerm.toLowerCase()) || | |
| article.category.toLowerCase().includes(searchTerm.toLowerCase()) || | |
| article.source.toLowerCase().includes(searchTerm.toLowerCase()) | |
| ); | |
| displayArticles(filtered); | |
| } | |
| // Initialize the page | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Display all articles initially | |
| displayArticles(newsDataset); | |
| // Add search functionality | |
| const searchInput = document.getElementById('searchInput'); | |
| searchInput.addEventListener('input', function(e) { | |
| filterArticles(e.target.value); | |
| }); | |
| }); | |
| // Example: Add new article to dataset | |
| function addNewArticle(article) { | |
| newsDataset.push(article); | |
| displayArticles(newsDataset); | |
| } | |
| // Example: Get articles by category | |
| function getArticlesByCategory(category) { | |
| return newsDataset.filter(article => article.category === category); | |
| } | |
| // Example: Get latest articles | |
| function getLatestArticles(count = 3) { | |
| return newsDataset | |
| .sort((a, b) => new Date(b.date) - new Date(a.date)) | |
| .slice(0, count); | |
| } | |
| </script> | |
| </body> | |
| </html> | |