V2.0.1! Added a version number on the bottom right and a future way to add a logo. Also changed version scheme

Update README.md
Fixed the blur when viewed on webkit
2025-12-14 17:34:05 +01:00 · 2024-01-22 19:44:22 +00:00 · 2024-01-15 13:20:40 +01:00 · 2024-01-15 10:24:33 +00:00 · 2024-01-15 10:14:14 +00:00 · 2024-01-12 14:28:32 +00:00
7 changed files with 237 additions and 93 deletions
--- a/README.md
+++ b/README.md
@@ -2,5 +2,9 @@
 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)
+![mdm2](https://github.com/abrendan/MicDropMessages/assets/94894839/e7541c59-6210-4e08-a5a2-c5fdd137e2f7)
--- a/html/index.html
+++ b/html/index.html
@@ -4,6 +4,7 @@
    <title> MicDropMessages </title>
    <meta name = "charset" charset = "utf-8">
    <meta name = "viewport" content = "width=device-width">
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
    <link rel = "stylesheet" type = "text/css" href = "style.css">
    <script src = "script.js"></script>
    <script src= "socket.io/socket.io.js"></script>
@@ -11,7 +12,8 @@
  <body onload = "onload()">
    <div id = "Main">
      <audio id = "Ding" src = "Ding.mp3"> </audio>
-      <h1 id = "Title"> MicDropMessages V1.2 </h1>
+      <!-- <img id = "Logo" src="https://micdropmessages.app/pictures/micdropmessages_logo-circle.png" alt="Logo"> -->
      <h1 id = "Title"> MicDropMessages V2 </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>
@@ -37,10 +39,14 @@
        <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>
      <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>
+      <p>Made by abrendan. Visit my website for more of my projects.</p>
      <div id="LinkButtons">
        <button id="GitHubButton" onclick=" window.open('https://github.com/abrendan/MicDropMessages','_blank')" class="button">GitHub Page for MicDropMessages</button>
        <button id="WebsiteButton" onclick=" window.open('http://www.abrendan.dev','_blank')" class="button">abrendan.dev</button>
      </div>
      <br><br>
      <p class="version-number">V2.0.1</p>
    </div>
  </body>
 </html>
--- a/html/pictures/jezael-melgoza-2FiXtdnVhjQ-unsplash.jpg
+++ b/html/pictures/jezael-melgoza-2FiXtdnVhjQ-unsplash.jpg
--- a/html/pictures/micdropmessages_logo-circle.png
+++ b/html/pictures/micdropmessages_logo-circle.png
--- a/html/privacy.html
+++ b/html/privacy.html
--- 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,88 +1,156 @@
-  body{
+body{
-    background-image: url('https://images.unsplash.com/37/IHLjdHdzSvi0rgUMMlSK_TE3_0286.jpg'); /* Path to your example image */
+  background-image: url('https://micdropmessages.app/pictures/jezael-melgoza-2FiXtdnVhjQ-unsplash.jpg'); /* Path to your example image */
-    background-size: cover; /* Cover the entire viewport */
+  background-size: cover; /* Cover the entire viewport */
-    background-repeat: no-repeat; /* Do not repeat the image */
+  background-repeat: no-repeat; /* Do not repeat the image */
-    background-attachment: fixed; /* The background image does not scroll */
+  background-attachment: fixed; /* The background image does not scroll */
-    color: #000000;
+  color: #000000;
-    font-family: 'Segoe UI';
+  font-family: 'Roboto';
-  }
+  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;
  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;
 }
 #Logo{
  height: 80px;
 }
 #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 */
  -webkit-backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.2); /* Slightly white transparent background */
  display: flex; /* Adding flex properties to layout contents */
  flex-direction: column; /* Stack children elements vertically */
  align-items: center; /* Centering child elements horizontally */
  position: relative; /* To position the version number correctly */
 }
 #Title{
  font-size: 300%;
 }
 #LinkButtons{
  display: inline-block;
 }
 .button {
  background-color:transparent;
  border-radius:28px;
  border:0px solid #000000;
  display:inline-block;
  cursor:pointer;
  color:#000000;
  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 */
  width: auto; /* Width is determined by content within */
  margin: 0.5em 0; /* Margin around buttons */
 }
 .button:hover {
  background-color:#000000;
  color:#ffffff;
 }
 .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 */
-  label{
+  background-color: rgba(0, 0, 0, 1); /* Slightly transparent dark background */
-    width: 5%;
+}
-    display: inline-block;
+body.dark-mode .button {
-    text-align: right;
+  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: rgba(0, 0, 0, 0.5); /* Slightly transparent dark background */
 }
 body.dark-mode .version-number {
  color: #ffffff; /* Dark button background color */
 }
 .input {
  border-radius: 10px;
  padding: 6px;
  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 */
  width: auto; /* Width is determined by content within */
  margin: 0.5em 0; /* Margin around buttons */
 }
 .button2:hover {
  background-color:#000000;
  color:#ffffff;
 }
-  input{
+.version-number {
-    background-color: rgba(255, 255, 255, 0.15);
+  position: absolute;
-    color: #000000;
+  bottom: 1px;
-    font-size: 120%;
+  right: 10px;
-    border: none;
+  font-size: 0.75em;
  color: #000000; /* Assuming light text for visibility against a potentially dark background */
 }
@media (max-width: 800px) {
  label {
    width: auto; /* Full width on narrow screens */
  }
-
+  #Main {
-  .Message{
+    width: 100%; /* Full width on narrow screens */
    color: #000000;
  }
-
+}
-  #Main{
+@media (max-width: 650px) {
-    padding: 20px; /* Padding added to the main content area */
+  #Title {
-    border-radius: 10px;
+    font-size: 150%;
    backdrop-filter: blur(5px); /* Provide a translucent frosted-glass effect */
    background-color: rgba(255, 255, 255, 0.2); /* Slightly white transparent background */
  }
-
+  #ConnectButton {
-  #Title{
+    display: block;
-    font-size: 300%;
+    margin: 0 auto;
    padding: 20px 40px; /* Increase the padding to make the button bigger */
    font-size: 20px; /* Increase the font-size for better readability on small screens */
  }
-
+  #WebsiteButton {
-  .button {
+    display: block;
-    background-color:transparent;
+    margin: 0 auto;
    border-radius:28px;
    border:0px solid #000000;
    display:inline-block;
    cursor:pointer;
    color:#000000;
    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 */
  }
-  .button:hover {
+  #LinkButtons {
-    background-color:#000000;
+    text-align: center;
    color:#ffffff;
  }
-  .button:active {
+  #SendMessage {
-    position:relative;
+    display: block;
-    top:1px;
+    margin: 0 auto;
    margin-bottom: 20px;
    margin-top: 10px;
    padding: 20px 40px; /* Increase the padding to make the button bigger */
    font-size: 20px; /* Increase the font-size for better readability on small screens */
  }
-
+}
  /* 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 {
    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	b28d9a16db	V2.0.1! Added a version number on the bottom right and a future way to add a logo. Also changed version scheme	2024-01-22 19:44:22 +00:00
Brendan	91e2fa270a	Update README.md	2024-01-15 13:20:40 +01:00
abrendan	201546a7f3	Fixed the blur when viewed on webkit	2024-01-15 10:24:33 +00:00
abrendan	1733bb9a00	V2! New background, better mobile UI	2024-01-15 10:14:14 +00:00
abrendan	5ad7ad2ce6	V1.7! Bigger buttons for when viewed on a mobile screen or the android application	2024-01-12 14:28:32 +00:00
abrendan	226f1250da	Added privacy statement	2024-01-12 14:11:21 +00:00
abrendan	8f6697b00b	Made the buttons center when opened on a phone	2024-01-04 22:22:21 +00:00
abrendan	831834728d	Made adjustments to the padding when viewed on a smaller screen	2024-01-04 21:00:40 +00:00
Brendan	7bd7e14910	Update README.md	2024-01-01 02:58:30 +01:00
abrendan	da41439428	Added a button for the GitHub Page and changed the font to Google's Roboto	2024-01-01 01:56:43 +00:00
Brendan	3ff4eedf62	Update README.md	2023-12-26 13:53:35 +01:00
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
`@@ -2,5 +2,9 @@`

	`MicDropMessages is a basic chat platform using socket.io and JavaScript. Now with a simple dark mode option!`	`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)`	`![mdm2](https://github.com/abrendan/MicDropMessages/assets/94894839/e7541c59-6210-4e08-a5a2-c5fdd137e2f7)`