Skip to content

Instantly share code, notes, and snippets.

@riquelmefnaf-sudo
Created January 2, 2026 04:03
Show Gist options
  • Select an option

  • Save riquelmefnaf-sudo/e030e1ad5d01df6c1b761b3c8b244192 to your computer and use it in GitHub Desktop.

Select an option

Save riquelmefnaf-sudo/e030e1ad5d01df6c1b761b3c8b244192 to your computer and use it in GitHub Desktop.
Pedido
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Undertale Quest</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
body {
background-color: #000;
color: white;
font-family: 'Press Start 2P', cursive;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
overflow: hidden;
text-align: center;
}
.caixa-dialogo {
border: 4px solid white;
padding: 30px;
width: 85%;
max-width: 500px;
min-height: 180px;
background: black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h1 {
font-size: 14px;
line-height: 1.8;
margin-bottom: 20px;
text-transform: uppercase;
}
.botoes {
display: flex;
gap: 20px;
justify-content: center;
width: 100%;
position: relative;
}
button {
background: black;
color: white;
border: 2px solid white;
padding: 12px 20px;
font-family: 'Press Start 2P', cursive;
font-size: 12px;
cursor: pointer;
}
button:hover {
color: #ffff00;
border-color: #ffff00;
}
#nao {
position: absolute;
}
#resultado {
display: none;
flex-direction: column;
align-items: center;
}
#resultado h2 {
color: #ffff00; /* Amarelo Undertale */
font-size: 22px;
margin-bottom: 25px;
text-transform: lowercase;
}
img {
max-width: 90%;
max-height: 60vh;
border: 4px solid white;
}
</style>
</head>
<body>
<div id="jogo" class="caixa-dialogo">
<h1 id="texto-dialogo">Humano... vejo que você tem muita DETERMINAÇÃO.</h1>
<div class="botoes">
<button id="proximo" onclick="proximaFrase()">PRÓXIMO</button>
<button id="sim" style="display:none;" onclick="aceitou()">SIM</button>
<button id="nao" style="display:none;" onmouseover="fugir()" onclick="fugir()">NÃO</button>
</div>
</div>
<div id="resultado">
<h2>sabiaaaaa</h2>
<img src="https://i.ibb.co/RTsHWq9H/a0827bfbd7ac0072f9db7dce85f4317a.jpg" alt="Final">
</div>
<script>
let passo = 0;
const texto = document.getElementById("texto-dialogo");
const btnProximo = document.getElementById("proximo");
const btnSim = document.getElementById("sim");
const btnNao = document.getElementById("nao");
function proximaFrase() {
passo++;
if (passo === 1) {
texto.innerText = "Um pedido de namoro selvagem apareceu!";
} else if (passo === 2) {
texto.innerText = "Você aceita poupar meu coração e namorar comigo?";
btnProximo.style.display = "none";
btnSim.style.display = "inline-block";
btnNao.style.display = "inline-block";
btnNao.style.left = "60%";
}
}
function fugir() {
const x = Math.random() * (window.innerWidth - 120);
const y = Math.random() * (window.innerHeight - 50);
btnNao.style.left = x + "px";
btnNao.style.top = y + "px";
btnNao.style.position = "fixed";
}
function aceitou() {
document.getElementById("jogo").style.display = "none";
document.getElementById("resultado").style.display = "flex";
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment