88 lines
3.1 KiB
HTML
88 lines
3.1 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<style>
|
|
body { display:flex; flex-direction:column; min-height:100vh; }
|
|
.login-wrap {
|
|
flex:1; display:flex; align-items:center; justify-content:center;
|
|
background:#0d0d0d; padding:2rem;
|
|
}
|
|
.login-card {
|
|
background:#111; border:1px solid #1f1f1f; border-radius:10px;
|
|
padding:2.5rem 2rem; width:100%; max-width:380px;
|
|
}
|
|
.login-logo {
|
|
display:flex; align-items:center; gap:9px; margin-bottom:6px; justify-content:center;
|
|
}
|
|
.login-logo-dot { width:9px; height:9px; border-radius:2px; background:#d97757; }
|
|
.login-title {
|
|
font-size:1.05rem; font-weight:700; letter-spacing:0.08em;
|
|
color:#e8e6e3; font-family:'JetBrains Mono', monospace;
|
|
}
|
|
.login-sub {
|
|
font-size:0.72rem; color:#4a4845; text-align:center;
|
|
margin-bottom:2rem; letter-spacing:0.05em;
|
|
font-family:'JetBrains Mono', monospace;
|
|
}
|
|
.login-label {
|
|
display:block; font-size:0.72rem; font-weight:500;
|
|
color:#6a6863; margin-bottom:6px; letter-spacing:0.08em;
|
|
text-transform:uppercase;
|
|
}
|
|
.login-input {
|
|
width:100%; padding:10px 14px; background:#0d0d0d;
|
|
border:1px solid #262626; border-radius:6px;
|
|
color:#e8e6e3; font-size:0.875rem; margin-bottom:1.2rem;
|
|
transition:border-color 0.2s; box-sizing:border-box;
|
|
}
|
|
.login-input:focus { border-color:#3a3a3a; outline:none; }
|
|
.login-input::placeholder { color:#3a3a3a; }
|
|
.login-btn {
|
|
width:100%; padding:11px; background:#d4a01a; border:none;
|
|
border-radius:6px; color:#0d0d0d; font-size:0.85rem;
|
|
font-weight:700; letter-spacing:0.05em; cursor:pointer;
|
|
transition:background 0.2s; margin-top:0.5rem;
|
|
}
|
|
.login-btn:hover { background:#e8b420; }
|
|
.login-error {
|
|
background:#1c0f0f; border:1px solid #3d1a1a; border-radius:6px;
|
|
color:#c47a6e; font-size:0.78rem; padding:10px 14px;
|
|
margin-bottom:1.2rem; text-align:center;
|
|
}
|
|
</style>
|
|
|
|
<div class="login-wrap">
|
|
<div class="login-card">
|
|
<div class="login-logo">
|
|
<div class="login-logo-dot"></div>
|
|
<div class="login-title">CONCEPT</div>
|
|
</div>
|
|
<div class="login-sub">context.bolbol.tn</div>
|
|
|
|
{% if error %}
|
|
<div class="login-error">{{ error }}</div>
|
|
{% endif %}
|
|
|
|
<form action="/auth/login" method="POST">
|
|
<label class="login-label">Identifiant</label>
|
|
<input class="login-input" type="text" name="username"
|
|
placeholder="Identifiant" required autocomplete="username">
|
|
<label class="login-label">Mot de passe</label>
|
|
<input class="login-input" type="password" name="password"
|
|
placeholder="••••••••" required autocomplete="current-password">
|
|
<button class="login-btn" type="submit">Connexion</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="nyora-footer" style="background:#0d0d0d; padding:1.2rem 1rem;">
|
|
<div class="nyora-line-top"></div>
|
|
<div class="nyora-brand">
|
|
<span class="nyora-dot"></span>
|
|
<span class="nyora-name">NYORA</span>
|
|
<span class="nyora-dot"></span>
|
|
</div>
|
|
<div class="nyora-tag">Crafted with precision · Built for excellence</div>
|
|
</footer>
|
|
{% endblock %}
|