Skip to content

Added dark and light mode in main.ing #104

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

Open
Megha-Chakraborty wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added dark and light mode in main.ing #104

Show file tree
Hide file tree
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
16 changes: 13 additions & 3 deletions real_time_event_updates/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,12 @@ const eventUpdates = document.getElementById('event-updates');
socket.addEventListener('message', function (event) {
const data = JSON.parse(event.data);

// If the data is for event updates
if (data.type === 'event-update') {
const update = document.createElement('p');
update.textContent = data.message;
eventUpdates.appendChild(update);
}

// If the data is a chat message
if (data.type === 'chat-message') {
const chatMessages = document.getElementById('chat-messages');
const message = document.createElement('p');
Expand All @@ -31,6 +29,18 @@ sendButton.addEventListener('click', function () {
const message = chatInput.value;
if (message) {
socket.send(JSON.stringify({ type: 'chat-message', message: message }));
chatInput.value = ''; // Clear input after sending
chatInput.value = '';
}
});

// Theme Toggle Functionality
const themeToggle = document.getElementById('theme-toggle');
themeToggle.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
document.body.classList.toggle('light-mode');

// Toggle icon between sun and moon
const icon = themeToggle.querySelector('i');
icon.classList.toggle('fa-sun');
icon.classList.toggle('fa-moon');
});
12 changes: 8 additions & 4 deletions real_time_event_updates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,22 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real-Time Event Updates & Live Chat</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <!-- Font Awesome -->
</head>
<body>
<!-- Real-Time Updates Section -->
<!-- Dark/Light Mode Toggle Icon -->
<div id="theme-toggle" class="theme-icon">
<i class="fas fa-sun"></i> <!-- Default icon as sun for light mode -->
</div>

<div class="event-updates-container">
<h2>Real-Time Event Updates</h2>
<div id="event-updates" class="updates">
<p>No new updates yet.</p>
</div>
</div>

<!-- Live Chat Support Section -->
<div class="live-chat-container">
<h2>Live Chat Support</h2>
<div id="chat-window" class="chat-window">
Expand All @@ -25,6 +29,6 @@ <h2>Live Chat Support</h2>
<button id="send-button">Send</button>
</div>

<script src="app.js"></script> <!-- link to javascript-->
<script src="app.js"></script> <!-- link to JavaScript -->
</body>
</html>
92 changes: 33 additions & 59 deletions real_time_event_updates/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,63 +1,37 @@
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}

/* Event Updates Section */
.event-updates-container {
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.updates {
background-color: #f0f0f0;
padding: 15px;
height: 200px;
overflow-y: auto;
}

h2 {
color: #333;
}

/* Live Chat Section */
.live-chat-container {
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.chat-window {
background-color: #f0f0f0;
/* General Styles */
body.light-mode {
background-color: #f4f4f4;
color: #333;
}
body.dark-mode {
background-color: #1a1a1a;
color: #f4f4f4;
}

/* Theme Toggle Icon Styles */
.theme-icon {
position: fixed;
top: 20px;
right: 20px;
font-size: 24px;
cursor: pointer;
color: #333; /* Light mode default */
}
body.dark-mode .theme-icon {
color: #f4f4f4; /* Dark mode default */
}

.theme-icon:hover {
opacity: 0.8;
}

/* Responsive Design for Containers */
@media (max-width: 768px) {
.event-updates-container, .live-chat-container {
padding: 10px;
height: 200px;
overflow-y: auto;
border: 1px solid #ccc;
margin-bottom: 10px;
}

#chat-input {
width: 80%;
padding: 10px;
margin-right: 10px;
}

#send-button {
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

#send-button:hover {
background-color: #0056b3;
width: 70%;
}
}