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>