208 lines
11 KiB
HTML
208 lines
11 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>P.I.D. - 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&family=Creepster&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' %}" />
|
|
<link rel="stylesheet" href="{% static 'css/login-intro-halloween.css' %}" />
|
|
<link rel="stylesheet" href="{% static 'css/halloween-cobweb.css' %}" />
|
|
<script src="{% static 'js/theme.js' %}" defer></script>
|
|
</head>
|
|
<body>
|
|
<div class="login-page">
|
|
<div class="pw-corners pw-corners--login" id="pw-cobwebs-login" hidden aria-hidden="true"></div>
|
|
<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>
|
|
|
|
<!-- Variante sazonal (Halloween/vampiro) da intro acima — ver
|
|
login-intro-halloween.css/.js e `docs/temas-sazonais/temas-sazonais.md`.
|
|
Só é exibida quando `pidIsHalloweenActive()` (seasonal-theme.js); fora
|
|
da janela de outubro, o bloco #login-intro acima continua sendo o
|
|
único usado. -->
|
|
<div class="login-intro-h" id="login-intro-halloween" hidden aria-hidden="true">
|
|
<div class="login-intro-h__flash" id="login-intro-h-flash"></div>
|
|
<div class="login-intro-h__stage" id="login-intro-h-stage">
|
|
<svg class="login-intro-h__icon" id="login-intro-h-icon" viewBox="0 0 76 80">
|
|
<defs>
|
|
<clipPath id="pidHIntroBodyClip">
|
|
<path d="M16 22 h34 l14 14 v40 a2 2 0 0 1 -2 2 H14 a2 2 0 0 1 -2 -2 V24 a2 2 0 0 1 2 -2 z"></path>
|
|
</clipPath>
|
|
</defs>
|
|
<g class="login-intro-h__cape">
|
|
<path d="M4 9 L20 19 Q38 24 56 19 L72 9 C74 32 74 56 71 78 L5 78 C2 56 2 32 4 9 Z"></path>
|
|
<path class="login-intro-h__cape-line" d="M4 9 L20 19 Q38 24 56 19 L72 9"></path>
|
|
</g>
|
|
<path class="login-intro-h__collar" d="M9 16 L21 22 Q38 26 55 22 L67 16 C68 26 68 31 66 36 L10 36 C8 31 8 26 9 16 Z"></path>
|
|
<path class="login-intro-h__body" d="M16 22 h34 l14 14 v40 a2 2 0 0 1 -2 2 H14 a2 2 0 0 1 -2 -2 V24 a2 2 0 0 1 2 -2 z"></path>
|
|
<rect class="login-intro-h__tab" x="28" y="22" width="20" height="16"></rect>
|
|
<rect class="login-intro-h__tab-shadow" x="40" y="25" width="5" height="10"></rect>
|
|
<rect class="login-intro-h__screen" x="18" y="46" width="40" height="28" rx="2"></rect>
|
|
|
|
<g class="login-intro-h__face login-intro-h__face--scare">
|
|
<circle cx="30" cy="57.4" r="5"></circle>
|
|
<circle cx="46" cy="57.4" r="5"></circle>
|
|
<circle class="login-intro-h__pupil-red" cx="30" cy="57.4" r="2.1"></circle>
|
|
<circle class="login-intro-h__pupil-red" cx="46" cy="57.4" r="2.1"></circle>
|
|
<path class="login-intro-h__brow-angry" d="M24.6 51.4 L34.6 54.2"></path>
|
|
<path class="login-intro-h__brow-angry" d="M51.4 51.4 L41.4 54.2"></path>
|
|
<path class="login-intro-h__mouth-fill" d="M29 66.4 q9 7.4 18 0 q-9 3 -18 0 Z"></path>
|
|
<path class="login-intro-h__mouth" d="M29 66.4 q9 7.4 18 0"></path>
|
|
<path class="login-intro-h__fang" d="M31.4 67.4 L34.6 67.9 L32.9 73 Z"></path>
|
|
<path class="login-intro-h__fang" d="M41.4 67.9 L44.6 67.4 L43.1 73 Z"></path>
|
|
</g>
|
|
|
|
<g class="login-intro-h__face login-intro-h__face--friendly">
|
|
<circle cx="30" cy="58" r="5"></circle>
|
|
<circle cx="46" cy="58" r="5"></circle>
|
|
<circle class="login-intro-h__pupil" cx="32" cy="56.2" r="1.6"></circle>
|
|
<circle class="login-intro-h__pupil" cx="48" cy="56.2" r="1.6"></circle>
|
|
<path class="login-intro-h__brow" d="M26 63.2 q4 2.6 8 -0.5"></path>
|
|
<path class="login-intro-h__brow" d="M42 63.2 q4 2.6 8 -0.5"></path>
|
|
<path class="login-intro-h__mouth-friendly" d="M31 67 q7 6 14 0"></path>
|
|
<path class="login-intro-h__fang-friendly" d="M33.6 68.6 L36.4 68.9 L35 72 Z"></path>
|
|
<path class="login-intro-h__fang-friendly" d="M40.2 68.9 L43 68.6 L41.6 72 Z"></path>
|
|
</g>
|
|
|
|
<g class="login-intro-h__flap-wrap" clip-path="url(#pidHIntroBodyClip)">
|
|
<g class="login-intro-h__flap-rotate" id="login-intro-h-flap-rotate">
|
|
<path d="M66 58 C50 52 26 52 13 58 C10 64 10 72 11 78 C30 80 52 80 67 76 C68 68 68 63 66 58 Z"></path>
|
|
<path class="login-intro-h__cape-line" d="M66 58 C50 52 26 52 13 58"></path>
|
|
</g>
|
|
</g>
|
|
|
|
<g class="login-intro-h__squint">
|
|
<path d="M25.5 53.4 q4.5 -3.4 9 0"></path>
|
|
<path d="M41.5 53.4 q4.5 -3.4 9 0"></path>
|
|
<circle cx="30" cy="52.4" r="1.1"></circle>
|
|
<circle cx="46" cy="52.4" r="1.1"></circle>
|
|
</g>
|
|
</svg>
|
|
|
|
<div class="login-intro-h__wordmark" id="login-intro-h-wordmark">
|
|
<div class="login-intro-h__letters">
|
|
<span class="login-intro-h__letter">P<span class="login-intro-h__dot">.</span></span>
|
|
<span class="login-intro-h__letter">I<span class="login-intro-h__dot">.</span></span>
|
|
<span class="login-intro-h__letter">D<span class="login-intro-h__dot">.</span></span>
|
|
</div>
|
|
<div class="login-intro-h__rule"></div>
|
|
<div class="login-intro-h__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/seasonal-theme.js' %}"></script>
|
|
<script src="{% static 'js/login-logo-blink.js' %}"></script>
|
|
<script src="{% static 'js/login-intro.js' %}"></script>
|
|
<script src="{% static 'js/login-intro-halloween.js' %}"></script>
|
|
<script src="{% static 'js/auth.js' %}"></script>
|
|
</body>
|
|
</html>
|