mirror of
https://github.com/ReVanced/revanced-website.git
synced 2026-01-25 03:41:02 +00:00
806a5de320
* feat: add donation page * fix: add src to `AnimatedImage` (#139) * feat: redesign page * feat: use api for donations, add QR code * tweak qr code modal and team member design * make team look better at different screen sizes * feat: use api for donations * fix: filled button comes first * feat: use better QR lib * list of crypto instead of table * feat: make crypto card expandable * feat: add donate back to footer-bottom * feat: add expand animation to crypto card * feat: accept an array of queries for prefetch * feat: use api for friendly crypto names * refactor: currency_codes are already uppercase * fix: capitalize crypto icon filenames * feat: use generic crypto icon when no icon is available * feat: add the pulsating heart animated image back * feat: improve animation of pulsating image * feat: decrease donation page top margin * feat: use preferred field to determine button type * use cards for donation methods * optimize images, improve accessibility, add crypto icon to dialogue * update cryptocurrencies modal title * clean up and add comments * add card image fallback * feat: dont hide heart on phones * feat: improve top margin on main class * GRAHH * feat: improve animations * add webp images with png fallbacks --------- Co-authored-by: ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ <29128703+milksense@users.noreply.github.com> Co-authored-by: afn <hey@afn.im> Co-authored-by: Ushie <ushiekane@gmail.com>
125 lines
2.2 KiB
Svelte
125 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
export let backgroundImageUrl: string;
|
|
export let foregroundImageUrl: string;
|
|
export let alt: string;
|
|
</script>
|
|
|
|
<div id="pulsating-image-scale">
|
|
<div id="pulsating-image-hover">
|
|
<div id="background" style:background-image="url({backgroundImageUrl})">
|
|
<img src={foregroundImageUrl} {alt} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
#pulsating-image-scale {
|
|
user-select: none;
|
|
cursor: pointer;
|
|
|
|
transition: transform 0.4s ease, filter 0.2s ease;
|
|
&:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
&:active {
|
|
filter: brightness(1.3);
|
|
transform: scaleY(0.95) rotate(-5deg);
|
|
}
|
|
|
|
#pulsating-image-hover {
|
|
height: 225px;
|
|
width: 225px;
|
|
transition: all 0.2s ease;
|
|
|
|
&:hover {
|
|
animation: wiggle 1s;
|
|
|
|
@keyframes wiggle {
|
|
0% {
|
|
transform: rotate(0);
|
|
}
|
|
25% {
|
|
transform: rotate(5deg);
|
|
}
|
|
50% {
|
|
transform: rotate(-5deg);
|
|
}
|
|
75% {
|
|
transform: rotate(5deg);
|
|
}
|
|
100% {
|
|
transform: rotate(0deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
#background {
|
|
pointer-events: none;
|
|
display: flex;
|
|
background-repeat: no-repeat;
|
|
justify-content: center;
|
|
align-items: center;
|
|
animation: pulse-size 1.2s infinite;
|
|
will-change: transform;
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
img {
|
|
height: 50%;
|
|
animation: double-pulse-size 1.2s infinite, pulse-glow 1.2s infinite;
|
|
will-change: transform, box-shadow;
|
|
|
|
@keyframes double-pulse-size {
|
|
0% {
|
|
transform: scale(0.7);
|
|
}
|
|
13% {
|
|
transform: scale(0.8);
|
|
}
|
|
30% {
|
|
transform: scale(0.7);
|
|
}
|
|
45% {
|
|
transform: scale(0.8);
|
|
}
|
|
100% {
|
|
transform: scale(0.7);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse-glow {
|
|
30% {
|
|
filter: drop-shadow(0 0 0rem var(--red-one));
|
|
}
|
|
45% {
|
|
filter: drop-shadow(0 0 0.5rem var(--red-one));
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes pulse-size {
|
|
0% {
|
|
transform: scale(0.7);
|
|
}
|
|
30% {
|
|
filter: brightness(1);
|
|
}
|
|
39% {
|
|
filter: brightness(1.2);
|
|
}
|
|
32% {
|
|
transform: scale(0.68);
|
|
}
|
|
50% {
|
|
transform: scale(0.78);
|
|
}
|
|
100% {
|
|
transform: scale(0.7);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|