Spythere/stacjownik
1
0
Fork 0
mirror of https://github.com/Spythere/stacjownik.git synced 2026-05-03 13:28:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

dodatkowe opcje darowizny

Browse Source
This commit is contained in:
Spythere
2023-12-01 16:11:56 +01:00
parent bc58196804
commit b7bc9625b8
6 changed files with 148 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/images/icon-buycoffee.svg
+56
View File
@@ -0,0 +1,56 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 159 38.8" style="enable-background:new 0 0 159 38.8;" xml:space="preserve">
<style type="text/css">
.st0{fill:#00A962;}
.st1{enable-background:new ;}
.st2{fill:#FFFFFF;}
.st3{fill:#1E3A33;}
.st4{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
</style>
<path class="st0" d="M139.6,38.7H19.4C8.7,38.7,0,30.1,0,19.3l0,0C0,8.6,8.7-0.1,19.4-0.1h120.2c10.7,0,19.4,8.7,19.4,19.4l0,0
C159,30.1,150.3,38.7,139.6,38.7z"/>
<g class="st1">
<path class="st2" d="M48.9,23.7c0,0.5-0.4,0.9-0.9,0.9c-0.5,0-0.9-0.4-0.9-0.9v-9.9c0-0.6,0.4-1,1-1h3.7c2.5,0,3.6,1.9,3.6,3.7
s-1,3.7-3.6,3.7h-2.9V23.7z M48.9,14.5v4.1h2.8c1.3,0,1.9-1,1.9-2c0-1-0.5-2.1-1.8-2.1H48.9z"/>
<path class="st2" d="M56.3,20.5c0-2.5,1.9-4.1,4.1-4.1c2.3,0,4.2,1.6,4.2,4.1c0,2.5-1.9,4.2-4.2,4.2C58.2,24.7,56.3,23,56.3,20.5z
M62.9,20.5c0-1.5-1.1-2.4-2.4-2.4c-1.3,0-2.4,1-2.4,2.4c0,1.5,1.1,2.5,2.4,2.5C61.8,23,62.9,22,62.9,20.5z"/>
<path class="st2" d="M66.6,21.9c0.4-0.2,0.7,0.1,0.9,0.3c0.3,0.6,0.9,1,1.7,1c0.8,0,1.4-0.4,1.4-1c0-0.5-0.5-0.7-1.1-0.9l-1.1-0.3
c-1.7-0.5-2.3-1.4-2.2-2.7c0.1-1.2,1.4-2.1,2.8-2.1c1.1,0,2,0.3,2.5,1.2c0.2,0.4,0.1,0.8-0.2,1c-0.3,0.2-0.6,0.2-1-0.1
c-0.4-0.4-1-0.5-1.4-0.5c-0.4,0-0.9,0.2-1.1,0.4c-0.1,0.2-0.2,0.4-0.1,0.7c0.1,0.3,0.6,0.5,1,0.6l1.2,0.3c1.7,0.4,2.1,1.5,2.1,2.3
c0,1.5-1.3,2.4-3.2,2.4c-1.2,0-2.5-0.6-2.9-1.8C66,22.5,66.2,22.1,66.6,21.9z"/>
<path class="st2" d="M74.6,18h-0.8c-0.4,0-0.7-0.3-0.7-0.7c0-0.4,0.3-0.7,0.7-0.7h0.8v-2.2c0-0.5,0.4-0.9,0.9-0.9
c0.5,0,0.9,0.4,0.9,0.9v2.2h1c0.4,0,0.7,0.3,0.7,0.7c0,0.4-0.3,0.7-0.7,0.7h-1v5.7c0,0.5-0.4,0.9-0.9,0.9c-0.5,0-0.9-0.4-0.9-0.9
V18z"/>
<path class="st2" d="M85.7,23.4c-0.5,0.9-1.7,1.3-2.7,1.3c-2.1,0-4-1.6-4-4.1c0-2.5,1.9-4.1,4-4.1c1,0,2.1,0.4,2.7,1.3v-0.3
c0-0.5,0.4-0.9,0.9-0.9c0.5,0,0.9,0.4,0.9,0.9v6.3c0,0.5-0.4,0.9-0.9,0.9c-0.5,0-0.9-0.4-0.9-0.9V23.4z M83.2,23
c1.3,0,2.4-0.9,2.4-2.5c0-1.6-1.3-2.4-2.4-2.4c-1.3,0-2.4,1-2.4,2.4C80.8,22,81.9,23,83.2,23z"/>
<path class="st2" d="M95.1,16.6c0.5,0,0.9,0.3,1,0.8l1.6,4.6l1.7-4.8c0.2-0.5,0.6-0.7,1.1-0.6c0.5,0.1,0.7,0.6,0.6,1.1l-2.4,6.3
c-0.2,0.5-0.5,0.7-0.9,0.7h-0.1c-0.4,0-0.7-0.2-0.9-0.7L95.1,19l-1.7,4.9c-0.2,0.5-0.5,0.7-0.9,0.7h-0.1c-0.4,0-0.7-0.2-0.9-0.7
l-2.4-6.3c-0.2-0.4,0.1-1,0.6-1.1c0.5-0.1,0.9,0.1,1.1,0.6l1.7,4.8l1.6-4.6C94.2,16.8,94.6,16.6,95.1,16.6L95.1,16.6z"/>
<path class="st2" d="M112.9,23.2c0.3,0.3,0.3,0.9,0,1.2c-0.4,0.3-0.9,0.3-1.2,0l-3.2-3.5v2.9c0,0.5-0.4,0.9-0.9,0.9
c-0.5,0-0.8-0.4-0.8-0.9V13.1c0-0.5,0.4-0.9,0.8-0.9c0.5,0,0.9,0.4,0.9,0.9v6.1l2.4-2.4c0.3-0.3,0.9-0.3,1.2,0
c0.3,0.4,0.3,0.9,0,1.2l-2,2.1L112.9,23.2z"/>
<path class="st2" d="M120.8,23.4c-0.5,0.9-1.7,1.3-2.7,1.3c-2.1,0-4-1.6-4-4.1c0-2.5,1.9-4.1,4-4.1c1,0,2.1,0.4,2.7,1.3v-0.3
c0-0.5,0.4-0.9,0.8-0.9c0.5,0,0.9,0.4,0.9,0.9v6.3c0,0.5-0.4,0.9-0.9,0.9c-0.5,0-0.8-0.4-0.8-0.9V23.4z M118.4,23
c1.3,0,2.4-0.9,2.4-2.5c0-1.6-1.3-2.4-2.4-2.4c-1.3,0-2.4,1-2.4,2.4C115.9,22,117,23,118.4,23z"/>
<path class="st2" d="M130.3,16.6c0.5,0,0.9,0.3,1,0.8l1.6,4.6l1.7-4.8c0.2-0.5,0.6-0.7,1.1-0.6c0.5,0.1,0.7,0.6,0.6,1.1l-2.4,6.3
c-0.2,0.5-0.5,0.7-0.9,0.7h-0.1c-0.4,0-0.7-0.2-0.9-0.7l-1.7-4.9l-1.7,4.9c-0.2,0.5-0.5,0.7-0.9,0.7h-0.1c-0.4,0-0.7-0.2-0.9-0.7
l-2.4-6.3c-0.2-0.4,0.1-1,0.6-1.1c0.5-0.1,0.9,0.1,1.1,0.6l1.7,4.8l1.6-4.6C129.3,16.8,129.7,16.6,130.3,16.6L130.3,16.6z"/>
<path class="st2" d="M143.6,26.1c0,0.2,0.2,0.5,0.6,0.5c0.1,0,0.4,0,0.5-0.4c0.1-0.4,0.3-0.5,0.7-0.5c0.4,0.1,0.6,0.4,0.5,0.8
c-0.2,0.8-0.9,1.4-1.7,1.4c-1.3,0-1.9-0.8-1.9-1.7c0-0.2,0.1-0.6,0.2-0.8l0.5-1c-0.5,0.2-1,0.3-1.6,0.3c-2.3,0-4.1-1.6-4.1-4.2
c0-2.5,1.8-4.1,4.1-4.1c2.2,0,3.9,1.5,4,4c0,0.5-0.4,0.8-0.8,0.8h-5.5c0.2,1.2,1.2,2,2.4,2c0.8,0,1.3-0.3,1.9-0.8
c0.3-0.2,0.8-0.4,1.1-0.1c0.3,0.3,0.2,0.7,0,1.1C143.5,25.9,143.6,26.1,143.6,26.1z M143.7,19.9c-0.2-1.2-1.1-2-2.3-2
c-1.2,0-2.2,0.7-2.3,2H143.7z"/>
</g>
<g>
<path class="st3" d="M21.6,26.7c-4.9,0-7.4-2.6-8.5-4.9c-1.2-2.4-1.4-5-1.4-6c0-2.2,1.8-3.8,4.3-3.8h7c0.7,0,1.3,0.6,1.3,1.3
c0,0.7-0.6,1.3-1.3,1.3h-7c-0.5,0-1,0.1-1.3,0.4c-0.3,0.2-0.4,0.4-0.4,0.8c0,1.9,0.5,8.3,7.3,8.3c5.8,0,7.3-4.6,7.9-8.1
c0-0.2,0-0.3,0.1-0.4c0.2-0.9,0.4-1.7,0.8-2.3C31,12.4,31.9,12,33,12c0.5,0,0.9,0.2,1.2,0.5c0.5,0.4,0.9,1.3,1.2,4.1
c0.1,1.4,0.1,2.6,0.1,2.7c0,0.7-0.6,1.3-1.3,1.3l0,0c-0.7,0-1.3-0.6-1.3-1.3c0,0,0-1.1-0.1-2.3c-0.1-1-0.2-1.7-0.3-2.1
c-0.1,0.3-0.2,0.9-0.3,1.1c0,0.1,0,0.2-0.1,0.4c-0.2,1.2-0.7,3.7-2.1,5.9c-0.8,1.3-1.9,2.3-3.2,3.1C25.4,26.3,23.6,26.7,21.6,26.7z
"/>
<ellipse class="st4" cx="26.7" cy="13.3" rx="1.3" ry="1.3"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

public/images/icon-coffee.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.9 KiB

src/components/Global/Donation.vue
+58 -41
View File
@@ -1,7 +1,7 @@
<template> <template>
<div class="donation-modal" @keydown.esc="toggleModal(false)"> <div class="donation-modal" @keydown.esc="toggleModal(false)">
<button <button
class="modal_button action btn--image" class="btn-toggle btn--image"
ref="btn" ref="btn"
@click="toggleModal(true)" @click="toggleModal(true)"
@focus="toggleModal(false)" @focus="toggleModal(false)"
@@ -28,7 +28,7 @@
<b>{{ $t('donations.p2-b3') }}</b> <b>{{ $t('donations.p2-b3') }}</b>
</template> </template>
<template v-slot:link> <template v-slot:link>
<a href="https://discord.gg/x2mpNN3svk" target="_blank"> <a class="discord" href="https://discord.gg/x2mpNN3svk" target="_blank">
{{ $t('donations.p2-a1') }} {{ $t('donations.p2-a1') }}
</a> </a>
</template> </template>
@@ -58,19 +58,28 @@
</div> </div>
<div class="modal_actions"> <div class="modal_actions">
<button class="modal_button exit btn--image" @click="toggleModal(false)"> <a
class="modal-action a-button btn--image coffee"
href="https://buycoffee.to/spythere"
target="_blank"
>
<img src="/images/icon-coffee.png" width="20" alt="buycoffee.to donation" />
{{ $t('donations.action-buycoffee') }}
</a>
<a
class="modal-action a-button btn--image paypal"
href="https://www.paypal.com/donate/?hosted_button_id=EDB3SKFAHXFTW"
target="_blank"
>
<img src="/images/icon-dollar.svg" alt="paypal donation" />
{{ $t('donations.action-paypal') }}
</a>
<button class="modal-action btn--image exit" @click="toggleModal(false)">
<img src="/images/icon-exit.svg" alt="dollar donation icon" /> <img src="/images/icon-exit.svg" alt="dollar donation icon" />
{{ $t('donations.action-exit') }} {{ $t('donations.action-exit') }}
</button> </button>
<form action="https://www.paypal.com/donate" method="post">
<input type="hidden" name="hosted_button_id" value="EDB3SKFAHXFTW" />
<button class="modal_button action btn--image" @click="toggleModal(false)">
<img src="/images/icon-dollar.svg" alt="dollar donation icon" />
{{ $t('donations.action-confirm') }}
</button>
</form>
</div> </div>
</div> </div>
</AnimatedModal> </AnimatedModal>
@@ -99,25 +108,13 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../styles/responsive.scss'; @import '../../styles/responsive.scss';
.modal_button { button.btn-toggle {
&.action { $btnColor: #254069;
$btnColor: #254069;
background-color: $btnColor; background-color: $btnColor;
&:hover { &:hover {
background-color: lighten($btnColor, 10%); background-color: lighten($btnColor, 5%);
}
}
&.exit {
$btnColor: crimson;
background-color: $btnColor;
&:hover {
background-color: lighten($btnColor, 10%);
}
} }
@include smallScreen { @include smallScreen {
@@ -127,16 +124,6 @@ export default defineComponent({
} }
} }
.modal-logo {
position: absolute;
top: 0;
left: 50%;
width: 6em;
transform: translate(-50%, -50%);
}
.modal_content { .modal_content {
display: grid; display: grid;
grid-template-rows: 1fr auto; grid-template-rows: 1fr auto;
@@ -157,7 +144,7 @@ export default defineComponent({
text-align: justify; text-align: justify;
} }
a { a.discord {
text-decoration: underline; text-decoration: underline;
} }
} }
@@ -174,11 +161,41 @@ export default defineComponent({
.modal_actions { .modal_actions {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(13em, 1fr)); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.5em; gap: 0.5em;
form button { form button {
width: 100%; width: 100%;
} }
} }
.modal_actions > .modal-action {
&.paypal {
$btnColor: #254069;
background-color: $btnColor;
&:hover {
background-color: lighten($btnColor, 5%);
}
}
&.coffee {
$btnColor: #009255;
background-color: $btnColor;
&:hover {
background-color: lighten($btnColor, 5%);
}
}
&.exit {
$btnColor: #686868;
background-color: $btnColor;
&:hover {
background-color: lighten($btnColor, 5%);
}
}
}
</style> </style>
src/locales/en.json
+2 -1
View File
@@ -14,7 +14,8 @@
"p4-b2": "a symbolic highlight", "p4-b2": "a symbolic highlight",
"p5": "Thank you and enjoy the app!<br />~ Spythere", "p5": "Thank you and enjoy the app!<br />~ Spythere",
"action-exit": "Maybe next time...", "action-exit": "Maybe next time...",
"action-confirm": "DONATE!", "action-paypal": "DONATE WITH PAYPAL",
"action-buycoffee": "BUY ME A COFFEE!",
"dispatcher-message": "Dispatcher supporting the Stacjownik project!", "dispatcher-message": "Dispatcher supporting the Stacjownik project!",
"driver-message": "Driver supporting the Stacjownik project!" "driver-message": "Driver supporting the Stacjownik project!"
}, },
src/locales/pl.json
+2 -1
View File
@@ -14,7 +14,8 @@
"p4-b2": "wyróżnienie", "p4-b2": "wyróżnienie",
"p5": "Dzięki i miłego korzystania z aplikacji! <br />~ Spythere", "p5": "Dzięki i miłego korzystania z aplikacji! <br />~ Spythere",
"action-exit": "Może kiedy indziej...", "action-exit": "Może kiedy indziej...",
"action-confirm": "WSPOMÓŻ!", "action-paypal": "PRZELEJ PAYPALEM",
"action-buycoffee": "POSTAW KAWĘ!",
"dispatcher-message": "Dyżurny wspierający projekt Stacjownika!", "dispatcher-message": "Dyżurny wspierający projekt Stacjownika!",
"driver-message": "Maszynista wspierający projekt Stacjownika!" "driver-message": "Maszynista wspierający projekt Stacjownika!"
}, },
src/styles/global.scss
+30 -29
View File
@@ -164,7 +164,8 @@ ul {
} }
} }
button { button,
a.a-button {
cursor: pointer; cursor: pointer;
color: white; color: white;
background: none; background: none;
@@ -184,44 +185,44 @@ button {
pointer-events: none; pointer-events: none;
opacity: 0.85; opacity: 0.85;
} }
}
button.btn--filled { &.btn--filled {
background-color: #1a1a1a; background-color: #1a1a1a;
&:hover { &:hover {
background-color: #2a2a2a; background-color: #2a2a2a;
}
} }
}
button.btn--action { &.btn--action {
background-color: #424242; background-color: #424242;
border-radius: 0.25em; border-radius: 0.25em;
&:hover { &:hover {
background-color: #555; background-color: #555;
}
} }
}
button.btn--option { &.btn--option {
color: white; color: white;
background-color: #333; background-color: #333;
&.checked { &.checked {
color: var(--clr-primary); color: var(--clr-primary);
font-weight: bold;
background-color: #3c3c3c;
}
}
&.btn--image {
font-weight: bold; font-weight: bold;
padding: 0.35em 0.75em;
background-color: #3c3c3c; img {
} width: 1.5em;
} vertical-align: middle;
}
button.btn--image {
font-weight: bold;
padding: 0.35em 0.75em;
img {
width: 1.5em;
vertical-align: middle;
} }
} }