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/[email protected]/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>