Skip to content

Commit 61e90b3

Browse files
PRODHOSHPRODHOSH
committed
added background effects and improved ui for all pages
1 parent 10da734 commit 61e90b3

File tree

3 files changed

+335
-118
lines changed

3 files changed

+335
-118
lines changed

‎src/index.css‎

Lines changed: 79 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -95,31 +95,94 @@ All colors MUST be HSL.
9595
position: fixed; /* cover the full viewport */
9696
inset: 0;
9797
pointer-events: none;
98-
/* Dense, small colorful particles similar to screenshot 2 */
98+
/* Dense, colorful particles with larger sizes */
9999
background-image:
100-
radial-gradient(circle at 2% 5%, rgba(255,255,255,0.98) 0.6px, transparent 0.8px),
101-
radial-gradient(circle at 22% 18%, rgba(0,240,200,0.95) 0.6px, transparent 0.8px),
102-
radial-gradient(circle at 40% 40%, rgba(168,85,247,0.92) 0.6px, transparent 0.8px),
103-
radial-gradient(circle at 60% 25%, rgba(255,210,80,0.9) 0.6px, transparent 0.8px),
104-
radial-gradient(circle at 80% 70%, rgba(255,128,200,0.9) 0.6px, transparent 0.8px);
105-
background-size: 220px 220px, 180px 180px, 140px 140px, 320px 320px, 160px 160px;
106-
background-position: 0% 0%, 10% 20%, 30% 10%, 60% 80%, 5% 75%;
107-
opacity: 0.26;
100+
/* Layer 1: White stars - larger */
101+
radial-gradient(circle at 2% 5%, rgba(255,255,255,0.95) 1.5px, transparent 2px),
102+
radial-gradient(circle at 15% 15%, rgba(255,255,255,0.9) 1.2px, transparent 1.5px),
103+
radial-gradient(circle at 85% 10%, rgba(255,255,255,0.85) 1px, transparent 1.3px),
104+
radial-gradient(circle at 92% 88%, rgba(255,255,255,0.9) 1.4px, transparent 1.8px),
105+
/* Layer 2: Cyan stars - larger */
106+
radial-gradient(circle at 22% 18%, rgba(0,240,200,0.92) 1.5px, transparent 2px),
107+
radial-gradient(circle at 65% 12%, rgba(0,240,200,0.85) 1.1px, transparent 1.4px),
108+
radial-gradient(circle at 8% 78%, rgba(0,240,200,0.88) 1.2px, transparent 1.6px),
109+
/* Layer 3: Purple stars - larger */
110+
radial-gradient(circle at 40% 40%, rgba(168,85,247,0.9) 1.5px, transparent 2px),
111+
radial-gradient(circle at 70% 65%, rgba(168,85,247,0.85) 1.1px, transparent 1.4px),
112+
radial-gradient(circle at 25% 85%, rgba(168,85,247,0.88) 1.2px, transparent 1.6px),
113+
/* Layer 4: Yellow/Gold stars - larger */
114+
radial-gradient(circle at 60% 25%, rgba(255,210,80,0.88) 1.5px, transparent 2px),
115+
radial-gradient(circle at 45% 70%, rgba(255,210,80,0.82) 1.1px, transparent 1.4px),
116+
radial-gradient(circle at 88% 45%, rgba(255,210,80,0.85) 1.2px, transparent 1.6px),
117+
/* Layer 5: Pink stars - larger */
118+
radial-gradient(circle at 80% 70%, rgba(255,128,200,0.88) 1.5px, transparent 2px),
119+
radial-gradient(circle at 35% 55%, rgba(255,128,200,0.82) 1.1px, transparent 1.4px),
120+
radial-gradient(circle at 12% 32%, rgba(255,128,200,0.85) 1.2px, transparent 1.6px),
121+
/* Layer 6: More scattered medium stars */
122+
radial-gradient(circle at 50% 8%, rgba(255,255,255,0.7) 0.8px, transparent 1.1px),
123+
radial-gradient(circle at 75% 92%, rgba(0,240,200,0.7) 0.8px, transparent 1.1px),
124+
radial-gradient(circle at 18% 48%, rgba(168,85,247,0.7) 0.8px, transparent 1.1px),
125+
radial-gradient(circle at 95% 35%, rgba(255,210,80,0.7) 0.8px, transparent 1.1px);
126+
background-size:
127+
220px 220px, 280px 280px, 350px 350px, 400px 400px,
128+
180px 180px, 240px 240px, 320px 320px,
129+
140px 140px, 200px 200px, 260px 260px,
130+
320px 320px, 380px 380px, 420px 420px,
131+
160px 160px, 220px 220px, 280px 280px,
132+
180px 180px, 240px 240px, 300px 300px, 360px 360px;
133+
background-position:
134+
0% 0%, 15% 15%, 85% 10%, 92% 88%,
135+
10% 20%, 65% 12%, 8% 78%,
136+
30% 10%, 70% 65%, 25% 85%,
137+
60% 80%, 45% 70%, 88% 45%,
138+
5% 75%, 35% 55%, 12% 32%,
139+
50% 8%, 75% 92%, 18% 48%, 95% 35%;
140+
opacity: 0.4;
108141
mix-blend-mode: screen;
109-
filter: drop-shadow(0 0 6px rgba(255,255,255,0.03));
110-
animation: twinkle 6.5s linear infinite, drift 40s linear infinite;
142+
filter: drop-shadow(0 0 8px rgba(255,255,255,0.1));
143+
animation: twinkle 8s ease-in-out infinite, drift 60s linear infinite;
111144
z-index: 0;
112145
}
113146

114147
@keyframes twinkle {
115-
0%, 100% { opacity: 0.09; transform: translateZ(0) scale(1); }
116-
50% { opacity: 0.18; transform: translateZ(0) scale(1.02); }
148+
0%, 100% {
149+
opacity: 0.3;
150+
transform: translateZ(0) scale(1);
151+
}
152+
50% {
153+
opacity: 0.5;
154+
transform: translateZ(0) scale(1.05);
155+
}
117156
}
118157

119158
@keyframes drift {
120-
0% { background-position: 0% 0%, 10% 20%, 30% 10%, 60% 80%, 5% 75%; }
121-
50% { background-position: 30% 10%, 40% 35%, 10% 50%, 30% 60%, 45% 20%; }
122-
100% { background-position: 0% 0%, 10% 20%, 30% 10%, 60% 80%, 5% 75%; }
159+
0% {
160+
background-position:
161+
0% 0%, 15% 15%, 85% 10%, 92% 88%,
162+
10% 20%, 65% 12%, 8% 78%,
163+
30% 10%, 70% 65%, 25% 85%,
164+
60% 80%, 45% 70%, 88% 45%,
165+
5% 75%, 35% 55%, 12% 32%,
166+
50% 8%, 75% 92%, 18% 48%, 95% 35%;
167+
}
168+
50% {
169+
background-position:
170+
20% 15%, 35% 30%, 70% 25%, 77% 73%,
171+
30% 35%, 45% 27%, 28% 63%,
172+
50% 25%, 50% 50%, 45% 70%,
173+
40% 65%, 65% 55%, 68% 60%,
174+
25% 60%, 55% 40%, 32% 47%,
175+
70% 23%, 55% 77%, 38% 33%, 75% 50%;
176+
}
177+
100% {
178+
background-position:
179+
0% 0%, 15% 15%, 85% 10%, 92% 88%,
180+
10% 20%, 65% 12%, 8% 78%,
181+
30% 10%, 70% 65%, 25% 85%,
182+
60% 80%, 45% 70%, 88% 45%,
183+
5% 75%, 35% 55%, 12% 32%,
184+
50% 8%, 75% 92%, 18% 48%, 95% 35%;
185+
}
123186
}
124187

125188
.glow-primary {

‎src/pages/Simulation.tsx‎

Lines changed: 86 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -65,22 +65,35 @@ const Simulation = () => {
6565
</Link>
6666

6767
<div className="max-w-7xl mx-auto space-y-6">
68-
<div>
69-
<h1 className="text-4xl font-bold mb-2 gradient-text">
68+
{/* Header Section */}
69+
<div className="text-center md:text-left">
70+
<div className="inline-flex items-center gap-2 px-4 py-2 bg-primary/10 border border-primary/20 rounded-full text-sm text-primary mb-4">
71+
<Play className="w-4 h-4" />
72+
<span className="font-semibold">3D Quantum Simulator</span>
73+
</div>
74+
<h1 className="text-4xl md:text-5xl font-bold mb-3 gradient-text">
7075
Quantum Key Distribution Simulator
7176
</h1>
72-
<p className="text-white/85">
77+
<p className="text-lg text-white/75 max-w-3xl">
7378
Interactive BB84 protocol with real-time 3D visualization and analytics
7479
</p>
7580
</div>
7681

7782
{/* Simulation Controls */}
78-
<Card className="p-6 bg-card/70 backdrop-blur-sm">
79-
<h3 className="text-lg font-semibold mb-4">Simulation Controls</h3>
83+
<Card className="p-8 bg-card/80 backdrop-blur-sm border-primary/20 hover:border-primary/40 transition-all">
84+
<div className="flex items-center gap-3 mb-6">
85+
<div className="w-10 h-10 bg-primary/20 rounded-lg flex items-center justify-center">
86+
<Play className="w-5 h-5 text-primary" />
87+
</div>
88+
<h3 className="text-2xl font-bold gradient-text">Simulation Controls</h3>
89+
</div>
8090
<div className="space-y-6">
8191
<div className="space-y-3">
8292
<div className="flex items-center justify-between">
83-
<Label htmlFor="photon-count" className="text-white/90">Number of Photons: {photonCount}</Label>
93+
<Label htmlFor="photon-count" className="text-white/90 text-base font-medium">
94+
Number of Photons
95+
</Label>
96+
<span className="text-2xl font-bold text-primary">{photonCount}</span>
8497
</div>
8598
<Slider
8699
id="photon-count"
@@ -92,12 +105,21 @@ const Simulation = () => {
92105
disabled={isSimulating}
93106
className="w-full"
94107
/>
108+
<div className="flex justify-between text-xs text-muted-foreground">
109+
<span>8 photons</span>
110+
<span>32 photons</span>
111+
</div>
95112
</div>
96113

97-
<div className="flex items-center justify-between">
98-
<Label htmlFor="eve-mode" className="cursor-pointer">
99-
Include Eavesdropper (Eve)
100-
</Label>
114+
<div className="flex items-center justify-between p-4 bg-accent/5 rounded-lg border border-accent/20">
115+
<div className="flex-1">
116+
<Label htmlFor="eve-mode" className="cursor-pointer text-base font-medium">
117+
Include Eavesdropper (Eve)
118+
</Label>
119+
<p className="text-sm text-muted-foreground mt-1">
120+
Enable to simulate an attacker intercepting photons
121+
</p>
122+
</div>
101123
<Switch
102124
id="eve-mode"
103125
checked={eveEnabled}
@@ -106,19 +128,22 @@ const Simulation = () => {
106128
/>
107129
</div>
108130

109-
<div className="flex gap-4">
131+
<div className="flex gap-4 pt-2">
110132
<Button
111133
onClick={handleStart}
112134
disabled={isSimulating && currentPhotonIndex < photons.length - 1}
113-
className="bg-gradient-quantum flex-1 glow-primary"
135+
className="bg-gradient-quantum flex-1 glow-primary h-12 text-base font-semibold"
136+
size="lg"
114137
>
115-
<Play className="mr-2 w-4 h-4" />
138+
<Play className="mr-2 w-5 h-5" />
116139
{isSimulating ? "Running Simulation..." : "Run Simulation"}
117140
</Button>
118141
<Button
119142
onClick={handleReset}
120143
variant="outline"
121144
disabled={!isSimulating}
145+
className="border-accent/30 hover:bg-accent/10 h-12"
146+
size="lg"
122147
>
123148
<RotateCcw className="mr-2 w-4 h-4" />
124149
Reset
@@ -198,23 +223,57 @@ const Simulation = () => {
198223

199224
{/* Educational Info */}
200225
{!isSimulating && photons.length === 0 && (
201-
<Card className="p-6 bg-primary/5 border-primary/20">
226+
<Card className="p-8 bg-gradient-to-br from-primary/10 to-accent/10 border-primary/30">
202227
<div className="flex items-start gap-4">
203-
<div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center flex-shrink-0">
204-
<Info className="w-5 h-5 text-primary" />
228+
<div className="w-12 h-12 rounded-lg bg-primary/20 flex items-center justify-center flex-shrink-0">
229+
<Info className="w-6 h-6 text-primary" />
205230
</div>
206-
<div className="space-y-2">
207-
<h3 className="font-semibold text-lg">How to Use the Simulator</h3>
208-
<ul className="space-y-1 text-sm text-muted-foreground">
209-
<li>• Adjust the number of photons to simulate (8-32)</li>
210-
<li>• Toggle the eavesdropper to see how Eve affects the protocol</li>
211-
<li>• Click "Run Simulation" to watch photons travel in 3D</li>
212-
<li>• Green photons = basis match (key bit kept)</li>
213-
<li>• Red photons = basis mismatch (bit discarded)</li>
214-
<li>• View analytics to see key efficiency and error rates</li>
215-
</ul>
231+
<div className="space-y-4 flex-1">
232+
<h3 className="font-bold text-2xl gradient-text">How to Use the Simulator</h3>
233+
<div className="grid md:grid-cols-2 gap-4">
234+
<div className="space-y-3">
235+
<div className="flex items-start gap-3 p-3 bg-background/40 rounded-lg">
236+
<span className="text-primary font-bold">1.</span>
237+
<p className="text-white/85">
238+
Adjust the number of photons to simulate (8-32)
239+
</p>
240+
</div>
241+
<div className="flex items-start gap-3 p-3 bg-background/40 rounded-lg">
242+
<span className="text-primary font-bold">2.</span>
243+
<p className="text-white/85">
244+
Toggle the eavesdropper to see how Eve affects the protocol
245+
</p>
246+
</div>
247+
<div className="flex items-start gap-3 p-3 bg-background/40 rounded-lg">
248+
<span className="text-primary font-bold">3.</span>
249+
<p className="text-white/85">
250+
Click "Run Simulation" to watch photons travel in 3D
251+
</p>
252+
</div>
253+
</div>
254+
<div className="space-y-3">
255+
<div className="flex items-start gap-3 p-3 bg-background/40 rounded-lg">
256+
<div className="w-3 h-3 rounded-full bg-success mt-1 flex-shrink-0"></div>
257+
<p className="text-white/85">
258+
<strong className="text-success">Green photons</strong> = basis match (key bit kept)
259+
</p>
260+
</div>
261+
<div className="flex items-start gap-3 p-3 bg-background/40 rounded-lg">
262+
<div className="w-3 h-3 rounded-full bg-destructive mt-1 flex-shrink-0"></div>
263+
<p className="text-white/85">
264+
<strong className="text-destructive">Red photons</strong> = basis mismatch (bit discarded)
265+
</p>
266+
</div>
267+
<div className="flex items-start gap-3 p-3 bg-background/40 rounded-lg">
268+
<span className="text-accent font-bold">📊</span>
269+
<p className="text-white/85">
270+
View analytics to see key efficiency and error rates
271+
</p>
272+
</div>
273+
</div>
274+
</div>
216275
<Link to="/theory" className="inline-block mt-4">
217-
<Button variant="link" className="px-0 text-primary">
276+
<Button variant="link" className="px-0 text-primary hover:text-primary/80 text-base">
218277
Learn more about BB84 Protocol →
219278
</Button>
220279
</Link>

0 commit comments

Comments
 (0)