Skip to content

Commit

Permalink
add style
Browse files Browse the repository at this point in the history
  • Loading branch information
@harsh-mn-yral
harsh-mn-yral committed Dec 9, 2024
1 parent d9ec5de commit 181c9a1
Show file tree
Hide file tree
Showing 8 changed files with 325 additions and 0 deletions.
Binary file added ssr/public/img/airdrop/bg.webp
View file
Binary file not shown.
Binary file added ssr/public/img/airdrop/cloud.webp
View file
Binary file not shown.
Binary file added ssr/public/img/airdrop/parachute.webp
View file
Binary file not shown.
133 changes: 133 additions & 0 deletions ssr/src/component/buttons.rs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
use leptos::*;

#[component]
pub fn Button(
children: Children,
on_click: impl Fn() + 'static,
#[prop(optional)] classes: String,
#[prop(optional)] alt_style: Signal<bool>,
#[prop(optional)] disabled: Signal<bool>,
) -> impl IntoView {
let on_click = move |_| on_click();
view! {
<button
on:click=on_click
disabled=disabled.get()
class=format!(
"w-full px-5 py-3 rounded-lg flex items-center transition-all justify-center gap-8 font-kumbh font-bold {} {}",
if disabled.get() {
"text-white/50"
} else if alt_style.get() {
"text-[#E2017B]"
} else {
"text-white"
},
classes,
)
style=format!(
"background: linear-gradient(73deg, {} );",
if disabled.get() {
"#DE98BE 0%, #E761A9 33%, #7B5369 100%"
} else if alt_style.get() {
"#FFF 0%, #FFF 1000%"
} else {
"#DA539C 0%, #E2017B 33%, #5F0938 100%"
},
)
>
{children()}
</button>
}
}

#[component]
pub fn LinkButton(
children: Children,
href: String,
#[prop(optional)] classes: String,
#[prop(optional)] alt_style: Signal<bool>,
#[prop(optional)] disabled: Signal<bool>,
) -> impl IntoView {
view! {
<a
href=href
class=format!(
"w-full px-5 py-3 rounded-lg flex items-center transition-all justify-center gap-8 font-kumbh font-bold {} {}",
if disabled.get() {
"text-white/50"
} else if alt_style.get() {
"text-[#E2017B]"
} else {
"text-white"
},
classes,
)
style=format!(
"background: linear-gradient(73deg, {} );",
if disabled.get() {
"#DE98BE 0%, #E761A9 33%, #7B5369 100%"
} else if alt_style.get() {
"#FFF 0%, #FFF 1000%"
} else {
"#DA539C 0%, #E2017B 33%, #5F0938 100%"
},
)
>
{children()}
</a>
}
}

#[component]
pub fn SecondaryLinkButton(
children: Children,
href: String,
#[prop(optional)] classes: String,
#[prop(optional)] alt_style: Signal<bool>,
) -> impl IntoView {
view! {
<a
href=href
class=format!(
"rounded-full border border-white text-sm font-bold font-kumbh px-5 py-2 {} {}",
if alt_style.get() {
"bg-transparent text-white hover:bg-white/10 active:bg-white/5"
} else {
"bg-white text-black"
},
classes,
)
>
{children()}
</a>
}
}

#[component]
pub fn SecondaryButton(
children: Children,
disabled: Signal<bool>,
alt_style: Signal<bool>,
classes: String,
on_click: impl Fn() + 'static,
) -> impl IntoView {
let on_click = move |_| on_click();
view! {
<button
disabled=disabled.get()
on:click=on_click
class=format!(
"rounded-full border border-white text-sm font-bold font-kumbh px-5 py-2 {} {}",
if alt_style.get() {
"bg-transparent text-white hover:bg-white/10 active:bg-white/5"
} else {
"bg-white text-black"
},
classes,
)
>

{children()}
</button>
}
}
1 change: 1 addition & 0 deletions ssr/src/component/mod.rs
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
pub mod airdrop_logo;
pub mod auth_providers;
pub mod back_btn;
pub mod buttons;
pub mod base_route;
pub mod bullet_loader;
pub mod canisters_prov;
Expand Down
155 changes: 155 additions & 0 deletions ssr/src/page/wallet/airdrop.rs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
use crate::component::buttons::Button;
use leptos::*;

#[component]
pub fn AirdropPage(
coin_image: String,
airdrop_amount: u64,
airdrop_from_token: String,
) -> impl IntoView {
let (claimed, set_claimed) = create_signal(false);

let bg_image = "/img/airdrop/bg.webp";
let cloud_image = "/img/airdrop/cloud.webp";
let parachute_image = "/img/airdrop/parachute.webp";

let handle_claim = move || {
if !claimed.get() {
set_claimed(true);
} else {
// goto wallet page
}
};

view! {
<div
style="background: radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 75%, rgba(50,0,28,0.5) 100%);"
class="h-screen w-screen relative items-center justify-center gap-8 text-white font-kumbh flex flex-col overflow-hidden"
>
<img
alt="bg"
src=bg_image
class="absolute inset-0 z-[1] fade-in w-full h-full object-cover"
/>

{move || {
if !claimed.get() {
view! {
<div class="relative h-[24rem] z-[2]">
<div
style="--y: 50px"
class="flex flex-col items-center justify-center airdrop-parachute"
>
<img alt="Parachute" src=parachute_image class="h-72 shrink-0" />

<div
style="background: radial-gradient(circle, rgb(244 141 199) 0%, rgb(255 255 255) 100%); box-shadow: 0px 0px 3.43px 0px #FFFFFF29;"
class="p-[1px] w-16 h-16 -translate-y-8 rounded-full"
>
<img
alt="Airdrop"
src=coin_image.clone()

class="w-full fade-in rounded-full h-full object-cover"
/>
</div>
</div>
<img
alt="Cloud"
src=cloud_image
style="--x: -50px"
class="w-12 absolute -top-10 left-0 airdrop-cloud"
/>
<img
alt="Cloud"
src=cloud_image
style="--x: 50px"
class="w-16 absolute bottom-10 right-10 airdrop-cloud"
/>
</div>
}
} else if claimed.get() {
view! {
<div class="h-[24rem] w-full flex items-center justify-center z-[2]">
<div class="h-[12rem] w-[12rem] relative">
<AnimatedTick />
<div
style="--duration:1500ms; background: radial-gradient(circle, rgba(27,0,15,1) 0%, rgba(0,0,0,1) 100%); box-shadow: 0px 0px 3.43px 0px #FFFFFF29;"
class="p-[1px] fade-in absolute w-16 h-16 -bottom-4 -right-4 rounded-full"
>
<img
alt="Airdrop"
src=coin_image.clone()
class="w-full fade-in rounded-full h-full object-cover"
/>
</div>
</div>
</div>
}
} else {
view! { <div class="invisible" /> }
}
}}


<div
style="--duration:1500ms"
class="fade-in flex text-xl font-bold z-[2] w-full flex-col gap-4 items-center justify-center px-8"
>
{if claimed.get() {
view! {
<div class="text-center">
{format!("{} {}", airdrop_amount, airdrop_from_token)} <br />
<span class="font-normal">"added to wallet"</span>
</div>
}
} else {
view! {
<div class="text-center">
{format!("{} {} Airdrop received", airdrop_amount, airdrop_from_token)}
</div>
}
}}
<Button
classes="max-w-96 mx-auto".to_string()
alt_style=claimed.into()
on_click=handle_claim
>
{if claimed.get() { "Go to wallet" } else { "Claim Now" }}
</Button>
</div>
</div>
}
}

#[component]
pub fn AnimatedTick() -> impl IntoView {
view! {
<div class="h-full w-full [perspective:800px]">
<div class="relative h-full w-full scale-110 animate-coin-spin-horizontal rounded-full [transform-style:preserve-3d] before:absolute before:h-full before:w-full before:rounded-full
before:bg-gradient-to-b before:from-[#FFC6F9] before:via-[#C01271] before:to-[#990D55] before:[transform-style:preserve-3d] before:[transform:translateZ(1px)]">
<div class="absolute flex h-full w-full items-center justify-center rounded-full text-center [transform:translateZ(2rem)] p-12
bg-gradient-to-br from-[#C01272] to-[#FF48B2]">
<div class="relative">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
class="h-full w-full text-current [transform-style:preserve-3d] [transform:translateZ(10px)]"
viewBox="0 -3 32 32"
version="1.1"
>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g
transform="translate(-518.000000, -1039.000000)"
fill="currentColor"
>
<path d="M548.783,1040.2 C547.188,1038.57 544.603,1038.57 543.008,1040.2 L528.569,1054.92 L524.96,1051.24 C523.365,1049.62 520.779,1049.62 519.185,1051.24 C517.59,1052.87 517.59,1055.51 519.185,1057.13 L525.682,1063.76 C527.277,1065.39 529.862,1065.39 531.457,1063.76 L548.783,1046.09 C550.378,1044.46 550.378,1041.82 548.783,1040.2"></path>
</g>
</g>
</svg>
</div>
</div>
</div>
</div>
}
}
2 changes: 2 additions & 0 deletions ssr/src/page/wallet/mod.rs
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
pub mod tokens;
pub mod transactions;
pub mod txn;
pub mod airdrop;

use crate::{
component::share_popup::ShareButtonWithFallbackPopup, state::canisters::unauth_canisters,
};
Expand Down
34 changes: 34 additions & 0 deletions ssr/style/input.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,3 +137,37 @@
content: "[=---]";
}
}

.fade-in {
animation: fade-in var(--duration, 200ms);
}

@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

.airdrop-cloud {
animation: cloud-bounce 20s infinite;
}

@keyframes cloud-bounce {
0% {
opacity: 0;
transform: translateX(calc(var(--x, 0) * 3));
}

50% {
opacity: 1;
transform: translateX(0);
}

100% {
opacity: 1;
transform: translateX(calc(var(--x, 0)));
}
}

0 comments on commit 181c9a1

Please sign in to comment.