Spaces:
Sleeping
Sleeping
Gaurav vashistha
commited on
Commit
·
5f1ac8d
1
Parent(s):
78eeeb4
style: ui polish - header alignment, footer fade, and layout fixes
Browse files
stitch_continuity_dashboard/code.html
CHANGED
|
@@ -1,5 +1,4 @@
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
-
|
| 3 |
<html class="dark" lang="en">
|
| 4 |
|
| 5 |
<head>
|
|
@@ -14,9 +13,6 @@
|
|
| 14 |
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600;700&display=swap"
|
| 15 |
rel="stylesheet" />
|
| 16 |
<!-- Material Symbols -->
|
| 17 |
-
<link
|
| 18 |
-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
|
| 19 |
-
rel="stylesheet" />
|
| 20 |
<link
|
| 21 |
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
|
| 22 |
rel="stylesheet" />
|
|
@@ -74,6 +70,12 @@
|
|
| 74 |
border: 1px solid rgba(255, 255, 255, 0.05);
|
| 75 |
}
|
| 76 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 77 |
.connection-line {
|
| 78 |
height: 2px;
|
| 79 |
flex-grow: 1;
|
|
@@ -134,8 +136,10 @@
|
|
| 134 |
<div class="w-full max-w-[1400px] flex items-center justify-center gap-6 xl:gap-10">
|
| 135 |
<!-- SCENE A: Upload State -->
|
| 136 |
<div class="flex flex-col gap-4 flex-1 max-w-[320px] group">
|
| 137 |
-
|
|
|
|
| 138 |
<span class="text-xs font-bold tracking-widest text-gray-400 uppercase">Input Source</span>
|
|
|
|
| 139 |
<span class="text-xs font-bold tracking-widest text-primary">SCENE A</span>
|
| 140 |
</div>
|
| 141 |
<div
|
|
@@ -174,7 +178,7 @@
|
|
| 174 |
</div>
|
| 175 |
<!-- Active Card Container -->
|
| 176 |
<div id="bridge-card"
|
| 177 |
-
class="relative w-full aspect-[4/3] rounded-2xl overflow-hidden shadow-neon border border-primary/30 group">
|
| 178 |
<!-- Placeholder Gradient Background -->
|
| 179 |
<div class="absolute inset-0 bg-gradient-to-br from-surface-dark to-[#0f0a16] z-0"></div>
|
| 180 |
<!-- Abstract Visualization -->
|
|
@@ -218,8 +222,10 @@
|
|
| 218 |
</div>
|
| 219 |
<!-- SCENE C: Upload State -->
|
| 220 |
<div class="flex flex-col gap-4 flex-1 max-w-[320px] group">
|
| 221 |
-
|
|
|
|
| 222 |
<span class="text-xs font-bold tracking-widest text-primary">SCENE C</span>
|
|
|
|
| 223 |
<span class="text-xs font-bold tracking-widest text-gray-400 uppercase">Target Source</span>
|
| 224 |
</div>
|
| 225 |
<div
|
|
@@ -243,6 +249,10 @@
|
|
| 243 |
</div>
|
| 244 |
</div>
|
| 245 |
</main>
|
|
|
|
|
|
|
|
|
|
|
|
|
| 246 |
<!-- Floating Action Bar (Director Controls) -->
|
| 247 |
<div class="fixed bottom-10 left-1/2 -translate-x-1/2 z-50 w-full max-w-2xl px-4">
|
| 248 |
<!-- Analysis Panel (Step 1) -->
|
|
|
|
| 1 |
<!DOCTYPE html>
|
|
|
|
| 2 |
<html class="dark" lang="en">
|
| 3 |
|
| 4 |
<head>
|
|
|
|
| 13 |
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600;700&display=swap"
|
| 14 |
rel="stylesheet" />
|
| 15 |
<!-- Material Symbols -->
|
|
|
|
|
|
|
|
|
|
| 16 |
<link
|
| 17 |
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
|
| 18 |
rel="stylesheet" />
|
|
|
|
| 70 |
border: 1px solid rgba(255, 255, 255, 0.05);
|
| 71 |
}
|
| 72 |
|
| 73 |
+
/* Footer fade for the floating button */
|
| 74 |
+
.footer-fade {
|
| 75 |
+
background: linear-gradient(to top, #191022 20%, transparent 100%);
|
| 76 |
+
pointer-events: none;
|
| 77 |
+
}
|
| 78 |
+
|
| 79 |
.connection-line {
|
| 80 |
height: 2px;
|
| 81 |
flex-grow: 1;
|
|
|
|
| 136 |
<div class="w-full max-w-[1400px] flex items-center justify-center gap-6 xl:gap-10">
|
| 137 |
<!-- SCENE A: Upload State -->
|
| 138 |
<div class="flex flex-col gap-4 flex-1 max-w-[320px] group">
|
| 139 |
+
<!-- HEADER FIX A: Centered + Gap + Separator -->
|
| 140 |
+
<div class="flex items-center justify-center gap-3 px-1">
|
| 141 |
<span class="text-xs font-bold tracking-widest text-gray-400 uppercase">Input Source</span>
|
| 142 |
+
<span class="text-gray-600">|</span>
|
| 143 |
<span class="text-xs font-bold tracking-widest text-primary">SCENE A</span>
|
| 144 |
</div>
|
| 145 |
<div
|
|
|
|
| 178 |
</div>
|
| 179 |
<!-- Active Card Container -->
|
| 180 |
<div id="bridge-card"
|
| 181 |
+
class="relative w-full aspect-[4/3] rounded-2xl overflow-hidden shadow-neon border border-primary/30 group bg-black">
|
| 182 |
<!-- Placeholder Gradient Background -->
|
| 183 |
<div class="absolute inset-0 bg-gradient-to-br from-surface-dark to-[#0f0a16] z-0"></div>
|
| 184 |
<!-- Abstract Visualization -->
|
|
|
|
| 222 |
</div>
|
| 223 |
<!-- SCENE C: Upload State -->
|
| 224 |
<div class="flex flex-col gap-4 flex-1 max-w-[320px] group">
|
| 225 |
+
<!-- HEADER FIX C: Centered + Gap + Separator + Order Check -->
|
| 226 |
+
<div class="flex items-center justify-center gap-3 px-1">
|
| 227 |
<span class="text-xs font-bold tracking-widest text-primary">SCENE C</span>
|
| 228 |
+
<span class="text-gray-600">|</span>
|
| 229 |
<span class="text-xs font-bold tracking-widest text-gray-400 uppercase">Target Source</span>
|
| 230 |
</div>
|
| 231 |
<div
|
|
|
|
| 249 |
</div>
|
| 250 |
</div>
|
| 251 |
</main>
|
| 252 |
+
|
| 253 |
+
<!-- Footer Fade Mask -->
|
| 254 |
+
<div class="fixed bottom-0 left-0 w-full h-32 footer-fade z-40"></div>
|
| 255 |
+
|
| 256 |
<!-- Floating Action Bar (Director Controls) -->
|
| 257 |
<div class="fixed bottom-10 left-1/2 -translate-x-1/2 z-50 w-full max-w-2xl px-4">
|
| 258 |
<!-- Analysis Panel (Step 1) -->
|