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

Functionality and Readme.md file #227

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Functionality and Readme.md file #227

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4cbdf56
Update styles.css
Trumilnasit Oct 14, 2024
1f64da0
Update index.html
Trumilnasit Oct 14, 2024
953eceb
Update darkmode.js
Trumilnasit Oct 14, 2024
85bb467
Update 404.html
Trumilnasit Oct 14, 2024
183f691
Update README.md
Trumilnasit Oct 14, 2024
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
200 changes: 194 additions & 6 deletions 404.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<title>Code Social | Home</title>
Expand All @@ -7,7 +7,6 @@
<link rel="stylesheet" href="styles.css" type="text/css" />
<script src="script.js" defer></script>
<script type="text/javascript" src="darkmode.js" defer></script>
<!-- Tailwind CSS CDN -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
rel="stylesheet"
Expand All @@ -21,7 +20,6 @@
<span class="website-name tracking-tight">Code Social</span></a
>

<!-- Hamburger Menu -->
<div class="hamburger-menu">
<div class="toggle-button">
<img
Expand All @@ -32,7 +30,7 @@
</div>
</div>

<!-- Navbar Links -->

<ul class="navbar-links flex">
<li class="ml-20">
<a href="maintenance.html">Live Events</a>
Expand Down Expand Up @@ -61,7 +59,6 @@
<li>
<a href="maintenance.html">Follow Us</a>
</li>
<!-- Dark Mode Toggle -->
<li>
<button id="theme-toggle" class="theme-toggle-btn">
<img
Expand All @@ -70,7 +67,6 @@
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>
Expand Down Expand Up @@ -103,3 +99,195 @@
</section>
</body>
</html>
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Code Social | Maintenance</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles.css" type="text/css" />
<script src="script.js" defer></script>
<script type="text/javascript" src="darkmode.js" defer></script>
<!-- Tailwind CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet" />
<style>
/* Add some subtle animations */
.fade-in {
animation: fadeIn ease 2s;
}
@keyframes fadeIn {
0% { opacity:0; }
100% { opacity:1; }
}
.scale-up {
animation: scaleUp ease-in-out 1.5s;
}
@keyframes scaleUp {
0% { transform: scale(0.8); }
100% { transform: scale(1); }
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
</style>
</head>

<body class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100">
<!-- Navbar -->
<nav class="navbar">
<a href="index.html" class="flex">
<img src="/images/logo.png" class="logo" alt="Logo" />
<span class="website-name tracking-tight text-xl">Code Social</span>
</a>

<!-- Hamburger Menu -->
<div class="hamburger-menu">
<div class="toggle-button">
<img src="/images/hamburger.png" alt="open" 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">
<li><a href="maintenance.html">Why don't you react?</a></li>
</ul>
</li>
<li class="community">
<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>
<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>
<a href="maintenance.html">Meet Our Team</a>
</li>
<li>
<a href="maintenance.html">Join Our Team</a>
</li>
<li>
<a href="maintenance.html">Contact 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>
</li>
</ul>
</nav>

<!-- Under Maintenance Section -->
<section class="flex items-center justify-center h-screen bg-white dark:bg-gray-900 fade-in">
<div class="text-center p-6 max-w-screen-md scale-up">
<svg class="mx-auto w-16 h-16 text-gray-400 pulse mb-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M331.8 224.1c28.29 0 54.88 10.99 74.86 30.97..."></path>
</svg>
<h1 class="text-5xl font-bold tracking-tight text-gray-900 dark:text-white mb-4">We'll be back soon!</h1>
<p class="text-xl text-gray-500 dark:text-gray-400 mb-6">Our site is currently undergoing scheduled maintenance. Thank you for your patience.</p>
<div class="flex justify-center space-x-4">
<a href="index.html" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition duration-300">
Go to Home
</a>
<a href="mailto:[email protected]" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded-lg transition duration-300">
Contact Us
</a>
</div>
<div class="mt-6">
<p class="text-gray-600 dark:text-gray-400">Follow us for updates:</p>
<div class="flex justify-center space-x-4 mt-4">
<a href="https://wa.me/your-whatsapp-number" target="_blank">
<img src="/images/whatsapp-icon.png" alt="WhatsApp" class="w-8 h-8">
</a>
<a href="https://discord.gg/MSTNyRSPYW" target="_blank">
<img src="/images/discord-icon.png" alt="Discord" class="w-8 h-8">
</a>
<a href="https://www.linkedin.com/company/code-social/" target="_blank">
<img src="/images/linkedin-icon.png" alt="LinkedIn" class="w-8 h-8">
</a>
<a href="https://github.com/Code-Social" target="_blank">
<img src="/images/gitHub.png" alt="Github" class="w-8 h-8">
</a>
</div>
</div>
</div>
</section>

<script>
// Dark mode toggle script
const themeToggleBtn = document.getElementById("theme-toggle");
const themeIcon = document.getElementById("theme-toggle-icon");
const body = document.body;

const currentTheme = localStorage.getItem("theme");

const setThemeIcon = (isDarkMode) => {
themeIcon.src = isDarkMode
? "/images/light-mode.png"
: "/images/dark-mode.png";
};

if (currentTheme === "dark") {
body.classList.add("dark-mode");
setThemeIcon(true);
} else {
setThemeIcon(false);
}

themeToggleBtn.addEventListener("click", function () {
const isDarkMode = body.classList.toggle("dark-mode");
localStorage.setItem("theme", isDarkMode ? "dark" : "light");
setThemeIcon(isDarkMode);
});

// Hamburger menu functionality
const toggleButton = document.querySelector(".toggle-button");
const navbar = document.querySelector(".navbar ul");
const hamburgerImg = document.getElementById("hamburger-img");

toggleButton.addEventListener("click", () => {
navbar.classList.toggle("active");
const isNavbarActive = navbar.classList.contains("active");
hamburgerImg.src = isNavbarActive
? "/images/close.png"
: "/images/hamburger.png";
});

// Dropdown functionality for the navbar
const navbarItems = document.querySelectorAll(".navbar-links li");
navbarItems.forEach(item => {
item.addEventListener("mouseover", () => {
const dropdown = item.querySelector(".dropdown");
if (dropdown) {
dropdown.style.display = "block";
}
});
item.addEventListener("mouseout", () => {
const dropdown = item.querySelector(".dropdown");
if (dropdown) {
dropdown.style.display = "none";
}
});
});
</script>
</body>
</html>
29 changes: 29 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
37 changes: 37 additions & 0 deletions darkmode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');

Expand Down
Loading