Hugging Face's logo

Spaces:
privateuserh
/
Honeycomb-xhat04
Running

App Files Community
Honeycomb-xhat04 / index.html
privateuserh's picture
privateuserh
Add 3 files
f9b3e8c verified
raw
history blame contribute delete
66.3 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Honeycomb Chat - Synchronized communication between prefectures">
<meta name="theme-color" content="#3b82f6">
<meta property="og:title" content="Honeycomb Chat">
<meta property="og:description" content="Real-time synchronized communication with geometric prefectures">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com">
<meta property="og:image" content="https://example.com/honeycomb-chat-preview.png">
<title>Honeycomb Chat</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 float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.floating {
animation: float 6s ease-in-out infinite;
}
.shape-transition {
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.chat-bubble {
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}
.triangle {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.hexagon {
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.pentagon {
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.octagon {
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
.diamond {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.pennant {
clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}
.swallowtail {
clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 50% 100%, 0% 70%);
}
.burgee {
clip-path: polygon(0% 25%, 50% 0%, 100% 25%, 50% 100%);
}
.houseflag {
clip-path: polygon(0% 0%, 100% 0%, 80% 50%, 100% 100%, 0% 100%, 20% 50%);
}
.honeycomb-bg {
background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0L84 25V75L50 100L16 75V25L50 0Z' fill='none' stroke='%23e5e7eb' stroke-width='0.5'/%3E%3C/svg%3E");
background-size: 60px 60px;
}
.honeycomb-cell {
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.prefecture-diligence {
background: linear-gradient(135deg, #f59e0b, #d97706);
}
.prefecture-industry {
background: linear-gradient(135deg, #10b981, #059669);
}
.prefecture-harmony {
background: linear-gradient(135deg, #3b82f6, #2563eb);
}
.prefecture-aquapod {
background: linear-gradient(135deg, #06b6d4, #0891b2);
}
.prefecture-archive {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.message-diligence {
background-color: #f59e0b;
color: white;
}
.message-industry {
background-color: #10b981;
color: white;
}
.message-harmony {
background-color: #3b82f6;
color: white;
}
.message-aquapod {
background-color: #06b6d4;
color: white;
}
.message-archive {
background-color: #8b5cf6;
color: white;
}
.flag-alpha {
background: linear-gradient(135deg, white 50%, blue 50%);
}
.flag-bravo {
background: linear-gradient(red 50%, white 50%);
}
.flag-charlie {
background: linear-gradient(blue 33%, white 33%, white 66%, red 66%);
}
.flag-delta {
background: linear-gradient(90deg, yellow 50%, blue 50%);
}
.flag-echo {
background: linear-gradient(blue 33%, red 33%, red 66%, blue 66%);
}
.flag-foxtrot {
background: linear-gradient(white 50%, red 50%);
}
.wave-animation {
position: relative;
overflow: hidden;
}
.wave-animation::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
animation: wave 2s linear infinite;
}
@keyframes wave {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.recipient-chip {
display: inline-flex;
align-items: center;
background-color: #e5e7eb;
border-radius: 9999px;
padding: 0.25rem 0.75rem;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
font-size: 0.875rem;
}
.recipient-chip button {
margin-left: 0.5rem;
color: #6b7280;
background: none;
border: none;
cursor: pointer;
}
.recipient-chip button:hover {
color: #ef4444;
}
.bell-animation {
animation: ring 0.5s ease-in-out;
}
@keyframes ring {
0% { transform: rotate(-15deg); }
25% { transform: rotate(15deg); }
50% { transform: rotate(-10deg); }
75% { transform: rotate(10deg); }
100% { transform: rotate(0deg); }
}
.bell-count {
position: absolute;
top: -5px;
right: -5px;
background-color: #f59e0b;
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
}
</style>
</head>
<body class="bg-gradient-to-br from-gray-50 to-blue-50 min-h-screen">
<div class="container mx-auto px-4 py-8">
<!-- Header -->
<header class="flex flex-col items-center mb-8">
<div class="flex items-center justify-center mb-4">
<div class="honeycomb-cell bg-blue-500 w-12 h-12 flex items-center justify-center mr-3">
<i class="fas fa-comment-alt text-white text-xl"></i>
</div>
<h1 class="text-3xl font-bold text-gray-800">Honeycomb Chat</h1>
</div>
<p class="text-gray-600 text-center max-w-md">Synchronized communication between prefectures. No records stored.</p>
</header>
<!-- Connection Status -->
<div class="flex justify-center mb-6">
<div id="connectionStatus" class="flex items-center bg-white rounded-full px-4 py-2 shadow-md">
<div class="w-3 h-3 rounded-full bg-gray-400 mr-2"></div>
<span class="text-sm font-medium text-gray-600">Disconnected</span>
</div>
</div>
<!-- Chat Container -->
<div class="max-w-2xl mx-auto bg-white rounded-2xl shadow-xl overflow-hidden">
<!-- Chat Header -->
<div class="bg-gradient-to-r from-blue-500 to-indigo-600 p-4 flex items-center honeycomb-bg">
<div class="octagon bg-white w-8 h-8 flex items-center justify-center mr-3">
<i class="fas fa-users text-blue-500 text-sm"></i>
</div>
<h2 class="text-white font-semibold">Prefecture Channel</h2>
<div class="ml-auto flex space-x-2">
<button id="clearBtn" class="p-1 rounded-full hover:bg-blue-400 transition">
<i class="fas fa-trash-alt text-white"></i>
</button>
<button id="syncBtn" class="p-1 rounded-full hover:bg-blue-400 transition">
<i class="fas fa-sync-alt text-white"></i>
</button>
</div>
</div>
<!-- Messages Area -->
<div id="messages" class="h-96 overflow-y-auto p-4 space-y-4 bg-gray-50 honeycomb-bg">
<div class="flex justify-center">
<div class="bg-blue-100 text-blue-800 px-4 py-2 rounded-lg max-w-xs text-center">
<p>Welcome to Honeycomb Chat! Messages disappear when you close the window.</p>
</div>
</div>
</div>
<!-- Input Area -->
<div class="p-4 border-t border-gray-200 bg-white">
<div class="flex items-center">
<div class="flex-1 relative">
<input id="messageInput" type="text" placeholder="Type a message..."
class="w-full px-4 py-3 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
<button id="sendBtn" class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-blue-500 text-white rounded-full p-2 hover:bg-blue-600 transition">
<i class="fas fa-paper-plane"></i>
</button>
</div>
<div class="ml-3 flex space-x-2">
<button id="shapeBtn" class="p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition">
<i class="fas fa-shapes text-gray-700"></i>
</button>
<button id="prefectureBtn" class="p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition">
<i class="fas fa-flag text-gray-700"></i>
</button>
<button id="aquapodBroadcastBtn" class="p-2 rounded-full bg-cyan-100 hover:bg-cyan-200 transition hidden">
<i class="fas fa-bullhorn text-cyan-700"></i>
</button>
</div>
</div>
<div id="shapeOptions" class="hidden mt-3 grid grid-cols-4 gap-3">
<button data-shape="circle" class="w-10 h-10 rounded-full bg-blue-500 hover:bg-blue-600 transition"></button>
<button data-shape="triangle" class="w-10 h-10 bg-green-500 hover:bg-green-600 transition triangle"></button>
<button data-shape="square" class="w-10 h-10 bg-purple-500 hover:bg-purple-600 transition"></button>
<button data-shape="hexagon" class="w-10 h-10 bg-yellow-500 hover:bg-yellow-600 transition hexagon"></button>
<button data-shape="pentagon" class="w-10 h-10 bg-red-500 hover:bg-red-600 transition pentagon"></button>
<button data-shape="octagon" class="w-10 h-10 bg-pink-500 hover:bg-pink-600 transition octagon"></button>
<button data-shape="diamond" class="w-10 h-10 bg-indigo-500 hover:bg-indigo-600 transition diamond"></button>
<button data-shape="pennant" class="w-10 h-10 bg-orange-500 hover:bg-orange-600 transition pennant"></button>
<button data-shape="swallowtail" class="w-10 h-10 bg-teal-500 hover:bg-teal-600 transition swallowtail"></button>
<button data-shape="burgee" class="w-10 h-10 bg-rose-500 hover:bg-rose-600 transition burgee"></button>
<button data-shape="houseflag" class="w-10 h-10 bg-lime-500 hover:bg-lime-600 transition houseflag"></button>
<button data-shape="flag-alpha" class="w-10 h-10 flag-alpha hover:opacity-90 transition"></button>
<button data-shape="flag-bravo" class="w-10 h-10 flag-bravo hover:opacity-90 transition"></button>
<button data-shape="flag-charlie" class="w-10 h-10 flag-charlie hover:opacity-90 transition"></button>
<button data-shape="flag-delta" class="w-10 h-10 flag-delta hover:opacity-90 transition"></button>
<button data-shape="flag-echo" class="w-10 h-10 flag-echo hover:opacity-90 transition"></button>
<button data-shape="flag-foxtrot" class="w-10 h-10 flag-foxtrot hover:opacity-90 transition"></button>
<button data-shape="bell" class="w-10 h-10 bg-amber-500 hover:bg-amber-600 transition rounded-full relative">
<i class="fas fa-bell text-white"></i>
</button>
<button data-shape="food" class="w-10 h-10 bg-emerald-500 hover:bg-emerald-600 transition rounded-full">
<i class="fas fa-utensils text-white"></i>
</button>
<button data-shape="work" class="w-10 h-10 bg-slate-500 hover:bg-slate-600 transition rounded-full">
<i class="fas fa-briefcase text-white"></i>
</button>
</div>
<div id="prefectureOptions" class="hidden mt-3 grid grid-cols-5 gap-2">
<button data-prefecture="diligence" class="px-3 py-2 rounded-md prefecture-diligence text-white text-sm font-medium">Diligence</button>
<button data-prefecture="industry" class="px-3 py-2 rounded-md prefecture-industry text-white text-sm font-medium">Industry</button>
<button data-prefecture="harmony" class="px-3 py-2 rounded-md prefecture-harmony text-white text-sm font-medium">Harmony</button>
<button data-prefecture="aquapod" class="px-3 py-2 rounded-md prefecture-aquapod text-white text-sm font-medium">Aquapod</button>
<button data-prefecture="archive" class="px-3 py-2 rounded-md prefecture-archive text-white text-sm font-medium">Archive</button>
</div>
<div id="aquapodBroadcastOptions" class="hidden mt-3 bg-cyan-50 p-3 rounded-lg">
<h4 class="text-sm font-medium text-cyan-800 mb-2">Aquapod Broadcast</h4>
<div class="grid grid-cols-3 gap-2">
<button data-broadcast="alert" class="px-2 py-1 rounded-md bg-amber-100 hover:bg-amber-200 text-amber-800 text-xs font-medium">
<i class="fas fa-exclamation-triangle mr-1"></i> Alert
</button>
<button data-bbroadcast="resources" class="px-2 py-1 rounded-md bg-emerald-100 hover:bg-emerald-200 text-emerald-800 text-xs font-medium">
<i class="fas fa-fish mr-1"></i> Resources
</button>
<button data-broadcast="meeting" class="px-2 py-1 rounded-md bg-blue-100 hover:bg-blue-200 text-blue-800 text-xs font-medium">
<i class="fas fa-users mr-1"></i> Meeting
</button>
<button data-broadcast="emergency" class="px-2 py-1 rounded-md bg-red-100 hover:bg-red-200 text-red-800 text-xs font-medium">
<i class="fas fa-sos mr-1"></i> Emergency
</button>
<button data-broadcast="maintenance" class="px-2 py-1 rounded-md bg-slate-100 hover:bg-slate-200 text-slate-800 text-xs font-medium">
<i class="fas fa-tools mr-1"></i> Maintenance
</button>
<button data-broadcast="custom" class="px-2 py-1 rounded-md bg-cyan-100 hover:bg-cyan-200 text-cyan-800 text-xs font-medium">
<i class="fas fa-edit mr-1"></i> Custom
</button>
</div>
</div>
<!-- Bell Input Modal -->
<div id="bellModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div class="bg-white rounded-lg p-6 max-w-sm w-full">
<h3 class="text-lg font-medium text-gray-900 mb-4">Send Bells</h3>
<div class="mb-4">
<label for="bellCount" class="block text-sm font-medium text-gray-700 mb-2">Number of Bells (1-8)</label>
<input type="number" id="bellCount" min="1" max="8" value="1"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-500">
</div>
<div class="mb-4">
<label for="bellMessage" class="block text-sm font-medium text-gray-700 mb-2">Optional Message</label>
<input type="text" id="bellMessage" placeholder="What are the bells for?"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-500">
</div>
<div class="flex justify-end space-x-3">
<button id="cancelBellBtn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 transition">
Cancel
</button>
<button id="confirmBellBtn" class="px-4 py-2 bg-amber-500 text-white rounded-md hover:bg-amber-600 transition">
Send Bells
</button>
</div>
</div>
</div>
</div>
</div>
<!-- User Identification -->
<div class="mt-6 flex justify-center">
<div class="bg-white rounded-lg shadow-md p-4 max-w-md w-full">
<h3 class="font-medium text-gray-700 mb-3">Prefecture Identification</h3>
<!-- Sender Information -->
<div class="mb-4 border-b pb-4">
<h4 class="text-sm font-medium text-gray-600 mb-2">Your Information</h4>
<div class="flex items-center space-x-3 mb-3">
<div id="userShape" class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center">
<i class="fas fa-user text-white"></i>
</div>
<input id="usernameInput" type="text" placeholder="Your name"
class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
</div>
<div class="mb-3">
<label for="mmsiInput" class="block text-sm font-medium text-gray-700 mb-1">Your MMSI (Optional)</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-ship text-gray-400"></i>
</div>
<input id="mmsiInput" type="text" placeholder="123456789"
class="pl-10 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
maxlength="9" pattern="\d*">
</div>
<p class="mt-1 text-xs text-gray-500">9-digit Maritime Mobile Service Identity</p>
</div>
<div id="currentPrefecture" class="text-sm font-medium text-gray-600">
Current Prefecture: <span class="text-blue-500">None selected</span>
</div>
</div>
<!-- Recipient Selection -->
<div>
<h4 class="text-sm font-medium text-gray-600 mb-2">Recipient Selection</h4>
<!-- Recipient Prefecture -->
<div class="mb-3">
<label class="block text-sm font-medium text-gray-700 mb-1">Recipient Prefecture</label>
<div class="grid grid-cols-5 gap-2">
<button data-recipient-prefecture="diligence" class="px-2 py-1 rounded-md bg-orange-100 hover:bg-orange-200 text-orange-800 text-xs font-medium">Diligence</button>
<button data-recipient-prefecture="industry" class="px-2 py-1 rounded-md bg-emerald-100 hover:bg-emerald-200 text-emerald-800 text-xs font-medium">Industry</button>
<button data-recipient-prefecture="harmony" class="px-2 py-1 rounded-md bg-blue-100 hover:bg-blue-200 text-blue-800 text-xs font-medium">Harmony</button>
<button data-recipient-prefecture="aquapod" class="px-2 py-1 rounded-md bg-cyan-100 hover:bg-cyan-200 text-cyan-800 text-xs font-medium">Aquapod</button>
<button data-recipient-prefecture="archive" class="px-2 py-1 rounded-md bg-violet-100 hover:bg-violet-200 text-violet-800 text-xs font-medium">Archive</button>
<button data-recipient-prefecture="all" class="px-2 py-1 rounded-md bg-gray-100 hover:bg-gray-200 text-gray-800 text-xs font-medium col-span-5">All Prefectures</button>
</div>
</div>
<!-- Specific Recipients -->
<div class="mb-3">
<label class="block text-sm font-medium text-gray-700 mb-1">Specific Recipients</label>
<div class="flex items-center space-x-2 mb-2">
<input id="recipientNameInput" type="text" placeholder="Recipient name"
class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm">
<input id="recipientMmsiInput" type="text" placeholder="MMSI"
class="w-24 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
maxlength="9" pattern="\d*">
<button id="addRecipientBtn" class="px-3 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition">
<i class="fas fa-plus"></i>
</button>
</div>
<div id="recipientsList" class="flex flex-wrap"></div>
</div>
<!-- Current Recipients -->
<div class="text-sm font-medium text-gray-600">
Sending to: <span id="currentRecipients" class="text-blue-500">All prefectures</span>
</div>
</div>
</div>
</div>
<!-- Bell Totals Display -->
<div id="bellTotals" class="hidden fixed bottom-4 right-4 bg-white rounded-lg shadow-lg p-4 z-40">
<h3 class="font-medium text-gray-700 mb-2">Your Bell Totals</h3>
<div id="bellTotalsList" class="space-y-2">
<!-- Will be populated dynamically -->
</div>
<button id="closeBellTotals" class="mt-3 text-sm text-blue-500 hover:text-blue-700">
Close
</button>
</div>
<!-- Floating Shapes -->
<div class="fixed top-0 left-0 w-full h-full pointer-events-none overflow-hidden z-0">
<div class="absolute top-1/4 left-1/6 w-16 h-16 bg-blue-200 opacity-20 rounded-full floating shape-transition"></div>
<div class="absolute top-1/3 right-1/5 w-12 h-12 bg-indigo-200 opacity-20 triangle floating shape-transition" style="animation-delay: 1s;"></div>
<div class="absolute bottom-1/4 left-1/4 w-20 h-20 bg-purple-200 opacity-20 hexagon floating shape-transition" style="animation-delay: 2s;"></div>
<div class="absolute bottom-1/3 right-1/4 w-14 h-14 bg-pink-200 opacity-20 pentagon floating shape-transition" style="animation-delay: 3s;"></div>
<div class="absolute top-1/5 right-1/6 w-18 h-18 bg-yellow-200 opacity-20 octagon floating shape-transition" style="animation-delay: 1.5s;"></div>
<div class="absolute bottom-1/5 left-1/5 w-16 h-16 bg-green-200 opacity-20 diamond floating shape-transition" style="animation-delay: 2.5s;"></div>
<div class="absolute top-1/6 right-1/4 w-14 h-14 bg-orange-200 opacity-20 pennant floating shape-transition" style="animation-delay: 0.5s;"></div>
<div class="absolute bottom-1/6 left-1/3 w-16 h-16 bg-teal-200 opacity-20 swallowtail floating shape-transition" style="animation-delay: 1.8s;"></div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Elements
const messageInput = document.getElementById('messageInput');
const sendBtn = document.getElementById('sendBtn');
const messages = document.getElementById('messages');
const clearBtn = document.getElementById('clearBtn');
const syncBtn = document.getElementById('syncBtn');
const shapeBtn = document.getElementById('shapeBtn');
const shapeOptions = document.getElementById('shapeOptions');
const prefectureBtn = document.getElementById('prefectureBtn');
const prefectureOptions = document.getElementById('prefectureOptions');
const aquapodBroadcastBtn = document.getElementById('aquapodBroadcastBtn');
const aquapodBroadcastOptions = document.getElementById('aquapodBroadcastOptions');
const userShape = document.getElementById('userShape');
const usernameInput = document.getElementById('usernameInput');
const mmsiInput = document.getElementById('mmsiInput');
const connectionStatus = document.getElementById('connectionStatus');
const currentPrefectureDisplay = document.getElementById('currentPrefecture').querySelector('span');
const recipientNameInput = document.getElementById('recipientNameInput');
const recipientMmsiInput = document.getElementById('recipientMmsiInput');
const addRecipientBtn = document.getElementById('addRecipientBtn');
const recipientsList = document.getElementById('recipientsList');
const currentRecipientsDisplay = document.getElementById('currentRecipients');
const bellModal = document.getElementById('bellModal');
const bellCountInput = document.getElementById('bellCount');
const bellMessageInput = document.getElementById('bellMessage');
const confirmBellBtn = document.getElementById('confirmBellBtn');
const cancelBellBtn = document.getElementById('cancelBellBtn');
const bellTotals = document.getElementById('bellTotals');
const bellTotalsList = document.getElementById('bellTotalsList');
const closeBellTotals = document.getElementById('closeBellTotals');
// State
let currentShape = 'circle';
let currentPrefecture = null;
let username = 'User' + Math.floor(Math.random() * 1000);
let mmsi = '';
let isConnected = false;
let channel = null;
let recipientPrefecture = 'all';
let specificRecipients = [];
let bellTransactions = []; // Stores all bell transactions
let bellBalances = {}; // Stores current bell balances by recipient MMSI
// Initialize
usernameInput.value = username;
updateConnectionStatus(false);
updateRecipientsDisplay();
// Event Listeners
sendBtn.addEventListener('click', sendMessage);
messageInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') sendMessage();
});
clearBtn.addEventListener('click', clearMessages);
syncBtn.addEventListener('click', toggleConnection);
shapeBtn.addEventListener('click', toggleShapeOptions);
prefectureBtn.addEventListener('click', togglePrefectureOptions);
aquapodBroadcastBtn.addEventListener('click', toggleAquapodBroadcastOptions);
addRecipientBtn.addEventListener('click', addRecipient);
confirmBellBtn.addEventListener('click', confirmBellTransaction);
cancelBellBtn.addEventListener('click', cancelBellTransaction);
closeBellTotals.addEventListener('click', () => bellTotals.classList.add('hidden'));
// Toggle bell totals display when clicking on bell shape
document.querySelector('[data-shape="bell"]').addEventListener('click', function() {
if (currentShape === 'bell') {
updateBellTotalsDisplay();
bellTotals.classList.toggle('hidden');
}
});
// Recipient prefecture selection
document.querySelectorAll('[data-recipient-prefecture]').forEach(btn => {
btn.addEventListener('click', function() {
recipientPrefecture = this.dataset.recipientPrefecture;
specificRecipients = []; // Clear specific recipients when changing prefecture
updateRecipientsList();
updateRecipientsDisplay();
// Update active state
document.querySelectorAll('[data-recipient-prefecture]').forEach(b => {
b.classList.remove('bg-gray-200', 'text-gray-800');
const color = getColorForPrefecture(b.dataset.recipientPrefecture);
if (b.dataset.recipientPrefecture === 'all') {
b.classList.add('bg-gray-100', 'hover:bg-gray-200', 'text-gray-800');
} else {
b.classList.add(`bg-${color}-100`, `hover:bg-${color}-200`, `text-${color}-800`);
}
});
// Set active state for selected button
if (recipientPrefecture === 'all') {
this.classList.add('bg-gray-200', 'text-gray-800');
} else {
const color = getColorForPrefecture(recipientPrefecture);
this.classList.add(`bg-${color}-200`, `text-${color}-900`);
}
});
});
// Shape selection
document.querySelectorAll('#shapeOptions button').forEach(btn => {
btn.addEventListener('click', function() {
currentShape = this.dataset.shape;
// Special handling for bell shape
if (currentShape === 'bell') {
showBellModal();
} else {
updateUserShape();
toggleShapeOptions();
}
});
});
// Prefecture selection
document.querySelectorAll('#prefectureOptions button').forEach(btn => {
btn.addEventListener('click', function() {
currentPrefecture = this.dataset.prefecture;
currentPrefectureDisplay.textContent = this.textContent;
currentPrefectureDisplay.className = `text-${getColorForPrefecture(currentPrefecture)}-500`;
// Show/hide Aquapod broadcast button based on selected prefecture
if (currentPrefecture === 'aquapod') {
aquapodBroadcastBtn.classList.remove('hidden');
} else {
aquapodBroadcastBtn.classList.add('hidden');
aquapodBroadcastOptions.classList.add('hidden');
}
togglePrefectureOptions();
});
});
// Aquapod broadcast selection
document.querySelectorAll('#aquapodBroadcastOptions button').forEach(btn => {
btn.addEventListener('click', function() {
const broadcastType = this.dataset.broadcast;
let message = '';
switch(broadcastType) {
case 'alert':
message = "Aquapod Alert: All prefectures please be advised of potential marine disturbances in sector 4.";
break;
case 'resources':
message = "Aquapod Resource Update: New marine resources available for collection at buoy markers 12-15.";
break;
case 'meeting':
message = "Aquapod Meeting: All prefecture representatives required for monthly coordination at the central hub.";
break;
case 'emergency':
message = "Aquapod Emergency: Immediate assistance required at coordinates 34.5°N, 72.1°W. All available units respond.";
break;
case 'maintenance':
message = "Aquapod Maintenance: Desalination systems will be offline for scheduled maintenance tomorrow 0800-1200.";
break;
case 'custom':
message = prompt("Enter your broadcast message:", "Aquapod Broadcast: ");
if (!message) return;
break;
}
// Send to all prefectures
sendBroadcastMessage(message);
toggleAquapodBroadcastOptions();
});
});
usernameInput.addEventListener('change', function() {
username = this.value || 'Anonymous';
});
mmsiInput.addEventListener('input', function() {
// Validate MMSI input (only numbers, max 9 digits)
this.value = this.value.replace(/\D/g, '').slice(0, 9);
mmsi = this.value;
});
recipientMmsiInput.addEventListener('input', function() {
// Validate MMSI input (only numbers, max 9 digits)
this.value = this.value.replace(/\D/g, '').slice(0, 9);
});
// Functions
function sendMessage() {
const message = messageInput.value.trim();
if (!message) return;
// Create and display message with recipient info
let recipientInfo = '';
if (recipientPrefecture !== 'all' || specificRecipients.length > 0) {
recipientInfo = ` [To: ${getRecipientDescription()}]`;
}
displayMessage(message + recipientInfo, username, currentShape, currentPrefecture, true, mmsi);
// In a real app, this would broadcast to the selected recipients
// For demo purposes, we'll simulate responses from the selected prefecture(s)
setTimeout(() => {
if (isConnected) {
const respondingPrefectures = getRespondingPrefectures();
respondingPrefectures.forEach((prefecture, index) => {
setTimeout(() => {
displayMessage(
`${getPrefectureResponse(message, prefecture)}`,
`Prefecture ${prefecture.charAt(0).toUpperCase() + prefecture.slice(1)}`,
getRandomShape(),
prefecture,
false,
generateRandomMMSI()
);
}, 1000 + (index * 800));
});
}
}, 1000);
// Clear input
messageInput.value = '';
}
function sendBroadcastMessage(message) {
if (!message) return;
// Display the broadcast message with special styling
displayMessage(message, "Aquapod Broadcast", "wave", "aquapod", true, mmsi);
// Simulate responses from all prefectures
if (isConnected) {
const prefectures = ['diligence', 'industry', 'harmony', 'archive'];
prefectures.forEach((prefecture, index) => {
setTimeout(() => {
displayMessage(
`Prefecture ${prefecture.charAt(0).toUpperCase() + prefecture.slice(1)} acknowledges broadcast.`,
`Prefecture ${prefecture.charAt(0).toUpperCase() + prefecture.slice(1)}`,
getRandomShape(),
prefecture,
false,
generateRandomMMSI()
);
}, 1500 + (index * 800));
});
}
}
function addRecipient() {
const name = recipientNameInput.value.trim();
const mmsi = recipientMmsiInput.value.trim();
if (!name) return;
specificRecipients.push({
name: name,
mmsi: mmsi
});
recipientNameInput.value = '';
recipientMmsiInput.value = '';
updateRecipientsList();
updateRecipientsDisplay();
// If we have specific recipients, switch to "specific" mode
if (specificRecipients.length > 0 && recipientPrefecture !== 'specific') {
recipientPrefecture = 'specific';
updateRecipientsDisplay();
}
}
function removeRecipient(index) {
specificRecipients.splice(index, 1);
updateRecipientsList();
updateRecipientsDisplay();
// If no more specific recipients, switch back to "all"
if (specificRecipients.length === 0 && recipientPrefecture === 'specific') {
recipientPrefecture = 'all';
updateRecipientsDisplay();
}
}
function updateRecipientsList() {
recipientsList.innerHTML = '';
specificRecipients.forEach((recipient, index) => {
const chip = document.createElement('div');
chip.className = 'recipient-chip';
let chipText = recipient.name;
if (recipient.mmsi) {
chipText += ` (MMSI: ${recipient.mmsi})`;
}
chip.innerHTML = `
<span>${chipText}</span>
<button onclick="removeRecipient(${index})">
<i class="fas fa-times"></i>
</button>
`;
recipientsList.appendChild(chip);
});
}
function updateRecipientsDisplay() {
currentRecipientsDisplay.textContent = getRecipientDescription();
}
function getRecipientDescription() {
if (recipientPrefecture === 'all') {
return 'All prefectures';
} else if (recipientPrefecture === 'specific') {
if (specificRecipients.length === 0) {
return 'No recipients selected';
} else if (specificRecipients.length === 1) {
return specificRecipients[0].name + (specificRecipients[0].mmsi ? ` (MMSI: ${specificRecipients[0].mmsi})` : '');
} else {
return `${specificRecipients.length} specific recipients`;
}
} else {
return `Prefecture ${recipientPrefecture.charAt(0).toUpperCase() + recipientPrefecture.slice(1)}`;
}
}
function getRespondingPrefectures() {
if (recipientPrefecture === 'all') {
return ['diligence', 'industry', 'harmony', 'archive'];
} else if (recipientPrefecture === 'specific') {
return specificRecipients.length > 0 ?
[specificRecipients[0].name.toLowerCase().replace(/\s+/g, '-')] :
[];
} else {
return [recipientPrefecture];
}
}
function displayMessage(text, sender, shape, prefecture, isCurrentUser, mmsi = '') {
const messageDiv = document.createElement('div');
messageDiv.className = `flex ${isCurrentUser ? 'justify-end' : 'justify-start'}`;
const shapeDiv = document.createElement('div');
shapeDiv.className = `w-8 h-8 flex-shrink-0 flex items-center justify-center mr-2 ${isCurrentUser ? 'order-last ml-2' : 'mr-2'}`;
// Special case for Aquapod broadcast wave effect
if (shape === 'wave') {
shapeDiv.className += ' wave-animation bg-cyan-500 rounded-full';
const icon = document.createElement('i');
icon.className = 'fas fa-bullhorn text-white';
shapeDiv.appendChild(icon);
}
// Apply shape and special styling for flags and icons
else if (shape.startsWith('flag-')) {
shapeDiv.className += ` ${shape}`;
const icon = document.createElement('i');
icon.className = `fas fa-flag text-xs ${getFlagIconColor(shape)}`;
shapeDiv.appendChild(icon);
}
else if (shape === 'bell' || shape === 'food' || shape === 'work') {
shapeDiv.className += ` rounded-full bg-${getColorForShape(shape)}-500`;
const icon = document.createElement('i');
icon.className = `fas fa-${shape} text-white text-xs`;
shapeDiv.appendChild(icon);
}
else {
shapeDiv.classList.add('bg-' + getColorForShape(shape) + '-500');
if (shape !== 'circle') {
shapeDiv.classList.add(shape);
} else {
shapeDiv.classList.add('rounded-full');
}
const icon = document.createElement('i');
icon.className = `fas fa-${shape === 'circle' ? 'user' : 'shapes'} text-white text-xs`;
shapeDiv.appendChild(icon);
}
const contentDiv = document.createElement('div');
contentDiv.className = `max-w-xs ${isCurrentUser ? 'text-right' : 'text-left'}`;
const senderSpan = document.createElement('span');
senderSpan.className = `text-xs font-medium ${isCurrentUser ? 'text-blue-600' : 'text-gray-600'}`;
// Add MMSI to sender if provided
if (mmsi) {
senderSpan.innerHTML = `${sender} <span class="text-xs text-gray-500">(MMSI: ${mmsi})</span>`;
} else {
senderSpan.textContent = sender;
}
const textDiv = document.createElement('div');
textDiv.className = `mt-1 px-4 py-2 rounded-lg ${prefecture ? 'message-' + prefecture : 'bg-blue-500 text-white'} ${shape === 'wave' ? 'pulse' : ''}`;
textDiv.textContent = text;
contentDiv.appendChild(senderSpan);
contentDiv.appendChild(textDiv);
messageDiv.appendChild(isCurrentUser ? contentDiv : shapeDiv);
messageDiv.appendChild(isCurrentUser ? shapeDiv : contentDiv);
messages.appendChild(messageDiv);
messages.scrollTop = messages.scrollHeight;
}
function clearMessages() {
messages.innerHTML = `
<div class="flex justify-center">
<div class="bg-blue-100 text-blue-800 px-4 py-2 rounded-lg max-w-xs text-center">
<p>Chat cleared. Start a new conversation!</p>
</div>
</div>
`;
}
function toggleConnection() {
isConnected = !isConnected;
updateConnectionStatus(isConnected);
if (isConnected) {
// In a real app, this would establish a connection
displaySystemMessage('Connected to prefecture network. Messages are now synchronized.');
} else {
displaySystemMessage('Disconnected from prefecture network. Messages are no longer synchronized.');
}
}
function updateConnectionStatus(connected) {
const statusDot = connectionStatus.querySelector('div');
const statusText = connectionStatus.querySelector('span');
if (connected) {
statusDot.className = 'w-3 h-3 rounded-full bg-green-500 mr-2';
statusText.textContent = 'Connected';
syncBtn.innerHTML = '<i class="fas fa-unlink text-white"></i>';
} else {
statusDot.className = 'w-3 h-3 rounded-full bg-gray-400 mr-2';
statusText.textContent = 'Disconnected';
syncBtn.innerHTML = '<i class="fas fa-link text-white"></i>';
}
}
function toggleShapeOptions() {
shapeOptions.classList.toggle('hidden');
// Hide other options if visible
if (!prefectureOptions.classList.contains('hidden')) {
prefectureOptions.classList.add('hidden');
}
if (!aquapodBroadcastOptions.classList.contains('hidden')) {
aquapodBroadcastOptions.classList.add('hidden');
}
}
function togglePrefectureOptions() {
prefectureOptions.classList.toggle('hidden');
// Hide other options if visible
if (!shapeOptions.classList.contains('hidden')) {
shapeOptions.classList.add('hidden');
}
if (!aquapodBroadcastOptions.classList.contains('hidden')) {
aquapodBroadcastOptions.classList.add('hidden');
}
}
function toggleAquapodBroadcastOptions() {
if (currentPrefecture === 'aquapod') {
aquapodBroadcastOptions.classList.toggle('hidden');
// Hide other options if visible
if (!shapeOptions.classList.contains('hidden')) {
shapeOptions.classList.add('hidden');
}
if (!prefectureOptions.classList.contains('hidden')) {
prefectureOptions.classList.add('hidden');
}
}
}
function updateUserShape() {
// Clear all shape classes
userShape.className = 'w-10 h-10 flex items-center justify-center';
// Special case for icons
if (currentShape === 'bell' || currentShape === 'food' || currentShape === 'work') {
userShape.className += ` rounded-full bg-${getColorForShape(currentShape)}-500`;
const icon = userShape.querySelector('i') || document.createElement('i');
icon.className = `fas fa-${currentShape} text-white`;
if (!userShape.querySelector('i')) {
userShape.appendChild(icon);
}
}
// Apply shape and special styling for flags
else if (currentShape.startsWith('flag-')) {
userShape.className += ` ${currentShape}`;
const icon = userShape.querySelector('i') || document.createElement('i');
icon.className = `fas fa-flag ${getFlagIconColor(currentShape)}`;
if (!userShape.querySelector('i')) {
userShape.appendChild(icon);
}
} else {
userShape.classList.add('bg-' + getColorForShape(currentShape) + '-500');
if (currentShape !== 'circle') {
userShape.classList.add(currentShape);
} else {
userShape.classList.add('rounded-full');
}
// Update icon
const icon = userShape.querySelector('i') || document.createElement('i');
icon.className = `fas fa-${currentShape === 'circle' ? 'user' : 'shapes'} text-white`;
if (!userShape.querySelector('i')) {
userShape.appendChild(icon);
}
}
}
function displaySystemMessage(text) {
const div = document.createElement('div');
div.className = 'flex justify-center';
div.innerHTML = `
<div class="bg-gray-100 text-gray-600 px-4 py-2 rounded-lg max-w-xs text-center text-sm">
<p>${text}</p>
</div>
`;
messages.appendChild(div);
messages.scrollTop = messages.scrollHeight;
}
function getRandomShape() {
const shapes = [
'circle', 'triangle', 'square', 'hexagon', 'pentagon',
'octagon', 'diamond', 'pennant', 'swallowtail', 'burgee',
'houseflag', 'flag-alpha', 'flag-bravo', 'flag-charlie',
'flag-delta', 'flag-echo', 'flag-foxtrot', 'bell', 'food', 'work'
];
return shapes[Math.floor(Math.random() * shapes.length)];
}
function getRandomPrefecture() {
const prefectures = ['diligence', 'industry', 'harmony', 'aquapod', 'archive'];
return prefectures[Math.floor(Math.random() * prefectures.length)];
}
function generateRandomMMSI() {
// Generate a random 9-digit MMSI for simulated responses
return Math.floor(100000000 + Math.random() * 900000000).toString();
}
function getColorForShape(shape) {
const colors = {
'circle': 'blue',
'triangle': 'green',
'square': 'purple',
'hexagon': 'yellow',
'pentagon': 'red',
'octagon': 'pink',
'diamond': 'indigo',
'pennant': 'orange',
'swallowtail': 'teal',
'burgee': 'rose',
'houseflag': 'lime',
'bell': 'amber',
'food': 'emerald',
'work': 'slate'
};
return colors[shape] || 'blue';
}
function getColorForPrefecture(prefecture) {
const colors = {
'diligence': 'orange',
'industry': 'emerald',
'harmony': 'blue',
'aquapod': 'cyan',
'archive': 'violet'
};
return colors[prefecture] || 'blue';
}
function getFlagIconColor(flagShape) {
// Determine appropriate icon color based on flag colors
const flagColors = {
'flag-alpha': 'text-blue-600', // White/Blue - blue text for visibility
'flag-bravo': 'text-red-600', // Red/White - red text
'flag-charlie': 'text-white', // Blue/White/Red - white for contrast
'flag-delta': 'text-blue-600', // Yellow/Blue - blue text
'flag-echo': 'text-white', // Blue/Red/Blue - white for contrast
'flag-foxtrot': 'text-red-600' // White/Red - red text
};
return flagColors[flagShape] || 'text-white';
}
function getPrefectureResponse(message, prefecture) {
const responses = {
'diligence': `Regarding "${message}", our workers are already on it with maximum efficiency.`,
'industry': `"${message}" noted. Our factories will process this request immediately.`,
'harmony': `We appreciate your message about "${message}". Let's work together peacefully.`,
'aquapod': `"${message}" received. Our marine systems are analyzing this input.`,
'archive': `"${message}" has been recorded in our permanent knowledge banks.`
};
return responses[prefecture] || `Prefecture acknowledges: "${message}"`;
}
// Bell system functions
function showBellModal() {
bellModal.classList.remove('hidden');
bellCountInput.value = '1';
bellMessageInput.value = '';
}
function cancelBellTransaction() {
bellModal.classList.add('hidden');
toggleShapeOptions();
}
function confirmBellTransaction() {
const bellCount = parseInt(bellCountInput.value);
const bellMessage = bellMessageInput.value.trim();
if (bellCount < 1 || bellCount > 8) {
alert('Please enter a number between 1 and 8');
return;
}
// Get recipient MMSI (if specific recipient is selected)
let recipientMmsi = '';
if (recipientPrefecture === 'specific' && specificRecipients.length > 0) {
recipientMmsi = specificRecipients[0].mmsi;
}
// Record the transaction
const transaction = {
senderMmsi: mmsi,
recipientMmsi: recipientMmsi,
recipientPrefecture: recipientPrefecture,
bellCount: bellCount,
message: bellMessage,
timestamp: new Date().toISOString()
};
bellTransactions.push(transaction);
// Update bell balances
if (recipientMmsi) {
if (!bellBalances[recipientMmsi]) {
bellBalances[recipientMmsi] = 0;
}
bellBalances[recipientMmsi] += bellCount;
}
// Display the bell message
let displayMessage = `Sent ${bellCount} bell${bellCount !== 1 ? 's' : ''}`;
if (bellMessage) {
displayMessage += ` for: ${bellMessage}`;
}
if (recipientPrefecture === 'specific' && specificRecipients.length > 0) {
displayMessage += ` to ${specificRecipients[0].name}`;
if (recipientMmsi) {
displayMessage += ` (MMSI: ${recipientMmsi})`;
}
} else if (recipientPrefecture !== 'all') {
displayMessage += ` to Prefecture ${recipientPrefecture.charAt(0).toUpperCase() + recipientPrefecture.slice(1)}`;
}
displayMessage(displayMessage, username, 'bell', currentPrefecture, true, mmsi);
// Simulate response if connected
if (isConnected) {
setTimeout(() => {
const respondingPrefectures = getRespondingPrefectures();
respondingPrefectures.forEach((prefecture, index) => {
setTimeout(() => {
let responseMessage = '';
if (recipientPrefecture === 'specific' && specificRecipients.length > 0) {
responseMessage = `${specificRecipients[0].name} received ${bellCount} bell${bellCount !== 1 ? 's' : ''}`;
if (recipientMmsi) {
responseMessage += ` (Total: ${bellBalances[recipientMmsi] || bellCount} bells)`;
}
} else {
responseMessage = `Prefecture ${prefecture.charAt(0).toUpperCase() + prefecture.slice(1)} received ${bellCount} bell${bellCount !== 1 ? 's' : ''}`;
}
if (bellMessage) {
responseMessage += ` for: ${bellMessage}`;
}
displayMessage(
responseMessage,
recipientPrefecture === 'specific' && specificRecipients.length > 0 ?
specificRecipients[0].name :
`Prefecture ${prefecture.charAt(0).toUpperCase() + prefecture.slice(1)}`,
'bell',
prefecture,
false,
recipientPrefecture === 'specific' && specificRecipients.length > 0 ?
specificRecipients[0].mmsi || generateRandomMMSI() :
generateRandomMMSI()
);
}, 1000 + (index * 800));
});
}, 1000);
}
// Close modal and update UI
bellModal.classList.add('hidden');
updateUserShape();
toggleShapeOptions();
}
function updateBellTotalsDisplay() {
bellTotalsList.innerHTML = '';
if (Object.keys(bellBalances).length === 0) {
bellTotalsList.innerHTML = '<p class="text-sm text-gray-500">No bell transactions yet</p>';
return;
}
// Group transactions by recipient
const recipientGroups = {};
bellTransactions.forEach(tx => {
if (tx.recipientMmsi) {
if (!recipientGroups[tx.recipientMmsi]) {
recipientGroups[tx.recipientMmsi] = {
total: 0,
transactions: []
};
}
recipientGroups[tx.recipientMmsi].total += tx.bellCount;
recipientGroups[tx.recipientMmsi].transactions.push(tx);
}
});
// Display totals for each recipient
for (const [mmsi, data] of Object.entries(recipientGroups)) {
const recipientDiv = document.createElement('div');
recipientDiv.className = 'border-b pb-2 mb-2';
// Find recipient name if available
let recipientName = 'Unknown';
const recipient = specificRecipients.find(r => r.mmsi === mmsi);
if (recipient) {
recipientName = recipient.name;
}
recipientDiv.innerHTML = `
<div class="flex justify-between items-center">
<div>
<h4 class="text-sm font-medium">${recipientName}</h4>
<p class="text-xs text-gray-500">MMSI: ${mmsi}</p>
</div>
<div class="flex items-center">
<div class="w-6 h-6 rounded-full bg-amber-500 flex items-center justify-center mr-2">
<i class="fas fa-bell text-white text-xs"></i>
</div>
<span class="font-medium">${data.total}</span>
</div>
</div>
`;
// Add transaction details (collapsible)
const detailsDiv = document.createElement('div');
detailsDiv.className = 'mt-2 hidden';
data.transactions.forEach(tx => {
const txDiv = document.createElement('div');
txDiv.className = 'text-xs py-1 border-t border-gray-100';
txDiv.innerHTML = `
<div class="flex justify-between">
<span>${new Date(tx.timestamp).toLocaleTimeString()}</span>
<span class="font-medium">${tx.bellCount} bell${tx.bellCount !== 1 ? 's' : ''}</span>
</div>
${tx.message ? `<div class="text-gray-500 mt-1">"${tx.message}"</div>` : ''}
`;
detailsDiv.appendChild(txDiv);
});
recipientDiv.addEventListener('click', () => {
detailsDiv.classList.toggle('hidden');
});
recipientDiv.appendChild(detailsDiv);
bellTotalsList.appendChild(recipientDiv);
}
}
// Make removeRecipient function available globally for the onclick handler
window.removeRecipient = removeRecipient;
// Simulate metadata synchronization (in a real app, this would use WebRTC or similar)
setInterval(() => {
if (isConnected) {
// Update metadata tags to simulate synchronization
document.querySelector('meta[name="theme-color"]').content =
`#${Math.floor(Math.random()*16777215).toString(16)}`;
}
}, 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=privateuserh/honeycombxhat-beta1-04" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>