127 lines
6.2 KiB
HTML
127 lines
6.2 KiB
HTML
{% load static %}
|
|
<!DOCTYPE html>
|
|
<html lang="pt-BR" data-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Portal De Paula — Login</title>
|
|
<link rel="icon" type="image/svg+xml" href="{% static 'img/pid-icone-escuro.svg' %}" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Bree+Serif&family=Pinyon+Script&family=Space+Grotesk:wght@700&family=DM+Mono&display=swap" rel="stylesheet" />
|
|
<link rel="stylesheet" href="{% static 'css/tokens.css' %}" />
|
|
<link rel="stylesheet" href="{% static 'css/base.css' %}" />
|
|
<link rel="stylesheet" href="{% static 'css/login.css' %}" />
|
|
<link rel="stylesheet" href="{% static 'css/login-intro.css' %}" />
|
|
<script src="{% static 'js/theme.js' %}" defer></script>
|
|
</head>
|
|
<body>
|
|
<div class="login-page">
|
|
<div class="login-card">
|
|
<button type="button" class="login-card__logo-btn" id="login-logo-btn" aria-label="P.I.D.">
|
|
<svg class="login-card__logo" viewBox="0 0 64 64" aria-hidden="true" focusable="false">
|
|
<path d="M10 4 h34 l14 14 v40 a2 2 0 0 1 -2 2 H8 a2 2 0 0 1 -2 -2 V6 a2 2 0 0 1 2 -2 z" fill="#7B5BA8"></path>
|
|
<rect x="22" y="4" width="20" height="16" fill="#C6A24A"></rect>
|
|
<rect x="34" y="7" width="5" height="10" fill="#7B5BA8"></rect>
|
|
<rect x="12" y="26" width="40" height="30" rx="2" fill="#241C33"></rect>
|
|
<g class="pid-icon-eye">
|
|
<circle cx="24" cy="38" r="5" fill="#F2EDE3"></circle>
|
|
<circle cx="26" cy="36.2" r="1.6" fill="#241C33"></circle>
|
|
</g>
|
|
<g class="pid-icon-eye">
|
|
<circle cx="40" cy="38" r="5" fill="#F2EDE3"></circle>
|
|
<circle cx="42" cy="36.2" r="1.6" fill="#241C33"></circle>
|
|
</g>
|
|
<path d="M25 47 q7 6 14 0" stroke="#C6A24A" stroke-width="3" fill="none" stroke-linecap="round"></path>
|
|
</svg>
|
|
</button>
|
|
<div class="login-heading">
|
|
<p class="login-card__title">Portal Interno da De Paula</p>
|
|
<p class="login-slogan">"Grandes aplicações de todos os tamanhos."</p>
|
|
</div>
|
|
|
|
<form id="login-form" class="login-form" novalidate>
|
|
<div class="field">
|
|
<label for="login-user">Login</label>
|
|
<div class="field__control">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M4 20c0-4 4-6 8-6s8 2 8 6" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<circle cx="12" cy="8" r="4"/>
|
|
</svg>
|
|
<input id="login-user" name="user" type="text" autocomplete="username" placeholder="Digite seu login" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="login-pass">Senha</label>
|
|
<div class="field__control">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="4" y="10" width="16" height="10" rx="2"/>
|
|
<path d="M8 10V7a4 4 0 0 1 8 0v3" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
<input id="login-pass" name="pass" type="password" autocomplete="current-password" placeholder="Digite sua senha" />
|
|
<button type="button" id="toggle-password" class="field__toggle" aria-label="Mostrar senha">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<circle cx="12" cy="12" r="3"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<p id="login-error" class="field__error" role="alert"></p>
|
|
|
|
<button type="submit" class="btn-primary">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
Entrar
|
|
</button>
|
|
</form>
|
|
|
|
<p class="login-help">
|
|
Esqueceu sua senha? Contate a <a href="#">Inovação</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="login-intro" id="login-intro" hidden aria-hidden="true">
|
|
<div class="login-intro__stage" id="login-intro-stage">
|
|
<svg class="login-intro__icon" id="login-intro-icon" viewBox="0 0 64 64">
|
|
<path class="login-intro__body" d="M10 4 h34 l14 14 v40 a2 2 0 0 1 -2 2 H8 a2 2 0 0 1 -2 -2 V6 a2 2 0 0 1 2 -2 z" pathLength="100"></path>
|
|
<g class="login-intro__tab">
|
|
<rect x="22" y="4" width="20" height="16"></rect>
|
|
<rect x="34" y="7" width="5" height="10"></rect>
|
|
</g>
|
|
<g class="login-intro__screen"><rect x="12" y="26" width="40" height="30" rx="2"></rect></g>
|
|
<g class="login-intro__eye login-intro__eye--l">
|
|
<circle r="5"></circle>
|
|
<circle class="login-intro__glint" cx="2" cy="-1.8" r="1.6"></circle>
|
|
</g>
|
|
<g class="login-intro__eye login-intro__eye--r">
|
|
<circle r="5"></circle>
|
|
<circle class="login-intro__glint" cx="2" cy="-1.8" r="1.6"></circle>
|
|
</g>
|
|
<path class="login-intro__smile" d="M25 47 q7 6 14 0" pathLength="100"></path>
|
|
</svg>
|
|
|
|
<div class="login-intro__wordmark" id="login-intro-wordmark">
|
|
<div class="login-intro__letters">
|
|
<span class="login-intro__letter">P<span class="login-intro__dot">.</span></span>
|
|
<span class="login-intro__letter">I<span class="login-intro__dot">.</span></span>
|
|
<span class="login-intro__letter">D<span class="login-intro__dot">.</span></span>
|
|
</div>
|
|
<div class="login-intro__rule"></div>
|
|
<div class="login-intro__tagline">Portal Interno da De Paula</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="{% static 'js/api.js' %}"></script>
|
|
<script src="{% static 'js/confirm-modal.js' %}"></script>
|
|
<script src="{% static 'js/login-logo-blink.js' %}"></script>
|
|
<script src="{% static 'js/login-intro.js' %}"></script>
|
|
<script src="{% static 'js/auth.js' %}"></script>
|
|
</body>
|
|
</html>
|