ramforth/MultiChatOverlay
3
2
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

css restore

Browse Source
This commit is contained in:
ramforth
2025-11-17 12:20:57 +01:00
parent e0502f93d6
commit 9d95e1fd3c
2 changed files with 117 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
templates/login.html Normal file
View File

@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - MultiChat Overlay</title>
<link rel="stylesheet" href="/static/css/main.css">
</head>
<body>
<div class="login-container">
<div class="login-box">
<h1>Welcome Back</h1>
<p>Please sign in to continue</p>
<form action="/login" method="post">
<div class="input-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
</div>
<div class="input-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit" class="btn-primary">Sign In</button>
</form>
<div class="login-footer">
<a href="#">Forgot Password?</a>
</div>
</div>
</div>
</body>
</html>

101
templates/main.css
View File

@@ -1,8 +1,8 @@
/* /*
* A modern CSS reset and some basic site-wide styles. * Dark and Purple Theme
* This ensures more consistent styling across different browsers. * Includes a modern CSS reset for cross-browser consistency.
*/ */
/* Box-sizing reset */ /* Box-sizing reset */
*, *,
*::before, *::before,
@@ -25,7 +25,7 @@ dl,
dd { dd {
margin: 0; margin: 0;
} }
/* Basic body styling */ /* Basic body styling */
body { body {
min-height: 100vh; min-height: 100vh;
@@ -33,8 +33,10 @@ body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol"; "Segoe UI Symbol";
background-color: #f0f2f5; background-color: #1a1a2e; /* Dark blue/purple background */
color: #333; color: #e0e0e0; /* Light text color for contrast */
display: grid;
place-items: center;
} }
/* Make images responsive */ /* Make images responsive */
@@ -44,13 +46,82 @@ picture {
display: block; display: block;
} }
/* Basic styling for a container */ /* Login Page Styles */
.container { .login-container {
width: 90%; width: 100%;
max-width: 1200px; padding: 1rem;
margin: 2rem auto; }
padding: 2rem;
background-color: #fff; .login-box {
border-radius: 8px; width: 100%;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 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;
} }