Spaces:

drbaker171
/

sp

Running

App Files Files Community

drbaker171 commited on Apr 7, 2025

Commit

71e2585

verified ·

1 Parent(s): 7d73721

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +687 -19

README.md CHANGED Viewed

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

 ---
+title: sp
+emoji: 🐳
+colorFrom: pink
+colorTo: blue
 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,687 @@
-<!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">
+    <title>Serial Port Manager with Chrome Extension</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>
+        .gradient-bg {
+            background: linear-gradient(135deg, #6b73ff 0%, #000dff 100%);
+        }
+        .policy-card {
+            transition: all 0.3s ease;
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        }
+        .policy-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+        .code-block {
+            font-family: 'Courier New', Courier, monospace;
+            background-color: #2d3748;
+            color: #f7fafc;
+            border-radius: 0.375rem;
+        }
+        .tab-active {
+            border-bottom: 3px solid #4f46e5;
+            color: #4f46e5;
+            font-weight: 600;
+        }
+        .fade-in {
+            animation: fadeIn 0.5s ease-in;
+        }
+        .serial-console {
+            height: 200px;
+            overflow-y: auto;
+            background-color: #1a202c;
+            color: #e2e8f0;
+            padding: 1rem;
+            border-radius: 0.375rem;
+            font-family: monospace;
+            white-space: pre-wrap;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+        .blink {
+            animation: blink 1s step-end infinite;
+        }
+        @keyframes blink {
+            from, to { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <div class="gradient-bg text-white py-12 px-4 sm:px-6 lg:px-8">
+        <div class="max-w-4xl mx-auto text-center">
+            <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
+                <i class="fas fa-plug mr-3"></i> Serial Port Manager
+            </h1>
+            <p class="mt-6 text-xl text-blue-100 max-w-3xl mx-auto">
+                Manage serial port permissions and communicate with devices
+            </p>
+        </div>
+    </div>
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Serial Port Control Card -->
+            <div class="policy-card bg-white rounded-xl p-6 col-span-2">
+                <div class="flex items-center mb-6">
+                    <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4">
+                        <i class="fas fa-microchip text-2xl"></i>
+                    </div>
+                    <h2 class="text-2xl font-bold text-gray-800">Serial Port Control</h2>
+                </div>
+                <div class="space-y-6">
+                    <div class="flex flex-col sm:flex-row gap-4">
+                        <button id="requestPortBtn" class="flex-1 px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center justify-center">
+                            <i class="fas fa-plug mr-2"></i> Request Port
+                        </button>
+                        <button id="connectBtn" disabled class="flex-1 px-4 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition flex items-center justify-center">
+                            <i class="fas fa-link mr-2"></i> Connect
+                        </button>
+                        <button id="disconnectBtn" disabled class="flex-1 px-4 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition flex items-center justify-center">
+                            <i class="fas fa-unlink mr-2"></i> Disconnect
+                        </button>
+                    </div>
+                    <div id="portInfo" class="hidden bg-gray-50 p-4 rounded-lg">
+                        <div class="grid grid-cols-2 gap-4">
+                            <div>
+                                <h3 class="text-sm font-medium text-gray-500">Selected Port</h3>
+                                <p id="portName" class="mt-1 text-sm font-semibold text-gray-900">-</p>
+                            </div>
+                            <div>
+                                <h3 class="text-sm font-medium text-gray-500">Connection Status</h3>
+                                <p id="connectionStatus" class="mt-1 text-sm font-semibold text-gray-900">Disconnected</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div>
+                        <label for="baudRate" class="block text-sm font-medium text-gray-700 mb-1">Baud Rate</label>
+                        <select id="baudRate" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
+                            <option>9600</option>
+                            <option>19200</option>
+                            <option selected>115200</option>
+                            <option>57600</option>
+                            <option>38400</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label for="dataInput" class="block text-sm font-medium text-gray-700 mb-1">Send Data</label>
+                        <div class="mt-1 flex rounded-md shadow-sm">
+                            <input type="text" id="dataInput" class="focus:ring-blue-500 focus:border-blue-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300" placeholder="Enter data to send">
+                            <button id="sendDataBtn" disabled class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-r-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                                Send
+                            </button>
+                        </div>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Serial Console</label>
+                        <div id="serialConsole" class="serial-console">
+                            <div class="text-gray-400">No data received yet...</div>
+                        </div>
+                        <div class="mt-2 flex justify-between">
+                            <button id="clearConsoleBtn" class="px-3 py-1 bg-gray-200 text-gray-700 rounded text-sm hover:bg-gray-300">
+                                Clear Console
+                            </button>
+                            <div class="flex items-center text-sm text-gray-500">
+                                <span id="bytesReceived">0</span> bytes received
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Quick Actions Card -->
+            <div class="policy-card bg-white rounded-xl p-6">
+                <div class="flex items-center mb-6">
+                    <div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4">
+                        <i class="fas fa-bolt text-2xl"></i>
+                    </div>
+                    <h2 class="text-2xl font-bold text-gray-800">Quick Actions</h2>
+                </div>
+                <div class="space-y-4">
+                    <button onclick="showPolicyEditor()" class="w-full flex items-center justify-between px-4 py-3 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-100 transition">
+                        <span>Add New URL Policy</span>
+                        <i class="fas fa-plus"></i>
+                    </button>
+                    <button onclick="showExamples()" class="w-full flex items-center justify-between px-4 py-3 bg-green-50 text-green-600 rounded-lg hover:bg-green-100 transition">
+                        <span>View Configuration Examples</span>
+                        <i class="fas fa-code"></i>
+                    </button>
+                    <button onclick="showCompatibility()" class="w-full flex items-center justify-between px-4 py-3 bg-yellow-50 text-yellow-600 rounded-lg hover:bg-yellow-100 transition">
+                        <span>Check Compatibility</span>
+                        <i class="fas fa-check-circle"></i>
+                    </button>
+                    <button onclick="showRelatedPolicies()" class="w-full flex items-center justify-between px-4 py-3 bg-indigo-50 text-indigo-600 rounded-lg hover:bg-indigo-100 transition">
+                        <span>Related Policies</span>
+                        <i class="fas fa-link"></i>
+                    </button>
+                </div>
+                <div class="mt-8 pt-6 border-t border-gray-200">
+                    <h3 class="text-lg font-medium text-gray-900 mb-3">Extension Status</h3>
+                    <div id="extensionStatus" class="flex items-center">
+                        <div class="h-3 w-3 rounded-full bg-gray-300 mr-2"></div>
+                        <span class="text-sm text-gray-600">Checking extension...</span>
+                    </div>
+                    <button id="installExtensionBtn" class="hidden mt-3 w-full px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
+                        Install Extension
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Policy Editor (Hidden by default) -->
+        <div id="policyEditor" class="hidden mt-8 policy-card bg-white rounded-xl p-6 fade-in">
+            <div class="flex items-center mb-6">
+                <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4">
+                    <i class="fas fa-edit text-2xl"></i>
+                </div>
+                <h2 class="text-2xl font-bold text-gray-800">Policy Editor</h2>
+            </div>
+            <div class="space-y-4">
+                <div>
+                    <label for="urlInput" class="block text-sm font-medium text-gray-700 mb-1">Website URL</label>
+                    <div class="mt-1 flex rounded-md shadow-sm">
+                        <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500">
+                            https://
+                        </span>
+                        <input type="text" id="urlInput" class="focus:ring-blue-500 focus:border-blue-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300" placeholder="www.example.com">
+                    </div>
+                    <p class="mt-1 text-sm text-gray-500">Enter a valid URL (only scheme, host and port will be considered)</p>
+                </div>
+                <div class="flex justify-end space-x-3 pt-4">
+                    <button onclick="hidePolicyEditor()" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                        Cancel
+                    </button>
+                    <button onclick="addPolicy()" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                        Add Policy
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Examples Section (Hidden by default) -->
+        <div id="examplesSection" class="hidden mt-8 policy-card bg-white rounded-xl p-6 fade-in">
+            <div class="flex items-center mb-6">
+                <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4">
+                    <i class="fas fa-code text-2xl"></i>
+                </div>
+                <h2 class="text-2xl font-bold text-gray-800">Configuration Examples</h2>
+            </div>
+            <div class="mb-4 border-b border-gray-200">
+                <nav class="-mb-px flex space-x-8">
+                    <button onclick="switchTab('windowsTab')" id="windowsTabBtn" class="tab-active whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
+                        Windows
+                    </button>
+                    <button onclick="switchTab('chromeOSTab')" id="chromeOSTabBtn" class="whitespace-nowrap py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300">
+                        ChromeOS
+                    </button>
+                    <button onclick="switchTab('linuxTab')" id="linuxTabBtn" class="whitespace-nowrap py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300">
+                        Linux
+                    </button>
+                    <button onclick="switchTab('macTab')" id="macTabBtn" class="whitespace-nowrap py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300">
+                        macOS
+                    </button>
+                </nav>
+            </div>
+            <div id="windowsTab" class="tab-content">
+                <div class="code-block p-4 rounded-lg">
+                    <div class="flex justify-between items-center mb-2">
+                        <span class="text-sm text-gray-400">Windows Registry</span>
+                        <button onclick="copyCode('windowsCode')" class="text-blue-400 hover:text-blue-200 text-sm">
+                            <i class="fas fa-copy mr-1"></i>Copy
+                        </button>
+                    </div>
+                    <pre id="windowsCode" class="overflow-x-auto">Software\Policies\Google\Chrome\SerialAllowAllPortsForUrls\1 = "https://www.example.com"</pre>
+                </div>
+            </div>
+            <div id="chromeOSTab" class="hidden tab-content">
+                <div class="code-block p-4 rounded-lg">
+                    <div class="flex justify-between items-center mb-2">
+                        <span class="text-sm text-gray-400">ChromeOS (Active Directory)</span>
+                        <button onclick="copyCode('chromeOSCode')" class="text-blue-400 hover:text-blue-200 text-sm">
+                            <i class="fas fa-copy mr-1"></i>Copy
+                        </button>
+                    </div>
+                    <pre id="chromeOSCode" class="overflow-x-auto">line 1 = "https://www.example.com"</pre>
+                </div>
+            </div>
+            <div id="linuxTab" class="hidden tab-content">
+                <div class="code-block p-4 rounded-lg">
+                    <div class="flex justify-between items-center mb-2">
+                        <span class="text-sm text-gray-400">Linux JSON</span>
+                        <button onclick="copyCode('linuxCode')" class="text-blue-400 hover:text-blue-200 text-sm">
+                            <i class="fas fa-copy mr-1"></i>Copy
+                        </button>
+                    </div>
+                    <pre id="linuxCode" class="overflow-x-auto">[
+  "https://www.example.com"
+]</pre>
+                </div>
+            </div>
+            <div id="macTab" class="hidden tab-content">
+                <div class="code-block p-4 rounded-lg">
+                    <div class="flex justify-between items-center mb-2">
+                        <span class="text-sm text-gray-400">macOS PLIST</span>
+                        <button onclick="copyCode('macCode')" class="text-blue-400 hover:text-blue-200 text-sm">
+                            <i class="fas fa-copy mr-1"></i>Copy
+                        </button>
+                    </div>
+                    <pre id="macCode" class="overflow-x-auto">&lt;array&gt;
+  &lt;string&gt;https://www.example.com&lt;/string&gt;
+&lt;/array&gt;</pre>
+                </div>
+            </div>
+        </div>
+        <!-- Compatibility Checker (Hidden by default) -->
+        <div id="compatibilitySection" class="hidden mt-8 policy-card bg-white rounded-xl p-6 fade-in">
+            <div class="flex items-center mb-6">
+                <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-4">
+                    <i class="fas fa-check-circle text-2xl"></i>
+                </div>
+                <h2 class="text-2xl font-bold text-gray-800">Compatibility Check</h2>
+            </div>
+            <div class="space-y-4">
+                <div class="flex items-start">
+                    <div class="flex-shrink-0">
+                        <div class="flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
+                            <i class="fas fa-check text-green-600"></i>
+                        </div>
+                    </div>
+                    <div class="ml-4">
+                        <h3 class="text-lg font-medium text-gray-900">Minimum Chrome Version</h3>
+                        <p class="mt-1 text-sm text-gray-600">
+                            This policy is supported on Chrome version 94 and later across all platforms.
+                        </p>
+                    </div>
+                </div>
+                <div class="flex items-start">
+                    <div class="flex-shrink-0">
+                        <div class="flex items-center justify-center h-12 w-12 rounded-full bg-blue-100">
+                            <i class="fas fa-info-circle text-blue-600"></i>
+                        </div>
+                    </div>
+                    <div class="ml-4">
+                        <h3 class="text-lg font-medium text-gray-900">ChromeOS Specifics</h3>
+                        <p class="mt-1 text-sm text-gray-600">
+                            On ChromeOS, this policy only applies to affiliated users (managed devices).
+                        </p>
+                    </div>
+                </div>
+                <div class="flex items-start">
+                    <div class="flex-shrink-0">
+                        <div class="flex items-center justify-center h-12 w-12 rounded-full bg-purple-100">
+                            <i class="fas fa-random text-purple-600"></i>
+                        </div>
+                    </div>
+                    <div class="ml-4">
+                        <h3 class="text-lg font-medium text-gray-900">Policy Precedence</h3>
+                        <p class="mt-1 text-sm text-gray-600">
+                            This policy overrides DefaultSerialGuardSetting, SerialAskForUrls, and SerialBlockedForUrls policies.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Related Policies (Hidden by default) -->
+        <div id="relatedPoliciesSection" class="hidden mt-8 policy-card bg-white rounded-xl p-6 fade-in">
+            <div class="flex items-center mb-6">
+                <div class="p-3 rounded-full bg-indigo-100 text-indigo-600 mr-4">
+                    <i class="fas fa-link text-2xl"></i>
+                </div>
+                <h2 class="text-2xl font-bold text-gray-800">Related Policies</h2>
+            </div>
+            <div class="space-y-4">
+                <div class="p-4 border border-gray-200 rounded-lg hover:border-blue-300 transition">
+                    <h3 class="text-lg font-medium text-gray-900">DefaultSerialGuardSetting</h3>
+                    <p class="mt-1 text-sm text-gray-600">
+                        Controls the default behavior for websites requesting access to serial ports.
+                    </p>
+                </div>
+                <div class="p-4 border border-gray-200 rounded-lg hover:border-blue-300 transition">
+                    <h3 class="text-lg font-medium text-gray-900">SerialAskForUrls</h3>
+                    <p class="mt-1 text-sm text-gray-600">
+                        Lists URLs that should prompt users for permission to access serial ports.
+                    </p>
+                </div>
+                <div class="p-4 border border-gray-200 rounded-lg hover:border-blue-300 transition">
+                    <h3 class="text-lg font-medium text-gray-900">SerialBlockedForUrls</h3>
+                    <p class="mt-1 text-sm text-gray-600">
+                        Lists URLs that should be blocked from accessing serial ports.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Serial port variables
+        let port;
+        let reader;
+        let receivedBytes = 0;
+        let keepReading = true;
+        // DOM elements
+        const requestPortBtn = document.getElementById('requestPortBtn');
+        const connectBtn = document.getElementById('connectBtn');
+        const disconnectBtn = document.getElementById('disconnectBtn');
+        const sendDataBtn = document.getElementById('sendDataBtn');
+        const dataInput = document.getElementById('dataInput');
+        const baudRate = document.getElementById('baudRate');
+        const serialConsole = document.getElementById('serialConsole');
+        const clearConsoleBtn = document.getElementById('clearConsoleBtn');
+        const bytesReceived = document.getElementById('bytesReceived');
+        const portInfo = document.getElementById('portInfo');
+        const portName = document.getElementById('portName');
+        const connectionStatus = document.getElementById('connectionStatus');
+        const extensionStatus = document.getElementById('extensionStatus');
+        const installExtensionBtn = document.getElementById('installExtensionBtn');
+        // Check if Web Serial API is available
+        function checkWebSerialSupport() {
+            if ('serial' in navigator) {
+                extensionStatus.innerHTML = '<div class="h-3 w-3 rounded-full bg-green-500 mr-2"></div><span class="text-sm text-gray-600">Web Serial API supported</span>';
+            } else {
+                extensionStatus.innerHTML = '<div class="h-3 w-3 rounded-full bg-red-500 mr-2"></div><span class="text-sm text-gray-600">Web Serial API not supported</span>';
+                installExtensionBtn.classList.remove('hidden');
+                installExtensionBtn.addEventListener('click', () => {
+                    window.open('https://chrome.google.com/webstore/detail/serial-api-polyfill/ghfdlgblclfcljllkjlbjdcbjgjkennf', '_blank');
+                });
+            }
+        }
+        // Request serial port access
+        async function requestPort() {
+            try {
+                port = await navigator.serial.requestPort();
+                portName.textContent = port.getInfo().usbProductId ?
+                    `USB Device (${port.getInfo().usbProductId})` : 'Serial Port';
+                portInfo.classList.remove('hidden');
+                connectBtn.disabled = false;
+                showToast('Port selected successfully', 'success');
+            } catch (err) {
+                showToast('Port selection was canceled', 'error');
+                console.error('Error requesting port:', err);
+            }
+        }
+        // Connect to serial port
+        async function connectPort() {
+            try {
+                await port.open({ baudRate: parseInt(baudRate.value) });
+                connectionStatus.textContent = 'Connected';
+                connectionStatus.classList.add('text-green-600');
+                connectBtn.disabled = true;
+                disconnectBtn.disabled = false;
+                sendDataBtn.disabled = false;
+                showToast('Connected to port successfully', 'success');
+                // Start reading from the port
+                readFromPort();
+            } catch (err) {
+                showToast('Failed to connect to port', 'error');
+                console.error('Error opening port:', err);
+            }
+        }
+        // Disconnect from serial port
+        async function disconnectPort() {
+            try {
+                keepReading = false;
+                if (reader) {
+                    await reader.cancel();
+                }
+                await port.close();
+                connectionStatus.textContent = 'Disconnected';
+                connectionStatus.classList.remove('text-green-600');
+                connectBtn.disabled = false;
+                disconnectBtn.disabled = true;
+                sendDataBtn.disabled = true;
+                showToast('Disconnected from port', 'info');
+            } catch (err) {
+                showToast('Error disconnecting from port', 'error');
+                console.error('Error closing port:', err);
+            }
+        }
+        // Read data from serial port
+        async function readFromPort() {
+            keepReading = true;
+            try {
+                while (port.readable && keepReading) {
+                    reader = port.readable.getReader();
+                    try {
+                        while (keepReading) {
+                            const { value, done } = await reader.read();
+                            if (done) {
+                                break;
+                            }
+                            // Convert received data to text
+                            const textDecoder = new TextDecoder();
+                            const text = textDecoder.decode(value);
+                            // Update UI with received data
+                            receivedBytes += text.length;
+                            bytesReceived.textContent = receivedBytes;
+                            // Add timestamp
+                            const now = new Date();
+                            const timestamp = `[${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}] `;
+                            // Add to console
+                            if (serialConsole.firstChild.textContent === 'No data received yet...') {
+                                serialConsole.firstChild.remove();
+                            }
+                            const messageElement = document.createElement('div');
+                            messageElement.innerHTML = `<span class="text-gray-400">${timestamp}</span>${text.replace(/\n/g, '<br>')}`;
+                            serialConsole.appendChild(messageElement);
+                            serialConsole.scrollTop = serialConsole.scrollHeight;
+                        }
+                    } catch (err) {
+                        showToast('Error reading from port', 'error');
+                        console.error('Error reading from port:', err);
+                    } finally {
+                        reader.releaseLock();
+                    }
+                }
+            } catch (err) {
+                showToast('Port disconnected unexpectedly', 'error');
+                console.error('Port error:', err);
+                disconnectPort();
+            }
+        }
+        // Send data to serial port
+        async function sendData() {
+            if (!port || !port.writable) {
+                showToast('Port is not connected', 'error');
+                return;
+            }
+            const data = dataInput.value;
+            if (!data) {
+                showToast('Please enter data to send', 'error');
+                return;
+            }
+            try {
+                const writer = port.writable.getWriter();
+                const encoder = new TextEncoder();
+                await writer.write(encoder.encode(data + '\n'));
+                writer.releaseLock();
+                // Add to console as sent data
+                const now = new Date();
+                const timestamp = `[${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}] `;
+                const messageElement = document.createElement('div');
+                messageElement.innerHTML = `<span class="text-gray-400">${timestamp}</span><span class="text-blue-400">&gt; ${data}</span>`;
+                serialConsole.appendChild(messageElement);
+                serialConsole.scrollTop = serialConsole.scrollHeight;
+                dataInput.value = '';
+                showToast('Data sent successfully', 'success');
+            } catch (err) {
+                showToast('Failed to send data', 'error');
+                console.error('Error sending data:', err);
+            }
+        }
+        // Clear console
+        function clearConsole() {
+            serialConsole.innerHTML = '<div class="text-gray-400">No data received yet...</div>';
+            receivedBytes = 0;
+            bytesReceived.textContent = '0';
+        }
+        // Show toast notification
+        function showToast(message, type) {
+            const toast = document.createElement('div');
+            toast.className = `fixed bottom-4 right-4 px-4 py-2 rounded-md shadow-md text-white ${
+                type === 'success' ? 'bg-green-500' :
+                type === 'error' ? 'bg-red-500' : 'bg-blue-500'
+            }`;
+            toast.textContent = message;
+            document.body.appendChild(toast);
+            setTimeout(() => {
+                toast.classList.add('opacity-0', 'transition-opacity', 'duration-300');
+                setTimeout(() => toast.remove(), 300);
+            }, 3000);
+        }
+        // Event listeners
+        requestPortBtn.addEventListener('click', requestPort);
+        connectBtn.addEventListener('click', connectPort);
+        disconnectBtn.addEventListener('click', disconnectPort);
+        sendDataBtn.addEventListener('click', sendData);
+        clearConsoleBtn.addEventListener('click', clearConsole);
+        dataInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                sendData();
+            }
+        });
+        // Show/hide sections
+        function showPolicyEditor() {
+            hideAllSections();
+            document.getElementById('policyEditor').classList.remove('hidden');
+        }
+        function showExamples() {
+            hideAllSections();
+            document.getElementById('examplesSection').classList.remove('hidden');
+        }
+        function showCompatibility() {
+            hideAllSections();
+            document.getElementById('compatibilitySection').classList.remove('hidden');
+        }
+        function showRelatedPolicies() {
+            hideAllSections();
+            document.getElementById('relatedPoliciesSection').classList.remove('hidden');
+        }
+        function hidePolicyEditor() {
+            document.getElementById('policyEditor').classList.add('hidden');
+        }
+        function hideAllSections() {
+            document.getElementById('policyEditor').classList.add('hidden');
+            document.getElementById('examplesSection').classList.add('hidden');
+            document.getElementById('compatibilitySection').classList.add('hidden');
+            document.getElementById('relatedPoliciesSection').classList.add('hidden');
+        }
+        // Tab switching for examples
+        function switchTab(tabId) {
+            // Hide all tab contents
+            document.querySelectorAll('.tab-content').forEach(tab => {
+                tab.classList.add('hidden');
+            });
+            // Remove active class from all tab buttons
+            document.querySelectorAll('[id$="TabBtn"]').forEach(btn => {
+                btn.classList.remove('tab-active', 'text-blue-600', 'border-blue-500');
+                btn.classList.add('text-gray-500', 'border-transparent');
+            });
+            // Show selected tab content
+            document.getElementById(tabId).classList.remove('hidden');
+            // Add active class to selected tab button
+            document.getElementById(tabId + 'Btn').classList.add('tab-active', 'text-blue-600', 'border-blue-500');
+            document.getElementById(tabId + 'Btn').classList.remove('text-gray-500', 'border-transparent');
+        }
+        // Copy code to clipboard
+        function copyCode(elementId) {
+            const codeElement = document.getElementById(elementId);
+            const range = document.createRange();
+            range.selectNode(codeElement);
+            window.getSelection().removeAllRanges();
+            window.getSelection().addRange(range);
+            document.execCommand('copy');
+            window.getSelection().removeAllRanges();
+            // Show copied notification
+            const originalText = event.target.innerHTML;
+            event.target.innerHTML = '<i class="fas fa-check mr-1"></i>Copied!';
+            setTimeout(() => {
+                event.target.innerHTML = originalText;
+            }, 2000);
+        }
+        // Add policy (simulated)
+        function addPolicy() {
+            const urlInput = document.getElementById('urlInput');
+            if (urlInput.value.trim() === '') {
+                showToast('Please enter a valid URL', 'error');
+                return;
+            }
+            // In a real application, this would save the policy
+            showToast(`Policy added for: ${urlInput.value}`, 'success');
+            urlInput.value = '';
+            hidePolicyEditor();
+        }
+        // Initialize
+        checkWebSerialSupport();
+    </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=drbaker171/sp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>