diff --git a/real_time_event_updates/app.js b/real_time_event_updates/app.js index bb982f8..ccb136f 100644 --- a/real_time_event_updates/app.js +++ b/real_time_event_updates/app.js @@ -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'); @@ -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'); +}); diff --git a/real_time_event_updates/index.html b/real_time_event_updates/index.html index bb08c41..c3ef1c9 100644 --- a/real_time_event_updates/index.html +++ b/real_time_event_updates/index.html @@ -4,10 +4,15 @@ Real-Time Event Updates & Live Chat - + + - + +
+ +
+

Real-Time Event Updates

@@ -15,7 +20,6 @@

Real-Time Event Updates

-

Live Chat Support

@@ -25,6 +29,6 @@

Live Chat Support

- + diff --git a/real_time_event_updates/style.css b/real_time_event_updates/style.css index 0305bc8..0a105d5 100644 --- a/real_time_event_updates/style.css +++ b/real_time_event_updates/style.css @@ -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%; } - \ No newline at end of file +}