SubFrame/index.html at main · Codename-11/SubFrame · 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
<!DOCTYPE html>
<html class="dark">
<head>
  <meta charset="UTF-8">
  <title>SubFrame</title>
  <link rel="icon" type="image/svg+xml" href="assets/icon.svg">
  <link rel="stylesheet" href="dist/renderer.css" />
  <link rel="stylesheet" href="node_modules/xterm/css/xterm.css" />
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <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=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
  <!-- Loading screen styles — inlined so they render before external CSS loads -->
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background: #0f0f10;
    }
    #app-loading {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: #0f0f10;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    #app-loading.fade-out {
      opacity: 0;
      visibility: hidden;
    }
    .loading-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
    }
    .loading-logo-text {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 20px;
      font-weight: 600;
      color: #e8e6e3;
      letter-spacing: -0.3px;
    }
    .loading-bar {
      width: 120px;
      height: 3px;
      background: rgba(255, 255, 255, 0.06);
      border-radius: 2px;
      overflow: hidden;
    }
    .loading-bar-fill {
      height: 100%;
      width: 40%;
      background: linear-gradient(90deg, #b480ff, #ff6eb4);
      border-radius: 2px;
      animation: loading-slide 1.2s ease-in-out infinite;
    }
    @keyframes loading-slide {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(400%); }
    }
    .loading-stage-text {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 11px;
      color: #a8a29e;
      letter-spacing: 0.2px;
    }
  </style>
</head>
<body>
  <!-- Loading screen — pure CSS, renders before any JS executes
       Logo SVG duplicated here because index.html loads before bundling.
       Canonical source: src/shared/logoSVG.ts — keep in sync with getLogoSVG(). -->
  <div id="app-loading">
    <div class="loading-content">
      <svg width="140" height="140" viewBox="0 0 180 180">
        <defs>
          <filter id="lg-ge" x="-150%" y="-150%" width="400%" height="400%"><feGaussianBlur stdDeviation="5" result="b"/><feComposite in="SourceGraphic" in2="b" operator="over"/></filter>
          <filter id="lg-gn" x="-300%" y="-300%" width="700%" height="700%"><feGaussianBlur stdDeviation="10" result="b"/><feComposite in="SourceGraphic" in2="b" operator="over"/></filter>
          <filter id="lg-gf" x="-20%" y="-20%" width="140%" height="140%"><feGaussianBlur stdDeviation="2.5" result="b"/><feComposite in="SourceGraphic" in2="b" operator="over"/></filter>
          <radialGradient id="lg-ag"><stop offset="0%" stop-color="rgba(255,110,180,0.18)"/><stop offset="50%" stop-color="rgba(180,128,255,0.05)"/><stop offset="100%" stop-color="transparent"/></radialGradient>
          <linearGradient id="lg-fg" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#b480ff" stop-opacity="0.5"/><stop offset="50%" stop-color="#ff6eb4" stop-opacity="0.4"/><stop offset="100%" stop-color="#64d8ff" stop-opacity="0.5"/></linearGradient>
        </defs>
        <circle cx="90" cy="90" r="40" fill="url(#lg-ag)"><animate attributeName="r" values="36;48;36" dur="3s" repeatCount="indefinite" calcMode="spline" keySplines="0.42 0 0.58 1;0.42 0 0.58 1"/><animate attributeName="opacity" values="0.5;1;0.5" dur="3s" repeatCount="indefinite" calcMode="spline" keySplines="0.42 0 0.58 1;0.42 0 0.58 1"/></circle>
        <g transform="rotate(0,90,90)"><ellipse cx="90" cy="90" rx="58" ry="22" fill="none" stroke="rgba(180,128,255,0.3)" stroke-width="1.5"/><path id="lg-p1" d="M32,90A58,22 0 1,0 148,90A58,22 0 1,0 32,90" fill="none"/><circle r="3" fill="#b480ff" filter="url(#lg-ge)"><animateMotion dur="4s" begin="0s" repeatCount="indefinite"><mpath href="#lg-p1"/></animateMotion></circle></g>
        <g transform="rotate(60,90,90)"><ellipse cx="90" cy="90" rx="58" ry="22" fill="none" stroke="rgba(255,110,180,0.25)" stroke-width="1.5" stroke-dasharray="5 3.5"/><path id="lg-p2" d="M32,90A58,22 0 1,0 148,90A58,22 0 1,0 32,90" fill="none"/><circle r="3" fill="#ff6eb4" filter="url(#lg-ge)"><animateMotion dur="5.5s" begin="-1.833s" repeatCount="indefinite"><mpath href="#lg-p2"/></animateMotion></circle></g>
        <g transform="rotate(120,90,90)"><ellipse cx="90" cy="90" rx="58" ry="22" fill="none" stroke="rgba(100,216,255,0.22)" stroke-width="1.5"/><path id="lg-p3" d="M32,90A58,22 0 1,0 148,90A58,22 0 1,0 32,90" fill="none"/><circle r="3" fill="#64d8ff" filter="url(#lg-ge)"><animateMotion dur="7s" begin="-4.667s" repeatCount="indefinite"><mpath href="#lg-p3"/></animateMotion></circle></g>
        <circle cx="90" cy="90" r="5.5" fill="#ff6eb4" filter="url(#lg-gn)"><animate attributeName="r" values="5;6.5;5" dur="2.5s" repeatCount="indefinite" calcMode="spline" keySplines="0.42 0 0.58 1;0.42 0 0.58 1"/></circle>
        <rect x="10" y="10" width="160" height="160" rx="14" ry="14" fill="none" stroke="url(#lg-fg)" stroke-width="1.5" stroke-dasharray="632" stroke-dashoffset="632" filter="url(#lg-gf)" opacity="0"><animate attributeName="opacity" values="0;1" dur="0.3s" begin="0.5s" fill="freeze"/><animate attributeName="stroke-dashoffset" from="632" to="0" dur="2s" begin="0.5s" fill="freeze" calcMode="spline" keySplines="0.25 0.1 0.25 1"/></rect>
      </svg>
      <span class="loading-logo-text">SubFrame</span>
      <div class="loading-bar"><div class="loading-bar-fill"></div></div>
      <span class="loading-stage-text">Loading workspace...</span>
    </div>
  </div>

  <!-- React root — React mounts here and dismisses the loading screen -->
  <div id="root"></div>

  <script src="dist/renderer.js"></script>
  <script>
    // Dismiss loading screen — called by React after first render.
    // Using a global callback ensures the overlay stays visible until
    // the UI is actually painted, avoiding a flash of blank content.
    window.__dismissLoadingScreen = function() {
      var loadingEl = document.getElementById('app-loading');
      if (loadingEl) {
        loadingEl.classList.add('fade-out');
        loadingEl.addEventListener('transitionend', function() { loadingEl.remove(); }, { once: true });
      }
    };
    // Fallback: if React never calls it (e.g. render error), dismiss after 5s
    setTimeout(function() { if (window.__dismissLoadingScreen) window.__dismissLoadingScreen(); }, 5000);
  </script>
</body>
</html>