Hugging Face's logo

Spaces:
krigeta
/
ii
Running

App Files Community
ii / index.html
krigeta's picture
krigeta
Add 2 files
004f1b5 verified
Raw
History Blame Contribute Delete
46.6 kB
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
 <b:include data='blog' name='all-head-content'/>
 <title><data:blog.pageTitle/></title>
<meta charset='utf-8'/>
 <meta content='width=device-width, initial-scale=1' name='viewport'/>
 <meta content='blogger' name='generator'/>
<!-- Favicon -->
 <link expr:href='data:blog.url' rel='canonical'/>
 <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css' rel='stylesheet'/>
<!-- Theme CSS -->
 <style type='text/css'>
 /* Base Styles */
 :root {
 --primary: #4f46e5;
 --primary-dark: #7c3aed;
 --secondary: #10b981;
 --secondary-dark: #34d399;
 --text: #1f2937;
 --text-dark: #f3f4f6;
 --bg: #ffffff;
 --bg-dark: #111827;
 --card-bg: #f9fafb;
 --card-bg-dark: #1f2937;
 --border: #e5e7eb;
 --border-dark: #374151;
 }
.dark {
 --primary: var(--primary-dark);
 --secondary: var(--secondary-dark);
 --text: var(--text-dark);
 --bg: var(--bg-dark);
 --card-bg: var(--card-bg-dark);
 --border: var(--border-dark);
 }
body {
 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 line-height: 1.6;
 color: var(--text);
 background-color: var(--bg);
 transition: background-color 0.3s ease, color 0.3s ease;
 margin: 0;
 padding: 0;
 }
a {
 color: var(--primary);
 text-decoration: none;
 transition: color 0.2s ease;
 }
a:hover {
 color: var(--secondary);
 }
img {
 max-width: 100%;
 height: auto;
 }
/* Layout */
 .container {
 width: 100%;
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 15px;
 }
/* Header */
 .header {
 position: sticky;
 top: 0;
 z-index: 50;
 background-color: rgba(var(--bg), 0.8);
 backdrop-filter: blur(10px);
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
.dark .header {
 background-color: rgba(var(--bg-dark), 0.8);
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
.header-container {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 1rem 0;
 }
.logo {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 font-weight: 700;
 font-size: 1.25rem;
 }
.logo-icon {
 width: 2.5rem;
 height: 2.5rem;
 border-radius: 50%;
 background-color: var(--primary);
 color: white;
 display: flex;
 align-items: center;
 justify-content: center;
 }
.nav {
 display: flex;
 gap: 1.5rem;
 }
.nav-link {
 font-weight: 500;
 color: var(--text);
 }
.dark .nav-link {
 color: var(--text-dark);
 }
.nav-link:hover {
 color: var(--primary);
 }
.header-actions {
 display: flex;
 align-items: center;
 gap: 1rem;
 }
.theme-toggle {
 width: 2.5rem;
 height: 2.5rem;
 border-radius: 50%;
 background-color: var(--card-bg);
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 border: none;
 color: var(--text);
 }
.dark .theme-toggle {
 background-color: var(--card-bg-dark);
 color: var(--text-dark);
 }
.mobile-menu-btn {
 display: none;
 background: none;
 border: none;
 color: var(--text);
 font-size: 1.25rem;
 }
.dark .mobile-menu-btn {
 color: var(--text-dark);
 }
/* Hero Slider */
 .hero-slider {
 position: relative;
 margin: 2rem 0;
 }
.slider-container {
 display: flex;
 overflow-x: auto;
 scroll-snap-type: x mandatory;
 scroll-behavior: smooth;
 -webkit-overflow-scrolling: touch;
 gap: 1rem;
 padding-bottom: 1rem;
 }
.slider-container::-webkit-scrollbar {
 display: none;
 }
.slide {
 min-width: 100%;
 scroll-snap-align: start;
 position: relative;
 border-radius: 0.5rem;
 overflow: hidden;
 }
.slide-img {
 width: 100%;
 height: 400px;
 object-fit: cover;
 background-color: #e5e7eb;
 }
.slide-content {
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 padding: 2rem;
 background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
 color: white;
 }
.slide-category {
 display: inline-block;
 background-color: var(--primary);
 color: white;
 padding: 0.25rem 0.75rem;
 border-radius: 9999px;
 font-size: 0.75rem;
 font-weight: 600;
 margin-bottom: 0.5rem;
 }
.slide-title {
 font-size: 1.5rem;
 font-weight: 700;
 margin: 0.5rem 0;
 }
.slide-excerpt {
 font-size: 0.875rem;
 opacity: 0.9;
 margin-bottom: 1rem;
 }
.slide-meta {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 font-size: 0.75rem;
 }
.slider-nav {
 display: flex;
 justify-content: center;
 gap: 0.5rem;
 margin-top: 1rem;
 }
.slider-dot {
 width: 0.75rem;
 height: 0.75rem;
 border-radius: 50%;
 background-color: var(--border);
 cursor: pointer;
 border: none;
 }
.dark .slider-dot {
 background-color: var(--border-dark);
 }
.slider-dot.active {
 background-color: var(--primary);
 }
/* Main Content */
 .main-content {
 display: grid;
 grid-template-columns: 1fr;
 gap: 2rem;
 margin: 2rem 0;
 }
@media (min-width: 1024px) {
 .main-content {
 grid-template-columns: 2fr 1fr;
 }
 }
/* Posts Grid */
 .posts-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 gap: 1.5rem;
 }
.post-card {
 background-color: var(--card-bg);
 border-radius: 0.5rem;
 overflow: hidden;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
.dark .post-card {
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
.post-card:hover {
 transform: translateY(-0.25rem);
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
.dark .post-card:hover {
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
 }
.post-img {
 width: 100%;
 height: 200px;
 object-fit: cover;
 background-color: #e5e7eb;
 }
.post-content {
 padding: 1.25rem;
 }
.post-category {
 display: inline-block;
 background-color: var(--primary);
 color: white;
 padding: 0.25rem 0.75rem;
 border-radius: 9999px;
 font-size: 0.75rem;
 font-weight: 600;
 margin-bottom: 0.5rem;
 }
.post-title {
 font-size: 1.125rem;
 font-weight: 600;
 margin: 0.5rem 0;
 color: var(--text);
 }
.dark .post-title {
 color: var(--text-dark);
 }
.post-excerpt {
 font-size: 0.875rem;
 color: var(--text);
 opacity: 0.8;
 margin-bottom: 1rem;
 }
.dark .post-excerpt {
 color: var(--text-dark);
 }
.post-meta {
 display: flex;
 justify-content: space-between;
 align-items: center;
 font-size: 0.75rem;
 color: var(--text);
 opacity: 0.7;
 }
.dark .post-meta {
 color: var(--text-dark);
 }
/* Sidebar */
 .sidebar {
 display: flex;
 flex-direction: column;
 gap: 1.5rem;
 }
.sidebar-widget {
 background-color: var(--card-bg);
 border-radius: 0.5rem;
 padding: 1.25rem;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
.dark .sidebar-widget {
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
.widget-title {
 font-size: 1.125rem;
 font-weight: 600;
 margin-bottom: 1rem;
 color: var(--text);
 position: relative;
 padding-bottom: 0.5rem;
 }
.dark .widget-title {
 color: var(--text-dark);
 }
.widget-title::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 width: 2rem;
 height: 2px;
 background-color: var(--primary);
 }
/* About Widget */
 .about-widget {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 }
.about-avatar {
 width: 80px;
 height: 80px;
 border-radius: 50%;
 object-fit: cover;
 margin-bottom: 1rem;
 background-color: #e5e7eb;
 }
.about-name {
 font-weight: 600;
 margin-bottom: 0.25rem;
 color: var(--text);
 }
.dark .about-name {
 color: var(--text-dark);
 }
.about-bio {
 font-size: 0.875rem;
 color: var(--text);
 opacity: 0.8;
 margin-bottom: 1rem;
 }
.dark .about-bio {
 color: var(--text-dark);
 }
/* Categories Widget */
 .categories-list {
 display: flex;
 flex-direction: column;
 gap: 0.5rem;
 }
.category-item {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 0.5rem 0;
 border-bottom: 1px solid var(--border);
 }
.dark .category-item {
 border-bottom-color: var(--border-dark);
 }
.category-link {
 color: var(--text);
 }
.dark .category-link {
 color: var(--text-dark);
 }
.category-count {
 background-color: var(--border);
 color: var(--text);
 padding: 0.25rem 0.5rem;
 border-radius: 9999px;
 font-size: 0.75rem;
 }
.dark .category-count {
 background-color: var(--border-dark);
 color: var(--text-dark);
 }
/* Newsletter Widget */
 .newsletter-form {
 display: flex;
 flex-direction: column;
 gap: 0.75rem;
 }
.newsletter-input {
 padding: 0.5rem 0.75rem;
 border: 1px solid var(--border);
 border-radius: 0.25rem;
 background-color: var(--bg);
 color: var(--text);
 }
.dark .newsletter-input {
 border-color: var(--border-dark);
 background-color: var(--bg-dark);
 color: var(--text-dark);
 }
.newsletter-button {
 background-color: var(--primary);
 color: white;
 padding: 0.5rem;
 border: none;
 border-radius: 0.25rem;
 font-weight: 500;
 cursor: pointer;
 transition: background-color 0.2s ease;
 }
.newsletter-button:hover {
 background-color: var(--secondary);
 }
/* Tags Widget */
 .tags-list {
 display: flex;
 flex-wrap: wrap;
 gap: 0.5rem;
 }
.tag-link {
 display: inline-block;
 background-color: var(--border);
 color: var(--text);
 padding: 0.25rem 0.75rem;
 border-radius: 9999px;
 font-size: 0.75rem;
 transition: background-color 0.2s ease, color 0.2s ease;
 }
.dark .tag-link {
 background-color: var(--border-dark);
 color: var(--text-dark);
 }
.tag-link:hover {
 background-color: var(--primary);
 color: white;
 }
/* Trending Posts */
 .trending-posts {
 display: flex;
 flex-direction: column;
 gap: 1rem;
 }
.trending-post {
 display: flex;
 gap: 1rem;
 }
.trending-post-img {
 width: 80px;
 height: 60px;
 object-fit: cover;
 border-radius: 0.25rem;
 background-color: #e5e7eb;
 }
.trending-post-title {
 font-size: 0.875rem;
 font-weight: 500;
 color: var(--text);
 margin-bottom: 0.25rem;
 }
.dark .trending-post-title {
 color: var(--text-dark);
 }
.trending-post-date {
 font-size: 0.75rem;
 color: var(--text);
 opacity: 0.7;
 }
.dark .trending-post-date {
 color: var(--text-dark);
 }
/* Single Post */
 .post-header {
 margin-bottom: 2rem;
 }
.post-title-single {
 font-size: 2rem;
 font-weight: 700;
 margin-bottom: 1rem;
 color: var(--text);
 }
.dark .post-title-single {
 color: var(--text-dark);
 }
.post-meta-single {
 display: flex;
 flex-wrap: wrap;
 gap: 1rem;
 margin-bottom: 1rem;
 font-size: 0.875rem;
 color: var(--text);
 opacity: 0.8;
 }
.dark .post-meta-single {
 color: var(--text-dark);
 }
.post-featured-img {
 width: 100%;
 max-height: 500px;
 object-fit: cover;
 border-radius: 0.5rem;
 margin-bottom: 2rem;
 background-color: #e5e7eb;
 }
.post-content-single {
 line-height: 1.7;
 color: var(--text);
 }
.dark .post-content-single {
 color: var(--text-dark);
 }
.post-content-single p {
 margin-bottom: 1.5rem;
 }
.post-content-single h2,
 .post-content-single h3,
 .post-content-single h4 {
 margin: 2rem 0 1rem;
 color: var(--text);
 }
.dark .post-content-single h2,
 .dark .post-content-single h3,
 .dark .post-content-single h4 {
 color: var(--text-dark);
 }
.post-content-single a {
 text-decoration: underline;
 }
.post-tags {
 display: flex;
 flex-wrap: wrap;
 gap: 0.5rem;
 margin: 2rem 0;
 }
/* Related Posts */
 .related-posts {
 margin: 3rem 0;
 }
.related-title {
 font-size: 1.5rem;
 font-weight: 600;
 margin-bottom: 1.5rem;
 color: var(--text);
 }
.dark .related-title {
 color: var(--text-dark);
 }
.related-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 gap: 1.5rem;
 }
/* Footer */
 .footer {
 background-color: var(--card-bg);
 padding: 3rem 0;
 margin-top: 3rem;
 }
.dark .footer {
 background-color: var(--card-bg-dark);
 }
.footer-container {
 display: grid;
 grid-template-columns: repeat(1, 1fr);
 gap: 2rem;
 }
@media (min-width: 768px) {
 .footer-container {
 grid-template-columns: repeat(4, 1fr);
 }
 }
.footer-widget-title {
 font-size: 1.125rem;
 font-weight: 600;
 margin-bottom: 1.5rem;
 color: var(--text);
 }
.dark .footer-widget-title {
 color: var(--text-dark);
 }
.footer-logo {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 font-weight: 700;
 font-size: 1.25rem;
 margin-bottom: 1rem;
 }
.footer-logo-icon {
 width: 2rem;
 height: 2rem;
 border-radius: 50%;
 background-color: var(--primary);
 color: white;
 display: flex;
 align-items: center;
 justify-content: center;
 }
.footer-about {
 font-size: 0.875rem;
 color: var(--text);
 opacity: 0.8;
 margin-bottom: 1rem;
 }
.dark .footer-about {
 color: var(--text-dark);
 }
.footer-social {
 display: flex;
 gap: 0.75rem;
 }
.social-link {
 width: 2.5rem;
 height: 2.5rem;
 border-radius: 50%;
 background-color: var(--border);
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--text);
 transition: background-color 0.2s ease, color 0.2s ease;
 }
.dark .social-link {
 background-color: var(--border-dark);
 color: var(--text-dark);
 }
.social-link:hover {
 background-color: var(--primary);
 color: white;
 }
.footer-links {
 display: flex;
 flex-direction: column;
 gap: 0.75rem;
 }
.footer-link {
 color: var(--text);
 opacity: 0.8;
 font-size: 0.875rem;
 transition: opacity 0.2s ease;
 }
.dark .footer-link {
 color: var(--text-dark);
 }
.footer-link:hover {
 opacity: 1;
 }
.footer-bottom {
 margin-top: 2rem;
 padding-top: 2rem;
 border-top: 1px solid var(--border);
 text-align: center;
 font-size: 0.875rem;
 color: var(--text);
 opacity: 0.7;
 }
.dark .footer-bottom {
 border-top-color: var(--border-dark);
 color: var(--text-dark);
 }
/* Mobile Menu */
 .mobile-menu {
 display: none;
 background-color: var(--bg);
 padding: 1rem;
 border-top: 1px solid var(--border);
 }
.dark .mobile-menu {
 background-color: var(--bg-dark);
 border-top-color: var(--border-dark);
 }
.mobile-menu.active {
 display: block;
 }
.mobile-nav {
 display: flex;
 flex-direction: column;
 gap: 0.75rem;
 }
.mobile-nav-link {
 padding: 0.5rem 0;
 color: var(--text);
 }
.dark .mobile-nav-link {
 color: var(--text-dark);
 }
/* Responsive */
 @media (max-width: 768px) {
 .nav {
 display: none;
 }
.mobile-menu-btn {
 display: block;
 }
.slide-img {
 height: 300px;
 }
.slide-content {
 padding: 1rem;
 }
.slide-title {
 font-size: 1.25rem;
 }
 }
/* Loading Animation */
 .loading {
 display: flex;
 justify-content: center;
 align-items: center;
 padding: 2rem;
 }
.loading-spinner {
 width: 2rem;
 height: 2rem;
 border: 3px solid var(--border);
 border-top-color: var(--primary);
 border-radius: 50%;
 animation: spin 1s linear infinite;
 }
.dark .loading-spinner {
 border-color: var(--border-dark);
 border-top-color: var(--primary);
 }
@keyframes spin {
 to {
 transform: rotate(360deg);
 }
 }
/* Infinite Scroll */
 .infinite-scroll-loading {
 grid-column: 1 / -1;
 }
 </style>
<!-- SEO Meta Tags -->
 <b:if cond='data:blog.pageType == &quot;index&quot;'>
 <meta expr:content='data:blog.pageTitle + &quot; - &quot; + data:blog.title' name='title'/>
 <meta expr:content='data:blog.metaDescription' name='description'/>
 <b:else/>
 <meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='title'/>
 <meta expr:content='data:blog.pageName + &quot;. &quot; + data:blog.title + &quot;. &quot; + data:blog.metaDescription' name='description'/>
 </b:if>
<meta content='index, follow' name='robots'/>
 <meta content='max-snippet:-1, max-image-preview:large, max-video-preview:-1' name='robots'/>
<!-- Open Graph / Facebook -->
 <meta content='website' property='og:type'/>
 <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
 <b:if cond='data:blog.pageType == &quot;index&quot;'>
 <meta expr:content='data:blog.pageTitle + &quot; - &quot; + data:blog.title' property='og:title'/>
 <b:else/>
 <meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' property='og:title'/>
 </b:if>
 <meta expr:content='data:blog.metaDescription' property='og:description'/>
 <meta expr:content='data:blog.title' property='og:site_name'/>
<!-- Twitter -->
 <meta content='summary_large_image' name='twitter:card'/>
 <meta expr:content='data:blog.pageTitle' name='twitter:title'/>
 <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<!-- Structured Data -->
 <script type='application/ld+json'>
 {
 "@context": "https://schema.org",
 "@type": "WebSite",
 "name": "<data:blog.title/>",
 "url": "<data:blog.url/>",
 "potentialAction": {
 "@type": "SearchAction",
 "target": "<data:blog.url/>?q={search_term_string}",
 "query-input": "required name=search_term_string"
 }
 }
 </script>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
 <script type='application/ld+json'>
 {
 "@context": "https://schema.org",
 "@type": "Blog",
 "headline": "<data:blog.title/>",
 "description": "<data:blog.metaDescription/>",
 "url": "<data:blog.url/>",
 "publisher": {
 "@type": "Organization",
 "name": "<data:blog.title/>",
 "logo": {
 "@type": "ImageObject",
 "url": "https://via.placeholder.com/600x315"
 }
 }
 }
 </script>
 </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <script type='application/ld+json'>
 {
 "@context": "https://schema.org",
 "@type": "BlogPosting",
 "headline": "<data:blog.pageName/>",
 "description": "<data:blog.metaDescription/>",
 "url": "<data:blog.url/>",
 "datePublished": "<data:blog.post.date.iso8601/>",
 "dateModified": "<data:blog.post.lastUpdated.iso8601/>",
 "author": {
 "@type": "Person",
 "name": "<data:blog.post.author.name/>"
 },
 "publisher": {
 "@type": "Organization",
 "name": "<data:blog.title/>",
 "logo": {
 "@type": "ImageObject",
 "url": "https://via.placeholder.com/600x315"
 }
 },
 "mainEntityOfPage": {
 "@type": "WebPage",
 "@id": "<data:blog.url/>"
 }
 }
 </script>
 </b:if>
</head>
<body class='loading'>
 <!-- Header -->
 <header class='header'>
 <div class='container header-container'>
 <a class='logo' expr:href='data:blog.homepageUrl'>
 <span class='logo-icon'>B</span>
 <span><data:blog.title/></span>
 </a>
<nav class='nav'>
 <a class='nav-link' expr:href='data:blog.homepageUrl'>Home</a>
 <a class='nav-link' href='#'>Categories</a>
 <a class='nav-link' href='#'>About</a>
 <a class='nav-link' href='#'>Contact</a>
 </nav>
<div class='header-actions'>
 <button class='theme-toggle' id='themeToggle'>
 <i class='fas fa-moon'></i>
 </button>
 <button class='mobile-menu-btn' id='mobileMenuBtn'>
 <i class='fas fa-bars'></i>
 </button>
 </div>
 </div>
<!-- Mobile Menu -->
 <div class='mobile-menu' id='mobileMenu'>
 <nav class='mobile-nav'>
 <a class='mobile-nav-link' expr:href='data:blog.homepageUrl'>Home</a>
 <a class='mobile-nav-link' href='#'>Categories</a>
 <a class='mobile-nav-link' href='#'>About</a>
 <a class='mobile-nav-link' href='#'>Contact</a>
 </nav>
 </div>
 </header>
<!-- Main Content -->
 <main class='container'>
 <b:section id='main' showaddelement='yes'>
 <b:widget id='FeaturedPosts1' locked='false' title='Featured Posts' type='FeaturedPost'>
 <b:includable id='main'>
 <div class='hero-slider'>
 <div class='slider-container' id='featuredSlider'>
 <b:loop values='data:posts' var='post'>
 <div class='slide'>
 <img class='slide-img' expr:alt='data:post.title' expr:src='data:post.featuredImage.isYouTubePost ? resizeImage(data:post.featuredImage, 800, 450) : resizeImage(data:post.featuredImage, 800, 450)'/>
 <div class='slide-content'>
 <span class='slide-category'>
 <b:loop values='data:post.labels' var='label'>
 <b:if cond='data:label.isLast != &quot;true&quot;'>
 <data:label.name/>,
 <b:else/>
 <data:label.name/>
 </b:if>
 </b:loop>
 </span>
 <h3 class='slide-title'>
 <a expr:href='data:post.url'><data:post.title/></a>
 </h3>
 <p class='slide-excerpt'><data:post.snippet/></p>
 <div class='slide-meta'>
 <span><data:post.date/></span>
 <span>•</span>
 <span><data:post.author.name/></span>
 </div>
 </div>
 </div>
 </b:loop>
 </div>
<div class='slider-nav'>
 <b:loop values='data:posts' var='post' index='index'>
 <button class='slider-dot' expr:data-index='data:index'></button>
 </b:loop>
 </div>
 </div>
 </b:includable>
 </b:widget>
<div class='main-content'>
 <div class='content-area'>
 <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'>
 <b:includable id='main' var='top'>
 <b:if cond='data:mobile == &quot;false&quot;'>
 <b:include data='top' name='status-message'/>
 </b:if>
<div class='posts-grid' id='blog-posts'>
 <b:include data='top' name='blog'/>
 </div>
<div class='infinite-scroll-loading' id='blog-loading'>
 <div class='loading'>
 <div class='loading-spinner'></div>
 </div>
 </div>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
 <b:include name='nextprev'/>
 </b:if>
 </b:if>
 </b:includable>
<b:includable id='blog' var='top'>
 <b:loop values='data:posts' var='post'>
 <article class='post-card'>
 <a expr:href='data:post.url'>
 <img class='post-img' expr:alt='data:post.title' expr:src='data:post.featuredImage.isYouTubePost ? resizeImage(data:post.featuredImage, 600, 400) : resizeImage(data:post.featuredImage, 600, 400)'/>
 </a>
 <div class='post-content'>
 <span class='post-category'>
 <b:loop values='data:post.labels' var='label'>
 <b:if cond='data:label.isLast != &quot;true&quot;'>
 <data:label.name/>,
 <b:else/>
 <data:label.name/>
 </b:if>
 </b:loop>
 </span>
 <h3 class='post-title'>
 <a expr:href='data:post.url'><data:post.title/></a>
 </h3>
 <p class='post-excerpt'><data:post.snippet length='100'/></p>
 <div class='post-meta'>
 <span><data:post.date/></span>
 <span><data:post.author.name/></span>
 </div>
 </div>
 </article>
 </b:loop>
 </b:includable>
<b:includable id='nextprev'>
 <div class='blog-pager' id='blog-pager'>
 <b:if cond='data:blog.url != data:blog.homepageUrl'>
 <b:if cond='data:blog.url != data:blog.homepageUrl'>
 <b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
 <b:if cond='data:blog.url != data:blog.newestPageUrl'>
 <a class='blog-pager-older-link' expr:href='data:blog.nextPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:blog.olderPostTitle'>
 Older Posts →
 </a>
 </b:if>
<b:if cond='data:blog.url != data:blog.oldestPageUrl'>
 <a class='blog-pager-newer-link' expr:href='data:blog.previousPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:blog.newerPostTitle'>
 ← Newer Posts
 </a>
 </b:if>
 </b:if>
 </b:if>
 </b:if>
 </b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>Home</a>
 </div>
 </b:includable>
<b:includable id='status-message'>
 <b:if cond='data:navMessage'>
 <div class='status-msg-wrap'>
 <div class='status-msg-body'>
 <data:navMessage/>
 </div>
 </div>
 <b:else/>
 <b:if cond='data:showMobile'>
 <div class='status-msg-wrap'>
 <div class='status-msg-body'>
 <data:showMobileMessage/>
 </div>
 </div>
 </b:if>
 </b:if>
 </b:includable>
 </b:widget>
 </div>
<div class='sidebar'>
 <b:widget id='Profile1' locked='false' title='About Me' type='Profile'>
 <b:includable id='main'>
 <div class='sidebar-widget about-widget'>
 <img class='about-avatar' expr:alt='data:title' expr:src='data:userPhoto.url'/>
 <h3 class='about-name'><data:title/></h3>
 <p class='about-bio'><data:userDescription/></p>
 <a class='button' href='#'>Read More</a>
 </div>
 </b:includable>
 </b:widget>
<b:widget id='Label1' locked='false' title='Categories' type='Label'>
 <b:includable id='main'>
 <div class='sidebar-widget'>
 <h3 class='widget-title'>Categories</h3>
 <div class='categories-list'>
 <b:loop values='data:labels' var='label'>
 <div class='category-item'>
 <a class='category-link' expr:href='data:label.url'><data:label.name/></a>
 <span class='category-count'><data:label.count/></span>
 </div>
 </b:loop>
 </div>
 </div>
 </b:includable>
 </b:widget>
<b:widget id='HTML1' locked='false' title='Newsletter' type='HTML'>
 <b:includable id='main'>
 <div class='sidebar-widget'>
 <h3 class='widget-title'>Newsletter</h3>
 <form class='newsletter-form'>
 <input class='newsletter-input' placeholder='Your email' type='email'/>
 <button class='newsletter-button' type='submit'>Subscribe</button>
 </form>
 </div>
 </b:includable>
 </b:widget>
<b:widget id='PopularPosts1' locked='false' title='Trending Posts' type='PopularPosts'>
 <b:includable id='main'>
 <div class='sidebar-widget'>
 <h3 class='widget-title'>Trending Posts</h3>
 <div class='trending-posts'>
 <b:loop values='data:posts' var='post'>
 <div class='trending-post'>
 <a expr:href='data:post.url'>
 <img class='trending-post-img' expr:alt='data:post.title' expr:src='data:post.featuredImage.isYouTubePost ? resizeImage(data:post.featuredImage, 200, 150) : resizeImage(data:post.featuredImage, 200, 150)'/>
 </a>
 <div>
 <h4 class='trending-post-title'>
 <a expr:href='data:post.url'><data:post.title/></a>
 </h4>
 <span class='trending-post-date'><data:post.date/></span>
 </div>
 </div>
 </b:loop>
 </div>
 </div>
 </b:includable>
 </b:widget>
<b:widget id='HTML2' locked='false' title='Tags' type='HTML'>
 <b:includable id='main'>
 <div class='sidebar-widget'>
 <h3 class='widget-title'>Tags</h3>
 <div class='tags-list'>
 <b:loop values='data:post.labels' var='label'>
 <a class='tag-link' expr:href='data:label.url'><data:label.name/></a>
 </b:loop>
 </div>
 </div>
 </b:includable>
 </b:widget>
 </div>
 </div>
 </b:section>
 </main>
<!-- Footer -->
 <footer class='footer'>
 <div class='container footer-container'>
 <div class='footer-widget'>
 <div class='footer-logo'>
 <span class='footer-logo-icon'>B</span>
 <span><data:blog.title/></span>
 </div>
 <p class='footer-about'>
 A modern blogging platform for sharing ideas and stories.
 </p>
 <div class='footer-social'>
 <a class='social-link' href='#'><i class='fab fa-facebook-f'></i></a>
 <a class='social-link' href='#'><i class='fab fa-twitter'></i></a>
 <a class='social-link' href='#'><i class='fab fa-instagram'></i></a>
 <a class='social-link' href='#'><i class='fab fa-linkedin-in'></i></a>
 </div>
 </div>
<div class='footer-widget'>
 <h3 class='footer-widget-title'>Quick Links</h3>
 <div class='footer-links'>
 <a class='footer-link' expr:href='data:blog.homepageUrl'>Home</a>
 <a class='footer-link' href='#'>About</a>
 <a class='footer-link' href='#'>Blog</a>
 <a class='footer-link' href='#'>Contact</a>
 </div>
 </div>
<div class='footer-widget'>
 <h3 class='footer-widget-title'>Categories</h3>
 <div class='footer-links'>
 <b:loop values='data:labels' var='label'>
 <a class='footer-link' expr:href='data:label.url'><data:label.name/></a>
 </b:loop>
 </div>
 </div>
<div class='footer-widget'>
 <h3 class='footer-widget-title'>Contact</h3>
 <div class='footer-links'>
 <a class='footer-link' href='mailto:contact@example.com'>contact@example.com</a>
 <a class='footer-link' href='tel:+1234567890'>+1 (234) 567-890</a>
 <a class='footer-link' href='#'>123 Blog Street, City</a>
 </div>
 </div>
 </div>
<div class='container footer-bottom'>
 <p>© <data:blog.title/> <script>document.write(new Date().getFullYear())</script>. All rights reserved.</p>
 </div>
 </footer>
<!-- Scripts -->
 <script>
 // Theme Toggle
 const themeToggle = document.getElementById('themeToggle');
 const body = document.body;
// Check for saved theme preference or use preferred color scheme
 if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
 body.classList.add('dark');
 themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
 } else {
 body.classList.remove('dark');
 themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
 }
themeToggle.addEventListener('click', () => {
 body.classList.toggle('dark');
 if (body.classList.contains('dark')) {
 localStorage.setItem('theme', 'dark');
 themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
 } else {
 localStorage.setItem('theme', 'light');
 themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
 }
 });
// Mobile Menu Toggle
 const mobileMenuBtn = document.getElementById('mobileMenuBtn');
 const mobileMenu = document.getElementById('mobileMenu');
mobileMenuBtn.addEventListener('click', () => {
 mobileMenu.classList.toggle('active');
 });
// Featured Slider
 const featuredSlider = document.getElementById('featuredSlider');
 const sliderDots = document.querySelectorAll('.slider-dot');
if (featuredSlider) {
 let currentSlide = 0;
// Set first dot as active
 if (sliderDots.length > 0) {
 sliderDots[0].classList.add('active');
 }
// Update slider position
 function updateSliderPosition() {
 const slideWidth = document.querySelector('.slide').offsetWidth;
 featuredSlider.scrollTo({
 left: currentSlide * (slideWidth + 16), // 16 is the gap between slides
 behavior: 'smooth'
 });
// Update active dot
 sliderDots.forEach((dot, index) => {
 if (index === currentSlide) {
 dot.classList.add('active');
 } else {
 dot.classList.remove('active');
 }
 });
 }
// Dot navigation
 sliderDots.forEach((dot, index) => {
 dot.addEventListener('click', () => {
 currentSlide = index;
 updateSliderPosition();
 });
 });
// Auto slide
 let slideInterval = setInterval(() => {
 currentSlide = (currentSlide + 1) % sliderDots.length;
 updateSliderPosition();
 }, 5000);
// Pause on hover
 featuredSlider.addEventListener('mouseenter', () => {
 clearInterval(slideInterval);
 });
featuredSlider.addEventListener('mouseleave', () => {
 slideInterval = setInterval(() => {
 currentSlide = (currentSlide + 1) % sliderDots.length;
 updateSliderPosition();
 }, 5000);
 });
 }
// Infinite Scroll
 const blogPosts = document.getElementById('blog-posts');
 const blogLoading = document.getElementById('blog-loading');
 let isLoading = false;
if (blogPosts) {
 window.addEventListener('scroll', () => {
 const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
if (scrollTop + clientHeight >= scrollHeight - 500 && !isLoading) {
 loadMorePosts();
 }
 });
function loadMorePosts() {
 const nextPageLink = document.querySelector('.blog-pager-older-link');
if (nextPageLink && !isLoading) {
 isLoading = true;
 blogLoading.style.display = 'flex';
fetch(nextPageLink.href)
 .then(response => response.text())
 .then(html => {
 const parser = new DOMParser();
 const doc = parser.parseFromString(html, 'text/html');
 const newPosts = doc.querySelector('#blog-posts').innerHTML;
 const newNextPageLink = doc.querySelector('.blog-pager-older-link');
blogPosts.innerHTML += newPosts;
if (newNextPageLink) {
 document.querySelector('.blog-pager-older-link').href = newNextPageLink.href;
 } else {
 document.querySelector('.blog-pager').remove();
 }
isLoading = false;
 blogLoading.style.display = 'none';
 })
 .catch(error => {
 console.error('Error loading more posts:', error);
 isLoading = false;
 blogLoading.style.display = 'none';
 });
 }
 }
 }
// Remove loading class when page is loaded
 window.addEventListener('load', () => {
 document.body.classList.remove('loading');
 });
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=krigeta/ii" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>