Spaces:
Running
Running
| <html lang="en" class="h-full"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>LIFESTYLE - Secure Messaging App</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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f0fdfa', | |
| 100: '#ccfbf1', | |
| 200: '#99f6e4', | |
| 300: '#5eead4', | |
| 400: '#2dd4bf', | |
| 500: '#14b8a6', | |
| 600: '#0d9488', | |
| 700: '#0f766e', | |
| 800: '#115e59', | |
| 900: '#134e4a', | |
| }, | |
| secondary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .chat-bubble { | |
| border-radius: 20px; | |
| max-width: 70%; | |
| word-wrap: break-word; | |
| } | |
| .chat-bubble.sent { | |
| border-bottom-right-radius: 0; | |
| } | |
| .chat-bubble.received { | |
| border-bottom-left-radius: 0; | |
| } | |
| .typing-indicator span { | |
| display: inline-block; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background-color: #9ca3af; | |
| 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%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-5px); } | |
| } | |
| .dark .dark\:bg-dark-primary { | |
| background-color: #0f172a; | |
| } | |
| .dark .dark\:bg-dark-secondary { | |
| background-color: #1e293b; | |
| } | |
| .dark .dark\:text-light { | |
| color: #f8fafc; | |
| } | |
| .dark .dark\:border-dark { | |
| border-color: #334155; | |
| } | |
| .dark .dark\:bg-dark-accent { | |
| background-color: #0f766e; | |
| } | |
| .dark .dark\:bg-dark-input { | |
| background-color: #1e293b; | |
| } | |
| .dark .dark\:text-muted { | |
| color: #94a3b8; | |
| } | |
| .dark .dark\:hover\:bg-dark-hover:hover { | |
| background-color: #334155; | |
| } | |
| .dark .dark\:bg-dark-card { | |
| background-color: #1e293b; | |
| } | |
| .dark .dark\:bg-dark-header { | |
| background-color: #0f172a; | |
| } | |
| .dark .dark\:border-dark-border { | |
| border-color: #334155; | |
| } | |
| </style> | |
| </head> | |
| <body class="h-full bg-gray-50 dark:bg-dark-primary transition-colors duration-200"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="hidden md:flex md:flex-shrink-0"> | |
| <div class="flex flex-col w-20 bg-white dark:bg-dark-secondary border-r border-gray-200 dark:border-dark-border"> | |
| <div class="flex-1 flex flex-col items-center py-4"> | |
| <!-- App Logo --> | |
| <div class="flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-gradient-to-r from-primary-500 to-secondary-500 text-white"> | |
| <i class="fas fa-comment-alt text-xl"></i> | |
| </div> | |
| <!-- Navigation Icons --> | |
| <nav class="flex-1 mt-8 space-y-4 w-full px-2"> | |
| <a href="#" class="group flex items-center justify-center p-2 rounded-lg bg-primary-100 dark:bg-dark-accent text-primary-600 dark:text-white"> | |
| <i class="fas fa-comment-alt text-xl"></i> | |
| </a> | |
| <a href="#" class="group flex items-center justify-center p-2 rounded-lg text-gray-600 dark:text-muted hover:bg-gray-100 dark:hover:bg-dark-hover"> | |
| <i class="fas fa-phone-alt text-xl"></i> | |
| </a> | |
| <a href="#" class="group flex items-center justify-center p-2 rounded-lg text-gray-600 dark:text-muted hover:bg-gray-100 dark:hover:bg-dark-hover"> | |
| <i class="fas fa-users text-xl"></i> | |
| </a> | |
| <a href="#" class="group flex items-center justify-center p-2 rounded-lg text-gray-600 dark:text-muted hover:bg-gray-100 dark:hover:bg-dark-hover"> | |
| <i class="fas fa-cog text-xl"></i> | |
| </a> | |
| </nav> | |
| <!-- Theme Toggle and Profile --> | |
| <div class="flex-shrink-0 flex flex-col items-center space-y-4 pb-4"> | |
| <button id="theme-toggle" class="p-2 rounded-full text-gray-600 dark:text-muted hover:bg-gray-100 dark:hover:bg-dark-hover"> | |
| <i class="fas fa-moon dark:hidden"></i> | |
| <i class="fas fa-sun hidden dark:block"></i> | |
| </button> | |
| <div class="relative"> | |
| <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-green-500 ring-2 ring-white dark:ring-dark-secondary"></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Contacts List --> | |
| <div class="hidden md:flex md:flex-col w-80 border-r border-gray-200 dark:border-dark-border bg-white dark:bg-dark-secondary"> | |
| <div class="flex flex-col h-full"> | |
| <!-- Search Bar --> | |
| <div class="p-4 border-b border-gray-200 dark:border-dark-border"> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-search text-gray-400"></i> | |
| </div> | |
| <input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-dark-border rounded-lg bg-gray-50 dark:bg-dark-input focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent" placeholder="Search"> | |
| </div> | |
| </div> | |
| <!-- Second Number Banner --> | |
| <div class="bg-gradient-to-r from-primary-500 to-secondary-500 text-white p-4 flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium">Your Second Number</p> | |
| <p class="text-xs opacity-90">+1 (415) 555-0132</p> | |
| </div> | |
| <button class="text-xs bg-white text-primary-600 px-2 py-1 rounded-full font-medium">Change</button> | |
| </div> | |
| <!-- Contacts List --> | |
| <div class="flex-1 overflow-y-auto"> | |
| <div class="divide-y divide-gray-200 dark:divide-dark-border"> | |
| <!-- Contact Item --> | |
| <div class="p-4 flex items-center space-x-3 hover:bg-gray-50 dark:hover:bg-dark-hover cursor-pointer"> | |
| <div class="relative"> | |
| <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-green-500 ring-2 ring-white dark:ring-dark-secondary"></span> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-gray-900 dark:text-light truncate">Leslie Alexander</p> | |
| <p class="text-xs text-gray-500 dark:text-muted truncate">Hey, how are you doing?</p> | |
| </div> | |
| <div class="flex flex-col items-end"> | |
| <span class="text-xs text-gray-500 dark:text-muted">2 min ago</span> | |
| <span class="mt-1 inline-flex items-center justify-center h-5 w-5 rounded-full bg-primary-500 text-white text-xs">3</span> | |
| </div> | |
| </div> | |
| <!-- More contacts... --> | |
| <div class="p-4 flex items-center space-x-3 hover:bg-gray-50 dark:hover:bg-dark-hover cursor-pointer"> | |
| <div class="relative"> | |
| <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-gray-300 ring-2 ring-white dark:ring-dark-secondary"></span> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-gray-900 dark:text-light truncate">Michael Foster</p> | |
| <p class="text-xs text-gray-500 dark:text-muted truncate">Let's meet tomorrow</p> | |
| </div> | |
| <div class="flex flex-col items-end"> | |
| <span class="text-xs text-gray-500 dark:text-muted">1 hr ago</span> | |
| </div> | |
| </div> | |
| <div class="p-4 flex items-center space-x-3 hover:bg-gray-50 dark:hover:bg-dark-hover cursor-pointer"> | |
| <div class="relative"> | |
| <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-green-500 ring-2 ring-white dark:ring-dark-secondary"></span> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-gray-900 dark:text-light truncate">Dries Vincent</p> | |
| <p class="text-xs text-gray-500 dark:text-muted truncate">The project is due next week</p> | |
| </div> | |
| <div class="flex flex-col items-end"> | |
| <span class="text-xs text-gray-500 dark:text-muted">3 hrs ago</span> | |
| </div> | |
| </div> | |
| <div class="p-4 flex items-center space-x-3 hover:bg-gray-50 dark:hover:bg-dark-hover cursor-pointer"> | |
| <div class="relative"> | |
| <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-green-500 ring-2 ring-white dark:ring-dark-secondary"></span> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-gray-900 dark:text-light truncate">Lindsay Walton</p> | |
| <p class="text-xs text-gray-500 dark:text-muted truncate">Check out this link</p> | |
| </div> | |
| <div class="flex flex-col items-end"> | |
| <span class="text-xs text-gray-500 dark:text-muted">Yesterday</span> | |
| <span class="mt-1 inline-flex items-center justify-center h-5 w-5 rounded-full bg-primary-500 text-white text-xs">1</span> | |
| </div> | |
| </div> | |
| <div class="p-4 flex items-center space-x-3 hover:bg-gray-50 dark:hover:bg-dark-hover cursor-pointer"> | |
| <div class="relative"> | |
| <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-gray-300 ring-2 ring-white dark:ring-dark-secondary"></span> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-gray-900 dark:text-light truncate">Courtney Henry</p> | |
| <p class="text-xs text-gray-500 dark:text-muted truncate">Thanks for your help!</p> | |
| </div> | |
| <div class="flex flex-col items-end"> | |
| <span class="text-xs text-gray-500 dark:text-muted">2 days ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Chat Area --> | |
| <div class="flex-1 flex flex-col overflow-hidden bg-gray-100 dark:bg-dark-secondary"> | |
| <!-- Chat Header --> | |
| <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-dark-border bg-white dark:bg-dark-header"> | |
| <div class="flex items-center space-x-3"> | |
| <button class="md:hidden p-2 rounded-full text-gray-600 dark:text-muted hover:bg-gray-100 dark:hover:bg-dark-hover"> | |
| <i class="fas fa-arrow-left"></i> | |
| </button> | |
| <div class="relative"> | |
| <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-green-500 ring-2 ring-white dark:ring-dark-secondary"></span> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-900 dark:text-light">Leslie Alexander</p> | |
| <p class="text-xs text-gray-500 dark:text-muted">Online</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 rounded-full text-gray-600 dark:text-muted hover:bg-gray-100 dark:hover:bg-dark-hover"> | |
| <i class="fas fa-phone-alt"></i> | |
| </button> | |
| <button class="p-2 rounded-full text-gray-600 dark:text-muted hover:bg-gray-100 dark:hover:bg-dark-hover"> | |
| <i class="fas fa-video"></i> | |
| </button> | |
| <button class="p-2 rounded-full text-gray-600 dark:text-muted hover:bg-gray-100 dark:hover:bg-dark-hover"> | |
| <i class="fas fa-info-circle"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Messages --> | |
| <div class="flex-1 overflow-y-auto p-4 space-y-4"> | |
| <!-- Date Divider --> | |
| <div class="flex items-center justify-center"> | |
| <span class="px-3 py-1 rounded-full text-xs bg-gray-200 dark:bg-dark-card text-gray-600 dark:text-muted">Today</span> | |
| </div> | |
| <!-- Received Message --> | |
| <div class="flex items-start space-x-2"> | |
| <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| <div> | |
| <div class="bg-white dark:bg-dark-card text-gray-800 dark:text-light px-4 py-2 rounded-lg chat-bubble received shadow-sm"> | |
| Hey there! How are you doing? | |
| </div> | |
| <p class="text-xs text-gray-500 dark:text-muted mt-1">10:30 AM</p> | |
| </div> | |
| </div> | |
| <!-- Sent Message --> | |
| <div class="flex items-start justify-end space-x-2"> | |
| <div class="text-right"> | |
| <div class="bg-primary-500 text-white px-4 py-2 rounded-lg chat-bubble sent shadow-sm"> | |
| I'm good, thanks! Just working on that project we discussed. | |
| </div> | |
| <p class="text-xs text-gray-500 dark:text-muted mt-1">10:32 AM <i class="fas fa-check-double text-primary-400 ml-1"></i></p> | |
| </div> | |
| <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <!-- Received Message --> | |
| <div class="flex items-start space-x-2"> | |
| <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| <div> | |
| <div class="bg-white dark:bg-dark-card text-gray-800 dark:text-light px-4 py-2 rounded-lg chat-bubble received shadow-sm"> | |
| Great! How's it coming along? Need any help? | |
| </div> | |
| <p class="text-xs text-gray-500 dark:text-muted mt-1">10:33 AM</p> | |
| </div> | |
| </div> | |
| <!-- Sent Message with Image --> | |
| <div class="flex items-start justify-end space-x-2"> | |
| <div class="text-right"> | |
| <div class="bg-primary-500 text-white px-4 py-2 rounded-lg chat-bubble sent shadow-sm"> | |
| Actually, I could use your input on something. Here's a screenshot: | |
| </div> | |
| <div class="mt-2 rounded-lg overflow-hidden shadow-sm"> | |
| <img src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Project screenshot" class="w-64 h-auto"> | |
| </div> | |
| <p class="text-xs text-gray-500 dark:text-muted mt-1">10:35 AM <i class="fas fa-check-double text-primary-400 ml-1"></i></p> | |
| </div> | |
| <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <!-- Encryption Notice --> | |
| <div class="flex items-center justify-center"> | |
| <span class="px-3 py-1 rounded-full text-xs bg-gray-200 dark:bg-dark-card text-gray-600 dark:text-muted flex items-center"> | |
| <i class="fas fa-lock text-primary-500 mr-1"></i> Messages are end-to-end encrypted | |
| </span> | |
| </div> | |
| <!-- Typing Indicator --> | |
| <div class="flex items-start space-x-2"> | |
| <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| <div> | |
| <div class="bg-white dark:bg-dark-card px-4 py-2 rounded-lg chat-bubble received shadow-sm"> | |
| <div class="typing-indicator"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Message Input --> | |
| <div class="p-4 border-t border-gray-200 dark:border-dark-border bg-white dark:bg-dark-header"> | |
| <div class="flex items-center space-x-2"> | |
| <button class="p-2 rounded-full text-gray-600 dark:text-muted hover:bg-gray-100 dark:hover:bg-dark-hover"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| <button class="p-2 rounded-full text-gray-600 dark:text-muted hover:bg-gray-100 dark:hover:bg-dark-hover"> | |
| <i class="fas fa-image"></i> | |
| </button> | |
| <div class="flex-1"> | |
| <input type="text" class="block w-full px-4 py-2 border border-gray-300 dark:border-dark-border rounded-full bg-gray-50 dark:bg-dark-input focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent" placeholder="Type a message..."> | |
| </div> | |
| <button class="p-2 rounded-full text-gray-600 dark:text-muted hover:bg-gray-100 dark:hover:bg-dark-hover"> | |
| <i class="fas fa-microphone"></i> | |
| </button> | |
| <button class="p-2 rounded-full bg-primary-500 text-white hover:bg-primary-600"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Theme toggle functionality | |
| const themeToggle = document.getElementById('theme-toggle'); | |
| const html = document.documentElement; | |
| // Check for saved theme preference or use system preference | |
| const savedTheme = localStorage.getItem('theme') || | |
| (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); | |
| // Apply the saved theme | |
| if (savedTheme === 'dark') { | |
| html.classList.add('dark'); | |
| } else { | |
| html.classList.remove('dark'); | |
| } | |
| // Toggle theme on button click | |
| themeToggle.addEventListener('click', () => { | |
| html.classList.toggle('dark'); | |
| const theme = html.classList.contains('dark') ? 'dark' : 'light'; | |
| localStorage.setItem('theme', theme); | |
| }); | |
| // Simulate typing indicator | |
| setTimeout(() => { | |
| const typingIndicator = document.querySelector('.typing-indicator').parentElement.parentElement; | |
| typingIndicator.style.display = 'none'; | |
| // Add a new received message | |
| const messagesContainer = document.querySelector('.overflow-y-auto'); | |
| const newMessage = document.createElement('div'); | |
| newMessage.className = 'flex items-start space-x-2'; | |
| newMessage.innerHTML = ` | |
| <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| <div> | |
| <div class="bg-white dark:bg-dark-card text-gray-800 dark:text-light px-4 py-2 rounded-lg chat-bubble received shadow-sm"> | |
| The design looks clean! Maybe we could add more contrast to the buttons? | |
| </div> | |
| <p class="text-xs text-gray-500 dark:text-muted mt-1">${new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</p> | |
| </div> | |
| `; | |
| messagesContainer.appendChild(newMessage); | |
| messagesContainer.scrollTop = messagesContainer.scrollHeight; | |
| }, 2000); | |
| </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=BigVenom/big-venom-s-space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |