Skip to content

Commit 19137a0

Browse files
mr-karanmr-karan
committed
feat: improve web UI with wider command blocks and snake favicon
- Remove copy buttons for cleaner interface - Increase command block width to 1000px for better readability - Eliminate horizontal scrolling with proper text wrapping - Add snake emoji (🐍) favicon using inline SVG - Simplify JavaScript by removing copy functionality - Better mobile responsive styling for command blocks
1 parent 2137d34 commit 19137a0

File tree

3 files changed

+9
-131
lines changed

3 files changed

+9
-131
lines changed

‎internal/api/web/index.html‎

Lines changed: 1 addition & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Arbok - Secure HTTP Tunnels</title>
7+
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🐍</text></svg>">
78
<link rel="stylesheet" href="/static/style.css">
89
<link rel="preconnect" href="https://fonts.googleapis.com">
910
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -38,13 +39,6 @@ <h1 class="hero-title">Secure HTTP tunnels to localhost</h1>
3839
<div class="command-label">Start tunnel:</div>
3940
<div class="command-block">
4041
<code class="command-text">curl https://arbok.mrkaran.dev/3000 > burrow.conf && sudo wg-quick up ./burrow.conf</code>
41-
<button class="copy-button" data-copy="curl https://arbok.mrkaran.dev/3000 > burrow.conf && sudo wg-quick up ./burrow.conf">
42-
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
43-
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
44-
<path d="m5 15-4-4 4-4"></path>
45-
<path d="M5 15H1a2 2 0 01-2-2V3a2 2 0 012-2h10a2 2 0 012 2v4"></path>
46-
</svg>
47-
</button>
4842
</div>
4943
<div class="port-note">
5044
Replace <code>3000</code> with your local port.<br>
@@ -56,13 +50,6 @@ <h1 class="hero-title">Secure HTTP tunnels to localhost</h1>
5650
<div class="command-label">Stop tunnel:</div>
5751
<div class="command-block">
5852
<code class="command-text">sudo wg-quick down ./burrow.conf</code>
59-
<button class="copy-button" data-copy="sudo wg-quick down ./burrow.conf">
60-
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
61-
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
62-
<path d="m5 15-4-4 4-4"></path>
63-
<path d="M5 15H1a2 2 0 01-2-2V3a2 2 0 012 2v4"></path>
64-
</svg>
65-
</button>
6653
</div>
6754
</div>
6855

@@ -133,12 +120,6 @@ <h3>HTTP Proxy</h3>
133120
<h4 class="advanced-title">API Access</h4>
134121
<div class="command-block">
135122
<code class="command-text">curl -X POST -H "X-API-Key: your-key" https://arbok.mrkaran.dev/api/tunnel/3000</code>
136-
<button class="copy-button" data-copy="curl -X POST -H \"X-API-Key: your-key\" https://arbok.mrkaran.dev/api/tunnel/3000">
137-
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
138-
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
139-
<path d="m5 15-4-4 4-4"></path>
140-
</svg>
141-
</button>
142123
</div>
143124
</div>
144125
</div>
@@ -154,21 +135,9 @@ <h4 class="advanced-title">🔥 Firewall Issues (CentOS/RHEL/Fedora)</h4>
154135
<p class="troubleshooting-desc">If you can ping through the tunnel but TCP connections fail, add the WireGuard interface to the trusted zone:</p>
155136
<div class="command-block">
156137
<code class="command-text">sudo firewall-cmd --permanent --zone=trusted --add-interface=burrow</code>
157-
<button class="copy-button" data-copy="sudo firewall-cmd --permanent --zone=trusted --add-interface=burrow">
158-
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
159-
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
160-
<path d="m5 15-4-4 4-4"></path>
161-
</svg>
162-
</button>
163138
</div>
164139
<div class="command-block">
165140
<code class="command-text">sudo firewall-cmd --reload</code>
166-
<button class="copy-button" data-copy="sudo firewall-cmd --reload">
167-
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
168-
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
169-
<path d="m5 15-4-4 4-4"></path>
170-
</svg>
171-
</button>
172141
</div>
173142
</div>
174143

‎internal/api/web/script.js‎

Lines changed: 3 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,5 @@
1-
// Copy to clipboard functionality
1+
// Arbok web interface
22
document.addEventListener('DOMContentLoaded', function() {
3-
// Get all copy buttons
4-
const copyButtons = document.querySelectorAll('.copy-button');
5-
6-
copyButtons.forEach(button => {
7-
button.addEventListener('click', async function() {
8-
const textToCopy = this.getAttribute('data-copy');
9-
const svg = this.querySelector('svg');
10-
11-
try {
12-
// Use the modern Clipboard API
13-
await navigator.clipboard.writeText(textToCopy);
14-
15-
// Visual feedback - change SVG to checkmark
16-
svg.innerHTML = '<path d="m9 12 2 2 4-4"></path>';
17-
this.style.background = 'rgba(34, 197, 94, 0.2)';
18-
19-
// Reset after 2 seconds
20-
setTimeout(() => {
21-
svg.innerHTML = '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="m5 15-4-4 4-4"></path><path d="M5 15H1a2 2 0 01-2-2V3a2 2 0 012-2h10a2 2 0 012 2v4"></path>';
22-
this.style.background = 'rgba(255, 255, 255, 0.1)';
23-
}, 2000);
24-
25-
} catch (err) {
26-
// Fallback for older browsers
27-
try {
28-
const textarea = document.createElement('textarea');
29-
textarea.value = textToCopy;
30-
textarea.style.position = 'fixed';
31-
textarea.style.opacity = '0';
32-
document.body.appendChild(textarea);
33-
34-
textarea.select();
35-
textarea.setSelectionRange(0, 99999);
36-
document.execCommand('copy');
37-
38-
document.body.removeChild(textarea);
39-
40-
// Visual feedback
41-
svg.innerHTML = '<path d="m9 12 2 2 4-4"></path>';
42-
this.style.background = 'rgba(34, 197, 94, 0.2)';
43-
44-
setTimeout(() => {
45-
svg.innerHTML = '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="m5 15-4-4 4-4"></path><path d="M5 15H1a2 2 0 01-2-2V3a2 2 0 012-2h10a2 2 0 012 2v4"></path>';
46-
this.style.background = 'rgba(255, 255, 255, 0.1)';
47-
}, 2000);
48-
49-
} catch (fallbackErr) {
50-
// Show error state
51-
svg.innerHTML = '<line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>';
52-
this.style.background = 'rgba(239, 68, 68, 0.2)';
53-
54-
setTimeout(() => {
55-
svg.innerHTML = '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="m5 15-4-4 4-4"></path><path d="M5 15H1a2 2 0 01-2-2V3a2 2 0 012-2h10a2 2 0 012 2v4"></path>';
56-
this.style.background = 'rgba(255, 255, 255, 0.1)';
57-
}, 2000);
58-
}
59-
}
60-
});
61-
});
62-
63-
// Add smooth scroll behavior for anchor links
64-
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
65-
anchor.addEventListener('click', function (e) {
66-
e.preventDefault();
67-
const target = document.querySelector(this.getAttribute('href'));
68-
if (target) {
69-
target.scrollIntoView({
70-
behavior: 'smooth',
71-
block: 'start'
72-
});
73-
}
74-
});
75-
});
3+
// Add any future interactive functionality here
4+
console.log('Arbok web interface loaded');
765
});

‎internal/api/web/style.css‎

Lines changed: 5 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -182,45 +182,25 @@ body {
182182
overflow: hidden;
183183
font-family: var(--font-mono);
184184
margin-bottom: var(--space-xs);
185+
width: 100%;
186+
max-width: 1000px;
185187
}
186188

187189
.command-text {
188190
display: block;
189191
padding: var(--space-md);
190-
padding-right: 3rem; /* Add space for copy button */
191-
font-size: 0.95rem;
192+
font-size: 0.9rem;
192193
line-height: 1.4;
193194
margin: 0;
194195
background: transparent;
195196
border: none;
196-
word-break: break-all;
197197
white-space: pre-wrap;
198+
word-break: break-all;
198199
user-select: all; /* Make text easily selectable */
199200
-webkit-user-select: all;
200201
-moz-user-select: all;
201202
}
202203

203-
.copy-button {
204-
position: absolute;
205-
top: var(--space-xs);
206-
right: var(--space-xs);
207-
background: rgba(255, 255, 255, 0.1);
208-
border: none;
209-
color: var(--bg-primary);
210-
padding: var(--space-xs);
211-
border-radius: 4px;
212-
cursor: pointer;
213-
transition: var(--transition);
214-
display: flex;
215-
align-items: center;
216-
justify-content: center;
217-
pointer-events: auto; /* Ensure button is clickable */
218-
z-index: 10; /* Ensure button is above text */
219-
}
220-
221-
.copy-button:hover {
222-
background: rgba(255, 255, 255, 0.2);
223-
}
224204

225205
.port-note {
226206
font-size: 0.95rem;
@@ -541,7 +521,7 @@ body {
541521
}
542522

543523
.command-text {
544-
font-size: 0.85rem;
524+
font-size: 0.8rem;
545525
padding: var(--space-sm);
546526
}
547527

0 commit comments

Comments
 (0)