From 20a99a65d85fd55526ff0e3bee382794f7e528f5 Mon Sep 17 00:00:00 2001 From: cymon Date: Fri, 2 Jun 2023 22:07:57 +0000 Subject: [PATCH] feat: copy to clipboard, qr code generation, further donation methods --- package.json | 1 + src/assets/patreon-logo.png | Bin 2310 -> 0 bytes src/assets/paypal-logo.png | Bin 6766 -> 0 bytes src/components/Donate/Methods/Methods.astro | 256 ++++++++---------- src/components/Donate/Methods/Methods.scss | 177 ++++++++++-- .../Donate/Methods/icons/algorand.svg | 3 + .../Donate/Methods/icons/bitcoin.svg | 4 + .../Donate/Methods/icons/cardano.svg | 32 +++ .../Donate/Methods/icons/cosmos.svg | 11 + .../Donate/Methods/icons/ethereum.svg | 8 + .../Donate/Methods/icons/handshake.svg | 3 + .../Donate/Methods/icons/litecoin.svg | 4 + .../Donate/Methods/icons/monero.svg | 5 + .../Donate/Methods/icons/polygon.svg | 3 + .../Donate/Methods/icons/secret.svg | 10 + .../Donate/Methods/icons/siacoin.svg | 5 + .../Donate/Methods/icons/solana.svg | 17 ++ src/components/Home/PoweredBy/PoweredBy.astro | 4 +- src/components/Layout/Footer/Footer.astro | 2 +- src/components/Layout/Navbar/Navbar.scss | 4 +- src/styles/global.scss | 13 +- src/styles/mixins.scss | 26 ++ src/styles/vars.scss | 2 + 23 files changed, 419 insertions(+), 171 deletions(-) delete mode 100644 src/assets/patreon-logo.png delete mode 100644 src/assets/paypal-logo.png create mode 100644 src/components/Donate/Methods/icons/algorand.svg create mode 100644 src/components/Donate/Methods/icons/bitcoin.svg create mode 100644 src/components/Donate/Methods/icons/cardano.svg create mode 100644 src/components/Donate/Methods/icons/cosmos.svg create mode 100644 src/components/Donate/Methods/icons/ethereum.svg create mode 100644 src/components/Donate/Methods/icons/handshake.svg create mode 100644 src/components/Donate/Methods/icons/litecoin.svg create mode 100644 src/components/Donate/Methods/icons/monero.svg create mode 100644 src/components/Donate/Methods/icons/polygon.svg create mode 100644 src/components/Donate/Methods/icons/secret.svg create mode 100644 src/components/Donate/Methods/icons/siacoin.svg create mode 100644 src/components/Donate/Methods/icons/solana.svg diff --git a/package.json b/package.json index dcee5f4..338f3d4 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "astro-icon": "^0.8.0", "autoprefixer": "^10.4.14", "dynamic-react-grid": "^0.2.0", + "qrcode": "^1.5.3", "react": "^18.2.0", "react-dom": "^18.2.0", "sass": "^1.62.1", diff --git a/src/assets/patreon-logo.png b/src/assets/patreon-logo.png deleted file mode 100644 index 3d6ede94f63f70afbdee181b319dc465583367d3..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2310 zcmc(h`9BkmAIGQf%7~02O3L|J z=Ge?!Ig%sSm?Cq|5ubg3`~C;tA71b0Bjy9sgvcdoWK-Bi~B^N%+ z_$mb*;nyKK{5L*?0x!E`0RV{ceHAvYio@_B0`+V>B$L;P?-c665gO zi_Bu-q+zH9Noo2JMwkcfWA*B5!cy+gH6v>mIe&21(o{OqYt}#Cd*oAl1*nt}ga6|yUB6j%!yq?k>p<_ChukHOw|Q)gCcd2lq>)@NsH zk%1dNx1Sdh3>BS(awpHsui(t53-#AGva`4^wzm@@2p|=z-z!Qs=;AJW%?$w;%Pt!5|xSPW~W!N_yLXjwD% zCl5aQaLDk(8RGG_Ompe_Tq*o!)1BP1>@+QqY63C=2?q6 z&%`DphiE;p?&>=p&c(4ZX<9a0XvI4&x9oQCZoRKlUd)P#Ge(yvHCA7VnAQDdh$r{4 zYeeGx&u3;%iQ7*YU1{wS#9*^FUAi-NFjC!)E?YwKKMb2)wI@Y56rwFIIck$b0y1V_GN&6xF;Xp!)J7Nbxm%B0!u(3>ykr~FAt*I?Ng_VPJew*qC?UAZ z2y?KidhdnD3wmP<5QL0+489oOyF#1BOpKN_rzHEy96vT!tyzw$iiK6?jD$V4_1dIV z<<)EWWED>(_ej+SL`81L`NhKAKP-vUI#imv6#HFuozITy+@-36^Ku!gbHKvj@uIZ4GQ`Be!hVKSfYV)^iHLd_3TUNub@ibNOL3bx6 zxCa{23~eoUL0RQ$okQ00OfP5o@lSe{2he4HaOyEe^6;LgQEHQr-trCB_@_AEy}`Sd z^7l-F1ocsCrwmezh;8q3jql{Uaow0hpR8WG(X1j@6=FQNM+Q9qxV(>u^92#oy*{zT zl1^}u0lk@;QbBDrmrNgNhNUv__@#?F|BDo3BAaAUom8hRA6t2YW(qerjnrfp6pF`q zhzkzvTfTH_q}pfk9rp-!OhKYT@_~+n(F%Gy$)a@Rwvd>;^~-d_*3LNJ zCs1Su$sCqyO1vMv9;CJQ`#;Bg?njH<1wK+XP@8CDd6Fyb%yGXa+Z65dFDUg=`#Qbh zguU*Cxa296xU0wvIp^n|H;{{c18=H4LzHIC%#Zbw$f&ail^|6-_Atpbuj$piA-sJY znsfta^p}%^PPaBxCe1J1?a3&?iSsDCL^mpyH*%6f2&<2k$x~{4q^C!@cE#zM4z%OG zf;ep^#gD@=or)!lv2&%EjG>KyU}_M|7; zRSQ1ofjnncOBMNvGD^pPT&43o=6nlTq;r%av^cY>&0uNXGhChqcwPr}Bh6mVAot()k2Pmr zuhwxYH@tvnohuhNeMZ4>CnQHfZOc5O!`n|Mp$+h3)N7g$; zcPn~}N2cRYk!zdlg9_Z*TEBiHf+-o27`(_` zQfQ-JZ!_;ZWy9vwoz|)&VB9b+mOZE)dX!&NQut;I@(zs&Mr{;h|qAS&;g= z*ZbI_m{&xgGvbeqwt9(YU3;PV{G?$27vrN;)H7enjXJB#)!*6aVdr%eH>OTyyn8`o z7>mWa$GynFTYW)|j+YHZB$Bv;A*rp5qEd|^o2Ui7)#0G?IdyK6j1s0yZUQDCntlYQ zIMITZYgp)i9`|_=!k8@1nfu-@7>2t+5Gyh*zW^(rB|yHx57J6yb7C;UxG%_l(@Y=HbnMSMqbMo@XrE3d$j?*O(4$4hT6Vq*UR#|K`Y diff --git a/src/assets/paypal-logo.png b/src/assets/paypal-logo.png deleted file mode 100644 index 25273bbc3b9d80409ae6f8b2290c68a9d2634fa8..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6766 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 { + currencies.push({ + id: id, + title: title, + address: address, + svgLogo: await import('./icons/' + id + '.svg?raw'), + qrSmall: await QRCode.toDataURL(address, { version: 6, scale: 1, margin: 1 }), + qrLarge: await QRCode.toDataURL(address, { version: 6, scale: 7, margin: 2 }) + }); +}; + +await addCurrency('bitcoin', 'Bitcoin (BTC)', 'bc1q9xq2w4w2hjc240rs6mf0g8gpzz3rmcz4h77a2a'); +await addCurrency('litecoin', 'Litecoin (LTC)', 'ltc1qgk6fc4u6grqyhfzw208477ze35vrr5tcwhq8zq'); +await addCurrency('ethereum', 'Ethereum (ETH, USDT/USDC, ERC20)', '0x63cd2C691632720Ff2ABDD0b6AABA2466D3Fe468'); +await addCurrency('polygon', 'Polygon (MATIC)', '0x63cd2C691632720Ff2ABDD0b6AABA2466D3Fe468'); +await addCurrency('solana', 'Solana (SOL)', '4nMRucCuqttipwQXm31vBgoaxDW6o25TnD8fj1imviCu'); +await addCurrency('cardano', 'Cardano (ADA)', 'addr1q9jd69s53pdy9j567a27ac6uvc2966x0rjz2l9sxy4y5w8383jl87mrdf6uuk9ja7lmagm2p4vw30sa42kjylxxrdufqucgst6'); +await addCurrency('siacoin', 'Siacoin (SC)', '7506caa950cdddbaec8f465937b50324e942ac6f5280a053662e58e3cc8bdb543ab88ccd5c23'); +await addCurrency('monero', 'Monero (XMR)', '48A33fSyFo9YAiux3KHKVBagPGvqmcr2h4oy5pufJn6NUWyZsPF6PAufmrET3gLJjsLwxfU7HU9xe8mEeCqtHqvZN3Ly12h'); +await addCurrency('handshake', 'Handshake (HNS)', 'hs1qe67ak3j2u4yrq0qnfs2hmycxqdvaf9v5rjsxzy'); +await addCurrency('cosmos', 'Cosmos (ATOM)', 'cosmos1pvy8zyzqwz2r2jl9j9d3zrfmg6dqc5hyhj6d5z'); +await addCurrency('secret', 'Secret (SCRT)', 'secret18377vc3af588ggauhrpuyfd954lmmu05xqhf0y'); +await addCurrency('algorand', 'Algorand (ALGO)', '3QBE5TZ63TF5W7V2QRJWRB72M7INQLA3RZW4XHD3ISRE7CRYCVNU4EEVAE'); ---

Donate Cryptocurrency

- -
+ + + \ No newline at end of file diff --git a/src/components/Donate/Methods/Methods.scss b/src/components/Donate/Methods/Methods.scss index 597df55..d714ae7 100644 --- a/src/components/Donate/Methods/Methods.scss +++ b/src/components/Donate/Methods/Methods.scss @@ -29,7 +29,7 @@ > div { display: flex; flex-direction: column; - padding: 4em 4em 2em; + padding: 4em 4em 1em; background: $color-blue-charcoal; border: 0.1em solid transparent; border-radius: 1em; @@ -39,30 +39,95 @@ border-color: $color-aquamarine; } - > div { + > div:first-child { display: flex; align-items: center; gap: 2em; - margin-bottom: 2em; + margin-bottom: 3em; + + svg { + flex-shrink: 0; + @include fluid-max-width-height(3.4375rem, 3.4375rem); + } + + h3 { + flex-grow: 1; + font-family: $font-family-jetbrains-mono; + @include fluid-font-size(1.4375rem); + } + + img { + @include fluid-width-height(3.4375rem, 3.4375rem); + image-rendering: pixelated; + cursor: zoom-in; + } } } - img, svg { - @include fluid-max-width-height(3.4375rem, 3.4375rem); - } - - h3 { - flex-grow: 1; - font-family: $font-family-jetbrains-mono; - @include fluid-font-size(1.4375rem); - } - .address { + display: flex; + margin-bottom: 3em; color: $color-cloud; - margin-bottom: 1em; - word-break: break-all; - user-select: all; - @include fluid-font-size(1.3125rem); + + div { + order: 1; + position: relative; + @include fluid-font-size(1.3125rem); + word-break: break-all; + user-select: all; + } + + button { + order: 2; + flex-shrink: 0; + @include fluid-width-height(1.875rem, 1.875rem); + @include fluid-margin-lr-rem(0.78125rem); + mask-image: url('data:image/svg+xml,'); + background: $color-cloud; + transition: background $transition-duration; + + &:hover { + background: $color-white; + } + + &.success { + mask-image: url('data:image/svg+xml,'); + background: $color-aquamarine; + } + } + + button:hover + div, button.success + div { + &::before { + content: ""; + position: absolute; + inset: -0.5em; + padding: 0.5em; + background: $color-blue-charcoal; + animation: $transition-duration overlay-opacity forwards; + } + + &::after { + content: "Copy to Clipboard"; + position: absolute; + top: 0; + right: -0.5em; + padding: 0 0.5em; + background: $color-blue-charcoal; + text-align: center; + white-space: nowrap; + color: $color-white; + border-radius: 0.5em 0 0 0.5em; + animation: $transition-duration overlay-opacity forwards; + transition: color $transition-duration; + } + } + + button.success + div { + &::after { + content: "Copied to Clipboard"; + color: $color-aquamarine; + } + } } } @@ -109,15 +174,31 @@ border-color: #f26822; } + #donate-handshake:hover { + border-color: #fff; + } + + #donate-cosmos:hover { + border-color: #6f7390; + } + + #donate-secret:hover { + border-color: #fff; + } + + #donate-algorand:hover { + border-color: #fff; + } + #donate-paypal { &:hover { - border-color: #019be1; + border-color: #0070e0; } .btn-main { - color: $color-white; - background: #019be1; - border-color: #019be1; + color: #fff; + background: #0070e0; + border-color: #0070e0; &:hover { background: inherit; @@ -131,7 +212,7 @@ } .btn-main { - color: $color-white; + color: #fff; background: #ff424d; border-color: #ff424d; @@ -140,4 +221,56 @@ } } } + + #donate-liberapay { + &:hover { + border-color: #f6c915; + } + + .btn-main { + color: #000; + background: #f6c915; + border-color: #f6c915; + + &:hover { + color: inherit; + background: inherit; + } + } + } + + #donate-github { + &:hover { + border-color: #fff; + } + + .btn-main { + color: #000; + background: #fff; + border-color: #fff; + + &:hover { + color: inherit; + background: inherit; + } + } + } +} + +#qr-dialog { + padding: 0; + + &::backdrop { + background: rgba($color-black, 0.85); + } +} + +@keyframes overlay-opacity { + 0% { + opacity: 0; + } + + 100% { + opacity: 0.75; + } } diff --git a/src/components/Donate/Methods/icons/algorand.svg b/src/components/Donate/Methods/icons/algorand.svg new file mode 100644 index 0000000..4273af5 --- /dev/null +++ b/src/components/Donate/Methods/icons/algorand.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/components/Donate/Methods/icons/bitcoin.svg b/src/components/Donate/Methods/icons/bitcoin.svg new file mode 100644 index 0000000..46595c3 --- /dev/null +++ b/src/components/Donate/Methods/icons/bitcoin.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/components/Donate/Methods/icons/cardano.svg b/src/components/Donate/Methods/icons/cardano.svg new file mode 100644 index 0000000..0baa777 --- /dev/null +++ b/src/components/Donate/Methods/icons/cardano.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/Donate/Methods/icons/cosmos.svg b/src/components/Donate/Methods/icons/cosmos.svg new file mode 100644 index 0000000..6108d4f --- /dev/null +++ b/src/components/Donate/Methods/icons/cosmos.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/Donate/Methods/icons/ethereum.svg b/src/components/Donate/Methods/icons/ethereum.svg new file mode 100644 index 0000000..3f0e216 --- /dev/null +++ b/src/components/Donate/Methods/icons/ethereum.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/src/components/Donate/Methods/icons/handshake.svg b/src/components/Donate/Methods/icons/handshake.svg new file mode 100644 index 0000000..c11b041 --- /dev/null +++ b/src/components/Donate/Methods/icons/handshake.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/components/Donate/Methods/icons/litecoin.svg b/src/components/Donate/Methods/icons/litecoin.svg new file mode 100644 index 0000000..749a3cd --- /dev/null +++ b/src/components/Donate/Methods/icons/litecoin.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/components/Donate/Methods/icons/monero.svg b/src/components/Donate/Methods/icons/monero.svg new file mode 100644 index 0000000..2d2587d --- /dev/null +++ b/src/components/Donate/Methods/icons/monero.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/components/Donate/Methods/icons/polygon.svg b/src/components/Donate/Methods/icons/polygon.svg new file mode 100644 index 0000000..6f4f2e2 --- /dev/null +++ b/src/components/Donate/Methods/icons/polygon.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/components/Donate/Methods/icons/secret.svg b/src/components/Donate/Methods/icons/secret.svg new file mode 100644 index 0000000..b2279f1 --- /dev/null +++ b/src/components/Donate/Methods/icons/secret.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/src/components/Donate/Methods/icons/siacoin.svg b/src/components/Donate/Methods/icons/siacoin.svg new file mode 100644 index 0000000..b0bcbcc --- /dev/null +++ b/src/components/Donate/Methods/icons/siacoin.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/components/Donate/Methods/icons/solana.svg b/src/components/Donate/Methods/icons/solana.svg new file mode 100644 index 0000000..fc6b7da --- /dev/null +++ b/src/components/Donate/Methods/icons/solana.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/Home/PoweredBy/PoweredBy.astro b/src/components/Home/PoweredBy/PoweredBy.astro index 41de058..51720af 100644 --- a/src/components/Home/PoweredBy/PoweredBy.astro +++ b/src/components/Home/PoweredBy/PoweredBy.astro @@ -13,8 +13,8 @@ import './PoweredBy.scss';
  • Donate + Donate
  • Download App diff --git a/src/components/Layout/Navbar/Navbar.scss b/src/components/Layout/Navbar/Navbar.scss index f7ec50d..2990d8d 100644 --- a/src/components/Layout/Navbar/Navbar.scss +++ b/src/components/Layout/Navbar/Navbar.scss @@ -58,7 +58,7 @@ menu { bottom: 0; padding: 7.5em 7.5% 1em; background: rgba($color-body-bg, 0.85); - transition: right 200ms; + transition: right $transition-duration; overflow-y: auto; &.active { @@ -69,7 +69,7 @@ menu { position: fixed; inset: 0; background: $color-black; - animation: 200ms bg-opacity forwards; + animation: $transition-duration bg-opacity forwards; z-index: -1; } } diff --git a/src/styles/global.scss b/src/styles/global.scss index eeaa6e9..5f6ed05 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -35,18 +35,19 @@ main { flex-grow: 1; } -a { - transition: color 250ms; +a, button { + transition: color $transition-duration; } .btn-main { display: inline-block; + padding: 0.5em 0.8em; color: $color-black; background: $color-aquamarine; border: 0.05em solid $color-aquamarine; - padding: 0.5em 0.8em; border-radius: 0.25em; - transition: color 200ms, background 200ms; + transition: color $transition-duration, background $transition-duration; + white-space: nowrap; &:hover { color: $color-white; @@ -129,7 +130,7 @@ main.donate { font-family: $font-family-jaldi; line-height: 167%; color: $color-cloud; - transition: background 200ms; + transition: background $transition-duration; } ul { @@ -168,7 +169,7 @@ main.donate { border: 0.05em solid transparent; border-radius: 0.5em; font-family: $font-family-jaldi; - transition: border-color 200ms; + transition: border-color $transition-duration; &:hover { border-color: $color-aquamarine; diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss index 0fd4d39..e59cba1 100644 --- a/src/styles/mixins.scss +++ b/src/styles/mixins.scss @@ -260,3 +260,29 @@ $screen-default: 96rem; // 1536px } } } + +@mixin fluid-margin-lr-rem($margin) { + $min-margin: calc($margin / 1.2); + $max-margin: calc($margin * 2); + + $u1: unit($min-vw); + $u2: unit($max-vw); + $u3: unit($margin); + + @if $u1 == $u2 and $u1 == $u3 { + & { + margin-left: $min-margin; + margin-right: $min-margin; + + @media screen and (min-width: $min-vw) { + margin-left: calc(#{$min-margin} + #{strip-unit($max-margin - $min-margin)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})); + margin-right: calc(#{$min-margin} + #{strip-unit($max-margin - $min-margin)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})); + } + + @media screen and (min-width: $max-vw) { + margin-left: $max-margin; + margin-right: $max-margin; + } + } + } +} diff --git a/src/styles/vars.scss b/src/styles/vars.scss index 561105b..c64e480 100644 --- a/src/styles/vars.scss +++ b/src/styles/vars.scss @@ -10,3 +10,5 @@ $color-alto: #d9d9d9; $font-family-ibm-plex-sans-devanagari: "IBM Plex Sans Devanagari"; $font-family-jaldi: "Jaldi"; $font-family-jetbrains-mono: "JetBrains Mono"; + +$transition-duration: 250ms;