Skip to content

Commit

Permalink
done
Browse files Browse the repository at this point in the history
@AsifQamar
AsifQamar committed Nov 7, 2024
1 parent 913c1a6 commit af06b8d
Showing 1 changed file with 405 additions and 802 deletions.
1,207 changes: 405 additions & 802 deletions blog.html
View file
Original file line number Diff line number Diff line change
@@ -721,54 +721,45 @@ <h2>Discover Travel Tips, Stories, and Inspiration</h2>
<!-- About Us Section -->
<div class="footer-column">
<h3>About Us</h3>
<p>
Discover and plan affordable trips with BuddyTrail's travel
companion tools.
</p>
<p>Discover and plan affordable trips with BuddyTrail's travel companion tools.</p>
<!-- Newsletter Form Section -->
<style>
.footer-column.newsletter {
<style>
.footer-column.newsletter {
max-width: 300px;
margin: 0 auto;
text-align: center;
}
#newsletter-form {
}
#newsletter-form {
display: flex;
flex-direction: column;
align-items: center;
}
#email {
}
#email {
width: 100%;
margin-bottom: 10px;
padding: 8px;
box-sizing: border-box;
}
button[type="submit"] {
}
button[type="submit"] {
width: 100px;
padding: 6px;
font-size: 14px;
background-color: #007bff;
}
#subscription-message {
}
#subscription-message {
font-size: 14px;
margin-top: 10px;
}
</style>
<div class="footer-column newsletter" id="newsletter">
<h3>Subscribe to Our Newsletter</h3>
<form id="newsletter-form">
<input
type="email"
id="email"
placeholder="Enter your email"
required
/>
<button type="submit">Subscribe</button>
</form>
<p id="subscription-message"></p>
</div>
}
</style>
<div class="footer-column newsletter" id="newsletter">
<h3>Subscribe to Our Newsletter</h3>
<form id="newsletter-form">
<input type="email" id="email" placeholder="Enter your email" required />
<button type="submit">Subscribe</button>
</form>
<p id="subscription-message"></p>
</div>

</div>

<!-- Quick Links Section -->
<div class="footer-column">
<h3>Quick Links</h3>
@@ -778,127 +769,12 @@ <h3>Quick Links</h3>
<li><a href="faq.html" class="faq-link">FAQs</a></li>
<li><a href="servicespage.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="welcome.html">Testimonials</a></li>
<li><a href="team.html">Team</a></li>
<li><a href="contributor/contributor.html">Our Contributor</a></li>
<a href="./contributor/Contributors.html" id="ourvisionlink">Our Contributors</a>
</ul>
</div>


addEventListeners();

function addEventListeners() {
// Add event listeners for read more links
document.querySelectorAll('.read-more').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
const article = e.target.closest('.blog-post');
const content = article.querySelector('.content');
const fullContent = article.querySelector('.full-content');

if (content.style.display !== 'none') {
content.style.display = 'none';
fullContent.style.display = 'block';
e.target.textContent = 'Read Less';
} else {
content.style.display = 'block';
fullContent.style.display = 'none';
e.target.textContent = 'Read More';
}
});
});

// Add event listeners for comment forms
document.querySelectorAll('.comment-form').forEach(form => {
form.addEventListener('submit', (e) => {
e.preventDefault();
const postId = parseInt(e.target.getAttribute('data-post-id'));
const comment = e.target.querySelector('textarea').value;
addComment(postId, comment);
e.target.reset();
});
});
}

function populateFilters() {
const categoryFilter = document.getElementById('categoryFilter');
const tagFilter = document.getElementById('tagFilter');
const categories = getLocalData('categories');
const tags = getLocalData('tags');

categoryFilter.innerHTML = '<option value="">All Categories</option>';
tagFilter.innerHTML = '<option value="">All Tags</option>';

categories.forEach(category => {
const option = document.createElement('option');
option.value = category;
option.textContent = category;
categoryFilter.appendChild(option);
});

tags.forEach(tag => {
const option = document.createElement('option');
option.value = tag;
option.textContent = tag;
tagFilter.appendChild(option);
});

// Add event listeners for filters
categoryFilter.addEventListener('change', filterPosts);
tagFilter.addEventListener('change', filterPosts);
}

function filterPosts() {
const selectedCategory = document.getElementById('categoryFilter').value;
const selectedTag = document.getElementById('tagFilter').value;
const posts = getLocalData('blogPosts');

const filteredPosts = posts.filter(post => {
const categoryMatch = !selectedCategory || post.category === selectedCategory;
const tagMatch = !selectedTag || post.tags.includes(selectedTag);
return categoryMatch && tagMatch;
});

renderFilteredPosts(filteredPosts);
}

function renderFilteredPosts(filteredPosts) {
const container = document.querySelector('.blog-container');
container.innerHTML = '';

filteredPosts.forEach(post => {
const article = document.createElement('article');
article.className = 'blog-post';
article.innerHTML = `
<h2>${post.title}</h2>
<div class="meta">Posted on ${post.date} by ${post.author}</div>
<div class="category">${post.category}</div>
<div class="tags">${post.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}</div>
<div class="content">
<p>${post.content.substring(0, 150)}...</p>
</div>
<div class="full-content" style="display: none;">
<p>${marked(post.content)}</p>
</div>
<a href="#" class="read-more" data-id="${post.id}">Read More</a>
<div class="comments-section">
<h3>Comments (${post.comments.length})</h3>
<div class="comments">
${post.comments.slice(0, 2).map(comment => `
<div class="comment">
<p>${comment.text}</p>
<small>${comment.date}</small>
</div>
`).join('')}
</div>
<form class="comment-form" data-post-id="${post.id}">
<textarea placeholder="Add a comment"></textarea>
<button type="submit">Post Comment</button>
</form>
</div>
`;
container.appendChild(article);
});


<!-- Legal Links Section -->
<div class="footer-column">
<h3>Legal Links</h3>
@@ -908,677 +784,404 @@ <h3>Legal Links</h3>
<li><a href="copyright.html">Copyright Notice</a></li>
<li><a href="disclaimer.html">Disclaimer</a></li>
<li><a href="cookie_policy.html">Cookie Policy</a></li>



</ul>
</div>

<!-- Contact Us Section -->
<div class="footer-column">
<h3>Contact Us</h3>
<p>Email: <a href="mailto:info@example.com">info@example.com</a></p>
<p>Phone: <a href="tel:+1234567890">+123 456 7890</a></p>
<!-- Follow Us Section -->
<div class="footer-column">
<h3>Follow Us</h3>
<div class="social-icons">
<a href="https://discord.com/invite/priyaghosal" target="_blank"
><i class="fab fa-discord"></i
></a>
<a
href="https://x.com/https://twitter.com/PriyaGhosa39968"
target="_blank"
><i class="fa-brands fa-x-twitter"></i
></a>
<a
href="https://github.com/PriyaGhosal/BuddyTrail"
target="_blank"
><i class="fab fa-github"></i
></a>
<a
href="https://www.linkedin.com/in/priya-ghosal-785771286/"
target="_blank"
><i class="fab fa-linkedin-in"></i
></a>
</div>
<div class="footer-column">
<h3>Follow Us</h3>
<div class="social-icons">
<a href="https://discord.com/invite/priyaghosal" target="_blank"><i class="fab fa-discord"></i></a>
<a href="https://x.com/https://twitter.com/PriyaGhosa39968" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
<a href="https://github.com/PriyaGhosal/BuddyTrail" target="_blank"><i class="fab fa-github"></i></a>
<a href="https://www.linkedin.com/in/priya-ghosal-785771286/" target="_blank"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
</div>

<!-- Footer Bottom Section -->
<div class="footer-bottom">
<p class="copyright-b">&copy; 2024 BuddyTrail. All rights reserved.</p>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/2.1.3/marked.min.js"></script>
<script>
// Initialize data in localStorage if it doesn't exist
if (!localStorage.getItem('blogPosts')) {
localStorage.setItem('blogPosts', JSON.stringify([
{
id: 1,
title: "10 Must-Visit Destinations for 2024",
content: "As we enter 2024, the world of travel continues to evolve. Here are our top picks for must-visit destinations:\n\n1. Kyoto, Japan: Experience the perfect blend of ancient traditions and modern innovations.\n2. Galapagos Islands, Ecuador: Witness unique wildlife in their natural habitat.\n3. Dubrovnik, Croatia: Explore the stunning medieval architecture and crystal-clear Adriatic waters.\n4. Machu Picchu, Peru: Discover the mysteries of this ancient Incan citadel.\n5. Santorini, Greece: Enjoy breathtaking sunsets and picturesque white-washed buildings.\n6. Banff National Park, Canada: Immerse yourself in the pristine wilderness of the Canadian Rockies.\n7. Marrakech, Morocco: Get lost in the vibrant souks and experience rich Moroccan culture.\n8. Reykjavik, Iceland: Chase the Northern Lights and relax in geothermal hot springs.\n9. Queenstown, New Zealand: Indulge in adrenaline-pumping activities amidst stunning landscapes.\n10. Petra, Jordan: Step back in time at this ancient wonder carved into rose-red cliffs.\n\nEach of these destinations offers unique experiences that will create lasting memories. Whether you're seeking cultural immersion, natural wonders, or adventure, these places have something special to offer every type of traveler in 2024.",
author: "Travel Expert",
date: "May 15, 2024",
category: "Destinations",
tags: ["2024", "travel", "destinations"],
comments: []
},
{
id: 2,
title: "Exploring the Hidden Gems of Bali",
content: "Bali, known for its stunning beaches and vibrant culture, offers much more than meets the eye. Venture beyond the popular tourist spots to discover hidden waterfalls, ancient temples, and serene rice terraces. Don't miss the sacred Tirta Empul temple or the breathtaking Sekumpul Waterfall. For a unique experience, visit the lesser-known Nusa Penida island for its dramatic cliffs and pristine beaches.",
author: "Island Explorer",
date: "June 1, 2024",
category: "Destinations",
tags: ["Bali", "hidden gems", "adventure"],
comments: []
},
{
id: 3,
title: "The Majestic Landscapes of Patagonia",
content: "Patagonia, straddling Chile and Argentina, is a must-visit destination for nature lovers and adventure seekers. Witness the towering peaks of Torres del Paine, trek on the massive Perito Moreno Glacier, and explore the enchanting Tierra del Fuego. The region's diverse wildlife, including guanacos and Andean condors, adds to its allure. Plan your visit between December and February for the best weather conditions.",
author: "Adventure Junkie",
date: "June 15, 2024",
category: "Destinations",
tags: ["Patagonia", "nature", "trekking"],
comments: []
},
{
id: 4,
title: "Uncovering the Magic of Marrakech",
content: "Marrakech, the Red City of Morocco, is a sensory delight that should be on every traveler's bucket list. Lose yourself in the winding alleys of the medina, bargain for treasures in the bustling souks, and marvel at the intricate architecture of the Bahia Palace. Don't miss the chance to experience a traditional hammam or enjoy a sunset camel ride in the nearby Agafay Desert. The vibrant Jardin Majorelle and the historic Koutoubia Mosque are also must-see attractions.",
author: "Culture Enthusiast",
date: "July 1, 2024",
category: "Destinations",
tags: ["Marrakech", "culture", "history"],
comments: []
},
{
id: 5,
title: "The Natural Wonders of Iceland",
content: "Iceland, the land of fire and ice, offers a unique landscape that seems almost otherworldly. From the ethereal Northern Lights to the powerful geysers and hot springs, nature's spectacles are on full display here. Take a dip in the Blue Lagoon, witness the beauty of Gullfoss waterfall, and explore the black sand beaches of Vik. For the adventurous, a trip to the Vatnajökull glacier or a tour of the Golden Circle is a must. Don't forget to visit in summer for the midnight sun or in winter for the best chances to see the aurora borealis.",
author: "Nature Photographer",
date: "July 15, 2024",
category: "Destinations",
tags: ["Iceland", "natural wonders", "photography"],
comments: []
},
{
id: 6,
title: "The Ancient Wonders of Petra, Jordan",
content: "Petra, the ancient city carved into rose-red cliffs, is a testament to human ingenuity and one of the world's most impressive archaeological sites. Walk through the narrow Siq to reach the iconic Treasury, then explore the vast complex of tombs, temples, and the Roman-style theatre. For a truly magical experience, visit Petra by Night when the site is illuminated by thousands of candles. Don't miss the opportunity to hike up to the Monastery for panoramic views of the surrounding landscape. Petra is not just a destination; it's a journey through time that will leave you in awe.",
author: "History Buff",
date: "August 1, 2024",
category: "Destinations",
tags: ["Petra", "archaeology", "history"],
comments: []
}
]));
}

if (!localStorage.getItem('categories')) {
localStorage.setItem('categories', JSON.stringify(["Destinations", "Sustainable Travel", "Budget Travel", "Solo Travel", "Food"]));
}

if (!localStorage.getItem('tags')) {
localStorage.setItem('tags', JSON.stringify(["2024", "travel", "destinations", "sustainable", "budget", "solo", "food", "Bali", "hidden gems", "adventure", "Patagonia", "nature", "trekking", "Marrakech", "culture", "history", "Iceland", "natural wonders", "photography", "Petra", "archaeology"]));
}

// Function to get data from localStorage
function getLocalData(key) {
return JSON.parse(localStorage.getItem(key));
}

// Function to set data in localStorage
function setLocalData(key, data) {
localStorage.setItem(key, JSON.stringify(data));
}

function renderPosts() {
const container = document.querySelector('.blog-container');
container.innerHTML = '';
const posts = getLocalData('blogPosts');

posts.forEach(post => {
const article = document.createElement('article');
article.className = 'blog-post';
article.innerHTML = `
<h2>${post.title}</h2>
<div class="meta">Posted on ${post.date} by ${post.author}</div>
<div class="category">${post.category}</div>
<div class="tags">${post.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}</div>
<div class="content">
<p>${post.content.substring(0, 150)}...</p>
</div>
<div class="full-content" style="display: none;">
<p>${marked(post.content)}</p>
</div>
</div>
<div class="full-content" style="display: none;">
<p>${marked(post.content)}</p>
</div>
<a href="#" class="read-more" data-id="${post.id}">Read More</a>
<div class="comments-section">
<h3>Comments (${post.comments.length})</h3>
<div class="comments">
${post.comments.slice(0, 2).map(comment => `
<div class="comment">
<p>${comment.text}</p>
<small>${comment.date}</small>
</div>
`).join('')}
</div>
<form class="comment-form" data-post-id="${post.id}">
<textarea placeholder="Add a comment"></textarea>
<button type="submit">Post Comment</button>
</form>
</div>
`;
container.appendChild(article);
});

addEventListeners();
}

function addEventListeners() {
// Add event listeners for read more links
document.querySelectorAll('.read-more').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
const article = e.target.closest('.blog-post');
const content = article.querySelector('.content');
const fullContent = article.querySelector('.full-content');

if (content.style.display !== 'none') {
content.style.display = 'none';
fullContent.style.display = 'block';
e.target.textContent = 'Read Less';
} else {
content.style.display = 'block';
fullContent.style.display = 'none';
e.target.textContent = 'Read More';
}
});
});

// Add event listeners for comment forms
document.querySelectorAll('.comment-form').forEach(form => {
form.addEventListener('submit', (e) => {
e.preventDefault();
const postId = parseInt(e.target.getAttribute('data-post-id'));
const comment = e.target.querySelector('textarea').value;
addComment(postId, comment);
e.target.reset();
});
});
}

function populateFilters() {
const categoryFilter = document.getElementById('categoryFilter');
const tagFilter = document.getElementById('tagFilter');
const categories = getLocalData('categories');
const tags = getLocalData('tags');

categoryFilter.innerHTML = '<option value="">All Categories</option>';
tagFilter.innerHTML = '<option value="">All Tags</option>';

categories.forEach(category => {
const option = document.createElement('option');
option.value = category;
option.textContent = category;
categoryFilter.appendChild(option);
});

tags.forEach(tag => {
const option = document.createElement('option');
option.value = tag;
option.textContent = tag;
tagFilter.appendChild(option);
});

// Add event listeners for filters
categoryFilter.addEventListener('change', filterPosts);
tagFilter.addEventListener('change', filterPosts);
}

function filterPosts() {
const selectedCategory = document.getElementById('categoryFilter').value;
const selectedTag = document.getElementById('tagFilter').value;
const posts = getLocalData('blogPosts');

const filteredPosts = posts.filter(post => {
const categoryMatch = !selectedCategory || post.category === selectedCategory;
const tagMatch = !selectedTag || post.tags.includes(selectedTag);
return categoryMatch && tagMatch;
});

renderFilteredPosts(filteredPosts);
}

function renderFilteredPosts(filteredPosts) {
const container = document.querySelector('.blog-container');
container.innerHTML = '';

filteredPosts.forEach(post => {
const article = document.createElement('article');
article.className = 'blog-post';
article.innerHTML = `
<h2>${post.title}</h2>
<div class="meta">Posted on ${post.date} by ${post.author}</div>
<div class="category">${post.category}</div>
<div class="tags">${post.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}</div>
<div class="content">
<p>${post.content.substring(0, 150)}...</p>
</div>
<div class="full-content" style="display: none;">
<p>${marked(post.content)}</p>
</div>
<a href="#" class="read-more" data-id="${post.id}">Read More</a>
<div class="comments-section">
<h3>Comments (${post.comments.length})</h3>
<div class="comments">
${post.comments.slice(0, 2).map(comment => `
<div class="comment">
<p>${comment.text}</p>
<small>${comment.date}</small>
</div>
`).join('')}
</div>
<form class="comment-form" data-post-id="${post.id}">
<textarea placeholder="Add a comment"></textarea>
<button type="submit">Post Comment</button>
</form>
</div>
`;
container.appendChild(article);
});

addEventListeners();
}

function viewFullPost(postId) {
const posts = getLocalData('blogPosts');
const post = posts.find(p => p.id === postId);
if (post) {
const modal = document.createElement('div');
modal.className = 'modal';
modal.innerHTML = `
<div class="modal-content">
<span class="close">&times;</span>
<h2>${post.title}</h2>
<div class="meta">Posted on ${post.date} by ${post.author}</div>
<div class="category">${post.category}</div>
<div class="tags">${post.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}</div>
<div class="content">
<p>${marked(post.content)}</p>
</div>
<div class="comments-section">
<h3>Comments (${post.comments.length})</h3>
<div class="comments">
${post.comments.map(comment => `
<div class="comment">
<p>${comment.text}</p>
<small>${comment.date}</small>
</div>
`).join('')}
</div>
<form class="comment-form" data-post-id="${post.id}">
<textarea placeholder="Add a comment"></textarea>
<button type="submit">Post Comment</button>
</form>
</div>
</div>
`;
document.body.appendChild(modal);

// Close modal when clicking on the close button or outside the modal
modal.querySelector('.close').addEventListener('click', () => {
document.body.removeChild(modal);
});
modal.addEventListener('click', (e) => {
if (e.target === modal) {
document.body.removeChild(modal);
}
});

// Add event listener for comment form in modal
modal.querySelector('.comment-form').addEventListener('submit', (e) => {
e.preventDefault();
const comment = e.target.querySelector('textarea').value;
addComment(postId, comment);
e.target.reset();
});
}
}

=
});

addEventListeners();
}

function addEventListeners() {
// Add event listeners for read more links
document.querySelectorAll('.read-more').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
const article = e.target.closest('.blog-post');
const content = article.querySelector('.content');
const fullContent = article.querySelector('.full-content');

if (content.style.display !== 'none') {
content.style.display = 'none';
fullContent.style.display = 'block';
e.target.textContent = 'Read Less';
} else {
content.style.display = 'block';
fullContent.style.display = 'none';
e.target.textContent = 'Read More';
}
});
});

// Add event listeners for comment forms
document.querySelectorAll('.comment-form').forEach(form => {
form.addEventListener('submit', (e) => {
e.preventDefault();
const postId = parseInt(e.target.getAttribute('data-post-id'));
const comment = e.target.querySelector('textarea').value;
addComment(postId, comment);
e.target.reset();
});
});
}

function populateFilters() {
const categoryFilter = document.getElementById('categoryFilter');
const tagFilter = document.getElementById('tagFilter');
const categories = getLocalData('categories');
const tags = getLocalData('tags');

categoryFilter.innerHTML = '<option value="">All Categories</option>';
tagFilter.innerHTML = '<option value="">All Tags</option>';

categories.forEach(category => {
const option = document.createElement('option');
option.value = category;
option.textContent = category;
categoryFilter.appendChild(option);
});

tags.forEach(tag => {
const option = document.createElement('option');
option.value = tag;
option.textContent = tag;
tagFilter.appendChild(option);
});

// Add event listeners for filters
categoryFilter.addEventListener('change', filterPosts);
tagFilter.addEventListener('change', filterPosts);
}

function filterPosts() {
const selectedCategory = document.getElementById('categoryFilter').value;
const selectedTag = document.getElementById('tagFilter').value;
const posts = getLocalData('blogPosts');

const filteredPosts = posts.filter(post => {
const categoryMatch = !selectedCategory || post.category === selectedCategory;
const tagMatch = !selectedTag || post.tags.includes(selectedTag);
return categoryMatch && tagMatch;
});

renderFilteredPosts(filteredPosts);
}

function renderFilteredPosts(filteredPosts) {
const container = document.querySelector('.blog-container');
container.innerHTML = '';

filteredPosts.forEach(post => {
const article = document.createElement('article');
article.className = 'blog-post';
article.innerHTML = `
<h2>${post.title}</h2>
<div class="meta">Posted on ${post.date} by ${post.author}</div>
<div class="category">${post.category}</div>
<div class="tags">${post.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}</div>
<div class="content">
<p>${post.content.substring(0, 150)}...</p>
</div>
<div class="full-content" style="display: none;">
<p>${marked(post.content)}</p>
</div>
<a href="#" class="read-more" data-id="${post.id}">Read More</a>
<div class="comments-section">
<h3>Comments (${post.comments.length})</h3>
<div class="comments">
${post.comments.slice(0, 2).map(comment => `
<div class="comment">
<p>${comment.text}</p>
<small>${comment.date}</small>
</div>
`).join('')}
</div>
<form class="comment-form" data-post-id="${post.id}">
<textarea placeholder="Add a comment"></textarea>
<button type="submit">Post Comment</button>
</form>
</div>
`;
container.appendChild(article);
});

addEventListeners();
}

function viewFullPost(postId) {
const posts = getLocalData('blogPosts');
const post = posts.find(p => p.id === postId);
if (post) {
const modal = document.createElement('div');
modal.className = 'modal';
modal.innerHTML = `
<div class="modal-content">
<span class="close">&times;</span>
<h2>${post.title}</h2>
<div class="meta">Posted on ${post.date} by ${post.author}</div>
<div class="category">${post.category}</div>
<div class="tags">${post.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}</div>
<div class="content">
<p>${marked(post.content)}</p>
</div>
<div class="comments-section">
<h3>Comments (${post.comments.length})</h3>
<div class="comments">
${post.comments.map(comment => `
<div class="comment">
<p>${comment.text}</p>
<small>${comment.date}</small>
</div>
`).join('')}
</div>
<form class="comment-form" data-post-id="${post.id}">
<textarea placeholder="Add a comment"></textarea>
<button type="submit">Post Comment</button>
</form>
</div>
</div>
`;
document.body.appendChild(modal);

// Close modal when clicking on the close button or outside the modal
modal.querySelector('.close').addEventListener('click', () => {
document.body.removeChild(modal);
});
modal.addEventListener('click', (e) => {
if (e.target === modal) {
document.body.removeChild(modal);
}
});

// Add event listener for comment form in modal
modal.querySelector('.comment-form').addEventListener('submit', (e) => {
e.preventDefault();
const comment = e.target.querySelector('textarea').value;
addComment(postId, comment);
e.target.reset();
});
}
}
function addComment(postId, commentText) {
const posts = getLocalData('blogPosts');
const postIndex = posts.findIndex(p => p.id === postId);
if (postIndex !== -1) {
posts[postIndex].comments.push({
text: commentText,
date: new Date().toLocaleString()
});
setLocalData('blogPosts', posts);
renderPosts();
}
}

// Initialize the blog
function initializeBlog() {
renderPosts();
}

// Initialize the blog when the DOM is fully loaded
document.addEventListener('DOMContentLoaded', initializeBlog);
</script>

<div class="gtranslate_wrapper"></div>

<script>
window.gtranslateSettings = {
default_language: "en",
detect_browser_language: true,
wrapper_selector: ".gtranslate_wrapper",
};
</script>

<script>
document.addEventListener("DOMContentLoaded", function () {
const hamburger = document.getElementById("hamburger");
const navList = document.getElementById("nav-links");
const closeBtn = document.getElementById("closeBtn");

hamburger.addEventListener("click", function () {
navList.classList.toggle("active");
});

closeBtn.addEventListener("click", function () {
navList.classList.remove("active");
});


<!-- Deals and Offers Popup
<div id="dealsPopup" class="popup">
<div class="popup-content">
<span class="close-btn" id="closePopup">&times;</span>
<h2>Exclusive Deals and Offers!</h2>
<p>
Get the best deals on flights, hotels, and travel packages. Don't miss
out on our limited-time discounts. Plan your trip now!
</p>
<button onclick="document.getElementById('dealsPopup').style.display = 'none'; window.location.href='#deals'">
Check Out Deals
</button>
</div> -->
</div>
<!-- this script is for twitter icon starts -->
<script src="https://kit.fontawesome.com/856f4a44d7.js" crossorigin="anonymous"></script>
<!-- this script is for twitter icon ends -->
<!-- this script is for twitter icon starts -->
<script src="https://kit.fontawesome.com/856f4a44d7.js" crossorigin="anonymous"></script>
<!-- this script is for twitter icon ends -->
<script>
// script.js

// change the color of navbar while scrolling to make it visible

window.addEventListener("scroll", function () {
const navbar = document.querySelector(".main-head");
if (window.scrollY > 0) {
navbar.classList.add("sticky"); // Add class when scrolled
} else {
navbar.classList.remove("sticky"); // Remove class when at the top
}
});

window.onscroll = function () {
toggleScrollTopButton();
};

const scrollTopBtn = document.getElementById("scrollTopBtn");

function toggleScrollTopButton() {
if (
document.body.scrollTop > 100 ||
document.documentElement.scrollTop > 100
) {
scrollTopBtn.style.display = "block"; // Show button after scrolling down
} else {
scrollTopBtn.style.display = "none"; // Hide button when at the top
}

}

scrollTopBtn.onclick = function () {
window.scrollTo({ top: 0, behavior: "smooth" }); // Smooth scroll to top
};
</script>
// <script>
// document.getElementById('contactForm').addEventListener('submit', function (e) {
// e.preventDefault();

// // Submit the form data using fetch
// fetch(this.action, {
// method: 'POST',
// body: new FormData(this),
// headers: {
// 'Accept': 'application/json'
// }
// }).then(response => {
// // Show the confirmation popup
// document.getElementById('confirmationPopup').style.display = 'block';
// // Reset the form
// this.reset();
// }).catch(error => {
// console.error('Error:', error);
// // Still show the confirmation popup even if there's an error
// document.getElementById('confirmationPopup').style.display = 'block';
// });
// });


// function closePopup() {
// document.getElementById('confirmationPopup').style.display = 'none';
// }
// </script>
<script>
document.getElementById('reviewForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevents form submission

// Show custom alert message
const customAlert = document.createElement('div');
customAlert.className = 'custom-alert';
customAlert.innerHTML = `
<p><b>Thank you! </b><br>We use BuddyTrail to collect and manage all your feedback because we are absolutely committed to making you a happy customer.<br>We will read your feedback, and we'll take it seriously.</p>
`;
document.body.appendChild(customAlert);

// Remove alert on click
customAlert.addEventListener('click', () => {
customAlert.remove();
});

document.addEventListener("DOMContentLoaded", function () {
const modeToggle = document.getElementById("modeToggle");
const sunIcon = document.querySelector(".sun-icon");
const moonIcon = document.querySelector(".moon-icon");

// Check saved theme in localStorage and apply it
const currentTheme = localStorage.getItem("theme") || "light";
if (currentTheme === "dark") {
document.body.classList.add("dark-mode");
sunIcon.style.display = "none";
moonIcon.style.display = "inline-block";

this.reset(); // Clears the form fields
});

function closePopup() {
document.getElementById('confirmationPopup').style.display = 'none';
}
</script>


<div class="gtranslate_wrapper"></div>

<script>

window.gtranslateSettings = {
"default_language":"en",
"detect_browser_language":true,
"wrapper_selector":".gtranslate_wrapper"
}

</script>

<script
src="https://cdn.gtranslate.net/widgets/latest/float.js"
defer
></script>
<!-- Adding scroll progressBar-->
<script>

window.onscroll = function() {
updateProgressBar();
};


function updateProgressBar() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrollPercent = (scrollTop / scrollHeight) * 100;

document.getElementById("progressBar").style.width = scrollPercent + "%";
}

</script>
<style>
.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(24, 23, 24, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}

.popup-content {
background-color: white;
padding: 20px;
border-radius: 5px;
text-align: center;
}

.popup-content h2 {
margin-top: 0;
}

.popup-content button {
margin-top: 10px;
padding: 5px 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}

.custom-alert {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 400px;
padding: 20px;
background-color: black;
border: 1px solid white;
color: #fff;
font-size: 16px;
border-radius: 8px;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
text-align: center;
z-index: 1000;
cursor: pointer; /* Changes cursor to pointer to indicate it's clickable */
opacity: 1;
transition: opacity 0.5s ease-in-out;
}

.custom-alert p {
/* white color text on black background will look nice */
color:white;
margin: 0;
line-height: 1.5;
}
</style>
</script>
<script src="script.js">
document.getElementById('newsletter-form').addEventListener('submit', function (e) {
e.preventDefault(); // Prevent the default form submission

const email = document.getElementById('email').value.trim(); // Get the email value
const messageElement = document.getElementById('subscription-message'); // Get the message display element

// Regular expression to validate email format
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (emailPattern.test(email)) {
// Simulate a successful subscription
messageElement.textContent = 'Subscribed successfully!'; // Show success message
messageElement.style.color = 'green'; // Change message color to green

// Clear the input field after successful submission
document.getElementById('email').value = '';
} else {
section.classList.remove('dark-mode');
messageElement.textContent = 'Please enter a valid email address.'; // Show error message
messageElement.style.color = 'red'; // Change message color to red
}
});

// Update icons and local storage
if (isDarkMode) {
sunIcon.style.display = "none";
moonIcon.style.display = "inline-block";
localStorage.setItem("theme", "dark");
} else {
sunIcon.style.display = "inline-block";
moonIcon.style.display = "none";
localStorage.setItem("theme", "light");
}
});
});
</script>


<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>


<!-- Circles -->
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>

<script>
// coordinates for the cursor :
const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");

const colors = [
"#fc5720", "#fc6532", "#fc6532","#fd8b65", "#d5585c", "#fac3b1", "#f4d5cb", "#fefefe", "#fefefe", "#cdf2c5", "#b2eca5", "#95e283", "#7dda68", "#4adc2d", "#69d451", "#54c939", "#34b916", "#28b309", "#1e9c02",
];

circles.forEach(function (circle, index) {
circle.x = 0;
circle.y = 0;
circle.style.backgroundColor = colors[index % colors.length];
});

// update the coordinates when the mouse moves:
window.addEventListener("mousemove", function (e) {
coords.x = e.clientX;
coords.y = e.clientY;
});

// animation function to move the circles:
function animateCircles() {
let x = coords.x;
let y = coords.y;

circles.forEach(function (circle, index) {


circle.style.left = x - 12 + "px";
circle.style.top = y - 12 + "px";
circle.style.scale = (circles.length - index) / circles.length;

circle.x = x;
circle.y = y;

const nextCircle = circles[index + 1] || circles[0];
x += (nextCircle.x - x) * 0.3;
y += (nextCircle.y - y) * 0.3;
});

requestAnimationFrame(animateCircles);
}
</script>

animateCircles();
</script>

</body>

</html>
<div class="gtranslate_wrapper"></div>
<script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>


<script>
main
// coordinates for the cursor :
const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");

const colors = [
"#fc5720", "#fc6532", "#fc6532","#fd8b65", "#d5585c", "#fac3b1", "#f4d5cb", "#fefefe", "#fefefe", "#cdf2c5", "#b2eca5", "#95e283", "#7dda68", "#4adc2d", "#69d451", "#54c939", "#34b916", "#28b309", "#1e9c02",
];

circles.forEach(function (circle, index) {
circle.x = 0;
circle.y = 0;
circle.style.backgroundColor = colors[index % colors.length];
});

// update the coordinates when the mouse moves:
window.addEventListener("mousemove", function (e) {
coords.x = e.clientX;
coords.y = e.clientY;
});

// animation function to move the circles:
function animateCircles() {
let x = coords.x;
let y = coords.y;

circles.forEach(function (circle, index) {


circle.style.left = x - 12 + "px";
circle.style.top = y - 12 + "px";
circle.style.scale = (circles.length - index) / circles.length;

circle.x = x;
circle.y = y;

const nextCircle = circles[index + 1] || circles[0];
x += (nextCircle.x - x) * 0.3;
y += (nextCircle.y - y) * 0.3;
});

requestAnimationFrame(animateCircles);
}

animateCircles();

document.addEventListener("DOMContentLoaded", function () {
const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");

circles.forEach(function (circle) {
circle.x = 0;
circle.y = 0;
});

window.addEventListener("mousemove", function (e) {
coords.x = e.pageX;
coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
});

function animateCircles() {
let x = coords.x;
let y = coords.y;

circles.forEach(function (circle, index) {
circle.style.left = `${x - 12}px`;
circle.style.top = `${y - 12}px`;
circle.style.transform = `scale(${(circles.length - index) / circles.length})`;

const nextCircle = circles[index + 1] || circles[0];
circle.x = x;
circle.y = y;

x += (nextCircle.x - x) * 0.3;
y += (nextCircle.y - y) * 0.3;
});

requestAnimationFrame(animateCircles);
}

animateCircles();
});

main
</script>

<body>
<div class="container">
<!-- Your existing content -->

<!-- Chatbot Icon -->
<div class="chatbot-icon" onclick="toggleChatbot()">
🗨️ <!-- You can replace this with an actual image/icon -->
</div>

<!-- Chatbot Iframe -->
<div class="chatbot-container" id="chatbotContainer">
<iframe src="https://www.chatbase.co/chatbot-iframe/GtcyNsebrd_nrDUEQz53T"
width="350"
height="500"
style="border:none;">
</iframe>
</div>
</div>

<!-- Scripts -->
<script src="script.js"></script>
<script>
function toggleChatbot() {
const chatbotContainer = document.getElementById('chatbotContainer');
if (chatbotContainer.style.display === 'none' || chatbotContainer.style.display === '') {
chatbotContainer.style.display = 'block';
} else {
chatbotContainer.style.display = 'none';
}
}

</script>
<br /><br />
<link rel="stylesheet" href="visi.css">

<div class="visitor-counter">
<div>Visitor</div>
<div class="website-counter"></div>
</div>
<script src="path/to/visitorCounter.js"></script>
<script src="./assets/css/visitors.css"></script>

<script src="visi.js"></script>
<script src="script.js"></script>

</body>

</html>

0 comments on commit af06b8d

Please sign in to comment.