Skip to content

Commit

Permalink
Merge branch 'PriyaGhosal:main' into main
Browse files Browse the repository at this point in the history
  • Loading branch information
@Peart-Guy
Peart-Guy authored Oct 25, 2024
2 parents 3d35069 + c904647 commit 8d9a736
Show file tree
Hide file tree
Showing 23 changed files with 948 additions and 2,212 deletions.
Binary file added arrow_upper.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions auth.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,10 @@ <h2 class="title">Sign in</h2>
<p class="social-text">OR<br>Sign in with social platforms</p>

<div class="social-media">
<button class="social-icon" id="googleSignInBtn">

<div class="social-media">
<button class="social-icon">
<button class="social-icon" id="microsoft-icon">
<img src="img/Microsoft_Logo.png" alt="Microsoft Icon" style="width: 25px; height: 25px;">
</button>
<button class="social-icon" id="google-icon">

<img src="./img/google.png" alt="Google Icon" style="width: 30px; height: 30px;">
</button>
Expand Down
41 changes: 41 additions & 0 deletions blog.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
body {
background-color: white;
color: black;
transition: background-color 0.3s, color 0.3s;
}

body.dark-mode {
background-color: #121212;
color: #ffffff;
}

header.dark-mode {
background-color: #1f1f1f;
}

.mode-toggle {
cursor: pointer;
border: none;
background: transparent;
outline: none;
padding: 10px;
}

.mode-toggle img {
width: 24px;
height: 24px;
}

.navbar {
background-color: #f0f0f0;
transition: background-color 0.3s;
}

body.dark-mode .navbar {
background-color: #333;
}

body.dark-mode .navbar a:hover {
color: #4C51BF;
transform: translateY(-2px);
}
250 changes: 249 additions & 1 deletion blog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="blog.css" />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;700&display=swap"
rel="stylesheet">
Expand Down Expand Up @@ -741,6 +742,10 @@ <h1 id="logo">BuddyTrail</h1>
<li><a href="contact.html">Contact</a></li>
<li><a href="auth.html">Sign In</a></li>
<li><a href="#" class="active">Blog</a></li>
<button class="mode-toggle" id="modeToggle">
<span class="sun-icon glow"><img src="day-mode.png" alt="Light mode"></span>
<span class="moon-icon glow" style="display: none;"><img src="moon.png" alt="Dark mode"></span>
</button>
</ul>
</nav>
</header>
Expand Down Expand Up @@ -922,10 +927,16 @@ <h2>${post.title}</h2>
<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>
Expand All @@ -944,7 +955,7 @@ <h3>Comments (${post.comments.length})</h3>
</div>
`;
container.appendChild(article);
});
});

addEventListeners();
}
Expand Down Expand Up @@ -1120,6 +1131,182 @@ <h3>Comments (${post.comments.length})</h3>
}
}

=
});

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);
Expand Down Expand Up @@ -1152,6 +1339,67 @@ <h3>Comments (${post.comments.length})</h3>
}
</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");
});
});

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";
} else {
sunIcon.style.display = "inline-block";
moonIcon.style.display = "none";
}

// Toggle between light and dark mode on button click
modeToggle.addEventListener("click", () => {
const isDarkMode = document.body.classList.toggle("dark-mode");

// Apply dark mode styles to relevant sections
const sections = document.querySelectorAll('.about, .core-values, .team');
sections.forEach(section => {
if (isDarkMode) {
section.classList.add('dark-mode');
} else {
section.classList.remove('dark-mode');
}
});

// 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>

</body>
Expand Down
4 changes: 1 addition & 3 deletions contact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,9 +204,7 @@ <h2>Contact Us</h2>
<div class="footer-column">
<h3>About Us</h3>
<p>
Discover and plan affordable trips with BuddyTrail's travel
companion tools.
</p>
Discover budget-friendly destinations and easily create itineraries with BuddyTrail’s innovative travel companion tools. Start exploring today and make your next trip both enjoyable and economical!</p>
</div>

<!-- Quick Links Section -->
Expand Down
Loading

0 comments on commit 8d9a736

Please sign in to comment.