diff --git a/templates/login.html b/templates/login.html new file mode 100644 index 0000000..a4e6588 --- /dev/null +++ b/templates/login.html @@ -0,0 +1,31 @@ + + + + + + Login - MultiChat Overlay + + + +
+
+

Welcome Back

+

Please sign in to continue

+
+
+ + +
+
+ + +
+ +
+ +
+
+ + \ No newline at end of file diff --git a/templates/main.css b/templates/main.css index 5ec32db..d12bbd4 100644 --- a/templates/main.css +++ b/templates/main.css @@ -1,8 +1,8 @@ /* - * A modern CSS reset and some basic site-wide styles. - * This ensures more consistent styling across different browsers. + * Dark and Purple Theme + * Includes a modern CSS reset for cross-browser consistency. */ - + /* Box-sizing reset */ *, *::before, @@ -25,7 +25,7 @@ dl, dd { margin: 0; } - + /* Basic body styling */ body { min-height: 100vh; @@ -33,8 +33,10 @@ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - background-color: #f0f2f5; - color: #333; + background-color: #1a1a2e; /* Dark blue/purple background */ + color: #e0e0e0; /* Light text color for contrast */ + display: grid; + place-items: center; } /* Make images responsive */ @@ -44,13 +46,82 @@ picture { display: block; } -/* Basic styling for a container */ -.container { - width: 90%; - max-width: 1200px; - margin: 2rem auto; - padding: 2rem; - background-color: #fff; - border-radius: 8px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +/* Login Page Styles */ +.login-container { + width: 100%; + padding: 1rem; +} + +.login-box { + width: 100%; + max-width: 400px; + margin: 0 auto; + padding: 2.5rem; + background-color: #16213e; /* Slightly lighter dark blue */ + border-radius: 12px; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); + text-align: center; +} + +.login-box h1 { + color: #ffffff; + margin-bottom: 0.5rem; +} + +.login-box p { + margin-bottom: 2rem; + color: #a0a0a0; +} + +.input-group { + margin-bottom: 1.5rem; + text-align: left; +} + +.input-group label { + display: block; + margin-bottom: 0.5rem; + font-size: 0.9rem; + color: #c0c0c0; +} + +.input-group input { + width: 100%; + padding: 0.75rem 1rem; + background-color: #1a1a2e; + border: 1px solid #4f4f7a; + border-radius: 6px; + color: #e0e0e0; + font-size: 1rem; +} + +.btn-primary { + width: 100%; + padding: 0.75rem; + border: none; + border-radius: 6px; + background-color: #7f5af0; /* Bright purple accent */ + color: #ffffff; + font-size: 1.1rem; + font-weight: bold; + cursor: pointer; + transition: background-color 0.2s ease; +} + +.btn-primary:hover { + background-color: #6a48d7; /* Darker purple on hover */ +} + +.login-footer { + margin-top: 1.5rem; +} + +.login-footer a { + color: #7f5af0; + text-decoration: none; + font-size: 0.9rem; +} + +.login-footer a:hover { + text-decoration: underline; } \ No newline at end of file