Hugging Face's logo

Spaces:
Bhishaj
/
Continuity
Sleeping

App Files Community
Gaurav vashistha commited on
Commit
e99491d
·
1 Parent(s): 7d2f112

fix: resolve css conflict with tailwind drawer

Browse files
Files changed (1) hide show
  1. stitch_continuity_dashboard/code.html +37 -61
stitch_continuity_dashboard/code.html CHANGED
@@ -46,19 +46,6 @@
46
  overflow: hidden;
47
  }
48
 
49
- /* Drawer Logic */
50
- #gallery-drawer {
51
- transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
52
- }
53
-
54
- .drawer-open {
55
- transform: translateX(0%);
56
- }
57
-
58
- .drawer-closed {
59
- transform: translateX(100%);
60
- }
61
-
62
  /* Sliders */
63
  input[type=range] {
64
  -webkit-appearance: none;
@@ -88,28 +75,20 @@
88
 
89
  <body
90
  class="bg-background-dark font-body text-white h-screen w-screen overflow-hidden flex flex-col selection:bg-primary selection:text-white relative">
91
-
92
- <!-- Fixed Header -->
93
- <header
94
- class="flex items-center justify-between px-6 py-4 w-full z-40 relative bg-background-dark/80 backdrop-blur-sm border-b border-white/5">
95
- <div class="flex items-center gap-3">
96
- <div
97
- class="size-8 flex items-center justify-center bg-primary/20 rounded-lg border border-primary/30 text-primary">
98
- <span class="material-symbols-outlined">movie_filter</span>
99
- </div>
100
- <h1 class="text-xl font-display font-bold tracking-tight">Continuity</h1>
101
  </div>
102
- <div class="flex items-center gap-3">
103
- <button onclick="toggleDrawer(true)"
104
- 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">
105
- <span class="material-symbols-outlined text-lg">history</span> Gallery
106
- </button>
107
- </div>
108
- </header>
109
-
110
- <!-- Main Content Area with Scroll -->
111
- <div
112
- class="w-full max-w-6xl mx-auto flex items-center justify-center gap-4 md:gap-8 lg:gap-12 mt-12 mb-32 z-0 relative flex-1 overflow-y-auto px-4 custom-scrollbar">
113
 
114
  <div class="flex flex-col gap-3 flex-1 max-w-[320px] group">
115
  <div class="flex justify-between px-1"><span
@@ -130,7 +109,6 @@
130
  <div class="flex justify-center px-1"><span
131
  class="text-[10px] font-bold tracking-[0.2em] text-primary uppercase animate-pulse">Generated
132
  Bridge</span></div>
133
-
134
  <div id="bridge-card-outer"
135
  class="relative aspect-video rounded-2xl shadow-neon transition-all duration-500 border border-primary/20">
136
  <div id="bridge-card-inner" class="force-clip w-full h-full bg-black relative">
@@ -153,8 +131,8 @@
153
  class="hidden flex justify-center mt-4 animate-in fade-in slide-in-from-top-2">
154
  <a id="merged-download-btn" href="#" download
155
  class="flex items-center gap-2 px-6 py-3 bg-surface-dark hover:bg-white/5 border border-primary/30 hover:border-primary text-primary hover:text-white rounded-xl font-bold text-xs uppercase tracking-widest transition-all shadow-lg group">
156
- <span class="material-symbols-outlined group-hover:animate-bounce">movie</span>
157
- Download Merged (A+B+C)
158
  </a>
159
  </div>
160
  </div>
@@ -174,10 +152,8 @@
174
  </div>
175
  </div>
176
  </div>
177
-
178
- <!-- Floating Controls -->
179
  <div id="analysis-panel"
180
- class="glass-panel p-2 rounded-full shadow-neon flex items-center justify-between pl-6 pr-2 absolute bottom-8 left-1/2 transform -translate-x-1/2 z-50 w-[90%] max-w-2xl">
181
  <div class="flex flex-col"><span class="text-sm font-bold text-white">Continuity Engine</span><span
182
  class="text-[10px] text-gray-400 uppercase tracking-wide">Ready for analysis</span></div>
183
  <div class="flex gap-2">
@@ -190,7 +166,7 @@
190
  </div>
191
  </div>
192
  <div id="review-panel"
193
- class="hidden glass-panel rounded-2xl p-5 shadow-2xl flex flex-col gap-4 animate-in slide-in-from-bottom-4 duration-300 max-h-[80vh] overflow-y-auto custom-scrollbar absolute bottom-8 left-1/2 transform -translate-x-1/2 z-50 w-[90%] max-w-xl">
194
  <div class="flex items-center justify-between border-b border-white/10 pb-3">
195
  <h3 class="text-sm font-bold text-white flex items-center gap-2"><span
196
  class="material-symbols-outlined text-primary">movie_edit</span> Director's Configuration</h3>
@@ -259,19 +235,16 @@
259
  class="w-full bg-gradient-to-r from-primary to-[#9d4edd] hover:brightness-110 text-white py-3.5 rounded-xl font-bold text-sm tracking-wide shadow-lg flex items-center justify-center gap-2 mt-1"><span
260
  class="material-symbols-outlined">auto_fix_high</span> Generate Video</button>
261
  </div>
262
-
263
- <div id="drawer-overlay" class="fixed inset-0 bg-black/50 z-[90] hidden" onclick="toggleDrawer(false)"></div>
264
- <div id="gallery-drawer"
265
- class="fixed right-0 top-0 h-full w-80 bg-surface-dark shadow-2xl z-[100] transform drawer-closed flex flex-col border-l border-white/10 transition-transform duration-300">
266
- <div class="p-6 border-b border-white/5 flex items-center justify-between bg-surface-dark">
267
- <h2 class="text-lg font-bold text-white flex items-center gap-2"><span
268
- class="material-symbols-outlined text-primary">history</span> History</h2>
269
- <button onclick="toggleDrawer(false)" class="text-gray-400 hover:text-white transition-colors"><span
270
- class="material-symbols-outlined">close</span></button>
271
- </div>
272
- <div id="gallery-content" class="flex-1 overflow-y-auto p-4 space-y-4">
273
- <div class="text-center text-gray-500 mt-10">Loading history...</div>
274
- </div>
275
  </div>
276
 
277
  <script>
@@ -284,17 +257,18 @@
284
  return;
285
  }
286
  if (show) {
287
- drawer.classList.remove('drawer-closed');
288
- drawer.classList.add('drawer-open');
 
289
  overlay.classList.remove('hidden');
290
  fetchHistory();
291
  } else {
292
- drawer.classList.remove('drawer-open');
293
- drawer.classList.add('drawer-closed');
294
  overlay.classList.add('hidden');
295
  }
296
  }
297
- // --- APP LOGIC ---
298
  let currentVideoAPath = "";
299
  let currentVideoCPath = "";
300
  function savePreference(key, value) { localStorage.setItem('continuity_' + key, value); }
@@ -304,7 +278,7 @@
304
  if (s) document.getElementById('style-select').value = s;
305
  if (a) document.getElementById('audio-input').value = a;
306
  }
307
- loadPreferences(); // Safe to run here as inputs exist
308
  async function fetchHistory() {
309
  const c = document.getElementById('gallery-content');
310
  c.innerHTML = '<div class="text-center mt-10"><span class="material-symbols-outlined animate-spin">progress_activity</span></div>';
@@ -337,7 +311,9 @@
337
  document.getElementById("analysis-panel").classList.remove("hidden");
338
  document.getElementById("review-panel").classList.add("hidden");
339
  document.getElementById("prompt-box").value = "";
340
- currentVideoAPath = ""; currentVideoCPath = "";
 
 
341
  document.getElementById("bridge-content").innerHTML = `<div class="absolute inset-0 bg-cover bg-center opacity-20" style="background-image:url('https://images.unsplash.com/photo-1614850523060-8da1d56ae167')"></div><div class="absolute inset-0 flex flex-col items-center justify-center"><span class="material-symbols-outlined text-3xl text-primary mb-2">auto_awesome</span><p class="text-xs text-gray-400">Ready</p></div>`;
342
  document.getElementById("bridge-card-outer").classList.replace("border-primary", "border-primary/20");
343
  document.getElementById("bridge-border").classList.replace("border-primary/50", "border-transparent");
 
46
  overflow: hidden;
47
  }
48
 
 
 
 
 
 
 
 
 
 
 
 
 
 
49
  /* Sliders */
50
  input[type=range] {
51
  -webkit-appearance: none;
 
75
 
76
  <body
77
  class="bg-background-dark font-body text-white h-screen w-screen overflow-hidden flex flex-col selection:bg-primary selection:text-white relative">
78
+ <div class="flex items-center gap-3">
79
+ <div
80
+ class="size-8 flex items-center justify-center bg-primary/20 rounded-lg border border-primary/30 text-primary">
81
+ <span class="material-symbols-outlined">movie_filter</span>
 
 
 
 
 
 
82
  </div>
83
+ <h1 class="text-xl font-display font-bold tracking-tight">Continuity</h1>
84
+ </div>
85
+ <div class="flex items-center gap-3">
86
+ <button onclick="toggleDrawer(true)"
87
+ 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">
88
+ <span class="material-symbols-outlined text-lg">history</span> Gallery
89
+ </button>
90
+ </div>
91
+ <div class="w-full max-w-6xl mx-auto flex items-center justify-center gap-4 md:gap-8 lg:gap-12 mt-12">
 
 
92
 
93
  <div class="flex flex-col gap-3 flex-1 max-w-[320px] group">
94
  <div class="flex justify-between px-1"><span
 
109
  <div class="flex justify-center px-1"><span
110
  class="text-[10px] font-bold tracking-[0.2em] text-primary uppercase animate-pulse">Generated
111
  Bridge</span></div>
 
112
  <div id="bridge-card-outer"
113
  class="relative aspect-video rounded-2xl shadow-neon transition-all duration-500 border border-primary/20">
114
  <div id="bridge-card-inner" class="force-clip w-full h-full bg-black relative">
 
131
  class="hidden flex justify-center mt-4 animate-in fade-in slide-in-from-top-2">
132
  <a id="merged-download-btn" href="#" download
133
  class="flex items-center gap-2 px-6 py-3 bg-surface-dark hover:bg-white/5 border border-primary/30 hover:border-primary text-primary hover:text-white rounded-xl font-bold text-xs uppercase tracking-widest transition-all shadow-lg group">
134
+ <span class="material-symbols-outlined group-hover:animate-bounce">movie</span> Download Merged
135
+ (A+B+C)
136
  </a>
137
  </div>
138
  </div>
 
152
  </div>
153
  </div>
154
  </div>
 
 
155
  <div id="analysis-panel"
156
+ class="glass-panel p-2 rounded-full shadow-neon flex items-center justify-between pl-6 pr-2">
157
  <div class="flex flex-col"><span class="text-sm font-bold text-white">Continuity Engine</span><span
158
  class="text-[10px] text-gray-400 uppercase tracking-wide">Ready for analysis</span></div>
159
  <div class="flex gap-2">
 
166
  </div>
167
  </div>
168
  <div id="review-panel"
169
+ class="hidden glass-panel rounded-2xl p-5 shadow-2xl flex flex-col gap-4 animate-in slide-in-from-bottom-4 duration-300 max-h-[80vh] overflow-y-auto custom-scrollbar">
170
  <div class="flex items-center justify-between border-b border-white/10 pb-3">
171
  <h3 class="text-sm font-bold text-white flex items-center gap-2"><span
172
  class="material-symbols-outlined text-primary">movie_edit</span> Director's Configuration</h3>
 
235
  class="w-full bg-gradient-to-r from-primary to-[#9d4edd] hover:brightness-110 text-white py-3.5 rounded-xl font-bold text-sm tracking-wide shadow-lg flex items-center justify-center gap-2 mt-1"><span
236
  class="material-symbols-outlined">auto_fix_high</span> Generate Video</button>
237
  </div>
238
+ <div class="p-6 border-b border-white/5 flex items-center justify-between bg-surface-dark">
239
+ <h2 class="text-lg font-bold text-white flex items-center gap-2"><span
240
+ class="material-symbols-outlined text-primary">history</span> History</h2>
241
+ <button onclick="toggleDrawer(false)"
242
+ class="text-gray-400 hover:text-white transition-colors cursor-pointer"><span
243
+ class="material-symbols-outlined">close</span></button>
244
+ </div>
245
+ <div id="gallery-content" class="flex-1 overflow-y-auto p-4 space-y-4">
246
+ <div class="text-center text-gray-500 mt-10">Loading history...</div>
247
+ </div>
 
 
 
248
  </div>
249
 
250
  <script>
 
257
  return;
258
  }
259
  if (show) {
260
+ // Use Tailwind classes to animate
261
+ drawer.classList.remove('translate-x-full');
262
+ drawer.classList.add('translate-x-0');
263
  overlay.classList.remove('hidden');
264
  fetchHistory();
265
  } else {
266
+ drawer.classList.remove('translate-x-0');
267
+ drawer.classList.add('translate-x-full');
268
  overlay.classList.add('hidden');
269
  }
270
  }
271
+ // --- REST OF APP LOGIC ---
272
  let currentVideoAPath = "";
273
  let currentVideoCPath = "";
274
  function savePreference(key, value) { localStorage.setItem('continuity_' + key, value); }
 
278
  if (s) document.getElementById('style-select').value = s;
279
  if (a) document.getElementById('audio-input').value = a;
280
  }
281
+ loadPreferences();
282
  async function fetchHistory() {
283
  const c = document.getElementById('gallery-content');
284
  c.innerHTML = '<div class="text-center mt-10"><span class="material-symbols-outlined animate-spin">progress_activity</span></div>';
 
311
  document.getElementById("analysis-panel").classList.remove("hidden");
312
  document.getElementById("review-panel").classList.add("hidden");
313
  document.getElementById("prompt-box").value = "";
314
+ currentVideoAPath = "";
315
+ currentVideoCPath = "";
316
+
317
  document.getElementById("bridge-content").innerHTML = `<div class="absolute inset-0 bg-cover bg-center opacity-20" style="background-image:url('https://images.unsplash.com/photo-1614850523060-8da1d56ae167')"></div><div class="absolute inset-0 flex flex-col items-center justify-center"><span class="material-symbols-outlined text-3xl text-primary mb-2">auto_awesome</span><p class="text-xs text-gray-400">Ready</p></div>`;
318
  document.getElementById("bridge-card-outer").classList.replace("border-primary", "border-primary/20");
319
  document.getElementById("bridge-border").classList.replace("border-primary/50", "border-transparent");