abrendan_dev/MicDropMessages
1
0
Fork 0
mirror of https://github.com/abrendan/MicDropMessages.git synced 2025-06-16 12:45:01 +02:00
Code Issues Packages Projects Releases Wiki Activity

V2.3.0: Updated the design

Browse Source
This commit is contained in:
Brendan 2024-12-26 16:12:51 +00:00
parent efe82a5d25
commit 6ed7ec0d91
4 changed files with 153 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
html/index.html
View File

@ -4,7 +4,12 @@
<title> MicDropMessages </title> <title> MicDropMessages </title>
<meta name="charset" charset="utf-8"> <meta name="charset" charset="utf-8">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'> <link href='https://fonts.googleapis.com/css2?family=Segoe+UI:wght@400;500;600&display=swap' rel='stylesheet'>
<style>
html {
scroll-behavior: smooth;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" href="https://i.ibb.co/jvVTdPM/nobackground-withoutname2.png"> <link rel="icon" href="https://i.ibb.co/jvVTdPM/nobackground-withoutname2.png">
<script src="script.js"></script> <script src="script.js"></script>
@ -13,7 +18,7 @@
<body onload="onload()"> <body onload="onload()">
<div id="Main"> <div id="Main">
<audio id="Ding" src="new-notification.mp3"> </audio> <audio id="Ding" src="new-notification.mp3"> </audio>
<h1 id="Title"> MicDropMessagesV2</h1> <h1 id="Title"> MicDropMessages</h1>
<img id="Logo" src="https://micdropmessages.app/pictures/mdm2logo1.png" alt="Logo"> <img id="Logo" src="https://micdropmessages.app/pictures/mdm2logo1.png" alt="Logo">
<p>Welcome to MicDropMessages! This small web-based application allows you to chat with your friends anonymously! To start, enter your username and enter a chatroom.</p> <p>Welcome to MicDropMessages! This small web-based application allows you to chat with your friends anonymously! To start, enter your username and enter a chatroom.</p>
<div id="AccessPort"> <div id="AccessPort">
@ -35,7 +40,6 @@
<p id="Message6" class="Message"> - </p> <p id="Message6" class="Message"> - </p>
<p id="Message7" class="Message"> - </p> <p id="Message7" class="Message"> - </p>
<p id="Message8" class="Message"> - </p> <p id="Message8" class="Message"> - </p>
<p id="Message9" class="Message"> - </p>
<label id="MessageLabel"> Message </label> <label id="MessageLabel"> Message </label>
<input id="ComposedMessage" class="input" type="text"> <input id="ComposedMessage" class="input" type="text">
<input id="SendMessage" onclick="Send()" value="Send your message" class="button2" type="submit"> <input id="SendMessage" onclick="Send()" value="Send your message" class="button2" type="submit">
@ -48,11 +52,13 @@
<button id="WebsiteButton" onclick="window.open('http://www.abrendan.dev','_blank')" class="button">abrendan.dev</button> <button id="WebsiteButton" onclick="window.open('http://www.abrendan.dev','_blank')" class="button">abrendan.dev</button>
</div> </div>
</div> </div>
<p class="version-number">V2.2.1</p> <p class="version-number">V2.3.0</p>
</div> </div>
<div id="errorPopup" class="error-popup"> <div id="errorPopup" class="error-popup">
<div class="error-popup-content">
<p id="errorText">Please enter a username and a chatroom.</p> <p id="errorText">Please enter a username and a chatroom.</p>
<button id="errorButton" class="button2" onclick="closeErrorPopup()">Continue</button> <button id="errorButton" class="button2" onclick="closeErrorPopup()">Continue</button>
</div> </div>
</div>
</body> </body>
</html> </html>

1
html/script.js
View File

@ -54,7 +54,6 @@ function Connect(){
if(username && room){ if(username && room){
socket.emit("join", room, username); socket.emit("join", room, username);
chatRoom.innerHTML = "Chatroom: " + room; chatRoom.innerHTML = "Chatroom: " + room;
document.getElementById("Chat").style.display = "none";
document.getElementById('AccessPort').style.display = 'none'; document.getElementById('AccessPort').style.display = 'none';
} else { } else {
showErrorPopup("Please enter a username and a chatroom."); showErrorPopup("Please enter a username and a chatroom.");

337
html/style.css
View File

@ -1,237 +1,182 @@
body { body {
background-image: url('https://micdropmessages.app/pictures/andy-holmes-rCbdp8VCYhQ-unsplash.jpg'); /* Path to your example image */ background-color: #202020;
background-size: cover; /* Cover the entire viewport */ color: #ffffff;
background-repeat: no-repeat; /* Do not repeat the image */ font-family: 'Segoe UI', 'Roboto', sans-serif;
background-attachment: fixed; /* The background image does not scroll */ display: flex;
color: #ffffff; /* Light text color for contrast */ justify-content: center;
font-family: 'Roboto'; align-items: center;
display: flex; /* Use flexbox to center content */ margin: 0;
justify-content: center; /* Center horizontally */ min-height: 100vh;
align-items: center; /* Center vertically */ background-image: linear-gradient(45deg, #1a1a1a 0%, #2d2d2d 100%);
}
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: #ffffff; /* Light text color for contrast */
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: #ffffff; /* Light text color for contrast */
word-wrap: break-word; /* Break long words */
word-break: break-all; /* Break long words */
white-space: pre-wrap; /* Wrap text maintaining white spaces */
}
.other {
width: 100%; /* Set width */
text-align: center; /* Center inline and inline-block elements within */
}
#Logo{
height: 80px;
}
#Chat{
display: none;
width: 100%; /* Make the chat part fill the entire width */
} }
#Main { #Main {
min-height: 94.5vh; /* Stretch to fill the viewport height */ background: rgba(32, 32, 32, 0.8);
width: 50%; backdrop-filter: blur(20px);
padding: 20px; /* Padding added to the main content area */ -webkit-backdrop-filter: blur(20px);
border-radius: 10px; border-radius: 12px;
backdrop-filter: blur(5px); /* Provide a translucent frosted-glass effect */ border: 1px solid rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(5px); padding: 2rem;
background-color: rgba(0, 0, 0, 0.1); /* Slightly transparent dark background */ width: 90%;
display: flex; /* Adding flex properties to layout contents */ max-width: 800px;
flex-direction: column; /* Stack children elements vertically */ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
align-items: center; /* Centering child elements horizontally */ transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative; /* To position the version number correctly */ }
#Main:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}
.input {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
color: #ffffff;
padding: 12px;
font-size: 16px;
transition: all 0.3s ease;
width: 100%;
box-sizing: border-box;
}
.input:focus {
border-color: #0078d4;
outline: none;
background: rgba(255, 255, 255, 0.08);
}
.button, .button2 {
background: rgba(255, 255, 255, 0.08);
border: none;
border-radius: 8px;
color: #ffffff;
padding: 12px 24px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
margin: 8px 0;
backdrop-filter: blur(4px);
}
.button:hover, .button2:hover {
background: #0078d4;
transform: translateY(-2px);
}
.button:active, .button2:active {
transform: translateY(0);
background: #006cbd;
}
.Message {
padding: 12px;
margin: 8px 0;
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
} }
#Title { #Title {
font-size: 300%; font-size: 2.5rem;
margin-bottom: 1rem;
text-align: center;
background: linear-gradient(45deg, #0078d4, #00b4ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: titleGlow 2s ease-in-out infinite alternate;
} }
#LinkButtons{ @keyframes titleGlow {
display: inline-block; from {
filter: drop-shadow(0 0 2px rgba(0, 120, 212, 0.3));
}
to {
filter: drop-shadow(0 0 10px rgba(0, 120, 212, 0.6));
}
} }
#ConnectButton { #Logo {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
margin-bottom: 20px; height: 80px;
padding: 20px 40px; /* Increase the padding to make the button bigger */ animation: float 3s ease-in-out infinite;
font-size: 20px; /* Increase the font-size for better readability on small screens */
} }
#errorButton { @keyframes float {
padding: 16px 31px; 0% { transform: translateY(0px); }
border-radius: 10px; 50% { transform: translateY(-10px); }
transition: background-color 0.3s ease; 100% { transform: translateY(0px); }
text-decoration: none;
width: auto;
margin: 0.5em 0;
background-color: rgba(255, 255, 255, 0.2); /* Slightly white transparent background */
border: 0px solid #000000;
cursor: pointer;
color: #ffffff; /* Light text color for contrast */
font-size: 17px;
text-shadow: 0px 1px 0px #000000;
display: block;
margin: 20px;
}
#errorButton:hover {
background-color: #000000;
color: #ffffff;
}
#errorButton:active {
position: relative;
top: 1px;
}
#errorText {
margin-left: 20px;
} }
.error-popup { .error-popup {
display: none; display: none;
position: fixed; position: fixed;
left: 0;
top: 0; top: 0;
left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto; background: rgba(32, 32, 32, 0.95);
background-color: rgba(0,0,0,0.4); backdrop-filter: blur(20px);
backdrop-filter: blur(20px); /* Provide a translucent frosted-glass effect */
-webkit-backdrop-filter: blur(20px);
z-index: 2;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 1000;
} }
.error-popup-content { .error-popup-content {
background-color: #fefefe; background: #202020;
margin: auto; border: 1px solid rgba(255, 255, 255, 0.1);
color: #ffffff;
border-radius: 12px;
padding: 20px; padding: 20px;
border: 1px solid #888; text-align: center;
width: 80%; max-width: 300px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
border-radius: 5px;
text-align: center; /* Center the content inside the error popup */
}
.button {
background-color: rgba(255, 255, 255, 0.2); /* Slightly white transparent background */
border-radius: 28px;
border: 0px solid #000000;
display: inline-block;
cursor: pointer;
color: #ffffff; /* Light text color for contrast */
font-size: 17px;
padding: 16px 31px;
text-decoration: none;
text-shadow: 0px 1px 0px #000000;
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;
}
.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 */
background-color: rgba(255, 255, 255, 0.2); /* Slightly white transparent background */
color: #ffffff; /* Light text color for contrast */
}
.button2:hover {
background-color: #000000;
color: #ffffff;
}
.version-number {
position: absolute;
bottom: 1px;
right: 10px;
font-size: 0.75em;
color: #ffffff; /* Light text color for contrast */
} }
@media (max-width: 900px) { @media (max-width: 900px) {
label { body {
width: auto; /* Full width on narrow screens */ background: #202020;
} }
#Main { #Main {
width: 100%; /* Full width on narrow screens */ width: 100%;
padding: 1rem;
background: transparent;
border: none;
backdrop-filter: none;
box-shadow: none;
}
#Main:hover {
transform: none;
box-shadow: none;
}
#SendMessage, #LeaveRoomButton, #ConnectButton {
display: block;
width: 100%;
max-width: 300px;
margin: 8px auto;
} }
} }
@media (max-width: 650px) { @media (max-width: 650px) {
#Title { #Title {
font-size: 150%; font-size: 2rem;
}
#ConnectButton {
display: block;
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 {
display: block;
margin: 0 auto;
}
#LinkButtons {
text-align: center;
}
#SendMessage {
display: block;
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 */
}
#LeaveRoomButton {
display: block;
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 */
} }
} }
#Chat {
display: none;
}