mirror of
https://github.com/rustdesk/doc.rustdesk.com.git
synced 2025-06-21 10:17:43 +02:00
cutomize ok
This commit is contained in:
parent
f689cfec4e
commit
13b9da4121
24
v3/package-lock.json
generated
24
v3/package-lock.json
generated
@ -29,7 +29,7 @@
|
|||||||
"lucide-react": "^0.451.0",
|
"lucide-react": "^0.451.0",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
"react-img-placeholder": "^0.1.5",
|
"sweetalert2": "^11.14.2",
|
||||||
"swiper": "^11.1.14",
|
"swiper": "^11.1.14",
|
||||||
"tailwindcss-animate": "^1.0.7",
|
"tailwindcss-animate": "^1.0.7",
|
||||||
"unpic": "^3.18.0",
|
"unpic": "^3.18.0",
|
||||||
@ -8839,18 +8839,6 @@
|
|||||||
"react": "^18.3.1"
|
"react": "^18.3.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/react-img-placeholder": {
|
|
||||||
"version": "0.1.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/react-img-placeholder/-/react-img-placeholder-0.1.5.tgz",
|
|
||||||
"integrity": "sha512-peXMI1ScTAw09Xm1ck42NeaZbQP97M0NqSoTBlVFKgdNh1x85y0ps0sjEb2RsOwUYzG0FL7x1+/6HOUx9JexiQ==",
|
|
||||||
"license": "MIT",
|
|
||||||
"engines": {
|
|
||||||
"node": ">=10"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"react": ">=16"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/react-refresh": {
|
"node_modules/react-refresh": {
|
||||||
"version": "0.14.2",
|
"version": "0.14.2",
|
||||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
|
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
|
||||||
@ -9706,6 +9694,16 @@
|
|||||||
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
|
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
|
||||||
"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
|
"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
|
||||||
},
|
},
|
||||||
|
"node_modules/sweetalert2": {
|
||||||
|
"version": "11.14.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.14.2.tgz",
|
||||||
|
"integrity": "sha512-ZJcnp+akKLFDdwTJkayZCMWfdEOxxchInuJ8gz/Xlx/nrdTfAM3Sb+NBbBNdqcfXn0h1CamN+VKDxjP8xbWqrg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"funding": {
|
||||||
|
"type": "individual",
|
||||||
|
"url": "https://github.com/sponsors/limonte"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/swiper": {
|
"node_modules/swiper": {
|
||||||
"version": "11.1.14",
|
"version": "11.1.14",
|
||||||
"resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.14.tgz",
|
"resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.14.tgz",
|
||||||
|
@ -43,6 +43,7 @@
|
|||||||
"lucide-react": "^0.451.0",
|
"lucide-react": "^0.451.0",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
|
"sweetalert2": "^11.14.2",
|
||||||
"swiper": "^11.1.14",
|
"swiper": "^11.1.14",
|
||||||
"tailwindcss-animate": "^1.0.7",
|
"tailwindcss-animate": "^1.0.7",
|
||||||
"unpic": "^3.18.0",
|
"unpic": "^3.18.0",
|
||||||
|
@ -34,6 +34,7 @@ const {
|
|||||||
callToAction,
|
callToAction,
|
||||||
callToAction2,
|
callToAction2,
|
||||||
hasRibbon = false,
|
hasRibbon = false,
|
||||||
|
content,
|
||||||
ribbonTitle,
|
ribbonTitle,
|
||||||
}) => (
|
}) => (
|
||||||
<div class="col-span-3 mx-auto flex w-full sm:col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-1">
|
<div class="col-span-3 mx-auto flex w-full sm:col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-1">
|
||||||
@ -80,13 +81,14 @@ const {
|
|||||||
</ul>
|
</ul>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
{content && <Fragment set:html={content} />}
|
||||||
{callToAction && (
|
{callToAction && (
|
||||||
<div class={`flex justify-center`}>
|
<div class={`flex justify-center`}>
|
||||||
{typeof callToAction === 'string' ? (
|
{typeof callToAction === 'string' ? (
|
||||||
<Fragment set:html={callToAction} />
|
<Fragment set:html={callToAction} />
|
||||||
) : (
|
) : (
|
||||||
callToAction &&
|
callToAction &&
|
||||||
callToAction.href && (
|
(callToAction.href || callToAction.onclick) && (
|
||||||
<Button {...(hasRibbon ? { variant: 'primary' } : {})} {...callToAction} />
|
<Button {...(hasRibbon ? { variant: 'primary' } : {})} {...callToAction} />
|
||||||
)
|
)
|
||||||
)}
|
)}
|
||||||
@ -98,7 +100,7 @@ const {
|
|||||||
<Fragment set:html={callToAction2} />
|
<Fragment set:html={callToAction2} />
|
||||||
) : (
|
) : (
|
||||||
callToAction2 &&
|
callToAction2 &&
|
||||||
callToAction2.href && (
|
(callToAction2.href || callToAction2.onclick) && (
|
||||||
<Button {...(hasRibbon ? { variant: 'primary' } : {})} {...callToAction2} />
|
<Button {...(hasRibbon ? { variant: 'primary' } : {})} {...callToAction2} />
|
||||||
)
|
)
|
||||||
)}
|
)}
|
||||||
|
@ -12,10 +12,38 @@ const metadata = {
|
|||||||
};
|
};
|
||||||
---
|
---
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Swal from 'sweetalert2';
|
||||||
|
window['gotoBuy'] = function (redirectUrl) {
|
||||||
|
Swal.fire({
|
||||||
|
title: 'Please Confirm',
|
||||||
|
html: '<p style="text-align:left">Do you want to proceed to the purchase page? <br><br>Please note that what you are purchasing is <b style="font-size: 2em">NOT</b> a <span style="text-decoration:line-through">SaaS(Software as a Service)</span> subscription. <br><br>Instead, it is a license for a <b style="font-size: 2em">self-hosting</b> solution, which requires you to deploy it on your own server (cloud server, e.g. AWS EC2, Azure VM, Vultr VPS etc, or your on-premise server). <br><br>Please <b style="font-size: 2em">don\'t</b> buy if you don\'t know what is self-hosting',
|
||||||
|
icon: 'question',
|
||||||
|
showCancelButton: true,
|
||||||
|
confirmButtonText: 'Yes',
|
||||||
|
cancelButtonText: 'No',
|
||||||
|
}).then((result) => {
|
||||||
|
if (result.isConfirmed) {
|
||||||
|
Swal.fire({
|
||||||
|
title: 'Please Confirm',
|
||||||
|
html: 'Please note that we <span class="text-3xl font-bold">don\'t</span> offer <span class="text-3xl font-bold">refunds</span>. We strongly recommend <span class="underline font-bold">testing our free self-hosting plan</span> before considering the purchase of our Pro plan. Are you still interested in proceeding?',
|
||||||
|
showCancelButton: true,
|
||||||
|
confirmButtonText: 'Yes',
|
||||||
|
cancelButtonText: 'No',
|
||||||
|
}).then((result) => {
|
||||||
|
if (result.isConfirmed) {
|
||||||
|
window.open(redirectUrl, '_blank');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
<Layout metadata={metadata}>
|
<Layout metadata={metadata}>
|
||||||
<Note
|
<Note
|
||||||
title="Note"
|
title="Note"
|
||||||
subtitle='This pricing is for <span class="text-xl text-blue-500">self-hosting</span>solution, it is not a <span class="line-through text-xl text-blue-500">SaaS</span> subscription.'
|
subtitle='This pricing is for <span class="text-xl text-blue-500">self-hosting</span>solution, it is <span class="text-3xl font-extrabold">NOT</span> a <span class="line-through text-xl text-blue-500">SaaS</span> subscription.'
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- Pricing Widget ******************* -->
|
<!-- Pricing Widget ******************* -->
|
||||||
@ -92,9 +120,9 @@ const metadata = {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
callToAction: {
|
callToAction: {
|
||||||
target: '_blank',
|
text: 'Buy now',
|
||||||
text: 'Get started',
|
onclick: 'gotoBuy("https://rustdesk.com/api/lic/stripe/checkout?type=Individual")',
|
||||||
href: '#',
|
variant: 'primary',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -133,9 +161,8 @@ const metadata = {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
callToAction: {
|
callToAction: {
|
||||||
target: '_blank',
|
text: 'Buy now',
|
||||||
text: 'Get started',
|
onclick: 'gotoBuy("https://rustdesk.com/api/lic/stripe/checkout?type=Basic")',
|
||||||
href: '#',
|
|
||||||
},
|
},
|
||||||
hasRibbon: true,
|
hasRibbon: true,
|
||||||
ribbonTitle: 'popular',
|
ribbonTitle: 'popular',
|
||||||
@ -143,7 +170,7 @@ const metadata = {
|
|||||||
{
|
{
|
||||||
title: 'Customized',
|
title: 'Customized',
|
||||||
subtitle: 'Customized Pro Plan',
|
subtitle: 'Customized Pro Plan',
|
||||||
price: '0 <span class="text-sm">/month</span>',
|
price: '<span id="cprice">19.90</span> <span class="text-sm">/month</span>',
|
||||||
period: 'billed annually',
|
period: 'billed annually',
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
@ -157,10 +184,56 @@ const metadata = {
|
|||||||
description: '$0.1 for each additional device',
|
description: '$0.1 for each additional device',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
content: `
|
||||||
|
<form class="flex flex-col space-y-4 mx-3">
|
||||||
|
<label for="users" class="text-left font-bold">Number of Licensed Users:</label>
|
||||||
|
<input class="bg-white text-black rounded-md border border-gray-300 py-1 px-2 w-24 h-10" type="number" id="users" name="users" value="10" min="10" max="500" step="10">
|
||||||
|
<input type="range" id="usersSlider" class="slider" name="usersRange" value="10" min="10" max="500" step="10">
|
||||||
|
<label for="devices" class="text-left font-bold">Number of Managed Devices:</label>
|
||||||
|
<input class="bg-white text-black rounded-md border border-gray-300 py-1 px-2 w-24 h-10" type="number" id="devices" name="devices" value="100" min="100" max="5000" step="100">
|
||||||
|
<input type="range" id="devicesSlider" class="slider" name="devicesRange" value="100" min="100" max="5000" step="100">
|
||||||
|
</form>
|
||||||
|
<script>
|
||||||
|
var users = 10;
|
||||||
|
var devices = 100;
|
||||||
|
function submit() {
|
||||||
|
redirectUrl = "https://rustdesk.com/api/lic/stripe/checkout?type=Customized&users=" + users + "&devices=" + devices;
|
||||||
|
gotoBuy(redirectUrl);
|
||||||
|
}
|
||||||
|
function calculatePrice() {
|
||||||
|
users = parseInt(document.getElementById("users").value);
|
||||||
|
devices = parseInt(document.getElementById("devices").value);
|
||||||
|
if (!users || users < 10) users = 10;
|
||||||
|
if (devices < 100) devices = 100;
|
||||||
|
var price = 19.9 + (users - 10) + (devices - 100) * 0.1;
|
||||||
|
document.getElementById("cprice").innerText = price.toFixed(price >= 100 ? 1 : 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("users").oninput = function() {
|
||||||
|
document.getElementById("usersSlider").value = this.value;
|
||||||
|
calculatePrice();
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("devices").oninput = function() {
|
||||||
|
document.getElementById("devicesSlider").value = this.value;
|
||||||
|
calculatePrice();
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("usersSlider").oninput = function() {
|
||||||
|
document.getElementById("users").value = this.value;
|
||||||
|
calculatePrice();
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("devicesSlider").oninput = function() {
|
||||||
|
document.getElementById("devices").value = this.value;
|
||||||
|
calculatePrice();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
`,
|
||||||
callToAction: {
|
callToAction: {
|
||||||
target: '_blank',
|
text: 'Buy now',
|
||||||
text: 'Get started',
|
onclick: 'submit()',
|
||||||
href: 'https://rustdesk.com/docs/en/self-host/rustdesk-server-oss/',
|
variant: 'primary',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
|
1
v3/src/types.d.ts
vendored
1
v3/src/types.d.ts
vendored
@ -152,6 +152,7 @@ export interface Price {
|
|||||||
callToAction2?: CallToAction;
|
callToAction2?: CallToAction;
|
||||||
hasRibbon?: boolean;
|
hasRibbon?: boolean;
|
||||||
ribbonTitle?: string;
|
ribbonTitle?: string;
|
||||||
|
content?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Testimonial {
|
export interface Testimonial {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user