Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ let activeMarker = null;
+ const chatMessages = document.getElementById('chatMessages');
+ const messageInput = document.getElementById('messageInput');
+ const sendButton = document.getElementById('sendButton');
+ const recordToggle = document.getElementById('recordToggle');
+ const deviceStatus = document.getElementById('deviceStatus');
+
+ // Handle marker clicks
+ document.querySelectorAll('.marker').forEach(marker => {
+ marker.addEventListener('click', () => {
+ activeMarker = marker.dataset.id;
+ // Simulate centering map
+ marker.scrollIntoView({ behavior: 'smooth', block: 'center' });
+ addMessage('System', `Selected marker ${activeMarker}`);
+ });
+ });
+
+ // Handle message sending
+ function sendMessage() {
+ const text = messageInput.value.trim();
+ if (!text) return;
+
+ // Simulate backend communication
+ const payload = {
+ text,
+ marker: activeMarker || 'no'
+ };
+
+ addMessage('You', text);
+ console.log('Sending to backend:', payload);
+
+ messageInput.value = '';
+ }
+
+ function addMessage(sender, text) {
+ const messageDiv = document.createElement('div');
+ messageDiv.className = 'message';
+ messageDiv.innerHTML = `${sender}: ${text}`;
+ chatMessages.appendChild(messageDiv);
+ chatMessages.scrollTop = chatMessages.scrollHeight;
+ }
+
+ sendButton.addEventListener('click', sendMessage);
+ messageInput.addEventListener('keypress', (e) => {
+ if (e.key === 'Enter') sendMessage();
+ });
+
+ // Device control page
+ let isRecording = false;
+ recordToggle.addEventListener('click', () => {
+ isRecording = !isRecording;
+ recordToggle.textContent = isRecording ? 'Stop Recording' : 'Start Recording';
+ recordToggle.style.background = isRecording ? '#e74c3c' : '#3498db';
+ deviceStatus.textContent = isRecording ? 'Recording' : 'Standby';
+ });
+
+ // Navigation
+ document.querySelectorAll('nav a').forEach(link => {
+ link.addEventListener('click', (e) => {
+ e.preventDefault();
+ document.querySelectorAll('nav a').forEach(l => l.classList.remove('active'));
+ link.classList.add('active');
+
+ const isDeviceView = link.getAttribute('href') === '#device';
+ document.querySelector('main').style.display = isDeviceView ? 'none' : 'grid';
+ document.getElementById('device').style.display = isDeviceView ? 'block' : 'none';
+ });
+ });
+ });