V1.3(Again)! Fixed text colors of messages in dark mode

V1.3! Fixed text colors of messages in dark mode
Built in a easter egg...
2025-12-14 17:34:05 +01:00 · 2023-12-02 00:20:32 +00:00 · 2023-12-02 00:18:17 +00:00 · 2023-12-02 00:02:04 +00:00 · 2023-12-01 23:23:18 +00:00 · 2023-12-01 20:54:12 +01:00
4 changed files with 134 additions and 59 deletions
--- a/README.md
+++ b/README.md
@@ -1,5 +1,6 @@
 # MicDropMessages

-MicDropMessages is a basic chat platform using socket.io and JavaScript.
+MicDropMessages is a basic chat platform using socket.io and JavaScript. Now with a simple dark mode option!
+
+![grafik](https://github.com/abrendan/MicDropMessages/assets/94894839/1e91b762-3acd-4d1b-b89b-86957ef50064)

-![grafik](https://github.com/abrendan/MicDropMessages/assets/94894839/fa440a3d-bf3b-4304-9c3f-04a9bc44fcda)
--- a/html/index.html
+++ b/html/index.html
@@ -11,15 +11,15 @@
  <body onload = "onload()">
    <div id = "Main">
      <audio id = "Ding" src = "Ding.mp3"> </audio>
-      <h1 id = "Title"> MicDropMessages V1.1 </h1>
+      <h1 id = "Title"> MicDropMessages V1.3 </h1>
      <p>Welcome to MicDropMessages! This small webbased application allows you to chat with your friends anonymously! To start, enter your username and enter a chatroom.</p>
      <div id = "AccessPort">
        <label id = "NameLabel"> Username  </label>
-        <input id = "NameInput" type = "text">
+        <input id = "NameInput" class="input" type = "text">
        <br><br>
        <label id = "IDLabel"> Chatroom </label>
-        <input id = "IDInput" value = "Room1" type = "text">
-        <input id = "ConnectButton" class = "Button" type = "submit" value = "Connect" onclick = "Connect()">
+        <input id = "IDInput" class="input" value = "Room1" type = "text">
+        <input id = "ConnectButton" class="button2" type = "submit" value = "Connect" onclick = "Connect()">
      </div>
      <h2 id = "RoomID"> Chatroom : None </h2>
      <div id = "Chat">
@@ -34,11 +34,12 @@
        <p id = "Message8" class = "Message"> - </p>
        <p id = "Message9" class = "Message"> - </p>
        <label id = "MessageLabel"> Message </label>
-        <input id = "ComposedMessage" type = "text">
-        <input id = "SendMessage" onclick="Send()" value = "Send your message" class = "Button" type = "submit">
+        <input id = "ComposedMessage" class="input" type = "text">
+        <input id = "SendMessage" onclick="Send()" value = "Send your message" class="button2" type = "submit">
      </div>
      <p>Made by abrendan. Visit my website for more of my projects.</p>
-      <a href='https://abrendan.dev/' target="_blank" class="sitebutton">abrendan.dev</a>
+      <button id="darkModeToggle" onclick="toggleDarkMode()" class="button">Toggle Dark Mode</button>
+      <button onclick=" window.open('http://www.abrendan.dev','_blank')" class="button">abrendan.dev</button>
      <br><br>
    </div>
  </body>
--- a/html/script.js
+++ b/html/script.js
@@ -1,5 +1,5 @@
 var socket;
-var usernameInput
+var usernameInput;
 var chatIDInput;
 var messageInput;
 var chatRoom;
@@ -15,6 +15,13 @@ function onload(){
  chatRoom = document.getElementById("RoomID");
  dingSound = document.getElementById("Ding");

+  // Event listener to send message when Enter key is pressed
+  messageInput.addEventListener("keyup", function(event) {
+    if (event.key === "Enter") { // Check if Enter was pressed
+      Send(); // Trigger send message
+    }
+  });
+
  socket.on("join", function(room){
    chatRoom.innerHTML = "Current Chatroom : " + room;
  })
@@ -30,9 +37,9 @@ function onload(){
      messages.shift();
      messages.push(message);
    }
-    for (i = 0; i < messages.length; i++){
+    for (var i = 0; i < messages.length; i++){
      document.getElementById("Message"+i).innerHTML = messages[i];
-        document.getElementById("Message"+i).style.color = "#000000";
+      document.getElementById("Message"+i).style.color = getComputedStyle(document.body).color;
    }
  })
 }
@@ -53,3 +60,17 @@ function Send(){
 function delayReset(){
  delay = true;
 }
+
+function toggleDarkMode() {
+  document.body.classList.toggle('dark-mode');
+}
+
+document.addEventListener('keydown', function(event) {
+  // Check if Alt + Ctrl + R are pressed together
+  if (event.altKey && event.ctrlKey && event.key === 'r') {
+    // Prevent the default action to avoid conflicts
+    event.preventDefault(); 
+    // Open the desired webpage in a new window/tab
+    window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ');
+  }
+});
--- a/html/style.css
+++ b/html/style.css
@@ -1,5 +1,5 @@
  body{
-  background-image: url('https://i.ibb.co/zhPZBTt/luke-chesser-Cx-Bx-J3yp9g-unsplash.jpg'); /* Path to your example image */
+    background-image: url('https://images.unsplash.com/37/IHLjdHdzSvi0rgUMMlSK_TE3_0286.jpg'); /* Path to your example image */
    background-size: cover; /* Cover the entire viewport */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-attachment: fixed; /* The background image does not scroll */
@@ -14,39 +14,91 @@ label{
  }

  input{
-  background: #000000;
-  color: #db65fb;
+    background-color: rgba(255, 255, 255, 0.15);
+    color: #000000;
    font-size: 120%;
    border: none;
+    
  }

  .Message{
    color: #000000;
+
  }

+  #Main{
+    min-height: 94.5vh; /* Stretch to fill the viewport height */
+    padding: 20px; /* Padding added to the main content area */
+    border-radius: 10px;
+    backdrop-filter: blur(5px); /* Provide a translucent frosted-glass effect */
+    background-color: rgba(255, 255, 255, 0.2); /* Slightly white transparent background */
+  }


  #Title{
    font-size: 300%;
  }

-.sitebutton {
+  .button {
    background-color:transparent;
    border-radius:28px;
-  border:1px solid #db65fb;
+    border:0px solid #000000;
    display:inline-block;
    cursor:pointer;
    color:#000000;
-  font-family:Arial;
    font-size:17px;
    padding:16px 31px;
    text-decoration:none;
    text-shadow:0px 1px 0px #000000;
+    background-color: rgba(255, 255, 255, 0.2); /* Slightly white transparent background */
+    transition: background-color 0.3s ease; /* Transition for button hover effects */
  }
-.sitebutton:hover {
-  background-color:transparent;
+  .button:hover {
+    background-color:#000000;
+    color:#ffffff;
+
  }
-.sitebutton:active {
+  .button:active {
    position:relative;
    top:1px;
  }
+
+  /* Add this to your CSS to support dark mode */
+  body.dark-mode {
+    color: #ffffff; /* Light text color for contrast */
+  }
+  body.dark-mode .button {
+    color: #ffffff; /* Dark button background color */
+      }
+
+body.dark-mode .button2 {
+  color: #ffffff; /* Dark button background color */
+    }
+
+body.dark-mode .input {
+  color: #ffffff; /* Dark button background color */
+    }
+
+
+  /* You might want to customize other elements for dark mode, for example: */
+  .dark-mode #Main {
+    background-color: #333; /* Dark background for main content area */
+  }
+  /* Additional elements can be customized as needed for dark mode... */
+
+  .input {
+    border-radius: 10px;
+    padding: 6px;
+  }
+
+  .button2 {
+    border-radius: 10px;
+    padding: 6px;
+    transition: background-color 0.3s ease; /* Transition for button hover effects */
+  }
+
+  .button2:hover {
+    background-color:#000000;
+    color:#ffffff;
+  }
+
Author	SHA1	Message	Date
abrendan	b1bccfb358	V1.3(Again)! Fixed text colors of messages in dark mode	2023-12-02 00:20:32 +00:00
abrendan	a80e0b0abc	V1.3! Fixed text colors of messages in dark mode	2023-12-02 00:18:17 +00:00
abrendan	83a6d186ea	Built in a easter egg...	2023-12-02 00:02:04 +00:00
abrendan	30f3ea974d	Somewhat fixed the bottom	2023-12-01 23:23:18 +00:00
Brendan	3737ce838a	Update README.md	2023-12-01 20:54:12 +01:00
abrendan	c8e10cb345	V1.2! Updates visuals and new Dark Mode	2023-12-01 14:50:43 +00:00