From d4112b4a191ba95c6f51ac77eb350702c5018a88 Mon Sep 17 00:00:00 2001 From: abrendan <94894839+abrendan@users.noreply.github.com> Date: Mon, 11 Dec 2023 14:37:23 +0000 Subject: [PATCH] V1.4! Now with a centered design and the web application isn't broken on a mobile device anymore --- html/index.html | 2 +- html/style.css | 202 +++++++++++++++++++++++++----------------------- 2 files changed, 105 insertions(+), 99 deletions(-) diff --git a/html/index.html b/html/index.html index f4eede6..6035e17 100644 --- a/html/index.html +++ b/html/index.html @@ -11,7 +11,7 @@
-

MicDropMessages V1.3

+

MicDropMessages V1.4

Welcome to MicDropMessages! This small webbased application allows you to chat with your friends anonymously! To start, enter your username and enter a chatroom.

diff --git a/html/style.css b/html/style.css index 9f2c291..16a7838 100644 --- a/html/style.css +++ b/html/style.css @@ -1,104 +1,110 @@ - body{ - background-image: url('https://images.unsplash.com/37/IHLjdHdzSvi0rgUMMlSK_TE3_0286.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 */ - color: #000000; - font-family: 'Segoe UI'; - } - - label{ - width: 5%; - display: inline-block; - text-align: right; - } - - input{ - background-color: rgba(255, 255, 255, 0.15); - color: #000000; - font-size: 120%; - border: none; - - } - - .Message{ - color: #000000; - - } - - #Main{ - min-height: 94.5vh; /* Stretch to fill the viewport height */ - padding: 20px; /* Padding added to the main content area */ - border-radius: 10px; - backdrop-filter: blur(5px); /* Provide a translucent frosted-glass effect */ - background-color: rgba(255, 255, 255, 0.2); /* Slightly white transparent background */ - } - - - #Title{ - font-size: 300%; - } - - .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 */ - } - .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 */ - } - body.dark-mode .button { - color: #ffffff; /* Dark button background color */ - } - +body{ + background-image: url('https://images.unsplash.com/37/IHLjdHdzSvi0rgUMMlSK_TE3_0286.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 */ + color: #000000; + font-family: 'Segoe UI'; + 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; +} +#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 */ + 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 */ +} +#Title{ + font-size: 300%; +} +.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 */ + 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 { + 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 */ - } - - - /* You might want to customize other elements for dark mode, for example: */ - .dark-mode #Main { - background-color: #333; /* Dark background for main content area */ +} +.dark-mode #Main { + background-color: #333; /* Dark background for main content area */ +} +.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; +} +@media (max-width: 600px) { + label { + width: auto; /* Full width on narrow screens */ } - /* Additional elements can be customized as needed for dark mode... */ - - .input { - border-radius: 10px; - padding: 6px; + #Main { + width: 100%; /* Full width on narrow screens */ } - - .button2 { - border-radius: 10px; - padding: 6px; - transition: background-color 0.3s ease; /* Transition for button hover effects */ - } - - .button2:hover { - background-color:#000000; - color:#ffffff; - } - +} \ No newline at end of file