|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>WhatsBlast Pro - Mass Messaging System</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> |
|
|
.particles { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: -1; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.particle { |
|
|
position: absolute; |
|
|
background: rgba(255, 255, 255, 0.5); |
|
|
border-radius: 50%; |
|
|
animation: float-up 15s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes float-up { |
|
|
0% { |
|
|
transform: translateY(100vh) scale(0); |
|
|
opacity: 0; |
|
|
} |
|
|
10% { |
|
|
opacity: 1; |
|
|
} |
|
|
90% { |
|
|
opacity: 1; |
|
|
} |
|
|
100% { |
|
|
transform: translateY(-10vh) scale(1); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0%, 100% { transform: translateY(0); } |
|
|
50% { transform: translateY(-20px); } |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0%, 100% { opacity: 1; } |
|
|
50% { opacity: 0.5; } |
|
|
} |
|
|
|
|
|
@keyframes gradientFlow { |
|
|
0% { background-position: 0% 50%; } |
|
|
50% { background-position: 100% 50%; } |
|
|
100% { background-position: 0% 50%; } |
|
|
} |
|
|
|
|
|
@keyframes reveal { |
|
|
0% { opacity: 0; transform: scale(0.8); } |
|
|
100% { opacity: 1; transform: scale(1); } |
|
|
} |
|
|
|
|
|
@keyframes typing { |
|
|
from { width: 0 } |
|
|
to { width: 100% } |
|
|
} |
|
|
|
|
|
@keyframes blink-caret { |
|
|
from, to { border-color: transparent } |
|
|
50% { border-color: #4ade80 } |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(-45deg, #1e3a8a, #3b82f6, #10b981, #06b6d4); |
|
|
background-size: 400% 400%; |
|
|
animation: gradientFlow 15s ease infinite; |
|
|
} |
|
|
|
|
|
.typing-animation { |
|
|
overflow: hidden; |
|
|
border-right: .15em solid #4ade80; |
|
|
white-space: nowrap; |
|
|
letter-spacing: .15em; |
|
|
animation: |
|
|
typing 3.5s steps(40, end), |
|
|
blink-caret .75s step-end infinite; |
|
|
} |
|
|
|
|
|
.message-bubble { |
|
|
position: relative; |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
backdrop-filter: blur(10px); |
|
|
border-radius: 1.5rem; |
|
|
padding: 1rem; |
|
|
margin: 0.5rem; |
|
|
max-width: 70%; |
|
|
animation: float 3s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
.message-bubble::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -10px; |
|
|
left: 20px; |
|
|
border-width: 10px 10px 0; |
|
|
border-style: solid; |
|
|
border-color: rgba(255, 255, 255, 0.1) transparent; |
|
|
} |
|
|
|
|
|
.reveal-item { |
|
|
opacity: 0; |
|
|
animation: reveal 0.5s ease-out forwards; |
|
|
} |
|
|
|
|
|
.delay-1 { animation-delay: 1s; } |
|
|
.delay-2 { animation-delay: 2s; } |
|
|
.delay-3 { animation-delay: 3s; } |
|
|
.delay-4 { animation-delay: 4s; } |
|
|
.delay-5 { animation-delay: 5s; } |
|
|
.delay-6 { animation-delay: 6s; } |
|
|
.delay-7 { animation-delay: 7s; } |
|
|
.delay-8 { animation-delay: 8s; } |
|
|
.delay-9 { animation-delay: 9s; } |
|
|
.delay-10 { animation-delay: 10s; } |
|
|
|
|
|
.glow { |
|
|
box-shadow: 0 0 15px rgba(59, 130, 246, 0.7); |
|
|
} |
|
|
|
|
|
.glow:hover { |
|
|
box-shadow: 0 0 25px rgba(59, 130, 246, 0.9); |
|
|
} |
|
|
|
|
|
.input-highlight { |
|
|
transition: all 0.3s ease; |
|
|
border-bottom: 2px solid rgba(255, 255, 255, 0.3); |
|
|
} |
|
|
|
|
|
.input-highlight:focus { |
|
|
border-bottom: 2px solid #3b82f6; |
|
|
} |
|
|
|
|
|
|
|
|
.message-item { |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
border-radius: 0.5rem; |
|
|
padding: 0.75rem 1rem; |
|
|
font-family: monospace; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.message-item.success { |
|
|
border-left: 4px solid #10B981; |
|
|
background: rgba(16, 185, 129, 0.1); |
|
|
} |
|
|
|
|
|
.message-item.error { |
|
|
border-left: 4px solid #EF4444; |
|
|
background: rgba(239, 68, 68, 0.1); |
|
|
} |
|
|
|
|
|
.message-item.pending { |
|
|
border-left: 4px solid #3B82F6; |
|
|
background: rgba(59, 130, 246, 0.1); |
|
|
} |
|
|
|
|
|
.status-icon { |
|
|
font-size: 0.9rem; |
|
|
margin-left: 0.5rem; |
|
|
} |
|
|
|
|
|
.success .status-icon { |
|
|
color: #10B981; |
|
|
} |
|
|
|
|
|
.error .status-icon { |
|
|
color: #EF4444; |
|
|
} |
|
|
|
|
|
.pending .status-icon { |
|
|
color: #3B82F6; |
|
|
animation: pulse 1.5s infinite; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="gradient-bg min-h-screen flex items-center justify-center p-4 text-white overflow-hidden"> |
|
|
<div class="particles" id="particles"></div> |
|
|
|
|
|
<div id="loading-screen" class="fixed inset-0 flex flex-col items-center justify-center bg-black bg-opacity-90 z-50 transition-opacity duration-1000"> |
|
|
<div class="flex space-x-4 mb-8 relative"> |
|
|
<div class="w-16 h-16 bg-blue-500 rounded-full animate-pulse delay-1 shadow-lg shadow-blue-500/50" style="animation-delay: 0.2s"></div> |
|
|
<div class="w-16 h-16 bg-green-500 rounded-full animate-pulse delay-2 shadow-lg shadow-green-500/50" style="animation-delay: 0.4s"></div> |
|
|
<div class="w-16 h-16 bg-cyan-500 rounded-full animate-pulse delay-3 shadow-lg shadow-cyan-500/50" style="animation-delay: 0.6s"></div> |
|
|
<div class="absolute -bottom-6 left-0 right-0 text-center text-sm text-gray-300 reveal-item delay-3"> |
|
|
Inicializando sistema... |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-4 typing-animation">WhatsBlast Pro</h1> |
|
|
|
|
|
<div class="w-full max-w-md mt-8 space-y-4"> |
|
|
<div class="message-bubble delay-4"> |
|
|
<p class="typing-text" data-text="Iniciando conexão segura..."></p> |
|
|
</div> |
|
|
<div class="message-bubble delay-5 ml-auto" style="animation-delay: 2s"> |
|
|
<p class="typing-text" data-text="Carregando módulos de campanha..."></p> |
|
|
</div> |
|
|
<div class="message-bubble delay-6"> |
|
|
<p class="typing-text" data-text="Preparando interface de disparos em massa..."></p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="w-full max-w-md mt-8 h-2 bg-gray-700 rounded-full overflow-hidden"> |
|
|
<div id="progress-bar" class="h-full bg-gradient-to-r from-blue-500 to-green-500 transition-all duration-10000" style="width: 0%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="login-container" class="hidden opacity-0 w-full max-w-md backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 rounded-2xl shadow-2xl overflow-hidden border border-white border-opacity-20 transform transition-all duration-1000"> |
|
|
<div class="p-8"> |
|
|
<div class="flex justify-center mb-8"> |
|
|
<div class="relative"> |
|
|
<div class="w-24 h-24 bg-green-500 rounded-full flex items-center justify-center text-4xl"> |
|
|
<i class="fab fa-whatsapp"></i> |
|
|
</div> |
|
|
<div class="absolute -bottom-2 -right-2 w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-bolt text-white text-sm"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h2 class="text-3xl font-bold text-center mb-2 reveal-item delay-7">Bem-vindo de Volta</h2> |
|
|
<p class="text-center text-gray-300 mb-8 reveal-item delay-7">Acesse seu painel de disparos em massa</p> |
|
|
|
|
|
<form class="space-y-6"> |
|
|
<div class="reveal-item delay-8"> |
|
|
<label class="block text-sm font-medium mb-2">E-mail</label> |
|
|
<div class="relative"> |
|
|
<input type="email" class="w-full bg-white bg-opacity-10 input-highlight rounded-lg py-3 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300" placeholder="seu@email.com"> |
|
|
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> |
|
|
<i class="fas fa-envelope text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="reveal-item delay-9"> |
|
|
<label class="block text-sm font-medium mb-2">Senha</label> |
|
|
<div class="relative"> |
|
|
<input type="password" class="w-full bg-white bg-opacity-10 input-highlight rounded-lg py-3 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300" placeholder="••••••••"> |
|
|
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> |
|
|
<i class="fas fa-lock text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between reveal-item delay-9"> |
|
|
<div class="flex items-center"> |
|
|
<input id="remember-me" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> |
|
|
<label for="remember-me" class="ml-2 block text-sm">Lembrar-me</label> |
|
|
</div> |
|
|
<a href="#" class="text-sm text-blue-300 hover:text-blue-200 transition-colors">Esqueceu a senha?</a> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="w-full bg-gradient-to-r from-blue-500 to-green-500 hover:from-blue-600 hover:to-green-600 text-white font-bold py-3 px-4 rounded-lg transition-all duration-300 transform hover:scale-[1.02] glow hover:shadow-lg hover:shadow-blue-500/30 active:scale-95 reveal-item delay-10 relative overflow-hidden group"> |
|
|
<span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span> |
|
|
<span class="flex items-center justify-center"> |
|
|
<i class="fas fa-sign-in-alt mr-2"></i> Entrar |
|
|
</span> |
|
|
</button> |
|
|
</form> |
|
|
|
|
|
<div class="mt-6 text-center text-sm reveal-item delay-10"> |
|
|
<p>Não tem uma conta? <a href="#" class="text-blue-300 hover:text-blue-200 font-medium transition-colors">Cadastre-se</a></p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-black bg-opacity-20 p-4 text-center text-xs text-gray-400"> |
|
|
<p class="reveal-item delay-10">Conexão segura <i class="fas fa-lock"></i> | Criptografia ponta-a-ponta</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mass-sending-animation" class="hidden fixed inset-0 flex items-center justify-center bg-black bg-opacity-80 z-50"> |
|
|
<div class="w-full max-w-2xl bg-gray-900 bg-opacity-90 rounded-xl p-8 shadow-2xl border border-gray-700"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h3 class="text-xl font-bold text-white">Enviando Mensagens em Massa</h3> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span id="sent-count" class="font-mono text-green-400">0</span> |
|
|
<span class="text-gray-400">/</span> |
|
|
<span id="total-count" class="font-mono text-white">100</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="h-2 bg-gray-700 rounded-full mb-6 overflow-hidden"> |
|
|
<div id="sending-progress" class="h-full bg-gradient-to-r from-blue-500 to-green-500" style="width: 0%"></div> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4 max-h-96 overflow-y-auto pr-2"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="mt-6 flex justify-end"> |
|
|
<button id="cancel-sending" class="px-4 py-2 bg-red-500 hover:bg-red-600 rounded-lg text-white font-medium transition-colors"> |
|
|
Cancelar Envio |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
function createParticles() { |
|
|
const container = document.getElementById('particles'); |
|
|
const particleCount = 30; |
|
|
|
|
|
for (let i = 0; i < particleCount; i++) { |
|
|
const particle = document.createElement('div'); |
|
|
particle.classList.add('particle'); |
|
|
|
|
|
|
|
|
const size = Math.random() * 5 + 2; |
|
|
const posX = Math.random() * 100; |
|
|
const delay = Math.random() * 15; |
|
|
const duration = 10 + Math.random() * 20; |
|
|
|
|
|
particle.style.width = `${size}px`; |
|
|
particle.style.height = `${size}px`; |
|
|
particle.style.left = `${posX}%`; |
|
|
particle.style.animationDelay = `${delay}s`; |
|
|
particle.style.animationDuration = `${duration}s`; |
|
|
|
|
|
container.appendChild(particle); |
|
|
} |
|
|
} |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
createParticles(); |
|
|
|
|
|
|
|
|
const progressBar = document.getElementById('progress-bar'); |
|
|
progressBar.style.width = '100%'; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
const loadingScreen = document.getElementById('loading-screen'); |
|
|
const loginContainer = document.getElementById('login-container'); |
|
|
|
|
|
loadingScreen.style.opacity = '0'; |
|
|
loginContainer.classList.remove('hidden'); |
|
|
|
|
|
setTimeout(() => { |
|
|
loadingScreen.style.display = 'none'; |
|
|
loginContainer.style.opacity = '1'; |
|
|
}, 1000); |
|
|
|
|
|
}, 10000); |
|
|
|
|
|
|
|
|
const typingTexts = document.querySelectorAll('.typing-text'); |
|
|
typingTexts.forEach((el, index) => { |
|
|
setTimeout(() => { |
|
|
const text = el.getAttribute('data-text'); |
|
|
let i = 0; |
|
|
const typing = setInterval(() => { |
|
|
if (i < text.length) { |
|
|
el.textContent += text.charAt(i); |
|
|
i++; |
|
|
} else { |
|
|
clearInterval(typing); |
|
|
} |
|
|
}, 50); |
|
|
}, 1000 + (index * 2000)); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function showMassSendingAnimation(total) { |
|
|
const container = document.getElementById('mass-sending-animation'); |
|
|
const messageList = container.querySelector('.space-y-4'); |
|
|
const totalCount = document.getElementById('total-count'); |
|
|
const cancelBtn = document.getElementById('cancel-sending'); |
|
|
|
|
|
|
|
|
messageList.innerHTML = ''; |
|
|
document.getElementById('sending-progress').style.width = '0%'; |
|
|
document.getElementById('sent-count').textContent = '0'; |
|
|
totalCount.textContent = total; |
|
|
|
|
|
|
|
|
for (let i = 0; i < total; i++) { |
|
|
const item = document.createElement('div'); |
|
|
item.className = 'message-item pending'; |
|
|
item.innerHTML = ` |
|
|
<span>+55 9XXXX-XXXX</span> |
|
|
<span class="status-icon"><i class="fas fa-circle-notch fa-spin"></i></span> |
|
|
`; |
|
|
messageList.appendChild(item); |
|
|
} |
|
|
|
|
|
|
|
|
container.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
let sent = 0; |
|
|
const interval = setInterval(() => { |
|
|
if (sent >= total) { |
|
|
clearInterval(interval); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
const isSuccess = Math.random() > 0.1; |
|
|
|
|
|
|
|
|
const items = messageList.querySelectorAll('.message-item'); |
|
|
const currentItem = items[sent]; |
|
|
|
|
|
currentItem.classList.remove('pending'); |
|
|
currentItem.classList.add(isSuccess ? 'success' : 'error'); |
|
|
|
|
|
currentItem.querySelector('.status-icon').innerHTML = |
|
|
isSuccess ? '<i class="fas fa-check"></i>' : '<i class="fas fa-times"></i>'; |
|
|
|
|
|
|
|
|
sent++; |
|
|
document.getElementById('sent-count').textContent = sent; |
|
|
document.getElementById('sending-progress').style.width = `${(sent / total) * 100}%`; |
|
|
|
|
|
}, 200); |
|
|
|
|
|
|
|
|
cancelBtn.onclick = () => { |
|
|
clearInterval(interval); |
|
|
container.classList.add('hidden'); |
|
|
}; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
</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=henboff/abudi" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
