Skip to content

Commit

Permalink
Merge branch 'main' into patch-1
Browse files Browse the repository at this point in the history
  • Loading branch information
@pulkitpathak99
pulkitpathak99 authored Oct 8, 2024
2 parents b00854d + 5112df9 commit dabbd3f
Show file tree
Hide file tree
Showing 7 changed files with 270 additions and 51 deletions.
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5502
}
45 changes: 28 additions & 17 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,32 @@
# Code Social Community's Official Website
# GSSoc'24 <a href="https://codeittool.netlify.app">Extended<img src="https://user-images.githubusercontent.com/63473496/153487849-4f094c16-d21c-463e-9971-98a8af7ba372.png" height=40px align=right></a>

![License](https://cdn.prod.website-files.com/5e0f1144930a8bc8aace526c/65dd9eb5aaca434fac4f1c34_License-MIT-blue.svg)
![GitHub Issues](https://img.shields.io/github/issues/Code-Social/official-website)
![GitHub Pull Requests](https://img.shields.io/github/issues-pr/Code-Social/official-website)
![Stars](https://img.shields.io/github/stars/Code-Social/official-website)

# ☕ Code Social Community's Official Website

Welcome to the official repository for the Code Social Community website! This repository includes the code and content for our community-driven website. As an open-source project, we welcome contributions from anyone interested in enhancing our platform.

## About Code Social
## 🌟 About Code Social

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!

*Join the Code Social Community*: [Click here to join](https://discord.gg/MSTNyRSPYW)
![Discord](https://img.shields.io/badge/Discord-7289DA?style=for-the-badge&logo=discord&logoColor=white)
* 🤝 Join the Code Social Community : [Click here to join](https://discord.gg/MSTNyRSPYW)

## ⚙️ Tech Stack
![HTML5](https://img.shields.io/badge/HTML-239120?style=for-the-badge&logo=html5&logoColor=white)
![CSS](https://img.shields.io/badge/CSS-239120?&style=for-the-badge&logo=css3&logoColor=white)
![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)

## Contributing to Our Website

## 🤗 Contributing to Our Website

We believe in the power of community and open-source collaboration. Our website is a reflection of this, and we invite community members to contribute to its development. Here's how you can get involved:

### How to Contribute
### ✨ How to Contribute

1. **Fork the Repository**: Start by forking this repository to your GitHub account.
2. **Clone the Repository**: Clone the forked repository to your local machine using `git clone`.
Expand All @@ -21,21 +35,21 @@ We believe in the power of community and open-source collaboration. Our website
5. **Push Changes**: Push your changes to your forked repository using `git push origin branch-name`.
6. **Create a Pull Request**: Open a pull request to the main repository. Provide a detailed description of your changes and any relevant information.

### What You Can Contribute
### 🛠️ What You Can Contribute

- **Bug Fixes**: Help us identify and fix bugs.
- **Features**: Implement new features or enhance existing ones.
- **Documentation**: Improve our documentation, including this README.
- **Design**: Contribute to the website's design and user experience.

### Contribution Guidelines
### 📋 Contribution Guidelines

- Ensure your code follows our coding standards and best practices.
- Write clear and concise commit messages.
- Provide detailed descriptions in your pull requests.
- Be respectful and collaborative in your interactions with other contributors.

## Getting Started
## 🚀 Getting Started

To set up the project locally, follow these steps:

Expand All @@ -56,20 +70,17 @@ To set up the project locally, follow these steps:
npm start
```

## For GSSOC and Hacktober Fest participants :
## 🎊 For GSSOC and Hacktober Fest participants :

Please read the Contribution Guidelines and if you have any doubts ,feel free to connect with the project admins or mentors. We have set up a discord channel in our community server for the event to answer queries,foster discussions and enhance collaboration on the project. [Click here to join](https://discord.com/channels/1049667734025289729/1291810957563134105)


## Join Us

We are excited to build and improve this website with the help of our community. Your contributions, no matter how big or small, are valuable and appreciated. Let's create something amazing together!

For any questions or further discussions, feel free to reach out to us on our Discord server: [Click here to join](https://discord.gg/MSTNyRSPYW)
## Our Valuable Contributors ❤️✨
[![Contributors](https://contrib.rocks/image?repo=Code-Social/official-website)]((https://github.com/Code-Social/official-website/graphs/contributors))

## 🙌 Join Us

## Our Valuable Contributors ❤️✨
We are excited to build and improve this website with the help of our community. Your contributions, no matter how big or small, are valuable and appreciated. Let's create something amazing together!

[![Contributors](https://contrib.rocks/image?repo=Code-Social/official-website)](https://github.com/Code-Social/official-website/graphs/contributors)
For any questions or further discussions, feel free to reach out to us on our Discord server: [Click here to join](https://discord.gg/MSTNyRSPYW)💬

## Happy coding!
15 changes: 15 additions & 0 deletions darkmode.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
let darkmode= localStorage.getItem('darkmode')
const themeSwitch = document.getElementById('theme-switch')
const enableDarkmode = () => {
document.body.classList.add('darkmode')
localStorage.setItem('darkmode','active')
}
const disableDarkmode = () => {
document.body.classList.remove('darkmode')
localStorage.setItem('darkmode',null)
}
if(darkmode==="active") enableDarkmode()
themeSwitch.addEventListener("click", () =>{
darkmode=localStorage.getItem('darkmode')
darkmode!=="active" ? enableDarkmode() : disableDarkmode()
})
Empty file added images/light.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.
222 changes: 195 additions & 27 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,67 +5,178 @@
<title>Code Social | Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css" type="text/css">
<link rel="stylesheet" href="styles.css" type="text/css" />
<script src="script.js" defer></script>
<script type="text/javascript" src="darkmode.js" defer></script>
<style>
/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5; /* Light mode background */
color: #000; /* Light mode text color */
}

/* Dark Mode Styles */
body.dark-mode {
background-color: #121212; /* Dark mode background */
color: #ffffff; /* Dark mode text color */
}

/* Calendar styles */
.calendar {
display: flex;
flex-direction: column;
align-items: center;
margin: 20px;
}

.calendar-header {
font-size: 24px;
margin-bottom: 10px;
}

.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 10px;
margin-bottom: 20px;
width: 100%; /* Full width */
max-width: 800px; /* Maximum width for the grid */
}

.calendar-day {
border: 1px solid #ccc;
padding: 20px; /* Increased padding */
text-align: center;
position: relative;
background-color: #ffffff; /* Light mode day background */
height: 100px; /* Fixed height for uniformity */
border-radius: 8px; /* Rounded corners */
transition: background-color 0.3s ease; /* Smooth transition */
}

body.dark-mode .calendar-day {
background-color: #1e1e1e; /* Dark mode day background */
border-color: #444; /* Dark mode border color */
}

.calendar-day:hover {
background-color: #e0e0e0; /* Light hover effect */
}

body.dark-mode .calendar-day:hover {
background-color: #333; /* Dark hover effect */
}

.event {
background-color: #4CAF50;
color: white;
padding: 5px; /* Adjusted padding */
border-radius: 3px;
font-size: 14px; /* Increased font size */
position: absolute;
bottom: 5px;
left: 5px;
right: 5px;
text-align: center;
cursor: pointer; /* Makes the event clickable */
overflow: hidden; /* Prevents overflow of text */
white-space: nowrap; /* Keeps text in a single line */
text-overflow: ellipsis; /* Adds ellipsis for overflowed text */
}

/* Form styles */
.event-form {
margin: 20px;
display: flex;
flex-direction: column;
align-items: center;
}

.event-form input,
.event-form button {
margin: 5px;
padding: 10px;
font-size: 16px;
width: 100%; /* Full width for inputs */
max-width: 300px; /* Maximum width for inputs */
}

/* Button styles */
.edit-btn,
.delete-btn {
margin-top: 5px;
padding: 2px 5px;
font-size: 12px;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}

.edit-btn {
background-color: #2196F3; /* Blue */
}

.delete-btn {
background-color: #F44336; /* Red */
}
</style>
</head>

<body>
<header>
<button id="theme-switch">
<img src="file:///C:/Users/Dell/Downloads/dark_mode_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg" alt="Dark Mode">
<img src="file:///C:/Users/Dell/Downloads/light_mode_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg" alt="Light Mode">
</button>
</header>

<nav class="navbar">
<a href="index.html"><img src="images/logo.png"
class="logo"></a>
<a href="index.html"><img src="images/logo.png" class="logo" alt="Code Social logo"></a>
<span class="website-name">Code Social</span>
<ul>
<li>
<a href="#">Live Events</a>
<ul class="dropdown">
<li><a href="#">Why don't you react?</a></li>
<li><a href="#"> Why don't you react?</a></li>
</ul>
</li>

<!-- Dropdown -->
<li>
<a href="#">Join our Community</a>
<ul class="dropdown">
<li><a href="#"> Whatsapp</a></li>
<li><a href="#">Whatsapp</a></li>
<li><a href="#">Discord</a></li>
</ul>
</li>
<li class="hamburger-menu">
<a href="javascript:void(0);" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<ul class="dropdown">
<li><a href="#">Meet Our Team</a></li>
<li><a href="#"> 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>
</ul>
</nav>

<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.
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 @@ -79,13 +190,70 @@ <h2>About Community</h2>
<img src="images/linkedin-icon.png" alt="LinkedIn">
</a>
</div>

</section>

<footer>
<!-- Event Calendar Section -->
<section class="calendar">
<div class="calendar-header">Event Calendar</div>
<div class="calendar-grid" id="calendar-grid"></div>

<!-- Event Customization Form -->
<div class="event-form">
<h3>Add Event</h3>
<input type="date" id="event-date" required>
<input type="text" id="event-title" placeholder="Event Title" required>
<button id="add-event">Add Event</button>
</div>
</section>

<footer>
<p>&copy; 2024 Code Social. All rights reserved.</p>
</footer>

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

function generateCalendar() {
const calendarGrid = document.getElementById('calendar-grid');
const daysInMonth = new Date(2024, 9, 0).getDate(); // October 2024

// Clear existing calendar
calendarGrid.innerHTML = '';

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

const event = events.find(e => new Date(e.date).getDate() === day);
if (event) {
const eventElement = document.createElement('div');
eventElement.className = 'event';
eventElement.innerText = event.title;
dayElement.appendChild(eventElement);
}

calendarGrid.appendChild(dayElement);
}
}

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

if (date && title) {
events.push({ date, title });
generateCalendar();
document.getElementById('event-title').value = '';
}
});

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

</html>
Loading

0 comments on commit dabbd3f

Please sign in to comment.