OmniNX/sphaira
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

webusb: add webUSB page and workflow to auto build it.

Browse Source
This commit is contained in:
ITotalJustice
2025-08-31 07:15:53 +01:00
parent 22e965521a
commit c2e8734e85
8 changed files with 1587 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
tools/webusb/index.html Normal file
View File

@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/>
<title>Sphaira WebUSB File Transfer</title>
<link rel="icon" type="image/png" sizes="16x16" href="assets/icon_16.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/icon_32.png">
<link rel="icon" type="image/png" sizes="48x48" href="assets/icon_48.png">
<link rel="apple-touch-icon" sizes="180x180" href="assets/icon_180.png">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<h1>Sphaira WebUSB File Transfer</h1>
<!-- Connection Toast Notification -->
<div id="connectionToast" class="connection-toast">
<span class="toast-icon">🔗</span>
<span id="toastMessage">Device Connected</span>
<button class="toast-close" id="toastClose">×</button>
</div>
<div class="section">
<h3>Step 1: Connect USB Device</h3>
<button id="connectBtn">Connect New USB Device</button>
<button id="disconnectBtn" disabled>Disconnect</button>
<div id="authorizedDevices" class="device-list" style="display: none;">
<h4 style="color: #32ffcf; margin-top: 0;">Previously Authorized Devices:</h4>
<div id="deviceListContainer"></div>
</div>
</div>
<div class="section">
<h3>Step 2: Select Files to Transfer</h3>
<input type="file" id="fileInput" accept=".nsp, .xci, .nsz, .xcz" multiple class="hidden">
<div class="file-controls">
<button id="addFilesBtn" class="btn-add" disabled>Add Files</button>
<button id="clearQueueBtn" class="btn-clear" disabled>Clear Queue</button>
</div>
<div class="file-queue">
<div class="queue-header">
<span class="queue-title">File Queue</span>
<span class="queue-count" id="fileCount">0 files</span>
</div>
<div id="fileQueueList"></div>
</div>
</div>
<div class="section">
<h3>Step 3: Transfer Files</h3>
<button id="sendBtn" disabled>Send Files</button>
<div id="transferProgress" class="device-info" style="display: none;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
<span id="progressTitle"><strong>Transfer Progress</strong></span>
<span id="progressCounter" style="color: #32ffcf; font-weight: 600;">0 / 0</span>
</div>
<div class="progress-bar-container" style="margin-bottom: 10px;">
<div class="progress-bar" style="height: 8px; background: #163951; border-radius: 4px; overflow: hidden;">
<div id="fileProgressBar" style="height: 100%; width: 0%; background: linear-gradient(90deg, #32ffcf, #5cbeff); transition: width 0.3s ease;"></div>
</div>
<div style="display: flex; justify-content: space-between; font-size: 0.8em; margin-top: 4px;">
<span id="progressPercentage">0%</span>
<span id="transferSpeed">0 MB/s</span>
</div>
</div>
<!-- Add time information -->
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 0.85em;">
<div>
<span style="color: #bed0d6;">Time Spent:</span>
<span id="timeSpent" style="color: #5cbeff; margin-left: 5px;">00:00</span>
</div>
<div>
<span style="color: #bed0d6;">Time Remaining:</span>
<span id="timeRemaining" style="color: #ffaa32; margin-left: 5px;">--:--</span>
</div>
<div>
<span style="color: #bed0d6;">Data Transferred:</span>
<span id="dataTransferred" style="color: #69ff8f; margin-left: 5px;">0 MB</span>
</div>
<div>
<span style="color: #bed0d6;">Speed:</span>
<span id="currentSpeed" style="color: #32ffcf; margin-left: 5px;">0 MB/s</span>
</div>
</div>
</div>
</div>
<div class="section">
<h3>Logs</h3>
<div id="logDiv" class="log"></div>
<div class="log-controls">
<button id="clearLogBtn" class="log-btn">Clear Log</button>
<button id="copyLogBtn" class="log-btn">Copy Log</button>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>