rodrigo/mv-bio
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

performance: reduzir consumo de memoria

Browse Source 
Signed-off-by: Rodrigo Bertoldo de Sousa Martins <rodrigo.sousa.577@gmail.com>
This commit is contained in:
rodrigo committed 2026-02-21 16:56:16 -03:00
1 parent 685d37e3f6
commit 6058620486
1 file changed
+54 -131
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+54 -131
View File
@@ -40,9 +40,8 @@
}
@keyframes gradientAnimation {
0% { background-position: 0% 50%; }
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.container {
@@ -157,33 +156,30 @@
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.icon-box svg {
width: 32px;
height: 32px;
.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.75em;
font-size: 0.7em;
font-weight: 500;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
/* Botão PIX */
.pix-button {
display: inline-block;
padding: 12px 30px;
background: linear-gradient(135deg, #32BCAD, #00A86B);
color: white;
text-decoration: none;
border-radius: 50px;
font-size: 0.95em;
font-weight: bold;
margin-bottom: 20px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
cursor: pointer;
border: none;
position: relative;
overflow: hidden;
}
@@ -236,12 +232,8 @@
}
@keyframes fadeIn {
from {
background: rgba(0, 0, 0, 0);
}
to {
background: rgba(0, 0, 0, 0.8);
}
0% { background: rgba(0, 0, 0, 0); }
100% { background: rgba(0, 0, 0, 0.8); }
}
.modal-content {
@@ -261,34 +253,18 @@
}
@keyframes slideUpScale {
0% {
transform: translateY(30px) scale(0.9);
opacity: 0;
}
100% {
transform: translateY(0) scale(1);
opacity: 1;
}
0% { transform: translateY(30px) scale(0.9); opacity: 0; }
100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes fadeOut {
from {
background: rgba(0, 0, 0, 0.8);
}
to {
background: rgba(0, 0, 0, 0);
}
0% { background: rgba(0, 0, 0, 0.8); }
100% { background: rgba(0, 0, 0, 0); }
}
@keyframes slideDownScale {
0% {
transform: translateY(0) scale(1);
opacity: 1;
}
100% {
transform: translateY(30px) scale(0.9);
opacity: 0;
}
0% { transform: translateY(0) scale(1); opacity: 1; }
100% { transform: translateY(30px) scale(0.9); opacity: 0; }
}
.modal-header {
@@ -421,14 +397,8 @@
}
@keyframes slideInFade {
from {
transform: translateY(-10px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
0% { transform: translateY(-10px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
.copy-notification {
@@ -446,14 +416,8 @@
}
@keyframes popIn {
from {
transform: scale(0.8);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.small-icons {
@@ -484,34 +448,12 @@
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.small-icon svg {
width: 20px;
height: 20px;
fill: white;
}
@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.7em;
}
.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; }
}
</style>
</head>
@@ -526,7 +468,6 @@
<a href="contato.vcf" class="save-contact" download>📇 Salvar na Agenda</a>
<!-- Primeira linha de ícones -->
<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">
@@ -556,7 +497,6 @@
</a>
</div>
<!-- Segunda linha de ícones -->
<div class="icons-row">
<a href="https://www.instagram.com/rodrigosm_adv" target="_blank" class="icon-item">
<div class="icon-box">
@@ -586,10 +526,8 @@
</a>
</div>
<!-- Botão PIX -->
<button class="pix-button" onclick="openPixModal()">💳 Pagar com PIX</button>
<!-- Ícones pequenos -->
<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">
@@ -617,7 +555,6 @@
</div>
</div>
<!-- Modal PIX -->
<div class="modal" id="pixModal">
<div class="modal-content">
<h2 class="modal-header">Pagamento PIX</h2>
@@ -632,12 +569,11 @@
</div>
<script>
// Cache de elementos DOM para melhor performance
const pixModal = document.getElementById('pixModal');
const pixValue = document.getElementById('pixValue');
const pixCodeArea = document.getElementById('pixCodeArea');
const copyNotification = document.getElementById('copyNotification');
const modalContent = pixModal.querySelector('.modal-content');
const pixModal = document.getElementById('pixModal'),
pixValue = document.getElementById('pixValue'),
pixCodeArea = document.getElementById('pixCodeArea'),
copyNotification = document.getElementById('copyNotification'),
modalContent = pixModal.querySelector('.modal-content');
const openPixModal = () => {
pixModal.classList.add('active');
@@ -645,13 +581,14 @@
};
const closePixModal = () => {
modalContent.style.animation = 'slideDownScale 0.3s ease forwards';
pixModal.style.animation = 'fadeOut 0.3s ease forwards';
const animStyle = (elem, anim) => elem.style.animation = anim;
animStyle(modalContent, 'slideDownScale 0.3s ease forwards');
animStyle(pixModal, 'fadeOut 0.3s ease forwards');
setTimeout(() => {
pixModal.classList.remove('active');
pixModal.style.animation = '';
modalContent.style.animation = '';
animStyle(pixModal, '');
animStyle(modalContent, '');
pixValue.value = '';
pixCodeArea.classList.remove('active');
copyNotification.classList.remove('active');
@@ -661,10 +598,7 @@
const generatePix = () => {
const value = parseFloat(pixValue.value);
if (!value || value <= 0) {
alert('Por favor, digite um valor válido');
return;
}
if (!value || value <= 0) return alert('Por favor, digite um valor válido');
const pixCode = buildPixCode(
'financeiro@martinsevieira.adv.br',
@@ -681,24 +615,20 @@
};
const buildPixCode = (pixKey, merchantName, city, value, txid) => {
const emvField = (id, value) => id + value.length.toString().padStart(2, '0') + value;
const merchantAccountInfo = emvField('00', 'BR.GOV.BCB.PIX') + emvField('01', pixKey);
let 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';
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;
for (let i = 0; i < str.length; i++) {
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;
}
for (let j = 0; j < 8; j++) crc = crc & 0x8000 ? (crc << 1) ^ 0x1021 : crc << 1;
}
return (crc & 0xFFFF).toString(16).toUpperCase().padStart(4, '0');
};
@@ -720,7 +650,7 @@
try {
document.execCommand('copy');
showCopyNotification();
} catch (err) {
} catch {
alert('Erro ao copiar. Por favor, copie manualmente.');
}
document.body.removeChild(textarea);
@@ -732,15 +662,8 @@
setTimeout(() => copyNotification.classList.remove('active'), 3000);
};
// Fecha modal ao clicar fora
pixModal.addEventListener('click', e => {
if (e.target === pixModal) closePixModal();
});
// Permite gerar PIX ao pressionar Enter
pixValue.addEventListener('keypress', e => {
if (e.key === 'Enter') generatePix();
});
pixModal.addEventListener('click', e => e.target === pixModal && closePixModal());
pixValue.addEventListener('keypress', e => e.key === 'Enter' && generatePix());
</script>
</body>
</html>