| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>USBipd Ninja - Windows Client</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <style> |
| .connection-card:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
| } |
| .status-indicator { |
| width: 10px; |
| height: 10px; |
| border-radius: 50%; |
| display: inline-block; |
| margin-right: 6px; |
| } |
| .status-active { |
| background-color: #10b981; |
| box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3); |
| } |
| .status-inactive { |
| background-color: #ef4444; |
| box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 min-h-screen"> |
| <nav class="bg-white shadow-sm"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between h-16"> |
| <div class="flex items-center"> |
| <i data-feather="monitor" class="text-indigo-600 mr-2"></i> |
| <span class="text-xl font-bold text-gray-900">USBipd Ninja - Client</span> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <a href="index.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium flex items-center"> |
| <i data-feather="arrow-left" class="mr-1"></i> Back to Dashboard |
| </a> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
| <div class="lg:col-span-2"> |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8"> |
| <div class="p-6"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Client Configuration</h2> |
| |
| <div class="space-y-6"> |
| <div> |
| <h3 class="text-lg font-medium text-gray-900 mb-3">Virtual Hub Driver Status</h3> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="font-medium">USB/IP Virtual Hub</p> |
| <p class="text-sm text-gray-500">Windows driver for remote USB devices</p> |
| </div> |
| <div class="flex items-center"> |
| <span class="status-indicator status-active"></span> |
| <span class="text-sm font-medium">Installed & Running</span> |
| </div> |
| </div> |
| <div class="mt-4 grid grid-cols-3 gap-3"> |
| <button class="bg-gray-200 text-gray-800 px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-300"> |
| Reinstall Driver |
| </button> |
| <button class="bg-gray-200 text-gray-800 px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-300"> |
| Restart Service |
| </button> |
| <button class="bg-red-100 text-red-800 px-3 py-2 rounded-md text-sm font-medium hover:bg-red-200"> |
| Uninstall |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-medium text-gray-900 mb-3">Connection Settings</h3> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Linux Server IP</label> |
| <input type="text" value="192.168.1.100" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Port</label> |
| <input type="number" value="3240" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <button class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700"> |
| Save Configuration |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> |
| <div class="p-6"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Connected USB Devices</h2> |
| |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Device</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">From Server</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200"> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> |
| <i data-feather="hard-drive" class="text-indigo-600"></i> |
| </div> |
| <div> |
| <div class="text-sm font-medium text-gray-900">SanDisk Ultra USB 3.0</div> |
| <div class="text-sm text-gray-500">Mass Storage</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
| <div class="flex items-center"> |
| <i data-feather="server" class="text-gray-400 mr-2"></i> |
| 192.168.1.100 |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Connected</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
| <button class="text-indigo-600 hover:text-indigo-900 mr-3">Disconnect</button> |
| <button class="text-gray-600 hover:text-gray-900">Details</button> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> |
| <i data-feather="video" class="text-indigo-600"></i> |
| </div> |
| <div> |
| <div class="text-sm font-medium text-gray-900">Logitech Webcam C920</div> |
| <div class="text-sm text-gray-500">Video Device</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
| <div class="flex items-center"> |
| <i data-feather="server" class="text-gray-400 mr-2"></i> |
| 192.168.1.100 |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">Disconnected</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
| <button class="text-indigo-600 hover:text-indigo-900 mr-3">Connect</button> |
| <button class="text-gray-600 hover:text-gray-900">Details</button> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="bg-white rounded-xl shadow-md overflow-hidden sticky top-8"> |
| <div class="p-6"> |
| <h2 class="text-xl font-bold text-gray-800 mb-6">Quick Connection</h2> |
| |
| <div class="space-y-4"> |
| <div class="connection-card bg-gray-50 p-4 rounded-lg border border-gray-200 transition-all duration-300"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <h3 class="font-medium">SanDisk USB Drive</h3> |
| <p class="text-sm text-gray-500 mt-1">192.168.1.100 • Bus ID: 1-1</p> |
| </div> |
| <span class="status-indicator status-active"></span> |
| </div> |
| <div class="mt-3"> |
| <button class="w-full bg-indigo-600 text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-indigo-700"> |
| Manage Connection |
| </button> |
| </div> |
| </div> |
| |
| <div class="connection-card bg-gray-50 p-4 rounded-lg border border-gray-200 transition-all duration-300"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <h3 class="font-medium">Logitech Webcam</h3> |
| <p class="text-sm text-gray-500 mt-1">192.168.1.100 • Bus ID: 1-2</p> |
| </div> |
| <span class="status-indicator status-inactive"></span> |
| </div> |
| <div class="mt-3"> |
| <button class="w-full bg-gray-200 text-gray-800 px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-300"> |
| Connect Device |
| </button> |
| </div> |
| </div> |
| |
| <div class="connection-card bg-gray-50 p-4 rounded-lg border border-gray-200 transition-all duration-300"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <h3 class="font-medium">HP Printer</h3> |
| <p class="text-sm text-gray-500 mt-1">192.168.1.100 • Bus ID: 1-3</p> |
| </div> |
| <span class="status-indicator status-inactive"></span> |
| </div> |
| <div class="mt-3"> |
| <button class="w-full bg-gray-200 text-gray-800 px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-300"> |
| Connect Device |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-6"> |
| <button class="w-full bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 flex items-center justify-center"> |
| <i data-feather="plus" class="mr-2"></i> Add New Connection |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| <footer class="bg-white border-t border-gray-200 mt-12"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="flex items-center mb-4 md:mb-0"> |
| <i data-feather="monitor" class="text-indigo-600 mr-2"></i> |
| <span class="text-gray-900 font-medium">USBipd Ninja Client</span> |
| </div> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-500 hover:text-gray-700">Driver Docs</a> |
| <a href="#" class="text-gray-500 hover:text-gray-700">Troubleshooting</a> |
| <a href="#" class="text-gray-500 hover:text-gray-700">Update Client</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', () => { |
| feather.replace(); |
| |
| |
| setInterval(() => { |
| const blinkers = document.querySelectorAll('.cursor-blink'); |
| blinkers.forEach(el => { |
| el.style.visibility = el.style.visibility === 'hidden' ? 'visible' : 'hidden'; |
| }); |
| }, 500); |
| }); |
| </script> |
| <script>feather.replace();</script> |
| </body> |
| </html> |
|
|
