diff --git a/404.html b/404.html index 71cebc0..3bd17c2 100644 --- a/404.html +++ b/404.html @@ -1,4 +1,4 @@ - + Code Social -
- + @@ -103,3 +99,195 @@ + --> + + + + Code Social | Maintenance + + + + + + + + + + + + + + + +
+
+ + + +

We'll be back soon!

+

Our site is currently undergoing scheduled maintenance. Thank you for your patience.

+
+ + Go to Home + + + Contact Us + +
+
+

Follow us for updates:

+
+ + WhatsApp + + + Discord + + + LinkedIn + + + Github + +
+
+
+
+ + + + diff --git a/README.md b/README.md index 145ca3c..137b106 100644 --- a/README.md +++ b/README.md @@ -70,6 +70,35 @@ To set up the project locally, follow these steps: npm start ``` + Dark Mode Feature (darkmode.js) +We’ve implemented a dark mode feature for our website using the darkmode.js script. The dark mode preference is saved locally using localStorage, so users can enjoy their preferred theme on subsequent visits. Here’s a guide to how you can use and contribute to this feature: + +How to Use the Dark Mode Feature +Users can toggle between Light Mode and Dark Mode using the switch button available on the top right of the website. +The theme preference (dark/light) is saved locally using localStorage so that the preference persists across sessions. +How to Run the Website Locally with Dark Mode Feature +In order to test and develop the website locally with the dark mode feature, you'll need to serve the files using a local web server like http-server. This is especially useful for ensuring that the dark mode settings work properly when saving to localStorage. + +Instructions to Set Up Locally: +Install http-server (if not already installed): + +bash +Copy code +npm install -g http-server +Run the Local Development Server: In the project root directory, run: + +bash +Copy code +http-server . +This will start a local server that allows you to view the site on http://localhost:8080. + +Access the Site: Open your browser and navigate to: + +arduino +Copy code +http://localhost:8080 +Test Dark Mode: Toggle the dark mode and refresh the page to confirm that the theme persists using localStorage. + ## 🎊 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) diff --git a/darkmode.js b/darkmode.js index bb8f2df..4d61f29 100644 --- a/darkmode.js +++ b/darkmode.js @@ -1,4 +1,41 @@ +// Mock localStorage for Node.js +if (typeof localStorage === 'undefined' || localStorage === null) { + global.localStorage = { + getItem: function (key) { + return this[key]; + }, + setItem: function (key, value) { + this[key] = value; + }, + removeItem: function (key) { + delete this[key]; + } + }; +} + +if (typeof document === 'undefined') { + global.document = { + getElementById: function (id) { + console.log(`Mocking document.getElementById for id: ${id}`); + return { + addEventListener: function (event, callback) { + console.log(`Mocking addEventListener for event: ${event}`); + } + }; + }, + body: { + classList: { + add: function (className) { + console.log(`Mocking document.body.classList.add for class: ${className}`); + }, + remove: function (className) { + console.log(`Mocking document.body.classList.remove for class: ${className}`); + } + } + } + }; +} let darkmode = localStorage.getItem('darkmode'); const themeSwitch = document.getElementById('theme-switch'); diff --git a/index.html b/index.html index 0662880..da73592 100644 --- a/index.html +++ b/index.html @@ -8,40 +8,26 @@ - - + -

About Community

-

- 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. +

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. @@ -90,31 +67,53 @@

About Community

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.

- + + +
-

Event Calendar

+

Event Calendar

Add Event

- + + + + + @@ -123,154 +122,188 @@

Add Event

-
- -
+
-
- -
- + + + function checkEventsForReminder() { + const today = new Date().toISOString().split("T")[0]; + savedEvents.forEach(event => { + if (event.date === today) { + notifyUser(event); + } + }); + } + // Check for event reminders after the page loads + document.addEventListener('DOMContentLoaded', checkEventsForReminder); + - \ No newline at end of file + diff --git a/styles.css b/styles.css index ecf3be2..eb94b44 100644 --- a/styles.css +++ b/styles.css @@ -899,3 +899,56 @@ footer { color: #6b7280; font-size: 0.875rem; } + +body { + transition: background-color 0.5s ease, color 0.5s ease; +} + +body.dark-mode { + background-color: #121212; + color: #ffffff; +} + +.event-form select { + margin: 15px 0; + padding: 12px; + border-radius: 8px; + border: 1px solid #ccc; + font-size: 16px; + background-color: #f9f9f9; + cursor: pointer; + transition: all 0.3s ease; +} + +.event-form select:focus { + border-color: #4CAF50; + box-shadow: 0 0 8px rgba(76, 175, 80, 0.4); +} + +/* Style for the event form category dropdown */ +.event-form select { + margin: 15px 0; + padding: 12px; + border-radius: 8px; + border: 1px solid #ccc; + font-size: 16px; + background-color: #f9f9f9; + cursor: pointer; + transition: all 0.3s ease; + } + + /* Social media share buttons */ + .share-buttons a { + margin: 5px; + padding: 5px 10px; + color: #fff; + background-color: #4CAF50; + border-radius: 4px; + text-decoration: none; + transition: background-color 0.3s ease; + } + + .share-buttons a:hover { + background-color: #45a049; + } +