DeviceBridge/static/html/help.html at main · paradox-solver/DeviceBridge · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>Help - DeviceBridge</title>
    <link rel="stylesheet" href="../css/style.css">
    <style>/* Help page specific styles */
.help-container {
max-width: 900px;
margin: 0 auto;
padding: 40px 20px;
}
.help-card {
background: white;
border-radius: var(--border-radius, 16px);
padding: 30px;
margin-bottom: 20px;
box-shadow: var(--shadow, 0 2px 10px rgba(0,0,0,0.1));
}
.help-card h2 {
color: var(--dark-bg, #2c3e50);
margin: 0 0 20px 0;
padding-bottom: 10px;
border-bottom: 3px solid var(--primary-color, #4A90E2);
}
.help-card h3 {
color: var(--primary-color, #4A90E2);
margin: 20px 0 12px 0;
font-size: 1.2em;
}
.help-card h4 {
color: var(--text-muted, #666);
margin: 16px 0 8px 0;
font-size: 1em;
}
.help-card p {
margin: 12px 0;
line-height: 1.6;
}
.help-card ul, .help-card ol {
margin: 10px 0 10px 24px;
padding-left: 10px;
}
.help-card li {
margin: 8px 0;
line-height: 1.5;
}
.help-card code {
background: var(--light-bg, #f4f4f4);
padding: 2px 6px;
border-radius: 4px;
font-family: 'Courier New', monospace;
font-size: 0.9em;
}
.help-card a {
color: var(--primary-color, #4A90E2);
text-decoration: none;
}
.help-card a:hover {
text-decoration: underline;
}
.intro-text {
font-size: 1.05em;
line-height: 1.6;
margin-bottom: 0;
}
.toolbar {
display: flex;
gap: 12px;
justify-content: center;
margin-bottom: 24px;
}
.back-link {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
color: var(--text-muted, #666);
border: 1px solid var(--border-color, #ddd);
padding: 10px 20px;
border-radius: 44px;
text-decoration: none;
font-size: 0.95em;
transition: all 0.2s;
}
.back-link:hover {
background: rgba(0,0,0,0.05);
color: var(--text-color, #333);
}
hr {
margin: 24px 0;
border: none;
border-top: 1px solid var(--border-color, #e0e0e0);
}
@media (max-width: 768px) {
.help-container {
padding: 20px 15px;
}
.help-card {
padding: 20px;
}
}</style>
</head>
<body>
    <div class="help-container">
        <h1>❓ Help & Documentation</h1>

        <div class="toolbar">
            <button id="homeBtn" class="btn" onclick="location.href='../index.html'">🏠 Home</button>
            <button id="refreshBtn" class="btn" onclick="location.reload()">🔄 Refresh</button>
        </div>

        <div class="help-card">
            <p class="intro-text">
                <strong>DeviceBridge</strong> is a local web application for secureandconvenient file and data sharing between PC and mobile devices.
Just run this app on your PC and use your phone's default browser to connect. No need to install any additional apps.
</p>
        </div>

        <div class="help-card">
            <h2>📱 Key Features</h2>
            <p>DeviceBridge enables fast and convenient transfer of text, images, and files between your PC and mobile device. Main features include:</p>

            <h4>1. Text Transfer via QR Code Scanning</h4>
            <ul>
                <li><strong>QR Code Generator:</strong> Generate QR codes for text, URLs, or files to share with mobile devices.</li>
                <li><strong>Remote Scan:</strong> Use your phone to scan QR codes and send the result back to your PC.</li>
            </ul>

            <h4>2. Image Transfer via Drawing/Signing on Mobile</h4>
            <ul>
                <li><strong>Draw & Sign:</strong> Draw or sign on your device and transfer the image to your PC.</li>
            </ul>

            <h4>3. File Transfer Between PC and Mobile</h4>
            <ul>
                <li><strong>File Share:</strong> Transfer files from your PC to your mobile device via browser.</li>
                <li><strong>File Fetch:</strong> Transfer files from your mobile device to your PC.</li>
            </ul>
        </div>

        <div class="help-card">
            <h2 id="server-setup">🔧 Fundamental Step: Server Setup</h2>
            <p>Most functions rely on a properly configured server. Follow these steps to set up the server:</p>

            <h3>Step 1: Configure Server Settings</h3>
            <ul>
                <li>Make sure your phone is connected to the same network as your computer</li>
                <li>Open the app, confirm the IP address is correct and the port is available</li>
                <li>Ensure your firewall settings allow traffic on the chosen port</li>
            </ul>

            <h3>Step 2: Start the Server and Connect</h3>
            <ul>
                <li>Click the "Start Server" button. Wait until the indicator turns green ("ON"). A QR code of the server URL will appear in the Previewarea.</li>
                <li>On your phone, scan this QR code. Tap the recognized link to open it in your phone's browser.</li>
                <li>Alternatively, you can manually enter the server URL in your phone's browser.</li>
                <li>Since you are using a self-signed certificate, your browser may show a security warning. You can safely ignore this warning because the server runs entirely on your own PC. Look for the "Advanced" option and click "Proceed Anyway".</li>
                <li>If successful, your browser will show a page with function menus. You can now transfer files, images, and text between your devices.</li>
            </ul>

            <h3>Step 3: Stop the Server After Use</h3>
            <ul>
                <li>After finishing your transfer tasks, remember to click "Stop Server" to free up the port.</li>
                <li>Close the browser tab on your phone to avoid potential security risks.</li>
            </ul>
        </div>

        <div class="help-card">
            <h2>📷 Scan to Text</h2>
            <p>Use your phone to scan QR codes and send the result back to your PC.</p>
            <h3>Connection Setup:</h3>
            <ul>
                <li><b>Step 1.</b> <a href="#server-setup"><b>Set up and start the server.</b></a></li>
                <li><b>Step 2.</b>Connect your phone to the server by scanning the QR code in the<b>Preview</b> area.</li>
                <li><b>Remote Scan</b>provides two ways to send text to your PC: via QR scan or direct text input.</li>
            </ul>
            <h3>Option 1: QR Scan</h3>
            <ul>
                <li><b>Step 3.</b>On your phone, select<b>Remote Scan</b>from the menu page.</li>
                <li><b>Step 4.</b>Click<b>Start Scan</b>to activate the camera and scan the target QR code.</li>
                <li><b>Step 5.</b> Click <b>Send to PC</b>to send the scanned result back to your computer.</li>
            </ul>
            <h3>Option 2: Text Input</h3>
            <ul>
                <li><b>Step 3.</b>On your phone, switch to the<b>Text Input</b>tab.</li>
                <li><b>Step 4.</b>Enter text in the text box, or click "Paste from Clipboard".</li>
                <li><b>Step 5.</b> Click <b>Send to PC</b>to send the text back to your computer.</li>
            </ul>
        </div>

        <div class="help-card">
            <h2>✏️ Draw & Sign</h2>
            <p>Draw or sign on your device and transfer the image to your PC.</p>
            <ul>
                <li><b>Step 1.</b> <a href="#server-setup"><b>Set up and start the server.</b></a></li>
                <li><b>Step 2.</b> Connect your phone to the server by scanning the QR code in the <b>Preview</b> area.</li>
                <li><b>Step 3.</b> On your phone, select <b>Remote Draw</b> from the menu page.</li>
                <li><b>Step 4.</b>Use your finger or stylus to draw on the canvas.</li>
                <li><b>Step 5.</b>When finished, click<b>Send to PC</b>to transfer the image.</li>
                <li><b>Step 6.</b>On your PC, the image will appear in the<b>Draw & Sign</b>tab. Click<b>Save as Image</b>to save it.</li>
            </ul>
        </div>

        <div class="help-card">
            <h2>📤 File to Mobile</h2>
            <p>Transfer files from your PC to your mobile device via browser.</p>
            <ul>
                <li><b>Step 1.</b>Switch to the<b>File Share</b>tab on your PC.</li>
                <li><b>Step 2.</b> <a href="#server-setup"><b>Set up and start the server.</b></a></li>
                <li><b>Step 3.</b>Connect your phone to the server by scanning the QR code.</li>
                <li><b>Step 4.</b> On your phone, select <b>File Share</b> from the menu page.</li>
                <li><b>Step 5.</b>Tap on any file card to download it directly to your phone.</li>
            </ul>
        </div>

        <div class="help-card">
            <h2>📥 File to PC</h2>
            <p>Transfer files from your mobile device to your PC.</p>
            <ul>
                <li><b>Step 1.</b> <a href="#server-setup"><b>Set up and start the server.</b></a></li>
                <li><b>Step 2.</b> Connect your phone to the server by scanning the QR code.</li>
                <li><b>Step 3.</b> On your phone, select <b>File Fetch</b> from the menu page.</li>
                <li><b>Step 4.</b>Click the upload area to select files from your phone.</li>
                <li><b>Step 5.</b> Click <b>Send Files</b>to transfer them to your PC.</li>
                <li><b>Step 6.</b>On your PC, the files will be saved to the configured output directory.</li>
            </ul>
        </div>

        <div class="help-card">
            <h2>⚠️ Troubleshooting</h2>
            <h3>IP / Port / Firewall Issues</h3>
            <ul>
                <li>If the server fails to start, check that the IP address is correct and the port is not occupied.</li>
                <li>Ensure your firewall allows incoming connections on the selected port.</li>
                <li>Confirm that both devices are on the same network.</li>
            </ul>
            <h3>Browser Issues</h3>
            <ul>
                <li><strong>Windows:</strong> Chrome and Edge are supported.</li>
                <li><strong>iPhone:</strong> Safari is supported.</li>
                <li><strong>Android:</strong> Firefox is recommended. Chrome may have camera permission issues.</li>
            </ul>
            <p>You will likely encounter a "Your connection is not private" warning. This is normal for self-signed certificates. Click "Advanced" → "Proceed Anyway" to continue.</p>
        </div>

        <div class="help-card">
            <h2>🛡️ Security Notes</h2>
            <p>DeviceBridge ensures security in multiple ways:</p>
            <ul>
                <li>All data is transferred only within your local network — never uploaded to any cloud server.</li>
                <li>All transfers are encrypted using HTTPS (SSL) to ensure privacy, even on public networks.</li>
                <li>Each transfer follows a two-step "share-fetch" procedure, preventing direct unauthorized access.</li>
            </ul>
            <p>For additional safety:</p>
            <ul>
                <li>Only ignore security warnings for your own local server with self-signed certificates.</li>
                <li>Never share your private key (<code>key.pem</code>) — others could impersonate your server.</li>
                <li>Do not share the server URL with strangers or expose it in public.</li>
                <li>Always stop the server and close the browser tab after use.</li>
            </ul>
        </div>

        <div class="help-card">
            <h2>📄 Credits</h2>
            <ul>
                <li>Developed by <a href="https://github.com/paradoxsolver1997/" target="_blank">Paradoxsolver</a></li>
                <li><a href="https://www.mozilla.org/en-US/MPL/2.0/" target="_blank">Mozilla Public License
Version 2.0</a></li>
                <li>Powered by Flask, html5-qrcode, and more</li>
                <li>Project: <a href="https://github.com/paradoxsolver1997/DeviceBridge" target="_blank">github.com/paradoxsolver1997/FiBridge</a></li>
            </ul>
        </div>
    </div>
</body>
</html>