Hugging Face's logo

Spaces:
Bhishaj
/
Continuity
Sleeping

App Files Community
Gaurav vashistha commited on
Commit
1def05c
·
1 Parent(s): d69d44c

fix(frontend): improve history button visibility and z-index

Browse files
Files changed (1) hide show
  1. stitch_continuity_dashboard/code.html +26 -19
stitch_continuity_dashboard/code.html CHANGED
@@ -4,7 +4,7 @@
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Continuity v2.3</title>
8
  <!-- Tailwind CSS -->
9
  <script src="https://cdn.tailwindcss.com"></script>
10
  <script>
@@ -76,18 +76,18 @@
76
 
77
  <!-- HEADER -->
78
  <header
79
- class="w-full fixed top-0 z-50 bg-black/50 backdrop-blur-md border-b border-white/5 h-16 flex items-center justify-between px-6 lg:px-12">
80
  <div class="flex items-center gap-3">
81
  <div
82
  class="size-8 flex items-center justify-center bg-primary/20 rounded-lg border border-primary/30 text-primary">
83
  <span class="material-symbols-outlined">movie_filter</span>
84
  </div>
85
  <h1 class="text-xl font-display font-bold tracking-tight">Continuity <span
86
- class="opacity-50 font-normal text-sm ml-2">v2.3</span></h1>
87
  </div>
88
  <div class="flex items-center gap-3">
89
- <button id="history-btn"
90
- class="flex items-center gap-2 px-4 py-2 bg-surface-dark border border-white/10 rounded-lg hover:bg-white/5 transition-colors text-xs font-bold uppercase tracking-wider">
91
  <span class="material-symbols-outlined text-lg">history</span>
92
  Gallery
93
  </button>
@@ -108,7 +108,7 @@
108
  <span class="material-symbols-outlined text-primary">history</span>
109
  Creation History
110
  </h2>
111
- <button id="close-drawer" class="text-gray-400 hover:text-white transition-colors">
112
  <span class="material-symbols-outlined">close</span>
113
  </button>
114
  </div>
@@ -194,11 +194,17 @@
194
  <span class="text-sm font-bold text-white">Continuity Engine</span>
195
  <span class="text-[10px] text-gray-400 uppercase tracking-wide">Ready for analysis</span>
196
  </div>
197
- <button id="analyze-btn"
198
- class="bg-primary hover:bg-[#6b0bc9] text-white px-6 py-3 rounded-full font-bold text-sm transition-all flex items-center gap-2 shadow-lg">
199
- <span class="material-symbols-outlined text-lg">analytics</span>
200
- Analyze Scenes
201
- </button>
 
 
 
 
 
 
202
  </div>
203
 
204
  <!-- Review Panel -->
@@ -209,8 +215,15 @@
209
  <span class="material-symbols-outlined text-primary">movie_edit</span>
210
  Director's Configuration
211
  </h3>
212
- <button onclick="resetUI()"
213
- class="text-xs text-gray-500 hover:text-white uppercase tracking-wider">Reset</button>
 
 
 
 
 
 
 
214
  </div>
215
 
216
  <div>
@@ -278,8 +291,6 @@
278
  // --- HISTORY GALLERY LOGIC ---
279
  const drawer = document.getElementById('gallery-drawer');
280
  const overlay = document.getElementById('drawer-overlay');
281
- const historyBtn = document.getElementById('history-btn');
282
- const closeBtn = document.getElementById('close-drawer');
283
 
284
  function toggleDrawer(show) {
285
  if (show) {
@@ -294,10 +305,6 @@
294
  }
295
  }
296
 
297
- historyBtn.addEventListener('click', () => toggleDrawer(true));
298
- closeBtn.addEventListener('click', () => toggleDrawer(false));
299
- overlay.addEventListener('click', () => toggleDrawer(false));
300
-
301
  async function fetchHistory() {
302
  const container = document.getElementById('gallery-content');
303
  container.innerHTML = '<div class="text-center text-gray-500 mt-10"><span class="material-symbols-outlined animate-spin text-2xl">progress_activity</span></div>';
 
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Continuity v2.4</title>
8
  <!-- Tailwind CSS -->
9
  <script src="https://cdn.tailwindcss.com"></script>
10
  <script>
 
76
 
77
  <!-- HEADER -->
78
  <header
79
+ class="w-full fixed top-0 z-[60] bg-black/50 backdrop-blur-md border-b border-white/5 h-16 flex items-center justify-between px-6 lg:px-12">
80
  <div class="flex items-center gap-3">
81
  <div
82
  class="size-8 flex items-center justify-center bg-primary/20 rounded-lg border border-primary/30 text-primary">
83
  <span class="material-symbols-outlined">movie_filter</span>
84
  </div>
85
  <h1 class="text-xl font-display font-bold tracking-tight">Continuity <span
86
+ class="opacity-50 font-normal text-sm ml-2">v2.4</span></h1>
87
  </div>
88
  <div class="flex items-center gap-3">
89
+ <button onclick="toggleDrawer(true)"
90
+ class="flex items-center gap-2 px-4 py-2 bg-primary hover:bg-[#6b0bc9] text-white rounded-lg transition-colors text-xs font-bold uppercase tracking-wider shadow-neon">
91
  <span class="material-symbols-outlined text-lg">history</span>
92
  Gallery
93
  </button>
 
108
  <span class="material-symbols-outlined text-primary">history</span>
109
  Creation History
110
  </h2>
111
+ <button onclick="toggleDrawer(false)" class="text-gray-400 hover:text-white transition-colors">
112
  <span class="material-symbols-outlined">close</span>
113
  </button>
114
  </div>
 
194
  <span class="text-sm font-bold text-white">Continuity Engine</span>
195
  <span class="text-[10px] text-gray-400 uppercase tracking-wide">Ready for analysis</span>
196
  </div>
197
+ <div class="flex gap-2">
198
+ <button onclick="toggleDrawer(true)"
199
+ class="bg-surface-dark hover:bg-white/10 text-white p-3 rounded-full transition-all flex items-center justify-center border border-white/10">
200
+ <span class="material-symbols-outlined text-lg">history</span>
201
+ </button>
202
+ <button id="analyze-btn"
203
+ class="bg-primary hover:bg-[#6b0bc9] text-white px-6 py-3 rounded-full font-bold text-sm transition-all flex items-center gap-2 shadow-lg">
204
+ <span class="material-symbols-outlined text-lg">analytics</span>
205
+ Analyze Scenes
206
+ </button>
207
+ </div>
208
  </div>
209
 
210
  <!-- Review Panel -->
 
215
  <span class="material-symbols-outlined text-primary">movie_edit</span>
216
  Director's Configuration
217
  </h3>
218
+ <div class="flex gap-2">
219
+ <button onclick="toggleDrawer(true)"
220
+ class="text-xs text-gray-400 hover:text-white uppercase tracking-wider flex items-center gap-1">
221
+ <span class="material-symbols-outlined text-sm">history</span> History
222
+ </button>
223
+ <span class="text-white/10">|</span>
224
+ <button onclick="resetUI()"
225
+ class="text-xs text-gray-500 hover:text-white uppercase tracking-wider">Reset</button>
226
+ </div>
227
  </div>
228
 
229
  <div>
 
291
  // --- HISTORY GALLERY LOGIC ---
292
  const drawer = document.getElementById('gallery-drawer');
293
  const overlay = document.getElementById('drawer-overlay');
 
 
294
 
295
  function toggleDrawer(show) {
296
  if (show) {
 
305
  }
306
  }
307
 
 
 
 
 
308
  async function fetchHistory() {
309
  const container = document.getElementById('gallery-content');
310
  container.innerHTML = '<div class="text-center text-gray-500 mt-10"><span class="material-symbols-outlined animate-spin text-2xl">progress_activity</span></div>';