fused-render-lite/dev-iframe.html at main · fusedio/fused-render-lite · 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
<!DOCTYPE html>
<html data-fused-theme="shell">
<head>
<meta charset="utf-8" />
<meta name="fused-app" />
<meta name="fused-api-version" content="1" />
  <title>render-app dev (iframe)</title>
  <style>
    html, body { margin: 0; height: 100%; }
    body { position: relative; background: var(--fused-bg, #111); }
    iframe { border: 0; width: 100%; height: 100%; display: block; }

    #reload, #github {
      position: fixed;
      right: 14px;
      top: 14px;
      width: 36px;
      height: 36px;
      padding: 0;
      display: grid;
      place-items: center;
      border-radius: 50%;
      border: 1px solid var(--fused-border, rgba(255,255,255,.14));
      background: var(--fused-surface, rgba(28,28,30,.72));
      color: var(--fused-fg, #e6e6e6);
      backdrop-filter: blur(10px) saturate(140%);
      -webkit-backdrop-filter: blur(10px) saturate(140%);
      box-shadow: 0 2px 10px rgba(0,0,0,.28);
      cursor: pointer;
      opacity: .55;
      transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
    }
    #github { right: 58px; text-decoration: none; }
    #reload:hover, #reload:focus-visible,
    #github:hover, #github:focus-visible {
      opacity: 1;
      transform: translateY(-1px);
      box-shadow: 0 4px 16px rgba(0,0,0,.36);
      outline: none;
    }
    #reload:active, #github:active { transform: scale(.94); }
    #reload svg, #github svg { width: 16px; height: 16px; display: block; }
    #reload.spinning svg { animation: spin .6s ease-in-out; }
    @keyframes spin { to { transform: rotate(360deg); } }
  </style>
</head>
<body>
  <iframe id="dev" src="http://127.0.0.1:2770/" title="fused-render-app dev server"></iframe>
  <button id="reload" type="button" title="Reload (R)" aria-label="Reload dev server view">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <path d="M21 12a9 9 0 1 1-3.1-6.8" />
      <polyline points="21 3 21 9 15 9" />
    </svg>
  </button>
  <script>
    const frame = document.getElementById('dev');
    const btn = document.getElementById('reload');
    function reload() {
      btn.classList.remove('spinning');
      void btn.offsetWidth;
      btn.classList.add('spinning');
      frame.src = frame.src;
    }
    btn.addEventListener('click', reload);
    btn.addEventListener('animationend', () => btn.classList.remove('spinning'));
    window.addEventListener('keydown', (e) => {
      if (e.key.toLowerCase() === 'r' && !e.metaKey && !e.ctrlKey && !e.altKey) reload();
    });
  </script>
</body>
</html>