blocks-ide/cpp.html at main · xtremezero/blocks-ide · 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
<!DOCTYPE html>
<html lang="en" class="h-full bg-slate-50 text-slate-800">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Block-CPP | Visual C++ Block IDE</title>
  <meta name="description" content="Visual C++ block-based IDE with real-time C++ code generation and interactive browser execution console.">

  <!-- Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          fontFamily: {
            sans: ['Inter', 'sans-serif'],
            mono: ['JetBrains Mono', 'monospace'],
          }
        }
      }
    }
  </script>

  <!-- Google Fonts: Inter & JetBrains Mono -->
  <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=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">

  <!-- Blockly Libraries -->
  <script src="https://unpkg.com/blockly/blockly_compressed.js"></script>
  <script src="https://unpkg.com/blockly/blocks_compressed.js"></script>
  <script src="https://unpkg.com/blockly/javascript_compressed.js"></script>
  <script src="https://unpkg.com/blockly/msg/en.js"></script>

  <!-- Highlight.js Syntax Highlighting -->
  <link id="hljsTheme" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/cpp.min.js"></script>

  <!-- Custom Editor CSS -->
  <link rel="stylesheet" href="css/editor.css">
</head>
<body class="h-full flex flex-col overflow-hidden select-none bg-slate-50 dark:bg-slate-900 text-slate-800 dark:text-slate-100 transition-colors">
  <!-- Dynamic Header Component -->
  <header id="appHeader"></header>

  <!-- Main Workspace & Code Generator View -->
  <main class="flex-1 flex overflow-hidden relative">
    <!-- Left Pane: Blockly Interactive Editor Canvas -->
    <div id="blocklyArea" class="flex-1 h-full relative">
      <div id="blocklyDiv" class="absolute inset-0"></div>
    </div>

    <!-- Draggable Splitter Bar -->
    <div id="dragDivider" class="w-2 bg-slate-200 dark:bg-slate-800 hover:bg-cyan-500 dark:hover:bg-cyan-600 transition-colors cursor-col-resize shrink-0 z-10 flex items-center justify-center group" title="Drag to resize panels">
      <div class="w-0.5 h-8 bg-slate-400 dark:bg-slate-600 group-hover:bg-white rounded-full"></div>
    </div>

    <!-- Right Pane: Real-time Generated C++ Source Code & Interactive Terminal -->
    <div id="codePane" class="w-[460px] lg:w-[520px] h-full bg-slate-50 dark:bg-slate-900 flex flex-col border-l border-slate-200 dark:border-slate-800 shrink-0">
      <!-- Code Bar Header -->
      <div class="h-10 bg-slate-100 dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 px-3 flex items-center justify-between text-xs text-slate-600 dark:text-slate-300 font-mono shrink-0">
        <div class="flex items-center space-x-2">
          <span class="w-2.5 h-2.5 rounded-full bg-cyan-500 animate-pulse"></span>
          <span class="text-slate-800 dark:text-slate-200 font-medium">main.cpp</span>
          <span class="text-[10px] bg-slate-200 dark:bg-slate-700 text-slate-600 dark:text-slate-300 px-1.5 py-0.5 rounded uppercase tracking-wider">Generated</span>
        </div>

        <div class="flex items-center space-x-1.5">
          <button onclick="runCode()" id="runBtn" class="px-2.5 py-1 bg-cyan-600 hover:bg-cyan-700 text-white rounded border border-cyan-500 transition flex items-center gap-1 shadow-sm text-xs font-sans font-medium" title="Run Code in Live Browser Terminal">
            <svg class="w-3.5 h-3.5 fill-current" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
            <span>Run Code</span>
          </button>

          <button onclick="copyCode()" id="copyBtn" class="hover:text-slate-900 dark:hover:text-white px-2 py-1 bg-white dark:bg-slate-700 text-slate-700 dark:text-slate-200 rounded border border-slate-300 dark:border-slate-600 transition flex items-center gap-1 shadow-sm text-xs font-sans">
            <svg id="copyIcon" class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 002 2h2a2 2 0 002 2m0 0h2a2 2 0 002 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path></svg>
            <span id="copyText">Copy</span>
          </button>
        </div>
      </div>

      <!-- Code Output Area -->
      <div class="flex-1 overflow-auto p-4 bg-white dark:bg-slate-950 text-slate-800 dark:text-slate-100">
        <pre><code id="codeOutput" class="language-cpp text-xs leading-relaxed font-mono">/* Generated C++ Code will appear here */</code></pre>
      </div>

      <!-- Bottom Interactive Terminal Console -->
      <div id="terminalContainer" class="border-t border-slate-200 dark:border-slate-800 bg-slate-900 text-slate-100 flex flex-col h-48 transition-all duration-200 shrink-0">
        <!-- Terminal Header Bar -->
        <div class="h-8 bg-slate-950 px-3 flex items-center justify-between text-xs font-mono border-b border-slate-800">
          <div class="flex items-center space-x-2">
            <span class="w-2 h-2 rounded-full bg-cyan-400"></span>
            <span class="text-slate-300 font-semibold">Terminal / Console Output</span>
          </div>
          <div class="flex items-center space-x-2">
            <button onclick="clearTerminal()" class="hover:text-amber-400 text-slate-400 text-[11px] transition" title="Clear console output">Clear</button>
            <button onclick="toggleTerminal()" id="toggleTerminalBtn" class="hover:text-white text-slate-400 text-[11px] transition" title="Minimize/Maximize console">Hide</button>
          </div>
        </div>
        <!-- Terminal Body -->
        <div id="terminalOutput" class="flex-1 p-3 font-mono text-xs overflow-auto bg-slate-950 text-cyan-400 leading-relaxed whitespace-pre-wrap select-text">
Visual C++ Workspace ready. Click "Run Code" to execute.
        </div>
      </div>
    </div>
  </main>

  <!-- Blockly Toolbox Specification XML for C++ -->
  <xml id="toolbox" style="display: none">
    <category name="Program Structure" colour="#06B6D4">
      <block type="cpp_main"></block>
      <block type="cpp_include_std"></block>
      <block type="cpp_include"></block>
      <block type="cpp_cout"></block>
      <block type="cpp_cin"></block>
      <block type="cpp_namespace"></block>
    </category>

    <category name="Variables & Data" colour="#10B981">
      <block type="cpp_declare"></block>
      <block type="cpp_number"></block>
      <block type="cpp_string"></block>
      <block type="cpp_bool"></block>
      <block type="std_cpp_const_nullptr"></block>
      <block type="std_cpp_const_std__endl"></block>
      <block type="std_cpp_const_m_pi"></block>
    </category>

    <category name="Classes & OOP" colour="#10B981">
      <block type="cpp_class"></block>
      <block type="cpp_constructor"></block>
      <block type="cpp_class_instantiate"></block>
      <block type="cpp_method_call"></block>
      <block type="cpp_member_access"></block>
    </category>

    <category name="Vectors & Maps" colour="#06B6D4">
      <block type="cpp_vector_create"></block>
      <block type="cpp_vector_push_pop"></block>
      <block type="cpp_vector_get_set"></block>
      <block type="cpp_vector_size"></block>
      <block type="cpp_map_create"></block>
    </category>

    <category name="Functions & Lambdas" colour="#8B5CF6">
      <block type="cpp_function_def"></block>
      <block type="cpp_function_call_stmt"></block>
      <block type="cpp_function_call_expr"></block>
      <block type="cpp_lambda"></block>
      <block type="cpp_return"></block>
    </category>

    <category name="Control Flow" colour="#F59E0B">
      <block type="cpp_if"></block>
      <block type="cpp_try_catch"></block>
    </category>

    <category name="Loops" colour="#EC4899">
      <block type="cpp_for"></block>
      <block type="cpp_range_for"></block>
      <block type="cpp_while"></block>
      <block type="cpp_break"></block>
    </category>

    <category name="Operators & Math" colour="#8B5CF6">
      <block type="cpp_math"></block>
      <block type="cpp_compare"></block>
    </category>

    <category name="Procedures" colour="#8B5CF6" custom="PROCEDURE"></category>
    <category name="Variables (Dynamic)" colour="#10B981" custom="VARIABLE"></category>
  </xml>

  <!-- Core IDE Utilities and CPP Generator -->
  <script src="js/core/ide-core.js"></script>
  <script src="js/generators/cpp-generator.js"></script>
  <script>
    window.addEventListener('DOMContentLoaded', () => {
      initIDE(cppLangConfig);
    });
  </script>
</body>
</html>