https://ecasm.onrender.com/compiler

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8" />
5  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6  <title>eCASM™ Compiler</title>
7  <style>
8    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
9
10    body {
11      margin: 0;
12      font-family: 'Inter', sans-serif;
13      background: radial-gradient(circle at top left, #1e0b3b, #0a0b22);
14      color: #e6e6e6;
15    }
16
17    .header {
18      display: flex; justify-content: space-between; align-items: center;
19      padding: 20px 40px;
20      background: rgba(255,255,255,0.03);
21      border-bottom: 1px solid rgba(255,255,255,0.08);
22    }
23
24    .app-title {
25      font-weight: 700;
26      font-size: 1.1rem;
27      color: #e6e6ff;
28      user-select: none;
29    }
30
31    .login-btn, .buy-btn {
32      background: linear-gradient(90deg, #6d50ff, #8b64ff);
33      color: #fff; padding: 10px 20px; border-radius: 8px;
34      text-decoration: none; font-weight: 600; border: none;
35      transition: all 0.2s ease; cursor: pointer;
36    }
37    .login-btn:hover, .buy-btn:hover {
38      background: linear-gradient(90deg, #8b64ff, #a378ff);
39      transform: translateY(-1px);
40    }
41
42    .container {
43      display: flex; gap: 40px; padding: 40px;
44      justify-content: center; align-items: flex-start;
45      background: #0a0b22;
46      border-radius: 20px; margin: 40px auto; width: fit-content;
47      box-shadow: 0 0 40px rgba(0,0,0,0.4);
48    }
49
50    .left, .right {
51      background: rgba(255,255,255,0.03);
52      padding: 30px; border-radius: 16px;
53      box-shadow: 0 0 25px rgba(0,0,0,0.3);
54    }
55
56    .left  { flex: 0 0 640px; }
57    .right { flex: 0 0 360px; }
58
59    textarea {
60      width: 100%; height: 200px; background: #0e0e12;
61      color: #00e6ff;
62      border: 1px solid #333; border-radius: 8px;
63      padding: 10px; font-family: monospace;
64      resize: vertical;
65    }
66
67    button {
68      cursor: pointer;
69      background: linear-gradient(90deg, #693cff, #825eff);
70      border: none; color: white; font-weight: 600;
71      padding: 10px 18px; border-radius: 8px;
72      margin: 6px 4px 6px 0;
73      transition: all 0.2s ease;
74    }
75    button:hover {
76      background: linear-gradient(90deg, #825eff, #9d73ff);
77    }
78
79    .output {
80      background: #0e0e12; color: #aaffcc;
81      border-radius: 8px; padding: 12px;
82      min-height: 120px; font-family: monospace;
83      margin-top: 10px; border: 1px solid #333;
84      white-space: pre-wrap;
85    }
86
87    .legend, .syntax {
88      background: rgba(255,255,255,0.05);
89      padding: 15px; border-radius: 10px; margin-bottom: 20px;
90    }
91
92    table { width: 100%; border-collapse: collapse; }
93    td    { padding: 4px 0; vertical-align: top; }
94
95    .footer {
96      text-align: center; color: #b9b9b9;
97      padding: 20px; margin-top: 60px;
98      border-top: 1px solid rgba(255,255,255,0.1);
99      font-size: 0.9rem;
100    }
101
102    #toast {
103      position: fixed; bottom: 25px; right: 25px;
104      background: rgba(0,0,0,0.8); color: #00ffcc;
105      padding: 10px 16px; border-radius: 8px;
106      box-shadow: 0 0 10px rgba(0,255,200,0.6);
107      opacity: 0; transition: opacity 0.35s ease;
108      z-index: 9999; font-weight: 600;
109    }
110
111    /* License modal */
112    .modal-backdrop {
113      position: fixed; inset: 0; background: rgba(0,0,0,0.6);
114      display: none; align-items: center; justify-content: center;
115      z-index: 10000;
116    }
117    .modal-visible { display: flex; }
118
119    .modal {
120      width: 360px; background: #121225;
121      border-radius: 12px; padding: 18px;
122      border: 1px solid rgba(255,255,255,0.12);
123      box-shadow: 0 10px 30px rgba(0,0,0,0.5);
124    }
125    .modal h2 { color: #fff; margin: 0 0 10px; }
126    .modal input {
127      width: 100%; background: #0e0e12;
128      color: #e6e6e6; border: 1px solid #333;
129      border-radius: 8px; padding: 10px;
130    }
131    .modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
132    .error-text { color: #ff9aa2; min-height: 1.2em; }
133  </style>
134</head>
135
136<body>
137
138  <div class="header">
139    <div style="display:flex; gap:14px; align-items:center;">
140      <span class="app-title">
141        eCASM<span style="font-size:0.8em;">™</span> Compiler
142      </span>
143
144    <a class="login-btn" href="/">

145  🏠 Home
146</a>
147
148<a class="login-btn" href="/static/documentation.html" target="_blank">
149  📘 Documentation
150</a>
151
152      <button class="login-btn" id="registerLicenseBtn">
153        Register License
154      </button>
155    </div>
156
157    <div class="header-actions">
158      <a class="buy-btn"
159         target="_blank"
160         href="https://checkout.square.site/merchant/MLPC93S9AC77C/checkout/IHMELERAJHDEQFN5FJMQD5RQ">
161         Buy eCASM
162      </a>
163    </div>
164  </div>
165
166  <div class="container">
167    <div class="left">
168      <h3>Enter CASM / Quantum Code</h3>
169      <p style="color:#bdbddb;font-size:0.95rem;margin-bottom:6px;">
170        💡 Paste your CASM or quantum code below, or upload a file.
171      </p>
172
173      <textarea id="codeInput">X Q0
174H Q1
175CX Q0 Q1
176MEASURE Q1 -> C0</textarea>
177
178      <div style="margin-top: 12px;">
179        <button onclick="compileCode()">⚙️ Compile</button>
180        <button onclick="loadDemo()">Load Demo</button>
181        <button onclick="uploadCode()">Upload Code</button>
182        <button onclick="clearCode()">Clear</button>
183        <input id="fileInput" type="file" accept=".txt,.ecasm" style="display:none" />
184      </div>
185
186      <h3>Compiled Output</h3>
187      <div id="output" class="output">Output will appear here...</div>
188
189      <button onclick="copyOutput()">Copy Output</button>
190      <button onclick="downloadOutput()">Download .ecasm</button>
191
192      <h3>Emitter Simulation</h3>
193      <button onclick="emitCode()">🚀 Emit</button>
194
195      <div id="emitterConsole" class="output" style="color:#b6ffb3;">
196        Emitter output will appear here...
197      </div>
198    </div>
199
200    <div class="right">
201
202      <!-- Quantum Opcode Legend -->
203      <div class="legend">
204        <h3>⚛️ Quantum Opcode Legend</h3>
205        <table>
206          <tr><td>X →</td><td>Pauli-X (bit flip)</td></tr>
207          <tr><td>H →</td><td>Hadamard (superposition)</td></tr>
208          <tr><td>CX →</td><td>CNOT (control Q0 → target Q1)</td></tr>
209          <tr><td>MEASURE →</td><td>Collapse to classical bit</td></tr>
210        </table>
211      </div>
212
213      <!-- CASM Syntax -->
214      <div class="syntax">
215        <h3>🧭 CASM Syntax — Supported Now</h3>
216
217        <table>
218          <tr>
219            <td><strong>Classical</strong></td>
220            <td><strong>Quantum</strong></td>
221          </tr>
222
223          <tr>
224            <td>MOV R1, 5</td>
225            <td>X Q0</td>
226          </tr>
227
228          <tr>
229            <td>MOV R2, 10</td>
230            <td>H Q1</td>
231          </tr>
232
233          <tr>
234            <td>ADD R3, R1, R2</td>
235            <td>CX Q0 Q1</td>
236          </tr>
237
238          <tr>
239            <td>LABEL 10</td>
240            <td>MEASURE Q1 → C0</td>
241          </tr>
242
243        </table>
244      </div>
245
246    </div>
247  </div>
248
249  <!-- eCASM Foundations -->
250<div class="info-card"
251     style="max-width:520px;margin:0 auto 40px;background:rgba(255,255,255,0.04);
252            padding:24px;border-radius:16px;box-shadow:0 0 25px rgba(0,0,0,0.35);">
253
254  <h3 style="margin-top:0;color:#d2c8ff;">📘 eCASM Foundations</h3>
255
256  <p style="line-height:1.6;font-size:0.95rem;margin-bottom:10px;">
257    eCASM is a reduced instruction set framework for compiling symbolic programs into deterministic,
258    executable representations (classical + quantum).
259  </p>
260
261  <p style="line-height:1.6;font-size:0.95rem;margin:0;">
262    <a href="https://aadsystems.com"
263       target="_blank"
264       style="font-size:1.02rem; font-weight:700; color:#a78bff; text-decoration:underline;">
265      ➜ View eCASM on AAD Systems™
266    </a>
267  </p>
268</div>
269
270  <div class="footer">
271    © 2025 AAD Systems™ · All Rights Reserved<br>
272    Support is limited to billing and license access.
273  </div>
274
275  <div id="toast"></div>
276
277  <!-- License Modal -->
278  <div id="licenseBackdrop" class="modal-backdrop" onclick="closeLicenseModal(event)">
279    <div class="modal" onclick="event.stopPropagation()">
280      <h2>Register License</h2>
281      <div id="licenseError" class="error-text"></div>
282      <label>License Key</label>
283      <input id="licenseKeyInput" type="text" placeholder="Paste your license key" />
284      <div class="modal-actions">
285        <button onclick="closeLicenseModal()">Cancel</button>
286        <button id="activateLicenseBtn">Activate</button>
287      </div>
288    </div>
289  </div>
290

291<script>
292async function compileCode() {
293  const code = document.getElementById('codeInput').value.trim();
294  const outputBox = document.getElementById('output');
295
296  if (!code) {
297    outputBox.innerText = "⚠️ No code provided.";
298    return;
299  }
300
301  try {
302    const res = await fetch('/compile', {
303      method: 'POST',
304      headers: { 'Content-Type': 'application/json' },
305      body: JSON.stringify({ code })
306    });
307
308    const data = await res.json();
309
310    if (!data.ok) {
311      outputBox.style.color = "#ff9aa2";
312      outputBox.innerText =
313        "❌ Compiler Errors:\n" + (data.errors || []).join("\n");
314      return;
315    }
316
317    outputBox.style.color = "#aaffcc";
318    outputBox.innerText =
319      data.output || data.compiled_output || "No output.";
320
321  } catch (err) {
322    outputBox.style.color = "#ff9aa2";
323    outputBox.innerText = "❌ Compiler error: network/server failure.";
324  }
325}
326
327function loadDemo() {
328  document.getElementById('codeInput').value =
329`X Q0
330H Q1
331CX Q0 Q1
332MEASURE Q1 -> C0`;
333  document.getElementById('output').innerText = 'Output will appear here...';
334}
335
336function uploadCode() {
337  const f = document.getElementById('fileInput');
338  f.click();
339  f.onchange = e => {
340    const file = e.target.files[0];
341    if (!file) return;
342    const r = new FileReader();
343    r.onload = v => {
344      document.getElementById('codeInput').value = v.target.result;
345      document.getElementById('output').innerText = 'Code loaded.';
346    };
347    r.readAsText(file);
348  };
349}
350
351function clearCode() {
352  document.getElementById('codeInput').value = '';
353  document.getElementById('output').innerText = 'Output will appear here...';
354  document.getElementById('emitterConsole').innerText = 'Emitter output will appear here...';
355}
356
357function copyOutput() {
358  navigator.clipboard.writeText(document.getElementById('output').innerText);
359  showToast('✅ Output copied to clipboard');
360}
361
362function downloadOutput() {
363  const c = document.getElementById('output').innerText;
364  const b = new Blob([c], { type: 'text/plain' });
365  const l = document.createElement('a');
366  l.href = URL.createObjectURL(b);
367  l.download = 'compiled.ecasm';
368  l.click();
369}
370
371function showToast(msg) {
372  const t = document.getElementById('toast');
373  t.textContent = msg;
374  t.style.opacity = '1';
375  setTimeout(() => (t.style.opacity = '0'), 1600);
376}
377
378async function emitCode() {
379  const code = document.getElementById('output').innerText.trim();
380  const consoleBox = document.getElementById('emitterConsole');
381
382  if (!code || code === 'Output will appear here...') {
383    return showToast('⚠️ No compiled code to emit.');
384  }
385
386  consoleBox.textContent = '🚀 Starting emission...\n';
387
388  try {
389    const res = await fetch('/emit', {
390      method: 'POST',
391      headers: { 'Content-Type': 'application/json' },
392      body: JSON.stringify({ code })
393    });
394
395    const data = await res.json();
396    consoleBox.textContent = data.emission || 'No emission data returned.';
397
398  } catch (err) {
399    consoleBox.textContent = 'Emitter error. Please try again.';
400  }
401}
402
403const licenseBtn = document.getElementById('registerLicenseBtn');
404const licenseBD  = document.getElementById('licenseBackdrop');
405const licenseErr = document.getElementById('licenseError');
406const licenseInput = document.getElementById('licenseKeyInput');
407
408function openLicenseModal() {
409  licenseErr.textContent = '';
410  licenseInput.value = '';
411  licenseBD.classList.add('modal-visible');
412  setTimeout(() => licenseInput && licenseInput.focus(), 0);
413}
414
415function closeLicenseModal(ev) {
416  if (ev && ev.target !== ev.currentTarget) return;
417  licenseBD.classList.remove('modal-visible');
418}
419
420async function activateLicense() {
421  const key = (licenseInput.value || '').trim();
422  if (!key) {
423    licenseErr.textContent = 'Please paste your license key.';
424    return;
425  }
426
427  try {
428    const res = await fetch('/register_license', {
429      method: 'POST',
430      headers: { 'Content-Type': 'application/json' },
431      body: JSON.stringify({ license_key: key })
432    });
433
434    const data = await res.json();
435
436    if (data.ok) {
437      showToast('🔓 License activated');
438      closeLicenseModal();
439    } else {
440      licenseErr.textContent = data.message || 'Invalid license key.';
441    }
442
443  } catch (err) {
444    licenseErr.textContent = 'Network error. Please try again.';
445  }
446}
447
448licenseBtn.addEventListener('click', openLicenseModal);
449document.getElementById('activateLicenseBtn').addEventListener('click', activateLicense);
450licenseInput.addEventListener('keydown', e => { if (e.key === 'Enter') activateLicense(); });
451
452</script>

452
453<!-- Default Statcounter code for ecasm
454https://ecasm.aadsystems.com/ -->

455<script type="text/javascript">
456var sc_project=13195481; 
457var sc_invisible=1; 
458var sc_security="0dd61680"; 
459</script>

459

460<script type="text/javascript"
461src="https://www.statcounter.com/counter/counter.js"
462async></script>

462
463<noscript><div class="statcounter"><a title="Web Analytics"
464href="https://statcounter.com/" target="_blank"><img
465class="statcounter"
466src="https://c.statcounter.com/13195481/0/0dd61680/1/"
467alt="Web Analytics"
468referrerPolicy="no-referrer-when-downgrade"></a></div></noscript>
469<!-- End of Statcounter Code -->
470</body>
471</html>