mouse-vm 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bin/cli.js +4 -0
- package/package.json +48 -0
- package/server.js +716 -0
- package/static/app.js +1470 -0
- package/static/icons/icon-192.png +0 -0
- package/static/icons/icon-512.png +0 -0
- package/static/icons/icon.svg +38 -0
- package/static/index.html +738 -0
- package/static/manifest.json +46 -0
- package/static/style.css +2651 -0
- package/static/sw.js +85 -0
|
@@ -0,0 +1,738 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
|
6
|
+
<title>Virtual Mouse & Keyboard - Remote Controller</title>
|
|
7
|
+
|
|
8
|
+
<!-- PWA & Mobile Web Meta Tags -->
|
|
9
|
+
<meta name="theme-color" content="#080d16">
|
|
10
|
+
<meta name="description" content="Turn your phone into a wireless mouse, live keyboard, and desktop controller for PC.">
|
|
11
|
+
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
12
|
+
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
13
|
+
<meta name="apple-mobile-web-app-title" content="VirtualMouse">
|
|
14
|
+
<link rel="manifest" href="manifest.json?v=2.5">
|
|
15
|
+
<link rel="icon" type="image/svg+xml" href="icons/icon.svg">
|
|
16
|
+
<link rel="apple-touch-icon" href="icons/icon-192.png">
|
|
17
|
+
|
|
18
|
+
<!-- Google Fonts: Outfit -->
|
|
19
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
20
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
21
|
+
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
|
22
|
+
<link rel="stylesheet" href="style.css?v=2.5">
|
|
23
|
+
</head>
|
|
24
|
+
<body class="dark-theme">
|
|
25
|
+
<!-- Main Application Container -->
|
|
26
|
+
<div class="app-container">
|
|
27
|
+
|
|
28
|
+
<!-- ================= 1. Splash Screen ================= -->
|
|
29
|
+
<section id="screen-splash" class="screen active">
|
|
30
|
+
<div class="splash-content">
|
|
31
|
+
<div class="logo-container">
|
|
32
|
+
<div class="ripple ripple-1"></div>
|
|
33
|
+
<div class="ripple ripple-2"></div>
|
|
34
|
+
<div class="ripple ripple-3"></div>
|
|
35
|
+
<!-- Glowing Mouse & Keyboard SVG -->
|
|
36
|
+
<svg class="glowing-mouse-svg" viewBox="0 0 100 150" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
37
|
+
<rect x="25" y="10" width="50" height="100" rx="25" stroke="url(#mouse-gradient)" stroke-width="4" />
|
|
38
|
+
<line x1="50" y1="10" x2="50" y2="50" stroke="url(#mouse-gradient)" stroke-width="4" stroke-linecap="round"/>
|
|
39
|
+
<circle cx="50" cy="35" r="4" fill="#00f0ff" />
|
|
40
|
+
<path d="M50 110 C50 125, 30 135, 50 145" stroke="url(#mouse-gradient)" stroke-width="2" stroke-linecap="round" />
|
|
41
|
+
</svg>
|
|
42
|
+
</div>
|
|
43
|
+
<h1 class="splash-title">Virtual Mouse</h1>
|
|
44
|
+
<p class="splash-tagline">Wireless Mouse & Live Desktop Keyboard</p>
|
|
45
|
+
<div class="carousel-dots">
|
|
46
|
+
<span class="dot"></span>
|
|
47
|
+
<span class="dot active"></span>
|
|
48
|
+
<span class="dot"></span>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
</section>
|
|
52
|
+
|
|
53
|
+
<!-- ================= 2. Connection Screen ================= -->
|
|
54
|
+
<section id="screen-home" class="screen">
|
|
55
|
+
<header class="app-header">
|
|
56
|
+
<button class="icon-btn header-menu-btn" id="btn-hamburger" title="Menu">
|
|
57
|
+
<svg viewBox="0 0 24 24" width="22" height="22" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
|
|
58
|
+
</button>
|
|
59
|
+
<h2>Connect to Device</h2>
|
|
60
|
+
<!-- PWA Install Button -->
|
|
61
|
+
<button class="install-pwa-btn hidden" id="btn-install-pwa" title="Install App on Phone">
|
|
62
|
+
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
|
|
63
|
+
<span>Install</span>
|
|
64
|
+
</button>
|
|
65
|
+
</header>
|
|
66
|
+
|
|
67
|
+
<div class="scroll-content">
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
<!-- Connection Tabs -->
|
|
71
|
+
<div class="connection-tabs">
|
|
72
|
+
<button class="tab-btn active" data-tab="wifi">
|
|
73
|
+
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="tab-icon"><path d="M5 12.55a11 11 0 0 1 14.08 0"></path><path d="M1.42 9a16 16 0 0 1 21.16 0"></path><path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path><line x1="12" y1="20" x2="12.01" y2="20" stroke-width="3"></line></svg>
|
|
74
|
+
WiFi
|
|
75
|
+
</button>
|
|
76
|
+
<button class="tab-btn" data-tab="bluetooth">
|
|
77
|
+
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="tab-icon"><path d="M6.5 6.5l11 11L12 23V1l5.5 5.5-11 11"></path></svg>
|
|
78
|
+
Bluetooth
|
|
79
|
+
</button>
|
|
80
|
+
<button class="tab-btn" data-tab="usb">
|
|
81
|
+
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="tab-icon"><rect x="6" y="2" width="12" height="6" rx="1"></rect><rect x="9" y="16" width="6" height="6" rx="1"></rect><line x1="10" y1="8" x2="10" y2="16"></line><line x1="14" y1="8" x2="14" y2="16"></line></svg>
|
|
82
|
+
USB
|
|
83
|
+
</button>
|
|
84
|
+
</div>
|
|
85
|
+
|
|
86
|
+
<!-- Tab Panel: WiFi -->
|
|
87
|
+
<div id="panel-wifi" class="tab-panel active">
|
|
88
|
+
|
|
89
|
+
<!-- Option 1: IP + Port + PIN Form -->
|
|
90
|
+
<div class="option-header-badge">
|
|
91
|
+
<span class="badge-num">1</span>
|
|
92
|
+
<span>Connect with IP & Connect PIN</span>
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
<div class="input-group">
|
|
96
|
+
<label>Connect PIN</label>
|
|
97
|
+
<div class="input-wrapper pin-wrapper">
|
|
98
|
+
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" class="input-icon"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
|
|
99
|
+
<input type="text" id="connect-pin" placeholder="e.g. 1425" maxlength="6">
|
|
100
|
+
</div>
|
|
101
|
+
</div>
|
|
102
|
+
|
|
103
|
+
<!-- Expandable Option Arrow Button for Advanced WiFi Parameters -->
|
|
104
|
+
<button class="options-accordion-btn" id="btn-toggle-wifi-options" type="button">
|
|
105
|
+
<div class="acc-btn-left">
|
|
106
|
+
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" class="acc-icon"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
|
|
107
|
+
<span>Advanced Options (IP, Port, Device Name)</span>
|
|
108
|
+
</div>
|
|
109
|
+
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" class="chevron-icon"><polyline points="6 9 12 15 18 9"></polyline></svg>
|
|
110
|
+
</button>
|
|
111
|
+
|
|
112
|
+
<div class="options-accordion-content" id="wifi-advanced-options">
|
|
113
|
+
<div class="input-group" style="margin-bottom: 12px;">
|
|
114
|
+
<label>Desktop IP Address</label>
|
|
115
|
+
<div class="input-wrapper">
|
|
116
|
+
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="input-icon"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
|
|
117
|
+
<input type="text" id="ip-address" placeholder="e.g. 10.145.195.86">
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
120
|
+
|
|
121
|
+
<div class="input-row-dual">
|
|
122
|
+
<div class="input-group">
|
|
123
|
+
<label>Port Number</label>
|
|
124
|
+
<div class="input-wrapper">
|
|
125
|
+
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" class="input-icon"><rect x="2" y="5" width="20" height="14" rx="2"></rect><line x1="2" y1="10" x2="22" y2="10"></line></svg>
|
|
126
|
+
<input type="text" id="port-number" placeholder="5001" value="5001">
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
|
|
130
|
+
<div class="input-group">
|
|
131
|
+
<label>Device Name (Optional)</label>
|
|
132
|
+
<div class="input-wrapper">
|
|
133
|
+
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" class="input-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
|
|
134
|
+
<input type="text" id="device-name" placeholder="My PC" value="My PC">
|
|
135
|
+
</div>
|
|
136
|
+
</div>
|
|
137
|
+
</div>
|
|
138
|
+
</div>
|
|
139
|
+
|
|
140
|
+
<!-- Connection Status -->
|
|
141
|
+
<div class="connection-status">
|
|
142
|
+
<span class="status-indicator disconnect-state"></span>
|
|
143
|
+
<span id="txt-status-detail">Not Connected</span>
|
|
144
|
+
</div>
|
|
145
|
+
|
|
146
|
+
<button class="primary-btn connect-btn" id="btn-connect-wifi">
|
|
147
|
+
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="btn-icon"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
|
|
148
|
+
<span id="txt-connect-btn">Start & Connect</span>
|
|
149
|
+
</button>
|
|
150
|
+
</div>
|
|
151
|
+
|
|
152
|
+
<!-- Tab Panel: Bluetooth -->
|
|
153
|
+
<div id="panel-bluetooth" class="tab-panel">
|
|
154
|
+
<div class="bt-action-box">
|
|
155
|
+
<button class="primary-btn scan-btn" id="btn-scan-bluetooth">
|
|
156
|
+
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="btn-icon"><path d="M6.5 6.5l11 11L12 23V1l5.5 5.5-11 11"></path></svg>
|
|
157
|
+
<span>Scan Bluetooth Devices</span>
|
|
158
|
+
</button>
|
|
159
|
+
</div>
|
|
160
|
+
|
|
161
|
+
<div class="option-divider">
|
|
162
|
+
<span>OR BLUETOOTH TETHERING</span>
|
|
163
|
+
</div>
|
|
164
|
+
|
|
165
|
+
<div class="bt-tethering-card">
|
|
166
|
+
<div class="bt-card-header">
|
|
167
|
+
<div class="bt-badge-icon">
|
|
168
|
+
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none"><path d="M6.5 6.5l11 11L12 23V1l5.5 5.5-11 11"></path></svg>
|
|
169
|
+
</div>
|
|
170
|
+
<div>
|
|
171
|
+
<strong>Direct Bluetooth Network (PAN)</strong>
|
|
172
|
+
<p>Pair phone & PC via Bluetooth Tethering for zero-router direct control.</p>
|
|
173
|
+
</div>
|
|
174
|
+
</div>
|
|
175
|
+
<button class="secondary-btn bt-connect-btn" id="btn-connect-bt-pan">
|
|
176
|
+
Connect via Bluetooth Network
|
|
177
|
+
</button>
|
|
178
|
+
</div>
|
|
179
|
+
|
|
180
|
+
<div class="device-list" id="bt-device-list">
|
|
181
|
+
<!-- Dynamically populated or paired devices -->
|
|
182
|
+
<div class="device-item" data-name="Windows PC (Bluetooth)" data-ip="">
|
|
183
|
+
<div class="device-info">
|
|
184
|
+
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" class="device-icon"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="2" y1="20" x2="22" y2="20"></line><line x1="12" y1="17" x2="12" y2="20"></line></svg>
|
|
185
|
+
<div>
|
|
186
|
+
<p class="dev-name">Windows PC (Paired)</p>
|
|
187
|
+
<p class="dev-addr">Direct Bluetooth PAN Connection</p>
|
|
188
|
+
</div>
|
|
189
|
+
</div>
|
|
190
|
+
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" class="chevron"><polyline points="9 18 15 12 9 6"></polyline></svg>
|
|
191
|
+
</div>
|
|
192
|
+
</div>
|
|
193
|
+
</div>
|
|
194
|
+
|
|
195
|
+
<!-- Tab Panel: USB -->
|
|
196
|
+
<div id="panel-usb" class="tab-panel">
|
|
197
|
+
<div class="usb-instructions">
|
|
198
|
+
<div class="usb-icon-circle">
|
|
199
|
+
<svg viewBox="0 0 24 24" width="32" height="32" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="usb-plug-svg"><rect x="6" y="2" width="12" height="6" rx="1"></rect><rect x="9" y="16" width="6" height="6" rx="1"></rect><line x1="10" y1="8" x2="10" y2="16"></line><line x1="14" y1="8" x2="14" y2="16"></line></svg>
|
|
200
|
+
</div>
|
|
201
|
+
<h3>Connect via USB cable</h3>
|
|
202
|
+
<p>Plug in your mobile device to your computer. Make sure USB Tethering or Debugging is active.</p>
|
|
203
|
+
<button class="primary-btn connect-btn" id="btn-connect-usb">
|
|
204
|
+
Connect USB
|
|
205
|
+
</button>
|
|
206
|
+
</div>
|
|
207
|
+
</div>
|
|
208
|
+
</div>
|
|
209
|
+
</section>
|
|
210
|
+
|
|
211
|
+
<!-- ================= 3. Mouse Control Screen ================= -->
|
|
212
|
+
<section id="screen-mouse" class="screen">
|
|
213
|
+
<header class="app-header active-header">
|
|
214
|
+
<div class="header-dev-desc">
|
|
215
|
+
<div class="connected-icon-box">
|
|
216
|
+
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="2" y1="20" x2="22" y2="20"></line><line x1="12" y1="17" x2="12" y2="20"></line></svg>
|
|
217
|
+
</div>
|
|
218
|
+
<div>
|
|
219
|
+
<h3 id="lbl-device-title">My PC</h3>
|
|
220
|
+
<p id="lbl-device-address">10.145.195.86:5001</p>
|
|
221
|
+
</div>
|
|
222
|
+
</div>
|
|
223
|
+
|
|
224
|
+
<div class="header-right-meta">
|
|
225
|
+
<div class="connection-status-pill">
|
|
226
|
+
<span class="status-indicator connect-state"></span>
|
|
227
|
+
<span id="lbl-pill-state">Ready</span>
|
|
228
|
+
</div>
|
|
229
|
+
</div>
|
|
230
|
+
</header>
|
|
231
|
+
|
|
232
|
+
<div class="control-area">
|
|
233
|
+
<!-- Trackpad Grid Area -->
|
|
234
|
+
<div class="trackpad" id="trackpad-area">
|
|
235
|
+
<div class="touch-glowing-cursor" id="touch-glow-cursor"></div>
|
|
236
|
+
<p class="trackpad-instructions">
|
|
237
|
+
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" class="instruction-icon"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm1 14h-2v-4h2zm0-6h-2V8h2z"></path></svg>
|
|
238
|
+
Tap = Click • Drag = Move • Two-finger = Scroll
|
|
239
|
+
</p>
|
|
240
|
+
</div>
|
|
241
|
+
|
|
242
|
+
<!-- Bottom Quick Controls Grid -->
|
|
243
|
+
<div class="mouse-actions-grid">
|
|
244
|
+
<!-- Left Click Button -->
|
|
245
|
+
<button class="mouse-btn left-click-btn" id="btn-left-click">
|
|
246
|
+
<div class="mouse-icon-visual left-active">
|
|
247
|
+
<svg viewBox="0 0 24 36" class="inner-mouse-svg">
|
|
248
|
+
<rect x="2" y="2" width="20" height="32" rx="10" stroke="currentColor" stroke-width="2" fill="none" />
|
|
249
|
+
<path d="M12 2 V16" stroke="currentColor" stroke-width="2" />
|
|
250
|
+
<path d="M2 16 H22" stroke="currentColor" stroke-width="2" />
|
|
251
|
+
<rect x="2" y="2" width="10" height="14" rx="4" class="left-click-part" fill="currentColor" opacity="0.3"/>
|
|
252
|
+
</svg>
|
|
253
|
+
</div>
|
|
254
|
+
<span>Left Click</span>
|
|
255
|
+
</button>
|
|
256
|
+
|
|
257
|
+
<!-- Right Click Button -->
|
|
258
|
+
<button class="mouse-btn right-click-btn" id="btn-right-click">
|
|
259
|
+
<div class="mouse-icon-visual right-active">
|
|
260
|
+
<svg viewBox="0 0 24 36" class="inner-mouse-svg">
|
|
261
|
+
<rect x="2" y="2" width="20" height="32" rx="10" stroke="currentColor" stroke-width="2" fill="none" />
|
|
262
|
+
<path d="M12 2 V16" stroke="currentColor" stroke-width="2" />
|
|
263
|
+
<path d="M2 16 H22" stroke="currentColor" stroke-width="2" />
|
|
264
|
+
<rect x="12" y="2" width="10" height="14" rx="4" class="right-click-part" fill="currentColor" opacity="0.3"/>
|
|
265
|
+
</svg>
|
|
266
|
+
</div>
|
|
267
|
+
<span>Right Click</span>
|
|
268
|
+
</button>
|
|
269
|
+
|
|
270
|
+
<!-- Scroll Controller -->
|
|
271
|
+
<div class="scroll-wheel-container">
|
|
272
|
+
<button class="scroll-arrow scroll-up-arrow" id="btn-scroll-up">
|
|
273
|
+
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none"><polyline points="18 15 12 9 6 15"></polyline></svg>
|
|
274
|
+
</button>
|
|
275
|
+
<div class="scroll-indicator-slider">
|
|
276
|
+
<div class="scroll-wheel-rail">
|
|
277
|
+
<div class="scroll-notch" id="scroll-wheel-notch"></div>
|
|
278
|
+
</div>
|
|
279
|
+
<span class="scroll-label">Scroll</span>
|
|
280
|
+
</div>
|
|
281
|
+
<button class="scroll-arrow scroll-down-arrow" id="btn-scroll-down">
|
|
282
|
+
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none"><polyline points="6 9 12 15 18 9"></polyline></svg>
|
|
283
|
+
</button>
|
|
284
|
+
</div>
|
|
285
|
+
</div>
|
|
286
|
+
|
|
287
|
+
<!-- Keyboard Quick Switch Card -->
|
|
288
|
+
<div class="mouse-aux-grid">
|
|
289
|
+
<button class="aux-card keyboard-card-btn" id="btn-quick-keyboard">
|
|
290
|
+
<div class="keyboard-icon-box">
|
|
291
|
+
<svg viewBox="0 0 24 24" width="22" height="22" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2" ry="2"></rect><line x1="6" y1="8" x2="6.01" y2="8"></line><line x1="10" y1="8" x2="10.01" y2="8"></line><line x1="14" y1="8" x2="14.01" y2="8"></line><line x1="18" y1="8" x2="18.01" y2="8"></line><line x1="6" y1="12" x2="6.01" y2="12"></line><line x1="10" y1="12" x2="10.01" y2="12"></line><line x1="14" y1="12" x2="14.01" y2="12"></line><line x1="18" y1="12" x2="18.01" y2="12"></line><line x1="7" y1="16" x2="17" y2="16"></line></svg>
|
|
292
|
+
</div>
|
|
293
|
+
<div class="aux-card-info">
|
|
294
|
+
<span class="card-title">Live Keyboard & TextPad</span>
|
|
295
|
+
<span class="card-subtitle">Open typing & keycodes tool →</span>
|
|
296
|
+
</div>
|
|
297
|
+
</button>
|
|
298
|
+
</div>
|
|
299
|
+
</div>
|
|
300
|
+
</section>
|
|
301
|
+
|
|
302
|
+
<!-- ================= 4. Dedicated Keyboard & TextPad Screen ================= -->
|
|
303
|
+
<section id="screen-keyboard" class="screen">
|
|
304
|
+
|
|
305
|
+
<div class="scroll-content kb-content-area">
|
|
306
|
+
|
|
307
|
+
<!-- Unified Keyboard Tool Card (Live & TextPad) -->
|
|
308
|
+
<div class="kb-tool-card unified-keyboard-card live-card-highlight">
|
|
309
|
+
<div class="keyboard-mode-toggle">
|
|
310
|
+
<button class="mode-toggle-btn active" id="btn-mode-live">Live Auto-Type</button>
|
|
311
|
+
<button class="mode-toggle-btn" id="btn-mode-textpad">Desktop TextPad</button>
|
|
312
|
+
</div>
|
|
313
|
+
|
|
314
|
+
<!-- Live Auto-Typing View -->
|
|
315
|
+
<div id="view-mode-live" class="keyboard-view active">
|
|
316
|
+
<div class="kb-card-header" style="margin-top:12px;">
|
|
317
|
+
<div class="kb-title-with-badge">
|
|
318
|
+
<span class="tool-dot live-dot"></span>
|
|
319
|
+
<h4>Live Auto-Typing</h4>
|
|
320
|
+
</div>
|
|
321
|
+
<span class="live-status-pill" id="pill-live-transmitting">Live Stream ⚡</span>
|
|
322
|
+
</div>
|
|
323
|
+
|
|
324
|
+
<div class="live-input-box-wrapper">
|
|
325
|
+
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" class="live-input-icon"><polyline points="4 7 4 4 20 4 20 7"></polyline><line x1="9" y1="20" x2="15" y2="20"></line><line x1="12" y1="4" x2="12" y2="20"></line></svg>
|
|
326
|
+
<input type="text" id="kb-live-input" placeholder="Type here to stream directly to PC..." autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
|
|
327
|
+
<button class="kb-quick-action-btn kb-enter-pill" id="btn-live-enter" title="Send Enter">↵ Enter</button>
|
|
328
|
+
<button class="kb-quick-action-btn kb-backspace-pill" id="btn-live-backspace" title="Backspace">⌫ Del</button>
|
|
329
|
+
</div>
|
|
330
|
+
</div>
|
|
331
|
+
|
|
332
|
+
<!-- Desktop TextPad View -->
|
|
333
|
+
<div id="view-mode-textpad" class="keyboard-view" style="display: none;">
|
|
334
|
+
<div class="kb-card-header" style="margin-top:12px;">
|
|
335
|
+
<div class="kb-title-with-badge">
|
|
336
|
+
<span class="tool-dot pad-dot"></span>
|
|
337
|
+
<h4>Desktop TextPad</h4>
|
|
338
|
+
</div>
|
|
339
|
+
<button class="textpad-clear-link" id="btn-textpad-clear">Clear Pad</button>
|
|
340
|
+
</div>
|
|
341
|
+
|
|
342
|
+
<div class="textpad-wrapper">
|
|
343
|
+
<textarea id="kb-textpad-input" rows="3" placeholder="Write full text, URLs, notes, or code here..."></textarea>
|
|
344
|
+
</div>
|
|
345
|
+
|
|
346
|
+
<button class="primary-btn send-textpad-btn" id="btn-send-textpad">
|
|
347
|
+
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="btn-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
|
|
348
|
+
<span>Send to Desktop TextPad</span>
|
|
349
|
+
</button>
|
|
350
|
+
</div>
|
|
351
|
+
</div>
|
|
352
|
+
|
|
353
|
+
<!-- Tool 3: Virtual Keypad & Modifier Controls -->
|
|
354
|
+
<div class="kb-tool-card keypad-card">
|
|
355
|
+
<div class="kb-card-header">
|
|
356
|
+
<div class="kb-title-with-badge">
|
|
357
|
+
<span class="tool-dot key-dot"></span>
|
|
358
|
+
<h4>Keycodes & Modifiers</h4>
|
|
359
|
+
</div>
|
|
360
|
+
<span class="keypad-helper-badge">Touch Enabled</span>
|
|
361
|
+
</div>
|
|
362
|
+
|
|
363
|
+
<button class="options-accordion-btn kb-accordion-btn is-expanded" id="btn-toggle-primary-actions" type="button" style="margin-top: 15px;">
|
|
364
|
+
<div class="acc-btn-left">
|
|
365
|
+
<span>Primary Actions & PC Shortcuts</span>
|
|
366
|
+
</div>
|
|
367
|
+
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" class="chevron-icon"><polyline points="6 9 12 15 18 9"></polyline></svg>
|
|
368
|
+
</button>
|
|
369
|
+
<div class="options-accordion-content is-expanded" id="content-primary-actions">
|
|
370
|
+
<div class="keycode-grid grid-4">
|
|
371
|
+
<button class="keycode-btn action-key esc-btn" data-key="esc">Esc</button>
|
|
372
|
+
<button class="keycode-btn action-key tab-btn-key" data-key="tab">Tab ⇥</button>
|
|
373
|
+
<button class="keycode-btn action-key shift-btn" data-key="shift">Shift ⇧</button>
|
|
374
|
+
<button class="keycode-btn action-key alt-btn" data-key="alt">Alt ⎇</button>
|
|
375
|
+
|
|
376
|
+
<button class="keycode-btn action-key win-btn" data-key="win">Win ⊞</button>
|
|
377
|
+
<button class="keycode-btn action-key fn-btn" data-key="fn">Fn ⚡</button>
|
|
378
|
+
<button class="keycode-btn action-key space-btn" data-key="space">Space ␣</button>
|
|
379
|
+
<button class="keycode-btn action-key snip-btn" data-key="win+shift+s">Win+Shift+S ✂</button>
|
|
380
|
+
|
|
381
|
+
<button class="keycode-btn shortcut-key" data-key="ctrl+a">Ctrl+A</button>
|
|
382
|
+
<button class="keycode-btn shortcut-key" data-key="ctrl+c">Ctrl+C</button>
|
|
383
|
+
<button class="keycode-btn shortcut-key" data-key="ctrl+v">Ctrl+V</button>
|
|
384
|
+
<button class="keycode-btn shortcut-key" data-key="ctrl+z">Ctrl+Z</button>
|
|
385
|
+
|
|
386
|
+
<button class="keycode-btn shortcut-key alt-shortcut" data-key="alt+tab">Alt+Tab ⇥</button>
|
|
387
|
+
<button class="keycode-btn shortcut-key alt-shortcut" data-key="alt+f4">Alt+F4 ✖</button>
|
|
388
|
+
<button class="keycode-btn shortcut-key" data-key="ctrl+s">Ctrl+S 💾</button>
|
|
389
|
+
<button class="keycode-btn shortcut-key" data-key="ctrl+y">Ctrl+Y ↷</button>
|
|
390
|
+
|
|
391
|
+
<button class="keycode-btn action-key enter-btn enter-btn-full" data-key="enter" style="grid-column: span 4;">↵ Enter Key</button>
|
|
392
|
+
</div>
|
|
393
|
+
</div>
|
|
394
|
+
|
|
395
|
+
|
|
396
|
+
|
|
397
|
+
<!-- Row 3: Navigation & Arrow D-Pad -->
|
|
398
|
+
<div class="keypad-section-label">Navigation & Arrow Keys</div>
|
|
399
|
+
<div class="nav-arrows-container">
|
|
400
|
+
<!-- Nav Side Buttons Removed -->
|
|
401
|
+
<div class="dpad-container">
|
|
402
|
+
<button class="keycode-btn arrow-btn dpad-up" data-key="up" title="Up Arrow">▲</button>
|
|
403
|
+
<div class="dpad-horizontal">
|
|
404
|
+
<button class="keycode-btn arrow-btn dpad-left" data-key="left" title="Left Arrow">◄</button>
|
|
405
|
+
<button class="keycode-btn arrow-btn dpad-down" data-key="down" title="Down Arrow">▼</button>
|
|
406
|
+
<button class="keycode-btn arrow-btn dpad-right" data-key="right" title="Right Arrow">►</button>
|
|
407
|
+
</div>
|
|
408
|
+
</div>
|
|
409
|
+
</div>
|
|
410
|
+
</div>
|
|
411
|
+
|
|
412
|
+
</div>
|
|
413
|
+
</section>
|
|
414
|
+
|
|
415
|
+
<!-- ================= 5. Settings Screen ================= -->
|
|
416
|
+
<section id="screen-settings" class="screen">
|
|
417
|
+
<header class="app-header">
|
|
418
|
+
<h2>Settings</h2>
|
|
419
|
+
</header>
|
|
420
|
+
|
|
421
|
+
<div class="scroll-content">
|
|
422
|
+
<p class="settings-group-label">General Preferences</p>
|
|
423
|
+
<div class="settings-card">
|
|
424
|
+
|
|
425
|
+
|
|
426
|
+
<div class="setting-row-column">
|
|
427
|
+
<div class="setting-slider-header">
|
|
428
|
+
<div class="setting-label-icon">
|
|
429
|
+
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" class="sett-icon"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
|
|
430
|
+
<span>Mouse Sensitivity</span>
|
|
431
|
+
</div>
|
|
432
|
+
<span class="slider-value" id="lbl-dpi-value">Medium (1600)</span>
|
|
433
|
+
</div>
|
|
434
|
+
<input type="range" class="custom-slider" id="slider-dpi" min="800" max="3200" step="400" value="1600">
|
|
435
|
+
<div class="slider-ticks">
|
|
436
|
+
<span>800</span>
|
|
437
|
+
<span>1600</span>
|
|
438
|
+
<span>3200</span>
|
|
439
|
+
</div>
|
|
440
|
+
</div>
|
|
441
|
+
|
|
442
|
+
<div class="setting-row">
|
|
443
|
+
<div class="setting-label-icon">
|
|
444
|
+
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" class="sett-icon"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
|
|
445
|
+
<div>
|
|
446
|
+
<p class="sett-title">Connection Session Timeout</p>
|
|
447
|
+
<p class="sett-desc">Auto disconnect connection after session timeout</p>
|
|
448
|
+
</div>
|
|
449
|
+
</div>
|
|
450
|
+
<select class="custom-select" id="select-session-timeout">
|
|
451
|
+
<option value="60" selected>1 Hour (Default)</option>
|
|
452
|
+
<option value="15">15 Minutes</option>
|
|
453
|
+
<option value="30">30 Minutes</option>
|
|
454
|
+
<option value="120">2 Hours</option>
|
|
455
|
+
<option value="240">4 Hours</option>
|
|
456
|
+
<option value="0">Never (Unlimited)</option>
|
|
457
|
+
</select>
|
|
458
|
+
</div>
|
|
459
|
+
|
|
460
|
+
<div class="setting-row clickable" id="btn-menu-reconnect">
|
|
461
|
+
<div class="setting-label-icon">
|
|
462
|
+
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" class="sett-icon"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
|
|
463
|
+
<div>
|
|
464
|
+
<p class="sett-title">Quick Reconnect</p>
|
|
465
|
+
<p class="sett-desc">Reconnect to saved IP & PIN</p>
|
|
466
|
+
</div>
|
|
467
|
+
</div>
|
|
468
|
+
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" class="chevron"><polyline points="9 18 15 12 9 6"></polyline></svg>
|
|
469
|
+
</div>
|
|
470
|
+
</div>
|
|
471
|
+
|
|
472
|
+
<p class="settings-group-label">File Transfer</p>
|
|
473
|
+
<div class="settings-card file-transfer-card">
|
|
474
|
+
<div class="setting-row">
|
|
475
|
+
<div class="setting-label-icon" style="width: 100%;">
|
|
476
|
+
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" class="sett-icon"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
|
|
477
|
+
<div style="flex: 1;">
|
|
478
|
+
<p class="sett-title">Upload to PC</p>
|
|
479
|
+
<p class="sett-desc">Send files to the host computer</p>
|
|
480
|
+
</div>
|
|
481
|
+
<button class="primary-btn sm-btn" id="btn-trigger-upload" style="margin: 0; padding: 6px 12px; font-size: 0.8rem;">Select</button>
|
|
482
|
+
<input type="file" id="file-upload-input" multiple style="display: none;">
|
|
483
|
+
</div>
|
|
484
|
+
</div>
|
|
485
|
+
<div id="upload-progress-container" style="display: none; padding: 12px; border-top: 1px solid rgba(255,255,255,0.05);">
|
|
486
|
+
<div style="display: flex; justify-content: space-between; font-size: 0.8rem; margin-bottom: 4px; color: #a0aec0;">
|
|
487
|
+
<span id="upload-filename">uploading...</span>
|
|
488
|
+
<span id="upload-percent">0%</span>
|
|
489
|
+
</div>
|
|
490
|
+
<div class="progress-bar-bg">
|
|
491
|
+
<div class="progress-bar-fill" id="upload-progress-fill"></div>
|
|
492
|
+
</div>
|
|
493
|
+
</div>
|
|
494
|
+
|
|
495
|
+
<div class="setting-row" style="border-top: 1px solid rgba(255,255,255,0.05); padding-top: 12px; margin-top: 4px; display: block;">
|
|
496
|
+
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
|
|
497
|
+
<p class="sett-title" style="margin-bottom: 0;">Files on PC</p>
|
|
498
|
+
<button class="icon-btn" id="btn-refresh-files" title="Refresh List" style="padding: 4px; background: rgba(0, 240, 255, 0.1); border-radius: 4px; color: var(--color-cyan);">
|
|
499
|
+
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>
|
|
500
|
+
</button>
|
|
501
|
+
</div>
|
|
502
|
+
<div class="file-list-container" id="file-list-container">
|
|
503
|
+
<p class="empty-state">No files found on PC.</p>
|
|
504
|
+
</div>
|
|
505
|
+
</div>
|
|
506
|
+
</div>
|
|
507
|
+
|
|
508
|
+
<p class="settings-group-label">Help & About</p>
|
|
509
|
+
<div class="settings-card">
|
|
510
|
+
<div class="setting-row clickable" id="btn-support-use">
|
|
511
|
+
<div class="setting-label-icon">
|
|
512
|
+
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" class="sett-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
|
|
513
|
+
<span>How to Connect</span>
|
|
514
|
+
</div>
|
|
515
|
+
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" class="chevron"><polyline points="9 18 15 12 9 6"></polyline></svg>
|
|
516
|
+
</div>
|
|
517
|
+
|
|
518
|
+
<div class="setting-row clickable" id="btn-support-faq">
|
|
519
|
+
<div class="setting-label-icon">
|
|
520
|
+
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" class="sett-icon"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
|
|
521
|
+
<span>Troubleshooting</span>
|
|
522
|
+
</div>
|
|
523
|
+
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" class="chevron"><polyline points="9 18 15 12 9 6"></polyline></svg>
|
|
524
|
+
</div>
|
|
525
|
+
|
|
526
|
+
<div class="setting-row" id="btn-support-about">
|
|
527
|
+
<div class="setting-label-icon">
|
|
528
|
+
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" class="sett-icon"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
|
|
529
|
+
<span>Version</span>
|
|
530
|
+
</div>
|
|
531
|
+
<span class="about-version">v2.5 (PWA Ready)</span>
|
|
532
|
+
</div>
|
|
533
|
+
</div>
|
|
534
|
+
|
|
535
|
+
<button class="disconnect-btn-action" id="btn-action-disconnect">
|
|
536
|
+
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="btn-icon"><path d="M18.36 6.64a9 9 0 1 1-12.73 0"></path><line x1="12" y1="2" x2="12" y2="12"></line></svg>
|
|
537
|
+
Disconnect Device
|
|
538
|
+
</button>
|
|
539
|
+
</div>
|
|
540
|
+
</section>
|
|
541
|
+
|
|
542
|
+
<!-- ================= 6. How to Connect Screen ================= -->
|
|
543
|
+
<section id="screen-how-to-connect" class="screen">
|
|
544
|
+
<header class="app-header active-header">
|
|
545
|
+
<button class="icon-btn" id="btn-back-how-to-connect" title="Back to Settings">
|
|
546
|
+
<svg viewBox="0 0 24 24" width="22" height="22" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
|
|
547
|
+
</button>
|
|
548
|
+
<h2>How to Connect</h2>
|
|
549
|
+
<div style="width:22px;"></div>
|
|
550
|
+
</header>
|
|
551
|
+
|
|
552
|
+
<div class="scroll-content guide-scroll-area">
|
|
553
|
+
<div class="guide-intro-card">
|
|
554
|
+
<div class="guide-badge">WiFi / Hotspot Network Pairing</div>
|
|
555
|
+
<p class="guide-subtitle">Follow these 4 simple steps to connect your mobile phone to your Windows PC.</p>
|
|
556
|
+
</div>
|
|
557
|
+
|
|
558
|
+
<div class="guide-steps-list">
|
|
559
|
+
<!-- Step 1 -->
|
|
560
|
+
<div class="guide-step-card">
|
|
561
|
+
<div class="step-number-badge">1</div>
|
|
562
|
+
<div class="step-content">
|
|
563
|
+
<h4>Run Server on Windows PC</h4>
|
|
564
|
+
<p>Open Terminal / PowerShell on your PC and launch the server:</p>
|
|
565
|
+
<div class="code-snippet-box">
|
|
566
|
+
<code>npx vm2do</code>
|
|
567
|
+
</div>
|
|
568
|
+
<p class="step-subtext">The console will activate and show your <strong>PC's IP Address</strong> and 4-digit <strong>Connect PIN</strong>.</p>
|
|
569
|
+
</div>
|
|
570
|
+
</div>
|
|
571
|
+
|
|
572
|
+
<!-- Step 2 -->
|
|
573
|
+
<div class="guide-step-card">
|
|
574
|
+
<div class="step-number-badge">2</div>
|
|
575
|
+
<div class="step-content">
|
|
576
|
+
<h4>Connect to Same Wi-Fi</h4>
|
|
577
|
+
<p>Ensure both your mobile phone and PC are connected to the <strong>same Wi-Fi network</strong> (or phone Mobile Hotspot).</p>
|
|
578
|
+
</div>
|
|
579
|
+
</div>
|
|
580
|
+
|
|
581
|
+
<!-- Step 3 -->
|
|
582
|
+
<div class="guide-step-card">
|
|
583
|
+
<div class="step-number-badge">3</div>
|
|
584
|
+
<div class="step-content">
|
|
585
|
+
<h4>Scan QR Code or Enter IP</h4>
|
|
586
|
+
<div class="option-subblock">
|
|
587
|
+
<div class="option-pill">Option A (Easiest)</div>
|
|
588
|
+
<p>Open your phone camera and scan the <strong>terminal QR code</strong>. It will open the web app with IP & PIN pre-filled!</p>
|
|
589
|
+
</div>
|
|
590
|
+
<div class="option-subblock" style="margin-top:10px;">
|
|
591
|
+
<div class="option-pill">Option B (Manual)</div>
|
|
592
|
+
<p>On the <strong>Connect</strong> screen, type your PC's IP address (e.g. <code>10.15.235.86</code>) and the 4-digit <strong>Connect PIN</strong>.</p>
|
|
593
|
+
</div>
|
|
594
|
+
</div>
|
|
595
|
+
</div>
|
|
596
|
+
|
|
597
|
+
<!-- Step 4 -->
|
|
598
|
+
<div class="guide-step-card">
|
|
599
|
+
<div class="step-number-badge">4</div>
|
|
600
|
+
<div class="step-content">
|
|
601
|
+
<h4>Start Controlling Desktop</h4>
|
|
602
|
+
<p>Tap <strong>"Start & Connect"</strong>. Once connected, use the trackpad gestures:</p>
|
|
603
|
+
<ul class="gesture-bullets">
|
|
604
|
+
<li><strong>1-Finger Drag:</strong> Smooth cursor movement</li>
|
|
605
|
+
<li><strong>1-Finger Tap:</strong> Left Click</li>
|
|
606
|
+
<li><strong>2-Finger Drag:</strong> Vertical Scrolling</li>
|
|
607
|
+
<li><strong>Press & Hold Scroll Arrow:</strong> Continuous Auto-Scroll</li>
|
|
608
|
+
</ul>
|
|
609
|
+
</div>
|
|
610
|
+
</div>
|
|
611
|
+
</div>
|
|
612
|
+
|
|
613
|
+
<button class="primary-btn" id="btn-guide-go-connect" style="margin-top:20px;">
|
|
614
|
+
<span>Go to Connection Screen</span>
|
|
615
|
+
</button>
|
|
616
|
+
</div>
|
|
617
|
+
</section>
|
|
618
|
+
|
|
619
|
+
<!-- ================= 7. Troubleshooting Screen ================= -->
|
|
620
|
+
<section id="screen-troubleshooting" class="screen">
|
|
621
|
+
<header class="app-header active-header">
|
|
622
|
+
<button class="icon-btn" id="btn-back-troubleshooting" title="Back to Settings">
|
|
623
|
+
<svg viewBox="0 0 24 24" width="22" height="22" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
|
|
624
|
+
</button>
|
|
625
|
+
<h2>Troubleshooting</h2>
|
|
626
|
+
<div style="width:22px;"></div>
|
|
627
|
+
</header>
|
|
628
|
+
|
|
629
|
+
<div class="scroll-content guide-scroll-area">
|
|
630
|
+
<div class="guide-intro-card faq-banner">
|
|
631
|
+
<div class="guide-badge faq-badge">Diagnostics & Fixes</div>
|
|
632
|
+
<p class="guide-subtitle">Having trouble connecting or controlling your PC? Find quick solutions below.</p>
|
|
633
|
+
</div>
|
|
634
|
+
|
|
635
|
+
<div class="faq-list">
|
|
636
|
+
<!-- Issue 1 -->
|
|
637
|
+
<div class="faq-item">
|
|
638
|
+
<div class="faq-question">
|
|
639
|
+
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" class="faq-icon"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="17"></line></svg>
|
|
640
|
+
<span>Phone says "Connection Timed Out" or "Could not connect"</span>
|
|
641
|
+
</div>
|
|
642
|
+
<div class="faq-answer">
|
|
643
|
+
<p><strong>Common Causes:</strong> Windows Firewall blocking Node.js, or phone and PC are on different Wi-Fi networks.</p>
|
|
644
|
+
<p style="margin-top:6px;"><strong>Solutions:</strong></p>
|
|
645
|
+
<ol>
|
|
646
|
+
<li>Check Windows Defender Firewall -> Allow an app -> Enable <strong>Private & Public</strong> access for <code>Node.js</code>.</li>
|
|
647
|
+
<li>Verify phone and PC are on the <strong>same Wi-Fi router network</strong>.</li>
|
|
648
|
+
<li>If using a public/work Wi-Fi, turn on phone's Mobile Hotspot and connect PC to phone hotspot.</li>
|
|
649
|
+
</ol>
|
|
650
|
+
</div>
|
|
651
|
+
</div>
|
|
652
|
+
|
|
653
|
+
<!-- Issue 2 -->
|
|
654
|
+
<div class="faq-item">
|
|
655
|
+
<div class="faq-question">
|
|
656
|
+
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" class="faq-icon"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
|
|
657
|
+
<span>"Port 5000 is already in use by another process"</span>
|
|
658
|
+
</div>
|
|
659
|
+
<div class="faq-answer">
|
|
660
|
+
<p><strong>Cause:</strong> Another background server or app is using HTTP port 5000.</p>
|
|
661
|
+
<p style="margin-top:6px;"><strong>Solution:</strong> Start the server on a different open port using the <code>--port</code> argument:</p>
|
|
662
|
+
<div class="code-snippet-box">
|
|
663
|
+
<code>node server.js --port=8080</code>
|
|
664
|
+
</div>
|
|
665
|
+
</div>
|
|
666
|
+
</div>
|
|
667
|
+
|
|
668
|
+
<!-- Issue 3 -->
|
|
669
|
+
<div class="faq-item">
|
|
670
|
+
<div class="faq-question">
|
|
671
|
+
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" class="faq-icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
|
|
672
|
+
<span>Terminal QR Code won't scan on phone camera</span>
|
|
673
|
+
</div>
|
|
674
|
+
<div class="faq-answer">
|
|
675
|
+
<p><strong>Solutions:</strong></p>
|
|
676
|
+
<ol>
|
|
677
|
+
<li>Open terminal link directly: click the <strong>Instant Mobile Link</strong> printed in the terminal console.</li>
|
|
678
|
+
<li>View high-res QR image link printed in console: <code>https://api.qrserver.com/...</code></li>
|
|
679
|
+
<li>Or manually type the PC IP (e.g. <code>10.15.235.86</code>) into the app Connect screen.</li>
|
|
680
|
+
</ol>
|
|
681
|
+
</div>
|
|
682
|
+
</div>
|
|
683
|
+
|
|
684
|
+
<!-- Issue 4 -->
|
|
685
|
+
<div class="faq-item">
|
|
686
|
+
<div class="faq-question">
|
|
687
|
+
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" class="faq-icon"><path d="M18.36 6.64a9 9 0 1 1-12.73 0"></path><line x1="12" y1="2" x2="12" y2="12"></line></svg>
|
|
688
|
+
<span>App disconnected after closing browser tab</span>
|
|
689
|
+
</div>
|
|
690
|
+
<div class="faq-answer">
|
|
691
|
+
<p><strong>Fixed in v2.5:</strong> App auto-restores connection when returning to the tab. If you accidentally clicked "Disconnect Device", enter your 4-digit PIN on the home screen and click "Start & Connect".</p>
|
|
692
|
+
</div>
|
|
693
|
+
</div>
|
|
694
|
+
</div>
|
|
695
|
+
|
|
696
|
+
<button class="outline-btn" id="btn-troubleshoot-reconnect" style="margin-top:20px;">
|
|
697
|
+
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
|
|
698
|
+
<span>Try Reconnecting Now</span>
|
|
699
|
+
</button>
|
|
700
|
+
</div>
|
|
701
|
+
</section>
|
|
702
|
+
|
|
703
|
+
<!-- ================= Bottom Navigation Bar (4 Tabs) ================= -->
|
|
704
|
+
<nav class="bottom-navbar" id="main-bottom-nav">
|
|
705
|
+
<button class="nav-item active" data-screen="screen-home">
|
|
706
|
+
<svg viewBox="0 0 24 24" width="22" height="22" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="nav-icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
|
|
707
|
+
<span>Connect</span>
|
|
708
|
+
</button>
|
|
709
|
+
<button class="nav-item" data-screen="screen-mouse">
|
|
710
|
+
<svg viewBox="0 0 24 24" width="22" height="22" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="nav-icon"><rect x="5" y="2" width="14" height="20" rx="7" fill="none" stroke="currentColor" stroke-width="2"/><line x1="12" y1="2" x2="12" y2="10" stroke="currentColor" stroke-width="2"/><circle cx="12" cy="6" r="1.5" fill="currentColor"/></svg>
|
|
711
|
+
<span>Mouse</span>
|
|
712
|
+
</button>
|
|
713
|
+
<button class="nav-item" data-screen="screen-keyboard">
|
|
714
|
+
<svg viewBox="0 0 24 24" width="22" height="22" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="nav-icon"><rect x="2" y="4" width="20" height="16" rx="2" ry="2"></rect><line x1="6" y1="8" x2="6.01" y2="8"></line><line x1="10" y1="8" x2="10.01" y2="8"></line><line x1="14" y1="8" x2="14.01" y2="8"></line><line x1="18" y1="8" x2="18.01" y2="8"></line><line x1="6" y1="12" x2="6.01" y2="12"></line><line x1="10" y1="12" x2="10.01" y2="12"></line><line x1="14" y1="12" x2="14.01" y2="12"></line><line x1="18" y1="12" x2="18.01" y2="12"></line><line x1="7" y1="16" x2="17" y2="16"></line></svg>
|
|
715
|
+
<span>Keyboard</span>
|
|
716
|
+
</button>
|
|
717
|
+
<button class="nav-item" data-screen="screen-settings">
|
|
718
|
+
<svg viewBox="0 0 24 24" width="22" height="22" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="nav-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1 2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
|
|
719
|
+
<span>Settings</span>
|
|
720
|
+
</button>
|
|
721
|
+
</nav>
|
|
722
|
+
|
|
723
|
+
<!-- SVG Gradients Definition -->
|
|
724
|
+
<svg style="width:0;height:0;position:absolute;">
|
|
725
|
+
<defs>
|
|
726
|
+
<linearGradient id="mouse-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
727
|
+
<stop offset="0%" stop-color="#00f0ff" />
|
|
728
|
+
<stop offset="100%" stop-color="#22a0ff" />
|
|
729
|
+
</linearGradient>
|
|
730
|
+
</defs>
|
|
731
|
+
</svg>
|
|
732
|
+
|
|
733
|
+
</div>
|
|
734
|
+
|
|
735
|
+
<!-- Application Script with Cache Buster -->
|
|
736
|
+
<script src="app.js?v=2.5"></script>
|
|
737
|
+
</body>
|
|
738
|
+
</html>
|