Spaces:

privateuserh
/

aqu-bells

Running

App Files Files Community

privateuserh commited on Apr 7, 2025

Commit

0a0f63c

verified ·

1 Parent(s): 4d91caa

Add 1 files

Browse files

Files changed (1) hide show

index.html +237 -90

index.html CHANGED Viewed

@@ -45,19 +45,53 @@
             height: 0;
             opacity: 0;
         }
     </style>
 </head>
 <body class="min-h-screen">
     <!-- Floating Action Buttons -->
     <div class="fixed bottom-6 right-6 space-y-3 z-50">
-        <button id="services-btn" class="w-14 h-14 bg-blue-600 text-white rounded-full flex items-center justify-center shadow-lg hover:bg-blue-700 transition">
-            <i class="fas fa-concierge-bell text-xl"></i>
-        </button>
-        <button id="defi-btn" class="w-14 h-14 bg-green-600 text-white rounded-full flex items-center justify-center shadow-lg hover:bg-green-700 transition">
-            <i class="fas fa-coins text-xl"></i>
-        </button>
-        <button id="contact-btn" class="w-14 h-14 bg-purple-600 text-white rounded-full flex items-center justify-center shadow-lg hover:bg-purple-700 transition">
-            <i class="fas fa-envelope text-xl"></i>
         </button>
     </div>
@@ -87,7 +121,7 @@
     <!-- Floating Panels -->
     <div id="services-panel" class="fixed bottom-0 left-0 right-0 bg-white rounded-t-3xl p-6 floating-panel closed transition-all duration-300 z-40" style="height: 70vh;">
         <div class="flex justify-between items-center mb-6">
-            <h2 class="text-2xl font-bold">Community Services</h2>
             <button id="close-services" class="text-gray-500 hover:text-gray-700">
                 <i class="fas fa-times text-xl"></i>
             </button>
@@ -95,67 +129,78 @@
         <div class="overflow-y-auto h-[calc(70vh-80px)] space-y-4">
             <div class="bg-gray-50 p-4 rounded-lg">
-                <div class="flex items-center">
-                    <div class="bg-blue-100 p-3 rounded-full mr-4">
-                        <i class="fas fa-home text-blue-600"></i>
                     </div>
-                    <div class="flex-grow">
-                        <h3 class="font-semibold">Floating Home Services</h3>
-                        <p class="text-gray-600 text-sm">Minor repairs and maintenance</p>
                     </div>
-                    <div class="text-blue-600 font-bold">10 AQUAPOD/bell</div>
-                </div>
-            </div>
-            <div class="bg-gray-50 p-4 rounded-lg">
-                <div class="flex items-center">
-                    <div class="bg-blue-100 p-3 rounded-full mr-4">
-                        <i class="fas fa-ship text-blue-600"></i>
                     </div>
-                    <div class="flex-grow">
-                        <h3 class="font-semibold">Marine Services</h3>
-                        <p class="text-gray-600 text-sm">Vessel cleaning and maintenance</p>
                     </div>
-                    <div class="text-blue-600 font-bold">2 bells</div>
-                </div>
-            </div>
-            <div class="bg-gray-50 p-4 rounded-lg">
-                <div class="flex items-center">
-                    <div class="bg-blue-100 p-3 rounded-full mr-4">
-                        <i class="fas fa-chalkboard-teacher text-blue-600"></i>
                     </div>
-                    <div class="flex-grow">
-                        <h3 class="font-semibold">DIY Workshops</h3>
-                        <p class="text-gray-600 text-sm">Learn pod maintenance skills</p>
                     </div>
-                    <div class="text-blue-600 font-bold">2 bells/person</div>
-                </div>
-            </div>
-            <div class="bg-gray-50 p-4 rounded-lg">
-                <div class="flex items-center">
-                    <div class="bg-blue-100 p-3 rounded-full mr-4">
-                        <i class="fas fa-tshirt text-blue-600"></i>
                     </div>
-                    <div class="flex-grow">
-                        <h3 class="font-semibold">Local Crafts</h3>
-                        <p class="text-gray-600 text-sm">Handcrafted community items</p>
                     </div>
-                    <div class="text-blue-600 font-bold">Varies</div>
                 </div>
             </div>
-            <div class="bg-gray-50 p-4 rounded-lg">
-                <div class="flex items-center">
-                    <div class="bg-blue-100 p-3 rounded-full mr-4">
-                        <i class="fas fa-utensils text-blue-600"></i>
                     </div>
-                    <div class="flex-grow">
-                        <h3 class="font-semibold">Community Meal Kits</h3>
-                        <p class="text-gray-600 text-sm">Weekly fresh ingredient delivery</p>
                     </div>
-                    <div class="text-blue-600 font-bold">Subscription</div>
                 </div>
             </div>
         </div>
@@ -163,7 +208,7 @@
     <div id="defi-panel" class="fixed bottom-0 left-0 right-0 bg-white rounded-t-3xl p-6 floating-panel closed transition-all duration-300 z-40" style="height: 70vh;">
         <div class="flex justify-between items-center mb-6">
-            <h2 class="text-2xl font-bold">DeFi Exchange</h2>
             <button id="close-defi" class="text-gray-500 hover:text-gray-700">
                 <i class="fas fa-times text-xl"></i>
             </button>
@@ -214,6 +259,14 @@
                         <span class="text-gray-600">1 AQUAPOD =</span>
                         <span class="font-medium">0.00015 BCH</span>
                     </div>
                 </div>
             </div>
@@ -224,40 +277,59 @@
         </div>
     </div>
-    <div id="contact-panel" class="fixed bottom-0 left-0 right-0 bg-white rounded-t-3xl p-6 floating-panel closed transition-all duration-300 z-40" style="height: 70vh;">
         <div class="flex justify-between items-center mb-6">
-            <h2 class="text-2xl font-bold">Contact Aquapod</h2>
-            <button id="close-contact" class="text-gray-500 hover:text-gray-700">
                 <i class="fas fa-times text-xl"></i>
             </button>
         </div>
         <div class="overflow-y-auto h-[calc(70vh-80px)] space-y-4">
-            <form>
-                <div class="mb-4">
-                    <label class="block text-gray-700 mb-2">Name</label>
-                    <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
-                </div>
-                <div class="mb-4">
-                    <label class="block text-gray-700 mb-2">Email</label>
-                    <input type="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
                 </div>
-                <div class="mb-4">
-                    <label class="block text-gray-700 mb-2">Message</label>
-                    <textarea rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"></textarea>
                 </div>
-                <button type="submit" class="w-full bg-purple-600 text-white py-3 rounded-lg font-semibold hover:bg-purple-700 transition">
-                    Send Message
                 </button>
-            </form>
-            <div class="pt-4 mt-4 border-t border-gray-200">
-                <h3 class="font-semibold mb-2">Community Support</h3>
-                <p class="text-gray-600 text-sm">Email: support@aquapod.com</p>
-                <p class="text-gray-600 text-sm">Phone: +1 (555) 123-4567</p>
             </div>
         </div>
     </div>
@@ -326,6 +398,7 @@
             // Update UI
             document.getElementById('bell-count').textContent = currentBell.bells;
             document.getElementById('bell-time').textContent = formatTime(currentBell.time);
             document.getElementById('bell-duration').textContent = `${currentBell.bells} Bell${currentBell.bells > 1 ? 's' : ''} (${currentBell.duration})`;
@@ -365,31 +438,31 @@
         // Floating panel controls
         const servicesBtn = document.getElementById('services-btn');
         const defiBtn = document.getElementById('defi-btn');
-        const contactBtn = document.getElementById('contact-btn');
         const servicesPanel = document.getElementById('services-panel');
         const defiPanel = document.getElementById('defi-panel');
-        const contactPanel = document.getElementById('contact-panel');
         const closeServices = document.getElementById('close-services');
         const closeDefi = document.getElementById('close-defi');
-        const closeContact = document.getElementById('close-contact');
         // Toggle panels
         servicesBtn.addEventListener('click', () => {
             servicesPanel.classList.remove('closed');
             defiPanel.classList.add('closed');
-            contactPanel.classList.add('closed');
         });
         defiBtn.addEventListener('click', () => {
             defiPanel.classList.remove('closed');
             servicesPanel.classList.add('closed');
-            contactPanel.classList.add('closed');
         });
-        contactBtn.addEventListener('click', () => {
-            contactPanel.classList.remove('closed');
             servicesPanel.classList.add('closed');
             defiPanel.classList.add('closed');
         });
@@ -403,8 +476,8 @@
             defiPanel.classList.add('closed');
         });
-        closeContact.addEventListener('click', () => {
-            contactPanel.classList.add('closed');
         });
         // Close panels when clicking outside
@@ -417,8 +490,82 @@
                 defiPanel.classList.add('closed');
             }
-            if (!contactPanel.contains(e.target) && e.target !== contactBtn) {
-                contactPanel.classList.add('closed');
             }
         });
     </script>

             height: 0;
             opacity: 0;
         }
+        .bell-badge {
+            position: absolute;
+            top: -5px;
+            right: -5px;
+            background-color: #ef4444;
+            color: white;
+            border-radius: 50%;
+            width: 24px;
+            height: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+            font-weight: bold;
+        }
+        .recording {
+            animation: pulse 1.5s infinite;
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
+            70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
+        }
     </style>
 </head>
 <body class="min-h-screen">
     <!-- Floating Action Buttons -->
     <div class="fixed bottom-6 right-6 space-y-3 z-50">
+        <div class="relative">
+            <button id="services-btn" class="w-14 h-14 bg-blue-600 text-white rounded-full flex items-center justify-center shadow-lg hover:bg-blue-700 transition">
+                <i class="fas fa-bell text-xl"></i>
+            </button>
+            <div id="bell-badge" class="bell-badge">1</div>
+        </div>
+        <div class="relative">
+            <button id="defi-btn" class="w-14 h-14 bg-green-600 text-white rounded-full flex items-center justify-center shadow-lg hover:bg-green-700 transition">
+                <i class="fas fa-coins text-xl"></i>
+            </button>
+            <div class="bell-badge" style="background-color: #f59e0b;">1:4</div>
+        </div>
+        <button id="broadcast-btn" class="w-14 h-14 bg-purple-600 text-white rounded-full flex items-center justify-center shadow-lg hover:bg-purple-700 transition">
+            <i class="fas fa-microphone text-xl"></i>
         </button>
     </div>
     <!-- Floating Panels -->
     <div id="services-panel" class="fixed bottom-0 left-0 right-0 bg-white rounded-t-3xl p-6 floating-panel closed transition-all duration-300 z-40" style="height: 70vh;">
         <div class="flex justify-between items-center mb-6">
+            <h2 class="text-2xl font-bold">Bell Schedule</h2>
             <button id="close-services" class="text-gray-500 hover:text-gray-700">
                 <i class="fas fa-times text-xl"></i>
             </button>
         <div class="overflow-y-auto h-[calc(70vh-80px)] space-y-4">
             <div class="bg-gray-50 p-4 rounded-lg">
+                <h3 class="font-semibold mb-3 text-center">Current Bell Periods</h3>
+                <div class="grid grid-cols-2 gap-3">
+                    <div class="bg-blue-100 p-3 rounded-lg text-center">
+                        <div class="text-blue-800 font-bold">1 Bell</div>
+                        <div class="text-sm text-blue-600">1:30 Hours</div>
                     </div>
+                    <div class="bg-blue-100 p-3 rounded-lg text-center">
+                        <div class="text-blue-800 font-bold">2 Bells</div>
+                        <div class="text-sm text-blue-600">2:00 Hours</div>
                     </div>
+                    <div class="bg-blue-100 p-3 rounded-lg text-center">
+                        <div class="text-blue-800 font-bold">3 Bells</div>
+                        <div class="text-sm text-blue-600">2:30 Hours</div>
                     </div>
+                    <div class="bg-blue-100 p-3 rounded-lg text-center">
+                        <div class="text-blue-800 font-bold">4 Bells</div>
+                        <div class="text-sm text-blue-600">3:00 Hours</div>
                     </div>
+                    <div class="bg-blue-100 p-3 rounded-lg text-center">
+                        <div class="text-blue-800 font-bold">5 Bells</div>
+                        <div class="text-sm text-blue-600">3:30 Hours</div>
                     </div>
+                    <div class="bg-blue-100 p-3 rounded-lg text-center">
+                        <div class="text-blue-800 font-bold">6 Bells</div>
+                        <div class="text-sm text-blue-600">4:00 Hours</div>
                     </div>
+                    <div class="bg-blue-100 p-3 rounded-lg text-center">
+                        <div class="text-blue-800 font-bold">7 Bells</div>
+                        <div class="text-sm text-blue-600">4:30 Hours</div>
                     </div>
+                    <div class="bg-blue-100 p-3 rounded-lg text-center">
+                        <div class="text-blue-800 font-bold">8 Bells</div>
+                        <div class="text-sm text-blue-600">5:00 Hours</div>
                     </div>
                 </div>
             </div>
+            <div class="bg-white border border-gray-200 rounded-lg p-4">
+                <h3 class="font-semibold mb-2">Current Bell Costs</h3>
+                <div class="space-y-2">
+                    <div class="flex justify-between">
+                        <span class="text-gray-600">1 Bell:</span>
+                        <span class="font-medium">10 AQUAPOD</span>
                     </div>
+                    <div class="flex justify-between">
+                        <span class="text-gray-600">2 Bells:</span>
+                        <span class="font-medium">15 AQUAPOD</span>
+                    </div>
+                    <div class="flex justify-between">
+                        <span class="text-gray-600">3 Bells:</span>
+                        <span class="font-medium">20 AQUAPOD</span>
+                    </div>
+                    <div class="flex justify-between">
+                        <span class="text-gray-600">4 Bells:</span>
+                        <span class="font-medium">25 AQUAPOD</span>
+                    </div>
+                    <div class="flex justify-between">
+                        <span class="text-gray-600">5 Bells:</span>
+                        <span class="font-medium">30 AQUAPOD</span>
+                    </div>
+                    <div class="flex justify-between">
+                        <span class="text-gray-600">6 Bells:</span>
+                        <span class="font-medium">35 AQUAPOD</span>
+                    </div>
+                    <div class="flex justify-between">
+                        <span class="text-gray-600">7 Bells:</span>
+                        <span class="font-medium">40 AQUAPOD</span>
+                    </div>
+                    <div class="flex justify-between">
+                        <span class="text-gray-600">8 Bells:</span>
+                        <span class="font-medium">45 AQUAPOD</span>
                     </div>
                 </div>
             </div>
         </div>
     <div id="defi-panel" class="fixed bottom-0 left-0 right-0 bg-white rounded-t-3xl p-6 floating-panel closed transition-all duration-300 z-40" style="height: 70vh;">
         <div class="flex justify-between items-center mb-6">
+            <h2 class="text-2xl font-bold">DeFi Exchange Rates</h2>
             <button id="close-defi" class="text-gray-500 hover:text-gray-700">
                 <i class="fas fa-times text-xl"></i>
             </button>
                         <span class="text-gray-600">1 AQUAPOD =</span>
                         <span class="font-medium">0.00015 BCH</span>
                     </div>
+                    <div class="flex justify-between">
+                        <span class="text-gray-600">1 XLM =</span>
+                        <span class="font-medium">4 AQUAPOD</span>
+                    </div>
+                    <div class="flex justify-between">
+                        <span class="text-gray-600">1 BCH =</span>
+                        <span class="font-medium">6666.67 AQUAPOD</span>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
+    <div id="broadcast-panel" class="fixed bottom-0 left-0 right-0 bg-white rounded-t-3xl p-6 floating-panel closed transition-all duration-300 z-40" style="height: 70vh;">
         <div class="flex justify-between items-center mb-6">
+            <h2 class="text-2xl font-bold">Community Broadcast</h2>
+            <button id="close-broadcast" class="text-gray-500 hover:text-gray-700">
                 <i class="fas fa-times text-xl"></i>
             </button>
         </div>
         <div class="overflow-y-auto h-[calc(70vh-80px)] space-y-4">
+            <div class="bg-gray-50 p-4 rounded-lg text-center">
+                <p class="text-gray-600 mb-4">Record a message that will be transmitted to the community support line:</p>
+                <p class="font-semibold text-blue-600 mb-2"><i class="fas fa-phone-alt mr-2"></i>+1 (555) 123-4567</p>
+                <div id="recording-status" class="hidden bg-red-100 text-red-800 p-2 rounded-lg mb-4">
+                    <i class="fas fa-circle mr-2"></i> Recording in progress...
                 </div>
+                <div id="transcription-result" class="hidden bg-blue-50 p-4 rounded-lg mb-4 text-left">
+                    <h4 class="font-semibold mb-2">Your message:</h4>
+                    <p id="transcription-text" class="text-gray-700"></p>
                 </div>
+                <button id="record-btn" class="w-20 h-20 bg-red-500 text-white rounded-full flex items-center justify-center shadow-lg mx-auto mb-4 hover:bg-red-600 transition">
+                    <i class="fas fa-microphone text-2xl"></i>
                 </button>
+                <p class="text-sm text-gray-500">Press and hold to record your message</p>
+                <div class="mt-6">
+                    <button id="send-btn" class="w-full bg-purple-600 text-white py-3 rounded-lg font-semibold hover:bg-purple-700 transition disabled:opacity-50" disabled>
+                        Send Broadcast Message
+                    </button>
+                </div>
+            </div>
+            <div class="bg-white border border-gray-200 rounded-lg p-4">
+                <h3 class="font-semibold mb-2">Recent Broadcasts</h3>
+                <div class="space-y-3">
+                    <div class="border-b border-gray-100 pb-3">
+                        <div class="flex justify-between text-sm text-gray-500 mb-1">
+                            <span>Yesterday, 3:42 PM</span>
+                            <span>Sent to +1 (555) 123-4567</span>
+                        </div>
+                        <p class="text-gray-700">"Need assistance with water filtration system on pod #42"</p>
+                    </div>
+                    <div class="border-b border-gray-100 pb-3">
+                        <div class="flex justify-between text-sm text-gray-500 mb-1">
+                            <span>Today, 10:15 AM</span>
+                            <span>Sent to +1 (555) 123-4567</span>
+                        </div>
+                        <p class="text-gray-700">"Reporting a leak in the communal area near docking station 3"</p>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
             // Update UI
             document.getElementById('bell-count').textContent = currentBell.bells;
+            document.getElementById('bell-badge').textContent = currentBell.bells;
             document.getElementById('bell-time').textContent = formatTime(currentBell.time);
             document.getElementById('bell-duration').textContent = `${currentBell.bells} Bell${currentBell.bells > 1 ? 's' : ''} (${currentBell.duration})`;
         // Floating panel controls
         const servicesBtn = document.getElementById('services-btn');
         const defiBtn = document.getElementById('defi-btn');
+        const broadcastBtn = document.getElementById('broadcast-btn');
         const servicesPanel = document.getElementById('services-panel');
         const defiPanel = document.getElementById('defi-panel');
+        const broadcastPanel = document.getElementById('broadcast-panel');
         const closeServices = document.getElementById('close-services');
         const closeDefi = document.getElementById('close-defi');
+        const closeBroadcast = document.getElementById('close-broadcast');
         // Toggle panels
         servicesBtn.addEventListener('click', () => {
             servicesPanel.classList.remove('closed');
             defiPanel.classList.add('closed');
+            broadcastPanel.classList.add('closed');
         });
         defiBtn.addEventListener('click', () => {
             defiPanel.classList.remove('closed');
             servicesPanel.classList.add('closed');
+            broadcastPanel.classList.add('closed');
         });
+        broadcastBtn.addEventListener('click', () => {
+            broadcastPanel.classList.remove('closed');
             servicesPanel.classList.add('closed');
             defiPanel.classList.add('closed');
         });
             defiPanel.classList.add('closed');
         });
+        closeBroadcast.addEventListener('click', () => {
+            broadcastPanel.classList.add('closed');
         });
         // Close panels when clicking outside
                 defiPanel.classList.add('closed');
             }
+            if (!broadcastPanel.contains(e.target) && e.target !== broadcastBtn) {
+                broadcastPanel.classList.add('closed');
+            }
+        });
+        // Broadcast recording functionality
+        const recordBtn = document.getElementById('record-btn');
+        const recordingStatus = document.getElementById('recording-status');
+        const transcriptionResult = document.getElementById('transcription-result');
+        const transcriptionText = document.getElementById('transcription-text');
+        const sendBtn = document.getElementById('send-btn');
+        let isRecording = false;
+        let recordingTimeout;
+        let recordedMessage = "";
+        recordBtn.addEventListener('mousedown', startRecording);
+        recordBtn.addEventListener('touchstart', startRecording);
+        recordBtn.addEventListener('mouseup', stopRecording);
+        recordBtn.addEventListener('touchend', stopRecording);
+        recordBtn.addEventListener('mouseleave', stopRecording);
+        function startRecording(e) {
+            e.preventDefault();
+            if (!isRecording) {
+                isRecording = true;
+                recordBtn.classList.add('recording');
+                recordingStatus.classList.remove('hidden');
+                transcriptionResult.classList.add('hidden');
+                sendBtn.disabled = true;
+                // Simulate recording for 3 seconds
+                recordingTimeout = setTimeout(() => {
+                    stopRecording(e);
+                    // Simulate transcription result
+                    recordedMessage = "This is a simulated transcription of your recorded message about the Aquapod community.";
+                    transcriptionText.textContent = recordedMessage;
+                    transcriptionResult.classList.remove('hidden');
+                    sendBtn.disabled = false;
+                }, 3000);
+            }
+        }
+        function stopRecording(e) {
+            e.preventDefault();
+            if (isRecording) {
+                isRecording = false;
+                clearTimeout(recordingTimeout);
+                recordBtn.classList.remove('recording');
+                recordingStatus.classList.add('hidden');
+            }
+        }
+        sendBtn.addEventListener('click', () => {
+            if (recordedMessage) {
+                alert(`Message sent to community support: "${recordedMessage}"`);
+                sendBtn.disabled = true;
+                // Add to recent broadcasts
+                const now = new Date();
+                const timeString = now.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
+                const recentBroadcasts = document.querySelector('#broadcast-panel .bg-white.border');
+                const newBroadcast = document.createElement('div');
+                newBroadcast.className = 'border-b border-gray-100 pb-3';
+                newBroadcast.innerHTML = `
+                    <div class="flex justify-between text-sm text-gray-500 mb-1">
+                        <span>Just now</span>
+                        <span>Sent to +1 (555) 123-4567</span>
+                    </div>
+                    <p class="text-gray-700">"${recordedMessage}"</p>
+                `;
+                recentBroadcasts.insertBefore(newBroadcast, recentBroadcasts.firstChild);
             }
         });
     </script>