|
<!DOCTYPE html> |
|
<html lang="pt-BR"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Assistente de IA Futurista</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
<style> |
|
@keyframes pulse { |
|
0%, 100% { transform: scale(1); opacity: 1; } |
|
50% { transform: scale(1.05); opacity: 0.8; } |
|
} |
|
|
|
@keyframes float { |
|
0%, 100% { transform: translateY(0); } |
|
50% { transform: translateY(-10px); } |
|
} |
|
|
|
@keyframes rotate { |
|
0% { transform: rotate(0deg); } |
|
100% { transform: rotate(360deg); } |
|
} |
|
|
|
@keyframes wave { |
|
0% { transform: scaleY(1); } |
|
50% { transform: scaleY(1.5); } |
|
100% { transform: scaleY(1); } |
|
} |
|
|
|
.avatar-pulse { |
|
animation: pulse 3s infinite; |
|
} |
|
|
|
.avatar-float { |
|
animation: float 6s ease-in-out infinite; |
|
} |
|
|
|
.ring-rotate { |
|
animation: rotate 20s linear infinite; |
|
} |
|
|
|
.wave-animation { |
|
animation: wave 0.5s ease infinite; |
|
} |
|
|
|
.glow { |
|
box-shadow: 0 0 20px 5px rgba(100, 149, 237, 0.7); |
|
} |
|
|
|
.glow-blue { |
|
box-shadow: 0 0 30px 10px rgba(65, 105, 225, 0.5); |
|
} |
|
|
|
.glow-purple { |
|
box-shadow: 0 0 30px 10px rgba(147, 112, 219, 0.5); |
|
} |
|
|
|
.particle { |
|
position: absolute; |
|
background-color: rgba(100, 149, 237, 0.7); |
|
border-radius: 50%; |
|
pointer-events: none; |
|
} |
|
|
|
.typing-indicator span { |
|
display: inline-block; |
|
width: 8px; |
|
height: 8px; |
|
background-color: #60a5fa; |
|
border-radius: 50%; |
|
margin: 0 2px; |
|
animation: bounce 1.4s infinite ease-in-out; |
|
} |
|
|
|
.typing-indicator span:nth-child(2) { |
|
animation-delay: 0.2s; |
|
} |
|
|
|
.typing-indicator span:nth-child(3) { |
|
animation-delay: 0.4s; |
|
} |
|
|
|
@keyframes bounce { |
|
0%, 60%, 100% { transform: translateY(0); } |
|
30% { transform: translateY(-10px); } |
|
} |
|
|
|
.message-transition { |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.neon-text { |
|
text-shadow: 0 0 5px #60a5fa, 0 0 10px #60a5fa; |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-gray-900 text-white min-h-screen flex flex-col overflow-hidden"> |
|
<header class="p-4 flex justify-between items-center bg-gray-800 bg-opacity-50"> |
|
<h1 class="text-2xl font-bold neon-text">Assistente de IA</h1> |
|
<div class="flex space-x-4"> |
|
<button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-700 transition"> |
|
<i class="fas fa-moon"></i> |
|
</button> |
|
<button id="settings-btn" class="p-2 rounded-full hover:bg-gray-700 transition"> |
|
<i class="fas fa-cog"></i> |
|
</button> |
|
</div> |
|
</header> |
|
|
|
<main class="flex-grow flex flex-col items-center justify-center p-4 relative"> |
|
|
|
<div id="avatar-container" class="relative w-64 h-64 flex items-center justify-center mb-8 avatar-float"> |
|
|
|
<div class="absolute w-full h-full rounded-full border-2 border-blue-500 border-opacity-30 ring-rotate"></div> |
|
|
|
|
|
<div class="absolute w-3/4 h-3/4 rounded-full border-2 border-purple-500 border-opacity-30 ring-rotate" style="animation-direction: reverse;"></div> |
|
|
|
|
|
<div class="absolute w-1/2 h-1/2 rounded-full border-2 border-blue-400 border-opacity-50 ring-rotate" style="animation-duration: 15s;"></div> |
|
|
|
|
|
<div id="avatar-core" class="w-32 h-32 rounded-full bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center avatar-pulse glow"> |
|
<div class="w-24 h-24 rounded-full bg-blue-700 flex items-center justify-center"> |
|
<div class="w-16 h-16 rounded-full bg-blue-800 flex items-center justify-center"> |
|
<div class="w-8 h-8 rounded-full bg-blue-900"></div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div id="response-container" class="bg-gray-800 bg-opacity-70 rounded-lg p-4 max-w-2xl w-full min-h-32 mb-8 border border-gray-700 transition-all duration-300"> |
|
<div id="response-text" class="text-center"> |
|
<p class="text-gray-300">Olá! Eu sou seu assistente de IA. Como posso te ajudar hoje?</p> |
|
</div> |
|
|
|
|
|
<div id="typing-indicator" class="hidden mt-4 flex justify-center"> |
|
<div class="typing-indicator"> |
|
<span></span> |
|
<span></span> |
|
<span></span> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="wave-visualization" class="hidden h-16 w-full max-w-md flex items-end justify-center space-x-1 mb-4"> |
|
<div class="w-2 h-4 bg-blue-400 rounded-t wave-animation" style="animation-delay: 0s;"></div> |
|
<div class="w-2 h-6 bg-blue-400 rounded-t wave-animation" style="animation-delay: 0.1s;"></div> |
|
<div class="w-2 h-8 bg-blue-400 rounded-t wave-animation" style="animation-delay: 0.2s;"></div> |
|
<div class="w-2 h-10 bg-blue-400 rounded-t wave-animation" style="animation-delay: 0.3s;"></div> |
|
<div class="w-2 h-8 bg-blue-400 rounded-t wave-animation" style="animation-delay: 0.4s;"></div> |
|
<div class="w-2 h-6 bg-blue-400 rounded-t wave-animation" style="animation-delay: 0.5s;"></div> |
|
<div class="w-2 h-4 bg-blue-400 rounded-t wave-animation" style="animation-delay: 0.6s;"></div> |
|
</div> |
|
</main> |
|
|
|
|
|
<div class="p-4 bg-gray-800 bg-opacity-50 border-t border-gray-700"> |
|
<div class="max-w-3xl mx-auto flex items-center space-x-2"> |
|
<button id="voice-btn" class="p-3 rounded-full bg-blue-600 hover:bg-blue-700 transition"> |
|
<i class="fas fa-microphone"></i> |
|
</button> |
|
|
|
<div class="flex-grow relative"> |
|
<input id="user-input" type="text" placeholder="Digite sua mensagem..." |
|
class="w-full bg-gray-700 rounded-full py-3 px-4 pr-12 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
|
<button id="send-btn" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white"> |
|
<i class="fas fa-paper-plane"></i> |
|
</button> |
|
</div> |
|
|
|
<button id="file-btn" class="p-3 rounded-full bg-gray-700 hover:bg-gray-600 transition"> |
|
<i class="fas fa-paperclip"></i> |
|
</button> |
|
</div> |
|
|
|
<div id="voice-status" class="text-center mt-2 text-sm text-blue-400 hidden"> |
|
<i class="fas fa-circle animate-pulse"></i> Gravando... |
|
</div> |
|
</div> |
|
|
|
|
|
<input type="file" id="file-input" class="hidden"> |
|
|
|
<script> |
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
const avatarCore = document.getElementById('avatar-core'); |
|
const avatarContainer = document.getElementById('avatar-container'); |
|
const userInput = document.getElementById('user-input'); |
|
const sendBtn = document.getElementById('send-btn'); |
|
const voiceBtn = document.getElementById('voice-btn'); |
|
const fileBtn = document.getElementById('file-btn'); |
|
const fileInput = document.getElementById('file-input'); |
|
const responseText = document.getElementById('response-text'); |
|
const typingIndicator = document.getElementById('typing-indicator'); |
|
const waveVisualization = document.getElementById('wave-visualization'); |
|
const voiceStatus = document.getElementById('voice-status'); |
|
const themeToggle = document.getElementById('theme-toggle'); |
|
const responseContainer = document.getElementById('response-container'); |
|
|
|
|
|
let isListening = false; |
|
let isDarkMode = true; |
|
|
|
|
|
themeToggle.addEventListener('click', () => { |
|
isDarkMode = !isDarkMode; |
|
document.body.classList.toggle('bg-gray-100'); |
|
document.body.classList.toggle('text-gray-900'); |
|
document.body.classList.toggle('bg-gray-900'); |
|
document.body.classList.toggle('text-white'); |
|
|
|
themeToggle.innerHTML = isDarkMode ? '<i class="fas fa-moon"></i>' : '<i class="fas fa-sun"></i>'; |
|
}); |
|
|
|
|
|
function createParticles() { |
|
for (let i = 0; i < 20; i++) { |
|
const particle = document.createElement('div'); |
|
particle.classList.add('particle'); |
|
|
|
|
|
const size = Math.random() * 4 + 2; |
|
particle.style.width = `${size}px`; |
|
particle.style.height = `${size}px`; |
|
|
|
|
|
const angle = Math.random() * Math.PI * 2; |
|
const distance = Math.random() * 100 + 50; |
|
const x = Math.cos(angle) * distance; |
|
const y = Math.sin(angle) * distance; |
|
|
|
particle.style.left = `calc(50% + ${x}px)`; |
|
particle.style.top = `calc(50% + ${y}px)`; |
|
|
|
|
|
particle.style.animation = `float ${Math.random() * 6 + 3}s ease-in-out infinite`; |
|
|
|
avatarContainer.appendChild(particle); |
|
} |
|
} |
|
|
|
createParticles(); |
|
|
|
|
|
function pulseAvatar() { |
|
avatarCore.classList.remove('avatar-pulse'); |
|
void avatarCore.offsetWidth; |
|
avatarCore.classList.add('avatar-pulse'); |
|
|
|
|
|
avatarCore.classList.add('glow-blue'); |
|
setTimeout(() => { |
|
avatarCore.classList.remove('glow-blue'); |
|
}, 1000); |
|
} |
|
|
|
|
|
function showTyping() { |
|
typingIndicator.classList.remove('hidden'); |
|
waveVisualization.classList.remove('hidden'); |
|
|
|
|
|
const typingInterval = setInterval(() => { |
|
if (Math.random() > 0.7) { |
|
pulseAvatar(); |
|
} |
|
}, 1000); |
|
|
|
return typingInterval; |
|
} |
|
|
|
|
|
function simulateAIResponse(message) { |
|
|
|
responseText.innerHTML = ''; |
|
|
|
|
|
const typingInterval = showTyping(); |
|
|
|
|
|
setTimeout(() => { |
|
clearInterval(typingInterval); |
|
typingIndicator.classList.add('hidden'); |
|
waveVisualization.classList.add('hidden'); |
|
|
|
|
|
const responses = [ |
|
`Entendi que você disse: "${message}". Como posso te ajudar com isso?`, |
|
`Interessante! "${message}" é um tópico fascinante. O que mais você gostaria de saber?`, |
|
`Ótima pergunta! "${message}" pode ser abordado de várias maneiras. Vamos explorar juntos?`, |
|
`Recebi sua mensagem: "${message}". Estou processando as melhores informações para você.`, |
|
`"${message}" - isso me lembra algo importante. Deixe-me verificar meus conhecimentos...` |
|
]; |
|
|
|
const randomResponse = responses[Math.floor(Math.random() * responses.length)]; |
|
|
|
|
|
let i = 0; |
|
const speed = 30; |
|
|
|
function typeWriter() { |
|
if (i < randomResponse.length) { |
|
responseText.innerHTML += randomResponse.charAt(i); |
|
i++; |
|
|
|
|
|
if (randomResponse.charAt(i) === ' ' || i % 10 === 0) { |
|
if (Math.random() > 0.7) { |
|
pulseAvatar(); |
|
} |
|
} |
|
|
|
setTimeout(typeWriter, speed); |
|
} else { |
|
|
|
pulseAvatar(); |
|
} |
|
} |
|
|
|
typeWriter(); |
|
|
|
|
|
responseContainer.classList.add('glow-purple'); |
|
setTimeout(() => { |
|
responseContainer.classList.remove('glow-purple'); |
|
}, 1000); |
|
|
|
}, 2000 + Math.random() * 2000); |
|
} |
|
|
|
|
|
sendBtn.addEventListener('click', () => { |
|
const message = userInput.value.trim(); |
|
if (message) { |
|
pulseAvatar(); |
|
simulateAIResponse(message); |
|
userInput.value = ''; |
|
} |
|
}); |
|
|
|
|
|
userInput.addEventListener('keypress', (e) => { |
|
if (e.key === 'Enter') { |
|
const message = userInput.value.trim(); |
|
if (message) { |
|
pulseAvatar(); |
|
simulateAIResponse(message); |
|
userInput.value = ''; |
|
} |
|
} |
|
}); |
|
|
|
|
|
voiceBtn.addEventListener('click', () => { |
|
isListening = !isListening; |
|
|
|
if (isListening) { |
|
voiceBtn.classList.remove('bg-blue-600'); |
|
voiceBtn.classList.add('bg-red-600'); |
|
voiceBtn.innerHTML = '<i class="fas fa-microphone-slash"></i>'; |
|
voiceStatus.classList.remove('hidden'); |
|
|
|
|
|
const listenInterval = setInterval(() => { |
|
pulseAvatar(); |
|
}, 800 + Math.random() * 1000); |
|
|
|
|
|
setTimeout(() => { |
|
clearInterval(listenInterval); |
|
voiceBtn.click(); |
|
|
|
|
|
const phrases = [ |
|
"Como posso configurar meu dispositivo?", |
|
"Quais são as notícias mais recentes?", |
|
"Me explique sobre inteligência artificial", |
|
"Qual é a previsão do tempo para amanhã?", |
|
"Como fazer um bolo de chocolate?" |
|
]; |
|
|
|
const randomPhrase = phrases[Math.floor(Math.random() * phrases.length)]; |
|
simulateAIResponse(randomPhrase); |
|
}, 3000 + Math.random() * 4000); |
|
|
|
} else { |
|
voiceBtn.classList.add('bg-blue-600'); |
|
voiceBtn.classList.remove('bg-red-600'); |
|
voiceBtn.innerHTML = '<i class="fas fa-microphone"></i>'; |
|
voiceStatus.classList.add('hidden'); |
|
} |
|
}); |
|
|
|
|
|
fileBtn.addEventListener('click', () => { |
|
fileInput.click(); |
|
}); |
|
|
|
fileInput.addEventListener('change', (e) => { |
|
if (fileInput.files.length > 0) { |
|
pulseAvatar(); |
|
const fileName = fileInput.files[0].name; |
|
simulateAIResponse(`Recebi o arquivo: ${fileName}. O que você gostaria que eu faça com ele?`); |
|
} |
|
}); |
|
|
|
|
|
setTimeout(() => { |
|
pulseAvatar(); |
|
}, 1000); |
|
}); |
|
</script> |
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=n-gusion/nova" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
</html> |
