Skip to content

Commit f89f37f

Browse files
Prateekiiitg56Prateekiiitg56
committed
Updated landing page
1 parent 68a64c3 commit f89f37f

13 files changed

Lines changed: 3029 additions & 927 deletions

‎frontend/app/analyze/loading/page.tsx‎

Lines changed: 119 additions & 189 deletions
Large diffs are not rendered by default.

‎frontend/app/analyze/loading/stitch-loading.html‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
<html class="dark"><head>
2+
<meta charset="utf-8"/>
3+
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
4+
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
5+
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&amp;family=Playfair+Display:ital,wght@0,700;1,700&amp;family=Space+Mono&amp;display=swap" rel="stylesheet"/>
6+
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
7+
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
8+
<script id="tailwind-config">
9+
tailwind.config = {
10+
darkMode: "class",
11+
theme: {
12+
extend: {
13+
colors: {
14+
"primary": "#06e0f9",
15+
"accent-amber": "#FFBF00",
16+
"background-light": "#f5f8f8",
17+
"background-dark": "#0b0e14",
18+
},
19+
fontFamily: {
20+
"display": ["Space Grotesk", "sans-serif"],
21+
"serif": ["Playfair Display", "serif"],
22+
"mono": ["Space Mono", "monospace"]
23+
},
24+
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
25+
},
26+
},
27+
}
28+
</script>
29+
<style>
30+
.grid-pattern {
31+
background-image: radial-gradient(circle, rgba(6, 224, 249, 0.1) 1px, transparent 1px);
32+
background-size: 30px 30px;
33+
}
34+
.glass-panel {
35+
background: rgba(255, 255, 255, 0.03);
36+
backdrop-filter: blur(12px);
37+
border: 1px solid rgba(255, 255, 255, 0.05);
38+
}
39+
.glow-cyan {
40+
box-shadow: 0 0 15px rgba(6, 224, 249, 0.4);
41+
}
42+
</style>
43+
<style>
44+
body {
45+
min-height: max(884px, 100dvh);
46+
}
47+
</style>
48+
</head>
49+
<body class="bg-background-dark font-display text-slate-100 min-h-screen flex flex-col grid-pattern">
50+
<!-- Top Navigation Bar -->
51+
<nav class="flex items-center justify-between px-6 py-4 border-b border-primary/10 bg-background-dark/80 backdrop-blur-md sticky top-0 z-50">
52+
<div class="flex items-center gap-2">
53+
<span class="material-symbols-outlined text-primary text-2xl">lens_blur</span>
54+
<span class="font-bold tracking-tight text-lg uppercase">Perspective-AI</span>
55+
</div>
56+
<button class="text-slate-400 hover:text-primary transition-colors">
57+
<span class="material-symbols-outlined">menu</span>
58+
</button>
59+
</nav>
60+
<!-- Main Content -->
61+
<main class="flex-1 flex flex-col p-6 max-w-md mx-auto w-full gap-8">
62+
<!-- Header -->
63+
<header class="text-center space-y-2 mt-4">
64+
<h1 class="font-serif text-3xl italic text-slate-100">Initiating Narrative Synthesis...</h1>
65+
<p class="text-primary/60 text-xs font-mono tracking-widest uppercase">System Core v4.0.2</p>
66+
</header>
67+
<!-- Terminal Box -->
68+
<div class="glass-panel rounded-xl p-4 font-mono text-xs overflow-hidden relative">
69+
<div class="flex items-center gap-2 mb-3 border-b border-white/5 pb-2">
70+
<div class="w-2 h-2 rounded-full bg-red-500/50"></div>
71+
<div class="w-2 h-2 rounded-full bg-amber-500/50"></div>
72+
<div class="w-2 h-2 rounded-full bg-green-500/50"></div>
73+
<span class="ml-2 text-primary/40">TARGET_INPUT</span>
74+
</div>
75+
<div class="flex flex-col gap-1">
76+
<span class="text-primary/70">Source:</span>
77+
<span class="text-slate-300 break-all">https://analysis.ai/narrative-synthesis-v1/the-philosophical-matrix</span>
78+
</div>
79+
<div class="absolute right-2 bottom-2 opacity-10">
80+
<span class="material-symbols-outlined text-4xl">terminal</span>
81+
</div>
82+
</div>
83+
<!-- Central Circular Loader -->
84+
<div class="relative flex justify-center items-center py-6">
85+
<div class="relative w-48 h-48 flex items-center justify-center">
86+
<!-- Outer Ring -->
87+
<div class="absolute inset-0 rounded-full border-2 border-primary/20 border-t-primary animate-[spin_3s_linear_infinite]"></div>
88+
<!-- Inner Ring -->
89+
<div class="absolute inset-4 rounded-full border border-primary/10 border-b-primary/60 animate-[spin_2s_linear_infinite_reverse]"></div>
90+
<!-- Technical Motif Center -->
91+
<div class="glass-panel w-32 h-32 rounded-full flex flex-col items-center justify-center glow-cyan border-primary/30">
92+
<span class="material-symbols-outlined text-primary text-4xl animate-pulse">psychology</span>
93+
<span class="text-[10px] font-mono text-primary mt-2 uppercase tracking-tighter">Processing</span>
94+
</div>
95+
</div>
96+
</div>
97+
<!-- Processing Nodes -->
98+
<div class="space-y-4">
99+
<!-- Node: Completed -->
100+
<div class="flex items-center gap-4 group">
101+
<div class="flex flex-col items-center">
102+
<div class="w-8 h-8 rounded-full border border-accent-amber/50 flex items-center justify-center bg-accent-amber/10">
103+
<span class="material-symbols-outlined text-accent-amber text-lg">check</span>
104+
</div>
105+
<div class="w-px h-6 bg-accent-amber/30 my-1"></div>
106+
</div>
107+
<div class="flex-1 pb-4">
108+
<h3 class="text-sm font-semibold text-slate-300">Fetching Article</h3>
109+
<p class="text-[10px] font-mono text-accent-amber/60 uppercase">Node Verified</p>
110+
</div>
111+
</div>
112+
<!-- Node: Completed -->
113+
<div class="flex items-center gap-4 group">
114+
<div class="flex flex-col items-center">
115+
<div class="w-8 h-8 rounded-full border border-accent-amber/50 flex items-center justify-center bg-accent-amber/10">
116+
<span class="material-symbols-outlined text-accent-amber text-lg">check</span>
117+
</div>
118+
<div class="w-px h-6 bg-accent-amber/30 my-1"></div>
119+
</div>
120+
<div class="flex-1 pb-4">
121+
<h3 class="text-sm font-semibold text-slate-300">AI Analysis</h3>
122+
<p class="text-[10px] font-mono text-accent-amber/60 uppercase">Entropy Mapped</p>
123+
</div>
124+
</div>
125+
<!-- Node: Completed -->
126+
<div class="flex items-center gap-4 group">
127+
<div class="flex flex-col items-center">
128+
<div class="w-8 h-8 rounded-full border border-accent-amber/50 flex items-center justify-center bg-accent-amber/10">
129+
<span class="material-symbols-outlined text-accent-amber text-lg">check</span>
130+
</div>
131+
<div class="w-px h-6 bg-accent-amber/30 my-1"></div>
132+
</div>
133+
<div class="flex-1 pb-4">
134+
<h3 class="text-sm font-semibold text-slate-300">Bias Detection</h3>
135+
<p class="text-[10px] font-mono text-accent-amber/60 uppercase">Cognitive Filter Applied</p>
136+
</div>
137+
</div>
138+
<!-- Node: Completed -->
139+
<div class="flex items-center gap-4 group">
140+
<div class="flex flex-col items-center">
141+
<div class="w-8 h-8 rounded-full border border-accent-amber/50 flex items-center justify-center bg-accent-amber/10">
142+
<span class="material-symbols-outlined text-accent-amber text-lg">check</span>
143+
</div>
144+
<div class="w-px h-6 bg-primary/30 my-1"></div>
145+
</div>
146+
<div class="flex-1 pb-4">
147+
<h3 class="text-sm font-semibold text-slate-300">Fact Checking</h3>
148+
<p class="text-[10px] font-mono text-accent-amber/60 uppercase">Cross-Reference Complete</p>
149+
</div>
150+
</div>
151+
<!-- Node: Active -->
152+
<div class="flex items-center gap-4 group">
153+
<div class="flex flex-col items-center">
154+
<div class="w-8 h-8 rounded-full border border-primary flex items-center justify-center bg-primary/20 glow-cyan animate-pulse">
155+
<span class="material-symbols-outlined text-primary text-lg">settings_suggest</span>
156+
</div>
157+
</div>
158+
<div class="flex-1">
159+
<h3 class="text-sm font-bold text-white tracking-wide">Generating Perspectives</h3>
160+
<div class="flex items-center gap-2 mt-1">
161+
<div class="h-1 flex-1 bg-white/5 rounded-full overflow-hidden">
162+
<div class="h-full bg-primary w-2/3 shadow-[0_0_8px_#06e0f9]"></div>
163+
</div>
164+
<span class="text-[10px] font-mono text-primary animate-pulse">Active</span>
165+
</div>
166+
</div>
167+
</div>
168+
</div>
169+
</main>
170+
<!-- Bottom Navigation Bar -->
171+
<div class="fixed bottom-0 left-0 right-0 z-50">
172+
<div class="flex gap-2 border-t border-primary/10 bg-background-dark/95 backdrop-blur-xl px-4 pb-8 pt-4">
173+
<a class="flex flex-1 flex-col items-center justify-center gap-1 text-slate-500 hover:text-primary transition-colors" href="#">
174+
<span class="material-symbols-outlined">speed</span>
175+
<span class="text-[10px] font-mono">DASH</span>
176+
</a>
177+
<a class="flex flex-1 flex-col items-center justify-center gap-1 text-primary" href="#">
178+
<div class="relative">
179+
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1">terminal</span>
180+
<div class="absolute -top-1 -right-1 w-2 h-2 bg-primary rounded-full animate-ping"></div>
181+
</div>
182+
<span class="text-[10px] font-mono">PROCESS</span>
183+
</a>
184+
<a class="flex flex-1 flex-col items-center justify-center gap-1 text-slate-500 hover:text-primary transition-colors" href="#">
185+
<span class="material-symbols-outlined">pie_chart</span>
186+
<span class="text-[10px] font-mono">DATA</span>
187+
</a>
188+
<a class="flex flex-1 flex-col items-center justify-center gap-1 text-slate-500 hover:text-primary transition-colors" href="#">
189+
<span class="material-symbols-outlined">settings</span>
190+
<span class="text-[10px] font-mono">CONFIG</span>
191+
</a>
192+
</div>
193+
</div>
194+
</body></html>

0 commit comments

Comments
 (0)