V1.4! Now with a centered design and the web application isn't broken on a mobile device anymore

Update README.md
V1.3(Again)! Fixed text colors of messages in dark mode
2025-12-14 17:34:05 +01:00 · 2023-12-11 14:37:23 +00:00 · 2023-12-02 01:25:49 +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
4 changed files with 123 additions and 90 deletions
--- a/README.md
+++ b/README.md
@@ -2,5 +2,6 @@

 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/7284b5fb-7a0a-4a6b-a8b3-95d2cef3959b)
+

--- a/html/index.html
+++ b/html/index.html
@@ -11,7 +11,7 @@
  <body onload = "onload()">
    <div id = "Main">
      <audio id = "Ding" src = "Ding.mp3"> </audio>
-      <h1 id = "Title"> MicDropMessages V1.2 </h1>
+      <h1 id = "Title"> MicDropMessages V1.4 </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>
--- a/html/script.js
+++ b/html/script.js
@@ -39,7 +39,7 @@ function onload(){
    }
    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;
    }
  })
 }
@@ -64,3 +64,13 @@ function delayReset(){
 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,42 +1,47 @@
-  body{
+body{
  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 */
  color: #000000;
  font-family: 'Segoe UI';
-  }
-
-  label{
-    width: 5%;
-    display: inline-block;
-    text-align: right;
-  }
-
-  input{
+  display: flex; /* Use flexbox to center content */
+  justify-content: center; /* Center horizontally */
+  align-items: center; /* Center vertically */
+}
+label{
+  min-width: 70px; /* Ensure label has enough width */
+  display: block; /* Make labels stack above inputs and buttons */
+  margin-bottom: 0.5em; /* Provide some space between label and input/button */
+  text-align: left; /* Align text to the left */
+}
+input{
  background-color: rgba(255, 255, 255, 0.15);
  color: #000000;
  font-size: 120%;
  border: none;
-    
-  }
-
-  .Message{
+  width: 100%; /* Full width input fields */
+  box-sizing: border-box; /* Border box sizing for padding and borders */
+  margin-bottom: 1em; /* Provide space below inputs */
+}
+.Message{
  color: #000000;
-  }
-
-  #Main{
+}
+#Main{
+  min-height: 94.5vh; /* Stretch to fill the viewport height */
+  width: 50%;
  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{
+  display: flex; /* Adding flex properties to layout contents */
+  flex-direction: column; /* Stack children elements vertically */
+  align-items: center; /* Centering child elements horizontally */
+}
+#Title{
  font-size: 300%;
-  }
-
-  .button {
+}
+.button {
  background-color:transparent;
  border-radius:28px;
  border:0px solid #000000;
@@ -49,40 +54,57 @@
  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 */
-  }
-  .button:hover {
+  width: auto; /* Width is determined by content within */
+  margin: 0.5em 0; /* Margin around buttons */
+}
+.button:hover {
  background-color:#000000;
  color:#ffffff;
-
-  }
-  .button:active {
+}
+.button:active {
  position:relative;
  top:1px;
-  }
-
-  /* Add this to your CSS to support dark mode */
-  body.dark-mode {
+}
+/* Add this to your CSS to support dark mode */
+body.dark-mode {
  color: #ffffff; /* Light text color for contrast */
-  }
-  /* You might want to customize other elements for dark mode, for example: */
-  .dark-mode #Main {
+  backdrop-filter: blur(5px); /* Provide a translucent frosted-glass effect */
+  background-color: rgba(0, 0, 0, 1); /* Slightly transparent dark background */
+}
+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 */
+}
+.dark-mode #Main {
  background-color: #333; /* Dark background for main content area */
-  }
-  /* Additional elements can be customized as needed for dark mode... */
-
-  .input {
+}
+.input {
  border-radius: 10px;
  padding: 6px;
-  }
-
-  .button2 {
+  width: 100%; /* Full width input fields */
+  box-sizing: border-box; /* Border box sizing for padding and borders */
+}
+.button2 {
  border-radius: 10px;
  padding: 6px;
  transition: background-color 0.3s ease; /* Transition for button hover effects */
-  }
-
-  .button2:hover {
+  width: auto; /* Width is determined by content within */
+  margin: 0.5em 0; /* Margin around buttons */
+}
+.button2:hover {
  background-color:#000000;
  color:#ffffff;
+}
+@media (max-width: 600px) {
+  label {
+    width: auto; /* Full width on narrow screens */
  }
-  
+  #Main {
+    width: 100%; /* Full width on narrow screens */
+  }
+}
Author	SHA1	Message	Date
abrendan	d4112b4a19	V1.4! Now with a centered design and the web application isn't broken on a mobile device anymore	2023-12-11 14:37:23 +00:00
Brendan	b23c6692ab	Update README.md	2023-12-02 01:25:49 +01:00
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