Skip to content

Commit 6a9c90b

Browse files
1T171T17
committed
G4
1 parent bdbccbe commit 6a9c90b

File tree

1 file changed

+278
-66
lines changed

1 file changed

+278
-66
lines changed

‎node/views/index.ejs‎

Lines changed: 278 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -6,82 +6,253 @@
66
<link rel="stylesheet" href="/style.css">
77
<style>
88
html, body {
9-
margin: 0;
10-
padding: 0;
119
height: 100%;
12-
background: #000;
13-
color: #ddd;
14-
font-family: sans-serif;
10+
min-height: 0;
1511
overflow: hidden;
12+
padding: 0px 0px;
13+
margin: 0px 0px;
1614
}
1715
1816
#ggform {
17+
height: 100%;
18+
min-height: 0;
1919
display: flex;
2020
flex-direction: column;
21-
height: 100%;
21+
2222
}
2323
2424
.main-content {
25-
flex: 1;
25+
flex: 1 1 0%;
2626
display: flex;
27+
min-height: 0;
2728
}
2829
2930
.left-panel,
3031
.right-panel {
31-
flex: 1;
32-
position: relative;
33-
border: 1px solid #444;
32+
flex: 1 1 0%;
3433
min-width: 0;
3534
min-height: 0;
3635
height: 100%;
36+
position: relative;
37+
overflow: hidden;
3738
}
3839
39-
#editor,
40-
#output {
41-
position: absolute;
42-
top: 0;
43-
bottom: 0;
44-
left: 0;
45-
right: 0;
46-
min-width: 0;
40+
#editor, #output {
4741
min-height: 0;
42+
min-width: 0;
43+
width: 100%;
4844
height: 100%;
45+
overflow: hidden;
4946
}
5047
51-
.bottom-bar {
52-
height: 60px;
53-
background: #111;
54-
display: flex;
55-
justify-content: space-evenly;
56-
align-items: center;
57-
border-top: 1px solid #333;
58-
padding: 0 20px;
48+
.right-panel {
49+
display: flex;
50+
flex-direction: column;
51+
height: 100%;
52+
position: relative;
5953
}
60-
61-
.logo-button, .control-button {
62-
background: none;
63-
border: none;
64-
cursor: pointer;
65-
color: white;
66-
font-size: 14px;
67-
display: flex;
68-
align-items: center;
69-
gap: 8px;
54+
.gcode-header {
55+
flex: 0 0 auto;
56+
position: static;
57+
width: 100%;
58+
z-index: 1;
7059
}
71-
72-
.logo-button img {
73-
width: 50px;
74-
height: auto;
60+
#output {
61+
flex: 1 1 auto;
62+
position: static;
63+
min-height: 0;
64+
min-width: 0;
65+
width: 100%;
66+
height: 100%;
7567
}
7668
77-
.control-button img {
78-
width: 20px;
79-
height: 20px;
80-
}
8169
82-
.control-button:hover {
83-
color: #6cf;
70+
.control-bar {
71+
background: #252526;
72+
border-top: 1px solid #3c3c3c;
73+
padding: 10px 16px;
74+
display: flex;
75+
align-items: center;
76+
gap: 8px;
77+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
78+
}
79+
80+
.control-bar button {
81+
background: transparent;
82+
color: #cccccc;
83+
border: none;
84+
padding: 6px 12px;
85+
border-radius: 3px;
86+
cursor: pointer;
87+
font-size: 16px;
88+
font-weight: 400;
89+
transition: background-color 0.1s ease;
90+
display: flex;
91+
align-items: center;
92+
gap: 6px;
93+
min-width: 70px;
94+
justify-content: center;
95+
}
96+
97+
.control-bar button:hover {
98+
background: #2a2d2e;
99+
color: #ffffff;
100+
}
101+
102+
.control-bar button:active {
103+
background: #37373d;
104+
}
105+
106+
.control-bar button.primary {
107+
color: #007acc;
108+
}
109+
110+
.control-bar button.primary:hover {
111+
background: #094771;
112+
color: #ffffff;
113+
}
114+
115+
.control-bar button.danger {
116+
color: #f48771;
117+
}
118+
119+
.control-bar button.danger:hover {
120+
background: #5a1d1d;
121+
color: #ffffff;
122+
}
123+
124+
.control-bar button.success {
125+
color: #89d185;
126+
}
127+
128+
.control-bar button.success:hover {
129+
background: #1e4a1e;
130+
color: #ffffff;
131+
}
132+
133+
.control-bar .toggle-container {
134+
display: flex;
135+
align-items: center;
136+
gap: 6px;
137+
color: #cccccc;
138+
font-size: 16px;
139+
font-weight: 400;
140+
}
141+
142+
.control-bar .toggle-container input[type="checkbox"] {
143+
width: 16px;
144+
height: 16px;
145+
accent-color: #007acc;
146+
margin: 0;
147+
}
148+
149+
.control-bar .separator {
150+
width: 1px;
151+
height: 20px;
152+
background: #3c3c3c;
153+
margin: 0 6px;
154+
}
155+
156+
.control-bar .spacer {
157+
flex: 1;
158+
}
159+
160+
.control-bar .button-group {
161+
display: flex;
162+
align-items: center;
163+
gap: 6px;
164+
}
165+
166+
.control-bar .group-label {
167+
color: #8c8c8c;
168+
font-size: 16px;
169+
font-weight: 500;
170+
text-transform: uppercase;
171+
letter-spacing: 0.5px;
172+
margin-right: 4px;
173+
}
174+
175+
.control-left,
176+
.control-right {
177+
flex: 1;
178+
display: flex;
179+
align-items: center;
180+
gap: 8px;
181+
}
182+
183+
.control-right {
184+
flex: 1;
185+
display: flex;
186+
align-items: center;
187+
gap: 8px;
188+
width: 100%;
189+
position: relative;
190+
}
191+
.control-right .gcode-group {
192+
display: flex;
193+
align-items: center;
194+
gap: 8px;
195+
}
196+
.control-right .utility-group {
197+
display: flex;
198+
align-items: center;
199+
gap: 8px;
200+
margin-left: auto;
201+
}
202+
203+
.control-right .button-group,
204+
.control-right .separator,
205+
.control-right .toggle-container,
206+
.control-right button {
207+
margin-left: 0;
208+
margin-right: 0;
209+
}
210+
211+
.gcode-header {
212+
background: #252526;
213+
border-bottom: 1px solid #3c3c3c;
214+
padding: 8px 12px;
215+
display: flex;
216+
align-items: center;
217+
gap: 12px;
218+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
219+
position: static; /* Remove absolute */
220+
width: 100%;
221+
z-index: 1;
84222
}
223+
224+
.gcode-title {
225+
color: #cccccc;
226+
font-size: 12px;
227+
font-weight: 500;
228+
margin-right: auto;
229+
}
230+
231+
.gcode-header button {
232+
background: transparent;
233+
color: #cccccc;
234+
border: none;
235+
padding: 4px 8px;
236+
border-radius: 2px;
237+
cursor: pointer;
238+
font-size: 11px;
239+
font-weight: 400;
240+
transition: background-color 0.1s ease;
241+
}
242+
243+
.gcode-header button:hover {
244+
background: #2a2d2e;
245+
color: #ffffff;
246+
}
247+
248+
.gcode-header button:last-child {
249+
color: #365235;
250+
}
251+
252+
.gcode-header button:last-child:hover {
253+
background: #1e4a1e;
254+
color: #ffffff;
255+
}
85256
</style>
86257
</head>
87258
<body>
@@ -98,29 +269,70 @@
98269
<textarea name="ggcode" id="ggcode" style="display:none;"><%= input %></textarea>
99270

100271
<!-- Bottom Control Bar -->
101-
<div class="bottom-bar">
102-
<label style="display: flex; align-items: center; gap: 6px; font-size: 14px;">
103-
<input type="checkbox" id="autoCompileCheckbox" style="width: 18px; height: 18px;" />
104-
Auto-compile
105-
</label>
272+
<div class="control-bar">
273+
<div class="control-left">
106274

107275

108-
<button type="submit" class="control-button" title="Compile GGcode">⚙️ <span>Compile</span></button>
109276

110-
<button type="button" class="control-button" id="openGGcodeBtn" title="Open GGcode file">📂 <span>Open GGcode</span></button>
111-
112-
<button type="button" class="control-button" onclick="copyOutput()" title="Copy output G-code">
113-
📋 <span>Copy Gcode</span>
114-
</button>
115-
<button type="button" class="control-button" onclick="saveOutput()" title="Save output G-code to file">
116-
💾 <span>Save Gcode</span>
117-
</button>
118-
<button type="button" class="control-button" onclick="saveGGcode()" title="Save GGcode input to file">
119-
💾 <span>Save GGcode</span>
120-
</button>
121-
<button type="button" class="control-button" onclick="clearMemory()" title="Clear saved content and settings">
122-
🗑️ <span>Clear Memory</span>
123-
</button>
277+
<div class="separator"></div>
278+
<div class="button-group">
279+
<span class="group-label">GG-code</span>
280+
281+
282+
283+
<button type="submit" class="primary" title="Compile GGcode">
284+
<svg width="14" height="14" viewBox="0 0 12 12" fill="currentColor">
285+
<path d="M2.5 1.5L8.5 6L2.5 10.5V1.5Z"/>
286+
</svg>
287+
Compile
288+
</button>
289+
290+
291+
<button type="button" id="openGGcodeBtn" title="Open GGcode file">
292+
<svg width="14" height="14" viewBox="0 0 12 12" fill="currentColor">
293+
<path d="M2 2V10H10V4H6V2H2ZM6 2V4H10L6 2ZM1 1V11H11V3L7 1H1Z"/>
294+
</svg>
295+
Open
296+
</button>
297+
<button type="button" onclick="saveGGcode()" class="success" title="Save GGcode input to file">
298+
<svg width="14" height="14" viewBox="0 0 12 12" fill="currentColor">
299+
<path d="M2 2V10H10V4H6V2H2ZM6 2V4H10L6 2ZM1 1V11H11V3L7 1H1Z"/>
300+
</svg>
301+
Save
302+
</button>
303+
</div>
304+
</div>
305+
<div class="control-right">
306+
<div class="gcode-group">
307+
<div class="separator"></div>
308+
<span class="group-label">G-code</span>
309+
<button type="button" onclick="copyOutput()" title="Copy output G-code">
310+
<svg width="14" height="14" viewBox="0 0 12 12" fill="currentColor">
311+
<path d="M4 2H2C1.45 2 1 2.45 1 3V9C1 9.55 1.45 10 2 10H6C6.55 10 7 9.55 7 9V7H5V9H2V3H4V2ZM8 2H6V3H8V2ZM10 4H8V5H10V4ZM8 6H10V7H8V6ZM6 4H8V5H6V4ZM8 6H6V7H8V6ZM10 8H8V9H10V8ZM8 10H10V11H8V10ZM6 8H8V9H6V8ZM8 10H6V11H8V10Z"/>
312+
</svg>
313+
Copy
314+
</button>
315+
<button type="button" onclick="saveOutput()" class="success" title="Save output G-code to file">
316+
<svg width="14" height="14" viewBox="0 0 12 12" fill="currentColor">
317+
<path d="M6 1L10 5H8V9H4V5H2L6 1ZM1 10V11H11V10H1Z"/>
318+
</svg>
319+
Export
320+
</button>
321+
</div>
322+
<div class="utility-group">
323+
<button type="button" onclick="clearMemory()" class="danger" title="Clear saved content and settings">
324+
<svg width="14" height="14" viewBox="0 0 12 12" fill="currentColor">
325+
<path d="M4.5 2.5L4 3L7.5 6.5L11 3L10.5 2.5L7.5 5.5L4.5 2.5ZM2 2V10H10V2H2ZM1 1V11H11V1H1Z"/>
326+
</svg>
327+
Clear
328+
</button>
329+
<div class="separator"></div>
330+
<div class="toggle-container">
331+
<input type="checkbox" id="autoCompileCheckbox" />
332+
<label for="autoCompileCheckbox">Auto</label>
333+
</div>
334+
</div>
335+
</div>
124336
<input type="file" id="ggcodeFileInput" accept=".ggcode,.txt" style="display:none;" />
125337
</div>
126338
</form>

0 commit comments

Comments
 (0)