1
This commit is contained in:
Flatlogic Bot
parent
5bb874b992
commit
b12f985e57
136
admin.php
136
admin.php
@ -50,9 +50,124 @@ $chart_values = json_encode(array_column($chart_data, 'user_count'));
|
||||
<title>Admin Dashboard</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
--bg-start: #0b2083;
|
||||
--bg-end: #1029a0;
|
||||
--surface: rgba(11, 32, 131, 0.40);
|
||||
--surface-soft: rgba(16, 41, 160, 0.32);
|
||||
--line: rgba(221, 226, 253, 0.18);
|
||||
--text-main: #f3f9ff;
|
||||
--text-soft: #dde2fd;
|
||||
--text-muted: #97acd0;
|
||||
--accent: #2c4bd1;
|
||||
--accent-strong: #1029a0;
|
||||
--success: #18d1b3;
|
||||
--danger: #ff6b81;
|
||||
}
|
||||
body {
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(221, 226, 253, 0.22), transparent 28%),
|
||||
linear-gradient(135deg, var(--bg-start) 0%, #1029a0 55%, var(--bg-end) 100%);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.admin-shell {
|
||||
max-width: 1220px;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
h2, h3, .h5, p, label, th, td {
|
||||
color: var(--text-main);
|
||||
}
|
||||
p.text-muted, .text-muted {
|
||||
color: var(--text-muted) !important;
|
||||
}
|
||||
.panel-card,
|
||||
.table-shell {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 22px;
|
||||
box-shadow: 0 25px 60px rgba(3, 11, 25, 0.38);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
.panel-card {
|
||||
margin-top: 1.5rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.table-shell {
|
||||
margin-top: 1rem;
|
||||
padding: 0.35rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.alert-info {
|
||||
background: rgba(34, 199, 255, 0.12);
|
||||
color: var(--text-main);
|
||||
border: 1px solid rgba(34, 199, 255, 0.28);
|
||||
}
|
||||
.btn-outline-primary {
|
||||
color: var(--accent-soft, #bbc8fb);
|
||||
border-color: rgba(34, 199, 255, 0.35);
|
||||
}
|
||||
.btn-outline-primary:hover {
|
||||
background: rgba(187, 200, 251, 0.18);
|
||||
border-color: rgba(34, 199, 255, 0.55);
|
||||
}
|
||||
.btn-success,
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
|
||||
border: none;
|
||||
}
|
||||
.btn-success:hover,
|
||||
.btn-primary:hover {
|
||||
background: linear-gradient(135deg, #bbc8fb 0%, #2c4bd1 100%);
|
||||
}
|
||||
.btn-danger {
|
||||
background: linear-gradient(135deg, #ff7a8b 0%, #f04f74 100%);
|
||||
border: none;
|
||||
}
|
||||
.table {
|
||||
margin-bottom: 0;
|
||||
--bs-table-bg: transparent;
|
||||
--bs-table-striped-bg: rgba(221, 226, 253, 0.06);
|
||||
--bs-table-striped-color: var(--text-main);
|
||||
--bs-table-hover-bg: rgba(187, 200, 251, 0.12);
|
||||
--bs-table-hover-color: var(--text-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.table thead th {
|
||||
border-bottom-color: rgba(221, 226, 253, 0.18);
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
.table td,
|
||||
.table th {
|
||||
border-color: rgba(143, 232, 255, 0.08);
|
||||
vertical-align: middle;
|
||||
}
|
||||
.page-link {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: var(--text-main);
|
||||
border-color: rgba(143, 232, 255, 0.12);
|
||||
}
|
||||
.page-item.active .page-link {
|
||||
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
|
||||
border-color: transparent;
|
||||
}
|
||||
.page-link:hover {
|
||||
color: var(--text-main);
|
||||
background: rgba(34, 199, 255, 0.12);
|
||||
border-color: rgba(34, 199, 255, 0.24);
|
||||
}
|
||||
canvas {
|
||||
filter: drop-shadow(0 10px 25px rgba(34, 199, 255, 0.08));
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container mt-5">
|
||||
<div class="container admin-shell">
|
||||
<h2>Admin Dashboard</h2>
|
||||
<p>Welcome, <?php echo htmlspecialchars($_SESSION['user'] ?? 'Admin'); ?>!</p>
|
||||
|
||||
@ -62,7 +177,7 @@ $chart_values = json_encode(array_column($chart_data, 'user_count'));
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="mt-4 p-4 border rounded shadow-sm bg-light">
|
||||
<div class="panel-card">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h3 class="h5 mb-0">Daily Registrations</h3>
|
||||
<button id="downloadChartBtn" class="btn btn-sm btn-outline-primary">Save as Image</button>
|
||||
@ -77,7 +192,7 @@ $chart_values = json_encode(array_column($chart_data, 'user_count'));
|
||||
<a href="export_csv.php" class="btn btn-success">Download CSV</a>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive">
|
||||
<div class="table-responsive table-shell">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -147,8 +262,8 @@ $chart_values = json_encode(array_column($chart_data, 'user_count'));
|
||||
datasets: [{
|
||||
label: 'Daily Registrations',
|
||||
data: <?php echo $chart_values; ?>,
|
||||
backgroundColor: 'rgba(0, 123, 255, 0.1)',
|
||||
borderColor: 'rgba(0, 123, 255, 1)',
|
||||
backgroundColor: 'rgba(187, 200, 251, 0.18)',
|
||||
borderColor: 'rgba(34, 199, 255, 1)',
|
||||
borderWidth: 2,
|
||||
tension: 0.4,
|
||||
fill: true
|
||||
@ -156,10 +271,16 @@ $chart_values = json_encode(array_column($chart_data, 'user_count'));
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
x: {
|
||||
ticks: { color: '#dde2fd' },
|
||||
grid: { color: 'rgba(143, 232, 255, 0.08)' }
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grid: { color: 'rgba(143, 232, 255, 0.08)' },
|
||||
ticks: {
|
||||
stepSize: 1
|
||||
stepSize: 1,
|
||||
color: '#dde2fd'
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -169,7 +290,8 @@ $chart_values = json_encode(array_column($chart_data, 'user_count'));
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'User Registrations per Day'
|
||||
text: 'User Registrations per Day',
|
||||
color: '#f3f9ff'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
:root {
|
||||
--primary: #6366f1;
|
||||
--primary-dark: #4f46e5;
|
||||
--accent: #d946ef;
|
||||
--dark-bg: #1e1b4b;
|
||||
--card-bg: rgba(30, 27, 75, 0.9);
|
||||
--text-main: #f8fafc;
|
||||
--text-muted: #94a3b8;
|
||||
--gradient: linear-gradient(135deg, #6366f1 0%, #d946ef 100%);
|
||||
--bg-gradient: linear-gradient(-45deg, #1e1b4b, #312e81, #1e1b4b);
|
||||
--primary: #2c4bd1;
|
||||
--primary-dark: #1029a0;
|
||||
--accent: #18d1b3;
|
||||
--dark-bg: #0b2083;
|
||||
--card-bg: rgba(11, 32, 131, 0.40);
|
||||
--text-main: #f3f9ff;
|
||||
--text-muted: #bbc8fb;
|
||||
--gradient: linear-gradient(135deg, #2c4bd1 0%, #1029a0 100%);
|
||||
--bg-gradient: linear-gradient(-45deg, #0b2083, #1029a0, #2c4bd1);
|
||||
}
|
||||
|
||||
body {
|
||||
@ -69,7 +69,7 @@ button:hover {
|
||||
|
||||
/* Inputs */
|
||||
input, .form-control {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
background: rgba(221, 226, 253, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
padding: 0.75rem 1rem;
|
||||
|
||||
BIN
assets/pasted-20260310-054917-348e02e8.png
Normal file
BIN
assets/pasted-20260310-054917-348e02e8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
@ -64,16 +64,68 @@ try {
|
||||
<title>Edit Attendee</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg-start: #0b2083;
|
||||
--bg-end: #1029a0;
|
||||
--surface: rgba(11, 32, 131, 0.40);
|
||||
--line: rgba(221, 226, 253, 0.18);
|
||||
--text-main: #f3f9ff;
|
||||
--text-soft: #dde2fd;
|
||||
--accent: #2c4bd1;
|
||||
--accent-strong: #1029a0;
|
||||
--accent-soft: #bbc8fb;
|
||||
}
|
||||
body {
|
||||
background-color: #121212;
|
||||
color: #e0e0e0;
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(221, 226, 253, 0.22), transparent 28%),
|
||||
linear-gradient(135deg, var(--bg-start) 0%, #1029a0 55%, var(--bg-end) 100%);
|
||||
color: var(--text-main);
|
||||
min-height: 100vh;
|
||||
}
|
||||
.container {
|
||||
max-width: 600px;
|
||||
padding-top: 2rem;
|
||||
max-width: 700px;
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
h1 {
|
||||
color: #ffd700;
|
||||
color: var(--text-main);
|
||||
font-weight: 800;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
form {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 22px;
|
||||
padding: 1.75rem;
|
||||
box-shadow: 0 25px 60px rgba(3, 11, 25, 0.4);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
.form-label,
|
||||
.form-check-label {
|
||||
color: var(--text-soft);
|
||||
}
|
||||
.form-control {
|
||||
background: rgba(221, 226, 253, 0.08);
|
||||
border-color: rgba(221, 226, 253, 0.18);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.form-control:focus {
|
||||
background: rgba(221, 226, 253, 0.10);
|
||||
color: var(--text-main);
|
||||
border-color: rgba(44, 75, 209, 0.65);
|
||||
box-shadow: 0 0 0 0.2rem rgba(187, 200, 251, 0.18);
|
||||
}
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
|
||||
border: none;
|
||||
}
|
||||
.btn-secondary {
|
||||
background: rgba(221, 226, 253, 0.12);
|
||||
border-color: rgba(221, 226, 253, 0.22);
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background: rgba(221, 226, 253, 0.18);
|
||||
border-color: rgba(221, 226, 253, 0.32);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
165
index.php
165
index.php
@ -3,137 +3,204 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Webinar Registration</title>
|
||||
<title>AppWizzy Webinar Registration</title>
|
||||
<meta name="description" content="Register for the AppWizzy webinar about building scalable apps with real frameworks, your own server, and your own database.">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg-start: #0b2083;
|
||||
--bg-mid: #1029a0;
|
||||
--bg-end: #2c4bd1;
|
||||
--surface: rgba(11, 32, 131, 0.34);
|
||||
--surface-strong: rgba(16, 41, 160, 0.38);
|
||||
--line: rgba(221, 226, 253, 0.22);
|
||||
--text-main: #f3f9ff;
|
||||
--text-soft: #dde2fd;
|
||||
--text-muted: #bbc8fb;
|
||||
--accent: #2c4bd1;
|
||||
--accent-strong: #1029a0;
|
||||
--accent-soft: #bbc8fb;
|
||||
--success: #18d1b3;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
background: linear-gradient(135deg, #1a237e 0%, #673ab7 100%);
|
||||
color: #fff;
|
||||
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(221, 226, 253, 0.24), transparent 30%),
|
||||
radial-gradient(circle at bottom right, rgba(44, 75, 209, 0.24), transparent 35%),
|
||||
linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 52%, var(--bg-end) 100%);
|
||||
color: var(--text-main);
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.webinar-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
padding: 24px;
|
||||
}
|
||||
.webinar-card {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
box-shadow: 0 20px 50px rgba(0,0,0,0.25);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 30px 80px rgba(2, 10, 24, 0.55);
|
||||
border-radius: 28px;
|
||||
overflow: hidden;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
.left-column {
|
||||
padding: 60px;
|
||||
}
|
||||
.right-column {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
background: linear-gradient(180deg, rgba(11, 32, 131, 0.78), rgba(16, 41, 160, 0.86));
|
||||
padding: 60px;
|
||||
border-left: 1px solid var(--line);
|
||||
}
|
||||
.brand-logo {
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 40px;
|
||||
color: var(--accent-soft);
|
||||
}
|
||||
.webinar-title {
|
||||
font-size: 2.8rem;
|
||||
font-weight: bold;
|
||||
font-weight: 800;
|
||||
margin-top: 10px;
|
||||
color: #fff;
|
||||
margin-bottom: 12px;
|
||||
color: var(--text-main);
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
.webinar-subtitle {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
margin-top: 10px;
|
||||
color: #e0e0e0;
|
||||
color: var(--accent-soft);
|
||||
}
|
||||
.webinar-time {
|
||||
color: #bdbdbd;
|
||||
color: var(--accent);
|
||||
margin-top: 20px;
|
||||
font-weight: 500;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
.webinar-description {
|
||||
margin-top: 20px;
|
||||
font-size: 1.1rem;
|
||||
color: #e0e0e0;
|
||||
font-size: 1.08rem;
|
||||
color: var(--text-soft);
|
||||
max-width: 620px;
|
||||
}
|
||||
.speakers-section {
|
||||
margin-top: 40px;
|
||||
margin-top: 42px;
|
||||
}
|
||||
.speakers-section h3 {
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
margin-bottom: 22px;
|
||||
color: var(--text-main);
|
||||
}
|
||||
.speaker-card {
|
||||
text-align: center;
|
||||
}
|
||||
.speaker-card img {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
width: 92px;
|
||||
height: 92px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
margin-bottom: 10px;
|
||||
border: 4px solid white;
|
||||
margin-bottom: 12px;
|
||||
border: 3px solid rgba(187, 200, 251, 0.82);
|
||||
box-shadow: 0 12px 25px rgba(8, 24, 47, 0.45);
|
||||
}
|
||||
.speaker-card h5 {
|
||||
color: #fff;
|
||||
color: var(--text-main);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.speaker-card .text-muted {
|
||||
color: #bdbdbd !important;
|
||||
color: var(--text-muted) !important;
|
||||
}
|
||||
.form-control {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 8px;
|
||||
padding: 12px 15px;
|
||||
color: #fff;
|
||||
.form-control,
|
||||
.form-select {
|
||||
background-color: rgba(221, 226, 253, 0.08);
|
||||
border: 1px solid rgba(221, 226, 253, 0.18);
|
||||
border-radius: 12px;
|
||||
padding: 13px 15px;
|
||||
color: var(--text-main);
|
||||
box-shadow: none;
|
||||
}
|
||||
.form-control::placeholder {
|
||||
color: #bdbdbd;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.form-control:focus,
|
||||
.form-select:focus {
|
||||
color: var(--text-main);
|
||||
background-color: rgba(221, 226, 253, 0.12);
|
||||
border-color: rgba(44, 75, 209, 0.65);
|
||||
box-shadow: 0 0 0 0.2rem rgba(221, 226, 253, 0.18);
|
||||
}
|
||||
.form-select option {
|
||||
background: #1029a0;
|
||||
color: var(--text-main);
|
||||
}
|
||||
.form-check-label {
|
||||
color: #e0e0e0;
|
||||
color: var(--text-soft);
|
||||
}
|
||||
.btn-register {
|
||||
background: linear-gradient(135deg, #3f51b5 0%, #9c27b0 100%);
|
||||
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
border-radius: 14px;
|
||||
padding: 14px;
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.01em;
|
||||
transition: all 0.25s ease;
|
||||
box-shadow: 0 16px 32px rgba(16, 41, 160, 0.35);
|
||||
}
|
||||
.btn-register:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
|
||||
box-shadow: 0 22px 36px rgba(16, 41, 160, 0.42);
|
||||
}
|
||||
.what-you-learn {
|
||||
margin-top: 40px;
|
||||
}
|
||||
.what-you-learn h4 {
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
font-weight: 800;
|
||||
color: var(--text-main);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.what-you-learn ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
.what-you-learn li {
|
||||
color: #e0e0e0;
|
||||
color: var(--text-soft);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.what-you-learn li::before {
|
||||
content: "✓";
|
||||
margin-right: 10px;
|
||||
color: #3f51b5;
|
||||
color: var(--success);
|
||||
}
|
||||
#right-column-content h2, #right-column-content p {
|
||||
color: #fff;
|
||||
#right-column-content h2,
|
||||
#right-column-content p {
|
||||
color: var(--text-main);
|
||||
}
|
||||
#form-message {
|
||||
color: var(--accent-soft) !important;
|
||||
}
|
||||
@media (max-width: 991.98px) {
|
||||
.left-column,
|
||||
.right-column {
|
||||
padding: 36px 28px;
|
||||
}
|
||||
.right-column {
|
||||
border-left: 0;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
.webinar-title {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
90
login.php
90
login.php
@ -29,7 +29,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['email'])) {
|
||||
header('Location: dashboard.php');
|
||||
exit;
|
||||
} else {
|
||||
$error = 'Invalid email or password. Would you like to <a href="register.php" style="color: #ffdd57;">register for the webinar</a>?';
|
||||
$error = 'Invalid email or password. Would you like to <a href="register.php" style="color: #bbc8fb; font-weight: 600;">register for the webinar</a>?';
|
||||
}
|
||||
} catch (PDOException $e) {
|
||||
error_log($e->getMessage());
|
||||
@ -46,18 +46,26 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['email'])) {
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--primary-color: #4a90e2;
|
||||
--background-color: #f4f7f6;
|
||||
--card-background: #ffffff;
|
||||
--text-color: #333;
|
||||
--input-border: #e0e0e0;
|
||||
--input-focus-border: #4a90e2;
|
||||
--error-color: #d9534f;
|
||||
--success-color: #5cb85c;
|
||||
--primary-color: #2c4bd1;
|
||||
--primary-hover: #1029a0;
|
||||
--background-start: #0b2083;
|
||||
--background-end: #1029a0;
|
||||
--card-background: rgba(9, 24, 47, 0.84);
|
||||
--text-color: #f3f9ff;
|
||||
--muted-text: #bbc8fb;
|
||||
--input-border: rgba(221, 226, 253, 0.18);
|
||||
--input-focus-border: #2c4bd1;
|
||||
--error-color: #ff8ea0;
|
||||
--success-color: #18d1b3;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background-color: var(--background-color);
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(221, 226, 253, 0.22), transparent 28%),
|
||||
linear-gradient(135deg, var(--background-start) 0%, #1029a0 55%, var(--background-end) 100%);
|
||||
color: var(--text-color);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
@ -68,25 +76,27 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['email'])) {
|
||||
}
|
||||
.logo {
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
margin-bottom: 2rem;
|
||||
color: var(--primary-color);
|
||||
font-size: 28px;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #bbc8fb;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.login-container {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
max-width: 440px;
|
||||
padding: 2rem;
|
||||
}
|
||||
.login-card {
|
||||
background-color: var(--card-background);
|
||||
border-radius: 8px;
|
||||
border-radius: 22px;
|
||||
padding: 2.5rem;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0 24px 60px rgba(3, 11, 25, 0.4);
|
||||
border: 1px solid var(--input-border);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
text-align: center;
|
||||
@ -94,67 +104,77 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['email'])) {
|
||||
.subtitle {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
color: #777;
|
||||
color: var(--muted-text);
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
input[type="email"], input[type="password"] {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
padding: 13px 14px;
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: 4px;
|
||||
border-radius: 12px;
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
transition: border-color 0.2s;
|
||||
transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
|
||||
background: rgba(221, 226, 253, 0.08);
|
||||
color: var(--text-color);
|
||||
}
|
||||
input[type="email"]::placeholder, input[type="password"]::placeholder {
|
||||
color: var(--muted-text);
|
||||
}
|
||||
input[type="email"]:focus, input[type="password"]:focus {
|
||||
outline: none;
|
||||
border-color: var(--input-focus-border);
|
||||
box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
|
||||
box-shadow: 0 0 0 3px rgba(187, 200, 251, 0.18);
|
||||
background: rgba(221, 226, 253, 0.10);
|
||||
}
|
||||
.submit-button {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
border: none;
|
||||
background-color: var(--primary-color);
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
border-radius: 4px;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
box-shadow: 0 16px 30px rgba(19, 105, 179, 0.32);
|
||||
}
|
||||
.submit-button:hover {
|
||||
background-color: #357abd;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 20px 34px rgba(19, 105, 179, 0.38);
|
||||
}
|
||||
.message {
|
||||
padding: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border-radius: 4px;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
.error {
|
||||
background-color: #fbe9e7;
|
||||
color: var(--error-color);
|
||||
border: 1px solid var(--error-color);
|
||||
background-color: rgba(255, 142, 160, 0.12);
|
||||
color: #ffdbe2;
|
||||
border: 1px solid rgba(255, 142, 160, 0.34);
|
||||
}
|
||||
.success {
|
||||
background-color: #e8f5e9;
|
||||
color: var(--success-color);
|
||||
border: 1px solid var(--success-color);
|
||||
background-color: rgba(24, 209, 179, 0.12);
|
||||
color: #dcfff8;
|
||||
border: 1px solid rgba(24, 209, 179, 0.34);
|
||||
}
|
||||
.footer-link {
|
||||
text-align: center;
|
||||
margin-top: 1.5rem;
|
||||
font-size: 14px;
|
||||
color: var(--muted-text);
|
||||
}
|
||||
.footer-link a {
|
||||
color: var(--primary-color);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user