Skip to content

Commit 33c629d

Browse files
author
Tom Softreck
committed
update
1 parent c18da06 commit 33c629d

File tree

8 files changed

+1898
-239
lines changed

8 files changed

+1898
-239
lines changed

‎scripts/publish.sh‎

100644100755
File mode changed.

‎webtask/static/command-icons.css‎

Lines changed: 333 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,333 @@
1+
/* Command icons styling */
2+
.command-with-icon {
3+
display: flex;
4+
align-items: center;
5+
gap: 8px;
6+
}
7+
8+
.command-icon {
9+
display: inline-flex;
10+
align-items: center;
11+
justify-content: center;
12+
min-width: 40px;
13+
padding: 2px 4px;
14+
border-radius: 4px;
15+
font-size: 10px;
16+
font-weight: bold;
17+
color: #000;
18+
background-color: #00ffff;
19+
}
20+
21+
.command-text {
22+
white-space: nowrap;
23+
overflow: hidden;
24+
text-overflow: ellipsis;
25+
max-width: 150px;
26+
display: inline-block;
27+
}
28+
29+
/* Icon colors */
30+
.nginx-icon { background-color: #009639; color: white; }
31+
.node-icon { background-color: #68a063; color: white; }
32+
.python-icon { background-color: #306998; color: white; }
33+
.java-icon { background-color: #5382a1; color: white; }
34+
.mysql-icon { background-color: #00758f; color: white; }
35+
.firefox-icon { background-color: #ff9500; color: white; }
36+
.chrome-icon { background-color: #4285f4; color: white; }
37+
.pycharm-icon { background-color: #21d789; color: white; }
38+
.vscode-icon { background-color: #0078d7; color: white; }
39+
.process-icon { background-color: #666; color: white; }
40+
41+
/* Adjust process command column */
42+
.process-command {
43+
display: flex;
44+
align-items: center;
45+
justify-content: space-between;
46+
gap: 10px;
47+
max-width: 200px;
48+
overflow: hidden;
49+
}
50+
51+
/* Make sure the preview thumbnail doesn't interfere with the command text */
52+
.preview-thumbnail {
53+
flex-shrink: 0;
54+
}
55+
56+
/* HTML Preview styling */
57+
.preview-iframe-container {
58+
position: relative;
59+
width: 100%;
60+
height: 300px;
61+
overflow: hidden;
62+
border: 1px solid #444;
63+
background: #fff;
64+
border-radius: 4px;
65+
}
66+
67+
.preview-iframe-container iframe {
68+
width: 1000%;
69+
height: 1000%;
70+
border: none;
71+
transform: scale(0.1);
72+
transform-origin: 0 0;
73+
}
74+
75+
.html-preview {
76+
position: relative;
77+
width: 100%;
78+
height: 100px;
79+
overflow: hidden;
80+
background: #fff;
81+
border-radius: 4px;
82+
}
83+
84+
.html-preview iframe {
85+
width: 1000%;
86+
height: 1000%;
87+
border: none;
88+
transform: scale(0.1);
89+
transform-origin: 0 0;
90+
}
91+
92+
/* Code preview styling */
93+
.code-preview {
94+
background: #1e1e1e;
95+
color: #d4d4d4;
96+
font-family: 'Courier New', monospace;
97+
display: flex;
98+
flex-direction: column;
99+
overflow: hidden;
100+
}
101+
102+
.code-preview-header {
103+
background: #333;
104+
padding: 4px 8px;
105+
display: flex;
106+
align-items: center;
107+
gap: 8px;
108+
font-size: 12px;
109+
border-bottom: 1px solid #555;
110+
}
111+
112+
.file-icon {
113+
display: inline-flex;
114+
align-items: center;
115+
justify-content: center;
116+
min-width: 30px;
117+
padding: 2px 4px;
118+
border-radius: 3px;
119+
font-size: 10px;
120+
font-weight: bold;
121+
}
122+
123+
.code-snippet {
124+
margin: 0;
125+
padding: 4px 8px;
126+
font-size: 10px;
127+
overflow: hidden;
128+
max-height: 80px;
129+
white-space: pre-wrap;
130+
}
131+
132+
/* Text preview styling */
133+
.text-preview {
134+
background: #f5f5f5;
135+
color: #333;
136+
display: flex;
137+
flex-direction: column;
138+
}
139+
140+
.text-preview-header {
141+
background: #ddd;
142+
padding: 4px 8px;
143+
display: flex;
144+
align-items: center;
145+
gap: 8px;
146+
font-size: 12px;
147+
border-bottom: 1px solid #ccc;
148+
}
149+
150+
.text-content {
151+
padding: 4px 8px;
152+
font-size: 11px;
153+
overflow: hidden;
154+
max-height: 80px;
155+
}
156+
157+
/* Service preview styling */
158+
.service-preview {
159+
background: #2a2a2a;
160+
display: flex;
161+
flex-direction: column;
162+
}
163+
164+
.service-header {
165+
padding: 4px 8px;
166+
display: flex;
167+
align-items: center;
168+
justify-content: center;
169+
gap: 8px;
170+
font-size: 12px;
171+
border-bottom: 1px solid #444;
172+
}
173+
174+
.service-content {
175+
padding: 4px 8px;
176+
display: flex;
177+
flex-direction: column;
178+
align-items: center;
179+
justify-content: center;
180+
flex-grow: 1;
181+
}
182+
183+
.service-status {
184+
font-size: 14px;
185+
font-weight: bold;
186+
color: #00ff00;
187+
margin-bottom: 8px;
188+
}
189+
190+
.service-metrics {
191+
display: flex;
192+
gap: 10px;
193+
font-size: 10px;
194+
}
195+
196+
/* Web service preview */
197+
.web-service-preview {
198+
background: #2a2a2a;
199+
display: flex;
200+
flex-direction: column;
201+
}
202+
203+
.web-service-header {
204+
padding: 4px 8px;
205+
display: flex;
206+
align-items: center;
207+
justify-content: space-between;
208+
font-size: 12px;
209+
border-bottom: 1px solid #444;
210+
}
211+
212+
.port-badge {
213+
background: #444;
214+
padding: 2px 6px;
215+
border-radius: 10px;
216+
font-size: 10px;
217+
color: #00ffff;
218+
}
219+
220+
.browser-mockup {
221+
width: 100%;
222+
height: 80px;
223+
background: #fff;
224+
border-radius: 4px;
225+
overflow: hidden;
226+
display: flex;
227+
flex-direction: column;
228+
}
229+
230+
.browser-bar {
231+
height: 16px;
232+
background: #ddd;
233+
border-bottom: 1px solid #ccc;
234+
}
235+
236+
.browser-content {
237+
flex-grow: 1;
238+
background: linear-gradient(to bottom, #f5f5f5, #fff);
239+
}
240+
241+
/* Port preview */
242+
.port-preview {
243+
background: #2a2a2a;
244+
display: flex;
245+
flex-direction: column;
246+
}
247+
248+
.port-header {
249+
padding: 4px 8px;
250+
display: flex;
251+
align-items: center;
252+
justify-content: space-between;
253+
font-size: 12px;
254+
border-bottom: 1px solid #444;
255+
}
256+
257+
.port-details {
258+
padding: 8px;
259+
display: flex;
260+
flex-direction: column;
261+
align-items: center;
262+
justify-content: center;
263+
flex-grow: 1;
264+
}
265+
266+
.port-status {
267+
width: 12px;
268+
height: 12px;
269+
border-radius: 50%;
270+
margin-bottom: 8px;
271+
}
272+
273+
.port-status.active {
274+
background: #00ff00;
275+
box-shadow: 0 0 8px #00ff00;
276+
}
277+
278+
.port-info {
279+
font-size: 12px;
280+
color: #00ffff;
281+
}
282+
283+
/* Generic process preview */
284+
.generic-preview {
285+
background: #2a2a2a;
286+
display: flex;
287+
flex-direction: column;
288+
}
289+
290+
.process-header {
291+
padding: 4px 8px;
292+
display: flex;
293+
align-items: center;
294+
justify-content: space-between;
295+
font-size: 12px;
296+
border-bottom: 1px solid #444;
297+
}
298+
299+
.process-pid {
300+
background: #444;
301+
padding: 2px 6px;
302+
border-radius: 10px;
303+
font-size: 10px;
304+
color: #00ffff;
305+
}
306+
307+
.process-content {
308+
padding: 8px;
309+
display: flex;
310+
flex-direction: column;
311+
align-items: center;
312+
justify-content: center;
313+
flex-grow: 1;
314+
}
315+
316+
.process-command {
317+
font-size: 12px;
318+
margin-bottom: 8px;
319+
text-align: center;
320+
word-break: break-word;
321+
}
322+
323+
.process-metrics {
324+
display: flex;
325+
gap: 10px;
326+
font-size: 10px;
327+
}
328+
329+
.metric {
330+
display: flex;
331+
align-items: center;
332+
gap: 4px;
333+
}

‎webtask/static/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<link rel="icon" href="favicon.ico" type="image/x-icon">
88
<link rel="manifest" href="manifest.json">
99
<link rel="stylesheet" href="styles.css">
10+
<link rel="stylesheet" href="command-icons.css">
1011
</head>
1112
<body>
1213
<div class="header">

0 commit comments

Comments
 (0)