Hugging Face's logo

Spaces:
krigeta
/
ii
Running

App Files Community
krigeta commited on
Commit
004f1b5
·
verified ·
1 Parent(s): f60940c

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1459 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ii
3
- emoji: 🌍
4
- colorFrom: purple
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: ii
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1459 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <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'>
3
+ <head>
4
+ <b:include data='blog' name='all-head-content'/>
5
+ <title><data:blog.pageTitle/></title>
6
+
7
+ <meta charset='utf-8'/>
8
+ <meta content='width=device-width, initial-scale=1' name='viewport'/>
9
+ <meta content='blogger' name='generator'/>
10
+
11
+ <!-- Favicon -->
12
+ <link expr:href='data:blog.url' rel='canonical'/>
13
+ <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css' rel='stylesheet'/>
14
+
15
+ <!-- Theme CSS -->
16
+ <style type='text/css'>
17
+ /* Base Styles */
18
+ :root {
19
+ --primary: #4f46e5;
20
+ --primary-dark: #7c3aed;
21
+ --secondary: #10b981;
22
+ --secondary-dark: #34d399;
23
+ --text: #1f2937;
24
+ --text-dark: #f3f4f6;
25
+ --bg: #ffffff;
26
+ --bg-dark: #111827;
27
+ --card-bg: #f9fafb;
28
+ --card-bg-dark: #1f2937;
29
+ --border: #e5e7eb;
30
+ --border-dark: #374151;
31
+ }
32
+
33
+ .dark {
34
+ --primary: var(--primary-dark);
35
+ --secondary: var(--secondary-dark);
36
+ --text: var(--text-dark);
37
+ --bg: var(--bg-dark);
38
+ --card-bg: var(--card-bg-dark);
39
+ --border: var(--border-dark);
40
+ }
41
+
42
+ body {
43
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
44
+ line-height: 1.6;
45
+ color: var(--text);
46
+ background-color: var(--bg);
47
+ transition: background-color 0.3s ease, color 0.3s ease;
48
+ margin: 0;
49
+ padding: 0;
50
+ }
51
+
52
+ a {
53
+ color: var(--primary);
54
+ text-decoration: none;
55
+ transition: color 0.2s ease;
56
+ }
57
+
58
+ a:hover {
59
+ color: var(--secondary);
60
+ }
61
+
62
+ img {
63
+ max-width: 100%;
64
+ height: auto;
65
+ }
66
+
67
+ /* Layout */
68
+ .container {
69
+ width: 100%;
70
+ max-width: 1200px;
71
+ margin: 0 auto;
72
+ padding: 0 15px;
73
+ }
74
+
75
+ /* Header */
76
+ .header {
77
+ position: sticky;
78
+ top: 0;
79
+ z-index: 50;
80
+ background-color: rgba(var(--bg), 0.8);
81
+ backdrop-filter: blur(10px);
82
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
83
+ }
84
+
85
+ .dark .header {
86
+ background-color: rgba(var(--bg-dark), 0.8);
87
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
88
+ }
89
+
90
+ .header-container {
91
+ display: flex;
92
+ justify-content: space-between;
93
+ align-items: center;
94
+ padding: 1rem 0;
95
+ }
96
+
97
+ .logo {
98
+ display: flex;
99
+ align-items: center;
100
+ gap: 0.5rem;
101
+ font-weight: 700;
102
+ font-size: 1.25rem;
103
+ }
104
+
105
+ .logo-icon {
106
+ width: 2.5rem;
107
+ height: 2.5rem;
108
+ border-radius: 50%;
109
+ background-color: var(--primary);
110
+ color: white;
111
+ display: flex;
112
+ align-items: center;
113
+ justify-content: center;
114
+ }
115
+
116
+ .nav {
117
+ display: flex;
118
+ gap: 1.5rem;
119
+ }
120
+
121
+ .nav-link {
122
+ font-weight: 500;
123
+ color: var(--text);
124
+ }
125
+
126
+ .dark .nav-link {
127
+ color: var(--text-dark);
128
+ }
129
+
130
+ .nav-link:hover {
131
+ color: var(--primary);
132
+ }
133
+
134
+ .header-actions {
135
+ display: flex;
136
+ align-items: center;
137
+ gap: 1rem;
138
+ }
139
+
140
+ .theme-toggle {
141
+ width: 2.5rem;
142
+ height: 2.5rem;
143
+ border-radius: 50%;
144
+ background-color: var(--card-bg);
145
+ display: flex;
146
+ align-items: center;
147
+ justify-content: center;
148
+ cursor: pointer;
149
+ border: none;
150
+ color: var(--text);
151
+ }
152
+
153
+ .dark .theme-toggle {
154
+ background-color: var(--card-bg-dark);
155
+ color: var(--text-dark);
156
+ }
157
+
158
+ .mobile-menu-btn {
159
+ display: none;
160
+ background: none;
161
+ border: none;
162
+ color: var(--text);
163
+ font-size: 1.25rem;
164
+ }
165
+
166
+ .dark .mobile-menu-btn {
167
+ color: var(--text-dark);
168
+ }
169
+
170
+ /* Hero Slider */
171
+ .hero-slider {
172
+ position: relative;
173
+ margin: 2rem 0;
174
+ }
175
+
176
+ .slider-container {
177
+ display: flex;
178
+ overflow-x: auto;
179
+ scroll-snap-type: x mandatory;
180
+ scroll-behavior: smooth;
181
+ -webkit-overflow-scrolling: touch;
182
+ gap: 1rem;
183
+ padding-bottom: 1rem;
184
+ }
185
+
186
+ .slider-container::-webkit-scrollbar {
187
+ display: none;
188
+ }
189
+
190
+ .slide {
191
+ min-width: 100%;
192
+ scroll-snap-align: start;
193
+ position: relative;
194
+ border-radius: 0.5rem;
195
+ overflow: hidden;
196
+ }
197
+
198
+ .slide-img {
199
+ width: 100%;
200
+ height: 400px;
201
+ object-fit: cover;
202
+ background-color: #e5e7eb;
203
+ }
204
+
205
+ .slide-content {
206
+ position: absolute;
207
+ bottom: 0;
208
+ left: 0;
209
+ right: 0;
210
+ padding: 2rem;
211
+ background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
212
+ color: white;
213
+ }
214
+
215
+ .slide-category {
216
+ display: inline-block;
217
+ background-color: var(--primary);
218
+ color: white;
219
+ padding: 0.25rem 0.75rem;
220
+ border-radius: 9999px;
221
+ font-size: 0.75rem;
222
+ font-weight: 600;
223
+ margin-bottom: 0.5rem;
224
+ }
225
+
226
+ .slide-title {
227
+ font-size: 1.5rem;
228
+ font-weight: 700;
229
+ margin: 0.5rem 0;
230
+ }
231
+
232
+ .slide-excerpt {
233
+ font-size: 0.875rem;
234
+ opacity: 0.9;
235
+ margin-bottom: 1rem;
236
+ }
237
+
238
+ .slide-meta {
239
+ display: flex;
240
+ align-items: center;
241
+ gap: 0.5rem;
242
+ font-size: 0.75rem;
243
+ }
244
+
245
+ .slider-nav {
246
+ display: flex;
247
+ justify-content: center;
248
+ gap: 0.5rem;
249
+ margin-top: 1rem;
250
+ }
251
+
252
+ .slider-dot {
253
+ width: 0.75rem;
254
+ height: 0.75rem;
255
+ border-radius: 50%;
256
+ background-color: var(--border);
257
+ cursor: pointer;
258
+ border: none;
259
+ }
260
+
261
+ .dark .slider-dot {
262
+ background-color: var(--border-dark);
263
+ }
264
+
265
+ .slider-dot.active {
266
+ background-color: var(--primary);
267
+ }
268
+
269
+ /* Main Content */
270
+ .main-content {
271
+ display: grid;
272
+ grid-template-columns: 1fr;
273
+ gap: 2rem;
274
+ margin: 2rem 0;
275
+ }
276
+
277
+ @media (min-width: 1024px) {
278
+ .main-content {
279
+ grid-template-columns: 2fr 1fr;
280
+ }
281
+ }
282
+
283
+ /* Posts Grid */
284
+ .posts-grid {
285
+ display: grid;
286
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
287
+ gap: 1.5rem;
288
+ }
289
+
290
+ .post-card {
291
+ background-color: var(--card-bg);
292
+ border-radius: 0.5rem;
293
+ overflow: hidden;
294
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
295
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
296
+ }
297
+
298
+ .dark .post-card {
299
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
300
+ }
301
+
302
+ .post-card:hover {
303
+ transform: translateY(-0.25rem);
304
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
305
+ }
306
+
307
+ .dark .post-card:hover {
308
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
309
+ }
310
+
311
+ .post-img {
312
+ width: 100%;
313
+ height: 200px;
314
+ object-fit: cover;
315
+ background-color: #e5e7eb;
316
+ }
317
+
318
+ .post-content {
319
+ padding: 1.25rem;
320
+ }
321
+
322
+ .post-category {
323
+ display: inline-block;
324
+ background-color: var(--primary);
325
+ color: white;
326
+ padding: 0.25rem 0.75rem;
327
+ border-radius: 9999px;
328
+ font-size: 0.75rem;
329
+ font-weight: 600;
330
+ margin-bottom: 0.5rem;
331
+ }
332
+
333
+ .post-title {
334
+ font-size: 1.125rem;
335
+ font-weight: 600;
336
+ margin: 0.5rem 0;
337
+ color: var(--text);
338
+ }
339
+
340
+ .dark .post-title {
341
+ color: var(--text-dark);
342
+ }
343
+
344
+ .post-excerpt {
345
+ font-size: 0.875rem;
346
+ color: var(--text);
347
+ opacity: 0.8;
348
+ margin-bottom: 1rem;
349
+ }
350
+
351
+ .dark .post-excerpt {
352
+ color: var(--text-dark);
353
+ }
354
+
355
+ .post-meta {
356
+ display: flex;
357
+ justify-content: space-between;
358
+ align-items: center;
359
+ font-size: 0.75rem;
360
+ color: var(--text);
361
+ opacity: 0.7;
362
+ }
363
+
364
+ .dark .post-meta {
365
+ color: var(--text-dark);
366
+ }
367
+
368
+ /* Sidebar */
369
+ .sidebar {
370
+ display: flex;
371
+ flex-direction: column;
372
+ gap: 1.5rem;
373
+ }
374
+
375
+ .sidebar-widget {
376
+ background-color: var(--card-bg);
377
+ border-radius: 0.5rem;
378
+ padding: 1.25rem;
379
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
380
+ }
381
+
382
+ .dark .sidebar-widget {
383
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
384
+ }
385
+
386
+ .widget-title {
387
+ font-size: 1.125rem;
388
+ font-weight: 600;
389
+ margin-bottom: 1rem;
390
+ color: var(--text);
391
+ position: relative;
392
+ padding-bottom: 0.5rem;
393
+ }
394
+
395
+ .dark .widget-title {
396
+ color: var(--text-dark);
397
+ }
398
+
399
+ .widget-title::after {
400
+ content: '';
401
+ position: absolute;
402
+ bottom: 0;
403
+ left: 0;
404
+ width: 2rem;
405
+ height: 2px;
406
+ background-color: var(--primary);
407
+ }
408
+
409
+ /* About Widget */
410
+ .about-widget {
411
+ display: flex;
412
+ flex-direction: column;
413
+ align-items: center;
414
+ text-align: center;
415
+ }
416
+
417
+ .about-avatar {
418
+ width: 80px;
419
+ height: 80px;
420
+ border-radius: 50%;
421
+ object-fit: cover;
422
+ margin-bottom: 1rem;
423
+ background-color: #e5e7eb;
424
+ }
425
+
426
+ .about-name {
427
+ font-weight: 600;
428
+ margin-bottom: 0.25rem;
429
+ color: var(--text);
430
+ }
431
+
432
+ .dark .about-name {
433
+ color: var(--text-dark);
434
+ }
435
+
436
+ .about-bio {
437
+ font-size: 0.875rem;
438
+ color: var(--text);
439
+ opacity: 0.8;
440
+ margin-bottom: 1rem;
441
+ }
442
+
443
+ .dark .about-bio {
444
+ color: var(--text-dark);
445
+ }
446
+
447
+ /* Categories Widget */
448
+ .categories-list {
449
+ display: flex;
450
+ flex-direction: column;
451
+ gap: 0.5rem;
452
+ }
453
+
454
+ .category-item {
455
+ display: flex;
456
+ justify-content: space-between;
457
+ align-items: center;
458
+ padding: 0.5rem 0;
459
+ border-bottom: 1px solid var(--border);
460
+ }
461
+
462
+ .dark .category-item {
463
+ border-bottom-color: var(--border-dark);
464
+ }
465
+
466
+ .category-link {
467
+ color: var(--text);
468
+ }
469
+
470
+ .dark .category-link {
471
+ color: var(--text-dark);
472
+ }
473
+
474
+ .category-count {
475
+ background-color: var(--border);
476
+ color: var(--text);
477
+ padding: 0.25rem 0.5rem;
478
+ border-radius: 9999px;
479
+ font-size: 0.75rem;
480
+ }
481
+
482
+ .dark .category-count {
483
+ background-color: var(--border-dark);
484
+ color: var(--text-dark);
485
+ }
486
+
487
+ /* Newsletter Widget */
488
+ .newsletter-form {
489
+ display: flex;
490
+ flex-direction: column;
491
+ gap: 0.75rem;
492
+ }
493
+
494
+ .newsletter-input {
495
+ padding: 0.5rem 0.75rem;
496
+ border: 1px solid var(--border);
497
+ border-radius: 0.25rem;
498
+ background-color: var(--bg);
499
+ color: var(--text);
500
+ }
501
+
502
+ .dark .newsletter-input {
503
+ border-color: var(--border-dark);
504
+ background-color: var(--bg-dark);
505
+ color: var(--text-dark);
506
+ }
507
+
508
+ .newsletter-button {
509
+ background-color: var(--primary);
510
+ color: white;
511
+ padding: 0.5rem;
512
+ border: none;
513
+ border-radius: 0.25rem;
514
+ font-weight: 500;
515
+ cursor: pointer;
516
+ transition: background-color 0.2s ease;
517
+ }
518
+
519
+ .newsletter-button:hover {
520
+ background-color: var(--secondary);
521
+ }
522
+
523
+ /* Tags Widget */
524
+ .tags-list {
525
+ display: flex;
526
+ flex-wrap: wrap;
527
+ gap: 0.5rem;
528
+ }
529
+
530
+ .tag-link {
531
+ display: inline-block;
532
+ background-color: var(--border);
533
+ color: var(--text);
534
+ padding: 0.25rem 0.75rem;
535
+ border-radius: 9999px;
536
+ font-size: 0.75rem;
537
+ transition: background-color 0.2s ease, color 0.2s ease;
538
+ }
539
+
540
+ .dark .tag-link {
541
+ background-color: var(--border-dark);
542
+ color: var(--text-dark);
543
+ }
544
+
545
+ .tag-link:hover {
546
+ background-color: var(--primary);
547
+ color: white;
548
+ }
549
+
550
+ /* Trending Posts */
551
+ .trending-posts {
552
+ display: flex;
553
+ flex-direction: column;
554
+ gap: 1rem;
555
+ }
556
+
557
+ .trending-post {
558
+ display: flex;
559
+ gap: 1rem;
560
+ }
561
+
562
+ .trending-post-img {
563
+ width: 80px;
564
+ height: 60px;
565
+ object-fit: cover;
566
+ border-radius: 0.25rem;
567
+ background-color: #e5e7eb;
568
+ }
569
+
570
+ .trending-post-title {
571
+ font-size: 0.875rem;
572
+ font-weight: 500;
573
+ color: var(--text);
574
+ margin-bottom: 0.25rem;
575
+ }
576
+
577
+ .dark .trending-post-title {
578
+ color: var(--text-dark);
579
+ }
580
+
581
+ .trending-post-date {
582
+ font-size: 0.75rem;
583
+ color: var(--text);
584
+ opacity: 0.7;
585
+ }
586
+
587
+ .dark .trending-post-date {
588
+ color: var(--text-dark);
589
+ }
590
+
591
+ /* Single Post */
592
+ .post-header {
593
+ margin-bottom: 2rem;
594
+ }
595
+
596
+ .post-title-single {
597
+ font-size: 2rem;
598
+ font-weight: 700;
599
+ margin-bottom: 1rem;
600
+ color: var(--text);
601
+ }
602
+
603
+ .dark .post-title-single {
604
+ color: var(--text-dark);
605
+ }
606
+
607
+ .post-meta-single {
608
+ display: flex;
609
+ flex-wrap: wrap;
610
+ gap: 1rem;
611
+ margin-bottom: 1rem;
612
+ font-size: 0.875rem;
613
+ color: var(--text);
614
+ opacity: 0.8;
615
+ }
616
+
617
+ .dark .post-meta-single {
618
+ color: var(--text-dark);
619
+ }
620
+
621
+ .post-featured-img {
622
+ width: 100%;
623
+ max-height: 500px;
624
+ object-fit: cover;
625
+ border-radius: 0.5rem;
626
+ margin-bottom: 2rem;
627
+ background-color: #e5e7eb;
628
+ }
629
+
630
+ .post-content-single {
631
+ line-height: 1.7;
632
+ color: var(--text);
633
+ }
634
+
635
+ .dark .post-content-single {
636
+ color: var(--text-dark);
637
+ }
638
+
639
+ .post-content-single p {
640
+ margin-bottom: 1.5rem;
641
+ }
642
+
643
+ .post-content-single h2,
644
+ .post-content-single h3,
645
+ .post-content-single h4 {
646
+ margin: 2rem 0 1rem;
647
+ color: var(--text);
648
+ }
649
+
650
+ .dark .post-content-single h2,
651
+ .dark .post-content-single h3,
652
+ .dark .post-content-single h4 {
653
+ color: var(--text-dark);
654
+ }
655
+
656
+ .post-content-single a {
657
+ text-decoration: underline;
658
+ }
659
+
660
+ .post-tags {
661
+ display: flex;
662
+ flex-wrap: wrap;
663
+ gap: 0.5rem;
664
+ margin: 2rem 0;
665
+ }
666
+
667
+ /* Related Posts */
668
+ .related-posts {
669
+ margin: 3rem 0;
670
+ }
671
+
672
+ .related-title {
673
+ font-size: 1.5rem;
674
+ font-weight: 600;
675
+ margin-bottom: 1.5rem;
676
+ color: var(--text);
677
+ }
678
+
679
+ .dark .related-title {
680
+ color: var(--text-dark);
681
+ }
682
+
683
+ .related-grid {
684
+ display: grid;
685
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
686
+ gap: 1.5rem;
687
+ }
688
+
689
+ /* Footer */
690
+ .footer {
691
+ background-color: var(--card-bg);
692
+ padding: 3rem 0;
693
+ margin-top: 3rem;
694
+ }
695
+
696
+ .dark .footer {
697
+ background-color: var(--card-bg-dark);
698
+ }
699
+
700
+ .footer-container {
701
+ display: grid;
702
+ grid-template-columns: repeat(1, 1fr);
703
+ gap: 2rem;
704
+ }
705
+
706
+ @media (min-width: 768px) {
707
+ .footer-container {
708
+ grid-template-columns: repeat(4, 1fr);
709
+ }
710
+ }
711
+
712
+ .footer-widget-title {
713
+ font-size: 1.125rem;
714
+ font-weight: 600;
715
+ margin-bottom: 1.5rem;
716
+ color: var(--text);
717
+ }
718
+
719
+ .dark .footer-widget-title {
720
+ color: var(--text-dark);
721
+ }
722
+
723
+ .footer-logo {
724
+ display: flex;
725
+ align-items: center;
726
+ gap: 0.5rem;
727
+ font-weight: 700;
728
+ font-size: 1.25rem;
729
+ margin-bottom: 1rem;
730
+ }
731
+
732
+ .footer-logo-icon {
733
+ width: 2rem;
734
+ height: 2rem;
735
+ border-radius: 50%;
736
+ background-color: var(--primary);
737
+ color: white;
738
+ display: flex;
739
+ align-items: center;
740
+ justify-content: center;
741
+ }
742
+
743
+ .footer-about {
744
+ font-size: 0.875rem;
745
+ color: var(--text);
746
+ opacity: 0.8;
747
+ margin-bottom: 1rem;
748
+ }
749
+
750
+ .dark .footer-about {
751
+ color: var(--text-dark);
752
+ }
753
+
754
+ .footer-social {
755
+ display: flex;
756
+ gap: 0.75rem;
757
+ }
758
+
759
+ .social-link {
760
+ width: 2.5rem;
761
+ height: 2.5rem;
762
+ border-radius: 50%;
763
+ background-color: var(--border);
764
+ display: flex;
765
+ align-items: center;
766
+ justify-content: center;
767
+ color: var(--text);
768
+ transition: background-color 0.2s ease, color 0.2s ease;
769
+ }
770
+
771
+ .dark .social-link {
772
+ background-color: var(--border-dark);
773
+ color: var(--text-dark);
774
+ }
775
+
776
+ .social-link:hover {
777
+ background-color: var(--primary);
778
+ color: white;
779
+ }
780
+
781
+ .footer-links {
782
+ display: flex;
783
+ flex-direction: column;
784
+ gap: 0.75rem;
785
+ }
786
+
787
+ .footer-link {
788
+ color: var(--text);
789
+ opacity: 0.8;
790
+ font-size: 0.875rem;
791
+ transition: opacity 0.2s ease;
792
+ }
793
+
794
+ .dark .footer-link {
795
+ color: var(--text-dark);
796
+ }
797
+
798
+ .footer-link:hover {
799
+ opacity: 1;
800
+ }
801
+
802
+ .footer-bottom {
803
+ margin-top: 2rem;
804
+ padding-top: 2rem;
805
+ border-top: 1px solid var(--border);
806
+ text-align: center;
807
+ font-size: 0.875rem;
808
+ color: var(--text);
809
+ opacity: 0.7;
810
+ }
811
+
812
+ .dark .footer-bottom {
813
+ border-top-color: var(--border-dark);
814
+ color: var(--text-dark);
815
+ }
816
+
817
+ /* Mobile Menu */
818
+ .mobile-menu {
819
+ display: none;
820
+ background-color: var(--bg);
821
+ padding: 1rem;
822
+ border-top: 1px solid var(--border);
823
+ }
824
+
825
+ .dark .mobile-menu {
826
+ background-color: var(--bg-dark);
827
+ border-top-color: var(--border-dark);
828
+ }
829
+
830
+ .mobile-menu.active {
831
+ display: block;
832
+ }
833
+
834
+ .mobile-nav {
835
+ display: flex;
836
+ flex-direction: column;
837
+ gap: 0.75rem;
838
+ }
839
+
840
+ .mobile-nav-link {
841
+ padding: 0.5rem 0;
842
+ color: var(--text);
843
+ }
844
+
845
+ .dark .mobile-nav-link {
846
+ color: var(--text-dark);
847
+ }
848
+
849
+ /* Responsive */
850
+ @media (max-width: 768px) {
851
+ .nav {
852
+ display: none;
853
+ }
854
+
855
+ .mobile-menu-btn {
856
+ display: block;
857
+ }
858
+
859
+ .slide-img {
860
+ height: 300px;
861
+ }
862
+
863
+ .slide-content {
864
+ padding: 1rem;
865
+ }
866
+
867
+ .slide-title {
868
+ font-size: 1.25rem;
869
+ }
870
+ }
871
+
872
+ /* Loading Animation */
873
+ .loading {
874
+ display: flex;
875
+ justify-content: center;
876
+ align-items: center;
877
+ padding: 2rem;
878
+ }
879
+
880
+ .loading-spinner {
881
+ width: 2rem;
882
+ height: 2rem;
883
+ border: 3px solid var(--border);
884
+ border-top-color: var(--primary);
885
+ border-radius: 50%;
886
+ animation: spin 1s linear infinite;
887
+ }
888
+
889
+ .dark .loading-spinner {
890
+ border-color: var(--border-dark);
891
+ border-top-color: var(--primary);
892
+ }
893
+
894
+ @keyframes spin {
895
+ to {
896
+ transform: rotate(360deg);
897
+ }
898
+ }
899
+
900
+ /* Infinite Scroll */
901
+ .infinite-scroll-loading {
902
+ grid-column: 1 / -1;
903
+ }
904
+ </style>
905
+
906
+ <!-- SEO Meta Tags -->
907
+ <b:if cond='data:blog.pageType == &quot;index&quot;'>
908
+ <meta expr:content='data:blog.pageTitle + &quot; - &quot; + data:blog.title' name='title'/>
909
+ <meta expr:content='data:blog.metaDescription' name='description'/>
910
+ <b:else/>
911
+ <meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='title'/>
912
+ <meta expr:content='data:blog.pageName + &quot;. &quot; + data:blog.title + &quot;. &quot; + data:blog.metaDescription' name='description'/>
913
+ </b:if>
914
+
915
+ <meta content='index, follow' name='robots'/>
916
+ <meta content='max-snippet:-1, max-image-preview:large, max-video-preview:-1' name='robots'/>
917
+
918
+ <!-- Open Graph / Facebook -->
919
+ <meta content='website' property='og:type'/>
920
+ <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
921
+ <b:if cond='data:blog.pageType == &quot;index&quot;'>
922
+ <meta expr:content='data:blog.pageTitle + &quot; - &quot; + data:blog.title' property='og:title'/>
923
+ <b:else/>
924
+ <meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' property='og:title'/>
925
+ </b:if>
926
+ <meta expr:content='data:blog.metaDescription' property='og:description'/>
927
+ <meta expr:content='data:blog.title' property='og:site_name'/>
928
+
929
+ <!-- Twitter -->
930
+ <meta content='summary_large_image' name='twitter:card'/>
931
+ <meta expr:content='data:blog.pageTitle' name='twitter:title'/>
932
+ <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
933
+
934
+ <!-- Structured Data -->
935
+ <script type='application/ld+json'>
936
+ {
937
+ "@context": "https://schema.org",
938
+ "@type": "WebSite",
939
+ "name": "<data:blog.title/>",
940
+ "url": "<data:blog.url/>",
941
+ "potentialAction": {
942
+ "@type": "SearchAction",
943
+ "target": "<data:blog.url/>?q={search_term_string}",
944
+ "query-input": "required name=search_term_string"
945
+ }
946
+ }
947
+ </script>
948
+
949
+ <b:if cond='data:blog.pageType == &quot;index&quot;'>
950
+ <script type='application/ld+json'>
951
+ {
952
+ "@context": "https://schema.org",
953
+ "@type": "Blog",
954
+ "headline": "<data:blog.title/>",
955
+ "description": "<data:blog.metaDescription/>",
956
+ "url": "<data:blog.url/>",
957
+ "publisher": {
958
+ "@type": "Organization",
959
+ "name": "<data:blog.title/>",
960
+ "logo": {
961
+ "@type": "ImageObject",
962
+ "url": "https://via.placeholder.com/600x315"
963
+ }
964
+ }
965
+ }
966
+ </script>
967
+ </b:if>
968
+
969
+ <b:if cond='data:blog.pageType == &quot;item&quot;'>
970
+ <script type='application/ld+json'>
971
+ {
972
+ "@context": "https://schema.org",
973
+ "@type": "BlogPosting",
974
+ "headline": "<data:blog.pageName/>",
975
+ "description": "<data:blog.metaDescription/>",
976
+ "url": "<data:blog.url/>",
977
+ "datePublished": "<data:blog.post.date.iso8601/>",
978
+ "dateModified": "<data:blog.post.lastUpdated.iso8601/>",
979
+ "author": {
980
+ "@type": "Person",
981
+ "name": "<data:blog.post.author.name/>"
982
+ },
983
+ "publisher": {
984
+ "@type": "Organization",
985
+ "name": "<data:blog.title/>",
986
+ "logo": {
987
+ "@type": "ImageObject",
988
+ "url": "https://via.placeholder.com/600x315"
989
+ }
990
+ },
991
+ "mainEntityOfPage": {
992
+ "@type": "WebPage",
993
+ "@id": "<data:blog.url/>"
994
+ }
995
+ }
996
+ </script>
997
+ </b:if>
998
+ </head>
999
+
1000
+ <body class='loading'>
1001
+ <!-- Header -->
1002
+ <header class='header'>
1003
+ <div class='container header-container'>
1004
+ <a class='logo' expr:href='data:blog.homepageUrl'>
1005
+ <span class='logo-icon'>B</span>
1006
+ <span><data:blog.title/></span>
1007
+ </a>
1008
+
1009
+ <nav class='nav'>
1010
+ <a class='nav-link' expr:href='data:blog.homepageUrl'>Home</a>
1011
+ <a class='nav-link' href='#'>Categories</a>
1012
+ <a class='nav-link' href='#'>About</a>
1013
+ <a class='nav-link' href='#'>Contact</a>
1014
+ </nav>
1015
+
1016
+ <div class='header-actions'>
1017
+ <button class='theme-toggle' id='themeToggle'>
1018
+ <i class='fas fa-moon'></i>
1019
+ </button>
1020
+ <button class='mobile-menu-btn' id='mobileMenuBtn'>
1021
+ <i class='fas fa-bars'></i>
1022
+ </button>
1023
+ </div>
1024
+ </div>
1025
+
1026
+ <!-- Mobile Menu -->
1027
+ <div class='mobile-menu' id='mobileMenu'>
1028
+ <nav class='mobile-nav'>
1029
+ <a class='mobile-nav-link' expr:href='data:blog.homepageUrl'>Home</a>
1030
+ <a class='mobile-nav-link' href='#'>Categories</a>
1031
+ <a class='mobile-nav-link' href='#'>About</a>
1032
+ <a class='mobile-nav-link' href='#'>Contact</a>
1033
+ </nav>
1034
+ </div>
1035
+ </header>
1036
+
1037
+ <!-- Main Content -->
1038
+ <main class='container'>
1039
+ <b:section id='main' showaddelement='yes'>
1040
+ <b:widget id='FeaturedPosts1' locked='false' title='Featured Posts' type='FeaturedPost'>
1041
+ <b:includable id='main'>
1042
+ <div class='hero-slider'>
1043
+ <div class='slider-container' id='featuredSlider'>
1044
+ <b:loop values='data:posts' var='post'>
1045
+ <div class='slide'>
1046
+ <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)'/>
1047
+ <div class='slide-content'>
1048
+ <span class='slide-category'>
1049
+ <b:loop values='data:post.labels' var='label'>
1050
+ <b:if cond='data:label.isLast != &quot;true&quot;'>
1051
+ <data:label.name/>,
1052
+ <b:else/>
1053
+ <data:label.name/>
1054
+ </b:if>
1055
+ </b:loop>
1056
+ </span>
1057
+ <h3 class='slide-title'>
1058
+ <a expr:href='data:post.url'><data:post.title/></a>
1059
+ </h3>
1060
+ <p class='slide-excerpt'><data:post.snippet/></p>
1061
+ <div class='slide-meta'>
1062
+ <span><data:post.date/></span>
1063
+ <span>•</span>
1064
+ <span><data:post.author.name/></span>
1065
+ </div>
1066
+ </div>
1067
+ </div>
1068
+ </b:loop>
1069
+ </div>
1070
+
1071
+ <div class='slider-nav'>
1072
+ <b:loop values='data:posts' var='post' index='index'>
1073
+ <button class='slider-dot' expr:data-index='data:index'></button>
1074
+ </b:loop>
1075
+ </div>
1076
+ </div>
1077
+ </b:includable>
1078
+ </b:widget>
1079
+
1080
+ <div class='main-content'>
1081
+ <div class='content-area'>
1082
+ <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'>
1083
+ <b:includable id='main' var='top'>
1084
+ <b:if cond='data:mobile == &quot;false&quot;'>
1085
+ <b:include data='top' name='status-message'/>
1086
+ </b:if>
1087
+
1088
+ <div class='posts-grid' id='blog-posts'>
1089
+ <b:include data='top' name='blog'/>
1090
+ </div>
1091
+
1092
+ <div class='infinite-scroll-loading' id='blog-loading'>
1093
+ <div class='loading'>
1094
+ <div class='loading-spinner'></div>
1095
+ </div>
1096
+ </div>
1097
+
1098
+ <b:if cond='data:blog.pageType != &quot;item&quot;'>
1099
+ <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
1100
+ <b:include name='nextprev'/>
1101
+ </b:if>
1102
+ </b:if>
1103
+ </b:includable>
1104
+
1105
+ <b:includable id='blog' var='top'>
1106
+ <b:loop values='data:posts' var='post'>
1107
+ <article class='post-card'>
1108
+ <a expr:href='data:post.url'>
1109
+ <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)'/>
1110
+ </a>
1111
+ <div class='post-content'>
1112
+ <span class='post-category'>
1113
+ <b:loop values='data:post.labels' var='label'>
1114
+ <b:if cond='data:label.isLast != &quot;true&quot;'>
1115
+ <data:label.name/>,
1116
+ <b:else/>
1117
+ <data:label.name/>
1118
+ </b:if>
1119
+ </b:loop>
1120
+ </span>
1121
+ <h3 class='post-title'>
1122
+ <a expr:href='data:post.url'><data:post.title/></a>
1123
+ </h3>
1124
+ <p class='post-excerpt'><data:post.snippet length='100'/></p>
1125
+ <div class='post-meta'>
1126
+ <span><data:post.date/></span>
1127
+ <span><data:post.author.name/></span>
1128
+ </div>
1129
+ </div>
1130
+ </article>
1131
+ </b:loop>
1132
+ </b:includable>
1133
+
1134
+ <b:includable id='nextprev'>
1135
+ <div class='blog-pager' id='blog-pager'>
1136
+ <b:if cond='data:blog.url != data:blog.homepageUrl'>
1137
+ <b:if cond='data:blog.url != data:blog.homepageUrl'>
1138
+ <b:if cond='data:blog.pageType != &quot;item&quot;'>
1139
+ <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
1140
+ <b:if cond='data:blog.url != data:blog.newestPageUrl'>
1141
+ <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'>
1142
+ Older Posts →
1143
+ </a>
1144
+ </b:if>
1145
+
1146
+ <b:if cond='data:blog.url != data:blog.oldestPageUrl'>
1147
+ <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'>
1148
+ ← Newer Posts
1149
+ </a>
1150
+ </b:if>
1151
+ </b:if>
1152
+ </b:if>
1153
+ </b:if>
1154
+ </b:if>
1155
+
1156
+ <a class='home-link' expr:href='data:blog.homepageUrl'>Home</a>
1157
+ </div>
1158
+ </b:includable>
1159
+
1160
+ <b:includable id='status-message'>
1161
+ <b:if cond='data:navMessage'>
1162
+ <div class='status-msg-wrap'>
1163
+ <div class='status-msg-body'>
1164
+ <data:navMessage/>
1165
+ </div>
1166
+ </div>
1167
+ <b:else/>
1168
+ <b:if cond='data:showMobile'>
1169
+ <div class='status-msg-wrap'>
1170
+ <div class='status-msg-body'>
1171
+ <data:showMobileMessage/>
1172
+ </div>
1173
+ </div>
1174
+ </b:if>
1175
+ </b:if>
1176
+ </b:includable>
1177
+ </b:widget>
1178
+ </div>
1179
+
1180
+ <div class='sidebar'>
1181
+ <b:widget id='Profile1' locked='false' title='About Me' type='Profile'>
1182
+ <b:includable id='main'>
1183
+ <div class='sidebar-widget about-widget'>
1184
+ <img class='about-avatar' expr:alt='data:title' expr:src='data:userPhoto.url'/>
1185
+ <h3 class='about-name'><data:title/></h3>
1186
+ <p class='about-bio'><data:userDescription/></p>
1187
+ <a class='button' href='#'>Read More</a>
1188
+ </div>
1189
+ </b:includable>
1190
+ </b:widget>
1191
+
1192
+ <b:widget id='Label1' locked='false' title='Categories' type='Label'>
1193
+ <b:includable id='main'>
1194
+ <div class='sidebar-widget'>
1195
+ <h3 class='widget-title'>Categories</h3>
1196
+ <div class='categories-list'>
1197
+ <b:loop values='data:labels' var='label'>
1198
+ <div class='category-item'>
1199
+ <a class='category-link' expr:href='data:label.url'><data:label.name/></a>
1200
+ <span class='category-count'><data:label.count/></span>
1201
+ </div>
1202
+ </b:loop>
1203
+ </div>
1204
+ </div>
1205
+ </b:includable>
1206
+ </b:widget>
1207
+
1208
+ <b:widget id='HTML1' locked='false' title='Newsletter' type='HTML'>
1209
+ <b:includable id='main'>
1210
+ <div class='sidebar-widget'>
1211
+ <h3 class='widget-title'>Newsletter</h3>
1212
+ <form class='newsletter-form'>
1213
+ <input class='newsletter-input' placeholder='Your email' type='email'/>
1214
+ <button class='newsletter-button' type='submit'>Subscribe</button>
1215
+ </form>
1216
+ </div>
1217
+ </b:includable>
1218
+ </b:widget>
1219
+
1220
+ <b:widget id='PopularPosts1' locked='false' title='Trending Posts' type='PopularPosts'>
1221
+ <b:includable id='main'>
1222
+ <div class='sidebar-widget'>
1223
+ <h3 class='widget-title'>Trending Posts</h3>
1224
+ <div class='trending-posts'>
1225
+ <b:loop values='data:posts' var='post'>
1226
+ <div class='trending-post'>
1227
+ <a expr:href='data:post.url'>
1228
+ <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)'/>
1229
+ </a>
1230
+ <div>
1231
+ <h4 class='trending-post-title'>
1232
+ <a expr:href='data:post.url'><data:post.title/></a>
1233
+ </h4>
1234
+ <span class='trending-post-date'><data:post.date/></span>
1235
+ </div>
1236
+ </div>
1237
+ </b:loop>
1238
+ </div>
1239
+ </div>
1240
+ </b:includable>
1241
+ </b:widget>
1242
+
1243
+ <b:widget id='HTML2' locked='false' title='Tags' type='HTML'>
1244
+ <b:includable id='main'>
1245
+ <div class='sidebar-widget'>
1246
+ <h3 class='widget-title'>Tags</h3>
1247
+ <div class='tags-list'>
1248
+ <b:loop values='data:post.labels' var='label'>
1249
+ <a class='tag-link' expr:href='data:label.url'><data:label.name/></a>
1250
+ </b:loop>
1251
+ </div>
1252
+ </div>
1253
+ </b:includable>
1254
+ </b:widget>
1255
+ </div>
1256
+ </div>
1257
+ </b:section>
1258
+ </main>
1259
+
1260
+ <!-- Footer -->
1261
+ <footer class='footer'>
1262
+ <div class='container footer-container'>
1263
+ <div class='footer-widget'>
1264
+ <div class='footer-logo'>
1265
+ <span class='footer-logo-icon'>B</span>
1266
+ <span><data:blog.title/></span>
1267
+ </div>
1268
+ <p class='footer-about'>
1269
+ A modern blogging platform for sharing ideas and stories.
1270
+ </p>
1271
+ <div class='footer-social'>
1272
+ <a class='social-link' href='#'><i class='fab fa-facebook-f'></i></a>
1273
+ <a class='social-link' href='#'><i class='fab fa-twitter'></i></a>
1274
+ <a class='social-link' href='#'><i class='fab fa-instagram'></i></a>
1275
+ <a class='social-link' href='#'><i class='fab fa-linkedin-in'></i></a>
1276
+ </div>
1277
+ </div>
1278
+
1279
+ <div class='footer-widget'>
1280
+ <h3 class='footer-widget-title'>Quick Links</h3>
1281
+ <div class='footer-links'>
1282
+ <a class='footer-link' expr:href='data:blog.homepageUrl'>Home</a>
1283
+ <a class='footer-link' href='#'>About</a>
1284
+ <a class='footer-link' href='#'>Blog</a>
1285
+ <a class='footer-link' href='#'>Contact</a>
1286
+ </div>
1287
+ </div>
1288
+
1289
+ <div class='footer-widget'>
1290
+ <h3 class='footer-widget-title'>Categories</h3>
1291
+ <div class='footer-links'>
1292
+ <b:loop values='data:labels' var='label'>
1293
+ <a class='footer-link' expr:href='data:label.url'><data:label.name/></a>
1294
+ </b:loop>
1295
+ </div>
1296
+ </div>
1297
+
1298
+ <div class='footer-widget'>
1299
+ <h3 class='footer-widget-title'>Contact</h3>
1300
+ <div class='footer-links'>
1301
+ <a class='footer-link' href='mailto:[email protected]'>[email protected]</a>
1302
+ <a class='footer-link' href='tel:+1234567890'>+1 (234) 567-890</a>
1303
+ <a class='footer-link' href='#'>123 Blog Street, City</a>
1304
+ </div>
1305
+ </div>
1306
+ </div>
1307
+
1308
+ <div class='container footer-bottom'>
1309
+ <p>© <data:blog.title/> <script>document.write(new Date().getFullYear())</script>. All rights reserved.</p>
1310
+ </div>
1311
+ </footer>
1312
+
1313
+ <!-- Scripts -->
1314
+ <script>
1315
+ // Theme Toggle
1316
+ const themeToggle = document.getElementById('themeToggle');
1317
+ const body = document.body;
1318
+
1319
+ // Check for saved theme preference or use preferred color scheme
1320
+ if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
1321
+ body.classList.add('dark');
1322
+ themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
1323
+ } else {
1324
+ body.classList.remove('dark');
1325
+ themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
1326
+ }
1327
+
1328
+ themeToggle.addEventListener('click', () => {
1329
+ body.classList.toggle('dark');
1330
+ if (body.classList.contains('dark')) {
1331
+ localStorage.setItem('theme', 'dark');
1332
+ themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
1333
+ } else {
1334
+ localStorage.setItem('theme', 'light');
1335
+ themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
1336
+ }
1337
+ });
1338
+
1339
+ // Mobile Menu Toggle
1340
+ const mobileMenuBtn = document.getElementById('mobileMenuBtn');
1341
+ const mobileMenu = document.getElementById('mobileMenu');
1342
+
1343
+ mobileMenuBtn.addEventListener('click', () => {
1344
+ mobileMenu.classList.toggle('active');
1345
+ });
1346
+
1347
+ // Featured Slider
1348
+ const featuredSlider = document.getElementById('featuredSlider');
1349
+ const sliderDots = document.querySelectorAll('.slider-dot');
1350
+
1351
+ if (featuredSlider) {
1352
+ let currentSlide = 0;
1353
+
1354
+ // Set first dot as active
1355
+ if (sliderDots.length > 0) {
1356
+ sliderDots[0].classList.add('active');
1357
+ }
1358
+
1359
+ // Update slider position
1360
+ function updateSliderPosition() {
1361
+ const slideWidth = document.querySelector('.slide').offsetWidth;
1362
+ featuredSlider.scrollTo({
1363
+ left: currentSlide * (slideWidth + 16), // 16 is the gap between slides
1364
+ behavior: 'smooth'
1365
+ });
1366
+
1367
+ // Update active dot
1368
+ sliderDots.forEach((dot, index) => {
1369
+ if (index === currentSlide) {
1370
+ dot.classList.add('active');
1371
+ } else {
1372
+ dot.classList.remove('active');
1373
+ }
1374
+ });
1375
+ }
1376
+
1377
+ // Dot navigation
1378
+ sliderDots.forEach((dot, index) => {
1379
+ dot.addEventListener('click', () => {
1380
+ currentSlide = index;
1381
+ updateSliderPosition();
1382
+ });
1383
+ });
1384
+
1385
+ // Auto slide
1386
+ let slideInterval = setInterval(() => {
1387
+ currentSlide = (currentSlide + 1) % sliderDots.length;
1388
+ updateSliderPosition();
1389
+ }, 5000);
1390
+
1391
+ // Pause on hover
1392
+ featuredSlider.addEventListener('mouseenter', () => {
1393
+ clearInterval(slideInterval);
1394
+ });
1395
+
1396
+ featuredSlider.addEventListener('mouseleave', () => {
1397
+ slideInterval = setInterval(() => {
1398
+ currentSlide = (currentSlide + 1) % sliderDots.length;
1399
+ updateSliderPosition();
1400
+ }, 5000);
1401
+ });
1402
+ }
1403
+
1404
+ // Infinite Scroll
1405
+ const blogPosts = document.getElementById('blog-posts');
1406
+ const blogLoading = document.getElementById('blog-loading');
1407
+ let isLoading = false;
1408
+
1409
+ if (blogPosts) {
1410
+ window.addEventListener('scroll', () => {
1411
+ const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
1412
+
1413
+ if (scrollTop + clientHeight >= scrollHeight - 500 && !isLoading) {
1414
+ loadMorePosts();
1415
+ }
1416
+ });
1417
+
1418
+ function loadMorePosts() {
1419
+ const nextPageLink = document.querySelector('.blog-pager-older-link');
1420
+
1421
+ if (nextPageLink && !isLoading) {
1422
+ isLoading = true;
1423
+ blogLoading.style.display = 'flex';
1424
+
1425
+ fetch(nextPageLink.href)
1426
+ .then(response => response.text())
1427
+ .then(html => {
1428
+ const parser = new DOMParser();
1429
+ const doc = parser.parseFromString(html, 'text/html');
1430
+ const newPosts = doc.querySelector('#blog-posts').innerHTML;
1431
+ const newNextPageLink = doc.querySelector('.blog-pager-older-link');
1432
+
1433
+ blogPosts.innerHTML += newPosts;
1434
+
1435
+ if (newNextPageLink) {
1436
+ document.querySelector('.blog-pager-older-link').href = newNextPageLink.href;
1437
+ } else {
1438
+ document.querySelector('.blog-pager').remove();
1439
+ }
1440
+
1441
+ isLoading = false;
1442
+ blogLoading.style.display = 'none';
1443
+ })
1444
+ .catch(error => {
1445
+ console.error('Error loading more posts:', error);
1446
+ isLoading = false;
1447
+ blogLoading.style.display = 'none';
1448
+ });
1449
+ }
1450
+ }
1451
+ }
1452
+
1453
+ // Remove loading class when page is loaded
1454
+ window.addEventListener('load', () => {
1455
+ document.body.classList.remove('loading');
1456
+ });
1457
+ </script>
1458
+ <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>
1459
+ </html>