771 lines
28 KiB
HTML
771 lines
28 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pt-BR">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="theme-color" content="#20337b">
|
|
<title>Martins & Vieira - Advocacia Especializada</title>
|
|
|
|
<!-- Resource Hints para domínios externos -->
|
|
<link rel="dns-prefetch" href="https://wa.me">
|
|
<link rel="dns-prefetch" href="https://www.martinsevieira.adv.br">
|
|
<link rel="dns-prefetch" href="https://www.instagram.com">
|
|
<link rel="dns-prefetch" href="https://www.facebook.com">
|
|
<link rel="preconnect" href="https://advx.martinsevieira.adv.br">
|
|
<link rel="preconnect" href="https://cloud.martinsevieira.adv.br">
|
|
<link rel="preconnect" href="https://chat.martinsevieira.adv.br">
|
|
|
|
<!-- Preload da imagem crítica do logo -->
|
|
<link rel="preload" as="image" href="fotos/logo.png" fetchpriority="high">
|
|
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Otimização de renderização para elementos animados */
|
|
*[class*="icon"],
|
|
*[class*="button"],
|
|
*[class*="modal"] {
|
|
backface-visibility: hidden;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
min-height: 100vh;
|
|
height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
padding: 20px 0;
|
|
contain: layout style;
|
|
}
|
|
|
|
/* Background animado com gradiente - otimizado */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(45deg, #20337b, #1a2a5e, #2d4a9e);
|
|
background-size: 200% 200%;
|
|
animation: gradientAnimation 20s ease-in-out infinite;
|
|
z-index: -2;
|
|
will-change: transform;
|
|
transform: translate3d(0, 0, 0);
|
|
contain: strict;
|
|
}
|
|
|
|
@keyframes gradientAnimation {
|
|
0%, 100% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
}
|
|
|
|
.container {
|
|
max-width: 500px;
|
|
width: 95%;
|
|
padding: 20px 15px;
|
|
text-align: center;
|
|
position: relative;
|
|
z-index: 1;
|
|
margin: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: visible;
|
|
}
|
|
|
|
.logo {
|
|
width: 100px;
|
|
height: 100px;
|
|
margin: 0 auto 12px;
|
|
background: url('fotos/logo.png') center/80% no-repeat rgba(255, 255, 255, 0.95);
|
|
border-radius: 50%;
|
|
border: 3px solid rgba(255, 255, 255, 0.3);
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
|
|
contain: layout style paint;
|
|
}
|
|
|
|
.header {
|
|
color: white;
|
|
margin-bottom: 15px;
|
|
contain: layout style paint;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 1.8em;
|
|
margin-bottom: 5px;
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.header p {
|
|
font-size: 0.9em;
|
|
color: #e0e0e0;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
/* Botões principais */
|
|
.save-contact,
|
|
.pix-button {
|
|
display: inline-block;
|
|
padding: 12px 30px;
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 50px;
|
|
font-size: 0.95em;
|
|
font-weight: bold;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
|
|
cursor: pointer;
|
|
border: none;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
.save-contact {
|
|
background: linear-gradient(135deg, #20337b, #2d4a9e);
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.save-contact:hover {
|
|
transform: translate3d(0, -3px, 0);
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.icons-row {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 15px;
|
|
margin-bottom: 20px;
|
|
flex-wrap: wrap;
|
|
overflow: visible;
|
|
}
|
|
|
|
.icon-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
color: white;
|
|
transition: transform 0.2s ease;
|
|
position: relative;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
.icon-item:hover {
|
|
transform: scale3d(1.08, 1.08, 1);
|
|
}
|
|
|
|
.icon-box {
|
|
width: 65px;
|
|
height: 65px;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
border-radius: 12px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
border: 2px solid rgba(255, 255, 255, 0.2);
|
|
transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
|
|
position: relative;
|
|
z-index: 1;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
.icon-item:hover .icon-box {
|
|
background: rgba(255, 255, 255, 0.25);
|
|
border-color: rgba(255, 255, 255, 0.4);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.icon-box svg,
|
|
.small-icon svg {
|
|
fill: white;
|
|
}
|
|
|
|
.icon-box svg {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
.small-icon svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.icon-label {
|
|
font-size: 0.7em;
|
|
font-weight: 500;
|
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.pix-button {
|
|
background: linear-gradient(135deg, #32BCAD, #00A86B);
|
|
margin-bottom: 15px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.pix-button::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
transform: translate3d(-50%, -50%, 0);
|
|
transition: transform 0.4s ease, opacity 0.4s ease;
|
|
opacity: 0;
|
|
}
|
|
|
|
.pix-button:hover::before {
|
|
transform: translate3d(-50%, -50%, 0) scale(3);
|
|
opacity: 1;
|
|
}
|
|
|
|
.pix-button:hover {
|
|
transform: translate3d(0, -3px, 0);
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.pix-button:active {
|
|
transform: translate3d(0, -1px, 0) scale(0.98);
|
|
}
|
|
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0);
|
|
z-index: 1000;
|
|
justify-content: center;
|
|
align-items: center;
|
|
transition: opacity 0.25s ease;
|
|
opacity: 0;
|
|
}
|
|
|
|
.modal.active {
|
|
display: flex;
|
|
animation: fadeIn 0.25s ease forwards;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
to { background: rgba(0, 0, 0, 0.8); opacity: 1; }
|
|
}
|
|
|
|
.modal-content {
|
|
background: white;
|
|
padding: 30px;
|
|
border-radius: 20px;
|
|
max-width: 400px;
|
|
width: 90%;
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
|
|
transform: translate3d(0, 30px, 0) scale(0.9);
|
|
opacity: 0;
|
|
contain: layout style paint;
|
|
}
|
|
|
|
.modal.active .modal-content {
|
|
animation: slideUpScale 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
@keyframes slideUpScale {
|
|
to { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
to { background: rgba(0, 0, 0, 0); opacity: 0; }
|
|
}
|
|
|
|
@keyframes slideDownScale {
|
|
to { transform: translate3d(0, 30px, 0) scale(0.9); opacity: 0; }
|
|
}
|
|
|
|
.modal-header {
|
|
color: #20337b;
|
|
font-size: 1.8em;
|
|
margin-bottom: 20px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.modal-input {
|
|
width: 100%;
|
|
padding: 15px;
|
|
font-size: 1.2em;
|
|
border: 2px solid #20337b;
|
|
border-radius: 10px;
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
outline: none;
|
|
}
|
|
|
|
.modal-input:focus {
|
|
border-color: #32BCAD;
|
|
box-shadow: 0 0 0 3px rgba(50, 188, 173, 0.2);
|
|
}
|
|
|
|
.modal-buttons {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.modal-button {
|
|
flex: 1;
|
|
padding: 15px;
|
|
border: none;
|
|
border-radius: 10px;
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
.modal-button::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
transform: translate3d(-50%, -50%, 0) scale(0);
|
|
transition: transform 0.4s ease, opacity 0.4s ease;
|
|
opacity: 0;
|
|
}
|
|
|
|
.modal-button:hover::after {
|
|
transform: translate3d(-50%, -50%, 0) scale(3);
|
|
opacity: 1;
|
|
}
|
|
|
|
.modal-button.generate {
|
|
background: linear-gradient(135deg, #32BCAD, #00A86B);
|
|
color: white;
|
|
}
|
|
|
|
.modal-button.cancel {
|
|
background: #ccc;
|
|
color: #333;
|
|
}
|
|
|
|
.modal-button:hover {
|
|
transform: translate3d(0, -2px, 0);
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.modal-button:active {
|
|
transform: translate3d(0, 0, 0) scale(0.98);
|
|
}
|
|
|
|
.pix-instruction {
|
|
display: none;
|
|
margin-top: 15px;
|
|
text-align: center;
|
|
color: #32BCAD;
|
|
font-size: 0.95em;
|
|
font-weight: 600;
|
|
opacity: 0;
|
|
transform: translate3d(0, -5px, 0);
|
|
}
|
|
|
|
.pix-instruction.active {
|
|
display: block;
|
|
animation: fadeInUp 0.3s ease forwards 0.2s;
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
to { opacity: 1; transform: translate3d(0, 0, 0); }
|
|
}
|
|
|
|
.pix-code-area {
|
|
display: none;
|
|
margin-top: 8px;
|
|
padding: 15px;
|
|
background: #f5f5f5;
|
|
border-radius: 10px;
|
|
word-break: break-all;
|
|
font-family: monospace;
|
|
font-size: 0.9em;
|
|
color: #333;
|
|
transform: translate3d(0, -10px, 0);
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
|
|
border: 2px solid transparent;
|
|
position: relative;
|
|
contain: layout style paint;
|
|
}
|
|
|
|
.pix-code-area::after {
|
|
content: '📋';
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
font-size: 1.3em;
|
|
opacity: 0.6;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.pix-code-area:hover::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.pix-code-area:hover {
|
|
background: #e8f5f3;
|
|
border-color: #32BCAD;
|
|
transform: translate3d(0, 0, 0) scale(1.01);
|
|
}
|
|
|
|
.pix-code-area.active {
|
|
display: block;
|
|
animation: slideInFade 0.3s ease forwards;
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
@keyframes slideInFade {
|
|
to { transform: translate3d(0, 0, 0); opacity: 1; }
|
|
}
|
|
|
|
.copy-notification {
|
|
margin-top: 10px;
|
|
color: #00A86B;
|
|
font-weight: bold;
|
|
display: none;
|
|
transform: scale3d(0.8, 0.8, 1);
|
|
opacity: 0;
|
|
}
|
|
|
|
.copy-notification.active {
|
|
display: block;
|
|
animation: popIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
}
|
|
|
|
@keyframes popIn {
|
|
to { transform: scale3d(1, 1, 1); opacity: 1; }
|
|
}
|
|
|
|
.small-icons {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
margin-top: 15px;
|
|
flex-wrap: wrap;
|
|
overflow: visible;
|
|
}
|
|
|
|
.small-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
|
|
text-decoration: none;
|
|
position: relative;
|
|
z-index: 1;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
.small-icon:hover {
|
|
background: rgba(255, 255, 255, 0.25);
|
|
transform: scale3d(1.15, 1.15, 1);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
/* Suporte para dispositivos com preferência por movimento reduzido */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
|
|
body::before {
|
|
animation: none !important;
|
|
background: #20337b;
|
|
}
|
|
}
|
|
|
|
/* Otimização para dispositivos touch (geralmente menos potentes) */
|
|
@media (pointer: coarse) {
|
|
/* Remove efeitos hover complexos em touch devices */
|
|
.pix-button::before,
|
|
.modal-button::after {
|
|
display: none;
|
|
}
|
|
|
|
/* Simplifica sombras */
|
|
.icon-box,
|
|
.small-icon,
|
|
.save-contact,
|
|
.pix-button {
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
}
|
|
}
|
|
|
|
/* Otimizações para telas menores e dispositivos menos potentes */
|
|
@media (max-width: 600px) {
|
|
.header h1 { font-size: 1.5em; }
|
|
.header p { font-size: 0.8em; }
|
|
.icon-box { width: 60px; height: 60px; }
|
|
.icon-box svg { width: 28px; height: 28px; }
|
|
.icon-label { font-size: 0.65em; }
|
|
|
|
/* Reduz complexidade de animações em mobile */
|
|
body::before {
|
|
animation-duration: 25s;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="logo"></div>
|
|
|
|
<div class="header">
|
|
<h1>Martins & Vieira</h1>
|
|
<p>Advocacia Especializada</p>
|
|
</div>
|
|
|
|
<a href="contato.vcf" class="save-contact" download>📇 Salvar na Agenda</a>
|
|
|
|
<div class="icons-row">
|
|
<a href="https://wa.me/5563981174175?text=Ol%C3%A1%20Martins%20%26%20Vieira%2C%20gostaria%20de%20obter%20mais%20informa%C3%A7%C3%B5es" target="_blank" class="icon-item">
|
|
<div class="icon-box">
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
|
|
</svg>
|
|
</div>
|
|
<span class="icon-label">WhatsApp</span>
|
|
</a>
|
|
|
|
<a href="tel:+5563981174175" class="icon-item">
|
|
<div class="icon-box">
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
|
|
</svg>
|
|
</div>
|
|
<span class="icon-label">Ligar</span>
|
|
</a>
|
|
|
|
<a href="https://www.martinsevieira.adv.br" target="_blank" class="icon-item">
|
|
<div class="icon-box">
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
|
|
</svg>
|
|
</div>
|
|
<span class="icon-label">Site</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="icons-row">
|
|
<a href="https://www.instagram.com/rodrigosm_adv" target="_blank" class="icon-item">
|
|
<div class="icon-box">
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z"/>
|
|
</svg>
|
|
</div>
|
|
<span class="icon-label">Instagram</span>
|
|
</a>
|
|
|
|
<a href="https://www.facebook.com/profile.php?id=61564304790750" target="_blank" class="icon-item">
|
|
<div class="icon-box">
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
|
|
</svg>
|
|
</div>
|
|
<span class="icon-label">Facebook</span>
|
|
</a>
|
|
|
|
<a href="https://advx.martinsevieira.adv.br/public/provas/upload" target="_blank" class="icon-item">
|
|
<div class="icon-box">
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M9 16h6v-6h4l-7-7-7 7h4v6zm-4 2h14v2H5v-2z"/>
|
|
</svg>
|
|
</div>
|
|
<span class="icon-label">Enviar Provas</span>
|
|
</a>
|
|
</div>
|
|
|
|
<button class="pix-button" onclick="openPixModal()">💳 Pagar com PIX</button>
|
|
|
|
<div class="small-icons">
|
|
<a href="mailto:rodrigo@martinsevieira.adv.br" class="small-icon" title="E-mail">
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
|
|
</svg>
|
|
</a>
|
|
|
|
<a href="https://cloud.martinsevieira.adv.br" target="_blank" class="small-icon" title="Cloud">
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z"/>
|
|
</svg>
|
|
</a>
|
|
|
|
<a href="https://advx.martinsevieira.adv.br" target="_blank" class="small-icon" title="Sistema">
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z"/>
|
|
</svg>
|
|
</a>
|
|
|
|
<a href="https://chat.martinsevieira.adv.br" target="_blank" class="small-icon" title="Chat">
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal" id="pixModal">
|
|
<div class="modal-content">
|
|
<h2 class="modal-header">Pagamento PIX</h2>
|
|
<input type="number" class="modal-input" id="pixValue" placeholder="Digite o valor (R$)" step="0.01" min="0.01">
|
|
<div class="modal-buttons">
|
|
<button class="modal-button cancel" onclick="closePixModal()">Cancelar</button>
|
|
<button class="modal-button generate" onclick="generatePix()">Gerar PIX</button>
|
|
</div>
|
|
<div class="pix-instruction" id="pixInstruction">👇 Clique no código abaixo para copiar</div>
|
|
<div class="pix-code-area" id="pixCodeArea"></div>
|
|
<div class="copy-notification" id="copyNotification">✓ Código copiado!</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const pixModal = document.getElementById('pixModal'),
|
|
pixValue = document.getElementById('pixValue'),
|
|
pixCodeArea = document.getElementById('pixCodeArea'),
|
|
pixInstruction = document.getElementById('pixInstruction'),
|
|
copyNotification = document.getElementById('copyNotification'),
|
|
modalContent = pixModal.querySelector('.modal-content');
|
|
|
|
const openPixModal = () => {
|
|
pixModal.classList.add('active');
|
|
setTimeout(() => {
|
|
pixValue.focus();
|
|
// Remove will-change após animação completar
|
|
setTimeout(() => {
|
|
modalContent.style.willChange = 'auto';
|
|
}, 300);
|
|
}, 100);
|
|
};
|
|
|
|
const closePixModal = () => {
|
|
const animStyle = (elem, anim) => elem.style.animation = anim;
|
|
animStyle(modalContent, 'slideDownScale 0.25s ease forwards');
|
|
animStyle(pixModal, 'fadeOut 0.25s ease forwards');
|
|
|
|
setTimeout(() => {
|
|
pixModal.classList.remove('active');
|
|
animStyle(pixModal, '');
|
|
animStyle(modalContent, '');
|
|
pixValue.value = '';
|
|
pixCodeArea.classList.remove('active');
|
|
pixInstruction.classList.remove('active');
|
|
copyNotification.classList.remove('active');
|
|
// Remove will-change para economizar recursos
|
|
modalContent.style.willChange = 'auto';
|
|
}, 250);
|
|
};
|
|
|
|
const generatePix = () => {
|
|
const value = parseFloat(pixValue.value);
|
|
|
|
if (!value || value <= 0) return alert('Por favor, digite um valor válido');
|
|
|
|
const pixCode = buildPixCode(
|
|
'financeiro@martinsevieira.adv.br',
|
|
'MARTINS E VIEIRA',
|
|
'PALMAS',
|
|
value.toFixed(2),
|
|
'PAGAMENTO' + Date.now().toString().slice(-10)
|
|
);
|
|
|
|
pixCodeArea.textContent = pixCode;
|
|
pixCodeArea.classList.add('active');
|
|
pixInstruction.classList.add('active');
|
|
pixCodeArea.onclick = () => copyToClipboard(pixCode);
|
|
copyToClipboard(pixCode);
|
|
};
|
|
|
|
const buildPixCode = (pixKey, merchantName, city, value, txid) => {
|
|
const emvField = (id, val) => id + val.length.toString().padStart(2, '0') + val,
|
|
merchantAccountInfo = emvField('00', 'BR.GOV.BCB.PIX') + emvField('01', pixKey),
|
|
emv = emvField('00', '01') + emvField('26', merchantAccountInfo) +
|
|
emvField('52', '0000') + emvField('53', '986') + emvField('54', value) +
|
|
emvField('58', 'BR') + emvField('59', merchantName) + emvField('60', city) +
|
|
emvField('62', emvField('05', txid)) + '6304';
|
|
return emv + crc16(emv);
|
|
};
|
|
|
|
const crc16 = str => {
|
|
let crc = 0xFFFF, i = 0;
|
|
for (; i < str.length; i++) {
|
|
crc ^= str.charCodeAt(i) << 8;
|
|
for (let j = 0; j < 8; j++) crc = crc & 0x8000 ? (crc << 1) ^ 0x1021 : crc << 1;
|
|
}
|
|
return (crc & 0xFFFF).toString(16).toUpperCase().padStart(4, '0');
|
|
};
|
|
|
|
const copyToClipboard = text => {
|
|
if (navigator.clipboard?.writeText) {
|
|
navigator.clipboard.writeText(text).then(showCopyNotification, () => fallbackCopy(text));
|
|
} else {
|
|
fallbackCopy(text);
|
|
}
|
|
};
|
|
|
|
const fallbackCopy = text => {
|
|
const textarea = document.createElement('textarea');
|
|
textarea.value = text;
|
|
textarea.style.cssText = 'position:fixed;opacity:0';
|
|
document.body.appendChild(textarea);
|
|
textarea.select();
|
|
try {
|
|
document.execCommand('copy');
|
|
showCopyNotification();
|
|
} catch {
|
|
alert('Erro ao copiar. Por favor, copie manualmente.');
|
|
}
|
|
document.body.removeChild(textarea);
|
|
};
|
|
|
|
const showCopyNotification = () => {
|
|
copyNotification.classList.remove('active');
|
|
setTimeout(() => copyNotification.classList.add('active'), 10);
|
|
setTimeout(() => copyNotification.classList.remove('active'), 3000);
|
|
};
|
|
|
|
pixModal.addEventListener('click', e => e.target === pixModal && closePixModal());
|
|
pixValue.addEventListener('keypress', e => e.key === 'Enter' && generatePix());
|
|
</script>
|
|
</body>
|
|
</html>
|