Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>WhatsApp Logger</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> | |
| .wave-bg { | |
| background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); | |
| } | |
| .recording-pulse { | |
| animation: pulse 1.5s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="wave-bg text-white p-4 shadow-lg"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fab fa-whatsapp text-3xl"></i> | |
| <h1 class="text-xl font-bold">WhatsApp Logger</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="settingsBtn" class="text-white hover:text-gray-200"> | |
| <i class="fas fa-cog text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-grow container mx-auto p-4"> | |
| <!-- Status Card --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h2 class="text-lg font-semibold text-gray-800">Status do Serviço</h2> | |
| <p id="statusText" class="text-gray-600">Serviço não iniciado</p> | |
| </div> | |
| <div id="statusIndicator" class="h-4 w-4 bg-gray-400 rounded-full"></div> | |
| </div> | |
| <div class="mt-4"> | |
| <button id="toggleServiceBtn" class="w-full py-3 px-4 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition duration-200 flex items-center justify-center space-x-2"> | |
| <i class="fas fa-play"></i> | |
| <span>Iniciar Serviço</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Statistics --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <div class="bg-white rounded-xl shadow-md p-4"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="p-3 bg-blue-100 rounded-full text-blue-600"> | |
| <i class="fas fa-comments"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 text-sm">Conversas</p> | |
| <p id="conversationsCount" class="text-xl font-bold">0</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-4"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="p-3 bg-green-100 rounded-full text-green-600"> | |
| <i class="fas fa-file-alt"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 text-sm">Arquivos</p> | |
| <p id="filesCount" class="text-xl font-bold">0</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-4"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="p-3 bg-purple-100 rounded-full text-purple-600"> | |
| <i class="fas fa-database"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 text-sm">Armazenamento</p> | |
| <p id="storageCount" class="text-xl font-bold">0 MB</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Logs --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Registros Recentes</h2> | |
| <button class="text-green-600 hover:text-green-800 text-sm font-medium"> | |
| Ver todos | |
| </button> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="log-item p-3 border-b border-gray-100"> | |
| <div class="flex justify-between"> | |
| <p class="text-gray-700">Serviço iniciado</p> | |
| <p class="text-gray-500 text-sm">Agora mesmo</p> | |
| </div> | |
| </div> | |
| <div class="log-item p-3 border-b border-gray-100"> | |
| <div class="flex justify-between"> | |
| <p class="text-gray-700">Permissões concedidas</p> | |
| <p class="text-gray-500 text-sm">2 minutos atrás</p> | |
| </div> | |
| </div> | |
| <div class="log-item p-3 border-b border-gray-100"> | |
| <div class="flex justify-between"> | |
| <p class="text-gray-700">Pasta de destino criada</p> | |
| <p class="text-gray-500 text-sm">5 minutos atrás</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white p-4 text-center text-sm"> | |
| <p>© 2023 WhatsApp Logger. Este aplicativo requer permissões especiais para funcionar corretamente.</p> | |
| <p class="mt-1 text-gray-400">Não nos responsabilizamos pelo uso indevido desta ferramenta.</p> | |
| </footer> | |
| </div> | |
| <!-- Settings Modal --> | |
| <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50"> | |
| <div class="bg-white rounded-xl p-6 w-full max-w-md mx-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold text-gray-800">Configurações</h3> | |
| <button id="closeSettingsBtn" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Pasta de destino</label> | |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500" value="/WhatsAppLogger/Conversas"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Formato de arquivo</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"> | |
| <option>TXT</option> | |
| <option>JSON</option> | |
| <option>CSV</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="autoStart" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded"> | |
| <label for="autoStart" class="ml-2 block text-gray-700">Iniciar automaticamente</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="notifications" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded" checked> | |
| <label for="notifications" class="ml-2 block text-gray-700">Notificações</label> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-end space-x-3"> | |
| <button id="saveSettingsBtn" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition duration-200"> | |
| Salvar | |
| </button> | |
| <button id="cancelSettingsBtn" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-100 transition duration-200"> | |
| Cancelar | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Permissions Modal --> | |
| <div id="permissionsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50"> | |
| <div class="bg-white rounded-xl p-6 w-full max-w-md mx-4"> | |
| <div class="text-center mb-4"> | |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100"> | |
| <i class="fas fa-exclamation-triangle text-red-600"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mt-3">Permissões Necessárias</h3> | |
| <div class="mt-2 text-sm text-gray-500"> | |
| <p>Este aplicativo precisa das seguintes permissões para funcionar:</p> | |
| <ul class="list-disc list-inside text-left mt-2 space-y-1"> | |
| <li>Acesso à notificações</li> | |
| <li>Acesso ao armazenamento</li> | |
| <li>Execução em segundo plano</li> | |
| <li>Acesso à acessibilidade (para captura de tela)</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-5 flex justify-center space-x-3"> | |
| <button id="grantPermissionsBtn" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition duration-200"> | |
| Conceder Permissões | |
| </button> | |
| <button id="denyPermissionsBtn" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-100 transition duration-200"> | |
| Negar | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // DOM Elements | |
| const toggleServiceBtn = document.getElementById('toggleServiceBtn'); | |
| const statusText = document.getElementById('statusText'); | |
| const statusIndicator = document.getElementById('statusIndicator'); | |
| const settingsBtn = document.getElementById('settingsBtn'); | |
| const closeSettingsBtn = document.getElementById('closeSettingsBtn'); | |
| const settingsModal = document.getElementById('settingsModal'); | |
| const permissionsModal = document.getElementById('permissionsModal'); | |
| const grantPermissionsBtn = document.getElementById('grantPermissionsBtn'); | |
| const denyPermissionsBtn = document.getElementById('denyPermissionsBtn'); | |
| // State | |
| let isServiceRunning = false; | |
| let conversationsCount = 0; | |
| let filesCount = 0; | |
| let storageUsed = 0; | |
| // Event Listeners | |
| toggleServiceBtn.addEventListener('click', toggleService); | |
| settingsBtn.addEventListener('click', () => settingsModal.classList.remove('hidden')); | |
| closeSettingsBtn.addEventListener('click', () => settingsModal.classList.add('hidden')); | |
| grantPermissionsBtn.addEventListener('click', grantPermissions); | |
| denyPermissionsBtn.addEventListener('click', () => permissionsModal.classList.add('hidden')); | |
| // Functions | |
| function toggleService() { | |
| if (!isServiceRunning) { | |
| // Check if we have permissions first | |
| permissionsModal.classList.remove('hidden'); | |
| } else { | |
| stopService(); | |
| } | |
| } | |
| function grantPermissions() { | |
| permissionsModal.classList.add('hidden'); | |
| startService(); | |
| } | |
| function startService() { | |
| isServiceRunning = true; | |
| statusText.textContent = "Serviço em execução"; | |
| statusIndicator.classList.remove('bg-gray-400'); | |
| statusIndicator.classList.add('bg-green-500', 'recording-pulse'); | |
| toggleServiceBtn.innerHTML = '<i class="fas fa-stop"></i><span>Parar Serviço</span>'; | |
| toggleServiceBtn.classList.remove('bg-green-600', 'hover:bg-green-700'); | |
| toggleServiceBtn.classList.add('bg-red-600', 'hover:bg-red-700'); | |
| // Simulate logging activity | |
| simulateActivity(); | |
| } | |
| function stopService() { | |
| isServiceRunning = false; | |
| statusText.textContent = "Serviço parado"; | |
| statusIndicator.classList.remove('bg-green-500', 'recording-pulse'); | |
| statusIndicator.classList.add('bg-gray-400'); | |
| toggleServiceBtn.innerHTML = '<i class="fas fa-play"></i><span>Iniciar Serviço</span>'; | |
| toggleServiceBtn.classList.remove('bg-red-600', 'hover:bg-red-700'); | |
| toggleServiceBtn.classList.add('bg-green-600', 'hover:bg-green-700'); | |
| // Clear intervals | |
| clearInterval(activityInterval); | |
| } | |
| function simulateActivity() { | |
| // Update counts randomly | |
| activityInterval = setInterval(() => { | |
| conversationsCount += Math.floor(Math.random() * 3); | |
| filesCount += Math.floor(Math.random() * 2); | |
| storageUsed += Math.floor(Math.random() * 5); | |
| document.getElementById('conversationsCount').textContent = conversationsCount; | |
| document.getElementById('filesCount').textContent = filesCount; | |
| document.getElementById('storageCount').textContent = storageUsed + ' MB'; | |
| }, 3000); | |
| } | |
| // Initialize | |
| let activityInterval; | |
| </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=danielmozele/whats" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |