zero-code-apps/test-preview.html at main · kirti/zero-code-apps · 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
<!DOCTYPE html>
<html>
<head>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
body { background:#070a0f; color:#e6edf3; font-family:sans-serif; }
.layout { display:grid; grid-template-columns:200px 1fr; height:100vh; }
.left { background:#0d1117; padding:20px; border-right:1px solid #21262d; }
.right { display:flex; flex-direction:column; }
.preview-wrap { flex:1; position:relative; min-height:0; }
iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none; }
.empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#8b949e; }
button { background:#00d4aa; color:#000; border:none; padding:8px 16px; border-radius:6px; cursor:pointer; margin-top:10px; display:block; width:100%; }
</style>
</head>
<body>
<div class="layout">
  <div class="left">
    <div id="status" style="font-size:12px;color:#8b949e;margin-bottom:16px;">Click a button</div>
    <button onclick="loadDemo('../demos/crypto-trading/')">Preview Crypto</button>
    <button onclick="loadDemo('../demos/nexvault/')">Preview NexVault</button>
    <button onclick="loadDemo('../demos/banking/')">Preview Banking</button>
    <button onclick="window.open('../demos/crypto-trading/','_blank')">Open in new tab</button>
  </div>
  <div class="right">
    <div class="preview-wrap" id="wrap">
      <div class="empty" id="empty">Click a preview button</div>
      <iframe id="frame" src=""></iframe>
    </div>
  </div>
</div>
<script>
function loadDemo(url) {
  document.getElementById('status').textContent = 'Loading: ' + url;
  document.getElementById('empty').style.display = 'none';
  const frame = document.getElementById('frame');
  frame.onload = () => document.getElementById('status').textContent = 'Loaded! ✓';
  frame.onerror = () => document.getElementById('status').textContent = 'Error loading';
  frame.src = url;
}
</script>
</body>
</html>