Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Further improved the above index.html part #290

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Further improved the above index.html part #290

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
277 changes: 120 additions & 157 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,89 +14,57 @@

<body>

<!-- Navigation Bar -->
<nav class="navbar">
<a href="index.html" class="flex"><img src="images/logo.png" class="logo">
<span class="website-name tracking-tight ">Code Social</span></a>


<a href="index.html" class="flex items-center">
<img src="images/logo.png" alt="Code Social Logo" class="logo">
<span class="website-name tracking-tight">Code Social</span>
</a>

<!-- Hamburger Menu -->
<div class="hamburger-menu">
<div class="toggle-button">
<img src="/images/hamburger.png" alt="open" id="hamburger-img">

<img src="images/hamburger.png" alt="Menu" id="hamburger-img">
</div>
</div>

<!-- Navbar Links -->
<ul class="navbar-links flex ">
<li class="ml-20">
<a href="maintenance.html">Live Events</a>
<ul class="dropdown ">
<ul class="navbar-links flex">
<li><a href="maintenance.html">Live Events</a>
<ul class="dropdown">
<li><a href="maintenance.html">Why don't you react?</a></li>

</ul>
</li>
<!-- blog section -->
<ul class="navbar-links flex ">
<li class="ml-20">
<a href="blog.html">Blogs</a>
</ul>
</li>
<li class="community">
<a href="maintenance.html">Join Our Community</a>
<li><a href="blog.html">Blogs</a></li>
<li><a href="maintenance.html">Join Our Community</a>
<ul class="dropdown">
<li><a href="maintenance.html">WhatsApp</a></li>
<li><a href="maintenance.html">Discord</a></li>
</ul>
</li>
<li>
<a href="learning.html">Learning</a>
<li><a href="learning.html">Learning</a>
<ul class="dropdown">
<li><a href="#">Free Learning Resources</a></li>
<li><a href="#">Mentorship Programs</a></li>
<li><a href="#">Peer-to-Peer Sessions</a></li>
</ul>
</li>
<li class="hamburger-menu">
<div class="toggle-button">
<span class="about-text">About us</span>
<button class="bar"></button>
<button class="bar"></button>
<button class="bar"></button>
</div>
<ul class="dropdown">
<li><a href="mentorship.html">Meet Our Team</a></li>
<li><a href="#">Join Our Team</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Follow Us</a></li>
</ul>
</li>

<li>
<a href="maintenance.html">Follow Us</a>
</li>
<li><a href="maintenance.html">Follow Us</a></li>

<!-- Dark Mode Toggle -->
<li>
<button id="theme-toggle" class="theme-toggle-btn ">
<img src="images/dark-mode.png" alt="theme-mode" id="theme-toggle-icon">
<button id="theme-toggle" class="theme-toggle-btn">
<img src="images/dark-mode.png" alt="Theme Toggle" id="theme-toggle-icon">
</button>
<!-- when light mode is active -> use "dark-mode.png" and when dark mode is active -> use "light-mode.png" -->
</li>
</ul>
</nav>


<!-- About Community Section -->
<section class="about-community">
<h2>About Community</h2>
<p>
Code Social Community is a learning-focused community dedicated to providing individuals with resources, opportunities to learn, grow, and develop their skills in various technologies. The community helps individuals to explore their interests, expand their knowledge, and connect with like-minded people.

At Code Social Community, members have access to a wealth of resources and learning opportunities, including free learning sessions, mentorship programs, and peer-to-peer learning sessions. The community also provides opportunities for members to network and connect with others in the tech industry.

In addition to its learning and networking opportunities, Code Social Community also serves as a hub for resources, tools, and other materials that can help members enhance their skills and stay up-to-date with the latest trends and best practices in the tech industry.

Whether you are just starting out in your career or are a seasoned professional looking to expand your knowledge and skills, this community offers something for everyone. With its focus on hands-on learning, mentorship, and networking opportunities, Code Social Community is an excellent place to connect with like-minded individuals, build your skills, and take your career to the next level.
</p>
<!-- Social Media Icons -->
<div class="social-icons">
Expand All @@ -112,11 +80,11 @@ <h2>About Community</h2>
<a href="https://github.com/Code-Social" target="_blank">
<img src="images/gitHub.png" alt="Github">
</a>

</div>
</section>

<h2 class="calendar-title text-3xl mt-10 font-semibold">Event Calendar</h2>
<!-- Event Calendar Section -->
<h2 class="calendar-title text-3xl mt-10 font-semibold">Event Calendar</h2>

<section class="calendar-section">
<div class="event-form">
Expand All @@ -141,41 +109,34 @@ <h3>Add Event</h3>
</div>
</section>


<br>

<!-- Footer Section -->
<footer>
<section class="footer-section border border-gray-500 shadow-lg ">
<section class="footer-section border border-gray-500 shadow-lg">
<div class="container">
<div class="footer-grid">
<!-- Logo and About Section -->

<div class="footer-logo-section footer-item my-5 ">

<a href="index.html" class="flex w-full justify-center "><img src="images/logo.png" class="logo mx-auto">

<span class="website-name tracking-tight ">Code Social</span></a>

<p class="footer-text">Code Social Community is a vibrant and inclusive space for tech enthusiasts to learn, grow, and connect. Founded in 2023, our mission is to empower individuals with resources, mentorship, and
opportunities to cultivate their skills, explore their interests,

and collaborate with like-minded peers. Join us on our journey to create something extraordinary together!</p>
<ul class="social-icons py-5 ">
<div class="footer-logo-section footer-item my-5">
<a href="index.html" class="flex w-full justify-center">
<img src="images/logo.png" alt="Code Social Logo" class="logo mx-auto">
<span class="website-name tracking-tight">Code Social</span>
</a>
<p class="footer-text">
Code Social Community is a vibrant and inclusive space for tech enthusiasts to learn, grow, and connect. Founded in 2023, our mission is to empower individuals with resources, mentorship, and opportunities to cultivate their skills, explore their interests, and collaborate with like-minded peers.
</p>
<ul class="social-icons py-5">
<li><a href="https://wa.me/your-whatsapp-number" target="_blank">
<img src="./images/whatsapp-icon.png" alt="WhatsApp"></a>
<img src="./images/whatsapp-icon.png" alt="WhatsApp"></a>
</li>
<li><a href="https://discord.gg/MSTNyRSPYW" target="_blank">
<img src="./images/discord-icon.png" alt="Discord">
</a>
<img src="./images/discord-icon.png" alt="Discord"></a>
</li>
<li><a href="https://www.linkedin.com/company/code-social/" target="_blank">
<img src="./images/linkedin-icon.png" alt="LinkedIn">
</a>
<img src="./images/linkedin-icon.png" alt="LinkedIn"></a>
</li>
</ul>
</div>

<!-- Company Links -->
<!-- Quick Links Section -->
<div class="footer-links footer-item">
<p class="footer-title">Quick Links</p>
<ul class="footer-list">
Expand All @@ -187,7 +148,7 @@ <h3>Add Event</h3>
</ul>
</div>

<!-- Help Links -->
<!-- Help Links Section -->
<div class="footer-links footer-item">
<p class="footer-title">Help</p>
<ul class="footer-list">
Expand All @@ -202,98 +163,100 @@ <h3>Add Event</h3>
<p class="footer-bottom-text">© Copyright 2024, All Rights Reserved by Code-social</p>
</div>
</section>
</footer>

<!-- JavaScript Code -->
<script>
// Calendar Logic
const events = [
{ date: '2024-10-06', title: 'React Workshop', color: '#4CAF50' },
{ date: '2024-10-14', title: 'Node.js Webinar', color: '#FFC107' },
{ date: '2024-10-21', title: 'CSS Masterclass', color: '#2196F3' },
];

let currentMonth = new Date().getMonth();
let currentYear = new Date().getFullYear();

function generateCalendar() {
const calendarGrid = document.getElementById('calendar-grid');
const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();

document.getElementById('current-month').innerText = new Date(currentYear, currentMonth).toLocaleString('default', { month: 'long', year: 'numeric' });

calendarGrid.innerHTML = '';

for (let day = 1; day <= daysInMonth; day++) {
const dayElement = document.createElement('div');
dayElement.className = 'calendar-day';
dayElement.innerText = day;

const event = events.filter(e =>
new Date(e.date).getDate() === day &&
new Date(e.date).getMonth() === currentMonth &&
new Date(e.date).getFullYear() === currentYear
);

if (event.length) {
event.forEach(ev => {
const eventElement = document.createElement('div');
eventElement.className = 'event';
eventElement.style.backgroundColor = ev.color || '#4CAF50';
eventElement.innerText = ev.title;
dayElement.appendChild(eventElement);
});
}

calendarGrid.appendChild(dayElement);
}
}

document.getElementById('prev-month').addEventListener('click', () => {
currentMonth--;
if (currentMonth < 0) {
currentMonth = 11;
currentYear--;
}
generateCalendar();
});

document.getElementById('next-month').addEventListener('click', () => {
currentMonth++;
if (currentMonth > 11) {
currentMonth = 0;
currentYear++;
}
generateCalendar();
});

generateCalendar();

<script>
const events = [
{ date: '2024-10-06', title: 'React Workshop', color: '#4CAF50' },
{ date: '2024-10-14', title: 'Node.js Webinar', color: '#FFC107' },
{ date: '2024-10-21', title: 'CSS Masterclass', color: '#2196F3' },
];

let currentMonth = new Date().getMonth();
let currentYear = new Date().getFullYear();

function generateCalendar() {
const calendarGrid = document.getElementById('calendar-grid');
const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();

document.getElementById('current-month').innerText = new Date(currentYear, currentMonth).toLocaleString('default', { month: 'long', year: 'numeric' });

calendarGrid.innerHTML = '';
// Dark Mode Toggle
const themeToggle = document.getElementById('theme-toggle');
const themeIcon = document.getElementById('theme-toggle-icon');

for (let day = 1; day <= daysInMonth; day++) {
const dayElement = document.createElement('div');
dayElement.className = 'calendar-day';
dayElement.innerText = day;
const userTheme = localStorage.getItem('theme') || 'light';
document.body.classList.add(userTheme);
themeIcon.src = userTheme === 'dark' ? 'images/light-mode.png' : 'images/dark-mode.png';

const event = events.filter(e =>
new Date(e.date).getDate() === day &&
new Date(e.date).getMonth() === currentMonth &&
new Date(e.date).getFullYear() === currentYear // Keep this check to match the exact date
);
themeToggle.addEventListener('click', () => {
const currentTheme = document.body.classList.contains('dark') ? 'dark' : 'light';
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';

if (event.length) {
event.forEach(ev => {
const eventElement = document.createElement('div');
eventElement.className = 'event';
eventElement.style.backgroundColor = ev.color || '#4CAF50';
eventElement.innerText = ev.title;
eventElement.addEventListener('click', () => alert(ev.title)); // Simple alert for now, can be modal or tooltip.
dayElement.appendChild(eventElement);
});
}
document.body.classList.remove(currentTheme);
document.body.classList.add(newTheme);
localStorage.setItem('theme', newTheme);

// Highlight today
if (new Date().getDate() === day && new Date().getMonth() === currentMonth && new Date().getFullYear() === currentYear) {
dayElement.style.backgroundColor = '#d1ecf1';
}
themeIcon.src = newTheme === 'dark' ? 'images/light-mode.png' : 'images/dark-mode.png';
});

calendarGrid.appendChild(dayElement);
}
}

// Event listeners for month navigation
document.getElementById('prev-month').addEventListener('click', () => {
currentMonth = (currentMonth === 0) ? 11 : currentMonth - 1;
currentYear = (currentMonth === 11) ? currentYear - 1 : currentYear;
generateCalendar();
});

document.getElementById('next-month').addEventListener('click', () => {
currentMonth = (currentMonth === 11) ? 0 : currentMonth + 1;
currentYear = (currentMonth === 0) ? currentYear + 1 : currentYear;
generateCalendar();
});

document.getElementById('add-event').addEventListener('click', () => {
const date = document.getElementById('event-date').value;
const title = document.getElementById('event-title').value;
const color = document.getElementById('event-color').value;

if (date && title) {
events.push({ date, title, color });
generateCalendar();
document.getElementById('event-title').value = '';
}
});
// Toggle Hamburger Menu
document.querySelector('.hamburger-menu .toggle-button').addEventListener('click', () => {
const navbarLinks = document.querySelector('.navbar-links');
navbarLinks.classList.toggle('active');
});

document.addEventListener('DOMContentLoaded', generateCalendar);
</script>

</script>
<script>
window.embeddedChatbotConfig = {
chatbotId: "j2Uy2CrJfZueGX7wNtJT_",
domain: "www.chatbase.co"
}
</script>
<script
src="https://www.chatbase.co/embed.min.js"
chatbotId="j2Uy2CrJfZueGX7wNtJT_"
domain="www.chatbase.co"
defer>
</script>
</body>

</html>
</html>