j
This commit is contained in:
Flatlogic Bot
parent
480576a9e7
commit
7651c67bc8
@ -161,91 +161,112 @@ body {
|
||||
border-color: #dc3545;
|
||||
}
|
||||
|
||||
/* Login Page Styles */
|
||||
.login-container {
|
||||
/* Auth Page Styles */
|
||||
.auth-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 80vh;
|
||||
min-height: 90vh;
|
||||
padding: 2rem;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.login-form {
|
||||
background-color: #ffffff;
|
||||
.auth-form {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 2.5rem;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
max-width: 420px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.login-form h2 {
|
||||
.auth-form h2 {
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #333;
|
||||
margin-bottom: 2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.login-form .form-group {
|
||||
.auth-form .form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.login-form label {
|
||||
.auth-form label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #555;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.login-form input[type="email"],
|
||||
.login-form input[type="password"] {
|
||||
.auth-form input[type="email"],
|
||||
.auth-form input[type="password"] {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 0.25rem;
|
||||
transition: border-color 0.2s;
|
||||
padding: 1rem;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 0.5rem;
|
||||
color: white;
|
||||
transition: background 0.3s, border-color 0.3s;
|
||||
}
|
||||
|
||||
.login-form input[type="email"]:focus,
|
||||
.login-form input[type="password"]:focus {
|
||||
.auth-form input[type="email"]::placeholder,
|
||||
.auth-form input[type="password"]::placeholder {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.auth-form input[type="email"]:focus,
|
||||
.auth-form input[type="password"]:focus {
|
||||
outline: none;
|
||||
border-color: #007bff;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.login-form .btn-submit {
|
||||
.auth-form .btn-submit {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
background-color: #007bff;
|
||||
padding: 1rem;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.login-form .btn-submit:hover {
|
||||
background-color: #0056b3;
|
||||
.auth-form .btn-submit:hover {
|
||||
background: #5a6fd8;
|
||||
}
|
||||
|
||||
.login-form .errors {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
.auth-form .errors, .auth-form .success {
|
||||
background: rgba(255, 82, 82, 0.9);
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
border: 1px solid #f5c6cb;
|
||||
border-radius: 0.25rem;
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-form .register-link {
|
||||
.auth-form .success {
|
||||
background: rgba(40, 167, 69, 0.9);
|
||||
}
|
||||
|
||||
.auth-form .auth-link {
|
||||
text-align: center;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.login-form .register-link a {
|
||||
color: #007bff;
|
||||
.auth-form .auth-link a {
|
||||
color: #f0f0f0;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.login-form .register-link a:hover {
|
||||
.auth-form .auth-link a:hover {
|
||||
color: white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
10
login.php
10
login.php
@ -45,8 +45,8 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||
include 'header.php';
|
||||
?>
|
||||
|
||||
<div class="login-container">
|
||||
<div class="login-form">
|
||||
<div class="auth-container">
|
||||
<div class="auth-form">
|
||||
<h2>Login</h2>
|
||||
|
||||
<?php if (!empty($errors)): ?>
|
||||
@ -60,16 +60,16 @@ include 'header.php';
|
||||
<form action="login.php" method="post">
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input type="email" name="email" id="email" required>
|
||||
<input type="email" name="email" id="email" required placeholder="you@example.com">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" name="password" id="password" required>
|
||||
<input type="password" name="password" id="password" required placeholder="••••••••">
|
||||
</div>
|
||||
<button type="submit" class="btn-submit">Login</button>
|
||||
</form>
|
||||
|
||||
<p class="register-link">Don't have an account? <a href="register.php">Register here</a>.</p>
|
||||
<p class="auth-link">Don't have an account? <a href="register.php">Register here</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
28
register.php
28
register.php
@ -42,35 +42,39 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||
include 'header.php';
|
||||
?>
|
||||
|
||||
<h2>Register</h2>
|
||||
<div class="auth-container">
|
||||
<div class="auth-form">
|
||||
<h2>Register</h2>
|
||||
|
||||
<?php if (!empty($errors)): ?>
|
||||
<?php if (!empty($errors)): ?>
|
||||
<div class="errors">
|
||||
<?php foreach ($errors as $error): ?>
|
||||
<p><?php echo htmlspecialchars($error); ?></p>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($success): ?>
|
||||
<?php if ($success): ?>
|
||||
<div class="success">
|
||||
<p><?php echo $success; ?></p>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<?php else: ?>
|
||||
<form action="register.php" method="post">
|
||||
<div>
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input type="email" name="email" id="email" required>
|
||||
<input type="email" name="email" id="email" required placeholder="you@example.com">
|
||||
</div>
|
||||
<div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" name="password" id="password" required>
|
||||
<input type="password" name="password" id="password" required placeholder="Minimum 8 characters">
|
||||
</div>
|
||||
<button type="submit">Register</button>
|
||||
<button type="submit" class="btn-submit">Register</button>
|
||||
</form>
|
||||
<?php endif; ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<p>Already have an account? <a href="login.php">Login here</a>.</p>
|
||||
<p class="auth-link">Already have an account? <a href="login.php">Login here</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
include 'footer.php';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user