-
Notifications
You must be signed in to change notification settings - Fork 591
/
blog.html
323 lines (300 loc) · 14.3 KB
/
blog.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blogs</title>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="blog.css">
<link rel="icon" type="image/x-icon" href="favicon.ico"/>
<style>
::-webkit-scrollbar{
width: 15px;
}
::-webkit-scrollbar-track{
background: #d1e5ff;
}
::-webkit-scrollbar-thumb{
background: linear-gradient( 90deg,rgb(63, 120, 244),rgb(245, 89, 239) );
border-radius: 10px;
height: 100px;
}
</style>
</head>
<body>
<a href="./index.html" class="home-button">
<i class="fas fa-home"></i> TourGuide
</a>
<video autoplay muted loop id="background-video">
<source src="./flying_balloon.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="video-overlay"></div>
<section class="hero">
<div class="hero-content">
<h1>Our TourGuide Blogs</h1>
<p>Discover amazing travel stories and experiences.</p>
<br>
<br>
<br>
<br>
<h2>Scroll down to see the blogs</h2>
<h1>↓</h1>
</div>
</section>
<div class="content-wrapper">
<main>
<div class="filter-controls">
<button id="reset-filters" class="reset-filters-btn">Reset Filters</button>
</div>
<section id="blog-posts">
<!-- Blog posts will be dynamically inserted here -->
</section>
<aside>
<div class="widget semi-transparent-box" id="categories-widget">
<h3>Popular Categories</h3>
<ul id="categories-list">
<!-- Categories will be dynamically inserted here -->
</ul>
</div>
<div class="widget semi-transparent-box">
<h3>Useful Links</h3>
<ul>
<li><a href="./plantrip.html">Plan Your Trip</a></li>
<li><a href="./index.html#hotel">Book Your Hotel</a></li>
<li><a href="./feedback.html">Rate Our Services</a></li>
<li><a href="./index.html#testimonials">Know from Our Past Customers</a></li>
</ul>
</div>
<div class="widget semi-transparent-box">
<h3>Related Posts</h3>
<!-- Related posts will be dynamically inserted here -->
</div>
<div class="widget semi-transparent-box">
<h3>Subscribe to Our Newsletter</h3>
<form class="newsletter-form">
<input type="email" placeholder="Your email address" required>
<button type="submit">Subscribe</button>
</form>
</div>
</aside>
</main>
</div>
<script>
const blogPosts = [
{
title: "Island Hopping in Greece: A Mediterranean Odyssey",
date: "July 12, 2024",
author: "Nikos Papadopoulos",
image: "./img/pexels-josh-hild-2422259.jpg",
content: "Embark on a sun-soaked journey through the Greek islands, from the iconic white-washed buildings of Santorini to the vibrant nightlife of Mykonos and the historical wonders of Crete. Discover hidden beaches, indulge in mouthwatering cuisine, and immerse yourself in the rich tapestry of Greek culture.",
tags: ["Greece", "Islands", "Mediterranean", "Culture"],
likes: 342,
comments: 56,
link: "#"
},
{
title: "A Week in Bali: Discovering Paradise and Inner Peace",
date: "July 16, 2024",
author: "Emma Thompson",
image: "./img/bali.jpg",
content: "Bali, the Island of Gods, offers a perfect blend of spiritual awakening and tropical bliss. From the serene rice terraces of Ubud to the bustling beaches of Seminyak, experience a week of yoga retreats, traditional ceremonies, and unforgettable sunsets that will rejuvenate your body and soul.",
tags: ["Bali", "Wellness", "Beaches", "Culture"],
likes: 287,
comments: 42,
link: "#"
},
{
title: "Conquering the Inca Trail: A Journey to Machu Picchu",
date: "July 15, 2024",
author: "Carlos Rodriguez",
image: "./img/machu picchu.jpg",
content: "Follow in the footsteps of ancient Incas as we trek through the challenging but rewarding Inca Trail. Witness breathtaking Andean vistas, explore mysterious ruins, and finally arrive at the magnificent lost city of Machu Picchu. An adventure that will test your limits and leave you in awe.",
tags: ["Peru", "Hiking", "History", "Adventure"],
likes: 401,
comments: 73,
link: "#"
},
{
title: "Cherry Blossom Magic: Springtime in Japan",
date: "July 14, 2024",
author: "Yuki Tanaka",
image: "./img/cherry_blossom.jpg",
content: "Experience the ephemeral beauty of Japan's cherry blossom season. From the bustling streets of Tokyo to the serene gardens of Kyoto, witness the country transform into a pink wonderland. Partake in hanami picnics, visit ancient temples, and immerse yourself in the timeless traditions of Japan.",
tags: ["Japan", "Cherry Blossoms", "Culture", "Spring"],
likes: 365,
comments: 58,
link: "#"
},
{
title: "Wildlife Safari in Kenya: An Unforgettable Adventure",
date: "July 22, 2024",
author: "Zara Patel",
image: "./img/kenya_safari.jpg",
content: "Embark on a thrilling safari through the vast African savanna. Encounter majestic lions, graceful giraffes, and powerful elephants in their natural habitat. Experience the magic of the African wilderness.",
tags: ["Africa", "Safari", "Wildlife", "Adventure","Kenya"],
likes: 385,
comments: 72,
link: "#"
},
{
title: "Hiking the Appalachian Trail: A Journey of Self-Discovery",
date: "July 21, 2024",
author: "Ben Carter",
image: "./img/appalachian_trail.jpg",
content: "Challenge yourself with a hike along the iconic Appalachian Trail. Discover stunning natural beauty, encounter diverse wildlife, and connect with nature on a deeper level.",
tags: ["Hiking", "Nature", "Adventure", "USA"],
likes: 312,
comments: 48,
link: "#"
},
{
title: "Exploring the Wonders of the Amazon Rainforest",
date: "July 23, 2024",
author: "Maria Silva",
image: "./img/amazon_rainforest.jpg",
content: "Immerse yourself in the lush greenery of the Amazon rainforest. Encounter exotic wildlife, learn about indigenous cultures, and contribute to rainforest conservation.",
tags: ["Amazon", "Rainforest", "Nature", "Conservation"],
likes: 420,
comments: 85,
link: "#"
},
{
title: "Culinary Tour of Italy: A Taste of La Dolce Vita",
date: "July 24, 2024",
author: "Luca Rossi",
image: "./img/italian_food.jpg",
content: "Indulge your taste buds with a culinary journey through Italy. From the rich flavors of Bologna to the fresh seafood of Sicily, experience the authentic taste of Italian cuisine.",
tags: ["Italy", "Food", "Travel", "Culture"],
likes: 350,
comments: 60,
link: "#"
},
{
title: "Discovering the Hidden Gems of Southeast Asia",
date: "July 25, 2024",
author: "Linh Nguyen",
image: "./img/southeast_asia.jpg",
content: "Uncover the hidden treasures of Southeast Asia. Explore bustling cities, relax on pristine beaches, and immerse yourself in rich cultural experiences.",
tags: ["Southeast Asia", "Travel", "Culture", "Adventure"],
likes: 390,
comments: 75,
link: "#"
},
{
title: "Winter Wonderland: A Ski Vacation in the Alps",
date: "July 26, 2024",
author: "Chloe Dubois",
image: "./img/alps_skiing.jpg",
content: "Escape the winter blues with a thrilling ski vacation in the Alps. Enjoy breathtaking mountain views, carve fresh powder, and cozy up by a fireplace in the evening.",
tags: ["Alps", "Skiing", "Winter", "Adventure"],
likes: 330,
comments: 55,
link: "#"
},
{
title: "Exploring the Ancient Ruins of Egypt: A Journey Through Time",
date: "July 27, 2024",
author: "Omar Ahmed",
image: "./img/egypt_ruins.jpg",
content: "Unveil the mysteries of ancient Egypt by visiting iconic landmarks like the pyramids of Giza and the Sphinx. Immerse yourself in the rich history and culture of this fascinating country.",
tags: ["Egypt", "History", "Culture", "Adventure"],
likes: 410,
comments: 80,
link: "#"
}
];
function filterPostsByTag(tag) {
const filteredPosts = blogPosts.filter(post => post.tags.includes(tag));
displayPosts(filteredPosts);
}
function displayPosts(posts) {
const blogSection = document.getElementById("blog-posts");
blogSection.innerHTML = ''; // Clear existing posts
posts.forEach(post => {
const article = document.createElement("article");
article.className = "blog-post semi-transparent-box";
article.innerHTML = `
<img src="${post.image}" alt="${post.title}" class="blog-image">
<div class="blog-content">
<h2>${post.title}</h2>
<div class="post-meta">
<span class="author"><i class="fas fa-user"></i> ${post.author}</span>
<span class="date"><i class="far fa-calendar-alt"></i> ${post.date}</span>
<span class="likes"><i class="fas fa-heart"></i> ${post.likes}</span>
<span class="comments"><i class="fas fa-comment"></i> ${post.comments}</span>
</div>
<p>${post.content}</p>
<div class="tags">
${post.tags.map(tag => `<span class="tag" onclick="filterPostsByTag('${tag}')">${tag}</span>`).join('')}
</div>
<a href="${post.link}" class="read-more">Read More <i class="fas fa-arrow-right"></i></a>
</div>
`;
blogSection.appendChild(article);
});
}
function resetFilters() {
displayPosts(blogPosts);
}
document.addEventListener("DOMContentLoaded", () => {
// Display all posts initially
displayPosts(blogPosts);
// Add event listener for reset filters button
document.getElementById('reset-filters').addEventListener('click', resetFilters);
const relatedPosts = blogPosts.slice(1, 4);
const relatedWidget = document.querySelector('.widget:nth-child(3)');
relatedPosts.forEach(post => {
const relatedPost = document.createElement('div');
relatedPost.className = 'related-post';
relatedPost.innerHTML = `
<img src="${post.image}" alt="${post.title}">
<div>
<h4>${post.title}</h4>
<p>${post.date}</p>
</div>
`;
relatedWidget.appendChild(relatedPost);
});
});
function displayTopCategories() {
const categoriesCount = {};
blogPosts.forEach(post => {
post.tags.forEach(tag => {
if (categoriesCount[tag]) {
categoriesCount[tag]++;
} else {
categoriesCount[tag] = 1;
}
});
});
const sortedCategories = Object.entries(categoriesCount)
.sort((a, b) => b[1] - a[1])
.slice(0, 5);
const categoriesList = document.getElementById('categories-list');
categoriesList.innerHTML = '';
sortedCategories.forEach(([category, count]) => {
const listItem = document.createElement('li');
listItem.innerHTML = `<a href="#" onclick="filterPostsByTag('${category}')">${category} <span>(${count})</span></a>`;
categoriesList.appendChild(listItem);
});
}
// Display posts and top categories when the document is loaded
displayPosts(blogPosts);
displayTopCategories();
// Add event listener for reset filters button
document.getElementById('reset-filters').addEventListener('click', () => {
displayPosts(blogPosts);
});
window.addEventListener('scroll', () => {
const header = document.querySelector('.hero');
if (window.scrollY > 50) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
});
</script>
</body>
</html>