Spaces:

privateuserh
/

Honeycomb-xhat04

Running

App Files Files Community

privateuserh commited on Apr 25

Commit

f9b3e8c

verified ·

1 Parent(s): 812b225

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +1243 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Honeycombxhat Beta1 04
-emoji: 🚀
-colorFrom: blue
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: honeycombxhat-beta1-04
+emoji: 🐳
+colorFrom: gray
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1243 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ Modify the bells option when selected allow the sender to input how many bells to send to the recipient and display the total bells received by the recipient utilizing the recipient MMSI the recipient should only see the total bells received the sender sees the amount sent Aquapod: Live, Work, Thrive on the Water with a Bell-Based, DeFi-Powered Economy Summary: Aquapod redefines waterfront living with a unique, collaborative community. Our custom cryptocurrency, AQUAPOD, fuels resident-made products and services. But that's not all – Aquapod integrates with the exciting world of Decentralized Finance (DeFi) for wider economic opportunities. The Bell System: A Nautical Twist on Time Move over clocks, Aquapod uses a fun and thematic bell system to determine service costs. One bell translates to a specific time duration, keeping the economic pulse of our community in perfect rhythm with the water. Here's a breakdown of bells and their corresponding times: One Bell (1:30 Hours): 12:30 PM, 4:30 PM, 8:30 PM Two Bells (2 Hours): 1:00 PM, 5:00 PM, 9:00 PM Three Bells (2.5 Hours): 1:30 PM, 5:30 PM, 9:30 PM Four Bells (3 Hours): 2:00 PM, 6:00 PM, 10:00 PM Five Bells (3.5 Hours): 2:30 PM, 6:30 PM, 10:30 PM Six Bells (4 Hours): 3:00 PM, 7:00 PM, 11:00 PM Seven Bells (4.5 Hours): 3:30 PM, 7:30 PM, 11:30 PM Eight Bells (5 Hours): 4:00 PM, 8:00 PM, Midnight The exact service cost in AQUAPOD per bell will be determined by the community based on average completion times and desired compensation. Products and Services: Residents can offer a variety of skills and goods priced in AQUAPOD. Here are some examples: Custom Housepod/Floating Home Services: Minor repairs, consultations, and painting (e.g., 10 AQUAPOD/bell). Marine Services: Vessel cleaning and basic engine maintenance (e.g., small pod cleaning - 2 bells, Kwh charge - 3 bells). DIY Workshops & Classes: Learn valuable skills like pod maintenance (e.g., Intro to pod Maintenance - 2 bells/person). Local Crafts & Goods: Showcase your talents and sell handcrafted items (prices set individually in AQUAPOD). Subscription Services: Enjoy marina concierge or community meal kits for a monthly AQUAPOD fee. DeFi Integration: Your Gateway to a Wider World AQUAPOD, the heart of our internal economy, is also interoperable with the DeFi ecosystem, offering exciting possibilities: Pegged Stability: AQUAPOD is pegged to a basket of established cryptocurrencies like Stellar Lumens (XLM) and Bitcoin Cash (BCH) (soon). This peg provides stability and allows for easier exchange with other digital assets. Seamless Transactions: Residents can use DeFi platforms to exchange AQUAPOD for XLM or BCH, enabling them to: Purchase external goods and services: Need something unavailable within Aquapod? Convert your AQUAPOD to XLM or BCH for wider online purchases. Explore DeFi opportunities: Invest in lending, borrowing, and other DeFi protocols using your converted XLM or BCH. Attract New Residents & Businesses: The DeFi connection makes Aquapod more attractive. People with existing XLM or BCH holdings can easily convert them to AQUAPOD and participate in our unique economy. Benefits: Unique Bell System: A fun and thematic way to manage the community's economy. Flexibility & Collaboration: Barter skills and services using the bell system, promoting self-sufficiency and community spirit. DeFi Connection: Opens doors to wider financial opportunities and fosters a future-proof community. Join Aquapod and experience a vibrant community on the water with a one-of-a-kind, bell-based economy seamlessly connected to the DeFi world!