Spaces:
Running
Running
Purpose: Manage multiplayer/group runs. Contents: Create Group Button: Start a new group run session. Join Group: Input or browse available groups to join. Group Member Panel: List current members with avatars and player names. Show ready/not ready status per member. Indicate leader and allow leader controls. Group Chat/Communication Status (optional): Voice link indicators if integrated. Start Challenge Button: Enabled for leader only when all members are ready. Group Stats: Aggregate info like average vehicle condition, trail selected. Notifications: Member join/leave, readiness changes, challenge start. - Initial Deployment
b5dfda7
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TrailBlazers - Group Run Manager</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: '#3b82f6', | |
| secondary: '#1e40af', | |
| dark: '#0f172a', | |
| success: '#10b981', | |
| warning: '#f59e0b', | |
| danger: '#ef4444' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); | |
| min-height: 100vh; | |
| color: #e2e8f0; | |
| } | |
| .group-card { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25); | |
| } | |
| .group-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35); | |
| } | |
| .member-card { | |
| transition: all 0.2s ease; | |
| } | |
| .member-card:hover { | |
| background-color: rgba(59, 130, 246, 0.1); | |
| } | |
| .status-indicator { | |
| display: inline-block; | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| margin-right: 8px; | |
| } | |
| .ready { | |
| background-color: #10b981; | |
| box-shadow: 0 0 8px #10b981; | |
| } | |
| .not-ready { | |
| background-color: #ef4444; | |
| box-shadow: 0 0 8px #ef4444; | |
| } | |
| .leader { | |
| background-color: #f59e0b; | |
| box-shadow: 0 0 8px #f59e0b; | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .notification { | |
| transform: translateX(100%); | |
| transition: transform 0.3s ease; | |
| } | |
| .notification.show { | |
| transform: translateX(0); | |
| } | |
| .chat-message { | |
| animation: fadeIn 0.3s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="p-4 md:p-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <!-- Header --> | |
| <header class="mb-8 text-center"> | |
| <h1 class="text-3xl md:text-4xl font-bold text-white mb-2 flex items-center justify-center"> | |
| <i class="fas fa-mountain text-primary mr-3"></i> TrailBlazers | |
| </h1> | |
| <p class="text-gray-400">Manage your multiplayer group runs</p> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Left Column - Group Management --> | |
| <div class="lg:col-span-2"> | |
| <div class="group-card bg-gray-800 rounded-xl p-6 mb-6"> | |
| <div class="flex flex-col md:flex-row md:items-center justify-between mb-6"> | |
| <h2 class="text-2xl font-bold text-white mb-4 md:mb-0">Group Management</h2> | |
| <div class="flex flex-wrap gap-3"> | |
| <button id="createGroupBtn" class="bg-primary hover:bg-secondary text-white px-4 py-2 rounded-lg flex items-center transition"> | |
| <i class="fas fa-plus mr-2"></i> Create Group | |
| </button> | |
| <button id="joinGroupBtn" class="bg-dark border border-gray-700 hover:bg-gray-700 text-white px-4 py-2 rounded-lg flex items-center transition"> | |
| <i class="fas fa-sign-in-alt mr-2"></i> Join Group | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Join Group Form --> | |
| <div id="joinGroupForm" class="hidden bg-gray-900 rounded-lg p-4 mb-6"> | |
| <div class="flex flex-col md:flex-row gap-3"> | |
| <div class="flex-1"> | |
| <label class="block text-gray-400 mb-2">Group ID or Name</label> | |
| <input type="text" id="groupIdInput" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Enter group ID or name"> | |
| </div> | |
| <div class="flex items-end"> | |
| <button id="joinGroupSubmit" class="bg-success hover:bg-green-600 text-white px-6 py-2 rounded-lg flex items-center transition"> | |
| <i class="fas fa-sign-in-alt mr-2"></i> Join | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Group Stats --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <div class="bg-gray-900 rounded-lg p-4 flex items-center"> | |
| <div class="bg-blue-500/20 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-route text-blue-400 text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-400 text-sm">Trail Selected</p> | |
| <p class="text-white font-medium">Mountain Ridge Trail</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 rounded-lg p-4 flex items-center"> | |
| <div class="bg-green-500/20 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-car text-green-400 text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-400 text-sm">Avg Vehicle Condition</p> | |
| <p class="text-white font-medium">85%</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 rounded-lg p-4 flex items-center"> | |
| <div class="bg-yellow-500/20 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-users text-yellow-400 text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-400 text-sm">Group Size</p> | |
| <p class="text-white font-medium">5/8 Members</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Member Panel --> | |
| <div class="mb-6"> | |
| <h3 class="text-xl font-semibold text-white mb-4 flex items-center"> | |
| <i class="fas fa-users mr-2"></i> Group Members | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <!-- Leader --> | |
| <div class="member-card bg-gray-900 rounded-lg p-4 border border-yellow-500/30"> | |
| <div class="flex items-center"> | |
| <div class="relative"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Leader" class="w-12 h-12 rounded-full"> | |
| <div class="absolute -bottom-1 -right-1 bg-yellow-500 rounded-full p-1"> | |
| <i class="fas fa-crown text-xs"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <div class="flex justify-between"> | |
| <h4 class="font-medium text-white">Alex Morgan</h4> | |
| <span class="text-xs bg-yellow-500/20 text-yellow-400 px-2 py-1 rounded">Leader</span> | |
| </div> | |
| <div class="flex items-center mt-1"> | |
| <span class="status-indicator ready"></span> | |
| <span class="text-sm text-gray-400">Ready</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Member 1 --> | |
| <div class="member-card bg-gray-900 rounded-lg p-4"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Member" class="w-12 h-12 rounded-full"> | |
| <div class="ml-4 flex-1"> | |
| <div class="flex justify-between"> | |
| <h4 class="font-medium text-white">Sarah Johnson</h4> | |
| <span class="text-xs bg-gray-700 text-gray-300 px-2 py-1 rounded">Member</span> | |
| </div> | |
| <div class="flex items-center mt-1"> | |
| <span class="status-indicator ready"></span> | |
| <span class="text-sm text-gray-400">Ready</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Member 2 --> | |
| <div class="member-card bg-gray-900 rounded-lg p-4"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Member" class="w-12 h-12 rounded-full"> | |
| <div class="ml-4 flex-1"> | |
| <div class="flex justify-between"> | |
| <h4 class="font-medium text-white">Mike Chen</h4> | |
| <span class="text-xs bg-gray-700 text-gray-300 px-2 py-1 rounded">Member</span> | |
| </div> | |
| <div class="flex items-center mt-1"> | |
| <span class="status-indicator not-ready"></span> | |
| <span class="text-sm text-gray-400">Not Ready</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Member 3 --> | |
| <div class="member-card bg-gray-900 rounded-lg p-4"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Member" class="w-12 h-12 rounded-full"> | |
| <div class="ml-4 flex-1"> | |
| <div class="flex justify-between"> | |
| <h4 class="font-medium text-white">Emma Rodriguez</h4> | |
| <span class="text-xs bg-gray-700 text-gray-300 px-2 py-1 rounded">Member</span> | |
| </div> | |
| <div class="flex items-center mt-1"> | |
| <span class="status-indicator ready"></span> | |
| <span class="text-sm text-gray-400">Ready</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Start Challenge Button --> | |
| <div class="text-center"> | |
| <button id="startChallengeBtn" class="bg-success hover:bg-green-600 text-white px-8 py-3 rounded-lg text-lg font-semibold flex items-center justify-center mx-auto transition pulse"> | |
| <i class="fas fa-flag-checkered mr-2"></i> Start Challenge | |
| </button> | |
| <p class="text-gray-400 text-sm mt-2">Only available when all members are ready</p> | |
| </div> | |
| </div> | |
| <!-- Group Chat --> | |
| <div class="group-card bg-gray-800 rounded-xl p-6"> | |
| <h3 class="text-xl font-semibold text-white mb-4 flex items-center"> | |
| <i class="fas fa-comments mr-2"></i> Group Chat | |
| </h3> | |
| <div class="bg-gray-900 rounded-lg p-4 mb-4 h-64 overflow-y-auto"> | |
| <div class="space-y-3"> | |
| <div class="chat-message flex"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Alex" class="w-8 h-8 rounded-full mr-3"> | |
| <div> | |
| <div class="bg-blue-500/20 text-blue-300 rounded-lg p-3 max-w-xs"> | |
| <p class="font-medium">Alex Morgan</p> | |
| <p>Ready to start the challenge when everyone is ready!</p> | |
| </div> | |
| <span class="text-gray-500 text-xs mt-1 block">10:24 AM</span> | |
| </div> | |
| </div> | |
| <div class="chat-message flex justify-end"> | |
| <div class="text-right"> | |
| <div class="bg-primary/20 text-white rounded-lg p-3 max-w-xs"> | |
| <p class="font-medium">You</p> | |
| <p>Just checking my vehicle diagnostics</p> | |
| </div> | |
| <span class="text-gray-500 text-xs mt-1 block">10:26 AM</span> | |
| </div> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="You" class="w-8 h-8 rounded-full ml-3"> | |
| </div> | |
| <div class="chat-message flex"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah" class="w-8 h-8 rounded-full mr-3"> | |
| <div> | |
| <div class="bg-blue-500/20 text-blue-300 rounded-lg p-3 max-w-xs"> | |
| <p class="font-medium">Sarah Johnson</p> | |
| <p>I'm ready to go! Let's do this!</p> | |
| </div> | |
| <span class="text-gray-500 text-xs mt-1 block">10:27 AM</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <input type="text" id="chatInput" class="flex-1 bg-gray-900 border border-gray-700 rounded-l-lg px-4 py-2 text-white focus:outline-none" placeholder="Type your message..."> | |
| <button id="sendChatBtn" class="bg-primary hover:bg-blue-600 text-white px-4 py-2 rounded-r-lg"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column - Notifications & Voice Status --> | |
| <div> | |
| <!-- Voice Status --> | |
| <div class="group-card bg-gray-800 rounded-xl p-6 mb-6"> | |
| <h3 class="text-xl font-semibold text-white mb-4 flex items-center"> | |
| <i class="fas fa-microphone mr-2"></i> Voice Status | |
| </h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between p-3 bg-gray-900 rounded-lg"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Alex" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <p class="font-medium text-white">Alex Morgan</p> | |
| <p class="text-sm text-gray-400">Voice connected</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-microphone text-green-500 mr-2"></i> | |
| <span class="text-green-500 text-sm">Connected</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-gray-900 rounded-lg"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <p class="font-medium text-white">Sarah Johnson</p> | |
| <p class="text-sm text-gray-400">Voice connected</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-microphone text-green-500 mr-2"></i> | |
| <span class="text-green-500 text-sm">Connected</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-gray-900 rounded-lg"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Mike" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <p class="font-medium text-white">Mike Chen</p> | |
| <p class="text-sm text-gray-400">Voice connected</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-microphone text-green-500 mr-2"></i> | |
| <span class="text-green-500 text-sm">Connected</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-gray-900 rounded-lg"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <p class="font-medium text-white">Emma Rodriguez</p> | |
| <p class="text-sm text-gray-400">Voice connected</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-microphone text-green-500 mr-2"></i> | |
| <span class="text-green-500 text-sm">Connected</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-gray-900 rounded-lg"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="You" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <p class="font-medium text-white">You</p> | |
| <p class="text-sm text-gray-400">Voice connected</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-microphone text-green-500 mr-2"></i> | |
| <span class="text-green-500 text-sm">Connected</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Notifications --> | |
| <div class="group-card bg-gray-800 rounded-xl p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-semibold text-white flex items-center"> | |
| <i class="fas fa-bell mr-2"></i> Notifications | |
| </h3> | |
| <button id="clearNotificationsBtn" class="text-gray-400 hover:text-white text-sm"> | |
| Clear All | |
| </button> | |
| </div> | |
| <div id="notificationsContainer" class="space-y-3"> | |
| <div class="notification show bg-gray-900 rounded-lg p-3 border-l-4 border-l-yellow-500"> | |
| <div class="flex"> | |
| <i class="fas fa-crown text-yellow-500 mt-1 mr-3"></i> | |
| <div> | |
| <p class="font-medium text-white">Alex Morgan</p> | |
| <p class="text-sm text-gray-400">became the group leader</p> | |
| <p class="text-xs text-gray-500 mt-1">2 minutes ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="notification show bg-gray-900 rounded-lg p-3 border-l-4 border-l-green-500"> | |
| <div class="flex"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> | |
| <div> | |
| <p class="font-medium text-white">Sarah Johnson</p> | |
| <p class="text-sm text-gray-400">is now ready</p> | |
| <p class="text-xs text-gray-500 mt-1">5 minutes ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="notification show bg-gray-900 rounded-lg p-3 border-l-4 border-l-blue-500"> | |
| <div class="flex"> | |
| <i class="fas fa-user-plus text-blue-500 mt-1 mr-3"></i> | |
| <div> | |
| <p class="font-medium text-white">Mike Chen</p> | |
| <p class="text-sm text-gray-400">joined the group</p> | |
| <p class="text-xs text-gray-500 mt-1">10 minutes ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="notification show bg-gray-900 rounded-lg p-3 border-l-4 border-l-green-500"> | |
| <div class="flex"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> | |
| <div> | |
| <p class="font-medium text-white">Emma Rodriguez</p> | |
| <p class="text-sm text-gray-400">is now ready</p> | |
| <p class="text-xs text-gray-500 mt-1">12 minutes ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // DOM Elements | |
| const createGroupBtn = document.getElementById('createGroupBtn'); | |
| const joinGroupBtn = document.getElementById('joinGroupBtn'); | |
| const joinGroupForm = document.getElementById('joinGroupForm'); | |
| const joinGroupSubmit = document.getElementById('joinGroupSubmit'); | |
| const groupIdInput = document.getElementById('groupIdInput'); | |
| const startChallengeBtn = document.getElementById('startChallengeBtn'); | |
| const chatInput = document.getElementById('chatInput'); | |
| const sendChatBtn = document.getElementById('sendChatBtn'); | |
| const clearNotificationsBtn = document.getElementById('clearNotificationsBtn'); | |
| const notificationsContainer = document.getElementById('notificationsContainer'); | |
| // Event Listeners | |
| createGroupBtn.addEventListener('click', () => { | |
| // In a real app, this would create a new group | |
| alert('Group created successfully!'); | |
| }); | |
| joinGroupBtn.addEventListener('click', () => { | |
| joinGroupForm.classList.toggle('hidden'); | |
| }); | |
| joinGroupSubmit.addEventListener('click', () => { | |
| if (groupIdInput.value.trim() !== '') { | |
| // In a real app, this would join the group | |
| alert(`Joined group: ${groupIdInput.value}`); | |
| groupIdInput.value = ''; | |
| joinGroupForm.classList.add('hidden'); | |
| } else { | |
| alert('Please enter a group ID or name'); | |
| } | |
| }); | |
| startChallengeBtn.addEventListener('click', () => { | |
| // In a real app, this would start the challenge | |
| alert('Challenge started! Good luck everyone!'); | |
| }); | |
| sendChatBtn.addEventListener('click', sendMessage); | |
| chatInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| sendMessage(); | |
| } | |
| }); | |
| clearNotificationsBtn.addEventListener('click', () => { | |
| notificationsContainer.innerHTML = ''; | |
| }); | |
| // Function to send chat message | |
| function sendMessage() { | |
| const message = chatInput.value.trim(); | |
| if (message !== '') { | |
| const chatContainer = document.querySelector('.bg-gray-900.h-64.overflow-y-auto'); | |
| const messageElement = document.createElement('div'); | |
| messageElement.className = 'chat-message flex justify-end'; | |
| messageElement.innerHTML = ` | |
| <div class="text-right"> | |
| <div class="bg-primary/20 text-white rounded-lg p-3 max-w-xs"> | |
| <p class="font-medium">You</p> | |
| <p>${message}</p> | |
| </div> | |
| <span class="text-gray-500 text-xs mt-1 block">Just now</span> | |
| </div> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="You" class="w-8 h-8 rounded-full ml-3"> | |
| `; | |
| chatContainer.appendChild(messageElement); | |
| chatInput.value = ''; | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| } | |
| } | |
| // Simulate notifications | |
| setTimeout(() => { | |
| const newNotification = document.createElement('div'); | |
| newNotification.className = 'notification show bg-gray-900 rounded-lg p-3 border-l-4 border-l-blue-500'; | |
| newNotification.innerHTML = ` | |
| <div class="flex"> | |
| <i class="fas fa-user-plus text-blue-500 mt-1 mr-3"></i> | |
| <div> | |
| <p class="font-medium text-white">You</p> | |
| <p class="text-sm text-gray-400">joined the group</p> | |
| <p class="text-xs text-gray-500 mt-1">Just now</p> | |
| </div> | |
| </div> | |
| `; | |
| notificationsContainer.prepend(newNotification); | |
| }, 3000); | |
| setTimeout(() => { | |
| const newNotification = document.createElement('div'); | |
| newNotification.className = 'notification show bg-gray-900 rounded-lg p-3 border-l-4 border-l-green-500'; | |
| newNotification.innerHTML = ` | |
| <div class="flex"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> | |
| <div> | |
| <p class="font-medium text-white">You</p> | |
| <p class="text-sm text-gray-400">are now ready</p> | |
| <p class="text-xs text-gray-500 mt-1">Just now</p> | |
| </div> | |
| </div> | |
| `; | |
| notificationsContainer.prepend(newNotification); | |
| }, 5000); | |
| </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=Mankeysocks/group" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |