Style: Rediseño militar/táctico - navbar horizontal superior
This commit is contained in:
204
login.php
Normal file → Executable file
204
login.php
Normal file → Executable file
@@ -51,59 +51,221 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||
<title>Login - Sistema de Mensajería</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--military-dark: #1a1f16;
|
||||
--military-olive: #3d4a32;
|
||||
--military-green: #5a6b4a;
|
||||
--military-tan: #8b7355;
|
||||
--military-sand: #c4b998;
|
||||
--accent-orange: #d4652f;
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: 'Rajdhani', sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||||
background: var(--military-dark);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
[data-bs-theme="dark"] body {
|
||||
background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
|
||||
}
|
||||
.login-card {
|
||||
background: var(--bs-body-bg);
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
repeating-linear-gradient(
|
||||
0deg,
|
||||
transparent,
|
||||
transparent 50px,
|
||||
rgba(61, 74, 50, 0.1) 50px,
|
||||
rgba(61, 74, 50, 0.1) 51px
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
transparent 50px,
|
||||
rgba(61, 74, 50, 0.1) 50px,
|
||||
rgba(61, 74, 50, 0.1) 51px
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
[data-bs-theme="light"] body {
|
||||
background: linear-gradient(135deg, #3d4a32 0%, #2a3024 100%);
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background: rgba(26, 31, 22, 0.95);
|
||||
border: 2px solid var(--military-green);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.login-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg,
|
||||
var(--military-green) 0%,
|
||||
var(--accent-orange) 50%,
|
||||
var(--military-green) 100%);
|
||||
}
|
||||
|
||||
.login-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg,
|
||||
var(--military-green) 0%,
|
||||
var(--accent-orange) 50%,
|
||||
var(--military-green) 100%);
|
||||
}
|
||||
|
||||
.login-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
background: transparent;
|
||||
color: var(--military-sand);
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid var(--military-green);
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: 2rem;
|
||||
color: var(--accent-orange);
|
||||
letter-spacing: 4px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
font-size: 0.8rem;
|
||||
color: var(--military-sand);
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.login-body {
|
||||
padding: 40px;
|
||||
background: rgba(26, 31, 22, 0.5);
|
||||
}
|
||||
|
||||
.form-label {
|
||||
color: var(--military-sand);
|
||||
text-transform: uppercase;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
background: rgba(26, 31, 22, 0.8);
|
||||
border: 1px solid var(--military-green);
|
||||
color: var(--military-sand);
|
||||
border-radius: 0;
|
||||
padding: 12px 15px;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
background: rgba(26, 31, 22, 0.9);
|
||||
border-color: var(--accent-orange);
|
||||
color: #fff;
|
||||
box-shadow: 0 0 0 2px rgba(212, 101, 47, 0.3);
|
||||
}
|
||||
|
||||
.form-control::placeholder {
|
||||
color: rgba(196, 185, 152, 0.5);
|
||||
}
|
||||
|
||||
.btn-login {
|
||||
background: linear-gradient(180deg, var(--military-olive) 0%, var(--military-dark) 100%);
|
||||
border: 1px solid var(--military-green);
|
||||
color: var(--military-sand);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 600;
|
||||
border-radius: 0;
|
||||
padding: 12px;
|
||||
width: 100%;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-login:hover {
|
||||
background: linear-gradient(180deg, var(--military-green) 0%, var(--military-olive) 100%);
|
||||
border-color: var(--accent-orange);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-login i {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background: rgba(139, 58, 58, 0.3);
|
||||
border: 1px solid var(--accent-red, #8b3a3a);
|
||||
border-radius: 0;
|
||||
color: #ff8a8a;
|
||||
border-left: 3px solid #8b3a3a;
|
||||
}
|
||||
|
||||
.corner-decoration {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid var(--accent-orange);
|
||||
}
|
||||
|
||||
.corner-tl { top: -2px; left: -2px; border-right: none; border-bottom: none; }
|
||||
.corner-tr { top: -2px; right: -2px; border-left: none; border-bottom: none; }
|
||||
.corner-bl { bottom: -2px; left: -2px; border-right: none; border-top: none; }
|
||||
.corner-br { bottom: -2px; right: -2px; border-left: none; border-top: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-5">
|
||||
<div class="login-card">
|
||||
<div class="login-card position-relative">
|
||||
<div class="corner-decoration corner-tl"></div>
|
||||
<div class="corner-decoration corner-tr"></div>
|
||||
<div class="corner-decoration corner-bl"></div>
|
||||
<div class="corner-decoration corner-br"></div>
|
||||
|
||||
<div class="login-header">
|
||||
<h3><i class="bi bi-messenger"></i> Sistema de Mensajería</h3>
|
||||
<p class="mb-0">Discord & Telegram</p>
|
||||
<div class="login-title">◈ LASTWAR</div>
|
||||
<div class="login-subtitle">Comms Center</div>
|
||||
</div>
|
||||
<div class="login-body">
|
||||
<?php if ($error): ?>
|
||||
<div class="alert alert-danger"><?= htmlspecialchars($error) ?></div>
|
||||
<div class="alert alert-danger mb-3"><?= htmlspecialchars($error) ?></div>
|
||||
<?php endif; ?>
|
||||
|
||||
<form method="POST">
|
||||
<div class="mb-3">
|
||||
<div class="mb-4">
|
||||
<label class="form-label">Usuario</label>
|
||||
<input type="text" name="username" class="form-control" required autofocus>
|
||||
<input type="text" name="username" class="form-control" placeholder="Ingrese su usuario" required autofocus>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="mb-4">
|
||||
<label class="form-label">Contraseña</label>
|
||||
<input type="password" name="password" class="form-control" required>
|
||||
<input type="password" name="password" class="form-control" placeholder="••••••••" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary w-100">
|
||||
<i class="bi bi-box-arrow-in-right"></i> Iniciar Sesión
|
||||
<button type="submit" class="btn btn-login">
|
||||
<i class="bi bi-shield-lock"></i> Acceder
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user