|
|
<!DOCTYPE html> |
|
|
<html lang="pt-BR"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Campainha Virtual</title> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script> |
|
|
<style> |
|
|
body { font-family: Arial; text-align: center; margin: 40px; background: #f4f4f4; } |
|
|
#app { background: #fff; padding: 20px; border-radius: 12px; display: inline-block; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } |
|
|
button { margin: 10px; padding: 10px 18px; font-size: 16px; border: none; border-radius: 8px; cursor: pointer; } |
|
|
.host { background: #2563eb; color: #fff; } |
|
|
.guest { background: #10b981; color: #fff; } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div id="app"> |
|
|
<h1>🔔 Campainha Virtual</h1> |
|
|
<p>Escolha o modo:</p> |
|
|
<button class="host" onclick="iniciarHost()">Sou o anfitrião</button> |
|
|
<button class="guest" onclick="iniciarVisitante()">Sou o visitante</button> |
|
|
|
|
|
<div id="areaHost" style="display:none;"> |
|
|
<h2>Modo Anfitrião</h2> |
|
|
<p>Escaneie este QR em outro aparelho:</p> |
|
|
<div id="qrcode"></div> |
|
|
<audio id="som" src="https://actions.google.com/sounds/v1/alarms/digital_watch_alarm_long.ogg"></audio> |
|
|
<p><strong>Status:</strong> <span id="statusHost">Aguardando...</span></p> |
|
|
</div> |
|
|
|
|
|
<div id="areaVisitante" style="display:none;"> |
|
|
<h2>Modo Visitante</h2> |
|
|
<p>Insira o código do anfitrião:</p> |
|
|
<input id="codigoInput" placeholder="Ex: sala123" /> |
|
|
<br> |
|
|
<button onclick="tocarCampainha()">🔔 Tocar Campainha</button> |
|
|
<p id="statusVisitante"></p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
const servidor = "wss://ws.ifelse.io"; |
|
|
let ws, codigoSala; |
|
|
|
|
|
function iniciarHost() { |
|
|
document.getElementById("areaHost").style.display = "block"; |
|
|
document.getElementById("areaVisitante").style.display = "none"; |
|
|
|
|
|
codigoSala = "camp_" + Math.floor(Math.random() * 100000); |
|
|
const link = window.location.origin + window.location.pathname + "?sala=" + codigoSala; |
|
|
new QRCode(document.getElementById("qrcode"), link); |
|
|
|
|
|
document.getElementById("statusHost").textContent = "Sala: " + codigoSala; |
|
|
|
|
|
ws = new WebSocket(servidor); |
|
|
ws.onopen = () => console.log("Host conectado"); |
|
|
ws.onmessage = (msg) => { |
|
|
try { |
|
|
const data = JSON.parse(msg.data); |
|
|
if (data.sala === codigoSala && data.acao === "tocar") { |
|
|
tocarSom(); |
|
|
} |
|
|
} catch {} |
|
|
}; |
|
|
} |
|
|
|
|
|
function iniciarVisitante() { |
|
|
document.getElementById("areaVisitante").style.display = "block"; |
|
|
document.getElementById("areaHost").style.display = "none"; |
|
|
|
|
|
const url = new URL(window.location.href); |
|
|
const sala = url.searchParams.get("sala"); |
|
|
if (sala) document.getElementById("codigoInput").value = sala; |
|
|
} |
|
|
|
|
|
function tocarCampainha() { |
|
|
const codigo = document.getElementById("codigoInput").value.trim(); |
|
|
if (!codigo) return alert("Digite o código da sala!"); |
|
|
ws = new WebSocket(servidor); |
|
|
ws.onopen = () => { |
|
|
ws.send(JSON.stringify({ sala: codigo, acao: "tocar" })); |
|
|
document.getElementById("statusVisitante").textContent = "Campainha enviada!"; |
|
|
}; |
|
|
} |
|
|
|
|
|
function tocarSom() { |
|
|
const som = document.getElementById("som"); |
|
|
som.currentTime = 0; |
|
|
som.play(); |
|
|
document.body.style.background = "#ffe4e4"; |
|
|
setTimeout(() => document.body.style.background = "#f4f4f4", 500); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
