|
|
<!DOCTYPE html> |
|
|
<html lang="pt-br"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Fraddy Assistente - Romanio Network</title> |
|
|
<style> |
|
|
|
|
|
body { |
|
|
background-color: #000; |
|
|
color: white; |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
height: 100vh; |
|
|
margin: 0; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
|
|
|
#top-bar { |
|
|
position: fixed; |
|
|
top: 30px; |
|
|
width: 90%; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
z-index: 100; |
|
|
} |
|
|
|
|
|
.info-pill { |
|
|
background: rgba(40, 132, 255, 0.1); |
|
|
border: 1px solid rgba(40, 132, 255, 0.3); |
|
|
padding: 8px 20px; |
|
|
border-radius: 20px; |
|
|
font-size: 14px; |
|
|
color: #2884ff; |
|
|
backdrop-filter: blur(10px); |
|
|
} |
|
|
|
|
|
|
|
|
.ring { |
|
|
width: 220px; |
|
|
height: 220px; |
|
|
border: 8px solid #2884ff; |
|
|
border-radius: 50%; |
|
|
box-shadow: 0 0 60px #2884ff, inset 0 0 30px #2884ff; |
|
|
animation: pulse 2s infinite; |
|
|
margin-bottom: 40px; |
|
|
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); opacity: 0.8; box-shadow: 0 0 40px #2884ff; } |
|
|
50% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 80px #2884ff; } |
|
|
100% { transform: scale(1); opacity: 0.8; box-shadow: 0 0 40px #2884ff; } |
|
|
} |
|
|
|
|
|
.status-title { |
|
|
font-size: 42px; |
|
|
font-weight: 200; |
|
|
margin-bottom: 12px; |
|
|
letter-spacing: 5px; |
|
|
text-transform: uppercase; |
|
|
} |
|
|
|
|
|
.suggestion { |
|
|
color: #444; |
|
|
font-size: 18px; |
|
|
margin-bottom: 60px; |
|
|
text-align: center; |
|
|
font-style: italic; |
|
|
max-width: 80%; |
|
|
} |
|
|
|
|
|
|
|
|
#response-text { |
|
|
text-align: center; |
|
|
padding: 0 50px; |
|
|
color: #2884ff; |
|
|
font-size: 22px; |
|
|
margin-bottom: 150px; |
|
|
max-height: 250px; |
|
|
overflow-y: auto; |
|
|
line-height: 1.6; |
|
|
text-shadow: 0 0 15px rgba(40, 132, 255, 0.4); |
|
|
} |
|
|
|
|
|
|
|
|
.input-container { |
|
|
position: absolute; |
|
|
bottom: 60px; |
|
|
width: 90%; |
|
|
max-width: 900px; |
|
|
display: flex; |
|
|
background: rgba(10, 10, 10, 0.98); |
|
|
padding: 22px; |
|
|
border: 1px solid #222; |
|
|
align-items: center; |
|
|
backdrop-filter: blur(20px); |
|
|
box-shadow: 0 -15px 50px rgba(0,0,0,0.8); |
|
|
} |
|
|
|
|
|
input { |
|
|
background: transparent; |
|
|
border: none; |
|
|
color: white; |
|
|
flex: 1; |
|
|
font-size: 20px; |
|
|
outline: none; |
|
|
padding-left: 25px; |
|
|
} |
|
|
|
|
|
input::placeholder { color: #333; } |
|
|
|
|
|
.btn-icon { |
|
|
color: #555; |
|
|
font-size: 32px; |
|
|
cursor: pointer; |
|
|
margin-left: 30px; |
|
|
transition: color 0.3s, transform 0.2s; |
|
|
} |
|
|
|
|
|
.btn-icon:hover { color: #2884ff; transform: scale(1.15); } |
|
|
|
|
|
#notify-btn { |
|
|
background: none; border: 1px solid #2884ff; color: #2884ff; |
|
|
padding: 5px 15px; cursor: pointer; border-radius: 20px; font-size: 12px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div id="top-bar"> |
|
|
<div class="info-pill"><span id="clock">00:00:00</span></div> |
|
|
<button id="notify-btn" onclick="ativarNotificacoes()">ATIVAR ALERTAS</button> |
|
|
<div class="info-pill"><span id="weather">Recife: --°C</span></div> |
|
|
</div> |
|
|
|
|
|
<div class="ring" id="ring" onclick="ouvir()"></div> |
|
|
<div class="status-title">Fraddy</div> |
|
|
<div class="suggestion" id="status-label">"O que é a Romanio Network?" ou "Vamos jogar?"</div> |
|
|
|
|
|
<div id="response-text">Pronta para agir, Guilherme.</div> |
|
|
|
|
|
<div class="input-container"> |
|
|
<input type="text" id="userInput" placeholder="O que deseja agora?" onkeypress="handleEnter(event)"> |
|
|
<span class="btn-icon" onclick="ouvir()" title="Falar">🎤</span> |
|
|
<span class="btn-icon" onclick="enviarComando()" title="Enviar">📩</span> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
function updateTime() { |
|
|
document.getElementById('clock').innerText = new Date().toLocaleTimeString('pt-BR'); |
|
|
} |
|
|
setInterval(updateTime, 1000); |
|
|
|
|
|
async function getWeather() { |
|
|
try { |
|
|
const r = await fetch("https://api.open-meteo.com/v1/forecast?latitude=-8.05&longitude=-34.88¤t_weather=true"); |
|
|
const d = await r.json(); |
|
|
document.getElementById('weather').innerText = `Recife: ${d.current_weather.temperature}°C`; |
|
|
} catch(e) { document.getElementById('weather').innerText = "Clima Offline"; } |
|
|
} |
|
|
getWeather(); |
|
|
|
|
|
|
|
|
function falar(texto) { |
|
|
window.speechSynthesis.cancel(); |
|
|
const msg = new SpeechSynthesisUtterance(texto); |
|
|
msg.lang = 'pt-BR'; |
|
|
msg.rate = 1.1; |
|
|
window.speechSynthesis.speak(msg); |
|
|
} |
|
|
|
|
|
function ativarNotificacoes() { |
|
|
Notification.requestPermission(); |
|
|
} |
|
|
|
|
|
|
|
|
const games = { |
|
|
"adivinhar": () => { |
|
|
const n = Math.floor(Math.random() * 10) + 1; |
|
|
sessionStorage.setItem("target_num", n); |
|
|
return "Pensei em um número de 1 a 10. Qual é?"; |
|
|
}, |
|
|
"par ou impar": () => "Ok! Escolha par ou ímpar e diga seu número.", |
|
|
"pedra papel tesoura": () => "Pedra, papel ou tesoura? Escolha agora!", |
|
|
"charada": () => { |
|
|
const ch = [["O que tem dentes mas não come?", "O pente"], ["O que voa sem ter asas?", "O tempo"]]; |
|
|
const selected = ch[Math.floor(Math.random()*ch.length)]; |
|
|
return selected[0] + " ... A resposta é: " + selected[1]; |
|
|
}, |
|
|
"dado": () => `O dado girou e deu: ${Math.floor(Math.random()*6)+1}`, |
|
|
"moeda": () => `A moeda caiu em: ${Math.random() > 0.5 ? "Cara" : "Coroa"}`, |
|
|
"contar": () => "Contando: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10!", |
|
|
"repetir": () => "Eu vou repetir tudo o que você disser a partir de agora!" |
|
|
}; |
|
|
|
|
|
|
|
|
async function buscarWikipedia(frase) { |
|
|
let termo = frase.toLowerCase().replace(/o que é|quem foi|quem é|pesquisar sobre|defina/g, "").trim(); |
|
|
termo = termo.charAt(0).toUpperCase() + termo.slice(1); |
|
|
try { |
|
|
const r = await fetch(`https://pt.wikipedia.org/api/rest_v1/page/summary/${encodeURIComponent(termo)}`); |
|
|
const d = await r.json(); |
|
|
return d.extract || "Não encontrei nada sobre isso."; |
|
|
} catch(e) { return "Erro na Wikipedia."; } |
|
|
} |
|
|
|
|
|
|
|
|
const Recognition = window.webkitSpeechRecognition || window.SpeechRecognition; |
|
|
if (Recognition) { |
|
|
const rec = new Recognition(); |
|
|
rec.lang = 'pt-BR'; |
|
|
rec.onresult = (e) => { document.getElementById('userInput').value = e.results[0][0].transcript; enviarComando(); }; |
|
|
rec.onstart = () => { document.getElementById('ring').style.borderColor = "#ff28e2"; }; |
|
|
rec.onend = () => { document.getElementById('ring').style.borderColor = "#2884ff"; }; |
|
|
function ouvir() { rec.start(); } |
|
|
} |
|
|
|
|
|
|
|
|
async function enviarComando() { |
|
|
const input = document.getElementById('userInput'); |
|
|
const responseDisplay = document.getElementById('response-text'); |
|
|
const ring = document.getElementById('ring'); |
|
|
const prompt = input.value; |
|
|
const promptLower = prompt.toLowerCase(); |
|
|
input.value = ""; |
|
|
ring.style.animationDuration = "0.4s"; |
|
|
|
|
|
let resposta = ""; |
|
|
|
|
|
if (promptLower.includes("hora")) { |
|
|
resposta = `Agora são ${new Date().toLocaleTimeString('pt-BR')}.`; |
|
|
} else if (promptLower.includes("clima") || promptLower.includes("tempo")) { |
|
|
resposta = `No momento, o clima é de ${document.getElementById('weather').innerText}.`; |
|
|
} else if (games[promptLower]) { |
|
|
resposta = games[promptLower](); |
|
|
} else if (promptLower.includes("o que é") || promptLower.includes("quem foi")) { |
|
|
resposta = await buscarWikipedia(prompt); |
|
|
} else { |
|
|
try { |
|
|
const r = await fetch("https://guilhermemfbastos-romanionetwork.hf.space/v1/chat", { |
|
|
method: "POST", |
|
|
headers: { "Authorization": "Bearer Rmn_token_22122006", "Content-Type": "application/json" }, |
|
|
body: JSON.stringify({ prompt: prompt, max_tokens: 512 }) |
|
|
}); |
|
|
const d = await r.json(); |
|
|
resposta = d.response; |
|
|
} catch(e) { resposta = "Conexão perdida com a Romanio Network."; } |
|
|
} |
|
|
|
|
|
responseDisplay.innerText = resposta; |
|
|
falar(resposta); |
|
|
ring.style.animationDuration = "2s"; |
|
|
} |
|
|
|
|
|
function handleEnter(e) { if (e.key === 'Enter') enviarComando(); } |
|
|
</script> |
|
|
</body> |
|
|
</html> |
