Skip to content

Commit 6738c96

Browse files
ThomasFarstrikeThomasFarstrike
committed
Beautify WebREPL
1 parent d54b489 commit 6738c96

3 files changed

Lines changed: 227 additions & 7 deletions

File tree

‎webrepl/webrepl.css‎

Lines changed: 133 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,140 @@
1+
:root {
2+
color-scheme: light;
3+
--bg: #ffffff;
4+
--panel: #f6f7f9;
5+
--panel-border: #e1e5ea;
6+
--text: #1c1f24;
7+
--muted: #5c6572;
8+
--accent: #f0a010;
9+
--accent-hover: #e08f00;
10+
--accent-active: #cc7f00;
11+
--shadow: 0 10px 30px rgba(19, 27, 43, 0.08);
12+
--radius: 12px;
13+
--focus-ring: 0 0 0 3px rgba(240, 160, 16, 0.3);
14+
}
15+
16+
* {
17+
box-sizing: border-box;
18+
}
19+
120
html {
2-
background: #555;
21+
background: var(--bg);
22+
}
23+
24+
body {
25+
margin: 0;
26+
padding: 24px 28px 32px;
27+
font: 16px/1.6 "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
28+
color: var(--text);
29+
background: var(--bg);
330
}
431

532
h1 {
6-
margin-bottom: 20px;
7-
font: 20px/1.5 sans-serif;
33+
margin: 0 0 20px;
34+
font: 600 24px/1.3 "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
35+
color: var(--text);
36+
}
37+
38+
form {
39+
display: flex;
40+
flex-wrap: wrap;
41+
gap: 12px;
42+
align-items: center;
43+
margin-bottom: 16px;
844
}
45+
46+
/* Fixed-height wrapper keeps the terminal footprint stable; rows are computed from this height. */
47+
#term-wrapper {
48+
height: 420px;
49+
}
50+
51+
/* Terminal fills the wrapper; row count is recalculated on load/resize only. */
52+
#term {
53+
height: 100%;
54+
border-radius: var(--radius);
55+
border: 1px solid var(--panel-border);
56+
background: #0f141b;
57+
color: #f1f5f9;
58+
padding: 8px;
59+
box-shadow: var(--shadow);
60+
overflow: hidden;
61+
}
62+
63+
#file-boxes {
64+
margin-left: 20px;
65+
}
66+
967
.file-box {
10-
margin: 4px;
11-
padding: 4px;
12-
background: #888;
68+
margin: 0 0 16px;
69+
padding: 14px 16px 16px;
70+
background: var(--panel);
71+
border: 1px solid var(--panel-border);
72+
border-radius: var(--radius);
73+
box-shadow: var(--shadow);
74+
display: grid;
75+
gap: 10px;
76+
}
77+
78+
.file-box strong {
79+
font-size: 15px;
80+
}
81+
82+
#file-status {
83+
color: var(--muted);
84+
font-size: 14px;
85+
}
86+
87+
input[type="text"],
88+
input[type="file"] {
89+
width: 100%;
90+
padding: 10px 12px;
91+
border-radius: 10px;
92+
border: 1px solid var(--panel-border);
93+
background: #ffffff;
94+
color: var(--text);
95+
font-size: 14px;
96+
}
97+
98+
input[type="text"]:focus,
99+
input[type="file"]:focus {
100+
outline: none;
101+
border-color: var(--accent);
102+
box-shadow: var(--focus-ring);
103+
}
104+
105+
input[type="submit"],
106+
input[type="button"] {
107+
padding: 10px 16px;
108+
border-radius: 999px;
109+
border: none;
110+
background: var(--accent);
111+
color: #1a1200;
112+
font-weight: 600;
113+
font-size: 14px;
114+
cursor: pointer;
115+
transition: transform 0.08s ease, background 0.15s ease, box-shadow 0.15s ease;
116+
box-shadow: 0 8px 18px rgba(240, 160, 16, 0.35);
117+
}
118+
119+
input[type="submit"]:hover,
120+
input[type="button"]:hover {
121+
background: var(--accent-hover);
122+
transform: translateY(-1px);
123+
}
124+
125+
input[type="submit"]:active,
126+
input[type="button"]:active {
127+
background: var(--accent-active);
128+
transform: translateY(0);
129+
}
130+
131+
input[type="submit"]:focus,
132+
input[type="button"]:focus {
133+
outline: none;
134+
box-shadow: var(--focus-ring);
135+
}
136+
137+
i {
138+
color: var(--muted);
139+
font-size: 13px;
13140
}

‎webrepl/webrepl.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
<input type="text" name="webrepl_url" id="url" value="" />
1414
<input type="submit" id="button" value="Connect" onclick="button_click(); return false;" />
1515
</form>
16-
<div id="term">
16+
<div id="term-wrapper">
17+
<div id="term"></div>
1718
</div>
1819
</div>
1920

@@ -42,5 +43,6 @@
4243
</body>
4344

4445
<script src="webrepl.js"></script>
46+
<script src="webrepl_tweaks.js"></script>
4547

4648
</html>

‎webrepl/webrepl_tweaks.js‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
// Set terminal height dynamically, without modifying webrepl.js
2+
(function() {
3+
var maxReadyAttempts = 90;
4+
var readyAttempts = 0;
5+
var resizeScheduled = false;
6+
var resizeDebounce = null;
7+
8+
function get_term_container() {
9+
return document.getElementById('term');
10+
}
11+
12+
// Wrapper keeps a fixed height; rows are derived from its rendered height.
13+
function get_term_wrapper() {
14+
return document.getElementById('term-wrapper') || get_term_container();
15+
}
16+
17+
// Compute rows once on load/resize using wrapper height and terminal padding.
18+
function calculate_dynamic_rows() {
19+
var wrapper = get_term_wrapper();
20+
var termContainer = get_term_container();
21+
if (!wrapper || !termContainer) {
22+
return null;
23+
}
24+
var rect = wrapper.getBoundingClientRect();
25+
var height = rect.height || wrapper.clientHeight || window.innerHeight;
26+
var style = window.getComputedStyle(termContainer);
27+
var paddingTop = parseFloat(style.paddingTop) || 0;
28+
var paddingBottom = parseFloat(style.paddingBottom) || 0;
29+
var contentHeight = height - paddingTop - paddingBottom;
30+
return Math.max(24, Math.min(80, (contentHeight - 20) / 12)) | 0;
31+
}
32+
33+
function resize_term_rows() {
34+
if (!window.term || !window.term.resize) {
35+
return false;
36+
}
37+
var rows = calculate_dynamic_rows();
38+
if (rows === null) {
39+
return false;
40+
}
41+
var cols = window.term.cols || 80;
42+
if (window.term.rows !== rows) {
43+
window.term.resize(cols, rows);
44+
}
45+
return true;
46+
}
47+
48+
function schedule_resize() {
49+
if (resizeScheduled) {
50+
return;
51+
}
52+
resizeScheduled = true;
53+
window.requestAnimationFrame(function() {
54+
resizeScheduled = false;
55+
resize_term_rows();
56+
});
57+
}
58+
59+
function schedule_resize_debounced() {
60+
if (resizeDebounce) {
61+
window.clearTimeout(resizeDebounce);
62+
}
63+
resizeDebounce = window.setTimeout(function() {
64+
resizeDebounce = null;
65+
schedule_resize();
66+
}, 80);
67+
}
68+
69+
function wait_for_term_ready() {
70+
if (window.term && window.term.resize) {
71+
schedule_resize_debounced();
72+
if (resize_term_rows()) {
73+
return;
74+
}
75+
}
76+
if (readyAttempts >= maxReadyAttempts) {
77+
return;
78+
}
79+
readyAttempts += 1;
80+
window.requestAnimationFrame(wait_for_term_ready);
81+
}
82+
83+
window.addEventListener('load', function() {
84+
wait_for_term_ready();
85+
schedule_resize_debounced();
86+
});
87+
88+
window.addEventListener('resize', function() {
89+
schedule_resize_debounced();
90+
});
91+
}).call(this);

0 commit comments

Comments
 (0)