Quer pedir um aumento de forma humorada?
Se você tem uma boa relação com seu superior e gostaria de brincar com ele, essa "zoeira" (que pode ter um fundo de verdade) pode ser perfeita.
https://iamferraz.com.br/aumento?name=SeuNome
Fiz isso hoje (em umas 2h) e deixo o código-fonte abaixo para estudo.
PS: Utilizei HTML e JS puros! E foi feito sem usar as melhores práticas, o foco foi em lançar rapidamente.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/fireworks-js@2.x/dist/index.umd.js"></script>
<title>Merece um Aumento?</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: #f0f2f5;
font-family: 'Arial', sans-serif;
}
#fireworks-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.container {
text-align: center;
background: white;
padding: 50px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
z-index: 100;
}
h1 {
margin-bottom: 20px;
color: #333;
}
.buttons {
display: flex;
justify-content: center;
gap: 20px;
}
.button {
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s, color 0.3s;
}
.button-primary {
background: #007bff;
color: white;
}
.button-primary:hover {
background: #0056b3;
}
.button-secondary {
background: #6c757d;
color: white;
}
.button-secondary:hover {
background: #565e64;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}
.modal-content {
background: white;
padding: 20px;
border-radius: 10px;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.close {
cursor: pointer;
color: #aaa;
font-size: 24px;
position: absolute;
top: 10px;
right: 20px;
}
.close:hover {
color: #000;
}
</style>
</head>
<body>
<div class="container">
<h1 id="msg">Bruna merece um aumento salarial?</h1>
<div class="buttons" id="buttonsBox">
<button class="button button-primary" id="open-popup">Sim</button>
<button class="button button-secondary" id="button-secondary">Não</button>
</div>
<div class="modal" id="modal">
<div class="modal-content">
<span class="close" id="close-popup">×</span>
<p>De quanto é o aumento que ele merece?</p>
<div class="radio-group">
<label><input type="radio" name="option" value="5" id="radio5" onchange="unCheckAllRadio()"> 5%</label>
<label><input type="radio" name="option" value="10" id="radio10" onchange="unCheckAllRadio()"> 10%</label>
<label><input type="radio" name="option" value="30" onchange="startFireworks()"> 25%</label>
</div>
</div>
</div>
</div>
<canvas id="fireworks-canvas"></canvas>
<script>
const secondaryButton = document.getElementById('button-secondary');
const radio5 = document.getElementById('radio5');
const radio10 = document.getElementById('radio10');
const openPopupButton = document.getElementById('open-popup');
const closePopupButton = document.getElementById('close-popup');
const modal = document.getElementById('modal');
const buttonsBox = document.getElementById("buttonsBox")
const msg = document.getElementById("msg")
var fireworks = undefined;
var msgTemplate = "{name} merece um aumento salarial?"
function unCheckAllRadio(event){
let radio = document.querySelector('input[name="option"]:checked')
if(radio == null)
return
document.querySelector('input[name="option"]:checked').checked = false;
}
// Função para obter os parâmetros da URL
function getUrlParameters() {
const params = {};
const queryString = window.location.search.substring(1);
if (queryString == "")
return undefined
const pairs = queryString.split("&");
for (const pair of pairs) {
const [key, value] = pair.split("=");
params[decodeURIComponent(key)] = decodeURIComponent(value);
}
return params;
}
// Função para exibir os parâmetros em um elemento <p>
function displayParams(params) {
if(!params) return
msg.innerHTML = msgTemplate.replace("{name}",params["name"])
}
function translate(event, component,tresh=100){
const rect = component.getBoundingClientRect();
const buttonX = rect.left + rect.width / 2;
const buttonY = rect.top + rect.height / 2;
const distance = Math.sqrt((event.clientX - buttonX) ** 2 + (event.clientY - buttonY) ** 2);
if (distance < tresh) { // Se o cursor estiver a menos de 100 pixels de distância do botão
const angle = Math.atan2(event.clientY - buttonY, event.clientX - buttonX);
const newX = Math.cos(angle) * 150;
const newY = Math.sin(angle) * 150;
component.style.transform = `translate(${newX}px, ${newY}px)`;
}
}
document.addEventListener('mousemove', (event) => {
translate(event, secondaryButton,100)
translate(event, radio5,10)
translate(event, radio10,10)
});
openPopupButton.addEventListener('click', () => {
modal.style.display = 'flex';
});
closePopupButton.addEventListener('click', () => {
modal.style.display = 'none';
});
window.addEventListener('click', (event) => {
// if (event.target === modal) {
// modal.style.display = 'none';
// }
});
document.addEventListener("DOMContentLoaded", function() {
const container = document.getElementById('fireworks-canvas');
fireworks = new Fireworks.default(container);
unCheckAllRadio();
// Obtém e exibe os parâmetros da URL
const params = getUrlParameters();
displayParams(params);
});
function startFireworks(){
fireworks.start();
modal.style.display = 'none';
buttonsBox.style.display = 'none';
msg.innerText = "🤩 Você é o melhor chefe da vida 😍!!!"
}
</script>
</body>
</html>
Infelizmente dá pra acionar o botão navegando através do Tab, não foi dessa vez o aumento 😁
Desculpa,não entendi. Vc fala pelo console de desenvolvedor do navegador?
Opa, sem problemas. É pelo tab do teclado mesmo, tecla tab. Só clicar na tela e navegar usando o tab até o botão "Não"
Mandei pra minha chefe e rimos muito hahahahah
To open to work pessoal
Muito bom isso! Parabéns! A programação quando usada de forma criativa abre um sorriso no rosto de qualquer programador.
mandei aqui no grupo kkkkkkk
kkkkkkkkkkkkkkkkk rapaz vou usar essa daqui uns meses aqui no meu setor :D
Hahahahhahah Boa sorte!!! Torço pra dar certo!
Sensacional! Já vou mandar para uns amigos que estão querendo receber aumento, mas não sabem como pedir.
HAHAHAHAHAHAH
Dessa vez vão te dar aumento é de trabalho...