| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>USBipd Ninja - Settings</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> |
| .tab-active { |
| border-bottom: 2px solid #6366f1; |
| color: #6366f1; |
| } |
| .toggle-checkbox:checked { |
| right: 0; |
| border-color: #6366f1; |
| } |
| .toggle-checkbox:checked + .toggle-label { |
| background-color: #6366f1; |
| } |
| </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="settings" class="text-indigo-600 mr-2"></i> |
| <span class="text-xl font-bold text-gray-900">USBipd Ninja - Settings</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="bg-white rounded-xl shadow-md overflow-hidden mb-8"> |
| <div class="border-b border-gray-200"> |
| <nav class="-mb-px flex space-x-8 px-6"> |
| <button class="tab-active whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"> |
| General |
| </button> |
| <button class="text-gray-500 hover:text-gray-700 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm hover:border-gray-300"> |
| Notifications |
| </button> |
| <button class="text-gray-500 hover:text-gray-700 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm hover:border-gray-300"> |
| Security |
| </button> |
| <button class="text-gray-500 hover:text-gray-700 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm hover:border-gray-300"> |
| Advanced |
| </button> |
| </nav> |
| </div> |
| |
| <div class="p-6"> |
| <div class="space-y-8"> |
| <div> |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Application Settings</h3> |
| <div class="space-y-4"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="font-medium">Dark Mode</p> |
| <p class="text-sm text-gray-500">Enable dark theme for the application</p> |
| </div> |
| <label class="relative inline-flex items-center cursor-pointer"> |
| <input type="checkbox" class="sr-only peer"> |
| <div class="w-11 h-6 bg-gray-200 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div> |
| </label> |
| </div> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="font-medium">Auto Refresh Devices</p> |
| <p class="text-sm text-gray-500">Automatically refresh connected devices list</p> |
| </div> |
| <label class="relative inline-flex items-center cursor-pointer"> |
| <input type="checkbox" checked class="sr-only peer"> |
| <div class="w-11 h-6 bg-gray-200 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div> |
| </label> |
| </div> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="font-medium">Show Offline Devices</p> |
| <p class="text-sm text-gray-500">Display devices that are currently unavailable</p> |
| </div> |
| <label class="relative inline-flex items-center cursor-pointer"> |
| <input type="checkbox" class="sr-only peer"> |
| <div class="w-11 h-6 bg-gray-200 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div> |
| </label> |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Connection Preferences</h3> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Default Connection Timeout</label> |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> |
| <option>15 seconds</option> |
| <option selected>30 seconds</option> |
| <option>1 minute</option> |
| <option>5 minutes</option> |
| <option>No timeout</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Default Retry Attempts</label> |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> |
| <option>1</option> |
| <option selected>3</option> |
| <option>5</option> |
| <option>10</option> |
| </select> |
| </div> |
| <div class="flex items-center"> |
| <input id="auto-reconnect" type="checkbox" checked class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"> |
| <label for="auto-reconnect" class="ml-2 block text-sm text-gray-700">Automatically reconnect to devices</label> |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Server Sync</h3> |
| <div class="space-y-4"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="font-medium">Auto Sync with Server</p> |
| <p class="text-sm text-gray-500">Periodically sync device status with Linux server</p> |
| </div> |
| <label class="relative inline-flex items-center cursor-pointer"> |
| <input type="checkbox" checked class="sr-only peer"> |
| <div class="w-11 h-6 bg-gray-200 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div> |
| </label> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Sync Frequency</label> |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> |
| <option>Every 5 minutes</option> |
| <option selected>Every 15 minutes</option> |
| <option>Every 30 minutes</option> |
| <option>Every hour</option> |
| <option>Manual only</option> |
| </select> |
| </div> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-200 pt-6"> |
| <div class="flex justify-end space-x-3"> |
| <button class="bg-gray-200 text-gray-800 px-4 py-2 rounded-md text-sm font-medium hover:bg-gray-300"> |
| Reset to Defaults |
| </button> |
| <button class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700"> |
| Save Settings |
| </button> |
| </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">Danger Zone</h2> |
| |
| <div class="space-y-6"> |
| <div class="flex items-center justify-between bg-red-50 p-4 rounded-lg border border-red-200"> |
| <div> |
| <p class="font-medium text-red-800">Clear All Connection Data</p> |
| <p class="text-sm text-red-600 mt-1">This will remove all saved connection configurations</p> |
| </div> |
| <button class="bg-red-100 text-red-800 px-4 py-2 rounded-md text-sm font-medium hover:bg-red-200"> |
| Clear Data |
| </button> |
| </div> |
| |
| <div class="flex items-center justify-between bg-red-50 p-4 rounded-lg border border-red-200"> |
| <div> |
| <p class="font-medium text-red-800">Uninstall Virtual Hub Driver</p> |
| <p class="text-sm text-red-600 mt-1">This will remove the Windows USB/IP virtual hub driver</p> |
| </div> |
| <button class="bg-red-100 text-red-800 px-4 py-2 rounded-md text-sm font-medium hover:bg-red-200"> |
| Uninstall |
| </button> |
| </div> |
| |
| <div class="flex items-center justify-between bg-red-50 p-4 rounded-lg border border-red-200"> |
| <div> |
| <p class="font-medium text-red-800">Factory Reset</p> |
| <p class="text-sm text-red-600 mt-1">Reset all settings to default and clear all data</p> |
| </div> |
| <button class="bg-red-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-red-700"> |
| Reset Everything |
| </button> |
| </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="settings" class="text-indigo-600 mr-2"></i> |
| <span class="text-gray-900 font-medium">USBipd Ninja Settings</span> |
| </div> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-500 hover:text-gray-700">Documentation</a> |
| <a href="#" class="text-gray-500 hover:text-gray-700">Support</a> |
| <a href="#" class="text-gray-500 hover:text-gray-700">About</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', () => { |
| feather.replace(); |
| |
| |
| const tabs = document.querySelectorAll('nav button'); |
| tabs.forEach(tab => { |
| tab.addEventListener('click', () => { |
| tabs.forEach(t => t.classList.remove('tab-active', 'text-indigo-600', 'border-indigo-500')); |
| tab.classList.add('tab-active', 'text-indigo-600', 'border-indigo-500'); |
| }); |
| }); |
| }); |
| </script> |
| <script>feather.replace();</script> |
| </body> |
| </html> |
|
|
