SeaWolf-AI commited on
Commit
fe74459
Β·
verified Β·
1 Parent(s): b07da31

Add loading overlay with progress + Korean status messages

Browse files
Files changed (1) hide show
  1. index.html +51 -0
index.html CHANGED
@@ -26,7 +26,58 @@
26
  <body>
27
  <div class="sigma-parent">
28
  <div class="sigma-expand" id="sigma-canvas"></div>
 
 
 
 
 
 
 
 
 
29
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
30
  <div id="mainpanel">
31
  <div class="col">
32
  <div id="title"></div>
 
26
  <body>
27
  <div class="sigma-parent">
28
  <div class="sigma-expand" id="sigma-canvas"></div>
29
+ <div id="loading-overlay">
30
+ <div class="loading-card">
31
+ <div class="loading-spinner"></div>
32
+ <div class="loading-title">🌌 Model Galaxy</div>
33
+ <div class="loading-status" id="loading-status">데이터 λ‘œλ”© 쀑…</div>
34
+ <div class="loading-progress"><div id="loading-bar"></div></div>
35
+ <div class="loading-hint">22,400+ λ…Έλ“œμ˜ κ°€λŸ­μ‹œλ₯Ό κ·Έλ¦¬λŠ” μ€‘μž…λ‹ˆλ‹€ (5–15초 μ†Œμš”).<br>μ™„λ£Œ ν›„ μš°μƒλ‹¨ 🌳 Darwin Β· μš°ν•˜λ‹¨ ⭐ Trending ν΄λŸ¬μŠ€ν„°λ₯Ό ν™•μΈν•˜μ„Έμš”.</div>
36
+ </div>
37
+ </div>
38
  </div>
39
+ <script>
40
+ // Hide overlay once sigma is initialized + show progress on data fetch
41
+ (function(){
42
+ var s = document.getElementById('loading-status');
43
+ var bar = document.getElementById('loading-bar');
44
+ var overlay = document.getElementById('loading-overlay');
45
+ var origFetch = window.fetch;
46
+ var step = 0;
47
+ var stages = [
48
+ 'Atlas 메타데이터 λ‘œλ“œ 쀑…',
49
+ 'μ••μΆ•λœ κ·Έλž˜ν”„ λ‹€μš΄λ‘œλ“œ 쀑…',
50
+ 'Gzip μ••μΆ• ν•΄μ œ 쀑…',
51
+ 'λ…Έλ“œ / μ—£μ§€ νŒŒμ‹± 쀑…',
52
+ 'Sigma.js λ ˆμ΄μ•„μ›ƒ 계산 쀑…',
53
+ '거의 μ™„λ£Œβ€¦'
54
+ ];
55
+ var i = 0;
56
+ var tick = setInterval(function(){
57
+ if (i < stages.length) { s.textContent = stages[i]; bar.style.width = ((i+1)*16) + '%'; i++; }
58
+ }, 1200);
59
+ // Watchdog: hide overlay when canvas has children (sigma rendered)
60
+ var watch = setInterval(function(){
61
+ var canvas = document.querySelectorAll('#sigma-canvas canvas');
62
+ if (canvas.length > 0) {
63
+ clearInterval(watch); clearInterval(tick);
64
+ bar.style.width = '100%'; s.textContent = 'μ™„λ£Œ βœ“';
65
+ setTimeout(function(){
66
+ overlay.style.opacity = '0';
67
+ setTimeout(function(){ overlay.style.display = 'none'; }, 400);
68
+ }, 250);
69
+ }
70
+ }, 250);
71
+ // Hard cap: hide after 30s no matter what
72
+ setTimeout(function(){
73
+ if (overlay.style.display !== 'none') {
74
+ overlay.style.opacity = '0';
75
+ setTimeout(function(){ overlay.style.display = 'none'; }, 400);
76
+ clearInterval(watch); clearInterval(tick);
77
+ }
78
+ }, 30000);
79
+ })();
80
+ </script>
81
  <div id="mainpanel">
82
  <div class="col">
83
  <div id="title"></div>