Spaces:
Running
Running
File size: 12,498 Bytes
a78209f | 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 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 | <!DOCTYPE html>
<html class="dark" lang="en">
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Contrarian AI - Analysis in Progress</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=JetBrains+Mono:wght@400;500;700&display=swap"
rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
rel="stylesheet" />
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#33f20d",
"secondary-red": "#ff2a4d",
"background-light": "#f6f8f5",
"background-dark": "#050505",
"surface-dark": "#0a0f1d",
"glass": "rgba(10, 15, 29, 0.7)",
},
fontFamily: {
"display": ["Inter", "sans-serif"],
"mono": ["JetBrains Mono", "monospace"],
},
borderRadius: { "DEFAULT": "1rem", "lg": "2rem", "xl": "3rem", "full": "9999px" },
animation: {
'spin-slow': 'spin 8s linear infinite',
'pulse-glow': 'pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'data-scroll': 'data-scroll 20s linear infinite',
},
keyframes: {
'pulse-glow': {
'0%, 100%': { opacity: '1', filter: 'drop-shadow(0 0 5px #33f20d)' },
'50%': { opacity: '.8', filter: 'drop-shadow(0 0 15px #33f20d)' },
},
'data-scroll': {
'0%': { transform: 'translateX(0)' },
'100%': { transform: 'translateX(-50%)' },
}
}
},
},
}
</script>
<style>
.cyber-grid {
background-image:
linear-gradient(rgba(51, 242, 13, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(51, 242, 13, 0.03) 1px, transparent 1px);
background-size: 40px 40px;
}
.radar-sweep {
background: conic-gradient(from 0deg, transparent 0deg, transparent 270deg, rgba(51, 242, 13, 0.4) 360deg);
}
/* Custom scrollbar for ticker */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body
class="bg-background-light dark:bg-background-dark font-display text-white overflow-x-hidden min-h-screen flex flex-col">
<!-- Top Navigation -->
<header
class="fixed top-0 w-full z-50 flex items-center justify-between border-b border-[#33f20d]/20 bg-surface-dark/90 backdrop-blur-md px-8 py-4">
<div class="flex items-center gap-3">
<div class="size-8 flex items-center justify-center rounded bg-[#33f20d]/10 border border-[#33f20d]">
<span class="material-symbols-outlined text-primary text-xl">radar</span>
</div>
<h2 class="text-white text-lg font-bold tracking-tight uppercase">Contra Signal <span
class="text-primary/50 font-normal text-sm ml-2 font-mono">v2.4.1</span></h2>
</div>
<div class="flex items-center gap-6">
<div class="hidden md:flex items-center gap-2 font-mono text-xs text-gray-400">
<span class="material-symbols-outlined text-[16px] animate-pulse text-primary">wifi</span>
<span>DATA STREAM: LIVE</span>
</div>
<button
class="flex items-center gap-2 px-4 py-1.5 rounded-full bg-[#33f20d]/10 border border-[#33f20d]/30 text-[#33f20d] text-xs font-mono font-bold">
<span class="size-2 rounded-full bg-primary animate-pulse"></span>
SYSTEM ACTIVE
</button>
</div>
</header>
<!-- Main Content Area -->
<!-- Adjusted padding to shift up but avoid header -->
<main class="relative flex-1 flex flex-col items-center justify-center w-full cyber-grid pt-28 pb-20">
<!-- Background Glow Effects -->
<div
class="absolute inset-0 bg-gradient-to-b from-transparent via-background-dark/80 to-background-dark pointer-events-none">
</div>
<div
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-primary/5 rounded-full blur-[120px] pointer-events-none">
</div>
<!-- Central Layout Container -->
<div class="relative z-10 flex flex-col items-center w-full max-w-4xl px-6">
<!-- Central Loader Artifact -->
<div class="relative flex items-center justify-center size-64 mb-12">
<!-- Outer Static Ring -->
<div class="absolute inset-0 rounded-full border border-white/5"></div>
<!-- Middle Dashed Ring -->
<div class="absolute inset-2 rounded-full border border-dashed border-[#33f20d]/30 animate-spin-slow">
</div>
<!-- Inner Progress Ring SVG -->
<!-- stroke-dasharray="283" matches 2*pi*45 -->
<svg class="absolute inset-0 transform -rotate-90 size-64 drop-shadow-[0_0_10px_rgba(51,242,13,0.3)]"
viewBox="0 0 100 100">
<circle cx="50" cy="50" fill="none" r="45" stroke="#1a2e15" stroke-width="2"></circle>
<circle id="progress-circle" class="transition-all duration-500 ease-out" cx="50" cy="50"
fill="none" r="45" stroke="#33f20d" stroke-dasharray="283" stroke-dashoffset="283"
stroke-linecap="round" stroke-width="2"></circle>
</svg>
<!-- Radar Sweep Effect -->
<div class="absolute inset-4 rounded-full overflow-hidden opacity-20">
<div class="absolute inset-0 radar-sweep animate-spin rounded-full"></div>
</div>
<!-- Center Data Display -->
<div class="absolute flex flex-col items-center justify-center text-center z-20">
<span id="progress-percentage-text"
class="text-5xl font-mono font-bold text-white tracking-tighter drop-shadow-lg">0%</span>
<span class="text-xs text-[#33f20d] font-mono mt-1 animate-pulse"
id="status-phase">INITIALIZING</span>
</div>
</div>
<!-- Status Text -->
<div class="flex flex-col items-center gap-2 mb-10 text-center">
<h1 id="status-headline"
class="text-3xl md:text-4xl font-bold text-white tracking-tight animate-pulse-glow">
Establishing Secure Link...
</h1>
<p id="status-detail" class="text-gray-400 font-mono text-sm max-w-lg">
Preparing environment. Allocating neural resources.
</p>
</div>
<!-- Detailed Progress Bars -->
<div class="w-full max-w-xl grid gap-4" id="steps-container">
<!-- Step 1: Ingestion -->
<div class="flex items-center gap-4 step-row" id="step-news">
<div
class="step-icon size-6 flex items-center justify-center rounded-full border border-white/20 text-gray-500">
<span class="material-symbols-outlined text-sm icon-content">lock_clock</span>
</div>
<div class="flex-1">
<div class="flex justify-between mb-1">
<span class="text-xs font-mono text-gray-500 step-label">DATA_INGESTION (NEWS)</span>
<span class="text-xs font-mono text-gray-500 step-status">PENDING</span>
</div>
<div class="h-1 w-full bg-white/5 rounded-full overflow-hidden">
<div
class="progress-bar h-full bg-[#33f20d] w-0 shadow-[0_0_10px_#33f20d] transition-all duration-500">
</div>
</div>
</div>
</div>
<!-- Step 2: Fundamentals -->
<div class="flex items-center gap-4 step-row" id="step-fundamentals">
<div
class="step-icon size-6 flex items-center justify-center rounded-full border border-white/20 text-gray-500">
<span class="material-symbols-outlined text-sm icon-content">lock_clock</span>
</div>
<div class="flex-1">
<div class="flex justify-between mb-1">
<span class="text-xs font-mono text-gray-500 step-label">FUNDAMENTALS (RAG)</span>
<span class="text-xs font-mono text-gray-500 step-status">PENDING</span>
</div>
<div class="h-1 w-full bg-white/5 rounded-full overflow-hidden">
<div
class="progress-bar h-full bg-[#33f20d] w-0 shadow-[0_0_10px_#33f20d] transition-all duration-500">
</div>
</div>
</div>
</div>
<!-- Step 3: Peer/Signal -->
<div class="flex items-center gap-4 step-row" id="step-signal">
<div
class="step-icon size-6 flex items-center justify-center rounded-full border border-white/20 text-gray-500">
<span class="material-symbols-outlined text-sm icon-content">lock_clock</span>
</div>
<div class="flex-1">
<div class="flex justify-between mb-1">
<span class="text-xs font-mono text-gray-500 step-label">SIGNAL_GENERATION</span>
<span class="text-xs font-mono text-gray-500 step-status">PENDING</span>
</div>
<div class="h-1 w-full bg-white/5 rounded-full overflow-hidden">
<div
class="progress-bar h-full bg-[#33f20d] w-0 shadow-[0_0_10px_#33f20d] transition-all duration-500">
</div>
</div>
</div>
</div>
</div>
<!-- Cancel Button -->
<a href="/"
class="mt-12 px-8 py-2.5 rounded-full border border-red-900/50 hover:border-red-500/80 hover:bg-red-500/10 text-red-400 text-sm font-medium transition-colors flex items-center gap-2 group">
<span class="material-symbols-outlined text-lg group-hover:rotate-90 transition-transform">close</span>
ABORT ANALYSIS
</a>
</div>
<!-- Bottom Right Stats - Fixed Position for visibility -->
<div
class="hidden lg:block fixed bottom-8 right-8 w-64 p-4 rounded-xl border border-white/5 bg-surface-dark/90 backdrop-blur-md z-50">
<div class="grid grid-cols-2 gap-4">
<div>
<p class="text-[10px] text-gray-500 uppercase font-mono">Tokens Processed</p>
<p id="token-counter" class="text-lg font-mono text-white">0</p>
</div>
<div>
<p class="text-[10px] text-gray-500 uppercase font-mono">Time Taken</p>
<p id="time-elapsed" class="text-lg font-mono text-[#33f20d]">0s</p>
</div>
</div>
</div>
</main>
<!-- Footer Ticker Removed -->
<script src="/static/js/progress.js"></script>
</body>
</html> |