Добавил DonateHelpPage

client/components/Reader/HelpPage/DonateHelpPage/DonateHelpPage.vue

@@ -0,0 +1,110 @@
+<template>
+    <div class="page">
+        <div class="box">
+            <p class="p">Проект существует исключительно на личном энтузиазме.</p>
+            <p class="p">Чтобы энтузиазма было побольше, вы можете пожертвовать на развитие проекта любую сумму:</p>
+            <div class="address">
+                <img class="logo" src="./assets/Yandex_Money_rgb_ru.png">
+                <el-button class="button" @click="donateYandexMoney">Пожертвовать</el-button><br>
+                <div class="para">{{ yandexAddress }}</div>
+            </div>
+
+            <div class="address">                
+                <img class="logo" src="./assets/bitcoin.png">
+                <el-button class="button" @click="copyAddress(bitcoinAddress, 'Bitcoin')">Скопировать</el-button><br>
+                <div class="para">{{ bitcoinAddress }}</div>
+            </div>
+
+            <div class="address">                
+                <img class="logo" src="./assets/litecoin.png">
+                <el-button class="button" @click="copyAddress(litecoinAddress, 'Litecoin')">Скопировать</el-button><br>
+                <div class="para">{{ litecoinAddress }}</div>
+            </div>
+
+            <div class="address">                
+                <img class="logo" src="./assets/monero.png">
+                <el-button class="button" @click="copyAddress(moneroAddress, 'Monero')">Скопировать</el-button><br>
+                <div class="para">{{ moneroAddress }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import {copyTextToClipboard} from '../../../../share/utils';
+
+export default @Component({
+})
+class DonateHelpPage extends Vue {
+    yandexAddress = '410018702323056';
+    bitcoinAddress = '3EbgZ7MK1UVaN38Gty5DCBtS4PknM4Ut85';
+    litecoinAddress = 'MP39Riec4oSNB3XMjiquKoLWxbufRYNXxZ';
+    moneroAddress = '8BQPnvHcPSHM5gMQsmuypDgx9NNsYqwXKfDDuswEyF2Q2ewQSfd2pkK6ydH2wmMyq2JViZvy9DQ35hLMx7g72mFWNJTPtnz';
+
+    created() {
+    }
+
+    donateYandexMoney() {
+        window.open(`https://money.yandex.ru/to/${this.yandexAddress}`, '_blank');
+    }
+
+    async copyAddress(address, prefix) {
+        const result = await copyTextToClipboard(address);
+        const msg = (result ? `${prefix}-адрес ${address} успешно скопирован в буфер обмена` : 'Копирование не удалось');
+        if (result)
+            this.$notify.success({message: msg});
+        else
+            this.$notify.error({message: msg});
+    }
+}
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.page {
+    flex: 1;
+    padding: 15px;
+    overflow-y: auto;
+    font-size: 120%;
+    line-height: 130%;
+    display: flex;
+}
+
+.p {
+    margin: 0;
+    padding: 0;
+    text-indent: 20px;
+}
+
+.box {
+    flex: 1;
+    max-width: 550px;
+    overflow-wrap: break-word;
+}
+
+h5 {
+    margin: 0;
+}
+
+.address {
+    padding-top: 10px;
+    margin-top: 20px;
+}
+
+.para {
+    margin: 10px 10px 10px 40px;
+}
+
+.button {
+    margin-left: 10px;
+}
+
+.logo {
+    width: 130px;
+    position: relative;
+    top: 10px;
+}
+</style>

client/components/Reader/HelpPage/HelpPage.vue

@@ -17,6 +17,7 @@
                         <MouseHelpPage></MouseHelpPage>
                     </el-tab-pane>
                     <el-tab-pane label="Помочь проекту">
+                        <DonateHelpPage></DonateHelpPage>
                     </el-tab-pane>
 
                 </el-tabs>
@@ -34,6 +35,7 @@ import Window from '../../share/Window.vue';
 import CommonHelpPage from './CommonHelpPage/CommonHelpPage.vue';
 import HotkeysHelpPage from './HotkeysHelpPage/HotkeysHelpPage.vue';
 import MouseHelpPage from './MouseHelpPage/MouseHelpPage.vue';
+import DonateHelpPage from './DonateHelpPage/DonateHelpPage.vue';
 
 export default @Component({
     components: {
@@ -41,6 +43,7 @@ export default @Component({
         CommonHelpPage,
         HotkeysHelpPage,
         MouseHelpPage,
+        DonateHelpPage,
     },
 })
 class HelpPage extends Vue {

client/share/utils.js

@@ -28,4 +28,38 @@ export function formatDate(d, format) {
                 `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`;
     }
     
+}
+
+export function fallbackCopyTextToClipboard(text) {
+    let textArea = document.createElement('textarea');
+    textArea.value = text;
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+
+    let result = false;
+    try {
+         result = document.execCommand('copy');
+    } catch (e) {
+        //
+    }
+
+    document.body.removeChild(textArea);
+    return result;
+}
+
+export async function copyTextToClipboard(text) {
+    if (!navigator.clipboard) {
+        return fallbackCopyTextToClipboard(text);
+    }
+
+    let result = false;
+    try {
+        await navigator.clipboard.writeText(text);
+        result = true;
+    } catch (e) {
+        //
+    }
+
+    return result;
 }