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

Compare commits

base: abrendan_dev:V2.2.0
Branches Tags
abrendan_dev:main
abrendan_dev:V2.2.0
abrendan_dev:V2.1.0
abrendan_dev:V2.0.1
abrendan_dev:V1.5
abrendan_dev:V1.4
abrendan_dev:V1.3
abrendan_dev:V1.2
abrendan_dev:V1.1
...
compare: abrendan_dev:main
Branches Tags
abrendan_dev:main
abrendan_dev:V2.2.0
abrendan_dev:V2.1.0
abrendan_dev:V2.0.1
abrendan_dev:V1.5
abrendan_dev:V1.4
abrendan_dev:V1.3
abrendan_dev:V1.2
abrendan_dev:V1.1

3 Commits
V2.2.0 ... main

Author SHA1 Message Date
Brendan
6ed7ec0d91 V2.3.0: Updated the design 2024-12-26 16:12:51 +00:00
Brendan
efe82a5d25 changed version number to V2.2.1 2024-08-23 09:57:00 +00:00
Brendan
52fcab7506 Fixed responsive web design for tablets 2024-08-23 09:54:26 +00:00
7 changed files with 164 additions and 204 deletions
Show Stats Expand all files Collapse all files

9
html/.well-known/assetlinks.json Normal file
View File

@ -0,0 +1,9 @@
[{
"relation": ["delegate_permission/common.handle_all_urls"],
"target": {
"namespace": "android_app",
"package_name": "com.abrendan.micdropmessages",
"sha256_cert_fingerprints":
["F4:68:84:2F:72:FC:E3:DC:82:A8:AC:73:FA:EA:0D:E9:9D:20:CD:07:D5:91:55:C7:E6:ED:49:9F:61:80:54:84"]
}
}]

21
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,8 @@
<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">
<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">
<label id="NameLabel"> Username </label> <label id="NameLabel"> Username </label>
@ -23,7 +29,7 @@
<input id="IDInput" class="input" value="Room1" type="text"> <input id="IDInput" class="input" value="Room1" type="text">
<input id="ConnectButton" class="button2" type="submit" value="Connect" onclick="Connect()"> <input id="ConnectButton" class="button2" type="submit" value="Connect" onclick="Connect()">
</div> </div>
<h2 id="RoomID"> Chatroom : None </h2> <h2 id="RoomID"> Chatroom: None </h2>
<div id="Chat"> <div id="Chat">
<p id="Message0" class="Message"> - </p> <p id="Message0" class="Message"> - </p>
<p id="Message1" class="Message"> - </p> <p id="Message1" class="Message"> - </p>
@ -34,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">
@ -47,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.0</p> <p class="version-number">V2.3.0</p>
</div> </div>
<div id="errorPopup" class="error-popup"> <div id="errorPopup" class="error-popup">
<p id="errorText">Please enter a username and a chatroom.</p> <div class="error-popup-content">
<button id="errorButton" class="button2" onclick="closeErrorPopup()">Continue</button> <p id="errorText">Please enter a username and a chatroom.</p>
<button id="errorButton" class="button2" onclick="closeErrorPopup()">Continue</button>
</div>
</div> </div>
</body> </body>
</html> </html>

BIN
html/pictures/andy-holmes-background2_small.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1018 KiB

BIN
html/pictures/mdm2logo1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 547 KiB

9
html/script.js
View File

@ -23,7 +23,7 @@ function onload(){
}); });
socket.on("join", function(room){ socket.on("join", function(room){
chatRoom.innerHTML = "Current Chatroom : " + room; chatRoom.innerHTML = "Current Chatroom: " + room;
// Show the chat div when successfully joined a room. // Show the chat div when successfully joined a room.
document.getElementById("Chat").style.display = "block"; document.getElementById("Chat").style.display = "block";
}); });
@ -53,8 +53,7 @@ function Connect(){
var room = chatIDInput.value.trim(); var room = chatIDInput.value.trim();
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.");
@ -72,7 +71,7 @@ function closeErrorPopup() {
function LeaveRoom(){ function LeaveRoom(){
if (chatRoom.innerHTML.includes("Chatroom")) { if (chatRoom.innerHTML.includes("Chatroom")) {
var roomName = chatRoom.innerHTML.split(" : ")[1]; var roomName = chatRoom.innerHTML.split(": ")[1];
var username = usernameInput.value; var username = usernameInput.value;
socket.emit('leave', roomName, username); socket.emit('leave', roomName, username);
} }
@ -83,7 +82,7 @@ function LeaveRoom(){
document.getElementById('Chat').style.display = 'none'; document.getElementById('Chat').style.display = 'none';
// Reset chatRoom text to indicate no room connection. // Reset chatRoom text to indicate no room connection.
chatRoom.innerHTML = "Chatroom : None"; chatRoom.innerHTML = "Chatroom: None";
// If the user is in a room, emit a leave event. // If the user is in a room, emit a leave event.
if (rooms[socket.id]) { if (rooms[socket.id]) {

323
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{ #Main {
min-width: 70px; /* Ensure label has enough width */ background: rgba(32, 32, 32, 0.8);
display: block; /* Make labels stack above inputs and buttons */ backdrop-filter: blur(20px);
margin-bottom: 0.5em; /* Provide some space between label and input/button */ -webkit-backdrop-filter: blur(20px);
text-align: left; /* Align text to the left */ border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 2rem;
width: 90%;
max-width: 800px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
} }
input{ #Main:hover {
background-color: rgba(255, 255, 255, 0.15); transform: translateY(-5px);
color: #ffffff; /* Light text color for contrast */ box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
font-size: 120%; }
.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: none;
width: 100%; /* Full width input fields */ border-radius: 8px;
box-sizing: border-box; /* Border box sizing for padding and borders */ color: #ffffff;
margin-bottom: 1em; /* Provide space below inputs */ padding: 12px 24px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
margin: 8px 0;
backdrop-filter: blur(4px);
} }
.Message{ .button:hover, .button2:hover {
color: #ffffff; /* Light text color for contrast */ background: #0078d4;
word-wrap: break-word; /* Break long words */ transform: translateY(-2px);
word-break: break-all; /* Break long words */
white-space: pre-wrap; /* Wrap text maintaining white spaces */
} }
.other { .button:active, .button2:active {
width: 100%; /* Set width */ transform: translateY(0);
text-align: center; /* Center inline and inline-block elements within */ background: #006cbd;
} }
#Logo{ .Message {
height: 80px; padding: 12px;
margin: 8px 0;
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
animation: fadeIn 0.3s ease;
} }
#Chat{ @keyframes fadeIn {
display: none; from {
width: 100%; /* Make the chat part fill the entire width */ opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
} }
#Main{ #Title {
min-height: 94.5vh; /* Stretch to fill the viewport height */ font-size: 2.5rem;
width: 50%; margin-bottom: 1rem;
padding: 20px; /* Padding added to the main content area */ text-align: center;
border-radius: 10px; background: linear-gradient(45deg, #0078d4, #00b4ff);
backdrop-filter: blur(5px); /* Provide a translucent frosted-glass effect */ -webkit-background-clip: text;
-webkit-backdrop-filter: blur(5px); -webkit-text-fill-color: transparent;
background-color: rgba(0, 0, 0, 0.1); /* Slightly transparent dark background */ animation: titleGlow 2s ease-in-out infinite alternate;
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{ @keyframes titleGlow {
font-size: 300%; 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));
}
} }
#LinkButtons{ #Logo {
display: inline-block;
}
#ConnectButton {
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 { @media (max-width: 900px) {
background-color: rgba(255, 255, 255, 0.2); /* Slightly white transparent background */ body {
border-radius: 28px; background: #202020;
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: 800px) {
label {
width: auto; /* Full width on narrow screens */
} }
#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;
} }

6
index.js
View File

@ -24,13 +24,13 @@ io.on('connection', function(socket){
usernames[socket.id] = username; usernames[socket.id] = username;
socket.leaveAll(); socket.leaveAll();
socket.join(room); socket.join(room);
io.in(room).emit("recieve", "Server : " + username + " has entered the chat."); io.in(room).emit("recieve", "Server: " + username + " has entered the chat.");
socket.emit("join", room); socket.emit("join", room);
} }
}) })
socket.on("send", function(message){ socket.on("send", function(message){
io.in(rooms[socket.id]).emit("recieve", usernames[socket.id] +" : " + message); io.in(rooms[socket.id]).emit("recieve", usernames[socket.id] +": " + message);
}) })
socket.on("recieve", function(message){ socket.on("recieve", function(message){
@ -40,7 +40,7 @@ io.on('connection', function(socket){
socket.on("leave", function(room, username){ socket.on("leave", function(room, username){
if (room && username) { if (room && username) {
socket.leave(room); socket.leave(room);
io.in(room).emit("recieve", "Server : " + username + " has left the chat."); io.in(room).emit("recieve", "Server: " + username + " has left the chat.");
} }
}); });
}) })