mirror of
https://github.com/rustdesk/doc.rustdesk.com.git
synced 2024-11-07 08:54:20 +01:00
cutomize ok
This commit is contained in:
rustdesk
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",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-img-placeholder": "^0.1.5",
|
||||
"sweetalert2": "^11.14.2",
|
||||
"swiper": "^11.1.14",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"unpic": "^3.18.0",
|
||||
@ -8839,18 +8839,6 @@
|
||||
"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": {
|
||||
"version": "0.14.2",
|
||||
"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",
|
||||
"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": {
|
||||
"version": "11.1.14",
|
||||
"resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.14.tgz",
|
||||
|
||||
@ -43,6 +43,7 @@
|
||||
"lucide-react": "^0.451.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"sweetalert2": "^11.14.2",
|
||||
"swiper": "^11.1.14",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"unpic": "^3.18.0",
|
||||
|
||||
@ -34,6 +34,7 @@ const {
|
||||
callToAction,
|
||||
callToAction2,
|
||||
hasRibbon = false,
|
||||
content,
|
||||
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">
|
||||
@ -80,13 +81,14 @@ const {
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
{content && <Fragment set:html={content} />}
|
||||
{callToAction && (
|
||||
<div class={`flex justify-center`}>
|
||||
{typeof callToAction === 'string' ? (
|
||||
<Fragment set:html={callToAction} />
|
||||
) : (
|
||||
callToAction &&
|
||||
callToAction.href && (
|
||||
(callToAction.href || callToAction.onclick) && (
|
||||
<Button {...(hasRibbon ? { variant: 'primary' } : {})} {...callToAction} />
|
||||
)
|
||||
)}
|
||||
@ -98,7 +100,7 @@ const {
|
||||
<Fragment set:html={callToAction2} />
|
||||
) : (
|
||||
callToAction2 &&
|
||||
callToAction2.href && (
|
||||
(callToAction2.href || callToAction2.onclick) && (
|
||||
<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}>
|
||||
<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 ******************* -->
|
||||
@ -92,9 +120,9 @@ const metadata = {
|
||||
},
|
||||
],
|
||||
callToAction: {
|
||||
target: '_blank',
|
||||
text: 'Get started',
|
||||
href: '#',
|
||||
text: 'Buy now',
|
||||
onclick: 'gotoBuy("https://rustdesk.com/api/lic/stripe/checkout?type=Individual")',
|
||||
variant: 'primary',
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -133,9 +161,8 @@ const metadata = {
|
||||
},
|
||||
],
|
||||
callToAction: {
|
||||
target: '_blank',
|
||||
text: 'Get started',
|
||||
href: '#',
|
||||
text: 'Buy now',
|
||||
onclick: 'gotoBuy("https://rustdesk.com/api/lic/stripe/checkout?type=Basic")',
|
||||
},
|
||||
hasRibbon: true,
|
||||
ribbonTitle: 'popular',
|
||||
@ -143,7 +170,7 @@ const metadata = {
|
||||
{
|
||||
title: 'Customized',
|
||||
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',
|
||||
items: [
|
||||
{
|
||||
@ -157,10 +184,56 @@ const metadata = {
|
||||
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: {
|
||||
target: '_blank',
|
||||
text: 'Get started',
|
||||
href: 'https://rustdesk.com/docs/en/self-host/rustdesk-server-oss/',
|
||||
text: 'Buy now',
|
||||
onclick: 'submit()',
|
||||
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;
|
||||
hasRibbon?: boolean;
|
||||
ribbonTitle?: string;
|
||||
content?: string;
|
||||
}
|
||||
|
||||
export interface Testimonial {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user