Skip to content

Commit 3637d00

Browse files
panayangpanayang
committed
bump: v0.9.0
1 parent a270dd4 commit 3637d00

7 files changed

Lines changed: 335 additions & 254 deletions

File tree

‎Cargo.lock‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎scraper/Cargo.toml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
[package]
22
name = "scraper"
3-
version = "0.8.0"
3+
version = "0.9.0"
44
edition = "2024"
55
rust-version = "1.90.0"
66
authors = ["Xinyu Yang <Pana.Yang@hotmail.com>"]

‎shared/Cargo.toml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
[package]
22
name = "shared"
3-
version = "0.8.0"
3+
version = "0.9.0"
44
edition = "2024"
55
rust-version = "1.90.0"
66
authors = ["Xinyu Yang <Pana.Yang@hotmail.com>"]

‎web_app/Cargo.toml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
[package]
22
name = "web_app"
3-
version = "0.8.0"
3+
version = "0.9.0"
44
edition = "2024"
55
rust-version = "1.90.0"
66
authors = ["Xinyu Yang <Pana.Yang@hotmail.com>"]

‎web_app/src/lib.rs‎

Lines changed: 186 additions & 183 deletions
Large diffs are not rendered by default.

‎web_app/src/surprise.rs‎

Lines changed: 38 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -338,28 +338,36 @@ pub fn SurpriseModal(
338338

339339
view! {
340340
<Show when=move || show.get()>
341-
<div class="fixed inset-0 bg-black/80 backdrop-blur-md z-[200] flex items-center justify-center p-4 animate-in fade-in duration-300">
342-
<div class="bg-obsidian-sidebar border border-white/10 w-full max-w-lg rounded-3xl shadow-2xl relative overflow-hidden animate-in zoom-in-95 duration-300">
343-
<div class="p-8 space-y-6 text-center">
344-
<div class="flex items-center justify-between text-left">
345-
<h2 class="text-2xl font-black text-white tracking-tight">"Surprise Box"</h2>
346-
<button on:click=move |_| on_close.run(()) class="text-white/40 hover:text-white transition-colors text-2xl">"✕"</button>
341+
<div class="fixed inset-0 z-[200] flex items-center justify-center p-6 bg-black/40 backdrop-blur-md animate-fade-in" on:click=move |_| on_close.run(())>
342+
<div class="glass-dark border border-white/10 rounded-[2.5rem] w-full max-w-lg shadow-[0_50px_100px_-20px_rgba(0,0,0,0.5)] overflow-hidden animate-scale-in" on:click=|ev| ev.stop_propagation()>
343+
<div class="px-8 py-6 border-b border-white/5 flex justify-between items-center">
344+
<div class="flex items-center gap-3">
345+
<div class="p-2 bg-obsidian-accent/10 rounded-xl">
346+
<svg class="w-5 h-5 text-obsidian-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
347+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
348+
</svg>
349+
</div>
350+
<h2 class="text-xl font-black text-obsidian-heading tracking-tight">"Cipher Box"</h2>
347351
</div>
352+
<button on:click=move |_| on_close.run(()) class="w-10 h-10 rounded-full flex items-center justify-center text-obsidian-text/40 hover:bg-white/5 hover:text-white transition-all">"✕"</button>
353+
</div>
348354

349-
<div class="py-4 flex justify-center">
350-
<div class="w-16 h-16 bg-gradient-to-br from-obsidian-accent to-obsidian-accent/50 rounded-2xl flex items-center justify-center shadow-lg shadow-obsidian-accent/20 animate-bounce">
351-
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
352-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
355+
<div class="p-8 space-y-8 text-center">
356+
<div class="relative py-4 flex justify-center">
357+
<div class="absolute inset-0 bg-obsidian-accent/20 blur-3xl rounded-full scale-50"></div>
358+
<div class="relative w-20 h-20 bg-gradient-to-br from-obsidian-accent to-obsidian-accent-light rounded-3xl flex items-center justify-center shadow-2xl shadow-obsidian-accent/30 animate-pulse">
359+
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
360+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
353361
</svg>
354362
</div>
355363
</div>
356364

357365
<div class="space-y-4">
358-
<p class="text-obsidian-text/60 text-sm">"Enter your mathematical key to unlock the secret."</p>
366+
<p class="text-[12px] text-obsidian-text/40 font-bold uppercase tracking-[0.2em]">"Mathematical Key Injection"</p>
359367
<input
360368
type="text"
361-
placeholder="e.g. x^6"
362-
class="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-3 text-white focus:ring-2 focus:ring-obsidian-accent/50 outline-none transition-all placeholder:text-white/10 text-center font-mono"
369+
placeholder="Input expr (e.g. x^6)"
370+
class="w-full bg-black/40 border border-white/5 rounded-2xl px-6 py-4 text-white focus:ring-2 focus:ring-obsidian-accent/30 outline-none transition-all placeholder:text-white/5 text-center font-mono text-lg shadow-inner"
363371
on:input=move |ev| set_key_input.set(event_target_value(&ev))
364372
prop:value=key_input
365373
on:keydown=move |ev| {
@@ -370,29 +378,35 @@ pub fn SurpriseModal(
370378
/>
371379
<button
372380
on:click=move |_| { let _ = decrypt_action.dispatch(key_input.get()); }
373-
class="w-full bg-obsidian-accent hover:bg-obsidian-accent/80 text-white font-bold py-4 rounded-xl transition-all shadow-lg shadow-obsidian-accent/20 disabled:opacity-50 active:scale-95"
381+
class="w-full bg-gradient-to-br from-obsidian-accent to-obsidian-accent/80 hover:brightness-110 text-white font-black uppercase tracking-[0.2em] text-[11px] py-4 rounded-2xl transition-all shadow-[0_10px_30px_-10px_rgba(59,130,246,0.6)] disabled:opacity-30 active:scale-95 group"
374382
disabled=pending
375383
>
376-
<Show when=move || pending.get() fallback=|| "Unlock Surprise">"Unlocking..."</Show>
384+
<Show when=move || pending.get() fallback=|| "Initiate Decryption">
385+
<div class="flex items-center justify-center gap-2">
386+
<div class="w-3 h-3 border-2 border-white/20 border-t-white rounded-full animate-spin"></div>
387+
"Cracking..."
388+
</div>
389+
</Show>
377390
</button>
378391
</div>
379392

380393
<Transition fallback=|| ()>
381394
{move || result.get().map(|res| match res {
382395
Ok(msg) => view! {
383-
<div class="mt-6 p-8 bg-gradient-to-br from-obsidian-accent/10 to-transparent border border-obsidian-accent/20 rounded-2xl animate-in slide-in-from-bottom-8 zoom-in-90 duration-700 relative group">
384-
<div class="absolute -top-3 left-1/2 -translate-x-1/2 bg-obsidian-accent text-[10px] font-black uppercase tracking-widest px-3 py-1 rounded-full text-white">"Decrypted"</div>
385-
<p class="text-obsidian-accent leading-relaxed italic text-lg font-medium">"\"" {msg} "\""</p>
386-
<div class="mt-4 flex justify-center gap-1">
387-
<div class="w-1 h-1 bg-obsidian-accent rounded-full animate-ping"></div>
388-
<div class="w-1 h-1 bg-obsidian-accent rounded-full animate-ping delay-100"></div>
389-
<div class="w-1 h-1 bg-obsidian-accent rounded-full animate-ping delay-200"></div>
396+
<div class="mt-8 p-8 bg-white/2 border border-obsidian-accent/20 rounded-3xl animate-scale-in relative group overflow-hidden">
397+
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-obsidian-accent to-transparent opacity-50"></div>
398+
<div class="text-[9px] font-black uppercase tracking-[0.3em] text-obsidian-accent/40 mb-4">"Interpreted Signal"</div>
399+
<p class="text-white leading-relaxed italic text-lg font-bold tracking-tight">"\"" {msg} "\""</p>
400+
<div class="mt-6 flex justify-center gap-1.5 opacity-20">
401+
<div class="w-1 h-1 bg-obsidian-accent rounded-full animate-bounce"></div>
402+
<div class="w-1 h-1 bg-obsidian-accent rounded-full animate-bounce delay-150"></div>
403+
<div class="w-1 h-1 bg-obsidian-accent rounded-full animate-bounce delay-300"></div>
390404
</div>
391405
</div>
392406
}.into_any(),
393407
Err(e) => view! {
394-
<div class="mt-6 p-4 bg-red-500/10 border border-red-500/20 rounded-xl animate-shake duration-300">
395-
<p class="text-red-400 text-sm font-bold">{e.to_string()}</p>
408+
<div class="mt-8 p-4 bg-red-500/5 border border-red-500/10 rounded-2xl animate-shake">
409+
<p class="text-red-400 text-[11px] font-black uppercase tracking-wider">{e.to_string()}</p>
396410
</div>
397411
}.into_any(),
398412
})}

‎web_app/style/tailwind.css‎

Lines changed: 105 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,99 @@
11
@import "tailwindcss";
2+
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');
23

34
@config "../tailwind.config.js";
45

56
@theme {
6-
--color-obsidian-bg: #1a1b1e;
7-
--color-obsidian-sidebar: #25262b;
8-
--color-obsidian-card: #2c2d32;
9-
--color-obsidian-accent: #5c7cfa;
10-
--color-obsidian-accent-light: #748ffc;
11-
--color-obsidian-text: #c1c2c5;
12-
--color-obsidian-heading: #ffffff;
7+
--color-obsidian-bg: #0f1012;
8+
--color-obsidian-sidebar: #16171a;
9+
--color-obsidian-card: #1c1d21;
10+
--color-obsidian-accent: #3b82f6;
11+
--color-obsidian-accent-light: #60a5fa;
12+
--color-obsidian-text: #94a3b8;
13+
--color-obsidian-heading: #f8fafc;
14+
--font-sans: 'Outfit', ui-sans-serif, system-ui, sans-serif;
1315
}
1416

1517
@layer base {
1618
body {
17-
@apply bg-obsidian-bg text-obsidian-text selection:bg-obsidian-accent/30;
18-
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
19+
@apply bg-obsidian-bg text-obsidian-text selection:bg-obsidian-accent/30 selection:text-white transition-colors duration-500 font-sans;
1920
}
2021
}
2122

2223
@layer utilities {
23-
24-
/* Glassmorphism effect */
2524
.glass {
26-
background: rgba(255, 255, 255, 0.05);
27-
backdrop-filter: blur(10px);
28-
-webkit-backdrop-filter: blur(10px);
29-
border: 1px solid rgba(255, 255, 255, 0.1);
25+
background: rgba(255, 255, 255, 0.03);
26+
backdrop-filter: blur(12px) saturate(180%);
27+
-webkit-backdrop-filter: blur(12px) saturate(180%);
28+
border: 1px solid rgba(255, 255, 255, 0.08);
29+
}
30+
31+
.glass-dark {
32+
background: rgba(0, 0, 0, 0.3);
33+
backdrop-filter: blur(20px) saturate(160%);
34+
-webkit-backdrop-filter: blur(20px) saturate(160%);
35+
border: 1px solid rgba(255, 255, 255, 0.05);
36+
}
37+
38+
.glow-hover {
39+
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
40+
}
41+
42+
.glow-hover:hover {
43+
box-shadow: 0 0 40px rgba(59, 130, 246, 0.15);
44+
border-color: rgba(59, 130, 246, 0.3);
45+
transform: translateY(-4px) scale(1.01);
46+
}
47+
48+
.text-glow {
49+
text-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
50+
}
51+
52+
.gradient-text {
53+
@apply bg-clip-text text-transparent bg-gradient-to-r from-obsidian-accent to-obsidian-accent-light;
3054
}
3155

32-
/* Animated gradient background */
3356
.gradient-animate {
34-
background: linear-gradient(45deg, #5c7cfa, #748ffc, #5c7cfa);
35-
background-size: 200% 200%;
36-
animation: gradient-shift 3s ease infinite;
57+
background: linear-gradient(-45deg, #0f1012, #16171a, #1e293b, #111827);
58+
background-size: 400% 400%;
59+
animation: gradient-flow 15s ease infinite;
3760
}
3861

39-
/* Shimmer loading effect */
4062
.shimmer {
41-
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
63+
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
4264
background-size: 200% 100%;
43-
animation: shimmer 1.5s infinite;
65+
animation: shimmer 2s infinite;
4466
}
4567

46-
/* Pulse glow effect */
47-
.pulse-glow {
48-
animation: pulse-glow 2s ease-in-out infinite;
68+
.stagger-1 {
69+
animation-delay: 100ms;
4970
}
5071

51-
/* Float animation */
52-
.float {
53-
animation: float 3s ease-in-out infinite;
72+
.stagger-2 {
73+
animation-delay: 200ms;
5474
}
55-
}
5675

57-
@keyframes gradient-shift {
76+
.stagger-3 {
77+
animation-delay: 300ms;
78+
}
5879

59-
0%,
60-
100% {
80+
.stagger-4 {
81+
animation-delay: 400ms;
82+
}
83+
}
84+
85+
@keyframes gradient-flow {
86+
0% {
6187
background-position: 0% 50%;
6288
}
6389

6490
50% {
6591
background-position: 100% 50%;
6692
}
93+
94+
100% {
95+
background-position: 0% 50%;
96+
}
6797
}
6898

6999
@keyframes shimmer {
@@ -76,26 +106,60 @@
76106
}
77107
}
78108

79-
@keyframes pulse-glow {
109+
@keyframes slide-up {
110+
from {
111+
opacity: 0;
112+
transform: translateY(20px);
113+
}
80114

81-
0%,
82-
100% {
83-
box-shadow: 0 0 20px rgba(92, 124, 250, 0.3);
115+
to {
116+
opacity: 1;
117+
transform: translateY(0);
84118
}
119+
}
85120

86-
50% {
87-
box-shadow: 0 0 30px rgba(92, 124, 250, 0.6);
121+
@keyframes fade-in {
122+
from {
123+
opacity: 0;
124+
}
125+
126+
to {
127+
opacity: 1;
88128
}
89129
}
90130

91-
@keyframes float {
131+
@keyframes scale-in {
132+
from {
133+
opacity: 0;
134+
transform: scale(0.95);
135+
}
136+
137+
to {
138+
opacity: 1;
139+
transform: scale(1);
140+
}
141+
}
142+
143+
@keyframes pulse-glow {
92144

93145
0%,
94146
100% {
95-
transform: translateY(0px);
147+
box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
96148
}
97149

98150
50% {
99-
transform: translateY(-10px);
151+
box-shadow: 0 0 40px rgba(59, 130, 246, 0.4);
100152
}
153+
}
154+
155+
.animate-slide-up {
156+
animation: slide-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
157+
}
158+
159+
.animate-fade-in {
160+
animation: fade-in 1s ease-out both;
161+
}
162+
163+
.animate-scale-in {
164+
animation: scale-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
101165
}

0 commit comments

Comments
 (0)