VPR/editor.html at main · windows10101713/VPR · 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
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>VPR | Editor</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body data-page="editor">
    <div class="app-shell">
      <aside class="sidebar">
        <div>
          <a class="brand brand-link" href="index.html">
            <div class="brand-mark">V</div>
            <div>
              <p class="eyebrow">Virtual Program Runner</p>
              <h1>VPR</h1>
            </div>
          </a>
          <nav class="menu">
            <a class="menu-item" href="index.html"><span>홈</span><small>Home</small></a>
            <a class="menu-item is-active" href="editor.html"><span>에디터</span><small>Editor</small></a>
            <a class="menu-item" href="examples.html"><span>예제</span><small>Examples</small></a>
            <a class="menu-item" href="assistant.html"><span>AI 도우미</span><small>Assistant</small></a>
            <a class="menu-item" href="errors.html"><span>에러 해결</span><small>Error Fix</small></a>
            <a class="menu-item" href="community.html"><span>공유</span><small>Community</small></a>
          </nav>
        </div>
        <div class="sidebar-card">
          <p class="eyebrow">에디터 안내</p>
          <h2>프로젝트별로 저장</h2>
          <p>작성 중인 코드는 브라우저 로컬 저장소에 프로젝트 단위로 보관됩니다.</p>
        </div>
      </aside>

      <main class="main-content page-stack">
        <header class="topbar">
          <div>
            <p class="eyebrow">Notebook-style editor</p>
            <h2 id="page-title">코드를 작성하고 바로 실행해 보기</h2>
          </div>
          <div class="topbar-actions">
            <label class="language-switch" for="localeSelect">
              <span>언어</span>
              <select id="localeSelect">
                <option value="ko">한국어</option>
                <option value="en">English</option>
              </select>
            </label>
            <label class="language-switch" for="themeSelect">
              <span>테마</span>
              <select id="themeSelect">
                <option value="light">Light</option>
                <option value="dark">Dark</option>
              </select>
            </label>
            <span class="run-mode-pill" id="runModePill">Cloud Runtime</span>
            <a class="ghost-button" href="community.html">예제 가져오기</a>
          </div>
        </header>

        <section class="page-intro">
          <div>
            <p class="eyebrow">Editor Workspace</p>
            <h3>언어 선택, 저장, 실행, 미리보기를 한 화면에서</h3>
          </div>
          <p>에디터 페이지에는 실제 작업에 필요한 기능만 남겨 집중도를 높였습니다.</p>
        </section>

        <section class="workspace editor-page-layout">
          <div class="window-frame">
            <div class="window-bar">
              <div class="window-dots"><span></span><span></span><span></span></div>
              <div class="window-actions">
                <div class="window-menu">
                  <button class="window-action" id="fileMenuButton" type="button">파일</button>
                  <div class="window-dropdown is-hidden" id="fileMenuDropdown">
                    <button class="window-dropdown-item" id="menuSaveButton" type="button">저장</button>
                    <button class="window-dropdown-item" id="menuSaveAsButton" type="button">다른 이름으로 저장</button>
                    <button class="window-dropdown-item danger" id="menuDeleteProjectButton" type="button">프로젝트 삭제</button>
                  </div>
                </div>
                <div class="window-menu">
                  <button class="window-action" id="editMenuButton" type="button">편집</button>
                  <div class="window-dropdown is-hidden" id="editMenuDropdown">
                    <button class="window-dropdown-item" id="menuFindButton" type="button">찾기</button>
                    <button class="window-dropdown-item" id="menuUndoButton" type="button">되돌리기</button>
                    <button class="window-dropdown-item" id="menuRedoButton" type="button">다시 실행(Redo)</button>
                    <button class="window-dropdown-item" id="menuRunAgainButton" type="button">코드 다시 실행</button>
                    <button class="window-dropdown-item" id="menuRunAgainInteractiveButton" type="button">대화형 다시 실행</button>
                  </div>
                </div>
                <div class="window-menu">
                  <button class="window-action" id="helpMenuButton" type="button">도움말</button>
                  <div class="window-dropdown is-hidden" id="helpMenuDropdown">
                    <div class="window-help-block">
                      <strong>빠른 단축키</strong>
                      <p>Ctrl+Enter: 대화형 실행</p>
                      <p>Shift+Enter: 표준 실행</p>
                      <p>stdin 박스 Enter: 대화형 입력 전송</p>
                    </div>
                    <div class="window-help-block">
                      <strong>메뉴 설명</strong>
                      <p>파일: 저장/다른 이름 저장/삭제</p>
                      <p>편집: 찾기/Undo/Redo/재실행</p>
                      <p>도움말: 입력 모드와 실행 모드 안내</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="editor-toolbar">
              <label class="project-name-field">
                프로젝트
                <input id="projectName" type="text" value="my-first-project" maxlength="40" />
              </label>
              <label>
                언어
                <select id="languageSelect"></select>
              </label>
              <label>
                테마
                <select>
                  <option>Classic Note</option>
                  <option>Ocean Lab</option>
                  <option>Paper Dark</option>
                </select>
              </label>
              <button class="ghost-button small" id="newProjectButton" type="button">새 초안</button>
              <button class="primary-button small" id="runButton" type="button">실행</button>
              <button class="primary-button small" id="interactiveRunButton" type="button" title="Ctrl+Enter">🔄 대화형</button>
              <button class="ghost-button small" id="saveButton" type="button">저장</button>
              <button class="ghost-button small" id="downloadButton" type="button">내보내기</button>
              <button class="ghost-button small" id="copyAllCodeButton" type="button">코드 전체 복사</button>
              <button class="ghost-button small" id="fixAiCodeButton" type="button">AI 코드 정리</button>
              <label class="ghost-button small file-trigger" for="importFileInput">가져오기</label>
              <input id="importFileInput" type="file" accept=".txt,.js,.py,.cpp,.html,.json" hidden />
            </div>

            <div class="editor-layout">
              <div class="line-numbers" id="lineNumbers"></div>
              <textarea id="codeEditor" spellcheck="false"></textarea>
            </div>
          </div>

          <div class="output-panel">
            <div class="output-header">
              <h3>실행 결과</h3>
              <div class="status-container">
                <div class="status-indicator" id="statusIndicator">
                  <div class="status-dot ready"></div>
                  <span id="statusMessage">준비됨</span>
                </div>
                <div class="status-progress" id="statusProgress">
                  <div class="progress-bar">
                    <div class="progress-fill" id="progressFill"></div>
                  </div>
                  <span class="progress-text" id="progressText">준비됨</span>
                </div>
              </div>
              <span id="statusBadge" style="display:none;">준비됨</span>
            </div>
            <div class="meta-strip">
              <div>
                <strong>최근 저장</strong>
                <span id="saveMeta">아직 저장된 프로젝트가 없습니다.</span>
              </div>
              <div>
                <strong>저장된 프로젝트</strong>
                <span id="projectCount">0개</span>
              </div>
            </div>
            <div class="project-library">
              <div class="section-label">내 프로젝트</div>
              <ul class="project-list" id="projectList"></ul>
            </div>
            <div class="runtime-config-panel">
              <div class="runtime-config-head">
                <div class="section-label">런타임 설정</div>
                <button class="ghost-button small" id="toggleRuntimeConfigButton" type="button">설정 열기</button>
              </div>
              <div class="runtime-config-body is-hidden" id="runtimeConfigBody">
                <label>
                  Endpoint
                  <input id="runtimeEndpointInput" type="text" placeholder="https://your-runtime/api/v2/piston/execute" />
                </label>
                <label>
                  Headers(JSON)
                  <textarea id="runtimeHeadersInput" rows="4" spellcheck="false" placeholder='{"Authorization":"Bearer token"}'></textarea>
                </label>
                <div class="runtime-config-actions">
                  <button class="primary-button small" id="saveRuntimeConfigButton" type="button">저장</button>
                  <button class="ghost-button small" id="resetRuntimeConfigButton" type="button">기본값</button>
                </div>
                <p class="runtime-config-status" id="runtimeConfigStatus">기본 로컬 런타임(localhost)을 사용 중입니다.</p>
              </div>
            </div>
            <div class="runtime-config-panel">
              <div class="runtime-config-head">
                <div class="section-label">표준 입력(stdin)</div>
              </div>
              <div class="runtime-config-body" id="stdinConfigBody">
                <label>
                  프로그램 입력값
                  <textarea id="stdinInput" rows="4" spellcheck="false" placeholder="예: 10\nhello\n(줄바꿈으로 여러 입력 전달)"></textarea>
                </label>
                <p class="runtime-config-status">Python input(), C scanf, Java Scanner 등 입력 대기를 지원합니다.</p>
              </div>
            </div>
            <pre id="outputConsole"></pre>
            <div class="terminal-panel">
              <div class="section-label">터미널</div>
              <pre id="terminalConsole">vpr-terminal ready
type: help</pre>
              <div class="terminal-quick-actions">
                <button class="ghost-button small" id="terminalStatusButton" type="button">status</button>
                <button class="ghost-button small" id="terminalRuntimesButton" type="button">runtimes</button>
                <button class="ghost-button small" id="terminalRunCodeButton" type="button">run</button>
                <button class="ghost-button small" id="terminalAiPingButton" type="button">ai ping</button>
              </div>
              <div class="terminal-input-row">
                <input id="terminalInput" type="text" placeholder="예: pip install requests / ls / runtimes / clear" />
                <button class="primary-button small" id="terminalRunButton" type="button">실행</button>
                <button class="ghost-button small" id="terminalClearButton" type="button">지우기</button>
              </div>
            </div>
            <div class="preview-panel">
              <div class="section-label">미리보기</div>
              <iframe id="previewFrame" title="VPR Preview" sandbox="allow-scripts"></iframe>
            </div>
            <div class="preview-panel">
              <div class="section-label">GUI 코드 힌트</div>
              <div id="guiHintPanel" class="gui-hint-panel">
                Python GUI 라이브러리(pygame/tkinter/pyqt 등)는 브라우저에서 네이티브 창으로 바로 열 수 없습니다.
                대신 웹 렌더링 가능한 코드(HTML/Canvas) 또는 pygbag/pyscript 경로를 안내합니다.
              </div>
            </div>
            <div class="preview-panel">
              <div class="section-label">회로도</div>
              <div id="circuitEditor" class="circuit-editor is-disabled">
                <div class="circuit-toolbar">
                  <select id="circuitComponentType">
                    <optgroup label="MCU / Controller">
                      <optgroup label="Arduino">
                        <option value="arduino-uno">Arduino UNO</option>
                        <option value="arduino-nano">Arduino Nano</option>
                        <option value="arduino-mega">Arduino Mega 2560</option>
                        <option value="arduino-leonardo">Arduino Leonardo</option>
                        <option value="arduino-due">Arduino Due</option>
                      </optgroup>
                      <optgroup label="ESP8266">
                        <option value="esp8266-01">ESP8266-01</option>
                        <option value="esp8266-12">ESP8266-12E</option>
                      </optgroup>
                      <optgroup label="ESP32">
                        <option value="esp32">ESP32 DevKit</option>
                        <option value="esp32-s2">ESP32-S2</option>
                        <option value="esp32-s3">ESP32-S3</option>
                        <option value="esp32-c2">ESP32-C2</option>
                        <option value="esp32-c3">ESP32-C3</option>
                        <option value="esp32-c6">ESP32-C6</option>
                        <option value="esp32-h2">ESP32-H2</option>
                        <option value="esp32-p4">ESP32-P4</option>
                      </optgroup>
                    </optgroup>
                    <optgroup label="LED - Input/Output">
                      <option value="led-red">🔴 Red LED</option>
                      <option value="led-green">🟢 Green LED</option>
                      <option value="led-blue">🔵 Blue LED</option>
                      <option value="led-yellow">🟡 Yellow LED</option>
                      <option value="led-rgb">🌈 RGB LED</option>
                    </optgroup>
                    <optgroup label="Display">
                      <option value="oled-096">0.96" OLED (I2C)</option>
                      <option value="oled-128">1.3" OLED (SPI)</option>
                      <option value="tft-144">1.44" TFT (SPI)</option>
                      <option value="tft-18">1.8" TFT (SPI)</option>
                      <option value="tft-24">2.4" TFT (SPI)</option>
                      <option value="tft-35">3.5" TFT (SPI)</option>
                      <option value="tft-7">7" TFT (HDMI)</option>
                      <option value="lcd-16x2">16x2 LCD (I2C)</option>
                    </optgroup>
                    <optgroup label="Sensor / Module">
                      <option value="button">Push Button</option>
                      <option value="buzzer">Buzzer</option>
                      <option value="pir-sensor">PIR Motion Sensor</option>
                      <option value="temp-sensor">Temperature Sensor</option>
                      <option value="ldr-sensor">Light Sensor (LDR)</option>
                      <option value="relay">5V Relay Module</option>
                      <option value="gsm">GSM Module (SIM800L)</option>
                      <option value="wifi">WiFi Module</option>
                      <option value="bluetooth">Bluetooth Module</option>
                      <option value="gps">GPS Module (NEO-6M)</option>
                      <option value="lorawan">LoRaWAN Module</option>
                    </optgroup>
                    <optgroup label="Motor / Mechanical">
                      <option value="motor-dc-3v">DC Motor 3V</option>
                      <option value="motor-dc-5v">DC Motor 5V</option>
                      <option value="servo-9g">Servo Motor 9g</option>
                      <option value="servo-metal">Servo Metal Gear</option>
                      <option value="stepper">Stepper Motor (28BYJ-48)</option>
                    </optgroup>
                    <optgroup label="Passive Components">
                      <option value="resistor">Resistor</option>
                      <option value="capacitor">Capacitor</option>
                      <option value="inductor">Inductor</option>
                    </optgroup>
                    <optgroup label="Other">
                      <option value="breadboard">Breadboard</option>
                      <option value="wire">Wire/Jumper</option>
                    </optgroup>
                  </select>
                  <button class="ghost-button small" id="addComponentButton" type="button">부품 추가</button>
                  <button class="ghost-button small" id="connectComponentButton" type="button">와이어 모드</button>
                  <button class="ghost-button small" id="removeWireButton" type="button">와이어 삭제</button>
                  <button class="ghost-button small" id="resetCircuitButton" type="button">초기 배치</button>
                </div>
                <div class="circuit-workspace-scroll" id="circuitWorkspaceScroll">
                  <div class="circuit-workspace" id="circuitWorkspace">
                    <svg id="circuitWireLayer" class="circuit-wire-layer"></svg>
                    <div id="circuitNodeLayer" class="circuit-node-layer"></div>
                    <div id="circuitDisabledOverlay" class="circuit-disabled-overlay">Arduino/ESP-IDF를 선택하면 회로 편집기가 활성화됩니다.</div>
                  </div>
                </div>
                <div class="circuit-form">
                  <label>
                    코드 배포 MCU
                    <select id="circuitTargetMcu" style="width: 100%; padding: 9px 10px;">
                      <option value="">MCU 선택 (자동 감지)</option>
                    </select>
                  </label>
                  <label>
                    이름
                    <input id="circuitNameInput" type="text" maxlength="24" placeholder="component name" />
                  </label>
                  <label>
                    핀/설명
                    <input id="circuitPinInput" type="text" maxlength="24" placeholder="D13 / GPIO2" />
                  </label>
                  <label>
                    X
                    <input id="circuitXInput" type="number" min="0" max="5000" />
                  </label>
                  <label>
                    Y
                    <input id="circuitYInput" type="number" min="0" max="2000" />
                  </label>
                  <button class="primary-button small" id="applyCircuitNodeButton" type="button">수정 적용</button>
                  <button class="ghost-button small" id="deleteCircuitNodeButton" type="button">선택 삭제</button>
                </div>
                <p id="circuitStatus" class="circuit-status">회로도를 수정하려면 부품을 선택하세요.</p>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>

    <script src="app.js"></script>
  </body>
</html>