Executando verificação de segurança...
18

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">&times;</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>
Carregando publicação patrocinada...
3
1
1
2
1
1
1
0
1
0