Spaces:

suifei
/

usbipd-ninja-network-share

Running

App Files Files Community

usbipd-ninja-network-share / server.html

suifei

linux 有个usbipd 服务，可以将usb 设备通过网络共享到windows（虚拟hub驱动），windows通过网络共享这个linux上的usb设备；

bf38d5d verified 9 months ago

Raw

History Blame Contribute Delete

15.6 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>USBipd Ninja - Server Configuration</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>
	.terminal {
	background-color: #1e293b;
	color: #f8fafc;
	font-family: 'Courier New', monospace;
	border-radius: 0.375rem;
	}
	.command-line {
	color: #84cc16;
	}
	.output-line {
	color: #e2e8f0;
	}
	.tab-active {
	border-bottom: 2px solid #6366f1;
	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="server" class="text-indigo-600 mr-2"></i>
	<span class="text-xl font-bold text-gray-900">USBipd Ninja - Server</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="p-6">
	<h2 class="text-2xl font-bold text-gray-800 mb-6">Linux Server Configuration</h2>

	<div class="border-b border-gray-200 mb-6">
	<nav class="-mb-px flex space-x-8">
	<button class="tab-active whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
	USBIPD Service
	</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">
	Network Settings
	</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">
	Device Filters
	</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="grid grid-cols-1 md:grid-cols-3 gap-6">
	<div class="md:col-span-2">
	<h3 class="text-lg font-medium text-gray-900 mb-4">USBIPD Service Control</h3>

	<div class="space-y-4">
	<div class="flex items-center justify-between bg-gray-50 p-4 rounded-lg">
	<div>
	<p class="font-medium">USBIPD Service Status</p>
	<p class="text-sm text-gray-500">Systemd service controlling USB device sharing</p>
	</div>
	<div class="flex items-center">
	<span class="h-2 w-2 rounded-full bg-green-500 mr-2"></span>
	<span class="text-sm font-medium">Active (running)</span>
	</div>
	</div>

	<div class="bg-gray-50 p-4 rounded-lg">
	<h4 class="font-medium mb-2">Service Commands</h4>
	<div class="grid grid-cols-3 gap-2">
	<button class="bg-indigo-600 text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-indigo-700">
	Start Service
	</button>
	<button class="bg-gray-200 text-gray-800 px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-300">
	Stop Service
	</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>
	</div>
	</div>

	<div class="bg-gray-50 p-4 rounded-lg">
	<h4 class="font-medium mb-2">Service Configuration</h4>
	<div class="space-y-3">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Bind IP Address</label>
	<input type="text" value="0.0.0.0" 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 class="flex items-center">
	<input id="auto-start" type="checkbox" checked class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
	<label for="auto-start" class="ml-2 block text-sm text-gray-700">Start automatically on boot</label>
	</div>
	</div>
	</div>
	</div>
	</div>

	<div>
	<h3 class="text-lg font-medium text-gray-900 mb-4">Terminal Interface</h3>
	<div class="terminal p-4 h-96 overflow-y-auto">
	<div class="mb-2">
	<span class="command-line">$</span> sudo systemctl status usbipd
	</div>
	<div class="output-line mb-4">
	● usbipd.service - USBIPD Server<br>
	Loaded: loaded (/lib/systemd/system/usbipd.service; enabled; vendor preset: enabled)<br>
	Active: active (running) since Mon 2023-05-15 14:32:18 UTC; 2h 15min ago<br>
	Main PID: 1234 (usbipd)<br>
	Tasks: 1 (limit: 4915)<br>
	Memory: 2.3M<br>
	CGroup: /system.slice/usbipd.service<br>
	└─1234 /usr/sbin/usbipd -D
	</div>
	<div class="mb-2">
	<span class="command-line">$</span> usbip list -l
	</div>
	<div class="output-line mb-4">
	- busid 1-1 (0781:5583)<br>
	SanDisk Corp. : Ultra USB 3.0 (0781:5583)<br>
	<br>
	- busid 1-2 (046d:082d)<br>
	Logitech, Inc. : HD Pro Webcam C920 (046d:082d)<br>
	<br>
	- busid 1-3 (03f0:3a17)<br>
	HP : LaserJet Pro MFP (03f0:3a17)
	</div>
	<div class="mb-2">
	<span class="command-line">$</span> <span class="cursor-blink">\|</span>
	</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 w-full">
	Execute Command
	</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">USB Device Management</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">Bus ID</th>
	<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">Vendor:Product</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 text-sm font-medium text-gray-900">1-1</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">SanDisk Ultra USB 3.0</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0781:5583</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">Shared</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">Unshare</button>
	<button class="text-gray-600 hover:text-gray-900">Details</button>
	</td>
	</tr>
	<tr>
	<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">1-2</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Logitech Webcam C920</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">046d:082d</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">Available</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">Share</button>
	<button class="text-gray-600 hover:text-gray-900">Details</button>
	</td>
	</tr>
	<tr>
	<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">1-3</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">HP LaserJet Pro MFP</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">03f0:3a17</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">Available</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">Share</button>
	<button class="text-gray-600 hover:text-gray-900">Details</button>
	</td>
	</tr>
	</tbody>
	</table>
	</div>

	<div class="mt-6">
	<button class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 inline-flex items-center">
	<i data-feather="refresh-cw" class="mr-2"></i> Refresh Device List
	</button>
	</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="server" class="text-indigo-600 mr-2"></i>
	<span class="text-gray-900 font-medium">USBipd Ninja Server</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">CLI Reference</a>
	<a href="#" class="text-gray-500 hover:text-gray-700">Troubleshooting</a>
	</div>
	</div>
	</div>
	</footer>

	<script>
	// Initialize tabs
	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>