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! New background, better mobile UI

Browse Source
This commit is contained in:
abrendan 2024-01-15 10:14:14 +00:00
parent 5ad7ad2ce6
commit 1733bb9a00
3 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
html/index.html
View File

@ -12,7 +12,7 @@
<body onload = "onload()">
<div id = "Main">
<audio id = "Ding" src = "Ding.mp3"> </audio>
<h1 id = "Title"> MicDropMessages V1.7 </h1>
<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>

BIN
html/pictures/jezael-melgoza-2FiXtdnVhjQ-unsplash.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 540 KiB

6
html/style.css
View File

@ -1,5 +1,5 @@
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-repeat: no-repeat; /* Do not repeat the image */
background-attachment: fixed; /* The background image does not scroll */
@ -71,7 +71,7 @@ input{
/* Add this to your CSS to support dark mode */
body.dark-mode {
color: #ffffff; /* Light text color for contrast */
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 {
@ -84,7 +84,7 @@ body.dark-mode .input {
color: #ffffff; /* Dark button background color */
}
.dark-mode #Main {
background-color: #333; /* Dark background for main content area */
background-color: rgba(0, 0, 0, 0.5); /* Slightly transparent dark background */
}
.input {
border-radius: 10px;