3 Commits
V1.4 ... V1.5

Author SHA1 Message Date
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
3 changed files with 15 additions and 5 deletions

View File

@@ -2,6 +2,8 @@
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/7284b5fb-7a0a-4a6b-a8b3-95d2cef3959b) ![grafik](https://github.com/abrendan/MicDropMessages/assets/94894839/259fcb85-5a20-44a7-b966-296aecb9e612)

View File

@@ -4,6 +4,7 @@
<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 rel = "stylesheet" type = "text/css" href = "style.css"> <link rel = "stylesheet" type = "text/css" href = "style.css">
<script src = "script.js"></script> <script src = "script.js"></script>
<script src= "socket.io/socket.io.js"></script> <script src= "socket.io/socket.io.js"></script>
@@ -11,7 +12,7 @@
<body onload = "onload()"> <body onload = "onload()">
<div id = "Main"> <div id = "Main">
<audio id = "Ding" src = "Ding.mp3"> </audio> <audio id = "Ding" src = "Ding.mp3"> </audio>
<h1 id = "Title"> MicDropMessages V1.4 </h1> <h1 id = "Title"> MicDropMessages V1.5 </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> <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"> <div id = "AccessPort">
<label id = "NameLabel"> Username </label> <label id = "NameLabel"> Username </label>
@@ -37,9 +38,12 @@
<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">
</div> </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 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> <br><br>
</div> </div>
</body> </body>

View File

@@ -4,7 +4,7 @@ body{
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 */ display: flex; /* Use flexbox to center content */
justify-content: center; /* Center horizontally */ justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */ align-items: center; /* Center vertically */
@@ -39,8 +39,12 @@ input{
align-items: center; /* Centering child elements horizontally */ align-items: center; /* Centering child elements horizontally */
} }
#Title{ #Title{
font-family: 'Segoe UI';
font-size: 300%; font-size: 300%;
} }
#LinkButtons{
display: inline-block;
}
.button { .button {
background-color:transparent; background-color:transparent;
border-radius:28px; border-radius:28px;